GLM-5V-Turbo API の使い方

要点（TL;DR）

GLM-5V-Turboは、ZhipuAIのマルチモーダルビジョンコーディングモデルで、200Kのコンテキストウィンドウ、128Kの最大出力、そして画像、動画、テキスト、ファイル入力にネイティブ対応しています。Design2Codeベンチマークでは94.8を記録し（Claude Opus 4.6の77.3と比較）、コストは入力トークンあたり1.20ドル/M、出力トークンあたり4ドル/Mです。このガイドでは、セットアップ、API連携、およびビジョンベースのコーディングタスクの実践的な例を説明します。

はじめに

ZhipuAI（Z.aiとして運営）は、2026年4月1日にGLM-5V-Turboをリリースしました。これは、入力が画像、スクリーンショット、または動画で、出力が機能するコードであるビジョンベースのコーディングタスクに特化して構築された、同社初のモデルです。

このモデルは、GLM-5（テキストのみ、744Bパラメーター）およびGLM-5-Turbo（最適化されたテキストコーディング）を含むファミリーに属しています。GLM-5V-Turboは、CogViTビジョンエンコーダとマルチトークン予測（MTP）アーキテクチャを使用して、Turboバリアントの上にネイティブのマルチモーダル理解を追加しています。

特筆すべき数値は、**Design2Codeで94.8**を記録したことです。これは、モデルがUIモックアップをHTML/CSSとして再現するタスクです。同じテストでClaude Opus 4.6は77.3を記録しました。視覚的なデザインをコードに変換するという特定のタスクにおいて、22%の差があります。

このガイドでは、GLM-5V-Turbo APIの呼び出し方、画像や動画の送信方法、思考モードの有効化、レスポンスのストリーミング、関数呼び出しの使用、Apidogとの連携テストについて説明します。

ボタン

GLM-5V-Turboでできること

主要な仕様

仕様	値
コンテキストウィンドウ	200Kトークン (202,752)
最大出力	128Kトークン (131,072)
入力モダリティ	画像、動画、テキスト、ファイル (PDF, Word)
出力モダリティ	テキスト
入力料金	100万トークンあたり$1.20
出力料金	100万トークンあたり$4.00
キャッシュ読み取り料金	100万トークンあたり$0.24
リリース日	2026年4月1日
APIエンドポイント	`https://api.z.ai/api/paas/v4/chat/completions`

サポートされる機能

設定可能な推論トークン（<think>タグ）を持つ思考モード
リアルタイム応答のためのストリーミング出力
ツール連携のための関数呼び出し
長い会話最適化のためのコンテキストキャッシュ
応答フォーマット設定による構造化出力

得意なこと

GLM-5V-Turboは、視覚コンテンツを見てそこからコードを記述するという、ニッチながら非常に価値の高いカテゴリのために特別に構築されています。主なユースケースは以下の通りです。

デザインモックアップからのフロントエンド再現。Figmaのスクリーンショットやデザインカンプを渡すと、ピクセル単位で正確なHTML/CSSを生成します。Design2Codeの94.8というスコアがこれを裏付けています。

GUI自律探索。このモデルはOpenClaw（ZhipuAIのエージェントフレームワーク）と連携し、ウェブサイトの自律的な閲覧、フォーム入力、インタラクションテストを可能にします。AndroidWorldおよびWebVoyagerのベンチマークでGUI操作に関して高いスコアを記録しました。

スクリーンショットからのコードデバッグ。壊れたUIのスクリーンショットを送信すると、モデルがレンダリングの問題、レイアウトのバグ、CSSの競合を特定します。

ドキュメント抽出。PDF、Wordドキュメント、スキャンされた画像を処理して、構造化データ、テーブル、テキストを抽出します。

得意でないこと

純粋なテキストコーディング（視覚入力なし）では、バックエンドタスク、リポジトリ探索、システムアーキテクチャの面でClaudeやGPT-5が依然としてリードしています。GLM-5V-Turboの強みは、視覚入力がコーディングタスクを駆動する場合に特化しています。

はじめに：APIセットアップ

APIキーの取得

z.aiでサインアップする
ダッシュボードのAPIキーセクションに移動する
新しいキーを生成する
安全に保管する。Bearerトークンとして渡します。

基本設定

すべてのリクエストは以下に送信されます:

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

必須ヘッダー:

Authorization: Bearer YOUR_API_KEY
Content-Type: application/json

