Comment Utiliser l'API GLM-5V-Turbo ?

TL;DR

GLM-5V-Turbo est le modèle de codage visuel multimodal de ZhipuAI avec une fenêtre contextuelle de 200K, une sortie maximale de 128K, et un support natif pour les entrées d'images, de vidéo, de texte et de fichiers. Il a obtenu un score de 94,8 sur le benchmark Design2Code (contre 77,3 pour Claude Opus 4.6) et coûte 1,20 $/M jetons d'entrée, 4 $/M jetons de sortie. Ce guide couvre la configuration, l'intégration de l'API et des exemples pratiques pour les tâches de codage basées sur la vision.

Introduction

ZhipuAI (opérant sous le nom de Z.ai) a lancé GLM-5V-Turbo le 1er avril 2026. C'est leur premier modèle conçu spécifiquement pour les tâches de codage basées sur la vision, où l'entrée est une image, une capture d'écran ou une vidéo, et la sortie est un code fonctionnel.

Le modèle appartient à une famille qui comprend GLM-5 (texte uniquement, 744 milliards de paramètres) et GLM-5-Turbo (codage textuel optimisé). GLM-5V-Turbo ajoute une compréhension multimodale native en plus de la variante Turbo, en utilisant un encodeur de vision CogViT et une architecture de prédiction multi-jetons (MTP).

Le chiffre remarquable : 94,8 sur Design2Code, où les modèles reproduisent des maquettes d'interface utilisateur en HTML/CSS. Claude Opus 4.6 a obtenu un score de 77,3 sur le même test. C'est un écart de 22 % sur la tâche spécifique de transformer des conceptions visuelles en code.

Ce guide vous montre comment appeler l'API GLM-5V-Turbo, envoyer des images et des vidéos, activer le mode de réflexion, diffuser les réponses, utiliser l'appel de fonction et tester votre intégration avec Apidog.

button

Ce que GLM-5V-Turbo peut faire

Spécifications principales

Spécification	Valeur
Fenêtre contextuelle	200K jetons (202,752)
Sortie max.	128K jetons (131,072)
Modalités d'entrée	Image, vidéo, texte, fichier (PDF, Word)
Modalité de sortie	Texte
Tarification des entrées	1,20 $ par million de jetons
Tarification des sorties	4,00 $ par million de jetons
Tarification de lecture du cache	0,24 $ par million de jetons
Date de sortie	1er avril 2026
Point d'accès API	`https://api.z.ai/api/paas/v4/chat/completions`

Capacités prises en charge

Mode de réflexion avec des jetons de raisonnement configurables (balises <think>)
Sortie en continu pour des réponses en temps réel
Appel de fonction pour l'intégration d'outils
Mise en cache du contexte pour l'optimisation des longues conversations
Sortie structurée via la configuration du format de réponse

Là où il excelle

GLM-5V-Turbo est spécialement conçu pour une catégorie étroite mais de grande valeur : l'analyse de contenu visuel et la génération de code à partir de celui-ci. Les cas d'utilisation clés :

Recréation frontend à partir de maquettes de design. Donnez-lui une capture d'écran Figma ou une maquette de conception, et il génère du HTML/CSS au pixel près. Le score de 94,8 sur Design2Code confirme cela avec des chiffres concrets.

Exploration autonome de l'interface graphique. Le modèle s'intègre à OpenClaw (le framework d'agents de ZhipuAI) pour la navigation autonome sur les sites web, le remplissage de formulaires et les tests d'interaction. Il a obtenu de bons résultats sur les benchmarks AndroidWorld et WebVoyager pour l'opération GUI.

Débogage de code à partir de captures d'écran. Envoyez une capture d'écran d'une interface utilisateur défectueuse et le modèle identifie les problèmes de rendu, les bogues de mise en page et les conflits CSS.

Extraction de documents. Traitez des PDF, des documents Word et des images numérisées pour extraire des données structurées, des tableaux et du texte.

Là où il n'excelle pas

Pour le codage purement textuel (sans entrée visuelle), Claude et GPT-5 dominent toujours sur les tâches backend, l'exploration de dépôts et l'architecture de systèmes. La force de GLM-5V-Turbo réside spécifiquement lorsque l'entrée visuelle motive la tâche de codage.

Démarrage rapide : configuration de l'API

Obtenez votre clé API

Inscrivez-vous sur z.ai
Accédez à la section Clés API de votre tableau de bord
Générez une nouvelle clé
Stockez-la en toute sécurité ; vous la passerez comme un jeton Bearer

Configuration de base

Toutes les requêtes sont envoyées à :

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

En-têtes requis :

Authorization: Bearer VOTRE_CLE_API
Content-Type: application/json

L'API suit les conventions compatibles avec OpenAI, donc si vous avez travaillé avec les API OpenAI ou Anthropic, le format de requête vous semblera familier.

Envoyer votre première requête avec cURL

Analyse d'image de base

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."
          }
        ]
      }
    ]
  }'

