Cara Menggunakan API GLM-5V-Turbo

Ringkasan Cepat

GLM-5V-Turbo adalah model pengkodean visual multimodal ZhipuAI dengan jendela konteks 200K, output maksimum 128K, dan dukungan asli untuk input gambar, video, teks, dan file. Model ini mencetak 94.8 pada benchmark Design2Code (vs 77.3 dari Claude Opus 4.6) dan biayanya $1.20/Juta token input, $4/Juta token output. Panduan ini mencakup pengaturan, integrasi API, dan contoh praktis untuk tugas pengkodean berbasis visi.

Pengantar

ZhipuAI (beroperasi sebagai Z.ai) merilis GLM-5V-Turbo pada 1 April 2026. Ini adalah model pertama mereka yang dibangun khusus untuk tugas pengkodean berbasis visi, di mana inputnya adalah gambar, tangkapan layar, atau video, dan outputnya adalah kode yang berfungsi.

Model ini termasuk dalam keluarga yang mencakup GLM-5 (teks-saja, 744B parameter) dan GLM-5-Turbo (pengkodean teks yang dioptimalkan). GLM-5V-Turbo menambahkan pemahaman multimodal asli di atas varian Turbo, menggunakan encoder visi CogViT dan arsitektur Multi-Token Prediction (MTP).

Angka yang menonjol: 94.8 pada Design2Code, di mana model mereproduksi mockup UI sebagai HTML/CSS. Claude Opus 4.6 mencetak 77.3 pada tes yang sama. Itu adalah selisih 22% pada tugas spesifik mengubah desain visual menjadi kode.

Panduan ini menunjukkan cara memanggil API GLM-5V-Turbo, mengirim gambar dan video, mengaktifkan mode berpikir, melakukan streaming respons, menggunakan pemanggilan fungsi, dan menguji integrasi Anda dengan Apidog.

tombol

Kemampuan GLM-5V-Turbo

Spesifikasi Inti

Spesifikasi	Nilai
Jendela konteks	200K token (202.752)
Output maksimum	128K token (131.072)
Modalitas input	Gambar, video, teks, file (PDF, Word)
Modalitas output	Teks
Harga input	$1.20 per juta token
Harga output	$4.00 per juta token
Harga baca cache	$0.24 per juta token
Tanggal rilis	1 April 2026
Titik akhir API	`https://api.z.ai/api/paas/v4/chat/completions`

Kemampuan yang Didukung

Mode berpikir dengan token penalaran yang dapat dikonfigurasi (tag <think>)
Output streaming untuk respons waktu nyata
Pemanggilan fungsi untuk integrasi alat
Caching konteks untuk optimasi percakapan panjang
Output terstruktur melalui konfigurasi format respons

Kelebihan

GLM-5V-Turbo dibuat khusus untuk kategori yang sempit namun bernilai tinggi: melihat konten visual dan menulis kode darinya. Kasus penggunaan utamanya:

Rekreasi Frontend dari mockup desain. Berikan tangkapan layar Figma atau kompilasi desain dan itu akan menghasilkan HTML/CSS yang akurat piksel. Skor Design2Code 94.8 mendukung ini dengan angka-angka yang pasti.

Eksplorasi GUI otonom. Model ini terintegrasi dengan OpenClaw (kerangka agen ZhipuAI) untuk penjelajahan situs web otonom, pengisian formulir, dan pengujian interaksi. Model ini memiliki skor yang baik pada benchmark AndroidWorld dan WebVoyager untuk operasi GUI.

Debugging kode dari tangkapan layar. Kirim tangkapan layar UI yang rusak dan model mengidentifikasi masalah rendering, bug tata letak, dan konflik CSS.

Ekstraksi dokumen. Proses PDF, dokumen Word, dan gambar yang dipindai untuk mengekstrak data terstruktur, tabel, dan teks.

Keterbatasan

Pada pengkodean teks murni (tanpa input visual), Claude dan GPT-5 masih unggul dalam tugas backend, eksplorasi repositori, dan arsitektur sistem. Kekuatan GLM-5V-Turbo secara spesifik adalah ketika input visual mendorong tugas pengkodean.

Memulai: Penyiapan API

Dapatkan Kunci API Anda

