توصيف وكلاء تصفح الويب: من مسارات WebArena إلى التقييم البشري
كيفية استخدام عرض مسار وكيل الويب في Potato لتقييم وكلاء تصفح الويب المستقلة، مع لقطات شاشة خطوة بخطوة وتراكبات SVG ومخططات توصيف لكل خطوة.
توصيف وكلاء تصفح الويب: من مسارات WebArena إلى التقييم البشري
تعمل وكلاء تصفح الويب في وسيط مختلف جذرياً عن الوكلاء النصية. إنها تتنقل في صفحات ويب حقيقية، وتنقر الأزرار، وتملأ النماذج، وتتصفح المحتوى. يتطلب تقييمها رؤية ما رآه الوكيل (حالة الصفحة) وما فعله الوكيل (الإجراء المُتخذ)، ويُفضّل مع تراكبات بصرية تُظهر بالضبط أين نقر الوكيل.
عرض مسار وكيل الويب في Potato مصمم خصيصاً لهذه المهمة. يعرض لقطات شاشة كاملة الصفحة مع تراكبات إجراءات SVG، ويوفر عرض شريط صور مصغرة للتنقل السريع، ويدعم توصيف لكل خطوة لصحة الإجراء.
يرشدك هذا الدليل خلال تقييم مسارات WebArena، لكن نفس النهج يعمل مع VisualWebArena وتسجيلات المتصفح الخام وأي تنسيق وكيل ويب آخر.
المتطلبات الأساسية
pip install potato-annotationستحتاج ملفات مسارات WebArena، التي تتضمن عادةً لقطات شاشة وسجل إجراءات JSON. إذا كنت تعمل مع VisualWebArena، فالتنسيق مشابه لكن قد يتضمن معلومات ربط بصري إضافية.
الخطوة 1: فهم تنسيق مسار WebArena
يتكون مسار WebArena من ملف JSON لكل حلقة يحتوي على وصف المهمة وتسلسل الإجراءات ومسارات لقطات الشاشة. إليك مثالاً مبسطاً.
أنشئ data/web_traces.jsonl:
{
"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:
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: سير عمل التوصيف
سير عمل نموذجي لتقييم مسار وكيل ويب:
-
اقرأ وصف المهمة. افهم ما كان يُفترض أن ينجزه الوكيل.
-
استخدم شريط الصور المصغرة لنظرة عامة. تصفح سريعاً جميع لقطات الشاشة لفهم مسار الوكيل قبل تقييم الخطوات الفردية.
-
تنقل عبر كل خطوة:
- انظر إلى لقطة الشاشة لفهم حالة الصفحة
- تحقق من تراكب SVG لرؤية ما نقره الوكيل
- اقرأ وصف الإجراء
- قيّم الإجراء كصحيح أو مقبول أو غير صحيح أو غير ضروري
- إذا كان غير صحيح، اختر نوع(أنواع) الخطأ
-
قيّم المسار ككل. بعد مراجعة جميع الخطوات، قيّم نجاح المهمة والكفاءة.
-
أرسل وانتقل إلى المسار التالي.
ما يجب البحث عنه
الإجراءات الصحيحة تقرّب الوكيل من الهدف بطريقة معقولة. نقر الوكيل العنصر الصحيح أو انتقل للصفحة الصحيحة أو أدخل المعلومات الصحيحة.
الإجراءات المقبولة ليست الخيار الأمثل لكنها تحرز تقدماً. مثلاً، يتصفح الوكيل صفحة فئة بدلاً من استخدام شريط البحث -- أبطأ، لكن لا يزال مجدياً.
الإجراءات غير الصحيحة هي أخطاء: نقر العنصر الخطأ، الانتقال لصفحة غير ذات صلة، أو إدخال معلومات خاطئة في نموذج.
الإجراءات غير الضرورية لا تسهم في الهدف: نقر شيء ثم العودة فوراً، التمرير متجاوزاً الهدف، أو الانتقال لصفحات غير ذات صلة.
الخطوة 5: تصنيف الأخطاء
يتضمن Potato تصنيفاً مخصصاً للأخطاء لإجراءات وكيل الويب. إليك كيفية تطبيق كل فئة:
| نوع الخطأ | الوصف | مثال |
|---|---|---|
| نقر عنصر خاطئ | نقر الوكيل عنصر واجهة غير صحيح | نقر "أجهزة لوحية" بدلاً من "حواسيب محمولة" |
| انتقال لصفحة خاطئة | وصل الوكيل لصفحة غير ذات صلة | انتقل لـ "من نحن" بدلاً من قائمة المنتجات |
| فوّت خياراً أقرب/أفضل | كان هناك إجراء أفضل متاح | استخدم تصفح الفئات بدلاً من شريط البحث |
| إدخال نموذج غير صحيح | أدخل الوكيل نصاً خاطئاً في نموذج | بحث عن "labtop" بدلاً من "laptop" |
| إكمال مبكر للمهمة | أعلن الوكيل النجاح مبكراً | أضاف المنتج الخطأ للسلة وتوقف |
| تنقل غير ضروري | الخطوة لا تسهم في الهدف | زار الصفحة الرئيسية بين صفحات الفئات |
| فشل في التمرير للهدف | الهدف كان أسفل منطقة العرض | العنصر لم يكن مرئياً؛ كان على الوكيل التمرير |
| تفاعل مع قسم خاطئ | الصفحة صحيحة لكن المنطقة خاطئة | نقر الرأس بدلاً من المحتوى الرئيسي |
الخطوة 6: التعامل مع المسارات المعقدة
المسارات الطويلة (15+ خطوة)
للمسارات الطويلة، استخدم شريط الصور المصغرة لتحديد الخطوات المشبوهة أولاً. ابحث عن:
- خطوات حيث يتغير URL بشكل غير متوقع (تنقل خاطئ)
- خطوات حيث يبدو أن الوكيل يعود للخلف
- لقطات شاشة مكررة مشابهة (الوكيل عالق في حلقة)
ثم ركّز توصيفك المفصل على تلك الخطوات.
المسارات الفاشلة
للمسارات التي يفشل فيها الوكيل، حدد أول خطوة غير صحيحة -- هذا هو التوصيف الأكثر قيمة لتحسين الوكيل. حددها بوضوح واصف ما كان يجب على الوكيل فعله بدلاً من ذلك.
الإجراءات الغامضة
بعض الإجراءات صعبة الحكم دون معرفة محتوى الصفحة الكامل. إذا كان لقطة DOM متاحة، فعّلها:
web_agent_display:
show_dom_snapshot: trueهذا يضيف لوحة قابلة للطي تُظهر HTML الخام، مما يساعد عندما تكون لقطة الشاشة وحدها غامضة (مثل نقر الوكيل في منطقة بها عناصر متداخلة متعددة).
الخطوة 7: الإعداد لـ VisualWebArena
تتضمن مسارات VisualWebArena معلومات ربط بصري إضافية. الإعداد مشابه لكن يستخدم تراكب الربط البصري:
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: تحليل النتائج
صحة الإجراء حسب موقع الخطوة
غالباً ما تتجمع أخطاء وكيل الويب في نقاط محددة في المسار. حلّل أين تحدث الأخطاء:
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)")توزيع أنواع الأخطاء
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}")معدل النجاح حسب الموقع
# 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: توسيع التقييم
مُوصِّفون متعددون مع اتفاق
للأوراق البحثية، عيّن عدة مُوصِّفين لكل مسار:
annotation_task_config:
total_annotations_per_instance: 3
assignment_strategy: randomاحسب اتفاق المُوصِّفين على تسمية نجاح المهمة:
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+ مسار)، استخدم الوضع الفردي لترك نموذج اللغة يتولى المسارات السهلة:
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 وتسجيلات المتصفح الخام
المفتاح لتقييم وكيل الويب الفعّال هو التراكب البصري: بدون رؤية بالضبط أين نقر الوكيل، لا يمكن للمُقيّمين الحكم على صحة الإجراء بشكل موثوق.
قراءة إضافية
- توثيق التوصيف الوكيلي -- مرجع الإعدادات الكامل
- تقييم وكلاء الذكاء الاصطناعي -- دليل تقييم الوكلاء العام
- الوضع الفردي -- وسّع التقييم بالتعاون بين الإنسان ونموذج اللغة
- تصدير Parquet -- صدّر النتائج للتحليل