كيفية استخدام واجهة برمجة تطبيقات GLM-5V-Turbo؟

TL;DR

GLM-5V-Turbo هو نموذج ZhipuAI للترميز المرئي متعدد الوسائط مع نافذة سياق 200 ألف، ومخرج أقصى 128 ألف، ودعم أصلي لمدخلات الصور والفيديو والنصوص والملفات. حقق 94.8 نقطة في معيار Design2Code (مقابل 77.3 لـ Claude Opus 4.6) ويكلف 1.20 دولار لكل مليون رمز إدخال، و 4 دولارات لكل مليون رمز إخراج. يغطي هذا الدليل الإعداد، وتكامل واجهة برمجة التطبيقات (API)، والأمثلة العملية لمهام الترميز القائمة على الرؤية.

مقدمة

أصدرت ZhipuAI (التي تعمل تحت اسم Z.ai) نموذج GLM-5V-Turbo في 1 أبريل 2026. وهو أول نموذج لها مصمم خصيصًا لمهام الترميز القائمة على الرؤية، حيث يكون المدخل عبارة عن صورة، أو لقطة شاشة، أو فيديو، ويكون المخرج رمزًا عاملاً.

ينتمي النموذج إلى عائلة تتضمن GLM-5 (نص فقط، 744 مليار معلمة) و GLM-5-Turbo (ترميز نصي محسن). يضيف GLM-5V-Turbo فهمًا متعدد الوسائط أصيلًا فوق نسخة Turbo، باستخدام مشفر رؤية CogViT وهندسة MTP (التنبؤ المتعدد بالرموز).

الرقم البارز: 94.8 في Design2Code، حيث تقوم النماذج بإعادة إنتاج نماذج واجهة المستخدم كـ HTML/CSS. حقق Claude Opus 4.6 77.3 نقطة في نفس الاختبار. هذه فجوة بنسبة 22% في مهمة تحويل التصاميم المرئية إلى تعليمات برمجية.

يوضح لك هذا الدليل كيفية استدعاء واجهة برمجة تطبيقات GLM-5V-Turbo، وإرسال الصور والفيديو، وتمكين وضع التفكير، وبث الاستجابات، واستخدام استدعاء الوظائف، واختبار تكاملك مع Apidog.

زر

ماذا يمكن لـ GLM-5V-Turbo أن يفعل

المواصفات الأساسية

المواصفة	القيمة
نافذة السياق	200 ألف رمز (202,752)
الحد الأقصى للإخراج	128 ألف رمز (131,072)
أنماط الإدخال	صورة، فيديو، نص، ملف (PDF، Word)
نمط الإخراج	نص
تسعير الإدخال	1.20 دولار لكل مليون رمز
تسعير الإخراج	4.00 دولار لكل مليون رمز
تسعير قراءة التخزين المؤقت	0.24 دولار لكل مليون رمز
تاريخ الإصدار	1 أبريل 2026
نقطة نهاية API	`https://api.z.ai/api/paas/v4/chat/completions`

القدرات المدعومة

وضع التفكير مع رموز استدلال قابلة للتكوين (علامات <think>)
إخراج متدفق للاستجابات في الوقت الفعلي
استدعاء الوظائف لتكامل الأدوات
تخزين السياق المؤقت لتحسين المحادثات الطويلة
إخراج منظم عبر تكوين تنسيق الاستجابة

حيث يتفوق

تم تصميم GLM-5V-Turbo خصيصًا لفئة ضيقة ولكن ذات قيمة عالية: النظر إلى المحتوى المرئي وكتابة التعليمات البرمجية منه. حالات الاستخدام الرئيسية:

إعادة إنشاء الواجهة الأمامية من نماذج التصميم. أعطه لقطة شاشة Figma أو تصميمًا مركبًا ويقوم بإنشاء HTML/CSS دقيق للبكسل. يدعم هذا نتيجة Design2Code البالغة 94.8 بأرقام صلبة.

الاستكشاف الذاتي لواجهة المستخدم الرسومية. يتكامل النموذج مع OpenClaw (إطار عمل وكلاء ZhipuAI) لتصفح المواقع الإلكترونية بشكل مستقل، وملء النماذج، واختبار التفاعل. حقق أداءً جيدًا في معايير AndroidWorld و WebVoyager لعمليات واجهة المستخدم الرسومية.

تصحيح الأخطاء البرمجية من لقطات الشاشة. أرسل لقطة شاشة لواجهة مستخدم معطلة ويحدد النموذج مشاكل العرض، وأخطاء التخطيط، وتعارضات CSS.

