GLM-5V-Turbo API Nutzung: Eine Anleitung

Kurz gesagt

GLM-5V-Turbo ist ZhipuAIs multimodales Vision-Coding-Modell mit einem 200K Kontextfenster, einer maximalen Ausgabe von 128K und nativer Unterstützung für Bild-, Video-, Text- und Dateieingaben. Es erreichte 94,8 Punkte im Design2Code-Benchmark (im Vergleich zu Claude Opus 4.6 mit 77,3) und kostet 1,20 $ pro 1 Mio. Eingabe-Tokens und 4 $ pro 1 Mio. Ausgabe-Tokens. Dieser Leitfaden behandelt die Einrichtung, API-Integration und praktische Beispiele für visuell basierte Codierungsaufgaben.

Einführung

ZhipuAI (operierend als Z.ai) veröffentlichte GLM-5V-Turbo am 1. April 2026. Es ist ihr erstes Modell, das speziell für visuell basierte Codierungsaufgaben entwickelt wurde, bei denen die Eingabe ein Bild, ein Screenshot oder ein Video ist und die Ausgabe funktionierender Code ist.

Das Modell gehört zu einer Familie, die GLM-5 (nur Text, 744B Parameter) und GLM-5-Turbo (optimierte Textcodierung) umfasst. GLM-5V-Turbo ergänzt die Turbo-Variante um native multimodale Verständnis-Fähigkeiten, indem es einen CogViT Vision-Encoder und eine Multi-Token Prediction (MTP)-Architektur verwendet.

Die herausragende Zahl: 94,8 im Design2Code-Benchmark, bei dem Modelle UI-Mockups als HTML/CSS reproduzieren. Claude Opus 4.6 erreichte im selben Test 77,3 Punkte. Das ist ein Unterschied von 22 % bei der spezifischen Aufgabe, visuelle Designs in Code umzuwandeln.

Dieser Leitfaden zeigt Ihnen, wie Sie die GLM-5V-Turbo API aufrufen, Bilder und Videos senden, den Denkmodus aktivieren, Antworten streamen, Funktionsaufrufe verwenden und Ihre Integration mit Apidog testen.

Schaltfläche

Was GLM-5V-Turbo leisten kann

Kernspezifikationen

Spezifikation	Wert
Kontextfenster	200K Tokens (202.752)
Max. Ausgabe	128K Tokens (131.072)
Eingabemodalitäten	Bild, Video, Text, Datei (PDF, Word)
Ausgabemodalität	Text
Eingabepreise	1,20 $ pro 1 Mio. Tokens
Ausgabepreise	4,00 $ pro 1 Mio. Tokens
Cache-Lesegebühren	0,24 $ pro 1 Mio. Tokens
Veröffentlichungsdatum	1. April 2026
API-Endpunkt	`https://api.z.ai/api/paas/v4/chat/completions`

Unterstützte Funktionen

Denkmodus mit konfigurierbaren Denk-Tokens (<think> Tags)
Streaming-Ausgabe für Echtzeit-Antworten
Funktionsaufrufe für die Tool-Integration
Kontext-Caching zur Optimierung langer Konversationen
Strukturierte Ausgabe durch Konfiguration des Antwortformats

Wo es sich auszeichnet

GLM-5V-Turbo wurde speziell für eine enge, aber hochprofitable Kategorie entwickelt: das Betrachten visueller Inhalte und das Schreiben von Code daraus. Die wichtigsten Anwendungsfälle:

Frontend-Nachbildung aus Design-Mockups. Geben Sie ihm einen Figma-Screenshot oder ein Design-Layout, und er generiert pixelgenaues HTML/CSS. Der Design2Code-Wert von 94,8 untermauert dies mit harten Zahlen.

Autonome GUI-Erkundung. Das Modell integriert sich mit OpenClaw (ZhipuAIs Agenten-Framework) für autonomes Website-Browsing, Formularausfüllen und Interaktionstests. Es erzielte gute Ergebnisse bei den Benchmarks AndroidWorld und WebVoyager für den GUI-Betrieb.

Code-Debugging anhand von Screenshots. Senden Sie einen Screenshot einer fehlerhaften Benutzeroberfläche, und das Modell identifiziert Rendering-Probleme, Layout-Fehler und CSS-Konflikte.

