في عالم تطوير الويب، عادةً ما يتطلب تحويل التصميمات إلى مواقع ويب وظيفية الكثير من الترميز والاختبار الدقيق. ماذا لو تمكنا من تبسيط هذه العملية، مما يجعل من الممكن تحويل تصميمات الويب إلى مواقع ويب عاملة بسهولة أكبر وبسرعة؟ WebSight عبارة عن مجموعة بيانات جديدة تهدف إلى بناء أنظمة ذكاء اصطناعي قادرة على تحويل لقطات الشاشة إلى كود HTML.
التحدي
عادةً ما يحتاج تحويل تصميم موقع ويب أو لقطة شاشة إلى كود HTML إلى مطور ذي خبرة. ولكن ماذا لو كان هذا أكثر كفاءة؟ بدافع من هذا السؤال، قمنا بالتحقق من كيفية استخدام نماذج لغة الرؤية (VLMs) في تطوير الويب لإنشاء حلول منخفضة التعليمات البرمجية تعمل على تحسين الكفاءة.
واليوم، يتمثل التحدي الرئيسي لتحقيق هذا الهدف في الافتقار إلى مجموعات بيانات عالية الجودة مصممة خصيصًا لهذه المهمة. يهدف WebSight إلى سد هذه الفجوة.
WebSight: مجموعة بيانات اصطناعية كبيرة من أزواج أكواد لقطة الشاشة/HTML
في يناير 2024، قدمنا WebSight-v0.1، وهي مجموعة بيانات تركيبية تتكون من 823000 زوج من أكواد HTML ولقطات الشاشة المقابلة لها. تم تصميم مجموعة البيانات هذه لتدريب نماذج الذكاء الاصطناعي على معالجة وترجمة تصميمات الويب المرئية إلى كود HTML وظيفي. من خلال التركيز على البيانات الاصطناعية، تمكنا من تجاوز الضوضاء والتعقيد الموجود غالبًا في HTML في العالم الحقيقي، مما يسمح لنماذج الذكاء الاصطناعي بالتعلم بكفاءة.
بعد إصدارنا الأولي وبناءً على تعليقات المجتمع، قمنا بتحديث مجموعة البيانات الخاصة بنا إلى WebSight-v0.2، مما أدى إلى إدخال تحسينات كبيرة. تتميز هذه التحسينات باستخدام صور حقيقية في لقطات الشاشة، والتحول إلى Tailwind CSS (بدلاً من CSS التقليدي). قمنا أيضًا بتوسيع نطاق مجموعة البيانات إلى 2 مليون مثال.
المتفرج: نموذج تم ضبطه بدقة على WebSight
من خلال الاستفادة من مجموعة بيانات WebSight، قمنا بضبط نموذج لغة الرؤية الأساسي القادم للحصول على Sightseer، وهو نموذج قادر على تحويل لقطات شاشة صفحة الويب إلى كود HTML وظيفي. يوضح Sightseer بالإضافة إلى ذلك القدرة على دمج الصور في HTML الذي تم إنشاؤه والذي يشبه إلى حد كبير تلك الموجودة في لقطات الشاشة الأصلية.
نحو أدوات أكثر قوة تم فتحها بواسطة نماذج اللغة المرئية
من خلال التكرار عبر WebSight، هدفنا هو بناء أنظمة ذكاء اصطناعي أكثر قدرة تعمل على تبسيط عملية تحويل تصميمات واجهة المستخدم إلى تعليمات برمجية وظيفية. قد يؤدي ذلك إلى تقليل وقت التكرار للمطورين عن طريق تحويل رسم واجهة المستخدم الورقي إلى كود وظيفي بسرعة، مع جعل هذه العملية في متناول غير المطورين. يعد هذا أحد التطبيقات الحقيقية العديدة لنماذج اللغة المرئية.. من خلال WebSight مفتوح المصدر، نشجع المجتمع على العمل معنا لبناء أدوات أكثر قوة لتطوير واجهة المستخدم.
موارد