Avec le mode de réflexion activé

Le mode de réflexion ajoute une étape de raisonnement avant que le modèle ne génère sa réponse. Cela améliore la précision des tâches de codage complexes au prix de jetons de sortie supplémentaires.

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

Lorsque le mode de réflexion est activé, la réponse inclut reasoning_content en plus du champ content standard. Les jetons de raisonnement affichent l'analyse étape par étape du modèle avant de produire la réponse finale.

Intégration du SDK Python

Installation

pip install zai-sdk

Ou épinglez une version spécifique :

pip install zai-sdk==0.0.4

Image vers code de base

from zai import ZaiClient

client = ZaiClient(api_key="votre-clé-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": "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)

Diffusion des réponses

Pour les tâches de génération de code longues (mises en page entières, interfaces utilisateur multi-composants), la diffusion vous donne un résultat en temps réel au lieu d'attendre la réponse complète :

from zai import ZaiClient

client = ZaiClient(api_key="votre-clé-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": "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
    # Afficher les jetons de raisonnement (mode de réflexion)
    if delta.reasoning_content:
        print(f"[réflexion] {delta.reasoning_content}", end="", flush=True)
    # Afficher le code généré
    if delta.content:
        print(delta.content, end="", flush=True)

Entrée multi-images

Envoyez plusieurs images dans une seule requête. Ceci est utile pour comparer des designs, fournir des références de style aux côtés de maquettes, ou envoyer des captures d'écran avant/après pour le débogage :

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."
                }
            ]
        }
    ]
)

Appel de fonction

GLM-5V-Turbo prend en charge l'appel de fonction, vous permettant de l'intégrer dans des workflows basés sur des agents où le modèle peut demander des actions externes :

tools = [
    {
        "type": "function",
        "function": {
            "name": "save_component",
            "description": "Enregistre un composant React généré dans un fichier",
            "parameters": {
                "type": "object",
                "properties": {
                    "filename": {
                        "type": "string",
                        "description": "Nom de fichier du composant, ex: 'PricingCard.tsx'"
                    },
                    "code": {
                        "type": "string",
                        "description": "Le code source complet du composant"
                    },
                    "dependencies": {
                        "type": "array",
                        "items": {"type": "string"},
                        "description": "Les paquets npm requis par ce composant"
                    }
                },
                "required": ["filename", "code"]
            }
        }
    },
    {
        "type": "function",
        "function": {
            "name": "take_screenshot",
            "description": "Prend une capture d'écran d'une URL pour vérifier la sortie rendue",
            "parameters": {
                "type": "object",
                "properties": {
                    "url": {
                        "type": "string",
                        "description": "URL à capturer"
                    },
                    "viewport": {
                        "type": "string",
                        "description": "Taille de la fenêtre : 'mobile', 'tablette' ou 'ordinateur de bureau'"
                    }
                },
                "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": "Générez un composant React à partir de cette conception de carte et enregistrez-le. Ensuite, prenez une capture d'écran pour vérifier."
                }
            ]
        }
    ],
    tools=tools,
    tool_choice="auto"
)

Intégration du SDK Java

Dépendance 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'

Requête de base

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());
    }
}

Diffusion 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("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]")
);

Utilisation du point d'accès compatible OpenAI

L'API Z.ai suit les conventions d'OpenAI, vous pouvez donc utiliser le client Python OpenAI avec une URL de base personnalisée :

from openai import OpenAI

client = OpenAI(
    api_key="votre-clé-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": "Turn this wireframe into a working Vue 3 component with Composition API."
                }
            ]
        }
    ]
)

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

