GLM-5V-Turbo API Nasıl Kullanılır?

ÖZET

GLM-5V-Turbo, ZhipuAI'ın 200K bağlam penceresine, 128K maksimum çıkışa ve görüntüler, videolar, metinler ve dosya girdileri için yerel desteğe sahip çok modlu bir görsel kodlama modelidir. Design2Code kıyaslamasında 94.8 puan aldı (Claude Opus 4.6'nın 77.3'üne karşılık) ve 1.20$/M giriş belirteci, 4$/M çıkış belirteci maliyeti vardır. Bu rehber, görsel tabanlı kodlama görevleri için kurulumu, API entegrasyonunu ve pratik örnekleri kapsar.

Giriş

ZhipuAI (Z.ai olarak faaliyet göstermektedir) GLM-5V-Turbo'yu 1 Nisan 2026'da piyasaya sürdü. Bu, girdinin bir görüntü, ekran görüntüsü veya video olduğu ve çıktının çalışan kod olduğu, görsel tabanlı kodlama görevleri için özel olarak oluşturulmuş ilk modelidir.

Model, GLM-5 (yalnızca metin, 744 milyar parametre) ve GLM-5-Turbo'yu (optimize edilmiş metin kodlama) içeren bir ailede yer almaktadır. GLM-5V-Turbo, bir CogViT görsel kodlayıcı ve Çoklu Belirteç Tahmini (MTP) mimarisi kullanarak Turbo varyantının üzerine yerel çok modlu anlayış ekler.

Öne çıkan rakam: modellerin UI maketlerini HTML/CSS olarak yeniden ürettiği Design2Code'da 94.8. Claude Opus 4.6 aynı testte 77.3 puan aldı. Bu, görsel tasarımları koda dönüştürme gibi belirli bir görevde %22'lik bir fark anlamına geliyor.

Bu rehber size GLM-5V-Turbo API'sini nasıl çağıracağınızı, görüntü ve video göndereceğinizi, düşünme modunu etkinleştireceğinizi, yanıtları nasıl akışa alacağınızı, işlev çağrısını nasıl kullanacağınızı ve entegrasyonunuzu Apidog ile nasıl test edeceğinizi gösterir.

GLM-5V-Turbo neler yapabilir

Temel özellikler

Desteklenen yetenekler

• Yapılandırılabilir akıl yürütme belirteçleriyle ( etiketleri) düşünme modu
• Gerçek zamanlı yanıtlar için akış çıkışı
• Araç entegrasyonu için işlev çağırma
• Uzun sohbet optimizasyonu için bağlam önbellekleme
• Yanıt formatı yapılandırması aracılığıyla yapılandırılmış çıktı

Öne çıktığı alanlar

GLM-5V-Turbo, dar ama yüksek değerli bir kategori için özel olarak tasarlanmıştır: görsel içeriğe bakıp ondan kod yazmak. Temel kullanım durumları:

Tasarım maketlerinden ön uç yeniden oluşturma. Bir Figma ekran görüntüsü veya tasarım bileşeni verin ve piksel hassasiyetinde HTML/CSS üretir. 94.8 Design2Code puanı bunu somut sayılarla desteklemektedir.

GUI otonom keşif. Model, otonom web sitesi gezinmesi, form doldurma ve etkileşim testi için OpenClaw (ZhipuAI'nin aracı çerçevesi) ile entegre olur. GUI işlemi için AndroidWorld ve WebVoyager kıyaslamalarında iyi performans gösterdi.

Ekran görüntülerinden kod hata ayıklama. Bozuk bir UI'ın ekran görüntüsünü gönderin ve model oluşturma sorunlarını, düzen hatalarını ve CSS çakışmalarını tanımlar.

Belge çıkarma. Yapılandırılmış verileri, tabloları ve metinleri çıkarmak için PDF'leri, Word belgelerini ve taranmış görüntüleri işleyin.

Öne çıkmadığı alanlar

Salt metin kodlamada (görsel girdi olmadan), Claude ve GPT-5, arka uç görevleri, depo keşfi ve sistem mimarisi genelinde hala lider konumdadır. GLM-5V-Turbo'nun gücü, özellikle görsel girdinin kodlama görevini yönlendirdiği durumlardadır.

Başlarken: API kurulumu

API anahtarınızı alın

1. z.ai adresinden kaydolun
2. Panonuzdaki API anahtarları bölümüne gidin
3. Yeni bir anahtar oluşturun
4. Güvenli bir şekilde saklayın; bunu bir Taşıyıcı belirteç olarak ileteceksiniz

Temel yapılandırma

Tüm istekler şuraya gider:

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

Gerekli başlıklar:

Authorization: Bearer YOUR_API_KEY
Content-Type: application/json

API, OpenAI uyumlu kuralları takip eder, bu nedenle OpenAI veya Anthropic API'leriyle çalıştıysanız, istek formatı tanıdık gelecektir.

cURL ile ilk isteğinizi gönderme

Temel görüntü analizi

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": "Bu kontrol paneli kullanıcı arayüzünü duyarlı HTML ve CSS olarak yeniden oluşturun. Tailwind CSS sınıflarını kullanın."
          }
        ]
      }
    ]
  }'

