Bloub yordamida morflanuvchi SVG bot avatarini yaratish va sozlash

Bloub nima?

Bloub — x.ai bot avatarining SVG ko‘rinishidagi qayta yaratilgan varianti. U 14 ta holat o‘rtasida o‘zgaradigan bitta to‘ldirilgan qora tana shakli va ikkita mustaqil oq ko‘z shaklidan iborat bo‘lib, oddiy fonda namoyish etiladi. Animatsiya hech qanday animatsiya kutubxonasidan foydalanmasdan amalga oshirilgan.

Loyiha frameworkdan mustaqil animatsiya mexanizmini Vue 3 interfeysi bilan birlashtiradi. Uning mexanizmi soatga ham bog‘liq emas: engine.sample(t) chaqiruvi kadrni faqat berilgan vaqt asosida hosil qiladi. Bu pauza qilish, vaqt bo‘ylab izlash, muzlatilgan ko‘rinishlar va DOMsiz testlarni deterministik qiladi.

Asosiy imkoniyatlar

• O‘lchangan 14 ta holat: Avatar kutish, ko‘z qisish, orbita va portlash kabi holatlarni o‘z ichiga oladi.
• Avatarni sozlash: 8 ta tana shakli, 12 ta rang va 16 ta odatiy ifodadan tanlang. Tanlovlar tashriflar orasida saqlanadi.
• Taymlayn muharriri: Holatlarni tartiblang, har bir holat qancha vaqt saqlanishini sozlang va hosil bo‘lgan animatsiyani saqlang.
• Bir nechta eksport formati: Avatarni SVG, PNG yoki animatsiyalangan GIF ko‘rinishida, to‘liq taymlaynni esa GIF yoki MP4 ko‘rinishida eksport qiling.
• Talab bo‘yicha video kodlash: Video kodlagich faqat birinchi marta kerak bo‘lganda yuklanadi.
• Uchta til: Interfeys fransuz, ingliz va xitoy tillarini qo‘llab-quvvatlaydi.
• Deterministik render: Muayyan vaqt har doim bir xil tasvirni hosil qiladi, bu aniq muzlatilgan kadrlar va takrorlanuvchi testlarni qo‘llab-quvvatlaydi.

Talablar

Bloub Vue 3, Vite, TypeScript, Tailwind CSS 4 va pnpm’dan foydalanadi. Davom etishdan oldin Node.js muhiti va pnpm’ni o‘rnating.

Bloub’ni o‘rnatish va ishga tushirish

1. Repository’ni klonlang yoki yuklab oling va terminalda uning katalogini oching.

2. Qaramliklarni o‘rnating:

   pnpm install

3. Vite ishlab chiqish serverini ishga tushiring:

   pnpm dev

4. Brauzerda http://localhost:5190 manzilini oching.

Testlarni ishga tushirish va production build yaratish

Vitest testlar to‘plamini quyidagi buyruq bilan ishga tushiring:

pnpm test

TypeScript kodini tekshiring va ilovani quyidagi buyruq bilan build qiling:

pnpm build

Build buyrug‘i vite builddan oldin vue-tsc --noEmitni ishga tushiradi. Repository’da ataylab ESLint yoki Prettier konfiguratsiyasi mavjud emas, shuning uchun vue-tsc asosiy kod sifati nazorati hisoblanadi. O‘zgarishni yakunlangan deb hisoblashdan oldin pnpm buildni ishga tushiring.

Ilovani o‘rganish

Chapdagi panel uchta asosiy ko‘rinish o‘rtasida o‘tish imkonini beradi.

Avatarni sozlash

8 ta tana shakli, 12 ta rang va 16 ta odatiy ifodadan birini tanlash uchun Customise bo‘limini oching. Ilova bu tanlovlarni tashriflar orasida saqlaydi.

Animatsiya taymlaynini yaratish

Avatar holatlarini taymlayn bo‘ylab tartiblash uchun Animations bo‘limini oching. Har bir holat qancha vaqt saqlanishini belgilang, ketma-ketlikni oldindan ko‘ring va uni saqlang. Ijro kursori faqat holat nomlarini emas, taymlayn pozitsiyalarini kuzatadi, shu sababli bir xil holat montajda bir necha marta paydo bo‘lishi mumkin.

Tilni o‘zgartirish va kreditlarni ko‘rish

Fransuz, ingliz yoki xitoy tilini tanlash va loyiha kreditlarini ko‘rish uchun Settings bo‘limini oching.

Barcha 14 ta holatni ko‘rish

Barcha 14 ta holatni muzlatilgan kadrlar sifatida yonma-yon ko‘rsatish uchun lokal URL manziliga #plancheni qo‘shing:

http://localhost:5190/#planche

Bu ko‘rinish o‘zgarishlar biror holatni kutilmaganda o‘zgartirgan-o‘zgartirmaganini tezda tekshirish uchun foydali.

Muayyan holatni ijro to‘xtatilgan holda ochish uchun etat va stop xesh parametrlaridan foydalaning. Masalan:

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

BloubBot Vue komponentidan foydalanish

BloubBot komponenti boshqariladigan ijro va aniq muzlatilgan kadrlarni qo‘llab-quvvatlaydi. Boshqariladigan oddiy nusxa joriy taymlayn bloki, holat va ijro holatiga bog‘lanishi mumkin:

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