Daftar di z.ai
Navigasi ke bagian kunci API di dashboard Anda
Hasilkan kunci baru
Simpan dengan aman; Anda akan meneruskannya sebagai token Bearer

Konfigurasi Dasar

Semua permintaan menuju ke:

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

Header yang Diperlukan:

Authorization: Bearer YOUR_API_KEY
Content-Type: application/json

API mengikuti konvensi yang kompatibel dengan OpenAI, jadi jika Anda pernah bekerja dengan API OpenAI atau Anthropic, format permintaannya akan terasa akrab.

Mengirim Permintaan Pertama Anda dengan cURL

Analisis Gambar Dasar

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

Dengan Mode Berpikir Diaktifkan

Mode berpikir menambahkan langkah penalaran sebelum model menghasilkan responsnya. Ini meningkatkan akurasi pada tugas pengkodean yang kompleks dengan biaya token output tambahan.

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

Ketika mode berpikir diaktifkan, respons mencakup reasoning_content di samping bidang content standar. Token penalaran menunjukkan analisis langkah-demi-langkah model sebelum menghasilkan jawaban akhir.

Integrasi SDK Python

Instalasi

pip install zai-sdk

Atau pasang versi tertentu:

pip install zai-sdk==0.0.4

Gambar-ke-Kode Dasar

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)

Respons Streaming

Untuk tugas pembuatan kode yang panjang (seluruh tata letak halaman, UI multi-komponen), streaming memberi Anda output secara waktu nyata alih-alih menunggu respons penuh:

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)

Input Multi-Gambar

Kirim beberapa gambar dalam satu permintaan. Ini berguna untuk membandingkan desain, menyediakan referensi gaya di samping mockup, atau mengirim tangkapan layar sebelum/sesudah untuk debugging:

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

Pemanggilan Fungsi

GLM-5V-Turbo mendukung pemanggilan fungsi, memungkinkan Anda mengintegrasikannya ke dalam alur kerja keagenan di mana model dapat meminta tindakan eksternal:

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"
)

Integrasi SDK Java

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

Permintaan Dasar

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

Menggunakan Titik Akhir yang Kompatibel dengan OpenAI

API Z.ai mengikuti konvensi OpenAI, sehingga Anda dapat menggunakan klien Python OpenAI dengan URL dasar kustom:

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)

Ini berarti setiap alat yang mendukung API yang kompatibel dengan OpenAI, termasuk Apidog, dapat terhubung ke GLM-5V-Turbo dengan mengarahkan ke URL dasar Z.ai.

Menguji Panggilan API GLM-5V-Turbo dengan Apidog

Sebelum mengintegrasikan GLM-5V-Turbo ke dalam aplikasi Anda, uji panggilan API Anda secara interaktif dengan Apidog. Ini menghemat Anda dari debugging payload JSON mentah dalam kode.

Siapkan Titik Akhir

Buka Apidog dan buat permintaan baru
Atur metode ke POST dan URL ke https://api.z.ai/api/paas/v4/chat/completions
Tambahkan header Authorization: Bearer YOUR_KEY
Atur Content-Type: application/json

Bangun Badan Permintaan Multimodal secara Visual

Editor JSON Apidog memungkinkan Anda membangun array messages bertingkat dengan blok konten image_url dan text tanpa menulis JSON secara manual. Anda bisa:

Beralih antara JSON mentah dan input berbasis formulir
Menyimpan templat permintaan untuk pola umum (gambar tunggal, multi-gambar, input video)
Menggunakan variabel lingkungan untuk kunci API sehingga Anda tidak perlu menempelkannya di setiap permintaan

Bandingkan Respons Model

Saat mengevaluasi GLM-5V-Turbo terhadap model visi lainnya (Claude, GPT-4o, Gemini), gunakan collection runner Apidog untuk mengirim gambar yang sama ke beberapa titik akhir dan membandingkan output secara berdampingan. Ini sangat berguna untuk tugas Design2Code di mana Anda ingin memverifikasi model mana yang menghasilkan HTML/CSS paling akurat.

Validasi Skema Respons