このAPIはOpenAI互換の規約に従っているため、OpenAIまたはAnthropicのAPIを扱ったことがある方には、リクエスト形式は馴染み深いものとなるでしょう。

cURLで最初のリクエストを送信する

基本的な画像分析

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": "このダッシュボードUIをレスポンシブなHTMLとCSSで再作成してください。Tailwind CSSクラスを使用してください。"
          }
        ]
      }
    ]
  }'

思考モードを有効にした場合

思考モードは、モデルが応答を生成する前に推論ステップを追加します。これにより、追加の出力トークンを消費する代わりに、複雑なコーディングタスクでの精度が向上します。

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": "このログインフォームはモバイルでレイアウトバグがあります。問題を特定し、修正されたCSSを提供してください。"
          }
        ]
      }
    ],
    "thinking": {
      "type": "enabled"
    }
  }'

思考モードが有効な場合、応答には標準のcontentフィールドとともにreasoning_contentが含まれます。推論トークンは、最終的な回答を生成する前のモデルの段階的な分析を示します。

Python SDKの連携

インストール

pip install zai-sdk

または特定のバージョンを固定します:

pip install zai-sdk==0.0.4

基本的な画像からコードへ

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": "この料金ページのデザインを、Tailwind CSSを使用してReactコンポーネントに変換してください。モバイル、タブレット、デスクトップ用のレスポンシブブレークポイントを含めてください。"
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

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

ストリーミング応答

長いコード生成タスク（ページ全体のレイアウト、複数コンポーネントのUIなど）の場合、ストリーミングは完全な応答を待つことなくリアルタイムで出力を提供します。

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": "このランディングページ全体を、組み込みCSSとJavaScriptを含む単一のHTMLファイルとして構築してください。スムーズスクロール、スティッキーナビバー、および機能する連絡フォームを含めてください。"
                }
            ]
        }
    ],
    stream=True
)

for chunk in response:
    delta = chunk.choices[0].delta
    # 推論トークン (思考モード) を出力する
    if delta.reasoning_content:
        print(f"[thinking] {delta.reasoning_content}", end="", flush=True)
    # 生成されたコードを出力する
    if delta.content:
        print(delta.content, end="", flush=True)

複数画像入力

単一のリクエストで複数の画像を送信します。これは、デザインを比較したり、モックアップとともにスタイル参照を提供したり、デバッグのためにビフォー/アフターのスクリーンショットを送信したりするのに役立ちます。

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": "1枚目の画像はデザインモックアップです。2枚目の画像は現在の実装です。すべての視覚的な違いを特定し、モックアップに一致するようにCSSの修正を提供してください。"
                }
            ]
        }
    ]
)

関数呼び出し

GLM-5V-Turboは関数呼び出しをサポートしており、モデルが外部アクションを要求できるエージェントワークフローに統合できます。

tools = [
    {
        "type": "function",
        "function": {
            "name": "save_component",
            "description": "生成されたReactコンポーネントをファイルに保存します",
            "parameters": {
                "type": "object",
                "properties": {
                    "filename": {
                        "type": "string",
                        "description": "コンポーネントのファイル名。例: 'PricingCard.tsx'"
                    },
                    "code": {
                        "type": "string",
                        "description": "コンポーネントのソースコード全体"
                    },
                    "dependencies": {
                        "type": "array",
                        "items": {"type": "string"},
                        "description": "このコンポーネントが必要とするnpmパッケージ"
                    }
                },
                "required": ["filename", "code"]
            }
        }
    },
    {
        "type": "function",
        "function": {
            "name": "take_screenshot",
            "description": "レンダリングされた出力を検証するためにURLのスクリーンショットを撮ります",
            "parameters": {
                "type": "object",
                "properties": {
                    "url": {
                        "type": "string",
                        "description": "スクリーンショットを撮るURL"
                    },
                    "viewport": {
                        "type": "string",
                        "description": "ビューポートサイズ: 'mobile', 'tablet', または '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": "このカードデザインからReactコンポーネントを生成して保存してください。次に、スクリーンショットを撮って検証してください。"
                }
            ]
        }
    ],
    tools=tools,
    tool_choice="auto"
)

Java SDK連携

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'

基本リクエスト

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("このデザインをTailwind CSSでHTMLに変換してください。")
                                .build()
                        ))
                        .build()
                ))
                .build();

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

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

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("このダッシュボードをReactコンポーネントとして構築してください。")
                        .build()
                ))
                .build()
        ))
        .build();

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

