En resumen
GLM-5V-Turbo es el modelo multimodal de codificación visual de ZhipuAI con una ventana de contexto de 200K, una salida máxima de 128K y soporte nativo para entradas de imágenes, vídeo, texto y archivos. Obtuvo 94.8 en el benchmark Design2Code (frente a 77.3 de Claude Opus 4.6) y cuesta $1.20/M tokens de entrada, $4/M tokens de salida. Esta guía cubre la configuración, la integración de la API y ejemplos prácticos para tareas de codificación basadas en visión.
Introducción
ZhipuAI (operando como Z.ai) lanzó GLM-5V-Turbo el 1 de abril de 2026. Es su primer modelo construido específicamente para tareas de codificación basadas en visión, donde la entrada es una imagen, una captura de pantalla o un vídeo, y la salida es código funcional.
El modelo forma parte de una familia que incluye GLM-5 (solo texto, 744B parámetros) y GLM-5-Turbo (codificación de texto optimizada). GLM-5V-Turbo añade comprensión multimodal nativa sobre la variante Turbo, utilizando un codificador de visión CogViT y una arquitectura de Predicción Multi-Token (MTP).
El número destacado: 94.8 en Design2Code, donde los modelos reproducen maquetas de interfaz de usuario como HTML/CSS. Claude Opus 4.6 obtuvo 77.3 en la misma prueba. Eso es una diferencia del 22% en la tarea específica de convertir diseños visuales en código.
Esta guía le muestra cómo llamar a la API de GLM-5V-Turbo, enviar imágenes y vídeos, habilitar el modo de pensamiento, transmitir respuestas, usar la llamada a funciones y probar su integración con Apidog.
Qué puede hacer GLM-5V-Turbo
Especificaciones principales
| Especificación | Valor |
|---|---|
| Ventana de contexto | 200K tokens (202,752) |
| Salida máxima | 128K tokens (131,072) |
| Modalidades de entrada | Imagen, vídeo, texto, archivo (PDF, Word) |
| Modalidad de salida | Texto |
| Precio de entrada | $1.20 por millón de tokens |
| Precio de salida | $4.00 por millón de tokens |
| Precio de lectura de caché | $0.24 por millón de tokens |
| Fecha de lanzamiento | 1 de abril de 2026 |
| Endpoint de la API | https://api.z.ai/api/paas/v4/chat/completions |
Capacidades soportadas
- Modo de pensamiento con tokens de razonamiento configurables (etiquetas
<think>) - Salida de streaming para respuestas en tiempo real
- Llamada a funciones para la integración de herramientas
- Caché de contexto para la optimización de conversaciones largas
- Salida estructurada mediante la configuración del formato de respuesta
Donde destaca
GLM-5V-Turbo está diseñado específicamente para una categoría limitada pero de alto valor: observar contenido visual y escribir código a partir de él. Los casos de uso clave son:
Recreación de frontend a partir de maquetas de diseño. Se le entrega una captura de pantalla de Figma o un diseño y genera HTML/CSS con precisión de píxel. La puntuación de 94.8 en Design2Code lo respalda con números concretos.
Exploración autónoma de GUI. El modelo se integra con OpenClaw (el framework de agentes de ZhipuAI) para la navegación autónoma de sitios web, el llenado de formularios y las pruebas de interacción. Obtuvo buenos resultados en los benchmarks AndroidWorld y WebVoyager para la operación de GUI.
Depuración de código a partir de capturas de pantalla. Envíe una captura de pantalla de una UI rota y el modelo identificará problemas de renderizado, errores de diseño y conflictos de CSS.
Extracción de documentos. Procese PDFs, documentos de Word e imágenes escaneadas para extraer datos estructurados, tablas y texto.
Donde no destaca
En la codificación de texto pura (sin entrada visual), Claude y GPT-5 siguen siendo líderes en tareas de backend, exploración de repositorios y arquitectura de sistemas. La fortaleza de GLM-5V-Turbo es específicamente cuando la entrada visual impulsa la tarea de codificación.
Primeros pasos: Configuración de la API
Obtenga su clave de API
- Regístrese en z.ai
- Navegue a la sección Claves de API en su panel de control
- Genere una nueva clave
- Guárdela de forma segura; la pasará como un token Bearer
Configuración base
Todas las solicitudes van a:
POST https://api.z.ai/api/paas/v4/chat/completions
Encabezados requeridos:
Authorization: Bearer YOUR_API_KEY
Content-Type: application/json
La API sigue las convenciones compatibles con OpenAI, por lo que si ha trabajado con las APIs de OpenAI o Anthropic, el formato de la solicitud le resultará familiar.
Envío de su primera solicitud con cURL
Análisis básico de imágenes
curl -X POST https://api.z.ai/api/paas/v4/chat/completions \
-H "Authorization: Bearer $ZAI_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"model": "glm-5v-turbo",
"messages": [
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": "https://example.com/dashboard-mockup.png"
}
},
{
"type": "text",
"text": "Recrea esta interfaz de usuario de panel de control como HTML y CSS responsivo. Usa clases de Tailwind CSS."
}
]
}
]
}'
Con el modo de pensamiento habilitado
El modo de pensamiento añade un paso de razonamiento antes de que el modelo genere su respuesta. Esto mejora la precisión en tareas de codificación complejas a costa de tokens de salida adicionales.
curl -X POST https://api.z.ai/api/paas/v4/chat/completions \
-H "Authorization: Bearer $ZAI_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"model": "glm-5v-turbo",
"messages": [
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": "https://example.com/login-form-screenshot.png"
}
},
{
"type": "text",
"text": "Este formulario de inicio de sesión tiene un error de diseño en dispositivos móviles. Identifica el problema y proporciona CSS corregido."
}
]
}
],
"thinking": {
"type": "enabled"
}
}'
Cuando el modo de pensamiento está habilitado, la respuesta incluye reasoning_content junto con el campo content estándar. Los tokens de razonamiento muestran el análisis paso a paso del modelo antes de producir la respuesta final.
Integración del SDK de Python
Instalación
pip install zai-sdk
O fije una versión específica:
pip install zai-sdk==0.0.4
Conversión básica de imagen a código
from zai import ZaiClient
client = ZaiClient(api_key="su-clave-api")
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": "https://example.com/pricing-page.png"
}
},
{
"type": "text",
"text": "Convierte el diseño de esta página de precios en un componente React usando Tailwind CSS. Incluye puntos de interrupción responsivos para móvil, tablet y escritorio."
}
]
}
],
thinking={"type": "enabled"}
)
print(response.choices[0].message.content)
Transmisión de respuestas
Para tareas de generación de código largas (diseños de página completos, UIs con múltiples componentes), la transmisión le proporciona la salida en tiempo real en lugar de esperar la respuesta completa:
from zai import ZaiClient
client = ZaiClient(api_key="su-clave-api")
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": "https://example.com/full-page-design.png"
}
},
{
"type": "text",
"text": "Crea esta página de aterrizaje completa como un único archivo HTML con CSS y JavaScript incrustados. Incluye desplazamiento suave, una barra de navegación fija y un formulario de contacto funcional."
}
]
}
],
stream=True
)
for chunk in response:
delta = chunk.choices[0].delta
# Imprimir tokens de razonamiento (modo de pensamiento)
if delta.reasoning_content:
print(f"[pensando] {delta.reasoning_content}", end="", flush=True)
# Imprimir el código generado
if delta.content:
print(delta.content, end="", flush=True)
Entrada de múltiples imágenes
Envíe varias imágenes en una sola solicitud. Esto es útil para comparar diseños, proporcionar referencias de estilo junto con maquetas, o enviar capturas de pantalla de antes/después para depuración:
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {"url": "https://example.com/design-mockup.png"}
},
{
"type": "image_url",
"image_url": {"url": "https://example.com/current-implementation.png"}
},
{
"type": "text",
"text": "La primera imagen es la maqueta de diseño. La segunda es la implementación actual. Identifica todas las diferencias visuales y proporciona soluciones CSS para que coincida con la maqueta."
}
]
}
]
)
Llamada a funciones
GLM-5V-Turbo soporta la llamada a funciones, permitiéndole integrarlo en flujos de trabajo basados en agentes donde el modelo puede solicitar acciones externas:
tools = [
{
"type": "function",
"function": {
"name": "save_component",
"description": "Guarda un componente React generado en un archivo",
"parameters": {
"type": "object",
"properties": {
"filename": {
"type": "string",
"description": "Nombre de archivo del componente, por ejemplo 'PricingCard.tsx'"
},
"code": {
"type": "string",
"description": "El código fuente completo del componente"
},
"dependencies": {
"type": "array",
"items": {"type": "string"},
"description": "Paquetes npm que este componente requiere"
}
},
"required": ["filename", "code"]
}
}
},
{
"type": "function",
"function": {
"name": "take_screenshot",
"description": "Toma una captura de pantalla de una URL para verificar la salida renderizada",
"parameters": {
"type": "object",
"properties": {
"url": {
"type": "string",
"description": "URL a capturar"
},
"viewport": {
"type": "string",
"description": "Tamaño del viewport: 'mobile', 'tablet' o 'desktop'"
}
},
"required": ["url"]
}
}
}
]
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {"url": "https://example.com/card-design.png"}
},
{
"type": "text",
"text": "Genera un componente React a partir de este diseño de tarjeta y guárdalo. Luego, toma una captura de pantalla para verificar."
}
]
}
],
tools=tools,
tool_choice="auto"
)
Integración del SDK de Java
Dependencia Maven
<dependency>
<groupId>ai.z.openapi</groupId>
<artifactId>zai-sdk</artifactId>
<version>0.3.0</version>
</dependency>
Gradle
implementation 'ai.z.openapi:zai-sdk:0.3.0'
Solicitud básica
import ai.z.openapi.ZaiClient;
import ai.z.openapi.model.*;
import java.util.Arrays;
public class GLM5VTurboExample {
public static void main(String[] args) {
String apiKey = System.getenv("ZAI_API_KEY");
ZaiClient client = ZaiClient.builder().ofZAI()
.apiKey(apiKey)
.build();
ChatCompletionCreateParams request =
ChatCompletionCreateParams.builder()
.model("glm-5v-turbo")
.messages(Arrays.asList(
ChatMessage.builder()
.role(ChatMessageRole.USER.value())
.content(Arrays.asList(
MessageContent.builder()
.type("image_url")
.imageUrl(ImageUrl.builder()
.url("https://example.com/mockup.png")
.build())
.build(),
MessageContent.builder()
.type("text")
.text("Convierte este diseño a HTML con Tailwind CSS.")
.build()
))
.build()
))
.build();
ChatCompletionResponse response =
client.chat().createChatCompletion(request);
System.out.println(response.getChoices()
.get(0).getMessage().getContent());
}
}
Streaming en Java
ChatCompletionCreateParams streamRequest =
ChatCompletionCreateParams.builder()
.model("glm-5v-turbo")
.stream(true)
.messages(Arrays.asList(
ChatMessage.builder()
.role(ChatMessageRole.USER.value())
.content(Arrays.asList(
MessageContent.builder()
.type("image_url")
.imageUrl(ImageUrl.builder()
.url("https://example.com/dashboard.png")
.build())
.build(),
MessageContent.builder()
.type("text")
.text("Crea este panel como un componente React.")
.build()
))
.build()
))
.build();
ChatCompletionResponse streamResponse =
client.chat().createChatCompletionStream(streamRequest);
streamResponse.getFlowable().subscribe(
data -> System.out.print(data),
error -> System.err.println("Error: " + error.getMessage()),
() -> System.out.println("\n[Completado]")
);
Uso del endpoint compatible con OpenAI
La API de Z.ai sigue las convenciones de OpenAI, por lo que puede utilizar el cliente de Python de OpenAI con una URL base personalizada:
from openai import OpenAI
client = OpenAI(
api_key="su-clave-api-zai",
base_url="https://api.z.ai/api/paas/v4"
)
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": "https://example.com/wireframe.png"
}
},
{
"type": "text",
"text": "Convierte este wireframe en un componente Vue 3 funcional con Composition API."
}
]
}
]
)
print(response.choices[0].message.content)
Esto significa que cualquier herramienta que soporte APIs compatibles con OpenAI, incluyendo Apidog, puede conectarse a GLM-5V-Turbo apuntando a la URL base de Z.ai.
Probando llamadas a la API de GLM-5V-Turbo con Apidog
Antes de integrar GLM-5V-Turbo en su aplicación, pruebe sus llamadas a la API de forma interactiva con Apidog. Esto le ahorrará depurar cargas útiles JSON sin procesar en el código.
Configurar el endpoint
- Abra Apidog y cree una nueva solicitud.
- Establezca el método en POST y la URL en
https://api.z.ai/api/paas/v4/chat/completions - Añada el encabezado
Authorization: Bearer YOUR_KEY - Establezca
Content-Type: application/json
Construir cuerpos de solicitud multimodales visualmente
El editor JSON de Apidog le permite construir el array anidado de messages con bloques de contenido image_url y text sin escribir JSON a mano. Puede:
- Alternar entre JSON sin procesar y entrada basada en formularios
- Guardar plantillas de solicitud para patrones comunes (imagen única, múltiples imágenes, entrada de vídeo)
- Usar variables de entorno para la clave de API para no tener que pegarla en cada solicitud
Comparar respuestas del modelo
Al evaluar GLM-5V-Turbo frente a otros modelos de visión (Claude, GPT-4o, Gemini), utilice el ejecutor de colecciones de Apidog para enviar la misma imagen a múltiples endpoints y comparar las salidas una al lado de la otra. Esto es particularmente útil para tareas de Design2Code donde desea verificar qué modelo produce el HTML/CSS más preciso.
Validar esquemas de respuesta
Las respuestas de streaming de GLM-5V-Turbo incluyen campos tanto reasoning_content como content. El validador de respuestas de Apidog puede verificar que su aplicación maneja correctamente ambos campos, incluyendo casos límite donde un campo es nulo.
Descargue Apidog para comenzar a probar su integración con GLM-5V-Turbo.
Comparación de precios con otros modelos de visión
| Modelo | Entrada (por 1M tokens) | Salida (por 1M tokens) | Ventana de contexto | Puntuación Design2Code |
|---|---|---|---|---|
| GLM-5V-Turbo | $1.20 | $4.00 | 200K | 94.8 |
| Claude Opus 4.6 | $15.00 | $75.00 | 200K | 77.3 |
| Claude Sonnet 4.6 | $3.00 | $15.00 | 200K | N/A |
| GPT-4o | $2.50 | $10.00 | 128K | N/A |
| Gemini 3 Pro | $1.25 | $5.00 | 1M | N/A |
GLM-5V-Turbo es la opción más económica para tareas de codificación basadas en visión. Cuesta un 92% menos que Claude Opus 4.6 en tokens de entrada y un 94.7% menos en tokens de salida, mientras que obtiene un 22% más en Design2Code.
La compensación: Claude y GPT-5 manejan mejor tareas de codificación más amplias. Si su flujo de trabajo es específicamente "imagen de entrada, código de salida", GLM-5V-Turbo ofrece la mejor relación precio-rendimiento.
Arquitectura: cómo funciona internamente
Codificador de visión CogViT
GLM-5V-Turbo utiliza CogViT, un transformador de visión diseñado para preservar las jerarquías espaciales y los detalles visuales finos. Los codificadores de visión estándar comprimen las imágenes en vectores de características planos, perdiendo las relaciones espaciales. CogViT mantiene la información posicional que importa para tareas sensibles al diseño como la colocación de cuadrículas CSS, la alineación de flexbox y el espaciado preciso de píxeles.
Predicción Multi-Token (MTP)
La arquitectura MTP predice múltiples tokens por pasada hacia adelante en lugar de uno a la vez. Para la generación de código, esto significa una inferencia más rápida al generar largas secuencias de HTML, CSS o JavaScript. El modelo no genera token por token; predice fragmentos, lo que reduce la latencia en la ventana de salida máxima de 128K.
Aprendizaje por refuerzo conjunto para más de 30 tareas
ZhipuAI entrenó GLM-5V-Turbo con aprendizaje por refuerzo en más de 30 tareas simultáneamente: razonamiento STEM, fundamentación visual, análisis de video, operación de GUI y codificación. Esta optimización conjunta evita que el modelo se sobreajuste a un tipo de tarea, manteniendo un rendimiento sólido en toda la gama de flujos de trabajo de codificación visual.
Sistema de datos agéntico
El pipeline de entrenamiento incluye lo que ZhipuAI denomina un sistema de "construcción de datos multinivel y verificable" con preentrenamiento de predicción de acciones. En la práctica, esto significa que el modelo fue entrenado en secuencias de "ver captura de pantalla, predecir siguiente acción, ejecutar, verificar resultado", lo que lo hace efectivo para tareas autónomas de GUI más allá de la conversión estática de imagen a código.
Ejemplos prácticos
Maqueta de diseño a componente React
from zai import ZaiClient
client = ZaiClient(api_key="su-clave-api")
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "system",
"content": "Eres un desarrollador frontend senior. Genera componentes React listos para producción con TypeScript y Tailwind CSS. Incluye tipos apropiados, atributos de accesibilidad y diseño responsivo."
},
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {"url": "https://example.com/hero-section.png"}
},
{
"type": "text",
"text": "Crea esta sección de héroe como un componente React TypeScript. Debe ser totalmente responsiva con un enfoque mobile-first. Incluye el fondo degradado, el botón CTA con estado hover y el posicionamiento de la ilustración."
}
]
}
],
thinking={"type": "enabled"}
)
# El modelo primero razona sobre la estructura del diseño (reasoning_content)
# luego genera el componente React completo (content)
print(response.choices[0].message.content)
Flujo de trabajo de depuración por captura de pantalla
def debug_ui_from_screenshot(screenshot_url: str, description: str) -> str:
"""Envía una captura de pantalla de una UI rota y obtiene soluciones CSS."""
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "system",
"content": "Eres un especialista en depuración de CSS. Analiza capturas de pantalla de UIs rotas y proporciona soluciones CSS específicas. Siempre explica qué está mal antes de proporcionar la solución."
},
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {"url": screenshot_url}
},
{
"type": "text",
"text": f"Informe de error: {description}. Identifica los problemas de CSS y proporciona soluciones."
}
]
}
],
thinking={"type": "enabled"}
)
return response.choices[0].message.content
# Uso
fix = debug_ui_from_screenshot(
"https://example.com/broken-modal.png",
"El diálogo modal se desborda en pantallas móviles y el botón de cerrar es inalcanzable"
)
print(fix)
Extracción de documentos a datos estructurados
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {"url": "https://example.com/api-spec-page.png"}
},
{
"type": "text",
"text": "Extrae las definiciones de los endpoints de la API de esta captura de pantalla de documentación. Devuélvelas como una especificación YAML de OpenAPI 3.1."
}
]
}
]
)
Este es un caso de uso potente para equipos de desarrollo de API: fotografiar diseños de API en pizarra o escanear documentación heredada, y luego generar especificaciones OpenAPI directamente. Luego puede importar la especificación generada a Apidog para obtener documentación interactiva, servidores mock y casos de prueba a partir de una única captura de pantalla.
Consejos para sacar el máximo provecho de GLM-5V-Turbo
La calidad de la imagen importa
El codificador CogViT preserva los detalles espaciales, pero no puede recuperar información que no está en la imagen original. Para tareas de Design2Code:
- Utilice capturas de pantalla con una resolución de 2x (Retina) para texto nítido y detalles de iconos.
- Recorte el componente específico que desea recrear, no la página completa.
- Elimine el navegador Chrome y las decoraciones de la ventana del sistema operativo de las capturas de pantalla.
- Para la precisión del color, use PNG en lugar de JPEG para evitar artefactos de compresión.
Use el modo de pensamiento para diseños complejos
Habilite el modo de pensamiento ("thinking": {"type": "enabled"}) para:
- Diseños de página con múltiples componentes.
- Diseños responsivos con lógica de puntos de interrupción.
- Diseños con CSS complejo (grid, anidamiento de flexbox, animaciones).
- Tareas de depuración donde el análisis de la causa raíz es importante.
Omita el modo de pensamiento para tareas simples (extracción de componentes únicos, subtitulado básico de imágenes) para ahorrar costos de tokens y latencia.
Gestiona tu ventana de contexto
Con 200K tokens, la ventana de contexto es grande pero no ilimitada. Una sola imagen de alta resolución puede consumir entre 1,000 y 5,000 tokens. Para flujos de trabajo con varias imágenes:
- Redimensione las imágenes a la resolución mínima que requiera la tarea.
- Utilice el almacenamiento en caché de contexto para conversaciones iterativas donde el diseño base permanece igual.
- Divida los diseños de página completa en capturas de pantalla a nivel de componente para una generación individual.
Optimización de costes con caché
El caché de contexto cuesta $0.24/M tokens (80% de descuento sobre el precio de entrada estándar). Para flujos de trabajo iterativos de diseño a código donde esté refinando el mismo componente:
- Envíe la imagen de diseño en la primera solicitud.
- Las solicitudes de seguimiento referencian el contexto almacenado en caché.
- Cada iteración cuesta una fracción de volver a enviar la imagen completa.
Manejo de errores y casos extremos
Límites de tasa y reintentos
La API de Z.ai devuelve códigos de estado HTTP estándar. Manéjelos en su integración:
import time
from zai import ZaiClient
client = ZaiClient(api_key="su-clave-api")
def call_with_retry(messages, max_retries=3):
"""Llama a GLM-5V-Turbo con retroceso exponencial en los límites de tasa."""
for attempt in range(max_retries):
try:
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=messages,
thinking={"type": "enabled"}
)
return response
except Exception as e:
error_str = str(e)
if "429" in error_str:
# Límite de tasa alcanzado - espera y reintenta
wait_time = 2 ** attempt
print(f"Límite de tasa. Reintentando en {wait_time}s...")
time.sleep(wait_time)
continue
elif "400" in error_str:
# Solicitud incorrecta - no reintentar, corrige la entrada
print(f"Solicitud incorrecta: {error_str}")
raise
else:
# Error del servidor - reintentar
if attempt < max_retries - 1:
time.sleep(1)
continue
raise
raise Exception("Se superaron los reintentos máximos")
Manejo de salidas grandes
Con una ventana de salida máxima de 128K, GLM-5V-Turbo puede generar aplicaciones completas de varios archivos en una sola respuesta. Su aplicación necesita manejar esto:
response = client.chat.completions.create(
model="glm-5v-turbo",
messages=messages,
max_tokens=131072 # Salida completa de 128K
)
content = response.choices[0].message.content
# Analizar múltiples archivos desde la salida
# El modelo suele separar los archivos con cercas de código markdown
import re
file_blocks = re.findall(
r'```(\w+)?\s*\n// file: (.+?)\n(.*?)```',
content,
re.DOTALL
)
for lang, filename, code in file_blocks:
print(f"Escribiendo {filename} ({lang})")
with open(filename, "w") as f:
f.write(code.strip())
Accesibilidad de la URL de la imagen
El modelo obtiene imágenes de las URL que usted proporciona. Fallos comunes:
- URLs firmadas caducadas de almacenamiento en la nube (S3, GCS). Genere URLs con una caducidad de al menos 1 hora.
- Imágenes con restricciones CORS que bloquean la obtención del lado del servidor. Aloje imágenes en una CDN sin restricciones CORS.
- Imágenes grandes que agotan el tiempo de espera durante la descarga. Redimensione a menos de 5MB antes de enviar.
Si usted controla el alojamiento de imágenes, una CDN pública sin autenticación es la opción más confiable para las llamadas a la API.
GLM-5V-Turbo vs. usarlo a través de OpenRouter
Puede acceder a GLM-5V-Turbo a través de OpenRouter como una alternativa a la API directa de Z.ai. OpenRouter procesó más de 44,000 solicitudes con más de 769M tokens de prompt en los primeros dos días de disponibilidad del modelo.
Beneficios de OpenRouter:
- Una única clave API para múltiples proveedores de modelos
- Copia de seguridad automática si Z.ai tiene tiempo de inactividad
- Análisis de uso en todos sus modelos
- Mismo formato compatible con OpenAI
Inconveniente: OpenRouter añade un pequeño margen al precio de los tokens. Para un uso de producción de alto volumen, la API directa de Z.ai es más barata.
Construyendo un pipeline de diseño a código con GLM-5V-Turbo
Aquí hay un flujo de trabajo completo que toma una maqueta de diseño, genera código y valida la salida:
from zai import ZaiClient
import os
import subprocess
client = ZaiClient(api_key=os.environ["ZAI_API_KEY"])
def design_to_code_pipeline(image_url: str, output_dir: str, framework: str = "react"):
"""Pipeline completo: captura de pantalla de diseño -> código funcional -> validación."""
os.makedirs(output_dir, exist_ok=True)
# Paso 1: Analizar el diseño
analysis = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "user",
"content": [
{"type": "image_url", "image_url": {"url": image_url}},
{
"type": "text",
"text": "Analiza este diseño. Enumera: 1) Todos los componentes de UI visibles, 2) La paleta de colores (valores hex), 3) Tipografía (tamaños de fuente, pesos), 4) Estructura del diseño (grid/flexbox), 5) Elementos interactivos (botones, inputs, desplegables)."
}
]
}
],
thinking={"type": "enabled"}
)
design_analysis = analysis.choices[0].message.content
print(f"Análisis de diseño completado: {len(design_analysis)} caracteres")
# Paso 2: Generar el componente
generation = client.chat.completions.create(
model="glm-5v-turbo",
messages=[
{
"role": "system",
"content": f"Eres un desarrollador de {framework}. Genera componentes listos para producción, accesibles y responsivos. Usa TypeScript y Tailwind CSS."
},
{
"role": "user",
"content": [
{"type": "image_url", "image_url": {"url": image_url}},
{
"type": "text",
"text": f"Basado en este diseño, genera el componente completo de {framework}. Incluye todo el estilo, los estados hover y los puntos de interrupción responsivos. El componente debe coincidir con el diseño píxel a píxel."
}
]
}
],
thinking={"type": "enabled"},
max_tokens=16384
)
code = generation.choices[0].message.content
# Paso 3: Guardar la salida
output_file = os.path.join(output_dir, "Component.tsx")
with open(output_file, "w") as f:
# Extraer código de las cercas markdown si están presentes
if "```" in code:
import re
match = re.search(r'```(?:tsx?|jsx?)\n(.*?)```', code, re.DOTALL)
if match:
f.write(match.group(1).strip())
else:
f.write(code)
else:
f.write(code)
print(f"Componente guardado en {output_file}")
return output_file
# Uso
design_to_code_pipeline(
image_url="https://example.com/dashboard-card.png",
output_dir="./generated-components",
framework="react"
)
Este pipeline separa el análisis de la generación. La primera llamada mapea la estructura, los colores y la tipografía del diseño. La segunda llamada genera código con esa comprensión como contexto. Dividir el trabajo en dos llamadas produce una salida más precisa que una única solicitud de "convertir esto a código", porque el modelo ya ha razonado sobre el diseño antes de escribir el código.
Puede probar cada paso de forma independiente en Apidog guardando la solicitud de análisis y la solicitud de generación como endpoints separados en una colección, y luego ejecutándolos en secuencia con el ejecutor de colecciones.
Preguntas frecuentes
¿Es GLM-5V-Turbo de uso gratuito?
No. El precio de la API es de $1.20/M tokens de entrada y $4.00/M tokens de salida. ZhipuAI ofrece una interfaz web gratuita en chat.z.ai para pruebas, pero el uso de la API requiere pago.
¿Puedo enviar imágenes codificadas en base64?
La documentación muestra la entrada de imágenes basada en URL (image_url con un campo url). Para el soporte de base64, codifique su imagen como una URI de datos: data:image/png;base64,{datos_codificados} y pásela como valor de la URL. Esto sigue la misma convención que la API de Visión de OpenAI.
¿Cómo maneja GLM-5V-Turbo la entrada de video?
El video se menciona como una modalidad de entrada compatible. El modelo puede procesar fotogramas de video para tareas como analizar grabaciones de interacción de la UI, identificar errores de animación o comprender los flujos de usuario. Los requisitos específicos de códec y formato aún no están documentados.
¿Cuál es la diferencia entre GLM-5-Turbo y GLM-5V-Turbo?
GLM-5-Turbo es un modelo de codificación solo de texto. GLM-5V-Turbo añade el codificador de visión CogViT para entrada multimodal (imágenes, vídeo, archivos). Elija GLM-5-Turbo para tareas de codificación de texto puras y GLM-5V-Turbo cuando su flujo de trabajo implique entrada visual.
¿Puedo usar GLM-5V-Turbo con el cliente Python de OpenAI?
Sí. Establezca el base_url en https://api.z.ai/api/paas/v4 y use su clave API de Z.ai. El endpoint sigue las convenciones compatibles con OpenAI para completaciones de chat, incluyendo formatos de mensaje multimodales.
¿Cómo se compara con Claude para codificar?
GLM-5V-Turbo domina en las tareas de visión a código (94.8 frente a 77.3 en Design2Code). Claude lidera en codificación de texto pura, arquitectura de backend y comprensión a nivel de repositorio. Sirven para diferentes casos de uso. Para equipos que hacen ambas cosas, la diferencia de costo es significativa: GLM-5V-Turbo es un 92% más barato en tokens de entrada que Claude Opus 4.6.
¿Cuál es el tamaño máximo de imagen?
La documentación no especifica un límite de píxeles. La ventana de contexto de 200K es la restricción práctica; las imágenes más grandes consumen más tokens. Para tareas de Design2Code, las capturas de pantalla de 1920x1080 a una resolución de 2x funcionan bien sin alcanzar los límites.
¿ZhipuAI retiene mis datos de API?
No. La política de datos de Z.ai establece que no se utiliza la API para entrenamiento ni se retienen los prompts para las llamadas a la API. Sus imágenes y salidas de código no se utilizan para entrenar modelos futuros.