Skip to content

वेब एजेंट एनोटेशन

Potato में वेब-ब्राउज़िंग एजेंट के ट्रेस की समीक्षा करें, फ़िल्मस्ट्रिप नेविगेशन, SVG ओवरले (क्लिक, बाउंडिंग बॉक्स, माउस पथ) और प्रति-चरण एनोटेशन नियंत्रणों के साथ।

v2.4.0 में नया

वेब ब्राउज़ करने वाले AI एजेंट का मूल्यांकन करने के लिए यह देखना पड़ता है कि एजेंट ने ठीक-ठीक क्या देखा, कहाँ क्लिक किया, और हर चरण का कोई तुक बनता था या नहीं। Potato इसके लिए एक अलग वेब एजेंट ट्रेस व्यूअर देता है, जिसके दो मोड हैं: पहले से रिकॉर्ड किए गए ट्रेस की समीक्षा, और लाइव वेबसाइट ब्राउज़ करके नए ट्रेस बनाना।

सार

मोडकब इस्तेमाल करें
समीक्षा मोडआपके पास WebArena, Mind2Web, Anthropic Computer Use, या Potato के अपने रिकॉर्डर से पहले से रिकॉर्ड किए ट्रेस हैं
निर्माण मोडआप चाहते हैं कि एनोटेटर वेबसाइट ब्राउज़ करें और नए इंटरैक्शन ट्रेस रिकॉर्ड करें

समीक्षा मोड

एनोटेटर एजेंट के ब्राउज़िंग सत्र के स्क्रीनशॉट एक-एक करके देखते हैं। SVG ओवरले हर स्क्रीनशॉट के ऊपर क्लिक चिह्न, बाउंडिंग बॉक्स, माउस पथ और स्क्रॉल संकेतक बनाते हैं।

कॉन्फ़िगरेशन

yaml
instance_display:
  fields:
    - key: steps
      type: web_agent_trace
      label: "Agent Browsing Trace"
      display_options:
        show_overlays: true
        show_filmstrip: true
        show_thought: true
        show_observation: true
        show_element_info: true
        screenshot_max_width: 800
        screenshot_max_height: 600
        filmstrip_size: 80

डेटा फ़ॉर्मैट

हर इंस्टेंस में प्रति-चरण डेटा वाला एक steps ऐरे होना चाहिए:

json
{
  "id": "trace_001",
  "task_description": "Find and add a blue wool sweater to cart",
  "site": "amazon.com",
  "steps": [
    {
      "step_index": 0,
      "screenshot_url": "screenshots/step_000.png",
      "action_type": "click",
      "element": {
        "tag": "input",
        "text": "Search",
        "bbox": [340, 45, 680, 75]
      },
      "coordinates": {"x": 510, "y": 60},
      "mouse_path": [[200, 300], [350, 200], [510, 60]],
      "thought": "I need to search for blue wool sweaters",
      "observation": "Search box is focused",
      "timestamp": 1.2,
      "viewport": {"width": 1280, "height": 720}
    }
  ]
}

समर्थित क्रिया प्रकार

क्रियाओवरले
clickक्रॉसहेयर और पल्स एनिमेशन वाला लाल घेरा
typeलक्ष्य तत्व पर पीला हाइलाइट
scrollहरा दिशासूचक तीर
hoverबैंगनी घेरा
selectनीला बाउंडिंग बॉक्स
navigateकोई ओवरले नहीं
waitकोई ओवरले नहीं
doneकोई ओवरले नहीं

कीबोर्ड शॉर्टकट

कुंजीक्रिया
/ पिछला / अगला चरण
1क्लिक चिह्न ओवरले चालू-बंद करें
2बाउंडिंग बॉक्स ओवरले चालू-बंद करें
3माउस पथ ओवरले चालू-बंद करें
4स्क्रॉल संकेतक चालू-बंद करें
Aसारे ओवरले दिखाएँ
Nसारे ओवरले छिपाएँ

प्रति-चरण एनोटेशन

किसी भी एनोटेशन योजना में per_step: true जोड़ने पर हर चरण के साथ इनलाइन एनोटेशन नियंत्रण दिखने लगते हैं:

yaml
annotation_schemes:
  - annotation_type: radio
    name: step_correctness
    per_step: true
    labels:
      - name: correct
      - name: incorrect
      - name: unnecessary
  - annotation_type: text
    name: step_notes
    per_step: true
    label: "Notes on this step"