Cela signifie que tout outil prenant en charge les API compatibles OpenAI, y compris Apidog, peut se connecter à GLM-5V-Turbo en pointant vers l'URL de base de Z.ai.

Tester les appels API GLM-5V-Turbo avec Apidog

Avant d'intégrer GLM-5V-Turbo dans votre application, testez vos appels API de manière interactive avec Apidog. Cela vous évite de déboguer des charges utiles JSON brutes dans le code.

Configurer le point d'accès

Ouvrez Apidog et créez une nouvelle requête
Définissez la méthode sur POST et l'URL sur https://api.z.ai/api/paas/v4/chat/completions
Ajoutez l'en-tête Authorization: Bearer VOTRE_CLÉ
Définissez Content-Type: application/json

Construire visuellement des corps de requête multimodaux

L'éditeur JSON d'Apidog vous permet de construire le tableau messages imbriqué avec des blocs de contenu image_url et text sans écrire le JSON à la main. Vous pouvez :

Basculer entre l'entrée JSON brute et l'entrée basée sur un formulaire
Enregistrer des modèles de requête pour les schémas courants (image unique, multi-images, entrée vidéo)
Utiliser des variables d'environnement pour la clé API afin de ne pas la coller dans chaque requête

Comparer les réponses du modèle

Lors de l'évaluation de GLM-5V-Turbo par rapport à d'autres modèles de vision (Claude, GPT-4o, Gemini), utilisez l'exécuteur de collection d'Apidog pour envoyer la même image à plusieurs points d'accès et comparer les sorties côte à côte. Ceci est particulièrement utile pour les tâches Design2Code où vous souhaitez vérifier quel modèle produit le HTML/CSS le plus précis.

Valider les schémas de réponse

Les réponses en continu de GLM-5V-Turbo incluent les champs reasoning_content et content. Le validateur de réponse d'Apidog peut vérifier que votre application gère correctement les deux champs, y compris les cas limites où un champ est nul.

Téléchargez Apidog pour commencer à tester votre intégration GLM-5V-Turbo.

Comparaison des prix avec d'autres modèles de vision

Modèle	Entrée (par 1M jetons)	Sortie (par 1M jetons)	Fenêtre contextuelle	Score 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 est l'option la moins chère pour les tâches de codage basées sur la vision. Il coûte 92 % de moins que Claude Opus 4.6 pour les jetons d'entrée et 94,7 % de moins pour les jetons de sortie, tout en obtenant un score 22 % plus élevé sur Design2Code.

Le compromis : Claude et GPT-5 gèrent mieux les tâches de codage plus larges. Si votre flux de travail est spécifiquement « image en entrée, code en sortie », GLM-5V-Turbo offre le meilleur rapport qualité-prix.

Architecture : comment ça marche en coulisses

Encodeur de vision CogViT

GLM-5V-Turbo utilise CogViT, un transformateur de vision conçu pour préserver les hiérarchies spatiales et les détails visuels précis. Les encodeurs de vision standard compressent les images en vecteurs de caractéristiques plats, perdant les relations spatiales. CogViT maintient les informations de position qui sont importantes pour les tâches sensibles à la mise en page comme le placement de grille CSS, l'alignement flexbox et l'espacement au pixel près.

Prédiction multi-jetons (MTP)

L'architecture MTP prédit plusieurs jetons par passe avant au lieu d'un seul à la fois. Pour la génération de code, cela signifie une inférence plus rapide lors de la sortie de longues séquences HTML, CSS ou JavaScript. Le modèle ne génère pas jeton par jeton ; il prédit des blocs, réduisant la latence sur la fenêtre de sortie maximale de 128K.

Apprentissage par renforcement conjoint sur plus de 30 tâches

ZhipuAI a entraîné GLM-5V-Turbo avec l'apprentissage par renforcement sur plus de 30 tâches simultanément : raisonnement STEM, ancrage visuel, analyse vidéo, opération GUI et codage. Cette optimisation conjointe empêche le modèle de sur-apprendre sur un type de tâche tout en maintenant de solides performances sur l'ensemble des workflows de codage visuel.

Système de données d'agent

