دوز مباشرة للمحتوى الرئيسي
دروس فالذكاء الاصطناعي

بنِي وخصّص صورة بوت SVG متحوّلة مع Bloub

كيشرح هاد الدليل كيفاش تجهّز Bloub، وتستكشف الحالات الـ14 ديالو اللي كتتحوّل، وتخصّص الصورة، وتنشئ جداول زمنية، وتصدّر صور ثابتة ورسوم متحركة، وتستعمل مكوّن Vue بتشغيل حتمي وإطارات مجمّدة.

حوالي 14 دقايق ديال القراية
بنِي وخصّص صورة بوت SVG متحوّلة مع Bloub

شنو هو Bloub؟

Bloub هو إعادة إنشاء بصيغة SVG لصورة أفاتار البوت ديال x.ai. كيستعمل شكلاً واحداً أسود وممتلئاً للجسم، كيتحوّل بين 14 حالة، وزوج ديال أشكال العينين البيض المستقلة، وكلشي معروض فوق خلفية بسيطة. الأنيميشن خدام بلا مكتبة ديال الأنيميشن.

الأفاتار كيدوز من حالات السكون والغمزة والدوران والانفجار

المشروع كيجمع بين محرّك أنيميشن بلا إطار وواجهة مبنية بـ Vue 3. المحرّك ديالو حتى هو ما كيعتمدش على الساعة: استدعاء engine.sample(t) كينتج إطاراً اعتماداً غير على الوقت المعطى. هاد الشي كيخلي التوقيف، والتنقّل داخل الوقت، والمعاينات المجمدة، والاختبارات بلا DOM محددة وقابلة لإعادة الإنتاج.

الميزات الرئيسية

  • 14 حالة مقاسة: الأفاتار فيه حالات بحال السكون، والغمزة، والدوران، والانفجار.
  • تخصيص الأفاتار: اختار من بين 8 أشكال للجسم، و12 لوناً، و16 تعبيراً للسكون. الاختيارات كتبقى محفوظة بين الزيارات.
  • محرّر الخط الزمني: رتّب الحالات، وضبط المدة اللي كتبقى فيها كل حالة، وحفظ الأنيميشن الناتج.
  • صيغ تصدير متعددة: صدّر الأفاتار بصيغة SVG أو PNG أو GIF متحرك، أو صدّر خطاً زمنياً كاملاً بصيغة GIF أو MP4.
  • ترميز الفيديو عند الطلب: محرّك ترميز الفيديو كيتحمّل غير ملي كيكون محتاج ليه أول مرة.
  • ثلاث لغات: الواجهة كتدعم الفرنسية والإنجليزية والصينية.
  • إظهار محدد: نفس الوقت كينتج دائماً نفس الصورة، وهاد الشي كيدعم الإطارات المجمدة الدقيقة والاختبارات القابلة للتكرار.

المتطلبات الأساسية

Bloub كيستعمل Vue 3 وVite وTypeScript وTailwind CSS 4 وpnpm. ثبّت بيئة Node.js وpnpm قبل ما تكمل.

تثبيت وتشغيل Bloub

  1. نسخ المستودع أو حمّلو، ومن بعد حلّ المجلد ديالو فـالطرفية.

  2. ثبّت الاعتماديات:

    pnpm install

  3. شغّل خادم التطوير ديال Vite:

    pnpm dev

  4. حلّ http://localhost:5190 فالمتصفح.

تشغيل الاختبارات وإنشاء نسخة الإنتاج

شغّل مجموعة اختبارات Vitest بهاد الأمر:

pnpm test

تحقّق من كود TypeScript وبنِ التطبيق بهاد الأمر:

pnpm build

أمر البناء كيشغّل vue-tsc --noEmit قبل vite build. المستودع ما فيهش عن قصد إعدادات ESLint أو Prettier، لذلك vue-tsc هو بوابة الجودة الأساسية للكود. شغّل pnpm build قبل ما تعتبر أي تغيير مكتمل.

استكشاف التطبيق

الشريط اللي فاليسار كيبدّل بين ثلاث واجهات رئيسية.

تخصيص الأفاتار

حلّ Customise باش تختار واحداً من 8 أشكال للجسم، و12 لوناً، و16 تعبيراً للسكون. التطبيق كيحافظ على هاد الاختيارات بين الزيارات.

إنشاء خط زمني للأنيميشن

حلّ Animations باش ترتّب حالات الأفاتار فخط زمني. حدّد شحال خاص كل حالة تبقى، عاين التسلسل، وحفظو. مؤشّر التشغيل كيتبع مواقع الخط الزمني وماشي غير أسماء الحالات، وهاد الشي كيخلي نفس الحالة تقدر تبان أكثر من مرة فمونتاج واحد.

تغيير اللغة والاطلاع على الاعتمادات

حلّ Settings باش تختار الفرنسية أو الإنجليزية أو الصينية، وباش تشوف اعتمادات المشروع.

معاينة الحالات الـ14 كاملين

زيد #planche للرابط المحلي باش تعرض الحالات الـ14 كاملين حدّا حدّا كإطارات مجمدة:

http://localhost:5190/#planche
الحالات الـ14 مجمدة ومعروضة حدّا حدّا

هاد العرض مفيد باش تتأكد بسرعة واش التغييرات بدّلات شي حالة بشكل غير متوقع.

باش تحلّ حالة معيّنة والتشغيل موقوف، استعمل معاملي الهاش etat وstop. مثلاً:

http://localhost:5190/#etat=orbit&stop

استعمال مكوّن BloubBot ديال Vue

