توليد الكود والإطار الشبكي
نظرة عامة
بمجرد تعليق صورتك بالمربعات المحددة وتخصيص السلوكيات، يمكنك توليد كود مكون وظيفي أو تصميم إطار شبكي. يستخدم الذكاء الاصطناعي مواقع المربعات المحددة وأنواع العناصر وتوجيهات السلوك لإنتاج إخراج دقيق.
الشريط الجانبي لمساعد الذكاء الاصطناعي
لوحة مساعد الذكاء الاصطناعي هي الشريط الجانبي على الجانب الأيمن المستخدم لتكوين وتفعيل توليد الكود أو الإطار الشبكي. تحتوي على عناصر التحكم التالية:
محدد نموذج الرؤية
اختر نموذج رؤية الذكاء الاصطناعي لاستخدامه في تحليل صورك وتوليد الإخراج. النماذج المختلفة قد تنتج مستويات مختلفة من التفصيل والدقة.
محدد إطار العمل
اختر إطار العمل المستهدف لتوليد الكود (مثلاً React و Vue و Svelte). الكود المولد سيستخدم صيغة وأنماط إطار العمل المحدد.
تبويبات المكونات / الإطارات الشبكية
بدّل بين توليد كود المكونات (تبويب المكونات) أو تصاميم الإطار الشبكي (تبويب الإطارات الشبكية) من صورك المعلقة.
مجموعات الصور
يسرد جميع مجموعات صورك لمشروع الهندسة العكسية الحالي. حدد مجموعة لمعاينة صورها وتكوين التوليد. كل مجموعة تعرض عدد صورها.
توليد الكتل
انقر لبدء عملية التوليد بالذكاء الاصطناعي. يحلل الذكاء الاصطناعي صور المجموعة المحددة مع تعليقات المربعات المحددة والسلوكيات لإنتاج الإخراج.
أوضاع الإخراج
توليد الكود
يحول الصورة المعلقة إلى كود مكون وظيفي لإطار عملك المستهدف (React و Vue و Svelte وغيرها). الكود المولد يتضمن التخطيط والأنماط وأي سلوكيات حددتها في المربعات المحددة.
توليد الإطار الشبكي
يصدر الصورة المعلقة كتصميم إطار شبكي يُفتح في أداة الإطار الشبكي. كل مربع محدد يصبح عنصر إطار شبكي يمكنك تنقيحه وإعادة ترتيبه وربطه بشاشات أخرى.
ميزات توليد الكود
اختيار إطار العمل
اختر إطار عملك المستهدف قبل التوليد. أطر العمل المدعومة تشمل React و Vue و Svelte و SolidJS و Angular والمزيد.
تعيين السلوكيات
السلوكيات المخصصة للمربعات المحددة تُترجم إلى معالجات أحداث ومنطق تنقل ونوافذ منبثقة وكود تفاعلي آخر في الإخراج.
دقة التخطيط
يستخدم الذكاء الاصطناعي مواقع وأحجام المربعات المحددة من الصورة لإنتاج تخطيط يشبه التصميم المرئي الأصلي بشكل وثيق.
حفظ في الكتل
المكونات المولدة يمكن حفظها مباشرة في مكتبة الكتل لإعادة الاستخدام في مشاريع أخرى.
إضافة للمشروع
أدرج الكود المولد مباشرة في مشروعك الحالي كملفات مكونات جديدة.
نصائح
لأفضل النتائج، استخدم صوراً عالية الدقة مع عناصر واجهة واضحة. ارسم مربعات محددة ملاصقة حول كل عنصر لتوليد كود أكثر دقة. خصص سلوكيات محددة بدلاً من أوصاف غامضة — "يفتح نافذة تسجيل" يعمل أفضل من "يفعل شيئاً". الذكاء الاصطناعي يعمل بشكل أفضل مع تخطيطات الويب القياسية وأنماط الواجهة الشائعة.