Pattern over Pixels: Measuring Pattern Completion Bias in Multimodal Code Generation
تقدم هذه الورقة معياراً يوضح أن النماذج اللغوية الكبيرة متعددة الوسائط تظهر انحيازاً قوياً لإكمال الأنماط عند تحويل لقطات شاشة صفحات الويب إلى كود برمجي، حيث تقوم غالباً باستبدال العناصر المشوهة بصرياً بأنماط واجهة مستخدم متكررة حتى عندما تمتلك القدرة الاستدلالية لتحديد تلك الشذوذات.
المؤلفون الأصليون:Khai-Nguyen Nguyen, Oscar Chaparro, Antonio Mastropaolo
تخيل أنك تعلم روبوتًا كيف يرسم لوحة بناءً على صورة تعرضها عليه. تعطي الروبوت كاميرا ومجموعة من التعليمات: "انظر إلى هذه الصورة وارسم بالضبط ما تراه". في عالم علوم الحاسوب، يسمى هذا "التعلم متعدد الوسائط" (multimodal learning)، حيث يستخدم الكمبيوتر كلاً من "عينيه" (لرؤية الصور) و"دماغه" (لفهم النصوص والبرمجيات). مؤخرًا، أصبحت هذه الروبوتات جيدة جدًا في النظر إلى لقطات شاشة لمواقع الويب وكتابة كود الكمبيوتر (HTML و CSS) اللازم لإعادة بنائها. الأمر يشبه إظهار صورة لمنزل لروبوت، ثم جعل الروبوت يكتب فورًا المخطط الهندسي لبنائه. لكن الجزء الصعب هنا هو أن الروبوتات بارعة أيضًا في تخمين الأنماط. إذا عرضت عليها صفًا من الكرات الحمراء المتطابقة، ثم كرة زرقاء واحدة، فقد تخمن أن الأخيرة ستكون حمراء أيضًا، لمجرد أن "الأحمر" هو النمط الذي تتوقعه. تسأل هذه الورقة البحثية سؤالًا مخيفًا: عندما يرى الروبوت موقعًا إلكترونيًا، هل ينظر حقًا إلى البكسلات (النقاط المكونة للصورة)، أم أنه يكتفي بالتخمين بناءً على ما يعتقد أنه "يجب" أن يكون موجودًا؟
قرر الباحثون وراء هذه الدراسة، خاي نغوين نغوين، وأوسكار تشابارو، وأنتونيو ماستروبولو، اختبار ذلك عبر لعب لعبة "أوجد الفارق" مع أذكى روبوتات الذكاء الاصطناعي المتاحة. لقد صمموا اختبارًا خاصًا يسمى "Pattern2Code". تخيل صفحة ويب مليئة بمجموعة من البطاقات المتطابقة، مثل مجموعة أوراق اللعب. أخذ الباحثون بطاقة واحدة وجعلوها أعرض قليلاً أو غيروا حجم الخط للنص الموجود عليها بشكل سري. ثم عرضوا لقطة الشاشة لهذه المجموعة "المعيبة" قليلًا على خمسة نماذج مختلفة من الذكاء الاصطناعي، وطلبوا منها كتابة الكود الخاص بعرض أو حجم خط تلك البطاقة الغريبة. الخدعة هي أن الكود الذي عُرض عليهم للنظر إليه أظهر أن جميع البطاقات الأخرى لها نفس الحجم، مما خلق نمطًا قويًا.
كانت النتائج تشبه مشاهدة ساحر يعرف الخدعة ولكنه يختار القيام بها على أي حال. كانت نماذج الذكاء الاصطناعي سيئة بشكل مفاجئ في تجاهل النمط. عندما كان التغيير في البطاقة "الغريبة" كبيرًا وواضحًا (مثل بطاقة أعرض بنسبة 20%)، نجح أفضل نموذج ذكاء اصطناعي في إصابة الإجابة الصحيحة بنسبة 69% تقريبًا. ولكن عندما كان التغيير طفيفًا ودقيقًا (مثل حجم خط أكبر قليلاً)، استسلمت النماذج تمامًا عن النظر إلى الصورة. بدلاً من ذلك، كتبوا الكود الذي يقول إن "كل شيء بنسبة 100%"، متطابقين مع النمط، رغم أن الصورة أظهرت بوضوح شيئًا مختلفًا. في الواقع، بالنسبة لتغييرات النص الدقيقة، كانت النماذج مخطئة بنسبة تزيد عن 80%، حيث اتبعت النمط بشكل أعمى بدلاً من اتباع الأدلة البصرية.
وجدت الدراسة أن هذا "العمى عن النمط" (pattern blindness) يزداد سوءًا عندما تكون الصورة صعبة الرؤية بوضوح. إذا أضاف الباحثون "ضجيجًا" بصريًا (مثل كتل رمادية عشوائية) فوق الصورة، زاد ارتباك النماذج وتمسكها بالنمط. كما وجدوا أنه إذا كانت البطاقة الغريبة في منتصف الصف، محاطة ببطاقات عادية، فمن الأسهل على الذكاء الاصطناعي رصدها. ولكن إذا كانت في الطرف تمامًا، فمن المرجح أن يخطئها الذكاء الاصطناعي. ومن المثير للاهتمام أنه حتى عندما كتب نماذج الذكاء الاصطناعي في "عملية تفكيرها" أنها رأت البطاقة الغريبة وحسبت الحجم الصحيح، إلا أنها غالبًا ما تجاهلت حساباتها الرياضية وغيرت إجابتها لتطابق النمط على أي حال. الأمر كما لو أن الروبوت رأى الكرة الزرقاء، وفكر "إنها زرقاء"، ثم قال "مهلًا، الجميع هنا حمراء، لذا سأقول إنها حمراء أيضًا".
خلص الباحثون إلى أنه بينما تعد أدوات الذكاء الاصطناعي هذه مذهلة في ضبط الشكل العام للموقع الإلكتري، إلا أنه لا يمكن الوثوق بها للحصول على التفاصيل الصغيرة والدقيقة دون مراجعة بشرية دقيقة لعملها. وكلما كان التفصيل أكثر دقة، زاد احتمال قيام الذكاء الاصطناعي بـ "الهلوسة" بنمط ليس موجودًا بالفعل. وهذا يشير إلى أنه في الوقت الحالي، يجب أن نتعامل مع الكود الذي يولده الذكاء الاصطناعي كمسودة أولية تحتاج إلى عين بشرية فاحصة لالتقاط الأخطاء الصغيرة التي يميل الروبوت بشدة لتجاهلها.
ملخص تقني: النمط فوق البكسلات: قياس انحياز إكمال النمط في توليد الكود متعدد الوسائط
بيان المشكلة
تُستخدم النماذج اللغوية الكبيرة متعددة الوسائط (MLLMs) بشكل متزايد لترجمة لقطات شاشة صفحات الويب إلى كود أمامي (front-end) قابل للتنفيذ. وبينما تُظهر هذه الأنظمة قدرات قوية في توليد لغة HTML وCSS منطقية عالميًا، تحدد هذه الورقة نمط فشل محددًا: انحياز إكمال النمط البصري.
تتمثل المشكلة الجوهرية في أنه عندما يتعارض انحراف بصري موضعي في لقطة الشاشة مع نمط واجهة مستخدم مهيمن إحصائيًا ومتكرر (على سبيل المثال، بطاقة واحدة أعرض من غيرها في شبكة)، تميل النماذج اللغوية الكبيرة متعددة الوسائط إلى تجاهل الدليل البصري ("البكسلات") والاعتماد على القيمة المتسقة مع النمط الموجود في السياق المحيط ("النمط"). يؤدي هذا إلى كود سليم هيكليًا ولكنه غير أمين بصريًا للمصدر التصميمي، لا سيما بالنسبة للتفاصيل الدقيقة مثل أحجام الخطوط أو اختلافات المسافات الطفيفة. وخلافًا للهلوسة العامة، فإن هذا الانحياز منهجي، مدفوع بميل النموذج لإكمال الأنماط بدلاً من تأصيل التنبؤات في المدخلات البصرية المحددة.
المنهجية
بناء المعيار (Pattern2Code)
قدم المؤلفون Pattern2Code، وهو أول معيار مصمم خصيصًا لقياس انحياز إكمال النمط البصري في عملية توليد "لقطة الشاشة إلى كود".
بيانات المصدر: تم تنسيق المعيار من 30 صفحة ويب حقيقية تم اختيارها من مجموعة بيانات Design2Code، مع تصفيتها للحصول على هياكل واجهة مستخدم متكررة واضحة.
استراتيجية الاضطراب: لكل صفحة ويب، أنشأ المؤلفون حالات محكومة حيث يتم تغيير عنصر واحد بالضبط في نمط متكرر. تمت دراسة عائلتين من الاضطرابات:
أنماط البطاقات الهيكلية: تعديل عرض (width) خاصية CSS المضمنة لبطاقة واحدة في لوحة مكدسة.
أنماط نمط النص: تعديل حجم الخط (font-size) لعنصر نصي واحد في تسلسل.
المتغيرات:
المواقع: تحدث الاضطرابات في الموقع الأول، أو الأوسط، أو الأخير من النمط.
مقاديع التغيير: تم ضبط القيم لتكون 80%، أو 90%، أو 110%، أو 120% من الخط الأساسي (100%).
الظروف البصرية: يتم رندرة (rendering) لقطات الشاشة تحت ظروف قياسية وظروف مغطاة بالضجيج (مستطيلات معتمة عشوائية مضافة لتقليل البروز البصري).
صياغة المهمة: يُعرض على النموذج لقطة شاشة وقطعة كود HTML ناقصة (على سبيل المثال، width: __ !important;). المهمة هي هدف "ملء الفراغ": التنبؤ بقيمة النسبة المئوية المفقودة لإعادة إنشاء العنصر المضطرب المحدد.
إعداد التقييم
النماذج: تم تقييم خمسة نماذج رائدة من النماذج اللغوية الكبيرة متعددة الوسائط المملوكة:
المتخصصة في الكود: Codex-5.3، Opus-4.6.
العامة: ChatGPT-5.3، Sonnet-4.6، Flash-3.0.
المقاييس:
الدقة (Accuracy): الاستعادة الدقيقة للقيمة الأصلية المضطربة.
معدل الانحياز (Bias Rate): تكرار التنبؤ بالقيمة الأساسية المتسقة مع النمط (100%) بدلاً من الدليل البصري.
خطأ آخر (Other Error): التنبؤات التي تنحرف عن الخط الأساسي ولكنها لا تزال تخطئ الهدف الأصلي.
النتائج الرئيسية
1. انتشار الانحياز
تُظهر جميع النماذج الخمسة التي تم تقييمها انحيازًا قويًا نحو إكمال النمط. عندما يتعارض الدليل البصري مع النمط المتكرر، تعود النماذج بشكل ساحق إلى النمط.
أنماط البطاقات (البروز العالي): متوسط معدل الانحياز هو 69.78%. النموذج الأفضل أداءً، Codex-5.3، حقق دقة بنسبة 68.61%، بينما انخفضت دقة النماذج الأخرى إلى أقل من 15%.
أنماط النصوص (البروز المنخفض): يرتفع متوسط معدل الانحياز إلى 80.22%، وينخفض متوسط الدقة إلى 7.89%. وصل نموذج Flash-3.0 إلى معدل انحياز 96.11% في النصوص، مما يعني انهيارًا فعليًا إلى الخط الأساسي.
تدرج البروز: يتم اكتشاف الانحرافات الخشنة على مستوى التخطيط (عرض البطاقة) بشكل أكثر تكرارًا من الانحرافات الدقيقة على مستوى الحروف (حجم الخط).
تأثير الضجيج: يزيد إضافة الضجيج البصري من معدل الانحياز (على سبيل المثال، زاد انحياز البطاقات في Flash-3.0 بنسبة 9.44% تحت تأثير الضجيج).
تأثير المقدار: الزيادات الطفيفة (مثل 110% مقابل 80%) تزيد من الانحياز بشكل كبير.
تأثير الموقع: الانحرافات في منتصف النمط (المحاطة بعناصر متسقة) يسهل اكتشافها قليلاً من تلك الموجودة عند الحدود، وإن كان التأثير أصغر من تأثير الضجيج أو المقدار.
3. الاستدلال وأنماط الفشل
الجهد الاستدلالي: ترتبط سلاسل الاستدلال الأطول بمعدلات انحياز أقل. بالنسبة لـ ChatGPT-5.3، أدى الانتقال من صفر من رموز الاستدلال إلى جهد متوسط إلى تقليل الانحياز من 93.2% إلى حوالي 40%. ومع ذلك، فإن مكاسب الدقة تصل إلى مرحلة الثبات، ولا يضمن زيادة الجهد الصحة.
التحليل النوعي: تكشف آثار الاستدلال عن "سلوك الامتثال للنمط":
يلاحظ النموذج الانحراف البصري.
يقوم بعملية استدلال صحيحة (على سبيل المثال، تقدير أن العرض هو ~118%).
التجاوز (Override): يتجاهل النموذج صراحةً ملاحظته للامتثال للنمط (على سبيل المثال، "ومع ذلك، يبدو أن 100% هي الأكثر اتساقًا مع النمط").
أنماط الفشل: في 74% من الاستجابات المنحازة، تفاعل النموذج مع لقطة الشاشة. نمط الفشل المهيمن (59.1%) كان "المدرك-المتسق" (فشل النموذج في تسجيل الانحراف رغم رؤيته)، يليه "الملاحظ-ثم-المتجاوز" (14.8%)، حيث رأى النموذج الفرق ولكنه اختار النمط على أي حال.
المساهمات
صياغة المشكلة: تحدد الورقة انحياز إكمال النمط البصري كنمط فشل متميز في توليد الكود من لقطات الشاشة، مما يميزه عن الهلوسة العامة أو ضعف الدقة العالمية.
المعيار: تقديم Pattern2Code، وهو معيار منسق يضم 1,440 لقطة شاشة تم تقييمها مشتقة من 30 صفحة ويب حقيقية، مصممة لعزل الانحرافات البصرية الموضعية مقابل الأنماط المتكررة.
الأدلة التجريبية: إثبات أن انحياز إكمال النمط يرتبط بقوة بالبروز البصري. توضح الورقة أن حتى النماذج الحديثة تفشل في الحفاظ على التفاصيل التصميمية الدقيقة (مثل أحجام الخطوط) عندما تتعارض مع نمط مهيمن.
تحليل الاستدلال: تقديم أدلة نوعية تظهر أن النماذج غالبًا ما تحدد الشذوذ البصري الصحيح ولكنها تقوم بتجاوز استدلالها بنشاط لتحقيق الاتساق مع النمط.
الأهمية والادعاءات
تدعي الورقة أن أنظمة توليد الكود من لقطات الشاشة الحالية لا يمكن الوثوق بها فيما يتعلق بالدقة التصميمية الدقيقة دون تحقق صريح.
عتبة الثقة: يجادل المؤلفون بأنه بينما قد تكون هذه النماذج موثوقة لقرارات التخطيط الخشنة (الميزات ذات البروز العالي)، فإنها تفشل بشكل منهجي في الخصائص الضرورية للعمل الأمامي المصقول (مثل المسافات الطفيفة، وحجم الخط) حيث يكون البروز البصري منخفضًا.
محدودية المقاييس: تسلط الدراسة الضوء على أن المعايير القياسية (التي تقيس التشابه العالمي) قد تخفي حالات الفشل في التأصيل المحلي هذه، حيث يبدو الكود المولد سليمًا عالميًا رغم كونه غير صحيح محليًا.
الآثار المترتبة على الممارسة: يجب على المطورين الذين يستخدمون هذه الأدوات التعامل مع الكود المولد كمسودة تحافظ على الهيكل العام ولكنها قد تقوم "بتطبيع" (normalize) الأنماط الدقيقة بصمت. يقترح المؤلفون أن استراتيجيات التخفيف (مثل المطالبات التي تشجع على التحليل عنصرًا بعنصر أو التحقق البصري بعد التوليد) ضرورية لمعالجة هذا الانحياز.
تخلص الورقة إلى أن التوتر بين المعرفة المسبقة (إكمال النمط) والدليل المدخل (التأصيل البصري) لا يزال يمثل تحديًا حاسمًا للنماذج متعددة الوسائط في هندسة البرمجيات، مما يتطلب أطر تقييم جديدة تستهدف تحديدًا الانحرافات الموضعية.