مكوّن BloubBot كيدعم التشغيل المتحكَّم فيه والإطارات المجمدة الدقيقة. تقدر تربط نسخة متحكَّماً فيها ببلوك الخط الزمني الحالي، والحالة، ووضعية التشغيل:

<BloubBot
  v-model:block="block"
  v-model:state="state"
  v-model:playing="playing"
/>

موديل block هو مؤشّر التشغيل. هاد الفرق مهم حيث الخط الزمني يقدر يحتوي على نفس الحالة أكثر من مرة. رقم البلوك كيحدّد الموقع الدقيق داخل الخط الزمني، بينما state كيتبع داك المؤشر كمخرج.

عرض إطار مجمد

مرّر حالة وحجماً وقيمة frozen-at باش تعرض إطاراً دقيقاً واحداً بلا ما تبدا حلقة الأنيميشن:

<BloubBot state="orbit" :size="120" :frozen-at="1.2" />

العرض المجمد هو الطريقة اللي كيستعملها Bloub لإنشاء الصور المصغرة ولوحة الحالات الكاملة. وكيكون مفيد حتى ملي كتحتاج معاينة مستقرة أو إطاراً فواحد اللحظة المضبوطة.

مدخلات المكوّن المتاحة

المكوّن كيوفّر الخصائص التالية:

  • size
  • shape
  • color
  • expression
  • paper
  • frozenAt
  • cycle
  • follow
  • gaze

الموديلات ديالو هي block وstate وplaying وelapsed. راجع BloubBot.vue باش تعرف الأنواع الدقيقة وتفاصيل المكوّن.

تصدير الأفاتارات والخطوط الزمنية

أي حاجة كتبان فالشاشة تقدر تصدّرها. بالنسبة لأفاتار واحد، اختار SVG أو PNG أو GIF متحرك. وبالنسبة لخط زمني كامل، اختار GIF أو MP4.

تصدير SVG وPNG ما كيحتاج حتى مكتبة زايدة. مُرمّز الفيديو اللي خاص للإخراج المتحرّك كيتحمّل غير أول مرة كيتطلب فيها، وهادي علاش ما كايناش حاجة يتحمّل فالتعديل العادي. كاينين تفاصيل أكثر على التنفيذ فـوثائق التصدير.

نصائح متقدمة

استعمل المحرّك النقي باش تحصل على إطارات محدّدة

الكود اللي كاين تحت src/bot/ ما مرتبط لا بإطار عمل لا بالساعة. استعمل engine.sample(t) ملي تحتاج الصورة ديال وقت مضبوط. حيث النتيجة كتتبدّل حسب الوقت اللي كتزوّد به، وماشي حسب ساعة حيّة، فالتوقيف، والاستئناف، والبحث فالتوقيت، والاختبار، وإنشاء الصور المصغّرة كيبقاو متناسقين.

ما تبسّطش الثوابت المقيسة

بزاف ديال القيم يقدرو يبانُو عشوائيين، ولكن تقاسو من لقطات مرجعية مقطّعة على 10 إطارات فالثانية. السيليويتات تخرجات باستعمال تتبّع الأشعة تحت-البكسلي، والعيون تكيّفات على شكل كبسولات، والألوان وعروض الخطوط تاخدو مباشرة من العينات.

تقريب الثوابت لقيم أسهل يقدر ينقص من التشابه البصري اللي المشروع مصمّم يحافظ عليه.

خلي هاد الخصائص المقيسة فبالك ملي تبدّل الحركة:

  • العيون مائلة فالاتجاه ديال الشرطة المائلة العكسية، بحوالي 26 درجة على العمودي.
  • الجسم عملياً دائرة كاملة، بانحراف شعاعي أقل من 0.7%، وماشي مربع مدوّر.
  • الانتقالات كتستعمل تباطؤات أسّية، والجسم ما كيتجاوزش الموضع ديالو.
  • فأثناء تأثير المذنّب، النقطة كتبقى ثابتة والذيل كيدور عليها.
  • الأفاتار فحالة السكون ما كيطفاش؛ الإحساس بالحياة كيجيو من حركة النظرة والرمش.

شوف وثائق القياسات قبل ما تبدّل البروفايلات ولا تعاود تولّد profiles.ts.

راجع البنية قبل ما توسّع المحرّك

وثائق المشروع كتشرح المحرّك، وتغيير الشكل حسب البروفايل الشعاعي، واستعمال أشكال العيون كفتحات فالقناع. قرا دليل البنية قبل ما تزيد حالات ولا تبدّل سلوك تغيير الشكل. الواجهة، وتسلسل الوصول، وطبقة التدويل موثّقة بشكل منفصل فـدليل الواجهة، ودليل المقدمة، ودليل التدويل.

شيّك على تاريخ الإصدارات قبل ما تبدا تصحّح الأخطاء

ملف سجلّ التغييرات فيه مدخلة وحدة لكل إصدار. شيّك عليه باش تعرف واش النسخة المحلية ديالك فيها إصلاح معيّن.

الخلاصة

Bloub كيوفّر أفاتار SVG مقيس بعناية، وواجهة بصرية للتخصيص، ومحرّر للخط الزمني، وأخذ عينات محدّدة من الإطارات، وعدّة صيغ للتصدير بلا اعتماد على مكتبة ديال الحركة. بدا بلوحة الحالات المدمجة وأمثلة المكوّنات، وشغّل الاختبارات وبناء الإنتاج من بعد التغييرات، وحافظ على الثوابت المقيسة ملي توسّع الحركة.

الكود متاح برخصة MIT. المشروع ما عندوش علاقة بـx.ai، وما مدعومش منها وما مرتبطش بها. الرخصة كتشمل كود المستودع، وما كتغطيش التصميم اللي كيعيد إنشاءه.