Düşünme modu etkinleştirildiğinde

Düşünme modu, modelin yanıtını oluşturmadan önce bir akıl yürütme adımı ekler. Bu, ek çıktı belirteçleri maliyetiyle karmaşık kodlama görevlerinde doğruluğu artırır.

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": "Bu giriş formunda mobil cihazlarda bir düzen hatası var. Sorunu belirleyin ve düzeltilmiş CSS'i sağlayın."
          }
        ]
      }
    ],
    "thinking": {
      "type": "enabled"
    }
  }'

Düşünme modu etkinleştirildiğinde, yanıt standart `content` alanının yanı sıra `reasoning_content` içerir. Akıl yürütme belirteçleri, modelin nihai yanıtı üretmeden önceki adım adım analizini gösterir.

Python SDK entegrasyonu

Kurulum

pip install zai-sdk

Veya belirli bir sürümü sabitleyin:

pip install zai-sdk==0.0.4

Temel görüntüden koda dönüştürme

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": "Bu fiyatlandırma sayfası tasarımını Tailwind CSS kullanarak bir React bileşenine dönüştürün. Mobil, tablet ve masaüstü için duyarlı kesme noktalarını ekleyin."
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

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

Yanıtları akışa alma

Uzun kod oluşturma görevleri (tüm sayfa düzenleri, çok bileşenli kullanıcı arayüzleri) için, akış, tam yanıtı beklemeden size gerçek zamanlı çıktı verir:

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": "Bu açılış sayfasının tamamını gömülü CSS ve JavaScript içeren tek bir HTML dosyası olarak oluşturun. Akıcı kaydırma, sabit bir gezinme çubuğu ve çalışan bir iletişim formu ekleyin."
                }
            ]
        }
    ],
    stream=True
)

for chunk in response:
    delta = chunk.choices[0].delta
    # Akıl yürütme belirteçlerini yazdır (düşünme modu)
    if delta.reasoning_content:
        print(f"[thinking] {delta.reasoning_content}", end="", flush=True)
    # Oluşturulan kodu yazdır
    if delta.content:
        print(delta.content, end="", flush=True)

Çoklu görüntü girdisi

Tek bir istekte birden fazla görüntü gönderin. Bu, tasarımları karşılaştırmak, maketlerin yanında stil referansları sağlamak veya hata ayıklama için önceki/sonraki ekran görüntülerini göndermek için kullanışlıdır:

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": "İlk görüntü tasarım maketi. İkincisi mevcut uygulama. Tüm görsel farklılıkları belirleyin ve maketle eşleşmesi için CSS düzeltmeleri sağlayın."
                }
            ]
        }
    ]
)

İşlev çağırma

GLM-5V-Turbo, modelin harici eylemler talep edebileceği aracılı iş akışlarına entegre etmenizi sağlayan işlev çağırmayı destekler:

tools = [
    {
        "type": "function",
        "function": {
            "name": "save_component",
            "description": "Oluşturulan bir React bileşenini dosyaya kaydet",
            "parameters": {
                "type": "object",
                "properties": {
                    "filename": {
                        "type": "string",
                        "description": "Bileşen dosya adı, örn. 'PricingCard.tsx'"
                    },
                    "code": {
                        "type": "string",
                        "description": "Bileşenin tam kaynak kodu"
                    },
                    "dependencies": {
                        "type": "array",
                        "items": {"type": "string"},
                        "description": "Bu bileşenin gerektirdiği npm paketleri"
                    }
                },
                "required": ["filename", "code"]
            }
        }
    },
    {
        "type": "function",
        "function": {
            "name": "take_screenshot",
            "description": "Oluşturulan çıktıyı doğrulamak için bir URL'nin ekran görüntüsünü alın",
            "parameters": {
                "type": "object",
                "properties": {
                    "url": {
                        "type": "string",
                        "description": "Ekran görüntüsü alınacak URL"
                    },
                    "viewport": {
                        "type": "string",
                        "description": "Görünüm alanı boyutu: 'mobil', 'tablet' veya 'masaüstü'"
                    }
                },
                "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": "Bu kart tasarımından bir React bileşeni oluşturun ve kaydedin. Ardından doğrulamak için bir ekran görüntüsü alın."
                }
            ]
        }
    ],
    tools=tools,
    tool_choice="auto"
)

Java SDK entegrasyonu

Maven bağımlılığı

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

Temel istek

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("Bu tasarımı Tailwind CSS ile HTML'e dönüştürün.")
                                .build()
                        ))
                        .build()
                ))
                .build();

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

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

Java'da akış

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("Bu kontrol panelini bir React bileşeni olarak oluşturun.")
                        .build()
                ))
                .build()
        ))
        .build();

ChatCompletionResponse streamResponse =
    client.chat().createChatCompletionStream(streamRequest);

streamResponse.getFlowable().subscribe(
    data -> System.out.print(data),
    error -> System.err.println("Hata: " + error.getMessage()),
    () -> System.out.println("\n[Tamamlandı]")
);

OpenAI uyumlu uç noktayı kullanma

Z.ai API'si OpenAI kurallarını takip eder, bu nedenle OpenAI Python istemcisini özel bir temel URL ile kullanabilirsiniz:

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": "Bu tel çerçeveyi Composition API ile çalışan bir Vue 3 bileşenine dönüştürün."
                }
            ]
        }
    ]
)

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

Bu, OpenAI uyumlu API'leri destekleyen herhangi bir aracın, Apidog dahil, Z.ai temel URL'sini işaret ederek GLM-5V-Turbo'ya bağlanabileceği anlamına gelir.

Apidog ile GLM-5V-Turbo API çağrılarını test etme

GLM-5V-Turbo'yu uygulamanıza entegre etmeden önce, API çağrılarınızı Apidog ile etkileşimli olarak test edin. Bu, kodda ham JSON yüklerini hata ayıklamaktan sizi kurtarır.

Uç noktayı kurun

1. Apidog'u açın ve yeni bir istek oluşturun
2. Metodu POST olarak ve URL'yi https://api.z.ai/api/paas/v4/chat/completions olarak ayarlayın
3. Authorization: Bearer YOUR_KEY başlığını ekleyin
4. Content-Type: application/json olarak ayarlayın

Çok modlu istek gövdelerini görsel olarak oluşturun

Apidog'un JSON düzenleyicisi, JSON'u elle yazmadan image_url ve text içerik bloklarıyla iç içe messages dizisini oluşturmanıza olanak tanır. Şunları yapabilirsiniz:

• Ham JSON ve form tabanlı giriş arasında geçiş yapın
• Yaygın desenler için istek şablonlarını kaydedin (tek görüntü, çoklu görüntü, video girişi)
• API anahtarı için ortam değişkenlerini kullanın, böylece her isteğe yapıştırmanıza gerek kalmaz

Model yanıtlarını karşılaştırın

GLM-5V-Turbo'yu diğer görsel modellerle (Claude, GPT-4o, Gemini) değerlendirirken, aynı görüntüyü birden fazla uç noktaya göndermek ve çıktıları yan yana karşılaştırmak için Apidog'un koleksiyon çalıştırıcısını kullanın. Bu, hangi modelin en doğru HTML/CSS'i ürettiğini doğrulamak istediğiniz Design2Code görevleri için özellikle kullanışlıdır.

Yanıt şemalarını doğrulayın

GLM-5V-Turbo'nun akış yanıtları hem reasoning_content hem de content alanlarını içerir. Apidog'un yanıt doğrulayıcısı, uygulamanızın her iki alanı da doğru şekilde işlediğini, bir alanın boş olduğu uç durumlar da dahil olmak üzere kontrol edebilir.

GLM-5V-Turbo entegrasyonunuzu test etmeye başlamak için Apidog'u indirin.