Dokumentenextraktion. Verarbeiten Sie PDFs, Word-Dokumente und gescannte Bilder, um strukturierte Daten, Tabellen und Text zu extrahieren.

Wo es nicht glänzt

Bei reiner Textcodierung (ohne visuelle Eingabe) sind Claude und GPT-5 bei Backend-Aufgaben, Repository-Erkundung und Systemarchitektur immer noch führend. Die Stärke von GLM-5V-Turbo liegt speziell darin, wenn visuelle Eingaben die Codierungsaufgabe antreiben.

Erste Schritte: API-Einrichtung

API-Schlüssel abrufen

Registrieren Sie sich unter z.ai
Navigieren Sie zum Bereich API-Schlüssel in Ihrem Dashboard
Generieren Sie einen neuen Schlüssel
Speichern Sie ihn sicher; Sie übergeben ihn als Bearer-Token

Basiskonfiguration

Alle Anfragen gehen an:

POST https://api.z.ai/api/paas/v4/chat/completions

Erforderliche Header:

Authorization: Bearer YOUR_API_KEY
Content-Type: application/json

Die API folgt OpenAI-kompatiblen Konventionen, sodass Sie, wenn Sie bereits mit den OpenAI- oder Anthropic-APIs gearbeitet haben, das Anfrageformat vertraut finden werden.

Ihre erste Anfrage mit cURL senden

Grundlegende Bildanalyse

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": "Recreate this dashboard UI as responsive HTML and CSS. Use Tailwind CSS classes."
          }
        ]
      }
    ]
  }'

Mit aktiviertem Denkmodus

Der Denkmodus fügt einen Argumentationsschritt hinzu, bevor das Modell seine Antwort generiert. Dies verbessert die Genauigkeit bei komplexen Codierungsaufgaben auf Kosten zusätzlicher Ausgabe-Tokens.

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": "This login form has a layout bug on mobile. Identify the issue and provide fixed CSS."
          }
        ]
      }
    ],
    "thinking": {
      "type": "enabled"
    }
  }'

Wenn der Denkmodus aktiviert ist, enthält die Antwort reasoning_content neben dem Standardfeld content. Die Denk-Tokens zeigen die Schritt-für-Schritt-Analyse des Modells vor der endgültigen Antwort.

Python SDK-Integration

Installation

pip install zai-sdk

Oder eine spezifische Version festlegen:

pip install zai-sdk==0.0.4

Grundlegende Bild-zu-Code-Konvertierung

from zai import ZaiClient

client = ZaiClient(api_key="your-api-key")

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": "Convert this pricing page design into a React component using Tailwind CSS. Include responsive breakpoints for mobile, tablet, and desktop."
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

print(response.choices[0].message.content)

Streaming-Antworten

Für lange Code-Generierungsaufgaben (ganze Seitenlayouts, UI mit mehreren Komponenten) erhalten Sie mit Streaming die Ausgabe in Echtzeit, anstatt auf die vollständige Antwort zu warten:

from zai import ZaiClient

client = ZaiClient(api_key="your-api-key")

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": "Build this entire landing page as a single HTML file with embedded CSS and JavaScript. Include smooth scroll, a sticky navbar, and a working contact form."
                }
            ]
        }
    ],
    stream=True
)

for chunk in response:
    delta = chunk.choices[0].delta
    # Print reasoning tokens (thinking mode)
    if delta.reasoning_content:
        print(f"[thinking] {delta.reasoning_content}", end="", flush=True)
    # Print the generated code
    if delta.content:
        print(delta.content, end="", flush=True)

Multi-Bild-Eingabe

Senden Sie mehrere Bilder in einer einzigen Anfrage. Dies ist nützlich, um Designs zu vergleichen, Stilreferenzen neben Mockups bereitzustellen oder Vorher-/Nachher-Screenshots zum Debuggen zu senden:

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": "The first image is the design mockup. The second is the current implementation. Identify all visual differences and provide CSS fixes to match the mockup."
                }
            ]
        }
    ]
)

Funktionsaufrufe

GLM-5V-Turbo unterstützt Funktionsaufrufe, sodass Sie es in agentenbasierte Workflows integrieren können, in denen das Modell externe Aktionen anfordern kann:

tools = [
    {
        "type": "function",
        "function": {
            "name": "save_component",
            "description": "Save a generated React component to a file",
            "parameters": {
                "type": "object",
                "properties": {
                    "filename": {
                        "type": "string",
                        "description": "Component filename, e.g. 'PricingCard.tsx'"
                    },
                    "code": {
                        "type": "string",
                        "description": "The full component source code"
                    },
                    "dependencies": {
                        "type": "array",
                        "items": {"type": "string"},
                        "description": "npm packages this component requires"
                    }
                },
                "required": ["filename", "code"]
            }
        }
    },
    {
        "type": "function",
        "function": {
            "name": "take_screenshot",
            "description": "Take a screenshot of a URL to verify the rendered output",
            "parameters": {
                "type": "object",
                "properties": {
                    "url": {
                        "type": "string",
                        "description": "URL to screenshot"
                    },
                    "viewport": {
                        "type": "string",
                        "description": "Viewport size: 'mobile', 'tablet', or '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": "Generate a React component from this card design and save it. Then take a screenshot to verify."
                }
            ]
        }
    ],
    tools=tools,
    tool_choice="auto"
)

Java SDK-Integration

Maven-Abhängigkeit

<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'

Grundlegende Anfrage

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("Convert this design to HTML with Tailwind CSS.")
                                .build()
                        ))
                        .build()
                ))
                .build();

        ChatCompletionResponse response =
            client.chat().createChatCompletion(request);

        System.out.println(response.getChoices()
            .get(0).getMessage().getContent());
    }
}

Streaming in 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("Build this dashboard as a React component.")
                        .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[Complete]")
);

Verwendung des OpenAI-kompatiblen Endpunkts

Die Z.ai API folgt OpenAI-Konventionen, sodass Sie den OpenAI Python-Client mit einer benutzerdefinierten Basis-URL verwenden können:

from openai import OpenAI

client = OpenAI(
    api_key="your-zai-api-key",
    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": "Turn this wireframe into a working Vue 3 component with Composition API."
                }
            ]
        }
    ]
)

print(response.choices[0].message.content)

Das bedeutet, dass jedes Tool, das OpenAI-kompatible APIs unterstützt, einschließlich Apidog, sich mit GLM-5V-Turbo verbinden kann, indem es auf die Z.ai Basis-URL verweist.

GLM-5V-Turbo API-Aufrufe mit Apidog testen

Bevor Sie GLM-5V-Turbo in Ihre Anwendung integrieren, testen Sie Ihre API-Aufrufe interaktiv mit Apidog. Dies erspart Ihnen das Debuggen von rohen JSON-Payloads im Code.

Endpunkt einrichten

Öffnen Sie Apidog und erstellen Sie eine neue Anfrage
Stellen Sie die Methode auf POST und die URL auf https://api.z.ai/api/paas/v4/chat/completions ein
Fügen Sie den Header Authorization: Bearer YOUR_KEY hinzu
Stellen Sie Content-Type: application/json ein

Multimodale Anfragekörper visuell erstellen

Apidogs JSON-Editor ermöglicht es Ihnen, das verschachtelte messages-Array mit image_url- und text-Inhaltsblöcken zu erstellen, ohne JSON manuell schreiben zu müssen. Sie können:

Zwischen rohem JSON und formularbasierter Eingabe wechseln
Anfrage-Templates für gängige Muster speichern (einzelnes Bild, mehrere Bilder, Videoeingabe)
Umgebungsvariablen für den API-Schlüssel verwenden, damit Sie ihn nicht in jede Anfrage einfügen müssen

Modellantworten vergleichen

Beim Vergleich von GLM-5V-Turbo mit anderen Visionsmodellen (Claude, GPT-4o, Gemini) verwenden Sie Apidogs Collection Runner, um dasselbe Bild an mehrere Endpunkte zu senden und die Ausgaben nebeneinander zu vergleichen. Dies ist besonders nützlich für Design2Code-Aufgaben, bei denen Sie überprüfen möchten, welches Modell das genaueste HTML/CSS erzeugt.

Antwortschemata validieren

