[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M76RCBMR21W5E2SCM2AXRVG9":3,"skill-same:01M76RCBMR21W5E2SCM2AXRVG9":57},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":16,"sourceHtmlUrl":17,"categories":18,"keywords":19,"publishedAt":20,"linkOnly":21,"markdownContent":22,"markdownBody":23,"frontMatter":24,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":14,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":6,"updatedAt":31,"install":32,"resources":45},"01M76RCBMR21W5E2SCM2AXRVG9","image-understand",null,"Implement specialized image understanding capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to analyze static images, extract visual information, perform OCR, detect objects, classify images, or understand visual content. Optimized for PNG, JPEG, GIF, WebP, and BMP formats.","TanNhatCMS\u002Fawesome-trae-agent","TanNhatCMS","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F113796420?v=4","01M753MV17KG5CD3152G3WQEQY","KietNT","01M753MV2NWFCT20B8QNQ0RRMP",0,"MIT","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fimage-understand\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fimage-understand\u002FSKILL.md",[],[],"2026-11-12 13:55:43",false,"---\nname: image-understand\ndescription: Implement specialized image understanding capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to analyze static images, extract visual information, perform OCR, detect objects, classify images, or understand visual content. Optimized for PNG, JPEG, GIF, WebP, and BMP formats.\nlicense: MIT\n---\n\n# Image Understanding Skill\n\nThis skill provides specialized image understanding functionality using the z-ai-web-dev-sdk package, enabling AI models to analyze, describe, and extract information from static images.\n\n## Skills Path\n\n**Skill Location**: `{project_path}\u002Fskills\u002Fimage-understand`\n\nthis skill is located at above path in your project.\n\n**Reference Scripts**: Example test scripts are available in the `{Skill Location}\u002Fscripts\u002F` directory for quick testing and reference. See `{Skill Location}\u002Fscripts\u002Fimage-understand.ts` for a working example.\n\n## Overview\n\nImage Understanding focuses specifically on static image analysis, providing capabilities for:\n- Image description and scene understanding\n- Object detection and recognition\n- OCR (Optical Character Recognition) and text extraction\n- Image classification and categorization\n- Visual content analysis\n- Quality assessment\n- Accessibility (alt text generation)\n\n**IMPORTANT**: z-ai-web-dev-sdk MUST be used in backend code only. Never use it in client-side code.\n\n## Prerequisites\n\nThe z-ai-web-dev-sdk package is already installed. Import it as shown in the examples below.\n\n## CLI Usage (For Simple Tasks)\n\nFor quick image analysis tasks, you can use the z-ai CLI instead of writing code. This is ideal for simple image descriptions, testing, or automation.\n\n### Basic Image Analysis\n\n```bash\n# Describe an image from URL\nz-ai vision --prompt \"What's in this image?\" --image \"https:\u002F\u002Fexample.com\u002Fphoto.jpg\"\n\n# Using short options\nz-ai vision -p \"Describe this image\" -i \"https:\u002F\u002Fexample.com\u002Fimage.png\"\n```\n\n### Analyze Local Images\n\n```bash\n# Analyze a local image file\nz-ai vision -p \"What objects are in this photo?\" -i \".\u002Fphoto.jpg\"\n\n# Save response to file\nz-ai vision -p \"Describe the scene\" -i \".\u002Flandscape.png\" -o description.json\n```\n\n### Multiple Images Comparison\n\n```bash\n# Compare multiple images\nz-ai vision \\\n  -p \"Compare these two images and highlight the differences\" \\\n  -i \".\u002Fphoto1.jpg\" \\\n  -i \".\u002Fphoto2.jpg\" \\\n  -o comparison.json\n\n# Analyze a series of images\nz-ai vision \\\n  --prompt \"What patterns do you see across these images?\" \\\n  --image \"https:\u002F\u002Fexample.com\u002Fimg1.jpg\" \\\n  --image \"https:\u002F\u002Fexample.com\u002Fimg2.jpg\" \\\n  --image \"https:\u002F\u002Fexample.com\u002Fimg3.jpg\"\n```\n\n### Advanced Analysis with Thinking\n\n```bash\n# Enable chain-of-thought reasoning for complex tasks\nz-ai vision \\\n  -p \"Count all people in this image and describe what each person is doing\" \\\n  -i \".\u002Fcrowd.jpg\" \\\n  --thinking \\\n  -o analysis.json\n\n# Complex object detection with reasoning\nz-ai vision \\\n  -p \"Identify all safety hazards in this workplace image\" \\\n  -i \".\u002Fworkplace.jpg\" \\\n  --thinking\n```\n\n### Streaming Output\n\n```bash\n# Stream the analysis in real-time\nz-ai vision -p \"Provide a detailed description\" -i \".\u002Fphoto.jpg\" --stream\n```\n\n### CLI Parameters\n\n- `--prompt, -p \u003Ctext>`: **Required** - Question or instruction about the image(s)\n- `--image, -i \u003CURL or path>`: Optional - Image URL or local file path (can be used multiple times)\n- `--thinking, -t`: Optional - Enable chain-of-thought reasoning (default: disabled)\n- `--output, -o \u003Cpath>`: Optional - Output file path (JSON format)\n- `--stream`: Optional - Stream the response in real-time\n\n### Supported Image Formats\n\n- PNG (.png) - Best for diagrams, screenshots, graphics with transparency\n- JPEG (.jpg, .jpeg) - Best for photos and complex images\n- GIF (.gif) - Supports both static and animated images\n- WebP (.webp) - Modern format with good compression\n- BMP (.bmp) - Uncompressed bitmap format\n\n### When to Use CLI vs SDK\n\n**Use CLI for:**\n- Quick image analysis or descriptions\n- One-off OCR tasks\n- Testing image understanding capabilities\n- Simple batch processing scripts\n- Generating alt text for accessibility\n\n**Use SDK for:**\n- Multi-turn conversations about images\n- Complex image processing pipelines\n- Production applications with error handling\n- Custom integration with your application logic\n- Batch processing with custom business logic\n\n## Recommended Approach\n\nFor better performance and reliability, use base64 encoding to pass images to the model instead of image URLs.\n\n## Basic Image Understanding Implementation\n\n### Single Image Analysis\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function analyzeImage(imageUrl, prompt) {\n  const zai = await ZAI.create();\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          {\n            type: 'text',\n            text: prompt\n          },\n          {\n            type: 'image_url',\n            image_url: {\n              url: imageUrl\n            }\n          }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage examples\nconst description = await analyzeImage(\n  'https:\u002F\u002Fexample.com\u002Flandscape.jpg',\n  'Describe this landscape in detail, including colors, lighting, and mood'\n);\n\nconst objectDetection = await analyzeImage(\n  'https:\u002F\u002Fexample.com\u002Froom.jpg',\n  'List all objects visible in this room'\n);\n```\n\n### Multiple Images Comparison\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function compareImages(imageUrls, question) {\n  const zai = await ZAI.create();\n\n  const content = [\n    {\n      type: 'text',\n      text: question\n    },\n    ...imageUrls.map(url => ({\n      type: 'image_url',\n      image_url: { url }\n    }))\n  ];\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: content\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst comparison = await compareImages(\n  [\n    'https:\u002F\u002Fexample.com\u002Fbefore.jpg',\n    'https:\u002F\u002Fexample.com\u002Fafter.jpg'\n  ],\n  'What are the key differences between these before and after images?'\n);\n```\n\n### Base64 Image Support (Recommended)\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\nimport fs from 'fs';\nimport path from 'path';\n\nasync function analyzeLocalImage(imagePath, prompt) {\n  const zai = await ZAI.create();\n\n  \u002F\u002F Read image file and convert to base64\n  const imageBuffer = fs.readFileSync(imagePath);\n  const base64Image = imageBuffer.toString('base64');\n  \n  \u002F\u002F Determine MIME type based on file extension\n  const ext = path.extname(imagePath).toLowerCase();\n  const mimeTypes = {\n    '.png': 'image\u002Fpng',\n    '.jpg': 'image\u002Fjpeg',\n    '.jpeg': 'image\u002Fjpeg',\n    '.gif': 'image\u002Fgif',\n    '.webp': 'image\u002Fwebp',\n    '.bmp': 'image\u002Fbmp'\n  };\n  const mimeType = mimeTypes[ext] || 'image\u002Fjpeg';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          {\n            type: 'text',\n            text: prompt\n          },\n          {\n            type: 'image_url',\n            image_url: {\n              url: `data:${mimeType};base64,${base64Image}`\n            }\n          }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst result = await analyzeLocalImage(\n  '.\u002Fproduct-photo.jpg',\n  'Analyze this product image for e-commerce listing'\n);\n```\n\n## Advanced Use Cases\n\n### OCR and Text Extraction\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function extractText(imageUrl, options = {}) {\n  const zai = await ZAI.create();\n\n  const prompt = options.preserveLayout \n    ? 'Extract all text from this image. Preserve the exact layout, formatting, and structure.'\n    : 'Extract all visible text from this image.';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage examples\nconst receiptText = await extractText(\n  'https:\u002F\u002Fexample.com\u002Freceipt.jpg',\n  { preserveLayout: true }\n);\n\nconst businessCardInfo = await extractText(\n  'https:\u002F\u002Fexample.com\u002Fbusiness-card.jpg'\n);\n```\n\n### Object Detection and Counting\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function detectObjects(imageUrl, objectType) {\n  const zai = await ZAI.create();\n\n  const prompt = objectType \n    ? `Count and locate all ${objectType} in this image. Provide their positions and describe each one.`\n    : 'Detect and list all objects in this image with their approximate locations.';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'enabled' } \u002F\u002F Enable thinking for complex counting\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst peopleCount = await detectObjects(\n  'https:\u002F\u002Fexample.com\u002Fcrowd.jpg',\n  'people'\n);\n\nconst allObjects = await detectObjects(\n  'https:\u002F\u002Fexample.com\u002Froom.jpg'\n);\n```\n\n### Image Classification and Tagging\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function classifyAndTag(imageUrl) {\n  const zai = await ZAI.create();\n\n  const prompt = `Analyze this image and provide a comprehensive classification:\n1. Primary category (e.g., nature, urban, portrait, product)\n2. Subject matter (main focus of the image)\n3. Style or mood (e.g., professional, casual, artistic, vintage)\n4. Color palette description\n5. Suggested tags (10-15 keywords, comma-separated)\n\nFormat your response as structured JSON.`;\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  const content = response.choices[0]?.message?.content;\n  \n  try {\n    return JSON.parse(content);\n  } catch (e) {\n    return { rawResponse: content };\n  }\n}\n\n\u002F\u002F Usage\nconst classification = await classifyAndTag(\n  'https:\u002F\u002Fexample.com\u002Fphoto.jpg'\n);\nconsole.log('Tags:', classification.tags);\n```\n\n### Quality Assessment\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function assessImageQuality(imageUrl) {\n  const zai = await ZAI.create();\n\n  const prompt = `Assess the technical quality of this image:\n1. Sharpness and focus (1-10)\n2. Exposure and brightness (1-10)\n3. Color balance (1-10)\n4. Composition (1-10)\n5. Any technical issues (blur, noise, artifacts, etc.)\n6. Overall quality rating (1-10)\n7. Suggestions for improvement\n\nProvide specific feedback for each criterion.`;\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n```\n\n### Accessibility - Alt Text Generation\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function generateAltText(imageUrl, context = '') {\n  const zai = await ZAI.create();\n\n  const prompt = context\n    ? `Generate concise, descriptive alt text for this image. Context: ${context}. Focus on the most important visual elements that convey the image's purpose.`\n    : 'Generate concise, descriptive alt text for this image suitable for screen readers. Focus on key visual elements.';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst altText = await generateAltText(\n  'https:\u002F\u002Fexample.com\u002Fhero-image.jpg',\n  'Website hero section for a tech startup'\n);\n```\n\n### Scene Understanding\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function understandScene(imageUrl) {\n  const zai = await ZAI.create();\n\n  const prompt = `Provide a comprehensive scene analysis:\n1. Setting\u002Flocation type (indoor\u002Foutdoor, specific place)\n2. Time of day and lighting conditions\n3. Weather (if applicable)\n4. People present (number, activities, interactions)\n5. Key objects and their arrangement\n6. Overall atmosphere and mood\n7. Notable details or interesting elements`;\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n```\n\n## Batch Processing\n\n### Process Multiple Images\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nclass ImageBatchProcessor {\n  constructor() {\n    this.zai = null;\n  }\n\n  async initialize() {\n    this.zai = await ZAI.create();\n  }\n\n  async processImage(imageUrl, prompt) {\n    const response = await this.zai.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    return response.choices[0]?.message?.content;\n  }\n\n  async processBatch(imageUrls, prompt) {\n    const results = [];\n    \n    for (const imageUrl of imageUrls) {\n      try {\n        const result = await this.processImage(imageUrl, prompt);\n        results.push({ imageUrl, success: true, result });\n      } catch (error) {\n        results.push({ \n          imageUrl, \n          success: false, \n          error: error.message \n        });\n      }\n    }\n\n    return results;\n  }\n}\n\n\u002F\u002F Usage\nconst processor = new ImageBatchProcessor();\nawait processor.initialize();\n\nconst images = [\n  'https:\u002F\u002Fexample.com\u002Fimg1.jpg',\n  'https:\u002F\u002Fexample.com\u002Fimg2.jpg',\n  'https:\u002F\u002Fexample.com\u002Fimg3.jpg'\n];\n\nconst results = await processor.processBatch(\n  images,\n  'Generate a short description suitable for social media'\n);\n```\n\n## Best Practices\n\n### 1. Image Quality and Preparation\n- Use high-resolution images for better analysis accuracy\n- Ensure images are well-lit and properly exposed\n- For OCR, ensure text is clear and readable\n- Optimize file size to balance quality and performance\n- Supported formats: PNG (best for text\u002Fdiagrams), JPEG (best for photos), WebP, GIF, BMP\n\n### 2. Prompt Engineering for Images\n- Be specific about what information you need\n- Mention the type of image (photo, diagram, screenshot, etc.)\n- For complex tasks, break down into specific questions\n- Use structured prompts for JSON output\n- Include context when relevant\n\n### 3. Error Handling\n\n```javascript\nasync function safeImageAnalysis(imageUrl, prompt) {\n  try {\n    const zai = await ZAI.create();\n    \n    const response = await zai.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    return {\n      success: true,\n      content: response.choices[0]?.message?.content\n    };\n  } catch (error) {\n    console.error('Image analysis error:', error);\n    return {\n      success: false,\n      error: error.message\n    };\n  }\n}\n```\n\n### 4. Performance Optimization\n- Cache SDK instance for batch processing\n- Use base64 encoding for local images\n- Implement request throttling for large batches\n- Consider image preprocessing (resize, compress) for large files\n- Use appropriate thinking mode (disabled for simple tasks, enabled for complex reasoning)\n\n### 5. Security Considerations\n- Validate image URLs before processing\n- Implement rate limiting for public APIs\n- Sanitize user-provided image data\n- Never expose SDK credentials in client-side code\n- Implement content moderation for user-uploaded images\n\n## Common Use Cases\n\n1. **E-commerce Product Analysis**: Analyze product images, extract features, generate descriptions\n2. **Document Processing**: Extract text from receipts, invoices, forms, business cards\n3. **Content Moderation**: Detect inappropriate content, verify image compliance\n4. **Quality Control**: Identify defects, assess product quality in manufacturing\n5. **Accessibility**: Generate alt text for images automatically\n6. **Image Cataloging**: Auto-tag and categorize image libraries\n7. **Visual Search**: Understand and index images for search functionality\n8. **Medical Imaging**: Preliminary analysis with appropriate disclaimers\n9. **Real Estate**: Analyze property photos, extract features\n10. **Social Media**: Generate captions, hashtags, and descriptions\n\n## Integration Examples\n\n### Express.js API Endpoint\n\n```javascript\nimport express from 'express';\nimport ZAI from 'z-ai-web-dev-sdk';\nimport multer from 'multer';\n\nconst app = express();\nconst upload = multer({ storage: multer.memoryStorage() });\n\nlet zaiInstance;\n\nasync function initZAI() {\n  zaiInstance = await ZAI.create();\n}\n\n\u002F\u002F Analyze image from URL\napp.post('\u002Fapi\u002Fanalyze-image', express.json(), async (req, res) => {\n  try {\n    const { imageUrl, prompt } = req.body;\n\n    if (!imageUrl || !prompt) {\n      return res.status(400).json({ \n        error: 'imageUrl and prompt are required' \n      });\n    }\n\n    const response = await zaiInstance.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    res.json({\n      success: true,\n      analysis: response.choices[0]?.message?.content\n    });\n  } catch (error) {\n    res.status(500).json({\n      success: false,\n      error: error.message\n    });\n  }\n});\n\n\u002F\u002F Analyze uploaded image file\napp.post('\u002Fapi\u002Fanalyze-upload', upload.single('image'), async (req, res) => {\n  try {\n    const { prompt } = req.body;\n    const imageFile = req.file;\n\n    if (!imageFile || !prompt) {\n      return res.status(400).json({ \n        error: 'image file and prompt are required' \n      });\n    }\n\n    \u002F\u002F Convert to base64\n    const base64Image = imageFile.buffer.toString('base64');\n    const mimeType = imageFile.mimetype;\n\n    const response = await zaiInstance.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { \n              type: 'image_url', \n              image_url: { \n                url: `data:${mimeType};base64,${base64Image}` \n              } \n            }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    res.json({\n      success: true,\n      analysis: response.choices[0]?.message?.content\n    });\n  } catch (error) {\n    res.status(500).json({\n      success: false,\n      error: error.message\n    });\n  }\n});\n\ninitZAI().then(() => {\n  app.listen(3000, () => {\n    console.log('Image understanding API running on port 3000');\n  });\n});\n```\n\n### Next.js API Route\n\n```javascript\n\u002F\u002F pages\u002Fapi\u002Fimage-understand.js\nimport ZAI from 'z-ai-web-dev-sdk';\n\nlet zaiInstance = null;\n\nasync function getZAI() {\n  if (!zaiInstance) {\n    zaiInstance = await ZAI.create();\n  }\n  return zaiInstance;\n}\n\nexport default async function handler(req, res) {\n  if (req.method !== 'POST') {\n    return res.status(405).json({ error: 'Method not allowed' });\n  }\n\n  try {\n    const { imageUrl, prompt } = req.body;\n\n    if (!imageUrl || !prompt) {\n      return res.status(400).json({ \n        error: 'imageUrl and prompt are required' \n      });\n    }\n\n    const zai = await getZAI();\n\n    const response = await zai.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    res.status(200).json({\n      success: true,\n      analysis: response.choices[0]?.message?.content\n    });\n  } catch (error) {\n    console.error('Error:', error);\n    res.status(500).json({\n      success: false,\n      error: error.message\n    });\n  }\n}\n```\n\n## Troubleshooting\n\n**Issue**: \"SDK must be used in backend\"\n- **Solution**: Ensure z-ai-web-dev-sdk is only imported and used in server-side code, never in client\u002Fbrowser code\n\n**Issue**: Image not loading or being analyzed\n- **Solution**: Verify the image URL is accessible, returns correct MIME type, and is in a supported format\n\n**Issue**: Poor OCR accuracy\n- **Solution**: Ensure text is clear and readable, increase image resolution, ensure proper lighting and contrast\n\n**Issue**: Inaccurate object detection or counting\n- **Solution**: Enable thinking mode for complex counting tasks, use high-resolution images, provide specific prompts\n\n**Issue**: Slow response times\n- **Solution**: Optimize image size (resize before upload), use base64 for local images, cache SDK instance for batch processing\n\n**Issue**: Base64 encoding fails\n- **Solution**: Verify file path is correct, check file permissions, ensure MIME type matches file extension\n\n## Remember\n\n- Always use z-ai-web-dev-sdk in backend code only\n- The SDK is already installed - import as shown in examples\n- Use `image_url` content type for static images\n- Base64 encoding is recommended for better performance\n- Structure prompts clearly for best results\n- Enable thinking mode for complex reasoning tasks (counting, detailed analysis)\n- Handle errors gracefully in production\n- Validate and sanitize user inputs\n- Consider privacy and security when processing user images\n","# Image Understanding Skill\n\nThis skill provides specialized image understanding functionality using the z-ai-web-dev-sdk package, enabling AI models to analyze, describe, and extract information from static images.\n\n## Skills Path\n\n**Skill Location**: `{project_path}\u002Fskills\u002Fimage-understand`\n\nthis skill is located at above path in your project.\n\n**Reference Scripts**: Example test scripts are available in the `{Skill Location}\u002Fscripts\u002F` directory for quick testing and reference. See `{Skill Location}\u002Fscripts\u002Fimage-understand.ts` for a working example.\n\n## Overview\n\nImage Understanding focuses specifically on static image analysis, providing capabilities for:\n- Image description and scene understanding\n- Object detection and recognition\n- OCR (Optical Character Recognition) and text extraction\n- Image classification and categorization\n- Visual content analysis\n- Quality assessment\n- Accessibility (alt text generation)\n\n**IMPORTANT**: z-ai-web-dev-sdk MUST be used in backend code only. Never use it in client-side code.\n\n## Prerequisites\n\nThe z-ai-web-dev-sdk package is already installed. Import it as shown in the examples below.\n\n## CLI Usage (For Simple Tasks)\n\nFor quick image analysis tasks, you can use the z-ai CLI instead of writing code. This is ideal for simple image descriptions, testing, or automation.\n\n### Basic Image Analysis\n\n```bash\n# Describe an image from URL\nz-ai vision --prompt \"What's in this image?\" --image \"https:\u002F\u002Fexample.com\u002Fphoto.jpg\"\n\n# Using short options\nz-ai vision -p \"Describe this image\" -i \"https:\u002F\u002Fexample.com\u002Fimage.png\"\n```\n\n### Analyze Local Images\n\n```bash\n# Analyze a local image file\nz-ai vision -p \"What objects are in this photo?\" -i \".\u002Fphoto.jpg\"\n\n# Save response to file\nz-ai vision -p \"Describe the scene\" -i \".\u002Flandscape.png\" -o description.json\n```\n\n### Multiple Images Comparison\n\n```bash\n# Compare multiple images\nz-ai vision \\\n  -p \"Compare these two images and highlight the differences\" \\\n  -i \".\u002Fphoto1.jpg\" \\\n  -i \".\u002Fphoto2.jpg\" \\\n  -o comparison.json\n\n# Analyze a series of images\nz-ai vision \\\n  --prompt \"What patterns do you see across these images?\" \\\n  --image \"https:\u002F\u002Fexample.com\u002Fimg1.jpg\" \\\n  --image \"https:\u002F\u002Fexample.com\u002Fimg2.jpg\" \\\n  --image \"https:\u002F\u002Fexample.com\u002Fimg3.jpg\"\n```\n\n### Advanced Analysis with Thinking\n\n```bash\n# Enable chain-of-thought reasoning for complex tasks\nz-ai vision \\\n  -p \"Count all people in this image and describe what each person is doing\" \\\n  -i \".\u002Fcrowd.jpg\" \\\n  --thinking \\\n  -o analysis.json\n\n# Complex object detection with reasoning\nz-ai vision \\\n  -p \"Identify all safety hazards in this workplace image\" \\\n  -i \".\u002Fworkplace.jpg\" \\\n  --thinking\n```\n\n### Streaming Output\n\n```bash\n# Stream the analysis in real-time\nz-ai vision -p \"Provide a detailed description\" -i \".\u002Fphoto.jpg\" --stream\n```\n\n### CLI Parameters\n\n- `--prompt, -p \u003Ctext>`: **Required** - Question or instruction about the image(s)\n- `--image, -i \u003CURL or path>`: Optional - Image URL or local file path (can be used multiple times)\n- `--thinking, -t`: Optional - Enable chain-of-thought reasoning (default: disabled)\n- `--output, -o \u003Cpath>`: Optional - Output file path (JSON format)\n- `--stream`: Optional - Stream the response in real-time\n\n### Supported Image Formats\n\n- PNG (.png) - Best for diagrams, screenshots, graphics with transparency\n- JPEG (.jpg, .jpeg) - Best for photos and complex images\n- GIF (.gif) - Supports both static and animated images\n- WebP (.webp) - Modern format with good compression\n- BMP (.bmp) - Uncompressed bitmap format\n\n### When to Use CLI vs SDK\n\n**Use CLI for:**\n- Quick image analysis or descriptions\n- One-off OCR tasks\n- Testing image understanding capabilities\n- Simple batch processing scripts\n- Generating alt text for accessibility\n\n**Use SDK for:**\n- Multi-turn conversations about images\n- Complex image processing pipelines\n- Production applications with error handling\n- Custom integration with your application logic\n- Batch processing with custom business logic\n\n## Recommended Approach\n\nFor better performance and reliability, use base64 encoding to pass images to the model instead of image URLs.\n\n## Basic Image Understanding Implementation\n\n### Single Image Analysis\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function analyzeImage(imageUrl, prompt) {\n  const zai = await ZAI.create();\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          {\n            type: 'text',\n            text: prompt\n          },\n          {\n            type: 'image_url',\n            image_url: {\n              url: imageUrl\n            }\n          }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage examples\nconst description = await analyzeImage(\n  'https:\u002F\u002Fexample.com\u002Flandscape.jpg',\n  'Describe this landscape in detail, including colors, lighting, and mood'\n);\n\nconst objectDetection = await analyzeImage(\n  'https:\u002F\u002Fexample.com\u002Froom.jpg',\n  'List all objects visible in this room'\n);\n```\n\n### Multiple Images Comparison\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function compareImages(imageUrls, question) {\n  const zai = await ZAI.create();\n\n  const content = [\n    {\n      type: 'text',\n      text: question\n    },\n    ...imageUrls.map(url => ({\n      type: 'image_url',\n      image_url: { url }\n    }))\n  ];\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: content\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst comparison = await compareImages(\n  [\n    'https:\u002F\u002Fexample.com\u002Fbefore.jpg',\n    'https:\u002F\u002Fexample.com\u002Fafter.jpg'\n  ],\n  'What are the key differences between these before and after images?'\n);\n```\n\n### Base64 Image Support (Recommended)\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\nimport fs from 'fs';\nimport path from 'path';\n\nasync function analyzeLocalImage(imagePath, prompt) {\n  const zai = await ZAI.create();\n\n  \u002F\u002F Read image file and convert to base64\n  const imageBuffer = fs.readFileSync(imagePath);\n  const base64Image = imageBuffer.toString('base64');\n  \n  \u002F\u002F Determine MIME type based on file extension\n  const ext = path.extname(imagePath).toLowerCase();\n  const mimeTypes = {\n    '.png': 'image\u002Fpng',\n    '.jpg': 'image\u002Fjpeg',\n    '.jpeg': 'image\u002Fjpeg',\n    '.gif': 'image\u002Fgif',\n    '.webp': 'image\u002Fwebp',\n    '.bmp': 'image\u002Fbmp'\n  };\n  const mimeType = mimeTypes[ext] || 'image\u002Fjpeg';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          {\n            type: 'text',\n            text: prompt\n          },\n          {\n            type: 'image_url',\n            image_url: {\n              url: `data:${mimeType};base64,${base64Image}`\n            }\n          }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst result = await analyzeLocalImage(\n  '.\u002Fproduct-photo.jpg',\n  'Analyze this product image for e-commerce listing'\n);\n```\n\n## Advanced Use Cases\n\n### OCR and Text Extraction\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function extractText(imageUrl, options = {}) {\n  const zai = await ZAI.create();\n\n  const prompt = options.preserveLayout \n    ? 'Extract all text from this image. Preserve the exact layout, formatting, and structure.'\n    : 'Extract all visible text from this image.';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage examples\nconst receiptText = await extractText(\n  'https:\u002F\u002Fexample.com\u002Freceipt.jpg',\n  { preserveLayout: true }\n);\n\nconst businessCardInfo = await extractText(\n  'https:\u002F\u002Fexample.com\u002Fbusiness-card.jpg'\n);\n```\n\n### Object Detection and Counting\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function detectObjects(imageUrl, objectType) {\n  const zai = await ZAI.create();\n\n  const prompt = objectType \n    ? `Count and locate all ${objectType} in this image. Provide their positions and describe each one.`\n    : 'Detect and list all objects in this image with their approximate locations.';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'enabled' } \u002F\u002F Enable thinking for complex counting\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst peopleCount = await detectObjects(\n  'https:\u002F\u002Fexample.com\u002Fcrowd.jpg',\n  'people'\n);\n\nconst allObjects = await detectObjects(\n  'https:\u002F\u002Fexample.com\u002Froom.jpg'\n);\n```\n\n### Image Classification and Tagging\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function classifyAndTag(imageUrl) {\n  const zai = await ZAI.create();\n\n  const prompt = `Analyze this image and provide a comprehensive classification:\n1. Primary category (e.g., nature, urban, portrait, product)\n2. Subject matter (main focus of the image)\n3. Style or mood (e.g., professional, casual, artistic, vintage)\n4. Color palette description\n5. Suggested tags (10-15 keywords, comma-separated)\n\nFormat your response as structured JSON.`;\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  const content = response.choices[0]?.message?.content;\n  \n  try {\n    return JSON.parse(content);\n  } catch (e) {\n    return { rawResponse: content };\n  }\n}\n\n\u002F\u002F Usage\nconst classification = await classifyAndTag(\n  'https:\u002F\u002Fexample.com\u002Fphoto.jpg'\n);\nconsole.log('Tags:', classification.tags);\n```\n\n### Quality Assessment\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function assessImageQuality(imageUrl) {\n  const zai = await ZAI.create();\n\n  const prompt = `Assess the technical quality of this image:\n1. Sharpness and focus (1-10)\n2. Exposure and brightness (1-10)\n3. Color balance (1-10)\n4. Composition (1-10)\n5. Any technical issues (blur, noise, artifacts, etc.)\n6. Overall quality rating (1-10)\n7. Suggestions for improvement\n\nProvide specific feedback for each criterion.`;\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n```\n\n### Accessibility - Alt Text Generation\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function generateAltText(imageUrl, context = '') {\n  const zai = await ZAI.create();\n\n  const prompt = context\n    ? `Generate concise, descriptive alt text for this image. Context: ${context}. Focus on the most important visual elements that convey the image's purpose.`\n    : 'Generate concise, descriptive alt text for this image suitable for screen readers. Focus on key visual elements.';\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n\n\u002F\u002F Usage\nconst altText = await generateAltText(\n  'https:\u002F\u002Fexample.com\u002Fhero-image.jpg',\n  'Website hero section for a tech startup'\n);\n```\n\n### Scene Understanding\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nasync function understandScene(imageUrl) {\n  const zai = await ZAI.create();\n\n  const prompt = `Provide a comprehensive scene analysis:\n1. Setting\u002Flocation type (indoor\u002Foutdoor, specific place)\n2. Time of day and lighting conditions\n3. Weather (if applicable)\n4. People present (number, activities, interactions)\n5. Key objects and their arrangement\n6. Overall atmosphere and mood\n7. Notable details or interesting elements`;\n\n  const response = await zai.chat.completions.createVision({\n    messages: [\n      {\n        role: 'user',\n        content: [\n          { type: 'text', text: prompt },\n          { type: 'image_url', image_url: { url: imageUrl } }\n        ]\n      }\n    ],\n    thinking: { type: 'disabled' }\n  });\n\n  return response.choices[0]?.message?.content;\n}\n```\n\n## Batch Processing\n\n### Process Multiple Images\n\n```javascript\nimport ZAI from 'z-ai-web-dev-sdk';\n\nclass ImageBatchProcessor {\n  constructor() {\n    this.zai = null;\n  }\n\n  async initialize() {\n    this.zai = await ZAI.create();\n  }\n\n  async processImage(imageUrl, prompt) {\n    const response = await this.zai.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    return response.choices[0]?.message?.content;\n  }\n\n  async processBatch(imageUrls, prompt) {\n    const results = [];\n    \n    for (const imageUrl of imageUrls) {\n      try {\n        const result = await this.processImage(imageUrl, prompt);\n        results.push({ imageUrl, success: true, result });\n      } catch (error) {\n        results.push({ \n          imageUrl, \n          success: false, \n          error: error.message \n        });\n      }\n    }\n\n    return results;\n  }\n}\n\n\u002F\u002F Usage\nconst processor = new ImageBatchProcessor();\nawait processor.initialize();\n\nconst images = [\n  'https:\u002F\u002Fexample.com\u002Fimg1.jpg',\n  'https:\u002F\u002Fexample.com\u002Fimg2.jpg',\n  'https:\u002F\u002Fexample.com\u002Fimg3.jpg'\n];\n\nconst results = await processor.processBatch(\n  images,\n  'Generate a short description suitable for social media'\n);\n```\n\n## Best Practices\n\n### 1. Image Quality and Preparation\n- Use high-resolution images for better analysis accuracy\n- Ensure images are well-lit and properly exposed\n- For OCR, ensure text is clear and readable\n- Optimize file size to balance quality and performance\n- Supported formats: PNG (best for text\u002Fdiagrams), JPEG (best for photos), WebP, GIF, BMP\n\n### 2. Prompt Engineering for Images\n- Be specific about what information you need\n- Mention the type of image (photo, diagram, screenshot, etc.)\n- For complex tasks, break down into specific questions\n- Use structured prompts for JSON output\n- Include context when relevant\n\n### 3. Error Handling\n\n```javascript\nasync function safeImageAnalysis(imageUrl, prompt) {\n  try {\n    const zai = await ZAI.create();\n    \n    const response = await zai.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    return {\n      success: true,\n      content: response.choices[0]?.message?.content\n    };\n  } catch (error) {\n    console.error('Image analysis error:', error);\n    return {\n      success: false,\n      error: error.message\n    };\n  }\n}\n```\n\n### 4. Performance Optimization\n- Cache SDK instance for batch processing\n- Use base64 encoding for local images\n- Implement request throttling for large batches\n- Consider image preprocessing (resize, compress) for large files\n- Use appropriate thinking mode (disabled for simple tasks, enabled for complex reasoning)\n\n### 5. Security Considerations\n- Validate image URLs before processing\n- Implement rate limiting for public APIs\n- Sanitize user-provided image data\n- Never expose SDK credentials in client-side code\n- Implement content moderation for user-uploaded images\n\n## Common Use Cases\n\n1. **E-commerce Product Analysis**: Analyze product images, extract features, generate descriptions\n2. **Document Processing**: Extract text from receipts, invoices, forms, business cards\n3. **Content Moderation**: Detect inappropriate content, verify image compliance\n4. **Quality Control**: Identify defects, assess product quality in manufacturing\n5. **Accessibility**: Generate alt text for images automatically\n6. **Image Cataloging**: Auto-tag and categorize image libraries\n7. **Visual Search**: Understand and index images for search functionality\n8. **Medical Imaging**: Preliminary analysis with appropriate disclaimers\n9. **Real Estate**: Analyze property photos, extract features\n10. **Social Media**: Generate captions, hashtags, and descriptions\n\n## Integration Examples\n\n### Express.js API Endpoint\n\n```javascript\nimport express from 'express';\nimport ZAI from 'z-ai-web-dev-sdk';\nimport multer from 'multer';\n\nconst app = express();\nconst upload = multer({ storage: multer.memoryStorage() });\n\nlet zaiInstance;\n\nasync function initZAI() {\n  zaiInstance = await ZAI.create();\n}\n\n\u002F\u002F Analyze image from URL\napp.post('\u002Fapi\u002Fanalyze-image', express.json(), async (req, res) => {\n  try {\n    const { imageUrl, prompt } = req.body;\n\n    if (!imageUrl || !prompt) {\n      return res.status(400).json({ \n        error: 'imageUrl and prompt are required' \n      });\n    }\n\n    const response = await zaiInstance.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    res.json({\n      success: true,\n      analysis: response.choices[0]?.message?.content\n    });\n  } catch (error) {\n    res.status(500).json({\n      success: false,\n      error: error.message\n    });\n  }\n});\n\n\u002F\u002F Analyze uploaded image file\napp.post('\u002Fapi\u002Fanalyze-upload', upload.single('image'), async (req, res) => {\n  try {\n    const { prompt } = req.body;\n    const imageFile = req.file;\n\n    if (!imageFile || !prompt) {\n      return res.status(400).json({ \n        error: 'image file and prompt are required' \n      });\n    }\n\n    \u002F\u002F Convert to base64\n    const base64Image = imageFile.buffer.toString('base64');\n    const mimeType = imageFile.mimetype;\n\n    const response = await zaiInstance.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { \n              type: 'image_url', \n              image_url: { \n                url: `data:${mimeType};base64,${base64Image}` \n              } \n            }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    res.json({\n      success: true,\n      analysis: response.choices[0]?.message?.content\n    });\n  } catch (error) {\n    res.status(500).json({\n      success: false,\n      error: error.message\n    });\n  }\n});\n\ninitZAI().then(() => {\n  app.listen(3000, () => {\n    console.log('Image understanding API running on port 3000');\n  });\n});\n```\n\n### Next.js API Route\n\n```javascript\n\u002F\u002F pages\u002Fapi\u002Fimage-understand.js\nimport ZAI from 'z-ai-web-dev-sdk';\n\nlet zaiInstance = null;\n\nasync function getZAI() {\n  if (!zaiInstance) {\n    zaiInstance = await ZAI.create();\n  }\n  return zaiInstance;\n}\n\nexport default async function handler(req, res) {\n  if (req.method !== 'POST') {\n    return res.status(405).json({ error: 'Method not allowed' });\n  }\n\n  try {\n    const { imageUrl, prompt } = req.body;\n\n    if (!imageUrl || !prompt) {\n      return res.status(400).json({ \n        error: 'imageUrl and prompt are required' \n      });\n    }\n\n    const zai = await getZAI();\n\n    const response = await zai.chat.completions.createVision({\n      messages: [\n        {\n          role: 'user',\n          content: [\n            { type: 'text', text: prompt },\n            { type: 'image_url', image_url: { url: imageUrl } }\n          ]\n        }\n      ],\n      thinking: { type: 'disabled' }\n    });\n\n    res.status(200).json({\n      success: true,\n      analysis: response.choices[0]?.message?.content\n    });\n  } catch (error) {\n    console.error('Error:', error);\n    res.status(500).json({\n      success: false,\n      error: error.message\n    });\n  }\n}\n```\n\n## Troubleshooting\n\n**Issue**: \"SDK must be used in backend\"\n- **Solution**: Ensure z-ai-web-dev-sdk is only imported and used in server-side code, never in client\u002Fbrowser code\n\n**Issue**: Image not loading or being analyzed\n- **Solution**: Verify the image URL is accessible, returns correct MIME type, and is in a supported format\n\n**Issue**: Poor OCR accuracy\n- **Solution**: Ensure text is clear and readable, increase image resolution, ensure proper lighting and contrast\n\n**Issue**: Inaccurate object detection or counting\n- **Solution**: Enable thinking mode for complex counting tasks, use high-resolution images, provide specific prompts\n\n**Issue**: Slow response times\n- **Solution**: Optimize image size (resize before upload), use base64 for local images, cache SDK instance for batch processing\n\n**Issue**: Base64 encoding fails\n- **Solution**: Verify file path is correct, check file permissions, ensure MIME type matches file extension\n\n## Remember\n\n- Always use z-ai-web-dev-sdk in backend code only\n- The SDK is already installed - import as shown in examples\n- Use `image_url` content type for static images\n- Base64 encoding is recommended for better performance\n- Structure prompts clearly for best results\n- Enable thinking mode for complex reasoning tasks (counting, detailed analysis)\n- Handle errors gracefully in production\n- Validate and sanitize user inputs\n- Consider privacy and security when processing user images\n",{"name":5,"license":15,"description":7},"main","e96f7a872dec0d6e199d100f81190859e395e037","awesome-z.ai\u002Fimage-understand","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent","https:\u002F\u002Fgithub.com\u002FTanNhatCMS","https:\u002F\u002Fmrkiet.name.vn","2026-08-29 16:02:29",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add TanNhatCMS\u002Fawesome-trae-agent --skill image-understand",{"tool":38,"command":39},"bunx","bunx skills add TanNhatCMS\u002Fawesome-trae-agent --skill image-understand",{"tool":41,"command":42},"pnpm","pnpm dlx skills add TanNhatCMS\u002Fawesome-trae-agent --skill image-understand","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fimage-understand\u002FSKILL.md",true,[46,51],{"path":47,"resourceType":48,"resourceTypeDesc":49,"sizeBytes":50,"sourceHtmlUrl":16},"LICENSE.txt","LICENSE","许可证",1080,{"path":52,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":55,"sourceHtmlUrl":56},"scripts\u002Fimage-understand.ts","SCRIPT","脚本",1018,"https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fimage-understand\u002Fscripts\u002Fimage-understand.ts",[58,66,74,82,90,99],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":62,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":20},"01M76RFHQGFWFXENTPSBN2KBQ3","web-search","Implement web search capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to search for real-time information from the web, retrieve up-to-date content beyond the knowledge cutoff, or find the latest news and data. Returns structured search results with URLs, snippets, and metadata.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fweb-search\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fweb-search\u002FSKILL.md",[],[],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":70,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":20},"01M76RFCS04XJPKHW0NJ0WRFEF","web-reader","Implement web page content extraction capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to scrape web pages, extract article content, retrieve page metadata, or build applications that process web content. Supports automatic content extraction with title, HTML, and publication time retrieval.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fweb-reader\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fweb-reader\u002FSKILL.md",[],[],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":78,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":20},"01M76RF34Z9FRNRXPG45NTVT7G","video-understand","Implement specialized video understanding capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to analyze video content, understand motion and temporal sequences, extract information from video frames, describe video scenes, or perform video-based AI analysis. Optimized for MP4, AVI, MOV, and other common video formats.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fvideo-understand\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fvideo-understand\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":86,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":20},"01M76REX1SZH5M3D27P7QHQ4TH","Video Generation","Implement AI-powered video generation capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to generate videos from text prompts or images, create video content programmatically, or build applications that produce video outputs. Supports asynchronous task management with status polling and result retrieval.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fvideo-generation\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fvideo-generation\u002FSKILL.md",[],[],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":94,"licenseFileUrl":95,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":20},"01M76RE1KZYW096QCARZVHGGT9","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fskill-creator\u002FSKILL.md",[],[],{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":94,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":20},"01M76RDVC9JQE2E10PC0YNNFCP","seo-content-writer","Use when the user asks to \"write SEO content\", \"create a blog post\", \"write an article\", \"content writing\", \"draft optimized content\", \"write me an article\", \"create a blog post about\", \"help me write SEO content\", or \"draft content for\". Creates high-quality, SEO-optimized content that ranks in search engines. Applies on-page SEO best practices, keyword optimization, and content structure for maximum visibility and engagement. For AI citation optimization, see geo-content-optimizer. For updating existing content, see content-refresher.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fawesome-trae-agent\u002Fblob\u002Fmain\u002Fawesome-z.ai\u002Fseo-content-writer\u002FSKILL.md",[],[]]