استخراج المستندات. معالجة ملفات PDF، ومستندات Word، والصور الممسوحة ضوئيًا لاستخراج البيانات المنظمة، والجداول، والنصوص.

حيث لا يتفوق

في الترميز النصي البحت (بدون إدخال مرئي)، لا يزال كلود و GPT-5 يتفوقان في مهام الواجهة الخلفية، واستكشاف المستودعات، وهندسة الأنظمة. تكمن قوة GLM-5V-Turbo على وجه التحديد عندما يكون الإدخال المرئي هو المحرك لمهمة الترميز.

البدء: إعداد واجهة برمجة التطبيقات

احصل على مفتاح API الخاص بك

اشترك في z.ai
انتقل إلى قسم مفاتيح API في لوحة التحكم الخاصة بك
أنشئ مفتاحًا جديدًا
قم بتخزينه بأمان؛ ستمرره كرمز حامل (Bearer token)

التكوين الأساسي

جميع الطلبات تذهب إلى:

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

الرؤوس المطلوبة:

Authorization: Bearer YOUR_API_KEY
Content-Type: application/json

تتبع واجهة برمجة التطبيقات (API) اتفاقيات متوافقة مع OpenAI، لذا إذا كنت قد عملت مع واجهات برمجة تطبيقات OpenAI أو Anthropic، فسيبدو تنسيق الطلب مألوفًا.

إرسال أول طلب لك باستخدام 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": "Recreate this dashboard UI as responsive HTML and CSS. Use Tailwind CSS classes."
          }
        ]
      }
    ]
  }'

مع تمكين وضع التفكير

يضيف وضع التفكير خطوة استدلال قبل أن يقوم النموذج بإنشاء استجابته. هذا يحسن الدقة في مهام الترميز المعقدة على حساب رموز إخراج إضافية.

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

عند تمكين وضع التفكير، تتضمن الاستجابة reasoning_content بالإضافة إلى حقل content القياسي. تظهر رموز الاستدلال تحليل النموذج خطوة بخطوة قبل إنتاج الإجابة النهائية.

تكامل 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": "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)

الاستجابات المتدفقة

لمهام إنشاء التعليمات البرمجية الطويلة (تخطيطات صفحات كاملة، واجهات مستخدم متعددة المكونات)، يمنحك البث المباشر إخراجًا في الوقت الفعلي بدلاً من انتظار الاستجابة الكاملة:

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)

إدخال متعدد الصور

أرسل صورًا متعددة في طلب واحد. هذا مفيد للمقارنة بين التصميمات، وتوفير مراجع الأنماط جنبًا إلى جنب مع النماذج، أو إرسال لقطات شاشة قبل/بعد لتصحيح الأخطاء:

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

استدعاء الوظائف

يدعم GLM-5V-Turbo استدعاء الوظائف، مما يتيح لك دمجه في سير عمل الوكلاء حيث يمكن للنموذج طلب إجراءات خارجية:

tools = [
    {
        "type": "function",
        "function": {
            "name": "save_component",
            "description": "Save a generated React component to a file",
            "parameters": {
                "type": "object",
                "properties": {
                    "filename": {
                        "type": "string",
                        "description": "Component filename, e.g. 'PricingCard.tsx'"
                    },
                    "code": {
                        "type": "string",
                        "description": "The full component source code"
                    },
                    "dependencies": {
                        "type": "array",
                        "items": {"type": "string"},
                        "description": "npm packages this component requires"
                    }
                },
                "required": ["filename", "code"]
            }
        }
    },
    {
        "type": "function",
        "function": {
            "name": "take_screenshot",
            "description": "Take a screenshot of a URL to verify the rendered output",
            "parameters": {
                "type": "object",
                "properties": {
                    "url": {
                        "type": "string",
                        "description": "URL to screenshot"
                    },
                    "viewport": {
                        "type": "string",
                        "description": "Viewport size: 'mobile', 'tablet', or 'desktop'"
                    }
                },
                "required": ["url"]
            }
        }
    }
]

response = client.chat.completions.create(
    model="glm-5v-turbo",
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image_url",
                    "image_url": {"url": "https://example.com/card-design.png"}
                },
                {
                    "type": "text",
                    "text": "Generate a React component from this card design and save it. Then take a screenshot to verify."
                }
            ]
        }
    ],
    tools=tools,
    tool_choice="auto"
)

تكامل Java SDK

