Skip to content
Guides10 min read

توصيف وكلاء تصفح الويب: من مسارات WebArena إلى التقييم البشري

كيفية استخدام عرض مسار وكيل الويب في Potato لتقييم وكلاء تصفح الويب المستقلة، مع لقطات شاشة خطوة بخطوة وتراكبات SVG ومخططات توصيف لكل خطوة.

Potato Team·

توصيف وكلاء تصفح الويب: من مسارات WebArena إلى التقييم البشري

تعمل وكلاء تصفح الويب في وسيط مختلف جذرياً عن الوكلاء النصية. إنها تتنقل في صفحات ويب حقيقية، وتنقر الأزرار، وتملأ النماذج، وتتصفح المحتوى. يتطلب تقييمها رؤية ما رآه الوكيل (حالة الصفحة) وما فعله الوكيل (الإجراء المُتخذ)، ويُفضّل مع تراكبات بصرية تُظهر بالضبط أين نقر الوكيل.

عرض مسار وكيل الويب في Potato مصمم خصيصاً لهذه المهمة. يعرض لقطات شاشة كاملة الصفحة مع تراكبات إجراءات SVG، ويوفر عرض شريط صور مصغرة للتنقل السريع، ويدعم توصيف لكل خطوة لصحة الإجراء.

يرشدك هذا الدليل خلال تقييم مسارات WebArena، لكن نفس النهج يعمل مع VisualWebArena وتسجيلات المتصفح الخام وأي تنسيق وكيل ويب آخر.


المتطلبات الأساسية

bash
pip install potato-annotation

ستحتاج ملفات مسارات WebArena، التي تتضمن عادةً لقطات شاشة وسجل إجراءات JSON. إذا كنت تعمل مع VisualWebArena، فالتنسيق مشابه لكن قد يتضمن معلومات ربط بصري إضافية.


الخطوة 1: فهم تنسيق مسار WebArena

يتكون مسار WebArena من ملف JSON لكل حلقة يحتوي على وصف المهمة وتسلسل الإجراءات ومسارات لقطات الشاشة. إليك مثالاً مبسطاً.

أنشئ data/web_traces.jsonl:

json
{
  "trace_id": "wa_001",
  "task": "Find the cheapest laptop on the electronics store and add it to the cart",
  "website": "shopping",
  "steps": [
    {
      "step": 0,
      "url": "http://shop.example.com/",
      "action_type": "click",
      "action_target": "Electronics category link",
      "element_id": "nav-electronics",
      "coordinates": [245, 82],
      "screenshot": "screenshots/wa_001_step_00.png",
      "dom_snapshot": "dom/wa_001_step_00.html"
    },
    {
      "step": 1,
      "url": "http://shop.example.com/electronics",
      "action_type": "click",
      "action_target": "Laptops subcategory",
      "element_id": "cat-laptops",
      "coordinates": [180, 310],
      "screenshot": "screenshots/wa_001_step_01.png"
    },
    {
      "step": 2,
      "url": "http://shop.example.com/electronics/laptops",
      "action_type": "click",
      "action_target": "Sort by: Price Low to High",
      "element_id": "sort-price-asc",
      "coordinates": [720, 155],
      "screenshot": "screenshots/wa_001_step_02.png"
    },
    {
      "step": 3,
      "url": "http://shop.example.com/electronics/laptops?sort=price_asc",
      "action_type": "click",
      "action_target": "First laptop: 'Budget Pro 14' - $349",
      "element_id": "product-101",
      "coordinates": [400, 380],
      "screenshot": "screenshots/wa_001_step_03.png"
    },
    {
      "step": 4,
      "url": "http://shop.example.com/product/101",
      "action_type": "click",
      "action_target": "Add to Cart button",
      "element_id": "add-to-cart-btn",
      "coordinates": [650, 520],
      "screenshot": "screenshots/wa_001_step_04.png"
    }
  ],
  "success": true,
  "final_screenshot": "screenshots/wa_001_final.png"
}

كل خطوة تحتوي على لقطة شاشة والإجراء المُتخذ والعنصر المستهدف وإحداثيات النقر. يستخدم Potato هذه المعلومات لعرض تراكبات بصرية.


الخطوة 2: إعداد المشروع

أنشئ config.yaml:

yaml
task_name: "WebArena Agent Evaluation"
task_dir: "."
 
data_files:
  - "data/web_traces.jsonl"
 
item_properties:
  id_key: trace_id
  text_key: task
 
