ملخص تقني: VisRefiner

1. بيان المشكلة

تتضمن مهمة توليد الكود من لقطات الشاشة (Screenshot-to-Code Generation) ترجمة لقطات شاشة لواجهات المستخدم (UI) الثابتة إلى كود أمامي (frontend) قابل للتنفيذ (مثل HTML/CSS) يعيد إنتاج التخطيط والنمط المستهدف بدقة. وبينما أظهرت النماذج اللغوية الكبيرة متعددة الوسائط (MLLMs) الحديثة قدرات شاملة في هذا المجال، إلا أنها تعتمد عادةً على رسم خرائط إشرافية أحادية الاتجاه من التصاميم إلى الكود. ويتمثل أحد القيود الحرجة لهذه النهج الحالية في أن النماذج تُدرب دون ملاحظة النتائج المرئية للكود الذي تولده. وبناءً على ذلك، فهي تفتقر إلى القدرة على تعلم كيفية ربط الاختلافات المرئية المحددة بالتغييرات البرمجية اللازمة.

في المقابل، يستخدم المطورون البشريون عملية رندرة–مقارنة–تنقيح (render–compare–revise) تكرارية: حيث يقومون برندرة التنفيذ، ومقارنته بالتصميم، وتحديد التناقضات المرئية، ثم تنقيح الكود الأساسي. لا تستوعب الأنظمة القائمة على MLLM هذه الآلية، حيث تعامل الاختلافات المرئية كمجرد إشارات تشخيصية خارجية بدلاً من كونها إشارات تعلم داخلية.

2. المنهجية: VisRefiner

لمعالجة هذه الفجوة، يقترح المؤلفون VisRefiner، وهو إطار عمل تدريبي مصمم لتمكين نماذج MLLM من التعلم مباشرة من الاختلافات المرئية بين التوقعات المُرندرة والتصاميم المرجعية. ينقل هذا الإطار النموذج من التنبؤ الأمامي (feed-forward) إلى التعلم المدفوع بالاختلاف عبر مرحلتين متميزتين:

أ. الإشراف المتوافق مع الاختلاف (المرحلة 1)

تنشئ هذه المرحلة ارتباطاً صريحاً بين التناقضات المرئية الملحوظة وتحديثات الكود المحددة المطلوبة لحلها.

• بناء البيانات (VisDiffUI): أنشأ المؤلفون مجموعة بيانات، VisDiffUI، تحتوي على أمثلة مقترنة من الانحرافات المرئية وتعديلات الكود المقابلة لها. تم اشتقاق هذه المجموعة من مصادر عامة (Vision2UI، WebSight) وتعزيزها عبر طريقتين:
  1. الاضطرابات القائمة على القواعد: تقوم مكتبة من القواعد بتعديل رموز HTML/CSS لمحاكاة عدم اتساق واجهة المستخدم الموضعي عبر ستة أبعاد: اللون، التخطيط، المحاذاة، المكون، الصورة، والنص.
  2. العيوب المتوقعة من النموذج: يتم دمج المخرجات غير المكتملة من نماذج المراحل السابقة مع الحقائق الأرضية (ground truths) لالتقاط العيوب الواقعية (مثل الحاويات غير الموضحة بشكل صحيح، أو الأغلفة الزائدة) التي يصعب تصنيعها عبر القواعد.
• هدف التدريب: يتم تدريب النموذج على التنبؤ بالكود المنقح ($C_{t+1}$) بناءً على لقطة الشاشة المستهدفة ($I_{gt}$)، والكود الحالي ($C_t$)، والصورة المُرندرة للكود الحالي ($I_t$). يقلل الهدف من احتمالية اللوغاريتم السالب:
  $$L_{SFT} = -\log P_\theta(C_{t+1} | I_t, I_{gt}, C_t)$$
  وهذا يرسخ فهم النموذج لكيفية تأثير تغييرات التنفيذ على المظهر المرئي.

ب. التعلم التعزيزي مع التنقية الذاتية (المرحلة 2)

بناءً على الأساس الإشرافي، تمكن هذه المرحلة النموذج من تنقية مخرجاته من خلال التغذية الراجعة المرئية باستخدام تحسين السياسة النسبي للمجموعات (GRPO).