block modeli ijro kursoridir. Bu farq muhim, chunki taymlayn bir xil holatni bir necha marta o‘z ichiga olishi mumkin. Blok indeksi aniq taymlayn pozitsiyasini belgilaydi, state esa chiqish qiymati sifatida shu kursorni kuzatadi.

Muzlatilgan kadrni render qilish

Animatsiya siklini boshlamasdan bitta aniq kadrni render qilish uchun holat, o‘lcham va frozen-at qiymatini bering:

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

Muzlatilgan render Bloub eskizlar va to‘liq holatlar taxtasini yaratishda ishlatiladi. U barqaror ko‘rinish yoki ma’lum bir vaqtdagi kadr kerak bo‘lganda ham foydalidir.

Mavjud komponent kirish parametrlari

Komponent quyidagi props’larni taqdim etadi:

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

Uning modellari: block, state, playing va elapsed. Aniq turlar va komponent tafsilotlari uchun BloubBot.vue fayliga murojaat qiling.

Avatarlar va taymlaynlarni eksport qilish

Ekranda ko‘rsatilgan istalgan narsani eksport qilish mumkin. Bitta avatar uchun SVG, PNG yoki animatsiyalangan GIF formatini tanlang. To‘liq taymlayn uchun esa GIF yoki MP4 formatini tanlang.

SVG va PNG eksporti uchun qo‘shimcha kutubxona talab qilinmaydi. Animatsiyalangan chiqish uchun kerak bo‘ladigan video enkoder faqat birinchi marta so‘ralganda yuklanadi, shuning uchun odatiy tahrirlash vaqtida uni yuklab olish shart emas. Amalga oshirish tafsilotlari eksport hujjatlarida keltirilgan.

Ilg‘or maslahatlar

Deterministik kadrlar uchun Pure Engine’dan foydalaning

src/bot/ ostidagi kod hech qanday freymvork yoki soatga bog‘liq emas. Aniq vaqt uchun tasvir kerak bo‘lganda engine.sample(t) dan foydalaning. Natija real vaqt soatiga emas, berilgan vaqtga bog‘liq bo‘lgani sababli pauza qilish, davom ettirish, vaqt bo‘yicha o‘tish, testlash va eskizlar yaratish izchil saqlanadi.

O‘lchangan konstantalarni soddalashtirmang

Ko‘plab qiymatlar tasodifiydek ko‘rinishi mumkin, ammo ular soniyasiga 10 kadr tezlikda kesilgan namunaviy videodan o‘lchangan. Siluetlar sub-piksel nurlarni kuzatish usuli bilan ajratib olingan, ko‘zlar kapsula shaklida moslashtirilgan, ranglar va chiziq kengliklari esa bevosita namunadan olingan.

Konstantalarni qulayroq qiymatlarga yaxlitlash loyiha saqlashi ko‘zlangan vizual o‘xshashlikni kamaytirishi mumkin.

Animatsiyani o‘zgartirishda ushbu o‘lchangan xususiyatlarni yodda tuting:

• Ko‘zlar teskari qiya chiziq yo‘nalishida, vertikaldan taxminan 26 daraja og‘gan.
• Tana amalda mukammal doira bo‘lib, radial og‘ish 0,7% dan kam; u squircle shaklida emas.
• O‘tishlarda eksponensial sekinlashish qo‘llanadi va tana ortiqcha og‘ish bilan harakatlanmaydi.
• Kometali effekt vaqtida nuqta joyida qoladi, iz esa uning atrofida aylanadi.
• Tinch holatdagi avatar suzib turmaydi; uning jonli ko‘rinishi nigohning siljishi va ko‘z qisishidan kelib chiqadi.

Profillarni o‘zgartirish yoki profiles.ts ni qayta yaratishdan oldin o‘lchov hujjatlarini ko‘ring.

Engine’ni kengaytirishdan oldin arxitekturani ko‘rib chiqing

Loyiha hujjatlarida engine, radial profil morfingi va ko‘z shakllaridan niqob teshiklari sifatida foydalanish tushuntirilgan. Holatlar qo‘shish yoki morfing xatti-harakatini o‘zgartirishdan oldin arxitektura qo‘llanmasini o‘qing. Interfeys, paydo bo‘lish ketma-ketligi va xalqarolashtirish qatlami alohida ravishda interfeys qo‘llanmasi, kirish qo‘llanmasi va xalqarolashtirish qo‘llanmasida hujjatlashtirilgan.

Nosozliklarni tuzatishdan oldin relizlar tarixini tekshiring

O‘zgarishlar jurnali har bir reliz uchun bittadan yozuvni o‘z ichiga oladi. Mahalliy nusxangizda muayyan tuzatish bor-yo‘qligini aniqlash uchun uni tekshiring.

Xulosa

Bloub animatsiya kutubxonasiga tayanmagan holda puxta o‘lchangan SVG avatar, vizual sozlash interfeysi, vaqt jadvali muharriri, deterministik kadr namunalari va bir nechta eksport formatlarini taqdim etadi. O‘rnatilgan holatlar paneli va komponent misollaridan boshlang, o‘zgartirishlardan so‘ng testlar hamda production build’ni ishga tushiring va animatsiyani kengaytirishda o‘lchangan konstantalarni saqlang.

Kod MIT litsenziyasi asosida taqdim etiladi. Loyiha x.ai bilan bog‘liq emas, u tomonidan ma’qullanmagan va u bilan hamkorlik qilmaydi. Litsenziya qayta yaratilgan dizaynga emas, repository kodiga taalluqlidir.