Le pipeline d'entraînement comprend ce que ZhipuAI appelle un système de « construction de données vérifiable à plusieurs niveaux » avec un pré-entraînement à la prédiction d'actions. En pratique, cela signifie que le modèle a été entraîné sur des séquences de « voir une capture d'écran, prédire l'action suivante, exécuter, vérifier le résultat », le rendant efficace pour les tâches GUI autonomes au-delà de la conversion statique d'image en code.

Exemples pratiques

Maquette de design en composant React

from zai import ZaiClient

client = ZaiClient(api_key="votre-clé-api")

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=[
        {
            "role": "system",
            "content": "Vous êtes un développeur frontend senior. Générez des composants React prêts pour la production avec TypeScript et Tailwind CSS. Incluez les types appropriés, les attributs d'accessibilité et la conception réactive."
        },
        {
            "role": "user",
            "content": [
                {
                    "type": "image_url",
                    "image_url": {"url": "https://example.com/hero-section.png"}
                },
                {
                    "type": "text",
                    "text": "Construisez cette section d'en-tête comme un composant React TypeScript. Elle doit être entièrement réactive avec une approche mobile-first. Incluez le fond dégradé, le bouton CTA avec état de survol, et le positionnement de l'illustration."
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

# Le modèle raisonne d'abord sur la structure de la mise en page (reasoning_content)
# puis génère le composant React complet (content)
print(response.choices[0].message.content)

Flux de travail de débogage par capture d'écran

def debug_ui_from_screenshot(screenshot_url: str, description: str) -> str:
    """Envoie une capture d'écran d'une interface utilisateur défectueuse et obtient des correctifs CSS."""
    response = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": "Vous êtes un spécialiste du débogage CSS. Analysez les captures d'écran d'interfaces utilisateur défectueuses et fournissez des correctifs CSS spécifiques. Expliquez toujours ce qui ne va pas avant de fournir la correction."
            },
            {
                "role": "user",
                "content": [
                    {
                        "type": "image_url",
                        "image_url": {"url": screenshot_url}
                    },
                    {
                        "type": "text",
                        "text": f"Rapport de bug : {description}. Identifiez les problèmes CSS et fournissez des corrections."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    return response.choices[0].message.content


# Utilisation
fix = debug_ui_from_screenshot(
    "https://example.com/broken-modal.png",
    "La boîte de dialogue modale déborde sur les écrans mobiles et le bouton de fermeture est inaccessible"
)
print(fix)

Extraction de document en données structurées

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."
                }
            ]
        }
    ]
)

C'est un cas d'utilisation puissant pour les équipes de développement d'API : photographier des designs d'API sur tableau blanc ou scanner de la documentation héritée, puis générer directement des spécifications OpenAPI. Vous pouvez ensuite importer la spécification générée dans Apidog pour obtenir de la documentation interactive, des serveurs mock et des cas de test à partir d'une seule capture d'écran.

Conseils pour tirer le meilleur parti de GLM-5V-Turbo

La qualité de l'image compte

L'encodeur CogViT préserve les détails spatiaux, mais il ne peut pas récupérer les informations qui ne sont pas présentes dans l'image source. Pour les tâches Design2Code :

Utilisez des captures d'écran en résolution 2x (Retina) pour un texte et des icônes nets et détaillés
Recadrez au composant spécifique que vous voulez recréer, pas à la page entière
Supprimez les éléments de navigateur et les décorations de fenêtre du système d'exploitation des captures d'écran
Pour une précision des couleurs, utilisez le PNG plutôt que le JPEG pour éviter les artefacts de compression

Utilisez le mode de réflexion pour les mises en page complexes

Activez le mode de réflexion ("thinking": {"type": "enabled"}) pour :

Mises en page de pages multi-composants
Designs responsives avec logique de points d'arrêt
Designs avec CSS complexe (grille, imbrication flexbox, animations)
Tâches de débogage où l'analyse des causes profondes est importante

Évitez le mode de réflexion pour les tâches simples (extraction de composant unique, légendage d'image de base) pour économiser sur les coûts de jetons et la latence.

Gérez votre fenêtre contextuelle

À 200K jetons, la fenêtre contextuelle est grande mais pas illimitée. Une seule image haute résolution peut consommer 1 000 à 5 000 jetons. Pour les workflows multi-images :

Redimensionnez les images à la résolution minimale requise par la tâche
Utilisez la mise en cache du contexte pour les conversations itératives où le design de base reste le même
Décomposez les designs de page entière en captures d'écran au niveau des composants pour une génération individuelle

Optimisation des coûts avec la mise en cache

La mise en cache du contexte coûte 0,24 $/M jetons (80 % de réduction par rapport à la tarification d'entrée standard). Pour les workflows itératifs de conception à code où vous affinez le même composant :

Envoyez l'image du design dans la première requête
Les requêtes suivantes font référence au contexte mis en cache
Chaque itération coûte une fraction du renvoi de l'image complète

Gestion des erreurs et des cas limites

Limites de débit et tentatives

L'API Z.ai renvoie des codes d'état HTTP standard. Gérez-les dans votre intégration :

import time
from zai import ZaiClient

client = ZaiClient(api_key="votre-clé-api")

def call_with_retry(messages, max_retries=3):
    """Appelle GLM-5V-Turbo avec un backoff exponentiel en cas de limites de débit."""
    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:
                # Limite de débit atteinte - attendre et réessayer
                wait_time = 2 ** attempt
                print(f"Limite de débit atteinte. Nouvelle tentative dans {wait_time}s...")
                time.sleep(wait_time)
                continue
            elif "400" in error_str:
                # Mauvaise requête - ne pas réessayer, corriger l'entrée
                print(f"Mauvaise requête : {error_str}")
                raise
            else:
                # Erreur de serveur - réessayer
                if attempt < max_retries - 1:
                    time.sleep(1)
                    continue
                raise

    raise Exception("Nombre maximum de tentatives dépassé")

Gestion des sorties volumineuses

Avec une fenêtre de sortie maximale de 128K, GLM-5V-Turbo peut générer des applications multi-fichiers entières en une seule réponse. Votre application doit gérer cela :

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=messages,
    max_tokens=131072  # Sortie complète de 128K
)

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

# Analyser plusieurs fichiers à partir de la sortie
# Le modèle sépare généralement les fichiers avec des délimiteurs de code 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"Écriture de {filename} ({lang})")
    with open(filename, "w") as f:
        f.write(code.strip())

Accessibilité de l'URL de l'image

Le modèle récupère les images à partir des URL que vous fournissez. Échecs courants :

URL signées expirées provenant du stockage cloud (S3, GCS). Générez des URL avec une expiration d'au moins 1 heure.
Images avec restrictions CORS qui bloquent la récupération côté serveur. Hébergez les images sur un CDN sans restrictions CORS.
Images volumineuses qui expirent pendant le téléchargement. Redimensionnez-les à moins de 5 Mo avant de les envoyer.

Si vous contrôlez l'hébergement d'images, un CDN public sans authentification est l'option la plus fiable pour les appels API.

GLM-5V-Turbo vs utilisation via OpenRouter

Vous pouvez accéder à GLM-5V-Turbo via OpenRouter comme alternative à l'API directe Z.ai. OpenRouter a traité plus de 44 000 requêtes avec plus de 769 millions de jetons d'invite durant les deux premiers jours de disponibilité du modèle.

Avantages d'OpenRouter :

Clé API unique pour plusieurs fournisseurs de modèles
Repli automatique en cas de panne de Z.ai
Analytique d'utilisation pour tous vos modèles
Même format compatible OpenAI

Compromis : OpenRouter ajoute une petite majoration au prix des jetons. Pour une utilisation en production à grand volume, l'API directe Z.ai est moins chère.

Construire un pipeline de conception à code avec GLM-5V-Turbo

Voici un workflow complet qui prend une maquette de conception, génère du code et valide la sortie :

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 complet : capture d'écran de design -> code fonctionnel -> validation."""

    os.makedirs(output_dir, exist_ok=True)

    # Étape 1 : Analyser le 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": "Analysez ce design. Listez : 1) Tous les composants UI visibles, 2) La palette de couleurs (valeurs hexadécimales), 3) La typographie (tailles de police, graisses), 4) La structure de la mise en page (grille/flexbox), 5) Les éléments interactifs (boutons, entrées, listes déroulantes)."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    design_analysis = analysis.choices[0].message.content
    print(f"Analyse du design terminée : {len(design_analysis)} caractères")

    # Étape 2 : Générer le composant
    generation = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": f"Vous êtes un développeur {framework}. Générez des composants prêts pour la production, accessibles et responsifs. Utilisez TypeScript et Tailwind CSS."
            },
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": f"Basé sur ce design, générez le composant {framework} complet. Incluez tous les styles, les états de survol et les points d'arrêt responsifs. Le composant doit correspondre au design pixel par pixel."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"},
        max_tokens=16384
    )

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

    # Étape 3 : Enregistrer la sortie
    output_file = os.path.join(output_dir, "Component.tsx")
    with open(output_file, "w") as f:
        # Extraire le code des blocs de code markdown si présents
        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"Composant enregistré dans {output_file}")
    return output_file


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