Diğer görsel modellerle fiyatlandırma karşılaştırması

GLM-5V-Turbo, görsel tabanlı kodlama görevleri için en ucuz seçenektir. Claude Opus 4.6'dan %92 daha az girdi belirteci ve %94.7 daha az çıktı belirteci maliyetine sahipken, Design2Code'da %22 daha yüksek puan alır.

Dezavantajı: Claude ve GPT-5 daha geniş kodlama görevlerini daha iyi yönetir. İş akışınız özellikle "görüntü girişi, kod çıkışı" ise, GLM-5V-Turbo en güçlü fiyat-performans oranını sunar.

Mimari: perde arkasında nasıl çalışır

CogViT görsel kodlayıcı

GLM-5V-Turbo, mekansal hiyerarşileri ve ince taneli görsel ayrıntıları korumak için tasarlanmış bir görsel dönüştürücü olan CogViT'i kullanır. Standart görsel kodlayıcılar, görüntüleri düz özellik vektörlerine sıkıştırarak mekansal ilişkileri kaybeder. CogViT, CSS ızgara yerleşimi, flexbox hizalaması ve piksel hassasiyetinde boşluk bırakma gibi düzen hassasiyetli görevler için önemli olan konum bilgilerini korur.

Çoklu Belirteç Tahmini (MTP)

MTP mimarisi, her ileri geçişte tek tek belirteçler yerine birden fazla belirteç tahmin eder. Kod üretimi için bu, uzun HTML, CSS veya JavaScript dizileri çıkarırken daha hızlı çıkarım anlamına gelir. Model belirteç belirteç üretmez; öbekler halinde tahmin eder, bu da 128K maksimum çıktı penceresindeki gecikmeyi azaltır.

30'dan fazla görevli ortak pekiştirmeli öğrenme

ZhipuAI, GLM-5V-Turbo'yu aynı anda 30'dan fazla görevde pekiştirmeli öğrenmeyle eğitti: STEM akıl yürütme, görsel temel oluşturma, video analizi, GUI işlemi ve kodlama. Bu ortak optimizasyon, modelin tek bir görev türüne aşırı uymasını engellerken, görsel kodlama iş akışlarının tüm yelpazesinde güçlü performans sağlar.

Aracılı veri sistemi

Eğitim hattı, ZhipuAI'nin eylem tahmini ön eğitimi ile "çok seviyeli, doğrulanabilir veri oluşturma" sistemi olarak adlandırdığı şeyi içerir. Uygulamada bu, modelin "ekran görüntüsü gör, bir sonraki eylemi tahmin et, yürüt, sonucu doğrula" dizileri üzerinde eğitildiği anlamına gelir, bu da onu statik görüntüden koda dönüştürmenin ötesinde otonom GUI görevleri için etkili kılar.

Pratik örnekler

Tasarım maketinden React bileşenine