# --- Agentic annotation with web display ---
agentic:
  enabled: true
  trace_converter: webarena
  display_type: web_agent
 
  web_agent_display:
    # Screenshot rendering
    screenshot_max_width: 900
    screenshot_quality: 85
 
    # SVG overlays
    overlay:
      enabled: true
      click_marker: "circle"
      click_color: "#ef4444"
      click_radius: 20
      type_highlight: "#3b82f6"
      scroll_indicator: true
 
    # Filmstrip navigation
    filmstrip:
      enabled: true
      thumbnail_width: 150
      show_action_labels: true
 
    # Additional display options
    show_url_bar: true
    show_action_description: true
    show_dom_snapshot: false
 
# --- Annotation Schemas ---
annotation_schemes:
  # Overall task evaluation
  - annotation_type: radio
    name: task_success
    description: "Did the agent complete the task successfully?"
    labels:
      - "Success"
      - "Partial Success"
      - "Failure"
    label_requirement:
      required: true
 
  - annotation_type: radio
    name: task_efficiency
    description: "Was the agent's navigation path efficient?"
    labels:
      - "Optimal path"
      - "Reasonable but not optimal"
      - "Inefficient (unnecessary steps)"
      - "Completely wrong direction"
    label_requirement:
      required: true
 
  # Per-step evaluation
  - annotation_type: per_turn_rating
    name: action_correctness
    target: agentic_steps
    description: "Was this action correct?"
    rating_type: radio
    labels:
      - "Correct"
      - "Acceptable (not optimal but progresses toward goal)"
      - "Incorrect"
      - "Unnecessary"
 
  - annotation_type: per_turn_rating
    name: action_error_type
    target: agentic_steps
    description: "What went wrong?"
    rating_type: multiselect
    labels:
      - "Wrong element clicked"
      - "Wrong page navigated to"
      - "Missed a closer/better option"
      - "Incorrect form input"
      - "Premature task completion"
      - "Unnecessary navigation"
      - "Failed to scroll to target"
      - "Interaction with wrong page section"
      - "Other"
    conditional:
      show_when:
        action_correctness: ["Incorrect", "Unnecessary"]
 
  - annotation_type: per_turn_rating
    name: action_notes
    target: agentic_steps
    description: "Notes on this step"
    rating_type: text
    label_requirement:
      required: false
 
output_annotation_dir: "output/"
output_annotation_format: "jsonl"
 
parquet_export:
  enabled: true
  output_dir: "output/parquet/"

الخطوة 3: فهم عرض وكيل الويب

عندما تفتح مساراً، يعرض عرض وكيل الويب:

عرض لقطة الشاشة الرئيسي

تُعرض لقطة شاشة الخطوة الحالية بعرض كامل (حتى 900 بكسل). يُرسم تراكب SVG فوقها:

  • دائرة حمراء عند إحداثيات النقر، تُظهر بالضبط أين نقر الوكيل
  • تمييز أزرق حول حقول إدخال النص حيث كتب الوكيل
  • مؤشر سهم لإجراءات التمرير يُظهر الاتجاه والحجم

أسفل لقطة الشاشة، ترى:

  • شريط URL يُظهر رابط الصفحة في هذه الخطوة
  • وصف الإجراء (مثل "انقر على 'رابط فئة الإلكترونيات' عند الإحداثيات [245, 82]")

شريط الصور المصغرة

في أسفل العرض، يُظهر شريط صور مصغرة أفقي صوراً مصغرة لجميع لقطات الشاشة. كل صورة مصغرة عليها تسمية صغيرة تشير إلى نوع الإجراء (نقر، كتابة، تمرير). انقر أي صورة مصغرة للانتقال إلى تلك الخطوة.

شريط الصور المصغرة قيّم خاصةً للمسارات الطويلة (10+ خطوات) حيث سيكون التمرير عبر العرض الرئيسي مملاً.

التوصيف لكل خطوة

بجانب كل لقطة شاشة، تظهر عناصر تحكم التوصيف لكل خطوة. قيّم الإجراء، وإذا كان غير صحيح، اختر نوع الخطأ.


الخطوة 4: سير عمل التوصيف

سير عمل نموذجي لتقييم مسار وكيل ويب:

  1. اقرأ وصف المهمة. افهم ما كان يُفترض أن ينجزه الوكيل.

  2. استخدم شريط الصور المصغرة لنظرة عامة. تصفح سريعاً جميع لقطات الشاشة لفهم مسار الوكيل قبل تقييم الخطوات الفردية.

  3. تنقل عبر كل خطوة:

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

  5. أرسل وانتقل إلى المسار التالي.

