اتوماسیون سنتی وب و نرمافزارهای دسکتاپ معمولاً با کوچکترین تغییر در ساختار کدهای فرانتاند یا شناسههای المانها از کار میافتد. با ظهور مدلهای بینایی-زبانی پیشرفته (VLM)، نسل جدیدی از سیستمهای هوشمند شکل گرفتهاند که مانند یک انسان، رابط کاربری را مستقیماً از روی اسکرینشات نگاه میکنند، تصمیم میگیرند و موس و کیبورد را کنترل میکنند. این درس به پیادهسازی چنین ایجنتهای چندحالتهای برای تعامل با رایانه (Computer-Use) میپردازد.
در این پروژهی پایانی، یاد میگیرید که چطور چرخهی ادراک، استدلال و اقدام را پیادهسازی کنید، خروجیهای ساختاریافتهی JSON برای کلیک و تایپ بسازید و چالش پر شدن پنجرهی زمینه (Context Window) را با راهکارهای مدیریت حافظه برطرف کنید. همچنین رویکرد استفاده از اسکرینشات خالص را در برابر درخت دسترسیپذیری مقایسه میکنیم تا سیستمی پایدار و مقاوم در برابر خطا طراحی کنید.
محصولات پیشرو در سال 2026 ایجنتهای چندحالتهای هستند که اسکرینشاتها را میخوانند، روی دکمهها کلیک میکنند، در رابطهای کاربری وب جابهجا میشوند، فرمها را پر میکنند و جریانهای کاری را از ابتدا تا انتها به سرانجام میرسانند. SeeClick و CogAgent در سال 2024 کارآمدی قابلیت پایهایِ انطباق بصری در رابط کاربری (GUI grounding) را اثبات کردند. مدل Ferret-UI پشتیبانی از موبایل را افزود. ChartAgent استفاده از ابزارهای بصری را برای نمودارها معرفی کرد. VisualWebArena و AgentVista (محصول 2026) بنچمارکهایی هستند که مدلهای مرز دانش در پی فتح آنهایند؛ معیارهایی که حتی Gemini 3 Pro و Claude Opus 4.7 در تسکهای دشوار AgentVista امتیازی حدود 30% کسب میکنند. این پروژهی پایانی تمام مباحث فاز 12 را یکپارچه میکند: ادراک (مدل بینایی-زبانی یا VLM با وضوح بالا)، استدلال (LLM همراه با فراخوانی ابزار)، انطباق بصری (خروجی مختصات)، حافظهی بلندمدت و ارزیابی.
اهداف یادگیری
- طراحی یک حلقهی ایجنت چندحالته: ادراک ← استدلال ← اقدام ← مشاهده ← تکرار.
- ساخت یک اسکیمای خروجی برای انطباق بصری رابط کاربری (مختصات کلیک، تایپ متن، اسکرول، کشیدن و رها کردن) که VLM بتواند آن را در قالب JSON تولید کند.
- مقایسهی ایجنتهای مبتنی بر اسکرینشاتِ صرف در برابر ایجنتهای متکی به درخت دسترسیپذیری و ایجنتهای ترکیبی (Hybrid).
- راهاندازی فرایند ارزیابی بنچمارک ایجنت چندحالته روی برشی کوچک از VisualWebArena.
صورت مسئله
یک سناریو در سایت رزرو بلیت: «یک پرواز به مقصد توکیو برای 15 آوریل با صندلی کنار راهرو و قیمت زیر 800 دلار برایم پیدا کن و بخرش.»
یک ایجنت چندحالته باید مراحل زیر را طی کند:
- از مرورگر اسکرینشات بگیرد.
- اسکرینشات، آدرس وب (URL) و هدف نهایی را تحلیل کند و برنامهای بچیند.
- یک اقدام ساختاریافته صادر کند: کلیک در مختصات (x, y)، تایپ عبارت «Tokyo» روی المان E، اسکرول به پایین، یا انتخاب دکمهی رادیویی.
- این اقدام را روی مرورگر اعمال کند.
- وضعیت جدید را بررسی کند (اسکرینشات بعدی).
- این چرخه را تا تکمیل تسک تکرار کند.
هر گام یک فراخوانیِ VLM چندحالته است. خروجی VLM باید بهصورت JSON معتبر و قابل پارس باشد. از آنجا که خطاها در طول مراحل روی هم جمع میشوند، بازیابی و جبران خطا اهمیت حیاتی دارد.
مفاهیم پایه
انطباق بصری در رابط کاربری — سنگ بنای سیستم
انطباق بصری رابط کاربری یعنی مدل با دریافت یک اسکرینشات و دستوری به زبان طبیعی، مختصات (x, y) را برای کلیک کردن (یا هر اقدام دیگری) خروجی دهد.
SeeClick (arXiv:2401.10935) اولین نتیجهی متنباز در مقیاس بزرگ بود: با فاینتیون VLM روی دادههای مصنوعی و واقعیِ رابط کاربری، مدل توانست مختصات را در قالب توکنهای متنی ساده خروجی دهد؛ راهکاری که بهخوبی جواب میدهد.
CogAgent (arXiv:2312.08914) با افزودن انکودینگِ وضوح بالای 1120x1120 برای رابطهای کاربری متراکم، به دقت حدود 84% در پیمایش وب دست یافت.
Ferret-UI (arXiv:2404.05719) بر رابطهای کاربری موبایل تمرکز دارد و با دادههای دسترسیپذیری iOS ادغام میشود.
فرمت خروجی معمولاً ساختار JSON است:
{"action": "click", "x": 384, "y": 220, "element_desc": "Search button"}
فیلد element_desc روند بازیابی از خطا را تسهیل میکند: اگر مختصات بین اسکرینشاتهای پیاپی جابهجا شود، این سرنخ معنایی به سیستم اجازه میدهد هدف را دوباره مکانیابی کند.
اسکیمای اقدام
یک اسکیمای اقدام استاندارد معمولاً شامل 6 تا 10 نوع اقدام است:
click: (x, y)type: (text, x?, y?)scroll: (direction, amount)drag: (x0, y0, x1, y1)select: (option_index)hover: (x, y)navigate: (url)wait: (ms)done: (success, explanation)
ایجنت در هر مرحله یک اقدام صادر میکند؛ پوستهی مرورگر آن را اجرا میکند و وضعیت جدید را برمیگرداند.
اسکرینشاتِ صرف در برابر درخت دسترسیپذیری
ایجنتها دو حالت ورودی دارند:
- اسکرینشاتِ صرف: تصویر کامل و بدون اطلاعات ساختاری. عمومیترین روش است و روی هر برنامهای کار میکند.
- درخت دسترسیپذیری (Accessibility tree): ساختار سلسلهمراتبی DOM وب یا اطلاعات دسترسیپذیری iOS. برای انطباق و مکانیابی المانها بسیار مطمئنتر عمل میکند؛ البته فقط در محیطهایی کاراست که این ساختار در دسترس باشد.
- روش ترکیبی: استفادهی همزمان از هر دو؛ درخت دسترسیپذیری برای انطباق دقیق در اقدامات اتمیک بهکار میرود و اسکرینشات زمینهی معنایی را فراهم میکند.
ایجنتهای تجاری در صورت امکان از روش ترکیبی بهره میبرند. در خودکارسازی مرورگر (ترکیب Selenium و دسترسیپذیری) همیشه ساختار درختی در دسترس است؛ اما در برنامههای دسکتاپ گاهی این دادهها وجود دارند.
حافظهی بلندمدت
یک جریان کاری 20 مرحلهای، 20 اسکرینشات تولید میکند و پنجرهی زمینهی VLM خیلی زود پر میشود. سه استراتژی فشردهسازی در این مواقع وجود دارد:
- زنجیرهی خلاصه (Summary-chain): هر 5 گام یکبار اتفاقات رخداده را خلاصه کنید و اسکرینشاتهای قدیمی را کنار بگذارید.
- رد کردن فریمها (Skip-frame): اسکرینشات اول، آخر و یکیدرمیان هر 3 فریم را نگه دارید.
- لاگ ثبتشده با ابزار: اقدامات را اجرا کنید و گزارش متنی کارهای انجامشده را نگه دارید؛ نیازی نیست اسکرینشاتهای قدیمی را دوباره ببینید.
رابط برنامهنویسی استفاده از رایانه (Computer-use API) در Claude از الگوی لاگ استفاده میکند که سادهتر و قابلاعتمادتر است.
استفاده از ابزارهای بصری
پروژهی ChartAgent (arXiv:2510.04514) استفاده از ابزارهای بصری را برای درک نمودارها معرفی کرد: برش تصویر (Crop)، بزرگنمایی (Zoom)، نویسهخوان نوری (OCR) و فراخوانی ابزارهای بیرونیِ تشخیص. ایجنت در این سناریو میتواند اقدامی مثل «برش کادر (100, 200, 300, 400) و سپس اجرای OCR» را در قالب یک فراخوانی ابزار خروجی دهد. ابزار، متن استخراجشده را بازمیگرداند و VLM فرایند استدلال را پی میگیرد.
این الگو تعمیمپذیر است: پرامپتنویسی نشانهگذاری مجموعهای (Set-of-mark)، علامتگذاری ناحیهای و ابزارهای بیرونی تشخیص، همگی از همان الگوی «خروجی فراخوانی ابزار ← دریافت پاسخ ساختاریافته» پیروی میکنند.
بنچمارکهای سال 2026
- ScreenSpot-Pro: ارزیابی انطباق بصری در رابط کاربری روی حدود 1000 اسکرینشات وب. مدل متنباز پیشرو Qwen2.5-VL-72B به دقت حدود 85% و مدلهای مرز دانش به حدود 90% میرسند.
- VisualWebArena: تسکهای سرتاسری وب (فروشگاه آنلاین، انجمن، سایتهای آگهی). مدل متنباز پیشرو به حدود 20% و Gemini 3 Pro به حدود 27% میرسند.
- AgentVista (arXiv:2602.23166): سختترین بنچمارک سال 2026 با سناریوهای کاری واقعی در 12 حوزهی مختلف. مدلهای مرز دانش در آن به دقت 27 تا 40 درصد و مدلهای متنباز به 10 تا 20 درصد میرسند.
- WebArena و WebShop: بنچمارکهای قدیمیتر که مدلهای مرز دانش به سرحد اشباع آنها رسیدهاند.
چرا این مسئله هنوز دشوار است؟
گلوگاههای عملکردی ایجنتها عبارتاند از:
- انطباق بصری در مقیاسهای ریز: کلیک روی یک آیکون ضربدرِ کوچک در وضوح موبایل معمولاً با شکست مواجه میشود.
- برنامهریزی در افقهای طولانی: پس از گذشت 10 اقدام، ایجنت معمولاً از هدف اصلی منحرف میشود.
- بازیابی از خطا: وقتی یک کلیک شکست میخورد (کلیک روی دکمهی اشتباه)، ایجنتها بهندرت دادههای آموزشی مناسبی برای تشخیص و جبران این شکست در اختیار دارند.
- حفظ زمینه میان صفحات مختلف: جابهجایی میان تبهای مختلف یا پر کردن فرمهای طولانی، وضعیت فعلی را مخدوش میکند.
مسیرهای پژوهشی فعلی: معماریهای حافظه، بازبرنامهریزی صریح (Explicit replanning) و اعتبارسنجی چندحالته (تطبیق اسکرینشات برای اطمینان از موفقیت اقدام).
پروژهی عملی پایانی
مسئلهی پروژهی پایانی: ساخت یک ایجنت کار با رایانه که:
- کدهای HTML و اسکرینشات یک صفحهی شبیهسازیشدهی رزرو بلیت را بخواند.
- توالی چندمرحلهای را برنامهریزی کند: جستوجو ← انتخاب ← تکمیل فرم ← ارسال.
- اقداماتی در قالب JSON و منطبق بر اسکیمای اقدام خروجی دهد.
- عملکرد را روی برشی ثابت از 10 تسک مشخص ارزیابی کند.
این درس کدهای داربستی آمادهای فراهم میکند که بهسادگی قابل گسترش و اتصال به یک مرورگر واقعی است.
استفاده از ابزار
فایل code/main.py ساختار پایهی این پروژه است:
- تعریف اسکیمای JSON اقدامات (10 اقدام: 9 اقدام ذکرشده بهعلاوهی
screenshot_regionکه ابزار برش و بزرگنمایی است). - وضعیت شبیهسازیشدهی مرورگر در قالب dict.
- اسکلت حلقهی ایجنت: دریافت وضعیت، صدور اقدام، اعمال، تکرار حلقه.
- بنچمارک کوچک با 10 تسک (صفحات ساختگی) برای اندازهگیری نرخ موفقیت سرتاسری.
- هوک جبران خطا (Error-recovery hook) برای مواقعی که اقدام با شکست مواجه میشود.
تحویل نهایی
این درس فایل outputs/skill-multimodal-agent-designer.md را تولید میکند. با دریافت مشخصات یک محصول کار با رایانه (دامنه، مجموعهی اقدامات و هدف ارزیابی)، این ابزار تمام حلقهی ایجنت، استراتژی حافظه، حالت انطباق بصری و امتیاز تخمینی در بنچمارکها را طراحی میکند.
تمرینها
-
اسکیمای کد یک ابزار
screenshot_region(برش و بزرگنمایی) به 9 اقدام اصلی اضافه میکند. این ابزار به درد چه تسکهایی میخورد؟ -
مقالهی AgentVista (arXiv:2602.23166) را بخوانید. سختترین دستهی تسکها را شرح دهید و بگویید چرا مدلهای مرز دانش هنوز در آن شکست میخورند.
-
فشردهسازی حافظهی بلندمدت: یک زنجیرهی خلاصه بهگونهای طراحی کنید که حداکثر 4 اسکرینشات فعال بماند ولی لاگ اقدامات بدون محدودیت ثبت شود.
-
یک هوک جبران خطا بسازید: هنگام شکست اقدام (مثلاً پیدا نشدن دکمه)، ایجنت در گام بعدی چه کاری باید انجام دهد؟
-
مدل Claude 4.7 را با ورودیِ اسکرینشاتِ صرف، با مدل ترکیبی Qwen2.5-VL (اسکرینشات بههمراه درخت دسترسیپذیری) در 10 تسک وب مقایسه کنید. هر مدل در کدام تسکها برنده میشود؟
اصطلاحات کلیدی
| Term | What people say | What it actually means |
|---|---|---|
| GUI grounding | "Click coordinates" | صدور مختصات (x,y) توسط مدل در پاسخ به یک دستور روی اسکرینشات |
| Action schema | "Tool definitions" | توصیف JSON اقدامات مجاز (کلیک، تایپ، اسکرول، کشیدن و رها کردن) |
| Accessibility tree | "Structured DOM" | سلسلهمراتب رابط کاربری با قابلیت خوانش ماشینی از طریق رابطهای مرورگر یا iOS |
| Hybrid agent | "Screenshot + tree" | استفادهی همزمان از تصویر و اطلاعات ساختاری؛ بسیار مطمئنتر از هرکدام بهتنهایی |
| Visual tool use | "Zoom/crop/detect" | فراخوانی ابزارهای بینایی بیرونی (مانند OCR یا تشخیص شیء) در میانهی فرایند استدلال توسط ایجنت |
| Summary-chain | "Memory compression" | خلاصهسازی متنی و دورهای رویدادها بهجای نگهداری تاریخچهی طولانی اسکرینشاتها |
| VisualWebArena | "E2E web bench" | بنچمارک سال 2024 برای ارزیابی تسکهای سرتاسری در محیط وب |
| AgentVista | "2026 hard bench" | سناریوهای واقعی در 12 حوزهی مختلف که حتی Gemini 3 Pro به دقت حدود 30% در آن میرسد |