• قياس التحسن: تم تعريف درجة التحسن النسبي (RIS) بناءً على التشابه الإدراكي المستند إلى CLIP. وهي تقيس التقدم النسبي في تقليل الاختلاف المرئي بين الرندرة الحالية والهدف، مع تطبيع القيم لضمان ثبات المقياس.
• تصميم المكافأة: توجه دالة مكافأة مركبة عملية التحسين:
  1. مكافأة التنسيق ($r_{format}$): تعاقب الكود غير الصحيح برمجياً.
  2. مكافأة التنقية ($r_{improve}$): تمنح إشارة إيجابية إذا أدت الرندرة الجديدة إلى تحسين التشابه المرئي.
  3. مكافأة الجودة ($r_{quality}$): تستخدم قيمة RIS المستمرة لقياس درجة التحسن.
• التحسين: يولد النموذج متغيرات كود مرشحة، ويرندرها، ويحدث سياسته بناءً على الميزة النسبية للمجموعة من المكافآت، مما يشجع على الاستنتاج التكراري واستيعاب سلوك التنقية.

3. المساهمات الرئيسية

1. إطار عمل VisRefiner: نموذج تدريبي جديد يدمج التغذية الراجعة المرئية مباشرة في عملية التدريب، مما يسمح لنماذج MLLM بتعلم كيفية تأثير تعديلات الكود على النتائج المرئية.
2. مجموعة بيانات VisDiffUI: مجموعة بيانات متخصصة ومسار بيانات يربط الاختلافات المرئية بتعديلات الكود المقابلة، مما يوفر مورداً لدراسة الارتباطات بين المظهر والتنفيذ.
3. التحقق التجريبي: تجارب واسعة النطاق تثبت أن VisRefiner يحقق تحسينات ثابتة في الدقة المرئية، ومحاذاة التخطيط، وقدرة التنقية الذاتية عبر اختبارات متعددة.

4. النتائج التجريبية

قيم المؤلفون VisRefiner (تحديداً نسخة بـ 7 مليارات معلمة) مقابل نماذج مملوكة (GPT-4o، Claude 3.5 Sonnet) ونماذج مفتوحة المصدر (Qwen2.5-VL، MiMo-VL) على Design2Code، و Design2Code-HARD، و VisDiffUI-Test المستبعدة.

• التوليد في خطوة واحدة: حقق VisRefiner-7B دقة قوية في الخطوة الواحدة، متفوقاً على نموذج Qwen2.5-VL-72B الذي يمتلك 72 مليار معلمة في اختبار Design2Code-HARD الصعب (85.6 مقابل 80.8 متوسط الدرجة) وتجاوز GPT-4o في المحاذاة الهيكلية (مطابقة الكتل: 78.1 مقابل 56.6).
• استقرار التنقية الذاتية: على عكس النماذج المرجعية حيث غالباً ما تؤدي التنقية إلى نتائج غير متسقة (أحياناً تؤدي لتراجع الأداء)، أظهر VisRefiner مكاسب ثابتة عبر جميع مجموعات البيانات وأنماط التنقية.
• دراسات الاستئصال (Ablation Studies):
  • SFT كمحرك: تم تحديد الضبط الدقيق الإشرافي (SFT) على أزواج متوافقة مع الاختلاف كعامل أساسي في تحسين الجودة الهيكلية والمرئية (مثل محاذاة الموضع واتساق الألوان).
  • GRPO كمنقٍ: وفر GRPO تحسينات إضافية تدريجية، خاصة في المقاييس الدقيقة، ولكنه اعتمد على الأساس المدرك للاختلاف الذي بناه SFT.
• التقييم البشري: وجد المقيمون البشريون أن VisRefiner-7B أظهر "تنقية مدروسة ونشطة"، مما قلل بشكل كبير من حالات "التعادل" (حيث لم يتم إجراء أي تغيير) مقارنة بالنماذج الأساسية. وبينما أدى ذلك إلى زيادة طفيفة في معدل "الخسارة" (مما يشير إلى تعديلات نشطة ولكنها غير ناجحة أحياناً)، إلا أنه أكد قدرة النموذج على الانخراط في تصحيح غير بديهي بدلاً من الإحجام المتحفظ.
• تحليل تعدد الدورات: بينما تذبذبت الأداء في تنقية تعدد الدورات، استمرت النتائج المفلترة (اختيار أفضل مخرج عبر الدورات) في التحسن، مما يشير إلى أن النموذج يستكشف مسارات تصحيح متنوعة.

5. الأهمية والادعاءات

يزعم البحث أن VisRefiner يمثل تحولاً في توليد الكود من لقطات الشاشة من مهمة تنبؤ أمامي بحت إلى نموذج تعلم مدفوع بالاختلاف. ومن خلال التعلم من الاختلافات المرئية، يمنح هذا الإطار النماذج عملية استنتاج أكثر شبهاً بالبشر، حيث يفهم النموذج الرابط السببي بين تعديلات الكود والنتائج المرئية.

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