Respons streaming GLM-5V-Turbo mencakup bidang reasoning_content dan content. Validator respons Apidog dapat memeriksa bahwa aplikasi Anda menangani kedua bidang dengan benar, termasuk kasus ekstrem di mana satu bidang nol.

Unduh Apidog untuk mulai menguji integrasi GLM-5V-Turbo Anda.

Perbandingan Harga dengan Model Visi Lain

Model	Input (per 1 Juta Token)	Output (per 1 Juta Token)	Jendela Konteks	Skor 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 adalah pilihan termurah untuk tugas pengkodean berbasis visi. Biayanya 92% lebih murah daripada Claude Opus 4.6 untuk token input dan 94.7% lebih murah untuk token output, sementara mencetak 22% lebih tinggi pada Design2Code.

Pertukarannya: Claude dan GPT-5 menangani tugas pengkodean yang lebih luas dengan lebih baik. Jika alur kerja Anda secara spesifik adalah "gambar masuk, kode keluar," GLM-5V-Turbo menawarkan rasio harga-terhadap-kinerja terkuat.

Arsitektur: Cara Kerjanya di Balik Layar

Encoder Visi CogViT

GLM-5V-Turbo menggunakan CogViT, sebuah transformer visi yang dirancang untuk mempertahankan hierarki spasial dan detail visual yang halus. Encoder visi standar mengompresi gambar menjadi vektor fitur datar, kehilangan hubungan spasial. CogViT mempertahankan informasi posisi yang penting untuk tugas-tugas yang sensitif terhadap tata letak seperti penempatan grid CSS, perataan flexbox, dan spasi yang akurat piksel.

Prediksi Multi-Token (MTP)

Arsitektur MTP memprediksi beberapa token per forward pass alih-alih satu per satu. Untuk pembuatan kode, ini berarti inferensi yang lebih cepat saat mengeluarkan urutan HTML, CSS, atau JavaScript yang panjang. Model tidak menghasilkan token-demi-token; ia memprediksi potongan, mengurangi latensi pada jendela output maksimum 128K.

Pembelajaran Penguatan Bersama 30+ Tugas

ZhipuAI melatih GLM-5V-Turbo dengan pembelajaran penguatan di lebih dari 30 tugas secara bersamaan: penalaran STEM, visual grounding, analisis video, operasi GUI, dan pengkodean. Optimasi bersama ini mencegah model overfitting pada satu jenis tugas sambil mempertahankan kinerja yang kuat di seluruh rentang alur kerja visi-pengkodean.

Sistem Data Agensi

Saluran pelatihan mencakup apa yang disebut ZhipuAI sebagai sistem "konstruksi data multi-level, yang dapat diverifikasi" dengan pelatihan awal prediksi tindakan. Dalam praktiknya, ini berarti model dilatih pada urutan "lihat tangkapan layar, prediksi tindakan berikutnya, eksekusi, verifikasi hasil," membuatnya efektif untuk tugas GUI otonom di luar konversi gambar-ke-kode statis.

Contoh Praktis

Mockup Desain ke Komponen React

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)

Alur Kerja Debugging Tangkapan Layar

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)

Ekstraksi Dokumen ke Data Terstruktur

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

Ini adalah kasus penggunaan yang kuat untuk tim pengembangan API: foto desain API papan tulis atau pindai dokumentasi lama, lalu hasilkan spesifikasi OpenAPI secara langsung. Anda kemudian dapat mengimpor spesifikasi yang dihasilkan ke Apidog untuk mendapatkan dokumentasi interaktif, server mock, dan kasus uji dari satu tangkapan layar.

Tips untuk Mendapatkan Hasil Maksimal dari GLM-5V-Turbo

Kualitas Gambar Penting

Encoder CogViT mempertahankan detail spasial, tetapi tidak dapat memulihkan informasi yang tidak ada dalam gambar sumber. Untuk tugas Design2Code:

Gunakan tangkapan layar dengan resolusi 2x (Retina) untuk teks dan detail ikon yang tajam
Pangkas ke komponen spesifik yang ingin Anda buat ulang, bukan seluruh halaman
Hapus chrome browser dan dekorasi jendela OS dari tangkapan layar
Untuk akurasi warna, gunakan PNG daripada JPEG untuk menghindari artefak kompresi

Gunakan Mode Berpikir untuk Tata Letak yang Kompleks