Ce pipeline sépare l'analyse de la génération. Le premier appel mappe la structure, les couleurs et la typographie du design. Le second appel génère du code avec cette compréhension comme contexte. Diviser le travail en deux appels produit une sortie plus précise qu'une seule requête « convertir cela en code », car le modèle a déjà raisonné sur la mise en page avant d'écrire le code.

Vous pouvez tester chaque étape indépendamment dans Apidog en enregistrant la requête d'analyse et la requête de génération comme points d'accès distincts dans une collection, puis en les exécutant en séquence avec l'exécuteur de collection.

button

FAQ

GLM-5V-Turbo est-il gratuit ?

Non. La tarification de l'API est de 1,20 $/M jetons d'entrée et 4,00 $/M jetons de sortie. ZhipuAI propose une interface web gratuite sur chat.z.ai pour les tests, mais l'utilisation de l'API nécessite un paiement.

Puis-je envoyer des images encodées en base64 ?

La documentation montre une entrée d'image basée sur une URL (image_url avec un champ url). Pour le support base64, encodez votre image comme un URI de données : data:image/png;base64,{encoded_data} et passez-le comme valeur de l'URL. Ceci suit la même convention que l'API OpenAI Vision.

Comment GLM-5V-Turbo gère-t-il l'entrée vidéo ?