from zai import ZaiClient

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

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=[
        {
            "role": "system",
            "content": "Siz kıdemli bir ön uç geliştiricisiniz. TypeScript ve Tailwind CSS ile üretime hazır React bileşenleri oluşturun. Uygun tipleri, erişilebilirlik niteliklerini ve duyarlı tasarımı ekleyin."
        },
        {
            "role": "user",
            "content": [
                {
                    "type": "image_url",
                    "image_url": {"url": "https://example.com/hero-section.png"}
                },
                {
                    "type": "text",
                    "text": "Bu kahraman bölümünü bir React TypeScript bileşeni olarak oluşturun. Mobil öncelikli yaklaşımla tamamen duyarlı olmalıdır. Gradyan arka planı, üzerine gelme durumu olan CTA düğmesini ve illüstrasyon konumlandırmasını ekleyin."
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

# Model önce düzen yapısı hakkında akıl yürütür (reasoning_content)
# ardından tam React bileşenini (content) çıkarır.
print(response.choices[0].message.content)

Ekran görüntüsü hata ayıklama iş akışı

def debug_ui_from_screenshot(screenshot_url: str, description: str) -> str:
    """Bozuk bir UI'ın ekran görüntüsünü gönderin ve CSS düzeltmelerini alın."""
    response = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": "Siz bir CSS hata ayıklama uzmanısınız. Bozuk kullanıcı arayüzlerinin ekran görüntülerini analiz edin ve belirli CSS düzeltmeleri sağlayın. Düzeltmeyi sağlamadan önce her zaman neyin yanlış olduğunu açıklayın."
            },
            {
                "role": "user",
                "content": [
                    {
                        "type": "image_url",
                        "image_url": {"url": screenshot_url}
                    },
                    {
                        "type": "text",
                        "text": f"Hata raporu: {description}. CSS sorunlarını belirleyin ve düzeltmeleri sağlayın."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    return response.choices[0].message.content


# Kullanım
fix = debug_ui_from_screenshot(
    "https://example.com/broken-modal.png",
    "Modal iletişim kutusu mobil ekranlarda taşıyor ve kapat düğmesine ulaşılamıyor"
)
print(fix)

Belge çıkarma ve yapılandırılmış verilere dönüştürme

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": "Bu dokümantasyon ekran görüntüsünden API uç nokta tanımlarını çıkarın. Bunları bir OpenAPI 3.1 YAML spesifikasyonu olarak döndürün."
                }
            ]
        }
    ]
)

Bu, API geliştirme ekipleri için güçlü bir kullanım durumudur: beyaz tahta API tasarımlarını fotoğraflayın veya eski belgeleri tarayın, ardından doğrudan OpenAPI spesifikasyonları oluşturun. Daha sonra oluşturulan spesifikasyonu Apidog'a aktararak tek bir ekran görüntüsünden etkileşimli dokümantasyon, sahte sunucular ve test durumları elde edebilirsiniz.

GLM-5V-Turbo'dan en iyi şekilde yararlanma ipuçları

Görüntü kalitesi önemlidir

CogViT kodlayıcı mekansal ayrıntıları korur, ancak kaynak görüntüde olmayan bilgileri kurtaramaz. Design2Code görevleri için:

• Keskin metin ve simge ayrıntısı için 2x çözünürlükte (Retina) ekran görüntüleri kullanın
• Yeniden oluşturmak istediğiniz belirli bileşeni kırpın, tam sayfayı değil
• Ekran görüntülerinden tarayıcı çerçevesini ve işletim sistemi pencere süslemelerini kaldırın
• Renk doğruluğu için, sıkıştırma bozukluklarını önlemek için JPEG yerine PNG kullanın

Karmaşık düzenler için düşünme modunu kullanın

Şunlar için düşünme modunu ("thinking": {"type": "enabled"}) etkinleştirin:

• Çok bileşenli sayfa düzenleri
• Kesme noktası mantığına sahip duyarlı tasarımlar
• Karmaşık CSS'li tasarımlar (ızgara, flexbox iç içe geçmiş, animasyonlar)
• Kök neden analizinin önemli olduğu hata ayıklama görevleri

Belirteç maliyetlerinden ve gecikmeden tasarruf etmek için basit görevler (tek bileşen çıkarma, temel görüntü başlığı ekleme) için düşünme modunu atlayın.

Bağlam pencerenizi yönetin

200K belirteçte, bağlam penceresi büyük ama sınırsız değildir. Tek bir yüksek çözünürlüklü görüntü 1.000-5.000 belirteç tüketebilir. Çoklu görüntü iş akışları için:

• Görüntüleri görevin gerektirdiği minimum çözünürlüğe yeniden boyutlandırın
• Temel tasarımın aynı kaldığı yinelemeli konuşmalar için bağlam önbelleklemesini kullanın
• Tam sayfa tasarımlarını, bireysel üretim için bileşen düzeyindeki ekran görüntülerine ayırın

Önbellekleme ile maliyet optimizasyonu

Bağlam önbellekleme, 0.24$/M belirteç maliyetine sahiptir (standart girdi fiyatlandırmasına göre %80 indirim). Aynı bileşeni iyileştirdiğiniz yinelemeli tasarımdan koda iş akışları için:

1. Tasarım görüntüsünü ilk istekte gönderin
2. Takip eden istekler önbelleğe alınmış bağlamı referans alır
3. Her yineleme, tam görüntüyü yeniden göndermenin bir kısmına mal olur

Hataları ve uç durumları ele alma

Hız limitleri ve yeniden denemeler

Z.ai API'si standart HTTP durum kodları döndürür. Bunları entegrasyonunuzda ele alın:

import time
from zai import ZaiClient

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

def call_with_retry(messages, max_retries=3):
    """GLM-5V-Turbo'yu hız limitlerinde üstel geri çekilmeyle çağırın."""
    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:
                # Hız limitine takıldı - bekle ve yeniden dene
                wait_time = 2 ** attempt
                print(f"Hız limitine takıldı. {wait_time} saniye sonra yeniden deniyor...")
                time.sleep(wait_time)
                continue
            elif "400" in error_str:
                # Kötü istek - yeniden deneme, girdiyi düzelt
                print(f"Kötü istek: {error_str}")
                raise
            else:
                # Sunucu hatası - yeniden dene
                if attempt < max_retries - 1:
                    time.sleep(1)
                    continue
                raise

    raise Exception("Maksimum yeniden deneme aşıldı")

Büyük çıktıları ele alma

128K maksimum çıktı penceresi ile GLM-5V-Turbo, tek bir yanıtta tüm çok dosyalı uygulamaları üretebilir. Uygulamanız bunu ele almalıdır:

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=messages,
    max_tokens=131072  # Tam 128K çıktı
)

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

