إنشاء تصميمات أولية منخفضة الدقة بالتحدث إلى حاسوبك
كان لدينا حلم...
تأسست TeleportHQ عام 2016 بهدف جعل التكنولوجيا أكثر إنسانية. جمعنا فريقًا دوليًا من المصممين والمطورين وعلماء البيانات، مدفوعًا برغبة في بناء أدوات قوية بما يكفي لاستيعاب المعرفة البشرية المتراكمة والاستفادة منها، ومن ثم أتمتة عملية إنشاء واجهات المستخدم على نحو متزايد.
كانت إحدى الأفكار الأولى في قائمة أبحاثنا هي إنشاء مواقع إلكترونية بمجرد التحدث إلى الحاسوب. وقد جعلت التطورات الحديثة في الذكاء الاصطناعي إنشاء واجهات المستخدم أمرًا ممكنًا للمرة الأولى.
لبناء حل ناجح للتعلّم الآلي، احتجنا إلى عنصرين أساسيين: كمية كبيرة من البيانات، وأداة «مترجم بين الإنسان والحاسوب» تتعرف على اللغة الطبيعية وتحولها إلى لغات برمجة الحاسوب. وقد ثبت أن العثور على أداة الترجمة هذه تحديدًا أمر بالغ الصعوبة. جرّبنا استخدام أدوات مثل IBM Watson وGoogle Dialogflow، لكنها لم تكن مناسبة لأغراضنا.
وفي الوقت نفسه، كان فريق الهندسة لدينا يبني Playground، وهي منصة جديدة للتطوير المرئي لواجهات المستخدم. أتاحت تقنية Playground للمطورين والمصممين وصانعي المنتجات التعاون في مشروع واحد، ومشاهدة الشيفرة الناتجة عن عملهم المشترك فورًا وفي الوقت الفعلي.
حققت Playground نجاحًا كبيرًا، واكتسبت زخمًا ومجتمعًا متناميًا من المستخدمين. وهي مبنية على لغة تطوير واجهات المستخدم UIDL، وهي لغة التمثيل الوسيطة الخاصة بـTeleportHQ، ومجموعة من مولدات الشيفرة مفتوحة المصدر.
يمكنك الاطلاع على كيفية عملها معًا في REPL، حيث يمكنك تحرير UIDL ومشاهدة الشيفرة التي تُنشأ في الوقت الفعلي بصيغ مختلفة من JavaScript.
كانت هناك فائدة إضافية لإنشاء Playground: فقد وفّرت مولدات الشيفرة مفتوحة المصدر وUIDL جزءًا أساسيًا من البنية التحتية التي أطلقت العنان لمسار أبحاثنا الأولي. وبالنسبة إلى عالم البيانات، كان التعامل مع UIDL بوصفها لغة خاصة بالمجال أسهل بكثير من التعامل مع الشيفرة البرمجية الخالصة، التي قد تتعطل عند أدنى خطأ نحوي وتتطلب تدخلًا بشريًا لإصلاحها.
بفضل هذه الفائدة، تحرز TeleportHQ تقدمًا ملحوظًا في مسعاها إلى إنشاء مواقع الويب من خلال التحدث إلى الحاسوب. إليكم فيديو يعرض أحدث ما توصلنا إليه:
https://www.youtube.com/embed/fq1RPJUI_GM
نحن على وشك تحقيق حلمنا، ونود أن نشارك بعض الخطوات المهمة في أبحاثنا في تدوينة المدونة التالية.
تحديد الهدف: تعريف مخرجات النموذج
كانت خطوتنا الأولى تحديد المخرجات التي سندرّب نموذجنا عليها. ولتبسيط المسألة، اخترنا ما نحب أن نسميه نهجًا «دلاليًا»، أي مجموعة من مربعات الإحاطة، مع أنواعها ومواضعها المطلقة. وأطلقنا على هذا التنسيق اسم «التصميم منخفض الدقة»، لأنه يمثل جزءًا مما يُعرف عادةً بالتصميم عالي الدقة (الذي يتضمن أيضًا الألوان والأشكال وأنواع الخطوط وغيرها من السمات المرئية). ويمكن القول إن التصميم منخفض الدقة بالنسبة إلى التصميم عالي الدقة يشبه بنيةً من وسوم HTML عادية مقارنةً بصفحة ويب تضم جميع نصوصها وخصائص CSS.
تنظيم البيانات: إنشاء مجموعة بيانات التدريب
يجدر بالذكر أننا بدأنا، بالتوازي مع تطوير Playground، بجمع ملايين صفحات الويب وتنظيمها، لتوفير مصدر بيانات مستمر ومنقّح استخدمناه في مشروع تحويل المخططات الهيكلية إلى شيفرة .
للتعامل مع قاعدة البيانات المتنامية هذه والوصول إليها، أنشأنا محللًا مخصصًا للويب قادرًا على تحليل ما يصل إلى 6000 صفحة في الدقيقة. يمكنك قراءة المزيد عن هذا الموضوع في هذه التدوينة.
قررنا إنشاء صفحات الويب بصورة تكرارية، بدءًا بشريط التنقل وانتهاءً بالتذييل. ولتحقيق ذلك، استخرجنا من مجموعة بيانات صفحات الويب الرئيسية لدينا عينة تضم 850 ألف قسم تمثل أجزاء دلالية مختلفة من صفحات الويب. تحقق من المثال أدناه:
بيانات وصورة شاشة لقسم رئيسي منخفض الدقة
المحاولات الأولية: مُرمِّز تلقائي تسلسلي
في نهاية عام 2019، بدأنا بنهج بسيط غير خاضع للإشراف، يستند إلى مُرمِّز تلقائي تسلسلي. في منتصف هذه البنية، توجد عنق زجاجة تُرمَّز فيه الأقسام إلى مصفوفة أحادية البعد. تُستخدم عنق الزجاجة هذه عادةً لتوليد بيانات جديدة؛ لذا اعتقدنا أنه قد يكون من الممكن توليد تصميمات جديدة منها عبر أخذ عينات عشوائية من قيمها.
للأسف، لم ينجح الأمر كما توقعنا. فعلى الرغم من أن النظام استطاع تعلّم الترميز وفك الترميز، فإنه أخفق إخفاقًا ذريعًا مع العينات الجديدة أو عند استخدام ترميز عشوائي.
جرّبنا بعض الأساليب والبنى الأخرى، بما فيها المُرمِّزات التلقائية التباينية، والشبكات التوليدية التنافسية، والشبكات العصبية البيانية، لكن بعد تسعة أشهر من التجربة والخطأ، لم تكن النتائج مجدية.
بنية المُرمِّز التلقائي
نقطة التحول: ظهور تقنية جي بي تي-3
في وقت سابق من هذا العام، أصدرت أوبن إيه آي إصدارًا جديدًا من المحوّل التوليدي المُدرَّب مسبقًا (جي بي تي-3). وضع نظامها معيارًا جديدًا للنتائج المتطورة في عدد من المقاييس المرجعية، مثل الإجابة عن الأسئلة والترجمة الآلية.
يُولّد جي بي تي-3 تسلسلات من القيم المنفصلة استنادًا إلى سياق مُعطى. وبناءً على هذا السياق، يُكمل النموذج بقية التسلسل تلقائيًا، رمزًا تلو الآخر.
نظرًا إلى أنه دُرِّب على الإنترنت بأكمله، يُظهر النموذج نتائج مذهلة في مجموعة متنوعة من المسائل، من الفلسفة إلى الطب. لكن نوعًا واحدًا من حالات الاستخدام لفت انتباهنا على وجه الخصوص: توليد الشيفرات البرمجية.
برز مثالان على وجه الخصوص. في المثال الأول، استُخدم GPT-3 لإنشاء أوامر bash. وفي المثال الثاني، استُخدم لإنشاء شيفرة JSX. أثار هذان المثالان حماس فريقنا، إذ بدا واضحًا أن هذا النموذج استوعب بنجاح جميع بيانات Stack Overflow. وكان ذلك دليلًا قاطعًا على أن تقنية GPT تتيح إمكانية التحدث إلى آلة وإنشاء واجهات المستخدم.
إنشاء GPT-3 لأوامر bash انطلاقًا من اللغة الطبيعية
الإبحار مع الريح: تسخير قوة GPT
بدافع حماسنا لإمكانات هذه التقنية، طلبت TeleportHQ الحصول على وصول مبكر إلى GPT-3، لكن طلبنا لم يُقبل. ومع ذلك، ظللنا مقتنعين بأن بنية GPT هي الحل لمشكلتنا في تعلّم الآلة. وهذا ما دفعنا إلى بناء نسختنا الخاصة. وبعد بعض البحث، اخترنا العمل باستخدام minGPT، وهو تطبيق خفيف الوزن لـ GPT.
الصورة بألف كلمة: GPT في مقابل minGPT
بفضل البيانات المتاحة لدينا وبساطة minGPT، تمكّنا من إدخال بياناتنا إلى الشبكة بسرعة كبيرة. ولدهشتنا الشديدة، نجح الأمر ببساطة.
في هذه التجربة الأولى، تعلّم النموذج إنشاء أقسام صفحاتنا حرفًا تلو الآخر، بما في ذلك عمق كل عنصر وإحداثياته.
باستخدام السياق «DIV 0 0.5 0.5 1.0 1.0»، تمكّن النموذج من إكمال بيانات أحد الأقسام تلقائيًا. وكان من الممكن بعد ذلك إعادة بناء العرض الشجري التالي:
أول قسم أنشأه GPT-UI انطلاقًا من السياق «DIV 0 0.5 0.5 1.0 1.0»
على الرغم من أن النتائج كانت واعدة، لم تُحل المشكلة بعد: إذ لم يكن من الممكن بعد تحديد السياق بوصفه قصد المستخدم. لذلك، حسّنا النموذج بإدراج المحتوى المراد إنشاؤه (مثل عدد الصور أو الفقرات أو عناصر div) في بداية التسلسل.
مرة أخرى: لقد نجح الأمر ببساطة.
فيما يلي بعض الأقسام (المنتقاة بعناية) التي أنشأها هذا النموذج المحسّن. في جميع الحالات، لم تكن عروض الأشجار ومربعات الإحاطة متناسقة فحسب، بل تضمنت الأقسام المُنشأة أيضًا المحتوى المطلوب.
يبدو مثال على السياق الجديد كما يلي: «IMG 2 P 2 H1 2 $». وبمجرد إدراجه قبل القسم نفسه، أمكن للنموذج البدء بعد أول «$» وإنشاء القسم بأكمله تلقائيًا.
ثلاثة أقسام أُنشئت في المراحل الأولى من تجاربنا
ثم مضينا إلى أبعد من ذلك بإضافة معلومات إضافية في بداية التسلسل لإثراء التوجيه. وبذلك أصبح بإمكان النظام تعلّم إنشاء أقسام بارتفاعات واتجاهات ووظائف محددة.
أول بنية معمارية عاملة لدينا
ظلّ ينقصنا عنصر أخير: واجهة مستخدم تتيح للإنسان التواصل مع الكمبيوتر باستخدام اللغة الطبيعية. أنشأنا الإعداد التالي، حيث يُحدّد المستخدم غايته عبر نموذج.
أول نموذج استُخدم للتفاعل مع النموذج الحاسوبي
بعد إنشاء النموذج، أضفنا طبقة برمجية تحوّل الأوامر باللغة الطبيعية (مثل: «مرحبًا TeleportHQ، أنشئ لي قسمًا من نوع شريط التنقل، مع صورة واحدة و4 روابط وبارتفاع 65 بكسل») إلى سياقات (مثل: «NAVBAR $ h 65 $ IMAGE 1 LINK 4 $»).
فيما يلي عرض توضيحي لواجهة المستخدم الحالية. تتيح للمستخدم التفاعل مع النموذج وإنشاء صفحة لموقع إلكتروني في بضع دقائق فقط.
نموذج أولي لواجهة GPT-UI
آفاق جديدة: نحو عام 2021…
قبل أربع سنوات، كان فريق TeleportHQ من الفرق القليلة التي آمنت بإمكانية إنشاء واجهات المستخدم باستخدام اللغة الطبيعية. ومنذ ذلك الحين، عملنا باستمرار على وضع اللبنات الأساسية في مسيرة تحقيق سلاسة التواصل بين الإنسان والآلة. تقرّبنا نتائجنا أكثر من مهمتنا الأصلية: أتمتة عملية إنشاء واجهات المستخدم بالكامل.
لدينا اليوم نموذج أولي يعمل بكامل وظائفه لواجهة GPT-UI. ويضم 6 ملايين مُعامل، مقارنةً بـ175 مليار مُعامل في نموذج GPT-3 العملاق.
لكن في حين يُقدَّر GPT-3 لقوته الهائلة وقدرته على إنجاز أي مهمة باللغة الإنجليزية تقريبًا، يوفّر نموذجنا تخصصًا أكبر واستجابة أسرع بفضل حجمه الأصغر والأكثر مرونة.
مع مرور الوقت، وباستخدام البيانات المناسبة والاستفادة من تدريب بقية بنية Teleport، يمكن لـGPT-UI أن ينافس GPT-3 في إنشاء واجهات المستخدم انطلاقًا من اللغة الطبيعية، مع مزايا إضافية تشمل إمكانية تخصيصه بالكامل واستهلاكه جزءًا ضئيلًا فقط من الموارد اللازمة لتشغيل النموذج.
بدأت TeleportHQ بالفعل باستخدام النهج نفسه لإنشاء نماذج جديدة أخرى متخصصة في تصميم مكوّنات محددة وتصاميم كاملة للأجهزة المحمولة.
نحن متحمسون لإمكاناته، وواثقون من أننا سنتمكن في المستقبل القريب من إنشاء صفحات ويب كاملة وعالية الدقة بطلب واحد.
إذا كنتم ترغبون في طلب عرض توضيحي خاص، أو اقتراح تعاون، أو تزويدنا بملاحظاتكم، ندعوكم للتواصل معنا عبر hello@teleporthq.io .
💡
إذا أعجبتكم هذه المقالة، فقد تهمكم أيضًا نتائجنا السابقة حول استخدام التعلم الآلي للتحويل التلقائي من المخططات الهيكلية إلى الشيفرة البرمجية.
التعليقات
لا توجد تعليقات بعد. كن أول من يشارك أفكاره.