streamResponse.getFlowable().subscribe(
    data -> System.out.print(data),
    error -> System.err.println("エラー: " + error.getMessage()),
    () -> System.out.println("\n[完了]")
);

OpenAI互換エンドポイントの使用

Z.ai APIはOpenAIの規約に従っているため、カスタムベースURLを使用してOpenAI Pythonクライアントを使用できます。

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": "このワイヤーフレームをComposition APIを使用した機能するVue 3コンポーネントにしてください。"
                }
            ]
        }
    ]
)

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

これは、Apidogを含むOpenAI互換APIをサポートするあらゆるツールが、Z.aiのベースURLを指定することでGLM-5V-Turboに接続できることを意味します。

ApidogでGLM-5V-Turbo API呼び出しをテストする

GLM-5V-Turboをアプリケーションに統合する前に、ApidogでAPI呼び出しをインタラクティブにテストしてください。これにより、コード内の生のJSONペイロードをデバッグする手間が省けます。

エンドポイントの設定

Apidogを開き、新しいリクエストを作成します
メソッドをPOSTに、URLをhttps://api.z.ai/api/paas/v4/chat/completionsに設定します
Authorization: Bearer YOUR_KEYヘッダーを追加します
Content-Type: application/jsonを設定します

マルチモーダルリクエストボディを視覚的に構築する

ApidogのJSONエディタを使用すると、手書きでJSONを作成することなく、image_urlとtextコンテンツブロックを含むネストされたmessages配列を視覚的に構築できます。次のことが可能です。

生のJSONとフォームベースの入力の間で切り替える
一般的なパターン（単一画像、複数画像、動画入力）の要求テンプレートを保存する
APIキーに環境変数を使用して、すべてのリクエストに貼り付ける手間を省く

モデルの応答を比較する

GLM-5V-Turboと他のビジョンモデル（Claude、GPT-4o、Gemini）を評価する場合、Apidogのコレクションランナーを使用して、同じ画像を複数のエンドポイントに送信し、出力を並べて比較します。これは、どのモデルが最も正確なHTML/CSSを生成するかを検証したいDesign2Codeタスクで特に役立ちます。

応答スキーマの検証

GLM-5V-Turboのストリーミング応答には、reasoning_contentとcontentの両フィールドが含まれます。Apidogの応答バリデーターは、一方のフィールドがnullであるエッジケースを含め、アプリケーションが両フィールドを正しく処理しているかどうかをチェックできます。

GLM-5V-Turbo連携のテストを開始するには、Apidogをダウンロードしてください。

他のビジョンモデルとの料金比較

モデル	入力（100万トークンあたり）	出力（100万トークンあたり）	コンテキストウィンドウ	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は、ビジョンベースのコーディングタスクにおいて最も安価なオプションです。Design2Codeで22%高いスコアを記録しながら、Claude Opus 4.6と比較して入力トークンで92%安く、出力トークンで94.7%安いです。

トレードオフ：ClaudeとGPT-5は、より広範なコーディングタスクをより良く処理します。ワークフローが特に「画像入力、コード出力」である場合、GLM-5V-Turboは最も強力な費用対効果を提供します。

アーキテクチャ：内部動作

CogViTビジョンエンコーダー

GLM-5V-Turboは、空間階層と詳細な視覚情報を保持するように設計されたビジョントランスフォーマーであるCogViTを使用しています。標準のビジョンエンコーダーは画像を平坦な特徴ベクトルに圧縮し、空間関係を失います。CogViTは、CSSグリッド配置、フレックスボックスアライメント、ピクセル単位のスペーシングなど、レイアウトに敏感なタスクにとって重要な位置情報を維持します。

マルチトークン予測（MTP）

MTPアーキテクチャは、一度に1つずつではなく、1回のフォワードパスで複数のトークンを予測します。コード生成の場合、これは長いHTML、CSS、またはJavaScriptのシーケンスを出力する際の推論の高速化を意味します。モデルはトークン単位で生成するのではなく、チャンクを予測するため、128Kの最大出力ウィンドウでのレイテンシが削減されます。

30以上のタスクに対する共同強化学習