La vidéo est répertoriée comme une modalité d'entrée prise en charge. Le modèle peut traiter des images vidéo pour des tâches telles que l'analyse d'enregistrements d'interactions UI, l'identification de bogues d'animation ou la compréhension des parcours utilisateur. Les exigences spécifiques en matière de codec et de format ne sont pas encore documentées.

Quelle est la différence entre GLM-5-Turbo et GLM-5V-Turbo ?

GLM-5-Turbo est un modèle de codage textuel uniquement. GLM-5V-Turbo ajoute l'encodeur de vision CogViT pour l'entrée multimodale (images, vidéo, fichiers). Choisissez GLM-5-Turbo pour les tâches de codage purement textuelles et GLM-5V-Turbo lorsque votre workflow implique une entrée visuelle.

Puis-je utiliser GLM-5V-Turbo avec le client Python OpenAI ?

Oui. Définissez la base_url sur https://api.z.ai/api/paas/v4 et utilisez votre clé API Z.ai. Le point d'accès suit les conventions compatibles OpenAI pour les complétions de chat, y compris les formats de message multimodaux.

Comment se compare-t-il à Claude pour le codage ?

GLM-5V-Turbo domine sur les tâches de vision-à-code (94,8 contre 77,3 sur Design2Code). Claude est en tête pour le codage purement textuel, l'architecture backend et la compréhension au niveau du dépôt. Ils servent des cas d'utilisation différents. Pour les équipes faisant les deux, la différence de coût est significative : GLM-5V-Turbo est 92 % moins cher en jetons d'entrée que Claude Opus 4.6.

Quelle est la taille maximale des images ?

La documentation ne spécifie pas de limite de pixels. La fenêtre contextuelle de 200K est la contrainte pratique ; les images plus grandes consomment plus de jetons. Pour les tâches Design2Code, les captures d'écran 1920x1080 en résolution 2x fonctionnent bien sans atteindre les limites.

ZhipuAI conserve-t-il mes données API ?

Non. La politique de données de Z.ai stipule aucune utilisation pour l'entraînement et aucune rétention d'invite pour les appels API. Vos images et les sorties de code ne sont pas utilisées pour entraîner de futurs modèles.