Phase 12: Multimodal AI

मल्टीमोडल एजेंट और कंप्यूटर-उपयोग (कैपस्टोन)

2026 फ्रंटियर उत्पाद एक मल्टीमोडल एजेंट है जो स्क्रीनशॉट पढ़ता है, बटन पर क्लिक करता है, वेब यूआई पर नेविगेट करता है, फ़ॉर्म भरता है और वर्कफ़्लो को अंत से अंत तक पूरा करता है। SeeClick और CogAgent (2024) ने GUI-ग्राउंडिंग आदिम साबित किया। Ferret-UI मोबाइल जोड़ा. चार्टएजेंट ने चार्ट के लिए दृश्य उपकरण का उपयोग शुरू किया। VisualWebArena और AgentVista (2026) सीमाओं के पीछे पड़ने वाले बेंचमार्क हैं और यहां तक कि Gemini 3 Pro और Claude Opus 4.7 एजेंटविस्टा के कठिन कार्यों पर ~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

सीखने के लक्ष्य

मल्टीमोडल एजेंट लूप डिजाइन करेंः perceive → reason → act → observe → repeat।
एक GUI ग्राउंडिंग आउटपुट योजना (क्लिक निर्देशांक, टाइप पाठ, स्क्रॉल, ड्रैग) का निर्माण करें जो VLM JSON के रूप में emit कर सकता है।
केवल स्क्रीनशॉट एजेंटों बनाम पहुंच-वृक्ष एजेंटों बनाम हाइब्रिड एजेंटों की तुलना करें।
VisualWebArena के छोटे से स्लाइस पर मल्टीमोडल एजेंट बेंचमार्क मूल्यांकन सेट करें।

समस्या

बुकिंग साइट वर्कफ़्लोः "मुझे 15 अप्रैल को टोक्यो जाने वाली उड़ान ढूंढो, 800 डॉलर से कम की गलियारा सीट, बुक करो।"

एक बहु-मोडल एजेंट को चाहिएः

ब्राउज़र का स्क्रीनशॉट लें।
स्क्रीनशॉट + URL + लक्ष्य को एक योजना में पार्स करें।
एक संरचित क्रिया करेंः क्लिक करें (x,y पर), टाइप करें "टोक्यो" (एलिमेंट E पर), नीचे स्क्रॉल करें, चयन करें (रेडियो बटन) ।
ब्राउज़र पर कार्रवाई लागू करें।
नई स्थिति का अवलोकन करें (अगली स्क्रीनशॉट)
कार्य पूरा होने तक दोहराएं।

प्रत्येक चरण एक बहुआयामी VLM कॉल है। VLM आउटपुट को JSON पार्स करने योग्य होना चाहिए। चरणों में त्रुटियां मिश्रित होती हैं, इसलिए पुनर्प्राप्ति महत्वपूर्ण है।

अवधारणा

जीयूआई ग्राउंडिंग आदिम

जीयूआई ग्राउंडिंग हैः स्क्रीनशॉट और प्राकृतिक भाषा निर्देश दिए जाने पर, क्लिक करने के लिए (x, y) निर्देशांक (या अन्य क्रिया) आउटपुट करें।

SeeClick (arXiv:2401.10935) पैमाने पर पहला खुला परिणाम थाः सिंथेटिक + वास्तविक GUI डेटा पर एक VLM को ठीक से ट्यून करना, सादे पाठ टोकन के रूप में आउटपुट निर्देशांक। काम करता है।

CogAgent (arXiv:2312.08914) ने घने UI के लिए 1120x1120 उच्च-रिज़ॉल्यूशन एन्कोडिंग जोड़ा। वेब नेविगेशन पर स्कोरः ~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 चरणों के बाद, जो हुआ है उसका सारांश दें, पुराने स्क्रीनशॉट छोड़ दें।
स्किप-फ्रेम: पहला, अंतिम, और हर तीसरे स्क्रीनशॉट रखें।
उपकरण रिकॉर्ड लॉगः कार्य निष्पादित करें, किए गए कार्यों का पाठ लॉग रखें; पुराने स्क्रीनशॉट को फिर से न देखें।

क्लाउड के कंप्यूटर उपयोग एपीआई लॉग पैटर्न का उपयोग करता है. सरल, अधिक विश्वसनीय.

दृश्य उपकरण का उपयोग

ChartAgent (arXiv:2510.04514) चार्ट समझने के लिए दृश्य उपकरण का उपयोग करता हैः फसल, ज़ूम, ओसीआर, कॉल बाहरी पता लगाने। एजेंट "क्षेत्र (100, 200, 300, 400) में फसल निकाल सकता है और फिर ओसीआर को उपकरण कॉल के रूप में कॉल कर सकता है। उपकरण पाठ लौटाता है; वीएलएम तर्क जारी रखता है।