# Çıktıdan birden çok dosyayı ayrıştır
# Model genellikle dosyaları markdown kod çitleriyle ayırır
import re

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

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

Görüntü URL'si erişilebilirliği

Model, sağladığınız URL'lerden görüntüleri getirir. Yaygın hatalar:

• Bulut depolamadan (S3, GCS) süresi dolmuş imzalı URL'ler. En az 1 saat geçerliliği olan URL'ler oluşturun.
• Sunucu tarafı getirmeyi engelleyen CORS kısıtlamalı görüntüler. Görüntüleri CORS kısıtlamaları olmayan bir CDN'de barındırın.
• İndirme sırasında zaman aşımına uğrayan büyük görüntüler. Göndermeden önce 5MB'ın altına yeniden boyutlandırın.

Görüntü barındırmayı kontrol ediyorsanız, kimlik doğrulaması olmayan herkese açık bir CDN, API çağrıları için en güvenilir seçenektir.

GLM-5V-Turbo'nun OpenRouter üzerinden kullanımıyla karşılaştırması

GLM-5V-Turbo'ya doğrudan Z.ai API'sine alternatif olarak OpenRouter aracılığıyla erişebilirsiniz. OpenRouter, modelin ilk iki gününde 769 milyondan fazla istem belirteci ile 44.000'den fazla isteği işledi.

OpenRouter'ın faydaları:

• Birden fazla model sağlayıcısı için tek API anahtarı
• Z.ai'de kesinti olması durumunda otomatik yedekleme
• Tüm modellerinizde kullanım analizi
• Aynı OpenAI uyumlu format

Dezavantajı: OpenRouter, belirteç fiyatlandırmasına küçük bir ekleme yapar. Yüksek hacimli üretim kullanımı için doğrudan Z.ai API'si daha ucuzdur.

GLM-5V-Turbo ile tasarımdan koda bir iş hattı oluşturma

İşte bir tasarım maketini alan, kod üreten ve çıktıyı doğrulayan eksiksiz bir iş akışı:

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"):
    """Eksiksiz iş hattı: tasarım ekran görüntüsü -> çalışan kod -> doğrulama."""

    os.makedirs(output_dir, exist_ok=True)

    # Adım 1: Tasarımı analiz edin
    analysis = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": "Bu tasarımı analiz edin. Listele: 1) Görünür tüm UI bileşenleri, 2) Renk paleti (hex değerleri), 3) Tipografi (yazı tipi boyutları, ağırlıkları), 4) Düzen yapısı (ızgara/flexbox), 5) Etkileşimli öğeler (düğmeler, girişler, açılır menüler)."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    design_analysis = analysis.choices[0].message.content
    print(f"Tasarım analizi tamamlandı: {len(design_analysis)} karakter")

    # Adım 2: Bileşeni oluşturun
    generation = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": f"Siz bir {framework} geliştiricisiniz. Üretime hazır, erişilebilir, duyarlı bileşenler oluşturun. TypeScript ve Tailwind CSS kullanın."
            },
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": f"Bu tasarıma dayanarak, eksiksiz {framework} bileşenini oluşturun. Tüm stillendirme, üzerine gelme durumları ve duyarlı kesme noktalarını ekleyin. Bileşen, tasarımı piksel piksel eşleştirmelidir."
                    }
                ]
            }
        ],
        thinking={"type": "enabled"},
        max_tokens=16384
    )

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

    # Adım 3: Çıktıyı kaydedin
    output_file = os.path.join(output_dir, "Component.tsx")
    with open(output_file, "w") as f:
        # Markdown çitlerinden kodu çıkar (varsa)
        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"Bileşen {output_file} konumuna kaydedildi")
    return output_file


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