प्रति-चरण एनोटेशन {scheme_name}_step_{index} के रूप में सहेजे जाते हैं (जैसे step_correctness_step_0)।

निर्माण मोड

एनोटेटर Potato इंटरफ़ेस के भीतर ही एक लाइव वेबसाइट ब्राउज़ करते हैं और उनके इंटरैक्शन अपने आप एनोटेशन के लिए तैयार ट्रेस के रूप में रिकॉर्ड हो जाते हैं।

कॉन्फ़िगरेशन

yaml
instance_display:
  fields:
    - key: browsing_session
      type: web_agent_recorder
      display_options:
        start_url: "https://www.google.com"
        proxy_mode: auto
        record_mouse_path: true
        record_viewport: true
        screenshot_method: server
        max_steps: 50

प्रॉक्सी मोड

मोडविवरण
auto (डिफ़ॉल्ट)पता लगाता है कि लक्ष्य साइट iframe में एम्बेड होने देती है या नहीं, और अपने आप सबसे ठीक मोड चुन लेता है
iframeiframe प्रॉक्सी लागू करता है; लगभग 90% साइटों पर 100ms से कम ओवरहेड के साथ काम करता है
playwrightसर्वर-साइड Playwright लागू करता है; सभी साइटों पर काम करता है, इसके लिए playwright पैकेज चाहिए

Playwright मोड चालू करने के लिए:

bash
pip install playwright
playwright install chromium

मौजूदा ट्रेस को बदलना

दूसरे फ़्रेमवर्क के ट्रेस को Potato के फ़ॉर्मैट में लाने के लिए ट्रेस कन्वर्टर CLI इस्तेमाल करें:

bash
# Convert from a specific format
python -m potato.trace_converter -i traces.json -f web_agent -o output.jsonl
 
# Auto-detect format
python -m potato.trace_converter -i traces.json --auto-detect -o output.jsonl

समर्थित इनपुट फ़ॉर्मैट: WebArena, VisualWebArena, Mind2Web, Anthropic Computer Use, और कच्ची Potato रिकॉर्डिंग।

पूरा उदाहरण

yaml
task_name: "Web Agent Evaluation"
task_dir: "."
 
data_files:
  - "traces.jsonl"
 
instance_display:
  fields:
    - key: task_description
      type: text
      label: "Task"
    - key: steps
      type: web_agent_trace
      label: "Agent Trace"
      display_options:
        show_overlays: true
        show_filmstrip: true
        show_thought: true
 
annotation_schemes:
  - annotation_type: radio
    name: task_success
    question: "Did the agent complete the task successfully?"
    labels:
      - name: "Yes"
      - name: "Partially"
      - name: "No"
  - annotation_type: radio
    name: step_correctness
    question: "Was this step correct?"
    per_step: true
    labels:
      - name: correct
      - name: incorrect
      - name: unnecessary
  - annotation_type: text
    name: error_description
    question: "Describe any errors in the agent's behavior"
 
output_annotation_dir: "output/"
output_annotation_format: "jsonl"

उदाहरण परियोजनाएँ चलाना

bash
# Review Mode
python potato/flask_server.py start examples/agent-traces/web-agent-review/config.yaml -p 8000
 
# Creation Mode
python potato/flask_server.py start examples/agent-traces/web-agent-creation/config.yaml -p 8000

API संदर्भ

निर्माण मोड इस्तेमाल करते समय ये REST एंडपॉइंट उपलब्ध रहते हैं:

एंडपॉइंटमेथडविवरण
/api/web_agent/start_sessionPOSTरिकॉर्डिंग सत्र शुरू करता है
/api/web_agent/save_stepPOSTरिकॉर्ड किया गया इंटरैक्शन चरण सहेजता है
/api/web_agent/save_screenshotPOSTकिसी चरण के लिए स्क्रीनशॉट अपलोड करता है
/api/web_agent/end_sessionPOSTसत्र ख़त्म करके ट्रेस सहेजता है
/api/web_agent/proxy/{url}GETकिसी बाहरी URL को सर्वर के ज़रिए प्रॉक्सी करता है
/api/web_agent/check_frameableGETजाँचता है कि कोई URL iframe में एम्बेड होने देता है या नहीं

आगे पढ़ें

कार्यान्वयन के विवरण के लिए स्रोत दस्तावेज़ देखें।