यह पैटर्न सामान्यीकरण करता हैः सेट-ऑफ-मार्क प्रॉम्प्टिंग, क्षेत्र एनोटेशन, और बाहरी पता लगाने के उपकरण सभी एक ही "आउटपुट एक टूल कॉल, प्राप्त एक संरचित प्रतिक्रिया" योजना फिट।

2026 के बेंचमार्क

स्क्रीनस्पॉट-प्रो. 1k वेब स्क्रीनशॉट पर जीयूआई ग्राउंडिंग. ओपन SOTA Qwen2.5-VL-72B ~85%. फ्रंटियर ~90%.
VisualWebArena. अंत-से-अंत वेब कार्य (दुकान, मंच, वर्गीकृत विज्ञापन) । SOTA ~ 20% खोलें। Gemini 3 Pro ~ 27% ।
एजेंटविस्टा (arXiv:2602.23166). सबसे कठिन 2026 बेंचमार्क। 12 डोमेन में यथार्थवादी कार्यप्रवाह। फ्रंटियर मॉडल 27-40%; ओपन मॉडल 10-20% स्कोर करते हैं।
वेबअरेना / वेबशॉप. पुराने बेंचमार्क; सीमा से संतृप्त।

क्यों यह अभी भी कठिन है

एजेंट के प्रदर्शन में बाधाएंः

"छोटे एक्स पर क्लिक करें" अक्सर मोबाइल रिज़ॉल्यूशन में विफल रहता है।
10 कार्य के बाद एजेंट लक्ष्य से बह जाता है।
त्रुटि वसूली. जब एक क्लिक विफल होता है (गलत बटन), पता लगाने + वसूली शायद ही कभी प्रशिक्षित डेटा है।
पृष्ठों के पार से संदर्भ। टैब या लंबे फॉर्म के बीच कूदने से स्थिति गायब हो जाती है।

अनुसंधान दिशाएँः मेमोरी आर्किटेक्चर, स्पष्ट पुनर्प्रयोजन, मल्टीमोडल सत्यापन (कार्य सफलता के लिए स्क्रीनशॉट मैच) ।

कपास्टोन इसे बनाने के लिए

मुख्य कार्यः एक कंप्यूटर उपयोग एजेंट का निर्माण करना जोः

बुकिंग साइट के नकली पृष्ठ का HTML + स्क्रीनशॉट पढ़ता है।
एक बहु-चरण अनुक्रम की योजना बनाता हैः खोज → चयन → भरें फॉर्म → प्रस्तुत करें।
कार्रवाई योजना से मेल खाने वाली JSON क्रियाएँ जारी करता है।
एक स्थिर 10 कार्य स्लाइस पर मूल्यांकन करता है।

पाठ में एक स्केफॉल्ड कोड उपलब्ध है जिसे वास्तविक ब्राउज़र में विस्तारित करना आसान है।

इसका प्रयोग करें

code/main.pyहै कपास्टोन स्टेफल्डः

एक्शन स्कीम JSON परिभाषा (10 एक्शन)
फ़ॉक ब्राउज़र स्टेटस के रूप में डिक्टेट।
एजेंट लूप कंकालः प्राप्त राज्य, निष्कासन कार्रवाई, लागू, लूप।
अंत-से-अंत सफलता दर को मापने के लिए 10-कार्य मिनी बेंचमार्क (संश्लेषण पृष्ठ) ।
त्रुटि-पुनर्प्राप्ती हुक जब एक कार्रवाई विफल रहता है के लिए।

इसे भेजें

यह सबक हमें फल देता हैoutputs/skill-multimodal-agent-designer.md. कंप्यूटर उपयोग के उत्पाद (डोमेन, एक्शन सेट, मूल्यांकन लक्ष्य) को देखते हुए, पूर्ण एजेंट लूप, मेमोरी रणनीति, ग्राउंडिंग मोड और अपेक्षित बेंचमार्क स्कोर का डिजाइन करता है।

व्यायाम

कार्य योजना को एक के साथ बढ़ाएँscreenshot_regionउपकरण (फसल + ज़ूम) । कौन से कार्य लाभदायक हैं?

एजेंटविस्टा (arXiv:2602.23166) पढ़ें। सबसे कठिन कार्य श्रेणी का वर्णन करें और किन किनारे मॉडल अभी भी विफल रहते हैं।

दीर्घ क्षितिज स्मृति संपीड़नः एक संक्षिप्त श्रृंखला डिजाइन करें जिसमें ≤4 स्क्रीनशॉट लाइव रखे जाएं, कोई भी संख्या लॉग इन की जाए।

त्रुटि-पुनर्प्राप्ती हुक बनाएंः कार्रवाई विफलता (बटन नहीं मिला), एजेंट आगे क्या करता है?

केवल स्क्रीनशॉट क्लाउड 4.7 की तुलना 10 वेब कार्यों पर हाइब्रिड स्क्रीनशॉट + एक्सेसिबिलिटी ट्री Qwen2.5 -VL से करें। कौन सा कार्य किस कार्य पर जीतता है?

प्रमुख शर्तें

Term	What people say	What 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.