اعتماد Maven

<dependency>
    <groupId>ai.z.openapi</groupId>
    <artifactId>zai-sdk</artifactId>
    <version>0.3.0</version>
</dependency>

جریدل

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

البث في جافا

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

استخدام نقطة النهاية المتوافقة مع OpenAI

تتبع واجهة برمجة تطبيقات Z.ai اتفاقيات OpenAI، لذا يمكنك استخدام عميل OpenAI Python مع عنوان URL أساسي مخصص:

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)

هذا يعني أن أي أداة تدعم واجهات برمجة التطبيقات المتوافقة مع OpenAI، بما في ذلك Apidog، يمكنها الاتصال بـ GLM-5V-Turbo عن طريق الإشارة إلى عنوان URL الأساسي Z.ai.

اختبار استدعاءات API لـ GLM-5V-Turbo باستخدام Apidog

قبل دمج GLM-5V-Turbo في تطبيقك، اختبر استدعاءات API الخاصة بك بشكل تفاعلي باستخدام Apidog. هذا يوفر عليك عناء تصحيح أخطاء حمولات JSON الخام في الكود.

إعداد نقطة النهاية

افتح Apidog وأنشئ طلبًا جديدًا
عيّن الطريقة على POST وعنوان URL إلى https://api.z.ai/api/paas/v4/chat/completions
أضف رأس Authorization: Bearer YOUR_KEY
عيّن Content-Type: application/json

إنشاء هياكل طلبات متعددة الوسائط بصريًا

يسمح لك محرر JSON في Apidog بإنشاء مصفوفة messages المتداخلة مع كتل محتوى image_url و text دون كتابة JSON يدويًا. يمكنك:

التبديل بين JSON الخام والإدخال المستند إلى النموذج
حفظ قوالب الطلبات لأنماط شائعة (صورة واحدة، صور متعددة، إدخال فيديو)
استخدام متغيرات البيئة لمفتاح API حتى لا تضطر إلى لصقه في كل طلب

مقارنة استجابات النموذج

عند تقييم GLM-5V-Turbo مقابل نماذج الرؤية الأخرى (Claude، GPT-4o، Gemini)، استخدم أداة تشغيل المجموعات في Apidog لإرسال نفس الصورة إلى نقاط نهاية متعددة ومقارنة المخرجات جنبًا إلى جنب. هذا مفيد بشكل خاص لمهام Design2Code حيث تريد التحقق من النموذج الذي ينتج HTML/CSS الأكثر دقة.

التحقق من صحة مخططات الاستجابة

تتضمن استجابات GLM-5V-Turbo المتدفقة حقلي reasoning_content و content. يمكن لمتحقق الاستجابات في Apidog التحقق من أن تطبيقك يتعامل بشكل صحيح مع كلا الحقلين، بما في ذلك الحالات القصوى حيث يكون أحد الحقلين فارغًا (null).

قم بتنزيل Apidog لبدء اختبار تكامل GLM-5V-Turbo الخاص بك.

مقارنة التسعير مع نماذج الرؤية الأخرى

النموذج	الإدخال (لكل مليون رمز)	الإخراج (لكل مليون رمز)	نافذة السياق	نتيجة Design2Code
GLM-5V-Turbo	1.20 دولار	4.00 دولار	200 ألف	94.8
Claude Opus 4.6	15.00 دولار	75.00 دولار	200 ألف	77.3
Claude Sonnet 4.6	3.00 دولار	15.00 دولار	200 ألف	غير متوفر
GPT-4o	2.50 دولار	10.00 دولار	128 ألف	غير متوفر
Gemini 3 Pro	1.25 دولار	5.00 دولار	مليون	غير متوفر

يعد GLM-5V-Turbo الخيار الأرخص لمهام الترميز القائمة على الرؤية. يكلف أقل بنسبة 92% من Claude Opus 4.6 لرموز الإدخال و 94.7% أقل لرموز الإخراج، بينما يحقق درجة أعلى بنسبة 22% في Design2Code.

المقايضة: يتعامل Claude و GPT-5 مع مهام الترميز الأوسع بشكل أفضل. إذا كان سير عملك هو على وجه التحديد "صورة للداخل، كود للخارج"، فإن GLM-5V-Turbo يقدم أقوى نسبة سعر إلى أداء.

البنية: كيف يعمل تحت الغطاء

مشفر الرؤية CogViT