GLM-5V-Turbos Streaming-Antworten enthalten sowohl die Felder reasoning_content als auch content. Apidogs Response Validator kann überprüfen, ob Ihre Anwendung beide Felder korrekt verarbeitet, einschließlich Randfällen, in denen ein Feld null ist.

Laden Sie Apidog herunter, um Ihre GLM-5V-Turbo-Integration zu testen.

Preisvergleich mit anderen Visionsmodellen

Modell	Eingabe (pro 1 Mio. Tokens)	Ausgabe (pro 1 Mio. Tokens)	Kontextfenster	Design2Code-Wert
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 ist die günstigste Option für visuell basierte Codierungsaufgaben. Es kostet 92 % weniger als Claude Opus 4.6 bei Eingabe-Tokens und 94,7 % weniger bei Ausgabe-Tokens, während es 22 % höher im Design2Code-Benchmark abschneidet.

Der Kompromiss: Claude und GPT-5 bewältigen breitere Codierungsaufgaben besser. Wenn Ihr Workflow speziell "Bild rein, Code raus" ist, bietet GLM-5V-Turbo das beste Preis-Leistungs-Verhältnis.

Architektur: So funktioniert es unter der Haube

CogViT Vision-Encoder

GLM-5V-Turbo verwendet CogViT, einen Vision-Transformer, der darauf ausgelegt ist, räumliche Hierarchien und feinkörnige visuelle Details zu erhalten. Standard-Vision-Encoder komprimieren Bilder zu flachen Feature-Vektoren und verlieren dabei räumliche Beziehungen. CogViT bewahrt die Positionsinformationen, die für layoutsensitive Aufgaben wie CSS-Gitterplatzierung, Flexbox-Ausrichtung und pixelgenaue Abstände wichtig sind.

Multi-Token Vorhersage (MTP)

Die MTP-Architektur sagt mehrere Tokens pro Vorwärtsdurchlauf voraus, anstatt einzeln. Für die Codegenerierung bedeutet dies eine schnellere Inferenz bei der Ausgabe langer Sequenzen von HTML, CSS oder JavaScript. Das Modell generiert nicht Token für Token; es sagt Blöcke voraus, was die Latenz bei der maximalen Ausgabe von 128K reduziert.

Gemeinsames Reinforcement Learning für über 30 Aufgaben

ZhipuAI trainierte GLM-5V-Turbo mit Reinforcement Learning über mehr als 30 Aufgaben gleichzeitig: STEM-Argumentation, visuelle Erdung, Videoanalyse, GUI-Bedienung und Codierung. Diese gemeinsame Optimierung verhindert, dass das Modell sich auf einen Aufgabentyp überanpasst, während es eine starke Leistung über die gesamte Bandbreite der Vision-Coding-Workflows beibehält.

Agentisches Datensystem

Die Trainingspipeline umfasst ein von ZhipuAI als "mehrstufiges, verifizierbares Datenkonstruktionssystem" mit Vor-Training zur Aktionsvorhersage bezeichnetes System. In der Praxis bedeutet dies, dass das Modell auf Sequenzen wie "Screenshot sehen, nächste Aktion vorhersagen, ausführen, Ergebnis überprüfen" trainiert wurde, wodurch es effektiv für autonome GUI-Aufgaben über die statische Bild-zu-Code-Konvertierung hinaus eingesetzt werden kann.

Praktische Beispiele

Design-Mockup zu React-Komponente

from zai import ZaiClient