Bu iş hattı, analizi üretimden ayırır. İlk çağrı, tasarımın yapısını, renklerini ve tipografisini eşler. İkinci çağrı, bu anlayışı bağlam olarak kullanarak kod üretir. İşi iki çağrıya bölmek, tek bir "bunu koda dönüştür" isteğinden daha doğru çıktı üretir, çünkü model kodu yazmadan önce düzen hakkında zaten akıl yürütmüştür.

Her adımı Apidog'da bağımsız olarak test edebilirsiniz; analiz isteğini ve üretim isteğini bir koleksiyonda ayrı uç noktalar olarak kaydederek, ardından bunları koleksiyon çalıştırıcısı ile sırayla çalıştırabilirsiniz.

Sıkça Sorulan Sorular

GLM-5V-Turbo'yu kullanmak ücretsiz mi?

Hayır. API fiyatlandırması 1.20$/M girdi belirteci ve 4.00$/M çıktı belirteci şeklindedir. ZhipuAI, test için chat.z.ai adresinde ücretsiz bir web arayüzü sunar, ancak API kullanımı ödeme gerektirir.

Base64 kodlu görüntüleri gönderebilir miyim?

Dokümantasyon, URL tabanlı görüntü girişini (url alanına sahip image_url) gösterir. Base64 desteği için görüntünüzü bir veri URI'si olarak kodlayın: data:image/png;base64,{encoded_data} ve bunu URL değeri olarak geçirin. Bu, OpenAI Vision API'sinin aynı kuralını takip eder.

GLM-5V-Turbo video girişini nasıl işler?

Video, desteklenen bir girdi modalitesi olarak listelenmiştir. Model, UI etkileşim kayıtlarını analiz etme, animasyon hatalarını belirleme veya kullanıcı akışlarını anlama gibi görevler için video karelerini işleyebilir. Belirli codec ve format gereksinimleri henüz belgelenmemiştir.

GLM-5-Turbo ve GLM-5V-Turbo arasındaki fark nedir?

GLM-5-Turbo, yalnızca metin tabanlı bir kodlama modelidir. GLM-5V-Turbo, çok modlu giriş (görüntüler, videolar, dosyalar) için CogViT görsel kodlayıcısını ekler. Saf metin kodlama görevleri için GLM-5-Turbo'yu, iş akışınız görsel giriş içeriyorsa GLM-5V-Turbo'yu seçin.

GLM-5V-Turbo'yu OpenAI Python istemcisiyle kullanabilir miyim?

Evet. base_url'yi https://api.z.ai/api/paas/v4 olarak ayarlayın ve Z.ai API anahtarınızı kullanın. Uç nokta, çok modlu mesaj formatları dahil olmak üzere sohbet tamamlama için OpenAI uyumlu kuralları takip eder.

Kodlama için Claude ile karşılaştırması nasıl?

GLM-5V-Turbo, görselden koda görevlerinde (Design2Code'da 94.8'e karşı 77.3) üstünlük sağlar. Claude, salt metin kodlama, arka uç mimarisi ve depo düzeyinde anlama konularında liderdir. Farklı kullanım durumlarına hizmet ederler. Her ikisini de yapan ekipler için maliyet farkı önemlidir: GLM-5V-Turbo, girdi belirteçlerinde Claude Opus 4.6'dan %92 daha ucuzdur.

Maksimum görüntü boyutu nedir?

Dokümantasyon bir piksel sınırı belirtmiyor. 200K bağlam penceresi pratik kısıtlamadır; daha büyük görüntüler daha fazla belirteç tüketir. Design2Code görevleri için, 2x çözünürlükte 1920x1080 ekran görüntüleri sınırlara takılmadan iyi çalışır.

ZhipuAI API verilerimi saklıyor mu?

Hayır. Z.ai'nin veri politikası, API çağrıları için eğitim kullanımı veya istem saklama olmadığını belirtir. Görüntüleriniz ve kod çıktılarınız gelecekteki modelleri eğitmek için kullanılmaz.