يستخدم GLM-5V-Turbo مشفر CogViT، وهو محول رؤية مصمم للحفاظ على التسلسلات الهرمية المكانية والتفاصيل المرئية الدقيقة. تقوم مشفرات الرؤية القياسية بضغط الصور إلى متجهات ميزات مسطحة، مما يفقد العلاقات المكانية. يحافظ CogViT على المعلومات الموضعية المهمة للمهام الحساسة للتخطيط مثل وضع شبكة CSS، ومحاذاة flexbox، والمسافات الدقيقة للبكسل.

التنبؤ المتعدد بالرموز (MTP)

تقوم بنية MTP بالتنبؤ برموز متعددة في كل تمريرة أمامية بدلاً من رمز واحد في كل مرة. بالنسبة لتوليد التعليمات البرمجية، هذا يعني استدلالًا أسرع عند إخراج تسلسلات طويلة من HTML أو CSS أو JavaScript. لا يقوم النموذج بالتوليد رمزًا تلو الآخر؛ بل يتنبأ بكتل، مما يقلل من زمن الاستجابة على نافذة الإخراج القصوى البالغة 128 ألف رمز.

التعلم المعزز المشترك لـ 30+ مهمة

قامت ZhipuAI بتدريب GLM-5V-Turbo باستخدام التعلم المعزز عبر أكثر من 30 مهمة في وقت واحد: الاستدلال في STEM، والتأصيل البصري، وتحليل الفيديو، وتشغيل واجهة المستخدم الرسومية، والترميز. يمنع هذا التحسين المشترك النموذج من التجاوز الزائد على نوع واحد من المهام مع الحفاظ على أداء قوي عبر النطاق الكامل لسير عمل الترميز البصري.

نظام البيانات الوكيل

تتضمن خطة التدريب ما تسميه ZhipuAI "نظام بناء بيانات متعدد المستويات وقابل للتحقق" مع التدريب المسبق للتنبؤ بالإجراءات. عمليًا، هذا يعني أن النموذج تم تدريبه على تسلسلات "رؤية لقطة شاشة، التنبؤ بالإجراء التالي، التنفيذ، التحقق من النتيجة"، مما يجعله فعالاً في مهام واجهة المستخدم الرسومية المستقلة التي تتجاوز تحويل الصور الثابتة إلى تعليمات برمجية.

أمثلة عملية

نموذج تصميم إلى مكون 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)

سير عمل تصحيح الأخطاء عبر لقطات الشاشة

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)

استخراج المستندات إلى بيانات منظمة

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

هذه حالة استخدام قوية لفرق تطوير واجهة برمجة التطبيقات: تصوير تصميمات واجهة برمجة التطبيقات على السبورة البيضاء أو مسح الوثائق القديمة، ثم إنشاء مواصفات OpenAPI مباشرة. يمكنك بعد ذلك استيراد المواصفات التي تم إنشاؤها إلى Apidog للحصول على وثائق تفاعلية وخوادم وهمية وحالات اختبار من لقطة شاشة واحدة.

نصائح للحصول على أقصى استفادة من GLM-5V-Turbo

جودة الصورة مهمة

يحافظ مشفر CogViT على التفاصيل المكانية، لكنه لا يستطيع استعادة المعلومات غير الموجودة في الصورة المصدر. لمهام Design2Code:

استخدم لقطات الشاشة بدقة 2x (Retina) للحصول على نص واضح وتفاصيل أيقونات
اقتصاص الجزء المحدد الذي تريد إعادة إنشائه، وليس الصفحة الكاملة
إزالة شريط المتصفح وتزيينات نافذة نظام التشغيل من لقطات الشاشة
للحصول على دقة ألوان، استخدم PNG بدلاً من JPEG لتجنب تشوهات الضغط

استخدم وضع التفكير للتخطيطات المعقدة

قم بتمكين وضع التفكير ("thinking": {"type": "enabled"}) لـ:

تخطيطات صفحات متعددة المكونات
تصاميم متجاوبة بمنطق نقاط التوقف
تصاميم ذات CSS معقد (شبكة، تداخل flexbox، رسوم متحركة)
مهام تصحيح الأخطاء حيث يهم تحليل السبب الجذري

تخطى وضع التفكير للمهام البسيطة (استخراج مكون واحد، تسمية الصور الأساسية) لتوفير تكاليف الرمز وزمن الاستجابة.

إدارة نافذة السياق الخاصة بك

نافذة السياق التي تبلغ 200 ألف رمز كبيرة ولكنها ليست غير محدودة. يمكن أن تستهلك صورة واحدة عالية الدقة 1000-5000 رمز. لسير عمل متعدد الصور:

قم بتغيير حجم الصور إلى الحد الأدنى من الدقة التي تتطلبها المهمة
استخدم التخزين المؤقت للسياق للمحادثات التكرارية حيث يبقى التصميم الأساسي كما هو
قسّم تصميمات الصفحة الكاملة إلى لقطات شاشة على مستوى المكون لإنشاء فردي

تحسين التكلفة باستخدام التخزين المؤقت

يكلف التخزين المؤقت للسياق 0.24 دولار لكل مليون رمز (خصم 80% من تسعير الإدخال القياسي). لسير عمل التصميم إلى التعليمات البرمجية المتكرر حيث تقوم بتحسين نفس المكون:

أرسل صورة التصميم في الطلب الأول
تشير الطلبات اللاحقة إلى السياق المخزن مؤقتًا
كل تكرار يكلف جزءًا بسيطًا من إعادة إرسال الصورة بالكامل

التعامل مع الأخطاء والحالات القصوى

حدود المعدل وإعادة المحاولة

تُرجع واجهة برمجة تطبيقات Z.ai رموز حالة HTTP القياسية. تعامل معها في تكاملك:

import time
from zai import ZaiClient

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

def call_with_retry(messages, max_retries=3):
    """Call GLM-5V-Turbo with exponential backoff on rate limits."""
    for attempt in range(max_retries):
        try:
            response = client.chat.completions.create(
                model="glm-5v-turbo",
                messages=messages,
                thinking={"type": "enabled"}
            )
            return response
        except Exception as e:
            error_str = str(e)
            if "429" in error_str:
                # Rate limited - wait and retry
                wait_time = 2 ** attempt
                print(f"Rate limited. Retrying in {wait_time}s...")
                time.sleep(wait_time)
                continue
            elif "400" in error_str:
                # Bad request - don't retry, fix the input
                print(f"Bad request: {error_str}")
                raise
            else:
                # Server error - retry
                if attempt < max_retries - 1:
                    time.sleep(1)
                    continue
                raise

    raise Exception("Max retries exceeded")

التعامل مع المخرجات الكبيرة

مع نافذة إخراج قصوى تبلغ 128 ألف رمز، يمكن لـ GLM-5V-Turbo إنشاء تطبيقات كاملة متعددة الملفات في استجابة واحدة. يجب أن يتعامل تطبيقك مع هذا:

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

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

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

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

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

إمكانية الوصول إلى عنوان URL للصورة

يقوم النموذج بجلب الصور من عناوين URL التي تقدمها. الإخفاقات الشائعة:

عناوين URL الموقعة منتهية الصلاحية من التخزين السحابي (S3، GCS). قم بإنشاء عناوين URL بمدة صلاحية ساعة واحدة على الأقل.
الصور المقيدة بـ CORS التي تمنع الجلب من جانب الخادم. استضف الصور على CDN بدون قيود CORS.
الصور الكبيرة التي تنتهي مهلتها أثناء التنزيل. قم بتغيير حجمها إلى أقل من 5 ميجابايت قبل الإرسال.

إذا كنت تتحكم في استضافة الصور، فإن CDN العام بدون مصادقة هو الخيار الأكثر موثوقية لاستدعاءات API.

GLM-5V-Turbo مقابل استخدامه عبر OpenRouter

يمكنك الوصول إلى GLM-5V-Turbo عبر OpenRouter كبديل لواجهة برمجة تطبيقات Z.ai المباشرة. عالج OpenRouter أكثر من 44000 طلب مع أكثر من 769 مليون رمز مطالبة في أول يومين من توفر النموذج.

فوائد OpenRouter:

مفتاح API واحد لمقدمي نماذج متعددين
العودة التلقائية في حالة تعطل Z.ai
تحليلات الاستخدام عبر جميع نماذجك
نفس التنسيق المتوافق مع OpenAI

المقايضة: يضيف OpenRouter هامشًا صغيرًا على أسعار الرموز. للاستخدام الإنتاجي بكميات كبيرة، تكون واجهة برمجة تطبيقات Z.ai المباشرة أرخص.

بناء خط أنابيب من التصميم إلى الكود باستخدام 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"):
    """Complete pipeline: design screenshot -> working code -> validation."""

    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) جميع مكونات واجهة المستخدم المرئية، 2) لوحة الألوان (قيم Hex)، 3) الطباعة (أحجام الخطوط، الأوزان)، 4) هيكل التخطيط (Grid/Flexbox)، 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"
)

