ScreenCoder: تطوير التوليد المرئي إلى الشفرة لآلية التلقائية للواجهة الأمامية من خلال الوكلاء متعددي الوسائط المتعددة المتعددة الوحدات

يُعدّ أتمتة تحويل تصاميم واجهة المستخدم (UI) إلى كود واجهة أمامية (Front-end) واعدًا جدًا لتسريع تطوير البرمجيات وتمكين تدفّق العمل التصميمي لجمهور أوسع. وعلى الرغم من التقدم الذي أظهرته النماذج اللغوية الكبيرة (LLMs) حديثًا في إنشاء الكود من النصوص، فإن العديد من النهج الحالية تعتمد فقط على أوامر نصية طبيعية، ما يحدّ من فعاليتها في التقاط التخطيط المكاني ونية التصميم البصري. أما في الممارسة العملية لتطوير واجهة المستخدم، فإنها بطبيعتها متعددة الوسائط، وغالبًا ما تبدأ من مخططات مرئية أو نماذج أولية (Mockups). ولسد هذه الفجوة، نقدّم إطارًا متعدد الوكلاء قابلاً للتركيب، يقوم بتحويل واجهة المستخدم إلى كود عبر ثلاث مراحل قابلة للتفسير: الترسيخ، والتخطيط، والإنشاء. يُستخدم الوكيل المُترسيخ نموذجًا لغويًا بصرية للكشف عن مكونات واجهة المستخدم وتسميتها، ويُنشئ الوكيل المُخطط هيكلًا تسلسليًا للتصميم باستخدام معرفة هندسية مسبقة لواجهة أمامية، بينما يُولّد الوكيل المُنشئ كود HTML/CSS من خلال تركيب مُوجه تكيفيًا. ويُحسّن هذا التصميم من موثوقية الأداء وقابلية التفسير والدقة مقارنة بالأساليب الشاملة المغلقة (End-to-end Black-box). علاوةً على ذلك، نوسع الإطار ليصبح محرك بيانات قابل للتوسع، يُولّد تلقائيًا أزواجًا كبيرة من الصور والكود. وباستخدام هذه الأمثلة الاصطناعية، نُعدّل النموذج المفتوح المصدر لنموذج اللغة البصرية (VLM)، مما يُحقق تحسنًا ملحوظًا في فهم واجهة المستخدم ونوعية الكود. وتُظهر التجارب الواسعة أن منهجنا يحقق أداءً متميزًا على مستوى الأداء الحالي (State-of-the-art) من حيث دقة التخطيط، والتماسك الهيكلي، وصحة الكود. وتم إتاحة الكود الخاص بنا للجمهور عبر الرابط: https://github.com/leigest519/ScreenCoder.