ZhipuAIは、GLM-5V-TurboをSTEM推論、視覚的基盤、動画分析、GUI操作、コーディングの30以上のタスクで同時に強化学習させました。この共同最適化により、モデルが特定のタスクタイプに過学習することなく、ビジョンコーディングワークフローの全範囲で強力なパフォーマンスを維持できます。

エージェントデータシステム

トレーニングパイプラインには、ZhipuAIが「マルチレベルで検証可能なデータ構築」システムと呼ぶものが含まれており、アクション予測の事前学習も行われます。実際には、これはモデルが「スクリーンショットを見る、次のアクションを予測する、実行する、結果を検証する」という一連のシーケンスでトレーニングされたことを意味し、静的な画像からコードへの変換を超えて自律的なGUIタスクに効果的です。

実践的な例

デザインモックアップから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": "あなたは上級フロントエンド開発者です。TypeScriptとTailwind CSSを使用して、本番環境で利用可能なReactコンポーネントを生成してください。適切な型、アクセシビリティ属性、レスポンシブデザインを含めてください。"
        },
        {
            "role": "user",
            "content": [
                {
                    "type": "image_url",
                    "image_url": {"url": "https://example.com/hero-section.png"}
                },
                {
                    "type": "text",
                    "text": "このヒーローセクションをReact TypeScriptコンポーネントとして構築してください。モバイルファーストのアプローチで完全にレスポンシブである必要があります。グラデーション背景、ホバー状態のCTAボタン、イラストの配置を含めてください。"
                }
            ]
        }
    ],
    thinking={"type": "enabled"}
)

# モデルはまずレイアウト構造について推論し（reasoning_content）、
# 次に完全なReactコンポーネントを出力します（content）。
print(response.choices[0].message.content)

スクリーンショットデバッグワークフロー

def debug_ui_from_screenshot(screenshot_url: str, description: str) -> str:
    """壊れたUIのスクリーンショットを送信し、CSSの修正を取得します。"""
    response = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": "あなたはCSSデバッグスペシャリストです。壊れたUIのスクリーンショットを分析し、具体的なCSS修正を提供してください。修正を提供する前に、何が問題であるかを常に説明してください。"
            },
            {
                "role": "user",
                "content": [
                    {
                        "type": "image_url",
                        "image_url": {"url": screenshot_url}
                    },
                    {
                        "type": "text",
                        "text": f"バグレポート: {description}。CSSの問題を特定し、修正を提供してください。"
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    return response.choices[0].message.content


# 使用例
fix = debug_ui_from_screenshot(
    "https://example.com/broken-modal.png",
    "モーダルダイアログがモバイル画面でオーバーフローし、閉じるボタンにアクセスできません。"
)
print(fix)

ドキュメント抽出から構造化データへ

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": "このドキュメントスクリーンショットからAPIエンドポイント定義を抽出してください。OpenAPI 3.1 YAML仕様として返してください。"
                }
            ]
        }
    ]
)

これはAPI開発チームにとって強力なユースケースです。ホワイトボードのAPIデザインを撮影したり、レガシーなドキュメントをスキャンしたりして、直接OpenAPI仕様を生成できます。その後、生成された仕様をApidogにインポートすると、インタラクティブなドキュメント、モックサーバー、およびテストケースを単一のスクリーンショットから取得できます。

GLM-5V-Turboを最大限に活用するためのヒント

画像の品質が重要

CogViTエンコーダは空間の詳細を保持しますが、ソース画像にない情報を回復することはできません。Design2Codeタスクの場合:

シャープなテキストとアイコンの詳細のために、2倍解像度（Retina）のスクリーンショットを使用してください。
再作成したい特定のコンポーネントにクロップし、全ページではないようにしてください。
スクリーンショットからブラウザのクロームとOSのウィンドウ装飾を削除してください。
色の正確さのために、圧縮アーティファクトを避けるためにJPEGよりもPNGを使用してください。

複雑なレイアウトには思考モードを使用する

思考モード ("thinking": {"type": "enabled"}) を有効にするべきケース:

複数コンポーネントのページレイアウト
ブレークポイントロジックを含むレスポンシブデザイン
複雑なCSS (グリッド、フレックスボックスのネスト、アニメーション) を含むデザイン
根本原因分析が重要なデバッグタスク

シンプルなタスク（単一コンポーネントの抽出、基本的な画像キャプション付け）では、トークンコストとレイテンシを節約するために思考モードをスキップしてください。

コンテキストウィンドウを管理する