يفصل هذا الخط الأنابيب التحليل عن التوليد. يقوم الاستدعاء الأول بتعيين بنية التصميم وألوانه وخطوطه. ويقوم الاستدعاء الثاني بتوليد التعليمات البرمجية مع هذا الفهم كسياق. يؤدي تقسيم العمل إلى استدعاءين إلى إنتاج مخرجات أكثر دقة من طلب "تحويل هذا إلى تعليمات برمجية" واحد، لأن النموذج قد استنتج بالفعل التخطيط قبل كتابة التعليمات البرمجية.

يمكنك اختبار كل خطوة بشكل مستقل في Apidog عن طريق حفظ طلب التحليل وطلب التوليد كنقاط نهاية منفصلة في مجموعة، ثم تشغيلها بالتسلسل باستخدام مشغل المجموعات.

زر

الأسئلة الشائعة

هل GLM-5V-Turbo مجاني للاستخدام؟

لا. تسعير واجهة برمجة التطبيقات هو 1.20 دولار لكل مليون رمز إدخال و 4.00 دولارات لكل مليون رمز إخراج. تقدم ZhipuAI واجهة ويب مجانية على chat.z.ai للاختبار، ولكن استخدام واجهة برمجة التطبيقات يتطلب الدفع.

هل يمكنني إرسال صور مشفرة بـ Base64؟

تُظهر الوثائق إدخال الصور المستند إلى عنوان URL (image_url مع حقل url). لدعم Base64، قم بتشفير صورتك كـ URI للبيانات: data:image/png;base64,{encoded_data} ومررها كقيمة URL. يتبع هذا نفس الاتفاقية مثل واجهة برمجة تطبيقات OpenAI Vision.

كيف يتعامل GLM-5V-Turbo مع إدخال الفيديو؟

الفيديو مدرج كنمط إدخال مدعوم. يمكن للنموذج معالجة إطارات الفيديو لمهام مثل تحليل تسجيلات تفاعل واجهة المستخدم، وتحديد أخطاء الرسوم المتحركة، أو فهم تدفقات المستخدم. لم يتم توثيق متطلبات الترميز والتنسيق المحددة بعد.

ما الفرق بين GLM-5-Turbo و GLM-5V-Turbo؟

GLM-5-Turbo هو نموذج ترميز نصي فقط. يضيف GLM-5V-Turbo مشفر الرؤية CogViT لإدخال متعدد الوسائط (صور، فيديو، ملفات). اختر GLM-5-Turbo لمهام الترميز النصي البحتة و GLM-5V-Turbo عندما يتضمن سير عملك إدخالًا مرئيًا.

هل يمكنني استخدام GLM-5V-Turbo مع عميل OpenAI Python؟

نعم. عيّن base_url إلى https://api.z.ai/api/paas/v4 واستخدم مفتاح API الخاص بك من Z.ai. تتبع نقطة النهاية اتفاقيات متوافقة مع OpenAI لإكمال الدردشة، بما في ذلك تنسيقات الرسائل متعددة الوسائط.

كيف يقارن بـ Claude في الترميز؟

يتفوق GLM-5V-Turbo في مهام التحويل من الرؤية إلى الكود (94.8 مقابل 77.3 في Design2Code). بينما يتفوق Claude في الترميز النصي البحت، وهندسة الواجهة الخلفية، والفهم على مستوى المستودع. إنهما يخدمان حالات استخدام مختلفة. بالنسبة للفرق التي تقوم بكلا الأمرين، فإن فرق التكلفة كبير: GLM-5V-Turbo أرخص بنسبة 92% في رموز الإدخال من Claude Opus 4.6.

ما هو الحد الأقصى لحجم الصورة؟

لا تحدد الوثائق حدًا للبكسل. نافذة السياق البالغة 200 ألف رمز هي القيد العملي؛ فالصور الأكبر تستهلك رموزًا أكثر. لمهام Design2Code، تعمل لقطات الشاشة بدقة 1920x1080 بدقة 2x بشكل جيد دون الوصول إلى الحدود.

هل تحتفظ ZhipuAI ببيانات API الخاصة بي؟

لا. تنص سياسة بيانات Z.ai على عدم استخدام للتدريب وعدم الاحتفاظ بالمطالبات لاستدعاءات واجهة برمجة التطبيقات (API). لا تُستخدم صورك ومخرجات التعليمات البرمجية الخاصة بك لتدريب نماذج مستقبلية.