Phase 12: Multimodal AI

وكلاء متعددة الحركات واستخدام الكمبيوتر (كابستون)

منتج 2026 frontier هو وكيل متعدد الطرق يقرأ صور الشاشة، ويقرأ أزرار، ويتصفح واجهات الويب، ويملأ النماذج، ويكمل عمليات العمل من نهاية إلى نهاية. أظهرت SeeClick وCogAgent (2024) البدائية في إرسال واجهة التضمين. إضافة الهاتف المحمول أدى ChartAgent إلى استخدام أدوات بصرية للخطط. VisualWebArena و AgentVista (2026) هي المعايير التي يطاردها الحدود وحتى Gemini 3 Pro و Claude Opus 4.7 نسبة ~ 30% على المهام الصعبة من AgentVista. هذه الحجر النهائي يجذب كل خيط من المرحلة 12: الإدراك (VLM عالية الصلة) ، والحكمة (LLM مع استخدام الأدوات) ، والأرض (خروج التنسيقية) ، والذاكرة طويلة الأفق، والتقييم.

Type: Capstone

Languages: Python (stdlib, action schema + agent loop skeleton)

Prerequisites: Phase 12 · 05 (LLaVA), Phase 12 · 09 (Qwen-VL JSON), Phase 14 (Agent Engineering)

Time: ~240 minutes

أهداف التعلم

  • تصميم حلقة وكيل متعددة الطرق: التصور → العقل → العمل → الملاحظة → تكرار.
  • بناء مخطط إخراج أرضية GUI (انقر على إحداثيات النص، وتصفيف النص، الانتقال، السحب) يمكن أن ينبعث VLM ك JSON.
  • مقارنة العاملين فقط لقطات الشاشة مقابل العاملين من شجرة الوصول مقابل العاملين الهجريين.
  • قم بتعيين تقييم مقياس العميل المتعدد الموديل على شريحة صغيرة من VisualWebArena.

المشكلة

سير العمل في موقع الحجز: "اجد لي رحلة إلى طوكيو في 15 أبريل، مقعد الممر تحت 800 دولار، حجزها".

العميل المتعدد الطرق يحتاج:

  1. خذ صورة شاشة للمتنشر
  2. قم بتحليل لقطة الشاشة + عنوان URL + هدف في خطة.
  3. إصدار إجراء منظم: انقر (في x,y) ، وتكتب "طوكيو" (في عنصر E) ، الانحراف إلى أسفل، والانتقاء (قفل الراديو).
  4. تطبيق الإجراء على المتصفح.
  5. لاحظ الحالة الجديدة (التقطة التالية).
  6. كرر حتى تنتهي المهمة

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

المفهوم

إرسال المعلومات إلى الأرض

إرسال واجهة الفيديو: مع إعطاء صورة شاشة وتعليمات لغة طبيعية، قم بإخراج إحداثيات (x، y) للنقر (أو أي عمل آخر).

SeeClick (arXiv:2401.10935) كان أول نتيجة مفتوحة على نطاق واسع: ضبط VLM على بيانات GUI اصطناعية + حقيقية ، وتنسيقات الخروج كرموز نص بسيط. يعمل.

أضاف CogAgent (arXiv:2312.08914) 1120x1120 تشفير عالية القرار للاتصالات ذات الوصول الكثيف. النتيجة: ~ 84٪ على الملاحة على الويب.

تركز Ferret-UI (arXiv:2404.05719) على واجهات الوصول المحمولة ، ويتكامل مع بيانات الوصول إلى iOS.

إنصات الصادرات عادة ما تكون JSON:

json{"action": "click", "x": 384, "y": 220, "element_desc": "Search button"}
  • نعمelement_descيساعد على الاسترداد: إذا كانت الإحداثيات تتحرك بين صور الشاشة، فإن الإشارة التعريفية تسمح للنظام بإعادة الأرض.

مخططات العمل

