สรุปย่อ (TL;DR)
GLM-5V-Turbo คือโมเดลการเขียนโค้ดด้วยวิสัยทัศน์แบบหลายโมดอลของ ZhipuAI ที่มีบริบท (context window) 200K, เอาต์พุตสูงสุด 128K และรองรับการป้อนข้อมูลทั้งรูปภาพ วิดีโอ ข้อความ และไฟล์ มันได้คะแนน 94.8 ในการวัดประสิทธิภาพ Design2Code (เทียบกับ Claude Opus 4.6 ที่ 77.3) และมีค่าใช้จ่าย $1.20/ล้านโทเค็นสำหรับการป้อนข้อมูล และ $4/ล้านโทเค็นสำหรับการส่งออก คู่มือนี้จะครอบคลุมการตั้งค่า การผสานรวม API และตัวอย่างการใช้งานจริงสำหรับงานเขียนโค้ดที่อิงตามวิสัยทัศน์
บทนำ
ZhipuAI (ดำเนินการในชื่อ Z.ai) ได้เปิดตัว GLM-5V-Turbo เมื่อวันที่ 1 เมษายน 2026 นี่คือโมเดลแรกของพวกเขาที่สร้างขึ้นมาโดยเฉพาะสำหรับงานเขียนโค้ดที่อิงตามวิสัยทัศน์ โดยที่อินพุตคือรูปภาพ สกรีนช็อต หรือวิดีโอ และเอาต์พุตคือโค้ดที่ใช้งานได้
โมเดลนี้อยู่ในตระกูลเดียวกับ GLM-5 (ข้อความอย่างเดียว, 744B พารามิเตอร์) และ GLM-5-Turbo (ปรับให้เหมาะสมกับการเขียนโค้ดที่เป็นข้อความ) GLM-5V-Turbo เพิ่มความเข้าใจแบบหลายโมดอลพื้นฐานบนเวอร์ชัน Turbo โดยใช้ตัวเข้ารหัสวิสัยทัศน์ CogViT และสถาปัตยกรรม Multi-Token Prediction (MTP)
ตัวเลขที่โดดเด่นคือ: 94.8 ใน Design2Code ซึ่งเป็นเกณฑ์ที่โมเดลสร้าง UI mockup ขึ้นมาใหม่เป็น HTML/CSS Claude Opus 4.6 ได้คะแนน 77.3 ในการทดสอบเดียวกัน นี่คือช่องว่าง 22% ในงานเฉพาะของการเปลี่ยนการออกแบบภาพเป็นโค้ด
คู่มือนี้จะแสดงวิธีการเรียกใช้ GLM-5V-Turbo API, การส่งรูปภาพและวิดีโอ, การเปิดใช้งานโหมดการคิด, การสตรีมการตอบสนอง, การใช้ฟังก์ชันการเรียก และการทดสอบการผสานรวมของคุณด้วย Apidog
สิ่งที่ GLM-5V-Turbo ทำได้
ข้อมูลจำเพาะหลัก
| ข้อมูลจำเพาะ | ค่า |
|---|---|
| Context window | 200K โทเค็น (202,752) |
| เอาต์พุตสูงสุด | 128K โทเค็น (131,072) |
| รูปแบบการป้อนข้อมูล | รูปภาพ, วิดีโอ, ข้อความ, ไฟล์ (PDF, Word) |
| รูปแบบการส่งออก | ข้อความ |
| ราคาการป้อนข้อมูล | $1.20 ต่อล้านโทเค็น |
| ราคาการส่งออก | $4.00 ต่อล้านโทเค็น |
| ราคาการอ่านแคช | $0.24 ต่อล้านโทเค็น |
| วันที่เปิดตัว | 1 เมษายน 2026 |
| API endpoint | https://api.z.ai/api/paas/v4/chat/completions |
ความสามารถที่รองรับ
- โหมดการคิด พร้อมโทเค็นการให้เหตุผลที่กำหนดค่าได้ (แท็ก
<think>) - เอาต์พุตแบบสตรีมมิ่ง เพื่อการตอบสนองแบบเรียลไทม์
- การเรียกใช้ฟังก์ชัน สำหรับการผสานรวมเครื่องมือ
- การแคชบริบท เพื่อการปรับปรุงการสนทนาที่ยาวนาน
- เอาต์พุตที่มีโครงสร้าง ผ่านการกำหนดค่ารูปแบบการตอบสนอง
จุดเด่น
GLM-5V-Turbo ถูกสร้างขึ้นมาโดยเฉพาะสำหรับหมวดหมู่ที่มีคุณค่าสูงแต่เฉพาะเจาะจง: การดูเนื้อหาภาพและเขียนโค้ดจากเนื้อหานั้น กรณีการใช้งานหลักได้แก่:
การสร้างส่วนหน้าจาก mockup การออกแบบ มอบภาพหน้าจอ Figma หรือองค์ประกอบการออกแบบให้มัน แล้วมันจะสร้าง HTML/CSS ที่แม่นยำระดับพิกเซล คะแนน Design2Code ที่ 94.8 ยืนยันเรื่องนี้ด้วยตัวเลขที่ชัดเจน
การสำรวจ GUI แบบอัตโนมัติ โมเดลนี้ผสานรวมกับ OpenClaw (เฟรมเวิร์กเอเจนต์ของ ZhipuAI) สำหรับการท่องเว็บอัตโนมัติ การกรอกฟอร์ม และการทดสอบการโต้ตอบ ได้คะแนนดีเยี่ยมในการทดสอบ AndroidWorld และ WebVoyager สำหรับการทำงานของ GUI
การแก้ไขข้อผิดพลาดของโค้ดจากภาพหน้าจอ ส่งภาพหน้าจอของ UI ที่มีปัญหา แล้วโมเดลจะระบุปัญหาการเรนเดอร์ ข้อบกพร่องของเลย์เอาต์ และความขัดแย้งของ CSS
การสกัดเอกสาร ประมวลผลไฟล์ PDF, เอกสาร Word และภาพที่สแกนเพื่อสกัดข้อมูลที่มีโครงสร้าง ตาราง และข้อความ
ข้อจำกัด
สำหรับการเขียนโค้ดข้อความล้วน (ไม่มีอินพุตภาพ) Claude และ GPT-5 ยังคงเป็นผู้นำในงานด้านแบ็กเอนด์ การสำรวจพื้นที่เก็บข้อมูล และสถาปัตยกรรมระบบ จุดแข็งของ GLM-5V-Turbo คือเฉพาะเมื่ออินพุตภาพเป็นตัวขับเคลื่อนงานเขียนโค้ด
เริ่มต้นใช้งาน: การตั้งค่า API
รับ API key ของคุณ
- ลงทะเบียนที่ z.ai
- ไปที่ส่วน API keys ในแดชบอร์ดของคุณ
- สร้าง key ใหม่
- เก็บรักษาอย่างปลอดภัย; คุณจะต้องส่งเป็น 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 APIs รูปแบบคำขอจะคุ้นเคยกันดี
การส่งคำขอแรกของคุณด้วย 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 มาตรฐาน โทเค็นการให้เหตุผลจะแสดงการวิเคราะห์ทีละขั้นตอนของโมเดลก่อนที่จะให้คำตอบสุดท้าย
การผสานรวม 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": "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)
การสตรีมการตอบสนอง
สำหรับงานสร้างโค้ดที่ยาวนาน (เค้าโครงหน้าทั้งหมด, 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": "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
<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("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());
}
}
การสตรีมใน 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]")
);
การใช้ endpoint ที่เข้ากันได้กับ OpenAI
API ของ 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)
ซึ่งหมายความว่าเครื่องมือใดๆ ที่รองรับ API ที่เข้ากันได้กับ OpenAI รวมถึง Apidog สามารถเชื่อมต่อกับ GLM-5V-Turbo ได้โดยชี้ไปยัง URL พื้นฐานของ Z.ai
การทดสอบการเรียกใช้ GLM-5V-Turbo API ด้วย Apidog
ก่อนที่จะผสานรวม GLM-5V-Turbo เข้ากับแอปพลิเคชันของคุณ ให้ทดสอบการเรียกใช้ API ของคุณแบบโต้ตอบด้วย Apidog ซึ่งจะช่วยให้คุณไม่ต้องแก้ไข payload JSON ดิบในโค้ด
ตั้งค่า endpoint
- เปิด 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 key เพื่อที่คุณไม่ต้องวางลงในทุกคำขอ
เปรียบเทียบการตอบสนองของโมเดล
เมื่อประเมิน GLM-5V-Turbo เทียบกับโมเดลวิสัยทัศน์อื่นๆ (Claude, GPT-4o, Gemini) ให้ใช้ collection runner ของ Apidog เพื่อส่งภาพเดียวกันไปยัง endpoints หลายแห่งและเปรียบเทียบเอาต์พุตแบบเคียงข้างกัน สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับงาน Design2Code ที่คุณต้องการตรวจสอบว่าโมเดลใดสร้าง HTML/CSS ที่แม่นยำที่สุด
ตรวจสอบความถูกต้องของสคีมาการตอบสนอง
การตอบสนองแบบสตรีมมิ่งของ GLM-5V-Turbo รวมถึงฟิลด์ reasoning_content และ content ตัวตรวจสอบความถูกต้องของการตอบสนองของ Apidog สามารถตรวจสอบได้ว่าแอปพลิเคชันของคุณจัดการทั้งสองฟิลด์ได้อย่างถูกต้อง รวมถึงกรณีขอบที่ฟิลด์ใดฟิลด์หนึ่งเป็น null
ดาวน์โหลด Apidog เพื่อเริ่มทดสอบการผสานรวม GLM-5V-Turbo ของคุณ
การเปรียบเทียบราคา กับโมเดลวิสัยทัศน์อื่นๆ
| โมเดล | อินพุต (ต่อ 1 ล้านโทเค็น) | เอาต์พุต (ต่อ 1 ล้านโทเค็น) | ขนาด Context window | คะแนน 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 เป็นตัวเลือกที่ถูกที่สุดสำหรับงานเขียนโค้ดที่อิงตามวิสัยทัศน์ มีราคาถูกกว่า Claude Opus 4.6 ถึง 92% สำหรับโทเค็นอินพุต และถูกกว่า 94.7% สำหรับโทเค็นเอาต์พุต ขณะที่ได้คะแนน Design2Code สูงกว่า 22%
ข้อแลกเปลี่ยน: Claude และ GPT-5 จัดการงานเขียนโค้ดที่กว้างกว่าได้ดีกว่า หากเวิร์กโฟลว์ของคุณคือ "ภาพเข้า, โค้ดออก" โดยเฉพาะ GLM-5V-Turbo จะนำเสนออัตราส่วนราคาต่อประสิทธิภาพที่ดีที่สุด
สถาปัตยกรรม: ทำงานอย่างไรเบื้องหลัง
ตัวเข้ารหัสวิสัยทัศน์ CogViT
GLM-5V-Turbo ใช้ CogViT ซึ่งเป็นหม้อแปลงวิสัยทัศน์ที่ออกแบบมาเพื่อรักษาระดับชั้นเชิงพื้นที่และรายละเอียดภาพที่ละเอียดอ่อน ตัวเข้ารหัสวิสัยทัศน์มาตรฐานจะบีบอัดภาพเป็นเวกเตอร์คุณสมบัติแบบแบน ทำให้สูญเสียความสัมพันธ์เชิงพื้นที่ CogViT รักษาข้อมูลตำแหน่งที่สำคัญสำหรับงานที่ต้องคำนึงถึงเค้าโครง เช่น การจัดวางกริด CSS, การจัดแนว Flexbox และการเว้นระยะห่างที่แม่นยำระดับพิกเซล
การทำนายหลายโทเค็น (MTP)
สถาปัตยกรรม MTP ทำนายโทเค็นหลายโทเค็นต่อการส่งผ่านไปข้างหน้า แทนที่จะเป็นทีละโทเค็น สำหรับการสร้างโค้ด นี่หมายถึงการอนุมานที่เร็วขึ้นเมื่อส่งออกลำดับยาวๆ ของ HTML, CSS หรือ JavaScript โมเดลไม่ได้สร้างทีละโทเค็น แต่จะทำนายเป็นกลุ่ม ซึ่งช่วยลดความหน่วงในหน้าต่างเอาต์พุตสูงสุด 128K
การเรียนรู้เสริมแรงร่วมกัน 30+ งาน
ZhipuAI ฝึกฝน GLM-5V-Turbo ด้วยการเรียนรู้เสริมแรงใน 30+ งานพร้อมกัน: การให้เหตุผล STEM, การวางตำแหน่งภาพ, การวิเคราะห์วิดีโอ, การทำงานของ GUI และการเขียนโค้ด การเพิ่มประสิทธิภาพร่วมกันนี้ป้องกันไม่ให้โมเดลโอเวอร์ฟิตกับงานประเภทใดประเภทหนึ่ง ในขณะที่ยังคงประสิทธิภาพที่แข็งแกร่งตลอดเวิร์กโฟลว์การเขียนโค้ดด้วยวิสัยทัศน์ทั้งหมด
ระบบข้อมูล Agentic
ไปป์ไลน์การฝึกอบรมรวมถึงสิ่งที่ ZhipuAI เรียกว่าระบบ "การสร้างข้อมูลที่ตรวจสอบได้หลายระดับ" พร้อมการฝึกอบรมล่วงหน้าการทำนายการกระทำ ในทางปฏิบัติ นี่หมายความว่าโมเดลได้รับการฝึกอบรมตามลำดับของ "เห็นภาพหน้าจอ, ทำนายการกระทำถัดไป, ดำเนินการ, ตรวจสอบผลลัพธ์" ทำให้มีประสิทธิภาพสำหรับงาน GUI แบบอัตโนมัติ นอกเหนือจากการแปลงภาพนิ่งเป็นโค้ด
ตัวอย่างการใช้งานจริง
การออกแบบ mockup เป็น React component
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."
}
]
}
]
)
นี่เป็นกรณีการใช้งานที่แข็งแกร่งสำหรับทีมพัฒนา API: ถ่ายภาพการออกแบบ API บนไวท์บอร์ด หรือสแกนเอกสารเก่า จากนั้นสร้าง OpenAPI spec โดยตรง คุณสามารถนำเข้า spec ที่สร้างขึ้นมายัง Apidog เพื่อรับเอกสารแบบโต้ตอบ mock server และกรณีทดสอบจากภาพหน้าจอเดียว
เคล็ดลับเพื่อประสิทธิภาพสูงสุดจาก GLM-5V-Turbo
คุณภาพของภาพเป็นสิ่งสำคัญ
ตัวเข้ารหัส CogViT รักษาความละเอียดเชิงพื้นที่ แต่ไม่สามารถกู้คืนข้อมูลที่ไม่มีอยู่ในภาพต้นฉบับได้ สำหรับงาน Design2Code:
- ใช้ภาพหน้าจอที่ความละเอียด 2 เท่า (Retina) เพื่อให้ได้ข้อความและรายละเอียดไอคอนที่คมชัด
- ตัดภาพเฉพาะส่วนประกอบที่คุณต้องการสร้างใหม่ ไม่ใช่ทั้งหน้า
- ลบแถบเครื่องมือเบราว์เซอร์และส่วนตกแต่งหน้าต่าง OS ออกจากภาพหน้าจอ
- เพื่อความแม่นยำของสี ให้ใช้ PNG แทน JPEG เพื่อหลีกเลี่ยงข้อผิดพลาดจากการบีบอัด
ใช้โหมดการคิดสำหรับเค้าโครงที่ซับซ้อน
เปิดใช้งานโหมดการคิด ("thinking": {"type": "enabled"}) สำหรับ:
- เค้าโครงหน้าที่มีหลายส่วนประกอบ
- การออกแบบที่ตอบสนองพร้อมตรรกะจุดพักหน้าจอ (breakpoint)
- การออกแบบที่มี CSS ซับซ้อน (grid, flexbox ซ้อนกัน, แอนิเมชัน)
- งานดีบักที่การวิเคราะห์หาสาเหตุรากฐานเป็นสิ่งสำคัญ
ข้ามโหมดการคิดสำหรับงานง่ายๆ (การแยกส่วนประกอบเดียว, การใส่คำบรรยายภาพพื้นฐาน) เพื่อประหยัดค่าใช้จ่ายโทเค็นและความหน่วง
จัดการ context window ของคุณ
ที่ 200K โทเค็น context window มีขนาดใหญ่แต่ไม่จำกัด ภาพความละเอียดสูงเดียวสามารถใช้โทเค็น 1,000-5,000 โทเค็น สำหรับเวิร์กโฟลว์หลายภาพ:
- ปรับขนาดภาพให้มีความละเอียดขั้นต่ำที่งานต้องการ
- ใช้การแคชบริบทสำหรับการสนทนาแบบวนซ้ำที่การออกแบบพื้นฐานยังคงเดิม
- แบ่งการออกแบบทั้งหน้าออกเป็นภาพหน้าจอระดับส่วนประกอบสำหรับการสร้างแต่ละส่วน
การเพิ่มประสิทธิภาพต้นทุนด้วยการแคช
การแคชบริบทมีค่าใช้จ่าย $0.24/M โทเค็น (ส่วนลด 80% จากราคาอินพุตมาตรฐาน) สำหรับเวิร์กโฟลว์ Design-to-Code ที่คุณกำลังปรับแต่งส่วนประกอบเดิม:
- ส่งภาพการออกแบบในคำขอแรก
- คำขอต่อเนื่องจะอ้างอิงบริบทที่แคชไว้
- แต่ละครั้งจะมีค่าใช้จ่ายเพียงเศษส่วนของการส่งภาพเต็มอีกครั้ง
การจัดการข้อผิดพลาดและกรณีขอบ
ข้อจำกัดอัตราและการลองใหม่
API ของ 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")
การจัดการเอาต์พุตขนาดใหญ่
ด้วยหน้าต่างเอาต์พุตสูงสุด 128K 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 ที่คุณให้มา ข้อผิดพลาดทั่วไป:
- Signed URL หมดอายุ จากคลาวด์สตอเรจ (S3, GCS) สร้าง URL ที่มีอายุอย่างน้อย 1 ชั่วโมง
- ภาพที่จำกัด CORS ซึ่งบล็อกการดึงข้อมูลฝั่งเซิร์ฟเวอร์ โฮสต์ภาพบน CDN ที่ไม่มีข้อจำกัด CORS
- ภาพขนาดใหญ่ ที่หมดเวลาขณะดาวน์โหลด ปรับขนาดให้ต่ำกว่า 5MB ก่อนส่ง
หากคุณควบคุมการโฮสต์ภาพ CDN สาธารณะที่ไม่มีการตรวจสอบสิทธิ์เป็นตัวเลือกที่น่าเชื่อถือที่สุดสำหรับการเรียกใช้ API
GLM-5V-Turbo เทียบกับการใช้งานผ่าน OpenRouter
คุณสามารถเข้าถึง GLM-5V-Turbo ผ่าน OpenRouter เป็นทางเลือกอื่นแทนการใช้ API โดยตรงของ Z.ai OpenRouter ประมวลผลคำขอมากกว่า 44,000 รายการพร้อมโทเค็นพร้อมท์มากกว่า 769 ล้านรายการในช่วงสองวันแรกที่โมเดลพร้อมใช้งาน
ประโยชน์ของ OpenRouter:
- API key เดียวสำหรับผู้ให้บริการโมเดลหลายราย
- สำรองอัตโนมัติหาก Z.ai หยุดทำงาน
- การวิเคราะห์การใช้งานในทุกโมเดลของคุณ
- รูปแบบที่เข้ากันได้กับ OpenAI เหมือนกัน
ข้อแลกเปลี่ยน: OpenRouter เพิ่มมาร์กอัปเล็กน้อยในราคาโทเค็น สำหรับการใช้งานการผลิตที่มีปริมาณมาก API โดยตรงของ Z.ai จะมีราคาถูกกว่า
การสร้าง Design-to-Code Pipeline ด้วย GLM-5V-Turbo
นี่คือเวิร์กโฟลว์ที่สมบูรณ์แบบที่นำ mockup การออกแบบ มาสร้างโค้ด และตรวจสอบความถูกต้องของเอาต์พุต:
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
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
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
output_file = os.path.join(output_dir, "Component.tsx")
with open(output_file, "w") as f:
# Extract code from markdown fences if present
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
design_to_code_pipeline(
image_url="https://example.com/dashboard-card.png",
output_dir="./generated-components",
framework="react"
)
ไปป์ไลน์นี้แยกการวิเคราะห์ออกจากการสร้าง การเรียกครั้งแรกจะแมปโครงสร้าง สี และแบบอักษรของการออกแบบ การเรียกครั้งที่สองจะสร้างโค้ดโดยใช้ความเข้าใจนั้นเป็นบริบท การแยกงานออกเป็นสองส่วนจะให้ผลลัพธ์ที่แม่นยำกว่าการร้องขอ "แปลงสิ่งนี้เป็นโค้ด" เพียงครั้งเดียว เนื่องจากโมเดลได้ใช้เหตุผลเกี่ยวกับเค้าโครงก่อนที่จะเขียนโค้ดแล้ว
คุณสามารถทดสอบแต่ละขั้นตอนได้อย่างอิสระใน Apidog โดยบันทึกคำขอการวิเคราะห์และคำขอการสร้างเป็น endpoints แยกต่างหากในคอลเลกชัน จากนั้นเรียกใช้ตามลำดับด้วย collection runner
คำถามที่พบบ่อย (FAQ)
GLM-5V-Turbo ใช้งานฟรีหรือไม่?
ไม่ ค่าธรรมเนียม API คือ $1.20/ล้านโทเค็นสำหรับการป้อนข้อมูล และ $4.00/ล้านโทเค็นสำหรับการส่งออก 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 เมื่อเวิร์กโฟลว์ของคุณเกี่ยวข้องกับอินพุตภาพ
ฉันสามารถใช้ GLM-5V-Turbo กับไคลเอ็นต์ OpenAI Python ได้หรือไม่?
ได้ กำหนด base_url เป็น https://api.z.ai/api/paas/v4 และใช้ API key ของ Z.ai endpoint เป็นไปตามข้อกำหนดที่เข้ากันได้กับ OpenAI สำหรับการสรุปการสนทนา รวมถึงรูปแบบข้อความหลายโมดอล
เปรียบเทียบกับ Claude สำหรับการเขียนโค้ดอย่างไร?
GLM-5V-Turbo โดดเด่นในงาน Vision-to-Code (94.8 เทียบกับ 77.3 ใน Design2Code) Claude เป็นผู้นำในการเขียนโค้ดข้อความล้วน สถาปัตยกรรมแบ็กเอนด์ และความเข้าใจระดับ repository ทั้งสองมีกรณีการใช้งานที่แตกต่างกัน สำหรับทีมที่ทำทั้งสองอย่าง ความแตกต่างของราคามีความสำคัญ: GLM-5V-Turbo มีราคาถูกกว่า Claude Opus 4.6 ถึง 92% สำหรับโทเค็นอินพุต
ขนาดภาพสูงสุดเท่าใด?
เอกสารไม่ได้ระบุขีดจำกัดพิกเซล Context window ที่ 200K เป็นข้อจำกัดในทางปฏิบัติ ภาพขนาดใหญ่จะใช้โทเค็นมากขึ้น สำหรับงาน Design2Code ภาพหน้าจอขนาด 1920x1080 ที่ความละเอียด 2x ทำงานได้ดีโดยไม่เกินขีดจำกัด
ZhipuAI เก็บข้อมูล API ของฉันไว้หรือไม่?
ไม่ นโยบายข้อมูลของ Z.ai ระบุว่าไม่มีการใช้งานเพื่อการฝึกอบรม และไม่มีการเก็บพร้อมท์สำหรับการเรียกใช้ API รูปภาพและเอาต์พุตโค้ดของคุณจะไม่ถูกนำไปใช้ในการฝึกอบรมโมเดลในอนาคต