Aktifkan mode berpikir ("thinking": {"type": "enabled"}) untuk:

Tata letak halaman multi-komponen
Desain responsif dengan logika breakpoint
Desain dengan CSS kompleks (grid, flexbox bersarang, animasi)
Tugas debugging di mana analisis akar masalah penting

Lewati mode berpikir untuk tugas sederhana (ekstraksi komponen tunggal, pembuatan caption gambar dasar) untuk menghemat biaya token dan latensi.

Kelola Jendela Konteks Anda

Dengan 200K token, jendela konteks besar tetapi tidak tak terbatas. Satu gambar beresolusi tinggi dapat mengonsumsi 1.000-5.000 token. Untuk alur kerja multi-gambar:

Ubah ukuran gambar ke resolusi minimum yang dibutuhkan tugas
Gunakan caching konteks untuk percakapan berulang di mana desain dasarnya tetap sama
Pisahkan desain halaman penuh menjadi tangkapan layar tingkat komponen untuk pembuatan individual

Optimasi Biaya dengan Caching

Caching konteks berharga $0.24/Juta token (diskon 80% dari harga input standar). Untuk alur kerja desain-ke-kode yang berulang di mana Anda menyempurnakan komponen yang sama:

Kirim gambar desain pada permintaan pertama
Permintaan lanjutan mereferensikan konteks yang di-cache
Setiap iterasi berharga sebagian kecil dari pengiriman ulang gambar penuh

Menangani Kesalahan dan Kasus Ekstrem

Batas Tingkat dan Percobaan Ulang

API Z.ai mengembalikan kode status HTTP standar. Tangani ini dalam integrasi Anda:

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
                # Batas tingkat tercapai - tunggu dan coba lagi
                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
                # Permintaan buruk - jangan coba lagi, perbaiki input
                print(f"Bad request: {error_str}")
                raise
            else:
                # Server error - retry
                # Kesalahan server - coba lagi
                if attempt < max_retries - 1:
                    time.sleep(1)
                    continue
                raise

    raise Exception("Max retries exceeded") # Jumlah percobaan ulang maksimum terlampaui

Menangani Output Besar

Dengan jendela output maksimum 128K, GLM-5V-Turbo dapat menghasilkan seluruh aplikasi multi-file dalam satu respons. Aplikasi Anda perlu menangani ini:

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
# Menganalisis beberapa file dari output
# The model typically separates files with markdown code fences
# Model biasanya memisahkan file dengan pagar kode 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"Writing {filename} ({lang})")
    with open(filename, "w") as f:
        f.write(code.strip())

Aksesibilitas URL Gambar

Model mengambil gambar dari URL yang Anda berikan. Kegagalan umum:

URL yang ditandatangani dan kedaluwarsa dari penyimpanan cloud (S3, GCS). Hasilkan URL dengan kedaluwarsa setidaknya 1 jam.
Gambar yang dibatasi CORS yang memblokir pengambilan sisi server. Host gambar di CDN tanpa batasan CORS.
Gambar besar yang kehabisan waktu selama pengunduhan. Ubah ukuran menjadi di bawah 5MB sebelum mengirim.

Jika Anda mengontrol hosting gambar, CDN publik tanpa otentikasi adalah opsi paling andal untuk panggilan API.

GLM-5V-Turbo vs Menggunakannya melalui OpenRouter

Anda dapat mengakses GLM-5V-Turbo melalui OpenRouter sebagai alternatif dari API Z.ai langsung. OpenRouter memproses lebih dari 44.000 permintaan dengan 769 Juta+ token prompt dalam dua hari pertama ketersediaan model.

Manfaat OpenRouter:

Satu kunci API untuk beberapa penyedia model
Fallback otomatis jika Z.ai mengalami downtime
Analisis penggunaan di semua model Anda
Format yang sama yang kompatibel dengan OpenAI

Pertukaran: OpenRouter menambahkan markup kecil pada harga token. Untuk penggunaan produksi volume tinggi, API Z.ai langsung lebih murah.

Membangun Saluran Desain-ke-Kode dengan GLM-5V-Turbo