مخطط عمل نموذجي له 6-10 أنواع عمل:

  • click: (x, y)
  • type: (نص، x، y?)
  • scroll: (التوجه، المبلغ)
  • drag: (x0، y0، x1، y1)
  • select: (option_index)
  • hover: (x, y)
  • navigate: (url)
  • wait: (ms)
  • done: (نجاح، تفسير)

يقوم العميل بإصدار عمل واحد لكل خطوة، ويقوم مغلف المتصفح بتنفيذ وإعادت الحالة الجديدة.

فقط لقطة الشاشة مقابل شجرة الوصول

وضعين إدخال:

  • فقط لقطة الشاشة: صورة كاملة، لا توجد معلومات هيكلية. الأكثر عامة؛ يعمل على أي تطبيق.
  • شجرة الوصول: معلومات الوصول المهيكلة DOM / iOS. أكثر موثوقية بكثير للتأريخ. يعمل حيث تكون الشجرة متاحة.
  • الهجائر: كلاهما، مع الشجرة كمنشأ موثوق للأفعال الذرية والصور الشاشة للسياق المفروض.

وكلاء الإنتاج يستخدمون الهجين عندما يكون ذلك ممكناً. تتمتع أوتوماتية المتصفح (سيلين + الوصول) دائمًا بشجرة؛ وتستخدم تطبيقات سطح المكتب أحيانًا.

الذاكرة طويلة الأفق

تدفق العمل المكون من 20 خطوة يخلق 20 لقطة شاشة. يملأ سياق VLM بسرعة. ثلاث استراتيجيات ضغط:

  • سلسلة التخفيف: بعد كل 5 خطوات، قم بتخفيف ما حدث، وترمي الصور الشاشة القديمة.
  • الإطار المنتقل: احتفظ بالصور الأولى والأخيرة، وفي كل صورة شاشة ثالثة.
  • سجل المسجلة من خلال الأداة: تنفيذ الإجراءات، والاحتفاظ بسجل نصي لما تم القيام به؛ لا تنظر مرة أخرى إلى الصور الشاشة القديمة.

خيارات استخدام الكمبيوتر لـ (كلود) تستخدم نمط السجلات أكثر بساطة وموثوقية

استخدام الأدوات البصرية

يقدم ChartAgent (arXiv:2510.04514) استخدام أداة بصرية لفهم الرسم البياني: الحصاد ، الزوم ، OCR ، الكشف الخارجي. يمكن للوكيل إخراج "الحصاد إلى المنطقة (100, 200, 300 ، 400) ثم الاتصال OCR" كدعوة أداة. تستعيد الأداة النص ؛ ويمضي VLM في التفكير.

هذا النمط يُعمّل: استدعاء مجموعة من العلامات، وتعليقات المنطقة، وأدوات الكشف الخارجية كلها تناسب نفس مخطط "إنتاج دعوة أداة، استلام استجابة مهيكلة".

المؤشرات المرجعية لعام 2026

  • ScreenSpot-Pro. واجهة الفيديو على ~ 1k لقطات الشاشة على شبكة الإنترنت. افتتاح SOTA Qwen2.5-VL-72B ~ 85% حدود ~ 90%.
  • VisualWebArena. مهام الويب من نهاية إلى نهاية (متجر، منتدى، إعلانات). افتتاح SOTA ~ 20٪. جيمين 3 برو ~ 27٪.
  • وكيلVista (arXiv:2602.23166). أكثر المعايير صعوبة في عام 2026. عمليات عمل واقعية عبر 12 نطاقًا. النماذج الحدودية تسجل 27-40%؛ النماذج المفتوحة 10-20%.
  • ويب آرينا / ويب شاپ. مقاييس قديمة؛ مشبعة بالحدود.

لماذا لا يزال صعباً