client = ZaiClient(api_key="your-api-key")

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=[
        {
            "role": "system",
            "content": "You are a senior frontend developer. Generate production-ready React components with TypeScript and Tailwind CSS. Include proper types, accessibility attributes, and responsive design."
        },
        {
            "role": "user",
            "content": [
                {
                    "type": "image_url",
                    "image_url": {"url": "https://example.com/hero-section.png"}
                },
                {
                    "type": "text",
                    "text": "Build this hero section as a React TypeScript component. It should be fully responsive with a mobile-first approach. Include the gradient background, CTA button with hover state, and the illustration positioning."
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

# The model first reasons about layout structure (reasoning_content)
# then outputs the complete React component (content)
print(response.choices[0].message.content)

Screenshot-Debugging-Workflow

def debug_ui_from_screenshot(screenshot_url: str, description: str) -> str:
    """Send a screenshot of a broken UI and get CSS fixes."""
    response = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": "You are a CSS debugging specialist. Analyze screenshots of broken UIs and provide specific CSS fixes. Always explain what's wrong before providing the fix."
            },
            {
                "role": "user",
                "content": [
                    {
                        "type": "image_url",
                        "image_url": {"url": screenshot_url}
                    },
                    {
                        "type": "text",
                        "text": f"Bug report: {description}. Identify the CSS issues and provide fixes."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    return response.choices[0].message.content


# Usage
fix = debug_ui_from_screenshot(
    "https://example.com/broken-modal.png",
    "Modal dialog is overflowing on mobile screens and the close button is unreachable"
)
print(fix)

Dokumentenextraktion zu strukturierten Daten

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": "Extract the API endpoint definitions from this documentation screenshot. Return them as an OpenAPI 3.1 YAML specification."
                }
            ]
        }
    ]
)

Dies ist ein starker Anwendungsfall für API-Entwicklungsteams: Fotografieren Sie Whiteboard-API-Designs oder scannen Sie ältere Dokumentationen und generieren Sie dann direkt OpenAPI-Spezifikationen. Sie können die generierte Spezifikation dann in Apidog importieren, um interaktive Dokumentation, Mock-Server und Testfälle aus einem einzigen Screenshot zu erhalten.

Tipps zur optimalen Nutzung von GLM-5V-Turbo

Bildqualität ist entscheidend

Der CogViT-Encoder bewahrt räumliche Details, kann aber Informationen, die nicht im Quellbild vorhanden sind, nicht wiederherstellen. Für Design2Code-Aufgaben:

Verwenden Sie Screenshots mit 2-facher Auflösung (Retina) für scharfen Text und Icon-Details
Schneiden Sie auf die spezifische Komponente zu, die Sie neu erstellen möchten, nicht auf die gesamte Seite
Entfernen Sie Browser-Chrome und OS-Fensterdekorationen von Screenshots
Für Farbgenauigkeit verwenden Sie PNG statt JPEG, um Komprimierungsartefakte zu vermeiden

Denkmodus für komplexe Layouts verwenden

Aktivieren Sie den Denkmodus ("thinking": {"type": "enabled"}) für:

Seitenlayouts mit mehreren Komponenten
Responsive Designs mit Breakpoint-Logik
Designs mit komplexem CSS (Grid, Flexbox-Verschachtelung, Animationen)
Debugging-Aufgaben, bei denen die Ursachenanalyse wichtig ist

Überspringen Sie den Denkmodus für einfache Aufgaben (Einzelkomponentenextraktion, einfache Bildunterschriften), um Token-Kosten und Latenz zu sparen.

Kontextfenster verwalten

Mit 200K Tokens ist das Kontextfenster groß, aber nicht unbegrenzt. Ein einzelnes hochauflösendes Bild kann 1.000-5.000 Tokens verbrauchen. Für Workflows mit mehreren Bildern:

Passen Sie die Größe von Bildern an die minimal erforderliche Auflösung der Aufgabe an
Verwenden Sie Kontext-Caching für iterative Konversationen, bei denen das Basisdesign gleich bleibt
Teilen Sie vollständige Seitenlayouts in komponentenbasierte Screenshots für die individuelle Generierung auf

Kostenoptimierung mit Caching

Kontext-Caching kostet 0,24 $ pro 1 Mio. Tokens (80 % Rabatt auf die Standard-Eingabepreise). Für iterative Design-zu-Code-Workflows, bei denen Sie dieselbe Komponente verfeinern:

Senden Sie das Designbild in der ersten Anfrage
Folgeanfragen beziehen sich auf den gecachten Kontext
Jede Iteration kostet einen Bruchteil des erneuten Sendens des gesamten Bildes

Fehler- und Grenzfallbehandlung

Ratenbegrenzungen und Wiederholungen

Die Z.ai API gibt Standard-HTTP-Statuscodes zurück. Behandeln Sie diese in Ihrer Integration:

import time
from zai import ZaiClient

client = ZaiClient(api_key="your-api-key")

def call_with_retry(messages, max_retries=3):
    """Call GLM-5V-Turbo with exponential backoff on rate limits."""
    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:
                # Rate limited - wait and retry
                wait_time = 2 ** attempt
                print(f"Rate limited. Retrying in {wait_time}s...")
                time.sleep(wait_time)
                continue
            elif "400" in error_str:
                # Bad request - don't retry, fix the input
                print(f"Bad request: {error_str}")
                raise
            else:
                # Server error - retry
                if attempt < max_retries - 1:
                    time.sleep(1)
                    continue
                raise

    raise Exception("Max retries exceeded")

Umgang mit großen Ausgaben

Mit einem maximalen Ausgabefenster von 128K kann GLM-5V-Turbo ganze Anwendungen mit mehreren Dateien in einer einzigen Antwort generieren. Ihre Anwendung muss dies handhaben:

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=messages,
    max_tokens=131072  # Full 128K output
)