Berikut adalah alur kerja lengkap yang mengambil mockup desain, menghasilkan kode, dan memvalidasi output:

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
    # Langkah 1: Analisis desain
    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
    # Langkah 2: Hasilkan komponen
    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
    # Langkah 3: Simpan output
    output_file = os.path.join(output_dir, "Component.tsx")
    with open(output_file, "w") as f:
        # Extract code from markdown fences if present
        # Ekstrak kode dari pagar markdown jika ada
        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
# Penggunaan
design_to_code_pipeline(
    image_url="https://example.com/dashboard-card.png",
    output_dir="./generated-components",
    framework="react"
)

Saluran ini memisahkan analisis dari generasi. Panggilan pertama memetakan struktur, warna, dan tipografi desain. Panggilan kedua menghasilkan kode dengan pemahaman itu sebagai konteks. Memisahkan pekerjaan menjadi dua panggilan menghasilkan output yang lebih akurat daripada satu permintaan "konversi ini ke kode", karena model sudah bernalar tentang tata letak sebelum menulis kode.

Anda dapat menguji setiap langkah secara independen di Apidog dengan menyimpan permintaan analisis dan permintaan generasi sebagai titik akhir terpisah dalam koleksi, lalu menjalankannya secara berurutan dengan collection runner.

tombol

FAQ

Apakah GLM-5V-Turbo gratis digunakan?

Tidak. Harga API adalah $1.20/Juta token input dan $4.00/Juta token output. ZhipuAI menawarkan antarmuka web gratis di chat.z.ai untuk pengujian, tetapi penggunaan API memerlukan pembayaran.

Bisakah saya mengirim gambar yang dienkode base64?

Dokumentasi menunjukkan input gambar berbasis URL (image_url dengan bidang url). Untuk dukungan base64, enkode gambar Anda sebagai URI data: data:image/png;base64,{encoded_data} dan teruskan sebagai nilai URL. Ini mengikuti konvensi yang sama dengan OpenAI Vision API.

Bagaimana GLM-5V-Turbo menangani input video?

Video terdaftar sebagai modalitas input yang didukung. Model ini dapat memproses bingkai video untuk tugas-tugas seperti menganalisis rekaman interaksi UI, mengidentifikasi bug animasi, atau memahami alur pengguna. Persyaratan codec dan format spesifik belum didokumentasikan.

Apa perbedaan antara GLM-5-Turbo dan GLM-5V-Turbo?

GLM-5-Turbo adalah model pengkodean teks-saja. GLM-5V-Turbo menambahkan encoder visi CogViT untuk input multimodal (gambar, video, file). Pilih GLM-5-Turbo untuk tugas pengkodean teks murni dan GLM-5V-Turbo ketika alur kerja Anda melibatkan input visual.

Bisakah saya menggunakan GLM-5V-Turbo dengan klien Python OpenAI?

Ya. Atur base_url ke https://api.z.ai/api/paas/v4 dan gunakan kunci API Z.ai Anda. Titik akhir mengikuti konvensi yang kompatibel dengan OpenAI untuk penyelesaian obrolan, termasuk format pesan multimodal.

Bagaimana perbandingannya dengan Claude untuk pengkodean?

GLM-5V-Turbo mendominasi pada tugas visi-ke-kode (94.8 vs 77.3 pada Design2Code). Claude unggul pada pengkodean teks murni, arsitektur backend, dan pemahaman tingkat repositori. Mereka melayani kasus penggunaan yang berbeda. Untuk tim yang melakukan keduanya, perbedaan biayanya signifikan: GLM-5V-Turbo 92% lebih murah untuk token input daripada Claude Opus 4.6.

Berapa ukuran gambar maksimum?

Dokumentasi tidak menentukan batas piksel. Jendela konteks 200K adalah batasan praktis; gambar yang lebih besar mengonsumsi lebih banyak token. Untuk tugas Design2Code, tangkapan layar 1920x1080 pada resolusi 2x berfungsi dengan baik tanpa mencapai batas.

Apakah ZhipuAI menyimpan data API saya?

Tidak. Kebijakan data Z.ai menyatakan tidak ada penggunaan pelatihan dan tidak ada retensi prompt untuk panggilan API. Gambar dan output kode Anda tidak digunakan untuk melatih model di masa mendatang.