200Kトークンというコンテキストウィンドウは大きいですが、無制限ではありません。高解像度の画像1枚で1,000〜5,000トークンを消費する場合があります。複数画像ワークフローの場合：

タスクに必要な最小解像度に画像をリサイズする
ベースデザインが同じままである反復的な会話にはコンテキストキャッシングを使用する
全ページのデザインをコンポーネントレベルのスクリーンショットに分割し、個別に生成する

キャッシュによるコスト最適化

コンテキストキャッシュのコストは100万トークンあたり$0.24です（標準入力料金から80%割引）。同じコンポーネントを修正する反復的なデザインからコードへのワークフローの場合:

最初の要求でデザイン画像を送信します
後続の要求はキャッシュされたコンテキストを参照します
各反復は、完全な画像を再送信する費用のごく一部で済みます

エラーとエッジケースの処理

レート制限と再試行

Z.ai APIは標準のHTTPステータスコードを返します。これらを統合で処理してください。

import time
from zai import ZaiClient

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

def call_with_retry(messages, max_retries=3):
    """レート制限時に指数バックオフでGLM-5V-Turboを呼び出します。"""
    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:
                # レート制限 - 待機して再試行
                wait_time = 2 ** attempt
                print(f"レート制限されました。{wait_time}秒後に再試行します...")
                time.sleep(wait_time)
                continue
            elif "400" in error_str:
                # 不正なリクエスト - 再試行せず、入力を修正
                print(f"不正なリクエスト: {error_str}")
                raise
            else:
                # サーバーエラー - 再試行
                if attempt < max_retries - 1:
                    time.sleep(1)
                    continue
                raise

    raise Exception("最大再試行回数を超過しました")

大規模出力の処理

128Kの最大出力ウィンドウを持つGLM-5V-Turboは、単一の応答でアプリケーション全体を生成できます。アプリケーションはこれを処理する必要があります。

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=messages,
    max_tokens=131072  # 完全な128K出力
)

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

# 出力から複数のファイルを解析する
# モデルは通常、マークダウンコードフェンスでファイルを区切ります
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())

画像URLのアクセシビリティ

モデルは、提供されたURLから画像をフェッチします。一般的な失敗は次のとおりです。

クラウドストレージ（S3、GCS）からの期限切れの署名付きURL。少なくとも1時間の有効期限を持つURLを生成してください。
サーバー側のフェッチをブロックするCORS制限付き画像。CORS制限のないCDNで画像をホストしてください。
ダウンロード中にタイムアウトする大きな画像。送信前に5MB以下にリサイズしてください。

画像ホスティングを制御できる場合、認証なしの公開CDNがAPI呼び出しにとって最も信頼性の高いオプションです。

GLM-5V-TurboとOpenRouter経由での使用の比較

GLM-5V-Turboは、直接のZ.ai APIの代替として、OpenRouterを通じてアクセスできます。モデルが利用可能になった最初の2日間で、OpenRouterは44,000件以上のリクエストと7億6,900万以上のプロンプトトークンを処理しました。

OpenRouterの利点:

複数のモデルプロバイダに対応する単一のAPIキー
Z.aiにダウンタイムが発生した場合の自動フェイルオーバー
すべてのモデルの利用状況分析
同じOpenAI互換フォーマット

トレードオフ: OpenRouterはトークン料金にわずかな上乗せを行います。大量の本番環境での使用では、直接のZ.ai APIの方が安価です。

GLM-5V-Turboでデザインからコードへのパイプラインを構築する

