"كل ماتريد معرفته عن "Sketch2Code" وشاهد كيف ستغير هذه الخدمة العالم الرقمي"
تنطوي عملية تصميم واجهة المستخدم على الكثير من الإبداع الذي يبدأ على السبورة حيث يشارك المصممون الأفكار. بمجرد رسم التصميم ، عادة ما يتم التقاطه في صورة فوتوغرافية وترجمته يدويًا إلى بعض wireframe HTML للتشغيل في متصفح الويب. هذا يأخذ الجهود ويؤخر عملية التصميم. ماذا لو تمت إعادة تصميم التصميم على السبورة البيضاء ويعكس المتصفح التغييرات على الفور؟وبهذا المعنى ، بحلول نهاية الجلسة ، يوجد نموذج أولي ناتج عن المصادقة بين المصمم والمطور والعميل. تقديم Sketch2Code ، وهو حل يستند إلى الويب يستخدم AI لتحويل تصميم واجهة المستخدم بخط اليد من صورة إلى رمز ترميز HTML صالح.
دعونا نفهم عملية تحويل صورة مكتوبة بخط اليد إلى HTML باستخدام Sketch2Code بمزيد من التفاصيل.
- أولاً ، يحمّل المستخدم صورة من خلال موقع الويب.
- يتوقع نموذج الرؤية المخصص عناصر HTML الموجودة في الصورة وموقعها.
- تقوم خدمة التعرف على النص المكتوبة بخط اليد بقراءة النص داخل العناصر المتوقعة.
- تستخدم خوارزمية التخطيط المعلومات المكانية من جميع الصناديق المحيطة للعناصر المتوقعة لتكوين بنية شبكية تستوعب جميع العناصر.
- يستخدم محرك إنشاء HTML كل هذه المعلومات لإنشاء شفرة ترميز HTML تعكس النتيجة.
فيما يلي سير عمل التطبيق:
يستخدم Sketch2Code العناصر التالية:
- نموذج رؤية مخصص من Microsoft: تم تدريب هذا الطراز مع صور من تصميمات مختلفة مكتوبة بخط اليد تميز معلومات معظم عناصر HTML الشائعة مثل الأزرار ومربع النص والصور.
- خدمة Microsoft Computer Vision: لتعريف النص المكتوب في عنصر التصميم ، يتم استخدام خدمة Vision Computer.
- تخزين Azure Blob: يتم تخزين جميع الخطوات المتضمنة في عملية إنشاء HTML ، بما في ذلك الصورة الأصلية ونتائج التنبؤ ومعلومات تجميع التنسيق.
- وظيفة Azure: تعمل كنقطة إدخال للخلفية التي تنسق عملية الإنشاء من خلال التفاعل مع جميع الخدمات.
- موقع Azure على الويب: User font-end لتمكين تحميل تصميم جديد ومشاهدة نتائج HTML التي تم إنشاؤها.
العناصر المذكورة أعلاه تشكل البنية على النحو التالي:
يمكنك العثور على الشفرة وعملية تطوير الحل وكل التفاصيل الأخرى على GitHub . تم تطوير Sketch2Code بالتعاون مع تقنيات Kabel و Spike.