MT-Web2Code: Benchmarking Coding Agents on Multi-Turn Regional Reconstruction and Localized Modification
تقدم هذه الورقة MT-Web2Code، وهو أول معيار متعدد الوسائط مصمم لتقييم وكلاء البرمجة في مهام واجهة مستخدم الويب الواقعية متعددة الأدوار التي تتضمن إعادة البناء الإقليمي والتعديلات الموضعية، مما يكشف عن قيود كبيرة في قدرة الوكلاء الحاليين على الحفاظ على الدقة ومنع تراكم الأخطاء عبر الأدوار التكرارية.
تخيل أنك تعلم روبوتاً ليكون مصمماً بارعاً للمواقع الإلكترونية. في الماضي، كنا نختبر هذه الروبوتات عبر منحها لوحة بيضاء وصورة لموقع إلكتروني، ونطلب منها بناء الموقع بأكمله من الصفر في خطوة واحدة. كان الأمر يشبه مطالبة طاهٍ بطهي وجبة كاملة مكونة من خمسة أطباق في لحظة واحدة. لكن في العالم الحقيقي، نادراً ما يكون تصميم المواقع درامياً بهذا الشكل. عادةً ما يقوم المطور بفتح موقع موجود بالفعل، ليجد زراً معطلاً، أو يصلح خطاً غريباً، أو يضيف صورة مفقودة، كل ذلك مع التأكد من أنه لن يحذف بقية الصفحة عن طريق الخطأ. إنه أشبه بلعبة "أوجد الفروق" و"أصلح الخلل" التي تُلعب مراراً وتكراراً. هذا هو عالم "البرمجة التكرارية"، حيث يتعين على الروبوت أن يتذكر ما فعله قبل خمس دقائق وألا يفسد الأمور أثناء إصلاح المشكلة الجديدة. السؤال الكبير الذي يطرحه الباحثون هو: هل يمكن لروبوتات الذكاء الاصطناعي الأكثر ذكاءً لدينا التعامل مع هذا الواقع الفوضوي والتدريجي، أم أنها تعمل جيداً فقط عندما تُمنح صفحة بيضاء نظيفة؟
هذا هو بالضبط ما تبحث فيه ورقة "MT-Web2Code". فقد ابتكر المؤلفون اختباراً جديداً كلياً وشديد التحدي يسمى "MT-Web2Code" ليروا مدى براعة وكلاء البرمجة المعتمدين على الذكاء الاصطناعي في أسلوب العمل هذا القائم على "الإصلاح أولاً بأول". فبدلاً من طلب بناء صفحة كاملة من الذكاء الاصطناعي، أعطوه 102 صفحة ويب مختلفة من 16 فئة مختلفة (مثل مواقع التسوق، والأخبار، والمواقع الحكومية) وطلبوا منه تنفيذ نوعين محددين من المهام عبر جولات متعددة. المهمة الأولى هي "إعادة البناء الإقليمي"، وهي تشبه إخبار الروبوت: "مهلاً، هذا الجزء الكامل من الصفحة مفقود؛ إليك صورة لما يجب أن يكون عليه، يرجى إعادة بناء هذا الجزء فقط دون المساس بالباقي". أما المهمة الثانية فهي "التعديل الموضعي"، وهي أكثر صعوبة: "هناك ثلاثة أشياء صغيرة تبدو خاطئة (ربما لون الزر خاطئ أو الخط سميك جداً)؛ يرجى إصلاح تلك النقاط الصغيرة فقط".
ولجعل هذا الاختبار عادلاً ويستحيل التحايل عليه، ابتكر الباحثون محرك "الفساد العكسي" الذكي. تخيل أنهم أخذوا موقعاً إلكترونياً مثالياً وذهبياً، ثم أفسدوه عمداً بطرق محددة — مثل إخفاء قسم كامل أو تخريب بعض الخطوط. ثم سجلوا بالضبط كيف قاموا بإفساده. مهمة الذكاء الاصطناعي هي عكس هذه العملية: النظر إلى الصفحة المعطلة، ومعرفة ما هو الخطأ، وإصلاحها لتعود إلى حالتها المثالية. ولأن الباحثين يعرفون بالضبط كيف تم إفساد الصفحة، يمكنهم قياس نجاح الذكاء الاصطناعي بدقة متناهية. وقد وجدوا أنه بينما تتحسن روبوتات الذكاء الاصطناعي هذه، إلا أنها لا تزال تعاني بشدة في هذه اللعبة متعددة الجولات.
كانت النتائج بمثابة صدمة للواقع. فعندما حاول الذكاء الاصطناعي إعادة بناء منطقة مفقودة، غالباً ما كان يؤدي عملاً جيداً في الجزء الجديد، لكنه كان يفسد المحتوى المحيط به عن طريق الخطأ، مثل تغيير لون خلفية الصفحة بأكملها بينما كان من المفترض أن يصلح قائمة فقط. وعندما طُلب منه إجراء تعديلات دقيقة وصغيرة، غالباً ما فشلت الروبوتات في مطابقة الكود تماماً مع الإصلاح البصري، مما أظهر افتقارها للتحكم الدقيق. ولعل الأمر الأكثر إثارة للقلق هو أن الورقة وجدت تأثير "كرة الثلج للخطأ". فإذا ارتكب الذكاء الاصطناعي خطأً صغيراً في الجولة الأولى، فإن هذا الخطأ ينتقل ويتضخم في الجولات التالية، مما يجعل النتيجة النهائية أسوأ بكثير مما لو بدأ من جديد في كل مرة. ومن المثير للاهتمام أيضاً أن الباحثين اكتشفوا أن إعطاء الذكاء الاصطناعي وصفاً مكتوباً لما كان يبدو عليه الجزء المعطل لم يساعد دائماً؛ بل في بعض الأحيان، تسبب في إرباك الروبوت، مما جعله يعتمد كثيراً على الكلمات ويتجاهل الصورة الفعلية.
باختصار، تشير هذه الورقة إلى أنه بينما يتفوق الذكاء الاصطناعي في بناء المواقع من الصفر، فإنه لا يزال يتعلم كيف يكون محرراً دقيقاً وتكرارياً. وهي توضح أن كونك جيداً في أمر ما لا يعني بالضرورة أنك جيد في الآخر. ويأمل المؤلفون أنه من خلال استخدام نظام تسجيلهم الجديد فائق الدقة — الذي يفحص الجزء الذي تم إصلاحه والأجزاء التي لم تُمس أيضاً — يمكنهم المساعدة في تدريب الذكاء الاصطناعي المستقبلي ليصبح مصممي مواقع إلكترونية أكثر موثوقية، يعملون خطوة بخطوة دون كسر بقية المنزل أثناء إصلاح نافذة واحدة.
ملخص تقني: MT-Web2Code
بيان المشكلة
أظهرت التطورات الأخيرة في نماذج الرؤية واللغة الكبيرة (LVLMs) قدرات كبيرة في توليد واجهات المستخدم الويب من الصفر. ومع ذلك، تركز الاختبارات المرجعية الحالية بشكل أساسي على التوليد لصفحة كاملة في دورة واحدة، حيث تتعامل مع كل مهمة كمسألة مستقلة بين المدخلات والمخرجات. هذا الصياغة تفشل في استيعاب واقع هندسة الواجهات الأمامية، حيث ينخرط المطورون في سير عمل تكراري: إعادة بناء المناطق المفقودة وتعديل العناصر الموضعية داخل قواعد الأكواد الموجودة مع الحفاظ على المحتوى غير المتأثر. لا تستطيع الاختبارات المرجعية الحالية تقييم ما إذا كان النموذج يمكنه تعديل صفحة متطورة، أو الحفاظ على الاتساق عبر الدورات، أو منع انتشار الأخطاء. هناك فجوة حرجة بين اختبارات توليد واجهة المستخدم الثابتة والمتطلبات الديناميكية متعددة الدورات في برمجة واجهات المستخدم في العالم الحقيقي.
المنهجية
1. بناء الاختبار المرجعي: MT-Web2Code
يقدم المؤلفون MT-Web2Code، وهو أول اختبار مرجعي للبرمجة متعدد الوسائط مصمم للتفاعلات متعددة الدورات. يضم الاختبار 102 مهمة تغطي 16 مجالاً رأسياً (مثل إدارة علاقات العملاء CRM، تخطيط موارد المؤسسات ERP، التجزئة، والحكومة). يحدد الاختبار مستويين متكاملين من دقة المهام:
إعادة البناء الإقليمي على المستوى الكلي (Macro-Level): يجب على الوكيل إعادة بناء منطقة دلالية كاملة مفقودة من مرجع بصري ودمجها في هيكل الصفحة المحيط بها دون تغيير بقية الصفحة.
التعديل الموضعي على المستوى الجزئي (Micro-Level): يجب على الوكيل إصلاح العيوب الهيكلية والأسلوبية الدقيقة (مثل اللون، المسافات، محاذاة النص) ضمن صناديق محددة مع الحفاظ بصرامة على التخطيط المحيط.
2. توليد البيانات: محرك مسار الفساد العكسي (Reverse-Corruption Trajectory Engine)
لبناء مسارات إصلاح عالية الجودة وحتمية متعددة الدورات دون الحاجة إلى تعليقات بشرية مكلفة على مستوى الدورات، طور المؤلفون محرك مسار الفساد العكسي:
العملية: بدءاً من "الصفحة الذهبية" (H0)، يقوم المحرك بحقن عيوب هيكلية وأسلوبية حتمية بشكل تكراري لإنشاء تسلسل من الحالات الفاسدة (H1,…,HT). وتتمثل مهمة الوكيل في عكس هذا المسار بشكل تلقائي التكرار (autoregressively).
بصمة العناصر (Element Fingerprinting): لتتبع العناصر عبر التعديلات المتتالية رغم إعادة تدفق نموذج كائن المستند (DOM reflow)، يقوم النظام بتعيين بصمات عناصر (hashes للوسم، والنص، والسمات) غير مرتبطة بالموقع للعقد في HTML. تسمح هذه المعرفات للنظام بتتبع المناطق المستهدفة وأقرب أشقائها الباقين بشكل حتمي، مما يضمن أن "الحقيقة الأرضية" لكل دورة محددة بشكل فريد.
تصنيف العيوب: يتم إنشاء العيوب على المستوى الجزئي باستخدام 9 عوامل تشغيل ذرية عبر 5 أبعاد إدراكية (التخطيط، العناصر، النص، اللون، المسافات)، مما يضمن الاستقلال الطوبولوجي بين العقد المستهدفة لمنع فشل الإصلاح المتتالي.
3. بروتوكول التقييم: مقاييس ثنائية المحور
يقترح البحث بروتوكول تقييم ثنائي المحور يقيس بشكل منفصل دقة المنطقة المستهدفة (داخل الصندوق) والحفاظ على المحتوى غير المتأثر (خارج الصندوق):
المستوى الكلي (الإقليمي): يستخدم معياراً يعتمد على نموذج لغة بصري (VLM) مكون من 5 أبعاد (التخطيط، العناصر، النص، اللون، المسافات) لتقييم المنطقة المعاد بناؤها إدراكياً. ويتم تقييم الصفحة المحيطة بحثاً عن أي إعادة تدفق أو إعادة تنسيق عرضي.
المستوى الجزئي (الموضعي): يستخدم محاذاة حتمية قائمة على البكسل. يتم تحديد بصمة الإصلاح كقناع فرق البكسل بين الصفحات الذهبية والفاسدة. تُقاس الدقة عبر التشابه الهيكلي (SSIM) داخل البصمة، بينما يُقاس الحفاظ عبر SSIM خارج البصمة، مع استكمال ذلك بعقوبة حساسة للألوان.
الدرجة الموحدة: تجمع الدرجة النهائية بين مقاييس داخل الصندوق وخارج الصندوق بوزن قدره 0.8×Sinbox+0.2×Soutbox.
النتائج الرئيسية
قام المؤلفون بتقييم 13 وكيلاً برمجياً رائدًا (بما في ذلك Gemini، Claude، GPT، Kimi، GLM، Qwen، وسلسلة Doubao) على MT-Web2Code. تكشف التجارب عن ثلاث محدودات ثابتة:
الصعوبة في إعادة البناء الإقليمي الأمين: بينما تظهر الوكلاء إمكانات واعدة، إلا أنهم غالباً ما يفشلون في إعادة بناء المناطق المستهدفة بأمانة مع الحفاظ على الاتساق خارج المنطقة المستهدفة. قد تقدم النماذج الأكبر أحياناً تغييرات تخطيطية عالمية غير ضرورية حتى عند توجيهها صراحةً للحفاظ على المناطق غير المتأثرة.
الافتقار إلى المحاذاة البصرية-البرمجية الدقيقة: في المهام على المستوى الجزئي، تحقق الوكلاء عموماً درجات عالية في الحفاظ على المحتوى المحيط (غالباً >0.95) لكنهم يظهرون تبايناً كبيراً في إصلاح العيوب المحددة. يشير هذا إلى ضعف في التوجيه البصري الدقيق والمحاذاة البرمجية.
تراكم الأخطاء (Error Snowballing): في الإعدادات متعددة الدورات، تُورث الأخطاء التي تحدث في الدورات المبكرة وتتضخم في التعديلات اللاحقة. عندما تُجبر النماذج على التعديل بناءً على مخرجاتها السابقة (التي قد تكون معيبة)، يتدهور الأداء بشكل كبير مقارنة بالسيناريوهات التي تعدل فيها من حالة ذهبية صحيحة.
نتائج ملحوطة:
خصوصية المهمة: الأداء القوي في إعادة البناء الكلي لا يضمن الأداء القوي في التعديل الجزئي (والعكس صحيح). على سبيل المثال، تصدر Gemini-3.5-Flash في المستوى الكلي (65.5)، بينما تصدر Doubao-Seed-2.0-Pro في المستوى الجزئي (83.5).
تأثير الوصف النصي (Caption): أدى تقديم أوصاف نصية للمراجع البصرية إلى نتائج غير متسقة؛ فقد حسّن ذلك بعض النماذج (مثل Gemini-3.5-Flash) ولكنه أدى لتراجع أخرى (مثل Kimi-K2.6)، مما يشير إلى أن الأولويات النصية يمكن أن تتعارض أحياناً مع الأدلة البصرية.
موثوقية الحكم: الوكلاء البرمجيون عالي الأداء ليسوا بالضرورة حكاماً موثوقين؛ حيث أعطت بعض النماذج البرمجية العليا درجات متفائلة للغاية مقارنة بالتقييمات المتوافقة مع البشر.
الأهمية والادعاءات
يزعم البحث أن MT-Web2Code يسد الفجوة بين اختبارات توليد واجهة المستخدم الثابتة والطبيعة التكرارية لتطوير الواجهات الأمامية في العالم الحقيقي. وتتمثل مساهماته الأساسية في:
أول اختبار مرجعي متعدد الدورات: هو أول اختبار مرجعي مخصص لبرمجة واجهة مستخدم الويب التكرارية، يغطي كلاً من إعادة البناء الإقليمي والتعديل الموضعي.
بناء بيانات قابل للتوسع: يتيح محرك مسار الفساد العكسي إنشاء مسارات إصلاح حتمية دون الحاجة إلى تعليقات بشرية مكلفة، مما يوفر حقائق أرضية قابلة لإعادة الإنتاج.
تقييم دقيق: يوفر بروتوكول المحور المزدوج إشارات تغذية راجعة دقيقة تميز بين الإصلاحات الناجحة والأضرار الجانبية، وهي قدرة تفتقر إليها المقاييس العالمية الحالية.
أساس للتدريب: بعيداً عن الاختبار المرجعي، توفر المقاييس الحتمية والقائمة على البكسل والمعايير (rubric) أساساً طبيعياً لـ إشارات المكافأة القابلة للتحقق في التعلم المعزز (RL)، مما يسهل محتملاً تدريب وكلاء برمجة واجهات المستخدم التكرارية المستقبلية دون الاعتماد على بيانات التفضيل البشري.
خلص المؤلفون إلى أن الوكلاء الحاليين، رغم فهمهم البصري القوي، يفتقرون إلى الاتساق والمحاذاة الدقيقة المطلوبة لبرمجة واجهات المستخدم متعددة الدورات طويلة المدى، مما يسلط الض الضوء على اتجاه واضح للبحوث المستقبلية.