Phase 12: Multimodal AI

عوامل چندرنگ و استفاده از کامپیوتر (Capstone)

محصول 2026 مرز یک عامل چندمودال است که عکس های صفحه نمایش را می خواند، روی دکمه ها کلیک می کند، در UI های وب حرکت می کند، فرم ها را پر می کند و جریان های کار را از پایان به آخر تکمیل می کند. SeeClick و CogAgent (2024) ثابت کرد که GUI-grounding اولیه است. فرات-UI اضافه شده موبایل. ChartAgent استفاده از ابزار بصری برای نمودار ها را معرفی کرد. VisualWebArena و AgentVista (2026) معیار های تعقیب مرز هستند و حتی Gemini 3 Pro و Claude Opus 4.7 در وظایف سخت AgentVista حدود 30٪ امتیاز می دهند. این سنگ پایه هر رشته ای از مرحله 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 قابل تجزیه باشد. خطاهای مختلف در مراحل مختلف ترکیب می شوند، بنابراین بازیابی مهم است.

مفهوم

زمین سازی GUI اولیه

زمین سازی GUI این است: با گرفتن یک عکس صفحه نمایش و یک دستورالعمل زبان طبیعی، هماهنگی (x، y) را برای کلیک (یا عمل دیگر) صادر کنید.

SeeClick (arXiv:2401.10935) اولین نتیجه باز در مقیاس بود: تنظیم دقیق یک VLM بر روی داده های GUI مصنوعی + واقعی، هماهنگی خروجی به عنوان توکن های متن ساده. کار می کند.

CogAgent (arXiv:2312.08914) کدگذاری با وضوح بالا 1120x1120 را برای UI های کثیف اضافه کرد. نمره: ~ 84٪ در ناوبری وب.

Ferret-UI (arXiv:2404.05719) بر روی UI های موبایل تمرکز دارد، با داده های دسترسی به 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 مرحله، آنچه اتفاق افتاده را خلاصه کنید، عکس های قدیمی را رها کنید.
  • فریم تخفیف: اولین، آخرین و هر عکس 3 صفحه نمایش را نگه دارید.
  • دفترچه ضبط شده ابزار: اجرای اقدامات، نگه داشتن یک دفترچه متن از آنچه انجام شده است؛ دوباره به عکس های قدیمی نگاه نکنید.

اين برنامه براي استفاده از کامپيتر کلود از الگوي روزنامه استفاده ميکنه ساده تر و قابل اعتماد تر

استفاده از ابزار بصری

ChartAgent (arXiv:2510.04514) استفاده از ابزار بصری برای درک نمودار را معرفی می کند: محصول، زوم، OCR، تشخیص خارجی تماس. آژانس می تواند " محصول به منطقه (100, 200, 300، 400) را به عنوان یک تماس ابزار خارج کند. ابزار متن را باز می آورد؛ VLM استدلال را ادامه می دهد.

این الگوی عمومی می کند: درخواست نشان بندی، تشریح منطقه و ابزارهای تشخیص خارجی همه با همان طرح "خروج یک تماس ابزار، دریافت یک پاسخ ساختاری" مطابقت دارند.

شاخص های مرجع 2026

  • ScreenSpot-Pro. GUI زمین در ~ 1k صفحه نمایش وب. SOTA Qwen2.5-VL-72B ~ 85٪. مرز ~ 90٪.
  • VisualWebArena. وظایف وب آخر به آخر (خرده فروشی، انجمن، تبلیغات طبقه بندی) SOTA ~ 20% باز. Gemini 3 Pro ~ 27%
  • AgentVista (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.