عوارض الزجاجة في أداء الوكيل:

  1. "انقر على X الصغير" غالبا ما يفشل في قرار الهاتف المحمول
  2. التخطيط على المدى الطويل بعد 10 أفعال، يتحرك العميل عن الهدف
  3. إعادة التأهيل الخطأ. عندما تفشل النقر (قرص خاطئ) ، فإن الكشف + استعادة البيانات نادرا ما يتم تدريبها.
  4. سياق الصفحات المتقاطعة، القفز بين علامات التبويب أو النماذج الطويلة يفقد الحالة.

توجيهات البحث: معمارات الذاكرة، وإعادة التخطيط الصريحة، التحقق المتعدد الحركات (تطابق لقطة الشاشة لتحقيق نجاح العمل).

الحجر الرئيسي يبنيه

مهمة الحجر النهائي: بناء وكيل استخدام الكمبيوتر الذي:

  1. يقرأ صورة الشاشة HTML + من صفحة مزيفة لموقع الحجز.
  2. يخطط لسلسلة متعددة الخطوات: البحث → اختيار → ملء النموذج → تقديم.
  3. إصدار أعمال JSON مطابقة لنمط العمل.
  4. يُقيّم على شريحة ثابتة من 10 مهام

الدرس يقدم رمز الرفع الذي يسهل التوسع إليه في متصفح حقيقي.

استخدمها

code/main.pyهو منصة الحجر الرئيسي:

  • تعريف مخطط العمل JSON (10 إجراءات).
  • حالة متصفح مزيف كإرشاد
  • العضو الحلقة هيكل العظام: الاستقبال الحالة، إرسال العمل، تطبيق، حلقة.
  • علامة معيار صغيرة ذات 10 مهام (صفحات صناعية) لقياس معدل النجاح من نهاية إلى نهاية.
  • خطأ-التعافي هوك عندما تفشل الإجراء.

أرسله

هذا الدرس يُنتجoutputs/skill-multimodal-agent-designer.md. بالنظر إلى منتج استخدام الكمبيوتر (المجال، مجموعة الإجراءات، هدف التقييم) ، تصميم حلقة العميل الكامل، استراتيجية الذاكرة، وضع التأريخ، والنسبة المتوقعة للمقارنة.

التمارين

  1. تمديد مخطط العمل مع screenshot_regionأداة (حصول + زيادة) ما هي المهام التي تستفيد منها؟
  1. اقرأ AgentVista (arXiv:2602.23166). وصف أصعب فئة المهام ولماذا لا تزال النماذج الحدودية تفشل.
  1. ضغط ذاكرة الأفق الطويل: تصميم سلسلة ملخصة مع ≤4 لقطات شاشة يتم حفظها على الهواء، أي رقم مسجل.
  1. بناء خطأ-التعافي الرمز: عند فشل العمل (كلمة لم تجد) ، ماذا يفعل العميل بعد ذلك؟
  1. مقارنة كلود 4.7 فقط لقطة الشاشة الهجينة + شجرة الوصول Qwen2.5 - VL على 10 مهام الويب. من يفوز على أي مهام؟

الشروط الرئيسية

TermWhat people sayWhat it actually means
GUI grounding"Click coordinates"Model outputs (x,y) for the target of an instruction on a screenshot
Action schema"Tool definitions"JSON description of valid actions (click, type, scroll, drag)
Accessibility tree"Structured DOM"Machine-readable UI hierarchy from browser/iOS APIs
Hybrid agent"Screenshot + tree"Uses both image and structured info; more reliable than either alone
Visual tool use"Zoom/crop/detect"Agent calls external vision tools (OCR, detection) mid-plan
Summary-chain"Memory compression"Periodic text summaries replace long screenshot history
VisualWebArena"E2E web bench"2024 benchmark for end-to-end web tasks
AgentVista"2026 hard bench"12-domain realistic workflows; even Gemini 3 Pro scores ~30%

المزيد من القراءة

This free lesson is part of the AI Engineering from Scratch curriculum. Read the full explanation, run the lesson code, and verify the result in the interactive reader or from the repository source.

Browse the complete course catalog or open this lesson on GitHub.