以下は、デザインモックアップを受け取り、コードを生成し、出力を検証する完全なワークフローです。

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"):
    """完全なパイプライン: デザインスクリーンショット -> 機能するコード -> 検証。"""

    os.makedirs(output_dir, exist_ok=True)

    # ステップ1: デザインを分析する
    analysis = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": "このデザインを分析してください。以下をリストアップしてください: 1) 見えるすべてのUIコンポーネント、2) カラーパレット（HEX値）、3) タイポグラフィ（フォントサイズ、ウェイト）、4) レイアウト構造（グリッド/フレックスボックス）、5) インタラクティブな要素（ボタン、入力、ドロップダウン）。"
                    }
                ]
            }
        ],
        thinking={"type": "enabled"}
    )

    design_analysis = analysis.choices[0].message.content
    print(f"デザイン分析が完了しました: {len(design_analysis)} 文字")

    # ステップ2: コンポーネントを生成する
    generation = client.chat.completions.create(
        model="glm-5v-turbo",
        messages=[
            {
                "role": "system",
                "content": f"あなたは{framework}開発者です。本番環境で利用可能な、アクセシブルでレスポンシブなコンポーネントを生成してください。TypeScriptとTailwind CSSを使用してください。"
            },
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {
                        "type": "text",
                        "text": f"このデザインに基づいて、完全な{framework}コンポーネントを生成してください。すべてのスタイリング、ホバー状態、レスポンシブブレークポイントを含めてください。コンポーネントはピクセル単位でデザインと一致する必要があります。"
                    }
                ]
            }
        ],
        thinking={"type": "enabled"},
        max_tokens=16384
    )

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

    # ステップ3: 出力を保存する
    output_file = os.path.join(output_dir, "Component.tsx")
    with open(output_file, "w") as f:
        # Markdownフェンスがある場合はコードを抽出する
        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"コンポーネントが{output_file}に保存されました")
    return output_file


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

このパイプラインは、分析と生成を分離します。最初の呼び出しはデザインの構造、色、タイポグラフィをマッピングします。2番目の呼び出しは、その理解をコンテキストとしてコードを生成します。作業を2つの呼び出しに分割することで、「これをコードに変換して」という単一のリクエストよりも正確な出力が生成されます。これは、モデルがコードを記述する前にレイアウトについて推論しているためです。

Apidogで各ステップを個別にテストできます。分析リクエストと生成リクエストをコレクション内の別々のエンドポイントとして保存し、コレクションランナーで順次実行することで可能です。

ボタン

よくある質問

GLM-5V-Turboは無料で利用できますか？

いいえ。API料金は入力トークンあたり1.20ドル/M、出力トークンあたり4.00ドル/Mです。ZhipuAIはテスト用にchat.z.aiで無料のウェブインターフェースを提供していますが、APIの利用には支払いが必要です。

Base64エンコードされた画像を送信できますか？

ドキュメントではURLベースの画像入力（image_urlとurlフィールド）が示されています。Base64サポートの場合、画像をデータURI（data:image/png;base64,{encoded_data}）としてエンコードし、それをURL値として渡してください。これはOpenAI Vision APIと同じ規約に従っています。

GLM-5V-Turboは動画入力をどのように処理しますか？

動画はサポートされている入力モダリティとしてリストされています。モデルは、UIインタラクションの記録分析、アニメーションバグの特定、ユーザーフローの理解などのタスクのために動画フレームを処理できます。具体的なコーデックとフォーマットの要件はまだ文書化されていません。

GLM-5-TurboとGLM-5V-Turboの違いは何ですか？

GLM-5-Turboはテキストのみのコーディングモデルです。GLM-5V-Turboは、マルチモーダル入力（画像、ビデオ、ファイル）のためにCogViTビジョンエンコーダーを追加しています。純粋なテキストコーディングタスクにはGLM-5-Turboを、視覚入力を含むワークフローにはGLM-5V-Turboを選択してください。

OpenAI PythonクライアントでGLM-5V-Turboを使用できますか？

はい。base_urlをhttps://api.z.ai/api/paas/v4に設定し、Z.ai APIキーを使用してください。エンドポイントは、マルチモーダルメッセージ形式を含むOpenAI互換のチャット補完規約に従っています。

コーディングに関してClaudeと比較してどうですか？

GLM-5V-Turboはビジョン・トゥ・コードのタスク（Design2Codeで94.8対77.3）で優位に立っています。Claudeは純粋なテキストコーディング、バックエンドアーキテクチャ、リポジトリレベルの理解でリードしています。両者は異なるユースケースに対応します。両方を行うチームにとって、コストの差は大きく、GLM-5V-TurboはClaude Opus 4.6よりも入力トークンで92%安価です。

最大画像サイズはどれくらいですか？

ドキュメントにはピクセル制限は明記されていません。200Kのコンテキストウィンドウが実用的な制約であり、大きな画像ほど多くのトークンを消費します。Design2Codeタスクでは、2倍解像度の1920x1080のスクリーンショットが制限に達することなくうまく機能します。

ZhipuAIは私のAPIデータを保持しますか？

いいえ。Z.aiのデータポリシーでは、API呼び出しに対してトレーニング使用やプロンプト保持は行わないと明記されています。お客様の画像やコード出力は、将来のモデルのトレーニングには使用されません。