Mafunzo ya AI

Jenga na Ubinafsishe Avatar ya Boti ya SVG Inayobadilika Umbo kwa Bloub

Mafunzo haya yanaonyesha jinsi ya kusanidi Bloub, kuchunguza hali zake 14 za kubadilika umbo, kubinafsisha avatar, kuunda ratiba, kuhamisha picha tuli na uhuishaji, na kutumia kipengele cha Vue chenye uchezaji thabiti na fremu zilizogandishwa.

21 Agosti 2026Takriban dakika 16 za kusoma

Bloub Ni Nini?

Bloub ni uundaji upya wa SVG wa avatar ya boti ya x.ai. Inatumia umbo moja la mwili mweusi lililojaa ambalo hubadilika kati ya hali 14 na maumbo mawili huru ya macho meupe, yote yakiwasilishwa kwenye mandhari rahisi. Uhuishaji umetekelezwa bila maktaba ya uhuishaji.

Mradi huu unachanganya injini ya uhuishaji isiyo na framework na kiolesura cha Vue 3. Injini yake pia haina saa: kuita engine.sample(t) hutengeneza fremu kutoka kwa muda uliotolewa pekee. Hii hufanya kusimamisha, kutafuta, hakikisho zilizogandishwa, na majaribio bila DOM kuwa thabiti.

Vipengele Muhimu

Hali kumi na nne zilizopimwa: Avatar inajumuisha hali kama idle, wink, orbit, na burst.
Ubinafsishaji wa avatar: Chagua kutoka kwa maumbo 8 ya mwili, rangi 12, na sura 16 za kupumzika. Chaguo huhifadhiwa kati ya ziara.
Kihariri cha ratiba: Panga hali, sanidi muda ambao kila hali inashikiliwa, na uhifadhi uhuishaji unaotokana.
Miundo mingi ya kuhamisha: Hamisha avatar kama SVG, PNG, au GIF iliyohuishwa, au hamisha ratiba kamili kama GIF au MP4.
Usimbaji wa video kwa mahitaji: Kisimbaji cha video hupakiwa tu wakati kinahitajika kwa mara ya kwanza.
Lugha tatu: Kiolesura kinasaidia Kifaransa, Kiingereza, na Kichina.
Utoaji thabiti: Muda uliotolewa daima hutengeneza picha ile ile, ukisaidia fremu zilizogandishwa haswa na majaribio yanayoweza kurudiwa.

Mahitaji ya Awali

Bloub hutumia Vue 3, Vite, TypeScript, Tailwind CSS 4, na pnpm. Sakinisha mazingira ya Node.js na pnpm kabla ya kuendelea.

Sakinisha na Endesha Bloub

Nakili au pakua hazina na fungua saraka yake kwenye terminal.
Sakinisha tegemezi:
```
pnpm install
```
Anzisha seva ya maendeleo ya Vite:
```
pnpm dev
```
Fungua http://localhost:5190 kwenye kivinjari.

Endesha Majaribio na Unda Toleo la Uzalishaji

Endesha seti ya majaribio ya Vitest kwa:

pnpm test

Angalia msimbo wa TypeScript na jenga programu kwa:

pnpm build

Amri ya kujenga huendesha vue-tsc --noEmit kabla ya vite build. Hazina kimakusudi haina usanidi wa ESLint au Prettier, kwa hivyo vue-tsc ndiyo lango lake kuu la ubora wa msimbo. Endesha pnpm build kabla ya kuchukulia mabadiliko kuwa yamekamilika.

Chunguza Programu

Upau wa kushoto hubadilisha kati ya maonyesho makuu matatu.

Binafsisha Avatar

Fungua Customise kuchagua mojawapo ya maumbo 8 ya mwili, rangi 12, na sura 16 za kupumzika. Programu huhifadhi chaguo hizi kati ya ziara.

Unda Ratiba ya Uhuishaji

Fungua Animations kupanga hali za avatar katika ratiba. Weka muda ambao kila hali inapaswa kushikiliwa, hakiki mfuatano, na uhifadhi. Kielekezi cha uchezaji hufuatilia nafasi za ratiba badala ya majina ya hali pekee, ikiruhusu hali ile ile kuonekana zaidi ya mara moja katika montage.

Badilisha Lugha na Angalia Sifa

Fungua Settings kuchagua Kifaransa, Kiingereza, au Kichina na kuona sifa za mradi.

Chunguza Hali Zote 14

Ongeza #planche kwenye URL ya ndani kuonyesha hali zote 14 pembeni kwa pembeni kama fremu zilizogandishwa:

http://localhost:5190/#planche

Hali 14, zilizogandishwa pembeni kwa pembeni

Onyesho hili ni muhimu kwa kuangalia haraka kama mabadiliko yamebadilisha hali yoyote bila kutarajiwa.

Kufungua hali maalum huku uchezaji umesimamishwa, tumia vigezo vya hash etat na stop. Kwa mfano:

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

Tumia Kipengele cha Vue cha BloubBot

Kipengele cha BloubBot kinasaidia uchezaji unaodhibitiwa na fremu zilizogandishwa haswa. Mfano wa msingi unaodhibitiwa unaweza kuunganisha block ya sasa ya ratiba, hali, na hali ya uchezaji:

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