content = response.choices[0].message.content

# Parse multiple files from the output
# The model typically separates files with markdown code fences
import re

file_blocks = re.findall(
    r'```(\w+)?\s*\n// file: (.+?)\n(.*?)```',
    content,
    re.DOTALL
)

for lang, filename, code in file_blocks:
    print(f"Writing {filename} ({lang})")
    with open(filename, "w") as f:
        f.write(code.strip())

Zugänglichkeit der Bild-URL

Das Modell ruft Bilder von den von Ihnen bereitgestellten URLs ab. Häufige Fehler:

Abgelaufene signierte URLs von Cloud-Speichern (S3, GCS). Generieren Sie URLs mit einer Gültigkeitsdauer von mindestens 1 Stunde.
CORS-eingeschränkte Bilder, die das server-seitige Abrufen blockieren. Hosten Sie Bilder auf einem CDN ohne CORS-Einschränkungen.
Große Bilder, die während des Downloads eine Zeitüberschreitung verursachen. Ändern Sie die Größe auf unter 5 MB, bevor Sie sie senden.

Wenn Sie das Bild-Hosting kontrollieren, ist ein öffentliches CDN ohne Authentifizierung die zuverlässigste Option für API-Aufrufe.

GLM-5V-Turbo im Vergleich zur Nutzung über OpenRouter

Sie können GLM-5V-Turbo über OpenRouter als Alternative zur direkten Z.ai API nutzen. OpenRouter verarbeitete in den ersten beiden Tagen der Verfügbarkeit des Modells über 44.000 Anfragen mit mehr als 769 Mio. Prompt-Tokens.

Vorteile von OpenRouter:

Ein einziger API-Schlüssel für mehrere Modellprovider
Automatischer Fallback, wenn Z.ai Ausfallzeiten hat
Nutzungsanalysen für alle Ihre Modelle
Gleiches OpenAI-kompatibles Format

Nachteil: OpenRouter fügt den Token-Preisen einen kleinen Aufschlag hinzu. Für den hochvolumigen Produktionseinsatz ist die direkte Z.ai API günstiger.

Eine Design-zu-Code-Pipeline mit GLM-5V-Turbo aufbauen

Hier ist ein vollständiger Workflow, der ein Design-Mockup entgegennimmt, Code generiert und die Ausgabe validiert:

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"):
    """Complete pipeline: design screenshot -> working code -> validation."""

    os.makedirs(output_dir, exist_ok=True)

    # Step 1: Analyze the design
    analysis = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": "Analyze this design. List: 1) All UI components visible, 2) The color palette (hex values), 3) Typography (font sizes, weights), 4) Layout structure (grid/flexbox), 5) Interactive elements (buttons, inputs, dropdowns)."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    design_analysis = analysis.choices[0].message.content
    print(f"Design analysis complete: {len(design_analysis)} chars")

    # Step 2: Generate the component
    generation = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": f"You are a {framework} developer. Generate production-ready, accessible, responsive components. Use TypeScript and Tailwind CSS."
            },
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": f"Based on this design, generate the complete {framework} component. Include all styling, hover states, and responsive breakpoints. The component must match the design pixel-for-pixel."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"},
        max_tokens=16384
    )

    code = generation.choices[0].message.content

    # Step 3: Save the output
    output_file = os.path.join(output_dir, "Component.tsx")
    with open(output_file, "w") as f:
        # Extract code from markdown fences if present
        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"Component saved to {output_file}")
    return output_file