ما يجب البحث عنه

الإجراءات الصحيحة تقرّب الوكيل من الهدف بطريقة معقولة. نقر الوكيل العنصر الصحيح أو انتقل للصفحة الصحيحة أو أدخل المعلومات الصحيحة.

الإجراءات المقبولة ليست الخيار الأمثل لكنها تحرز تقدماً. مثلاً، يتصفح الوكيل صفحة فئة بدلاً من استخدام شريط البحث -- أبطأ، لكن لا يزال مجدياً.

الإجراءات غير الصحيحة هي أخطاء: نقر العنصر الخطأ، الانتقال لصفحة غير ذات صلة، أو إدخال معلومات خاطئة في نموذج.

الإجراءات غير الضرورية لا تسهم في الهدف: نقر شيء ثم العودة فوراً، التمرير متجاوزاً الهدف، أو الانتقال لصفحات غير ذات صلة.


الخطوة 5: تصنيف الأخطاء

يتضمن Potato تصنيفاً مخصصاً للأخطاء لإجراءات وكيل الويب. إليك كيفية تطبيق كل فئة:

نوع الخطأالوصفمثال
نقر عنصر خاطئنقر الوكيل عنصر واجهة غير صحيحنقر "أجهزة لوحية" بدلاً من "حواسيب محمولة"
انتقال لصفحة خاطئةوصل الوكيل لصفحة غير ذات صلةانتقل لـ "من نحن" بدلاً من قائمة المنتجات
فوّت خياراً أقرب/أفضلكان هناك إجراء أفضل متاحاستخدم تصفح الفئات بدلاً من شريط البحث
إدخال نموذج غير صحيحأدخل الوكيل نصاً خاطئاً في نموذجبحث عن "labtop" بدلاً من "laptop"
إكمال مبكر للمهمةأعلن الوكيل النجاح مبكراًأضاف المنتج الخطأ للسلة وتوقف
تنقل غير ضروريالخطوة لا تسهم في الهدفزار الصفحة الرئيسية بين صفحات الفئات
فشل في التمرير للهدفالهدف كان أسفل منطقة العرضالعنصر لم يكن مرئياً؛ كان على الوكيل التمرير
تفاعل مع قسم خاطئالصفحة صحيحة لكن المنطقة خاطئةنقر الرأس بدلاً من المحتوى الرئيسي

الخطوة 6: التعامل مع المسارات المعقدة

المسارات الطويلة (15+ خطوة)

للمسارات الطويلة، استخدم شريط الصور المصغرة لتحديد الخطوات المشبوهة أولاً. ابحث عن:

  • خطوات حيث يتغير URL بشكل غير متوقع (تنقل خاطئ)
  • خطوات حيث يبدو أن الوكيل يعود للخلف
  • لقطات شاشة مكررة مشابهة (الوكيل عالق في حلقة)

ثم ركّز توصيفك المفصل على تلك الخطوات.

المسارات الفاشلة

للمسارات التي يفشل فيها الوكيل، حدد أول خطوة غير صحيحة -- هذا هو التوصيف الأكثر قيمة لتحسين الوكيل. حددها بوضوح واصف ما كان يجب على الوكيل فعله بدلاً من ذلك.

الإجراءات الغامضة

بعض الإجراءات صعبة الحكم دون معرفة محتوى الصفحة الكامل. إذا كان لقطة DOM متاحة، فعّلها:

yaml
web_agent_display:
  show_dom_snapshot: true

هذا يضيف لوحة قابلة للطي تُظهر HTML الخام، مما يساعد عندما تكون لقطة الشاشة وحدها غامضة (مثل نقر الوكيل في منطقة بها عناصر متداخلة متعددة).


الخطوة 7: الإعداد لـ VisualWebArena

تتضمن مسارات VisualWebArena معلومات ربط بصري إضافية. الإعداد مشابه لكن يستخدم تراكب الربط البصري:

yaml
agentic:
  enabled: true
  trace_converter: webarena         # same converter handles both
  display_type: web_agent
 
  web_agent_display:
    screenshot_max_width: 1000
    overlay:
      enabled: true
      click_marker: "crosshair"     # crosshair is better for precise grounding
      click_color: "#ef4444"
      click_radius: 15
      bounding_box: true            # show element bounding box if available
      bounding_box_color: "#f59e0b"
    filmstrip:
      enabled: true
      thumbnail_width: 180

الخطوة 8: تحليل النتائج

صحة الإجراء حسب موقع الخطوة

غالباً ما تتجمع أخطاء وكيل الويب في نقاط محددة في المسار. حلّل أين تحدث الأخطاء:

python
import pandas as pd
import json
 
annotations = []
with open("output/annotations.jsonl") as f:
    for line in f:
        annotations.append(json.loads(line))
 
# Collect per-step correctness by position
step_errors = {}
for ann in annotations:
    correctness = ann["annotations"].get("action_correctness", {})
    for step_idx, label in correctness.items():
        pos = int(step_idx)
        if pos not in step_errors:
            step_errors[pos] = {"Correct": 0, "Acceptable": 0, "Incorrect": 0, "Unnecessary": 0}
        step_errors[pos][label] += 1
 
# Print error rate by step position
print("Error rate by step position:")
for pos in sorted(step_errors.keys()):
    counts = step_errors[pos]
    total = sum(counts.values())
    error_rate = (counts["Incorrect"] + counts["Unnecessary"]) / total
    print(f"  Step {pos}: {error_rate:.1%} error rate ({total} observations)")

توزيع أنواع الأخطاء

python
error_counts = {}
for ann in annotations:
    errors = ann["annotations"].get("action_error_type", {})
    for step_idx, error_list in errors.items():
        for error in error_list:
            error_counts[error] = error_counts.get(error, 0) + 1
 
print("\nError Type Distribution:")
for error, count in sorted(error_counts.items(), key=lambda x: -x[1]):
    print(f"  {error}: {count}")

معدل النجاح حسب الموقع

python
# If traces span multiple websites
website_success = {}
for ann in annotations:
    # Assuming website info is in the original trace data
    success = ann["annotations"]["task_success"]
    website = ann.get("metadata", {}).get("website", "unknown")
    if website not in website_success:
        website_success[website] = {"Success": 0, "Partial Success": 0, "Failure": 0}
    website_success[website][success] += 1
 
for website, counts in website_success.items():
    total = sum(counts.values())
    rate = counts["Success"] / total
    print(f"{website}: {rate:.1%} success rate")

الخطوة 9: توسيع التقييم

مُوصِّفون متعددون مع اتفاق

للأوراق البحثية، عيّن عدة مُوصِّفين لكل مسار:

yaml
annotation_task_config:
  total_annotations_per_instance: 3
  assignment_strategy: random

احسب اتفاق المُوصِّفين على تسمية نجاح المهمة:

python
from sklearn.metrics import cohen_kappa_score
import pandas as pd
 
df = pd.read_parquet("output/parquet/annotations.parquet")
success = df[df["schema_name"] == "task_success"]
pivot = success.pivot(index="instance_id", columns="annotator", values="value")
 
# Pairwise kappa
annotators = pivot.columns.tolist()
for i in range(len(annotators)):
    for j in range(i + 1, len(annotators)):
        mask = pivot[[annotators[i], annotators[j]]].dropna()
        kappa = cohen_kappa_score(mask[annotators[i]], mask[annotators[j]])
        print(f"Kappa ({annotators[i]} vs {annotators[j]}): {kappa:.3f}")

الدمج مع الوضع الفردي

للتقييمات واسعة النطاق (500+ مسار)، استخدم الوضع الفردي لترك نموذج اللغة يتولى المسارات السهلة:

yaml
solo_mode:
  enabled: true
  llm:
    endpoint_type: openai
    model: "gpt-4o"
    api_key: ${OPENAI_API_KEY}
  accuracy_threshold: 0.90
 
agentic:
  enabled: true
  trace_converter: webarena
  display_type: web_agent

يقيّم الإنسان المسارات الصعبة؛ ويتولى نموذج اللغة حالات النجاح المباشرة والفشل الواضح.


الملخص

يتطلب تقييم وكلاء تصفح الويب رؤية بالضبط ما رآه الوكيل وفعله. يوفر عرض وكيل الويب في Potato:

  • لقطات شاشة كاملة مع تراكبات SVG تحدد أهداف النقر وحقول الإدخال وإجراءات التمرير
  • تنقل بشريط الصور المصغرة للنظرة العامة السريعة والوصول العشوائي للخطوات
  • شريط URL يتتبع مسار تنقل الوكيل
  • توصيف لكل خطوة مع تصنيف أخطاء مخصص للويب
  • إعداد مرن لـ WebArena وVisualWebArena وتسجيلات المتصفح الخام

المفتاح لتقييم وكيل الويب الفعّال هو التراكب البصري: بدون رؤية بالضبط أين نقر الوكيل، لا يمكن للمُقيّمين الحكم على صحة الإجراء بشكل موثوق.


قراءة إضافية