Modeli ya block ni kielekezi cha uchezaji. Tofauti hii ni muhimu kwa sababu ratiba inaweza kuwa na hali ile ile mara nyingi. Fahirisi ya block hutambua nafasi halisi ya ratiba, huku state ikifuata kielekezi hicho kama matokeo.

Toa Fremu Iliyogandishwa

Pitisha hali, ukubwa, na thamani ya frozen-at kutoa fremu moja haswa bila kuanzisha mzunguko wa uhuishaji:

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

Utoaji uliogandishwa ndiyo jinsi Bloub hutengeneza vijipicha na ubao kamili wa hali. Pia ni muhimu unapohitaji hakikisho thabiti au fremu katika wakati maalum.

Ingizo Zinazopatikana za Kipengele

Kipengele kinaonyesha props zifuatazo:

size
shape
color
expression
paper
frozenAt
cycle
follow
gaze

Modeli zake ni block, state, playing, na elapsed. Angalia BloubBot.vue kwa aina haswa na maelezo ya kipengele.

Hamisha Avatar na Ratiba

Cho chote kinachoonyeshwa kwenye skrini kinaweza kuhamishwa. Kwa avatar moja, chagua SVG, PNG, au GIF iliyohuishwa. Kwa ratiba nzima, chagua GIF au MP4.

Usafirishaji wa SVG na PNG hauhitaji maktaba ya ziada. Kisimbaji cha video kinachohitajika kwa matokeo yenye uhuishaji hupakiwa tu mara ya kwanza kinapohitajika, kwa hivyo hakihitaji kupakuliwa wakati wa uhariri wa kawaida. Maelezo zaidi ya utekelezaji yanapatikana katika nyaraka za usafirishaji.

Vidokezo vya Juu

Tumia Injini Safi kwa Fremu Zinazotabirika

Msimbo chini ya src/bot/ hauna mfumo wala saa. Tumia engine.sample(t) unapohitaji picha kwa muda husika. Kwa sababu matokeo hutegemea muda uliotolewa badala ya saa hai, kusimamisha, kuendelea, kutafuta, kupima, na kutengeneza vijipicha kunabaki thabiti.

Usirahisisha Konstanti Zilizopimwa

Thamani nyingi zinaweza kuonekana kiholela, lakini zilipimwa kutoka kwa video ya rejea iliyokatwa kwa fremu 10 kwa sekunde. Silhouettes zilitolewa kwa ray casting ya sehemu ndogo ya pikseli, macho yaliwekwa kama kapsuli, na rangi pamoja na upana wa mistari zilichukuliwa moja kwa moja.

Kukadiria konstanti kwa thamani rahisi zaidi kunaweza kupunguza ufanano wa kuona ambao mradi umeundwa kuhifadhi.

Weka sifa hizi zilizopimwa akilini unaporekebisha uhuishaji:

Macho huelekea katika mwelekeo wa backslash, takriban digrii 26 kutoka wima.
Mwili kimsingi ni duara kamili, na mkengeuko wa radial chini ya 0.7%, badala ya squircle.
Mabadiliko hutumia ease-outs za kielelezo, na mwili hauendi zaidi ya lengo.
Wakati wa athari ya comet, nukta inabaki tuli huku mkia ukizunguka.
Avatar iliyopumzika haielei; hisia yake ya uhai hutoka kwa mkengeuko wa macho na kupepesa.

Angalia nyaraka za vipimo kabla ya kubadilisha wasifu au kuzalisha upya profiles.ts.

Kagua Usanifu Kabla ya Kupanua Injini

Nyaraka za mradi zinaeleza injini, morphing ya radial-profile, na matumizi ya maumbo ya macho kama mashimo ya mask. Soma mwongozo wa usanifu kabla ya kuongeza hali au kubadilisha tabia ya morphing. Kiolesura, mlolongo wa kuwasili, na safu ya ujanibishaji zimeandikwa kando katika mwongozo wa kiolesura, mwongozo wa utangulizi, na mwongozo wa ujanibishaji.

Angalia Historia ya Toleo Kabla ya Kutatua Hitilafu

orodha ya mabadiliko inaingizo moja kwa kila toleo. Iangalie ili kubaini kama nakala yako ya ndani inajumuisha marekebisho fulani.

Hitimisho

Bloub hutoa avatar ya SVG iliyopimwa kwa uangalifu, kiolesura cha ubinafsishaji wa kuona, kihariri cha ratiba, sampuli ya fremu zinazotabirika, na miundo kadhaa ya usafirishaji bila kutegemea maktaba ya uhuishaji. Anza na ubao wa hali uliojengwa ndani na mifano ya vipengele, endesha majaribio na ujenzi wa uzalishaji baada ya mabadiliko, na uhifadhi konstanti zilizopimwa unapopanua uhuishaji.

Msimbo unapatikana chini ya leseni ya MIT. Mradi hauhusiani na, hauidhinishwi na, wala hauunganishwi na x.ai. Leseni inashughulikia msimbo wa hifadhi, si muundo unaouunda upya.