# Usage
design_to_code_pipeline(
    image_url="https://example.com/dashboard-card.png",
    output_dir="./generated-components",
    framework="react"
)

Diese Pipeline trennt die Analyse von der Generierung. Der erste Aufruf erfasst die Struktur, Farben und Typografie des Designs. Der zweite Aufruf generiert Code mit diesem Verständnis als Kontext. Die Aufteilung der Arbeit in zwei Aufrufe führt zu einer genaueren Ausgabe als eine einzelne "In Code umwandeln"-Anfrage, da das Modell das Layout bereits vor dem Schreiben des Codes durchdacht hat.

Sie können jeden Schritt unabhängig in Apidog testen, indem Sie die Analyseanfrage und die Generierungsanfrage als separate Endpunkte in einer Sammlung speichern und sie dann nacheinander mit dem Collection Runner ausführen.

Schaltfläche

Häufig gestellte Fragen

Ist GLM-5V-Turbo kostenlos nutzbar?

Nein. Die API-Preise betragen 1,20 $ pro 1 Mio. Eingabe-Tokens und 4,00 $ pro 1 Mio. Ausgabe-Tokens. ZhipuAI bietet eine kostenlose Weboberfläche unter chat.z.ai zum Testen an, aber die API-Nutzung erfordert eine Bezahlung.

Kann ich Base64-kodierte Bilder senden?

Die Dokumentation zeigt URL-basierte Bildeingaben (image_url mit einem url-Feld). Für Base64-Unterstützung kodieren Sie Ihr Bild als Daten-URI: data:image/png;base64,{encoded_data} und übergeben Sie es als URL-Wert. Dies folgt derselben Konvention wie die OpenAI Vision API.

Wie verarbeitet GLM-5V-Turbo Videoeingaben?

Video ist als unterstützte Eingabemodalität aufgeführt. Das Modell kann Videobilder für Aufgaben wie die Analyse von UI-Interaktionsaufzeichnungen, die Identifizierung von Animationsfehlern oder das Verständnis von Benutzerflüssen verarbeiten. Spezifische Codec- und Formatierungsanforderungen sind noch nicht dokumentiert.

Was ist der Unterschied zwischen GLM-5-Turbo und GLM-5V-Turbo?

GLM-5-Turbo ist ein reines Text-Codierungsmodell. GLM-5V-Turbo fügt den CogViT Vision-Encoder für multimodale Eingaben (Bilder, Video, Dateien) hinzu. Wählen Sie GLM-5-Turbo für reine Text-Codierungsaufgaben und GLM-5V-Turbo, wenn Ihr Workflow visuelle Eingaben beinhaltet.

Kann ich GLM-5V-Turbo mit dem OpenAI Python-Client verwenden?

Ja. Stellen Sie die base_url auf https://api.z.ai/api/paas/v4 ein und verwenden Sie Ihren Z.ai API-Schlüssel. Der Endpunkt folgt OpenAI-kompatiblen Konventionen für Chat-Vervollständigungen, einschließlich multimodaler Nachrichtenformate.

Wie schneidet es im Vergleich zu Claude beim Programmieren ab?

GLM-5V-Turbo dominiert bei Vision-to-Code-Aufgaben (94,8 vs. 77,3 im Design2Code-Benchmark). Claude ist führend bei reiner Textcodierung, Backend-Architektur und Repository-Level-Verständnis. Sie dienen unterschiedlichen Anwendungsfällen. Für Teams, die beides tun, ist der Kostenunterschied erheblich: GLM-5V-Turbo ist 92 % günstiger bei Eingabe-Tokens als Claude Opus 4.6.

Was ist die maximale Bildgröße?

Die Dokumentation spezifiziert kein Pixellimit. Das 200K Kontextfenster ist die praktische Einschränkung; größere Bilder verbrauchen mehr Tokens. Für Design2Code-Aufgaben funktionieren 1920x1080 Screenshots mit 2-facher Auflösung gut, ohne die Grenzen zu erreichen.

Speichert ZhipuAI meine API-Daten?

Nein. Die Datenrichtlinie von Z.ai besagt, dass keine Trainingsnutzung und keine Prompt-Speicherung für API-Aufrufe erfolgt. Ihre Bilder und Code-Ausgaben werden nicht zum Training zukünftiger Modelle verwendet.