Mafunzo ya RuiC-PoseAtlas: Kuunda na Kutumia Maktaba ya Marejeo ya Mkao wa Mwili kwa Lugha Tatu

Utangulizi wa RuiC-PoseAtlas

RuiC-PoseAtlas ni maktaba tuli kabisa ya marejeo ya mikao ya mwili wa binadamu, isiyohitaji utegemezi wowote wakati wa kuendeshwa. Mradi huu una mikao 288 na michoro ya mannekeni 1,439, ukiweka pamoja mitazamo ya mbele, ya pembeni kwa mwinamo, ya ubavu, ya juu na ya chini ya mkao uleule, ili kuwawezesha wabunifu kulinganisha kwa urahisi mkao wa mwili, uwiano, mwelekeo wa viungo na uhusiano wa kamera.

Inafaa kwa michoro ya AI, vielelezo, katuni, uundaji wa 3D, uhuishaji, upangaji wa picha na usanifu wa kuona, na pia inaweza kutumika kama mfano wa kujifunzia wa mradi wa mbele wa asili. Tovuti hii imeandikwa kwa HTML, CSS na ES Modules tupu, bila kutegemea React, Vue au kifaa cha kujenga programu.

Taarifa ya maudhui: Mradi huu unawalenga wabunifu watu wazima; baadhi ya maudhui hayawafai walio chini ya umri wa utu uzima. Unapotumia, zingatia sheria za eneo lako na kanuni za jukwaa.

Ikiwa ungependa kuvinjari moja kwa moja, fungua onyesho la mtandaoni la RuiC-PoseAtlas. Unapohitaji kuchunguza msimbo wa chanzo, kubinafsisha data au kujiendeshea upelekezaji, kloni hazina kwa kufuata hatua zilizo hapa chini.

Vipengele muhimu

• Ulinganishaji wa mitazamo mingi: Kila kundi la mikao lina mitazamo 4 hadi 5, inayoweza kubadilishwa kwenye kadi au ukurasa wa picha kubwa.
• Njia mbili za kuvinjari: “Kwa mkao” huunganisha mitazamo ya kundi moja, huku hali ya “Moja moja” ikionyesha kila mtazamo kivyake.
• Vichujio mseto: Unaweza kuchuja kwa mfululizo, kategoria na mtazamo; mradi una mifululizo 4 ya maudhui na kategoria ndogo 26.
• Utafutaji wa lugha nyingi: Majina ya Kichina, Kiingereza na Kijapani huwekwa kwenye faharasa kwa pamoja; unaweza pia kutafuta nambari ya mkao, kategoria na mfululizo.
• Mkondo wa lugha tatu: Unaweza kubadilisha mara moja kati ya 中文, English na 日本語, na chaguo huhifadhiwa kwenye localStorage.
• Udhibiti wa kibodi: Vifunguo vya mishale hubadilisha mitazamo na mikao, huku Esc ikifunga picha kubwa.
• Upakuaji wa picha asili: Ukurasa wa picha kubwa hutoa upakuaji wa faili ya PNG yenye ukubwa wa 900 × 1200.
• Viungo vya moja kwa moja: Unaweza kushiriki moja kwa moja lugha, mkao na mtazamo maalum kupitia URL.
• Muundo unaobadilika: Unaunga mkono gridi ya safu nyingi kwenye kompyuta, kadi za safu mbili kwenye simu na kuvinjari picha kubwa kwenye skrini nyembamba.
• Ukaguzi wa kiuhandisi: npm run verify hukagua data, tafsiri, marejeo ya faili, vipimo vya picha na funguo za i18n.

Kuandaa mazingira ya kuendeshea

Kwa kuvinjari kila siku unahitaji tu kivinjari cha kisasa na seva ya HTTP tuli. README inapendekeza Python 3; ikiwa unahitaji kutengeneza upya data, kurejesha picha au kufanya ukaguzi kamili wa uadilifu, utahitaji pia Node.js 18 au toleo la juu zaidi.

• Vivinjari vya kisasa kama Chrome, Edge, Safari au Firefox
• Python 3 au seva nyingine tuli
• Node.js 18 au zaidi, kwa kazi za hati pekee
• Nafasi ya kutosha kwenye diski, kwa kuwa picha asili za PNG huchukua takriban 654 MB na vijipicha takriban 25 MB

Kusakinisha na kuanzisha ndani ya kompyuta

Hatua ya kwanza: Kloni hazina

git clone https://github.com/HRuiCcc/RuiC-PoseAtlas.git
cd RuiC-PoseAtlas

Hazina ina picha zote 1,439 za PNG na vijipicha vyote 1,439 vya JPEG, hivyo kloni ya kwanza inaweza kuchukua muda.

Hatua ya pili: Anzisha seva tuli

python3 -m http.server 8123 --bind 127.0.0.1

Kisha tembelea kwenye kivinjari:

http://127.0.0.1:8123/

Ikiwa Node.js tayari imesakinishwa, unaweza pia kuendesha amri iliyotolewa na mradi moja kwa moja:

npm start

Usibofye index.html mara mbili moja kwa moja. Ukurasa husoma data/poses.json kupitia fetch(); chini ya itifaki ya file://, kivinjari kinaweza kuzuia ombi hilo kwa sababu ya sera ya asili moja, na kusababisha ukurasa kuwa tupu.

Matumizi ya msingi

Kutafuta na kuchuja mikao

1. Ingiza jina la mkao kwa Kichina, Kiingereza au Kijapani kwenye kisanduku cha utafutaji, au ingiza nambari kama P019.
2. Tumia lebo za mfululizo zilizo juu kupunguza eneo la maudhui.
3. Endelea kuchagua kategoria na mtazamo ili kuchanganya masharti kadhaa ya uchujaji.
4. Badilisha kati ya “Kwa mkao” na “Moja moja” ili kulinganisha makundi ya mikao au kuchuja picha moja moja.
5. Kwenye simu, gusa “Chuja” ili kufungua paneli ya vichujio iliyokunjwa.

Kuvinjari kadi na picha kubwa

Bofya kijipicha cha mtazamo kilicho chini ya kadi ili kuhakiki mtazamo huo moja kwa moja kwenye kadi; bofya picha kuu au kichwa cha kadi ili kufungua picha kubwa. Ukichagua mtazamo kwanza kwenye kadi kisha ubofye picha kuu, ukurasa wa picha kubwa utaanza kuonyesha mtazamo huo.

Ukurasa wa picha kubwa unaunga mkono vitendo vifuatavyo vya kibodi:

• ← na →: Badilisha hadi mtazamo uliotangulia au unaofuata.
• ↑ na ↓: Badilisha hadi mkao uliotangulia au unaofuata.
• Esc: Funga picha kubwa.
• Tab: Zungusha ulengaji kati ya vidhibiti vya ukurasa wa picha kubwa.

Ukurasa pia huonyesha jina la mkao, nambari, mfululizo, kategoria, mtazamo wa sasa na vipimo vya picha. Unapohitaji kuhifadhi nyenzo ya marejeo, bofya “Pakua picha asili (PNG)”.

Kubadilisha lugha na kushiriki viungo vya moja kwa moja

Kona ya juu kulia hukuwezesha kubadilisha kati ya Kichina, Kiingereza na Kijapani. Chaguo la lugha husoma kwanza kigezo cha URL, kisha localStorage, na mwishowe huamua kiolesura chaguo-msingi kulingana na lugha ya kivinjari.

http://127.0.0.1:8123/?lang=en
http://127.0.0.1:8123/?lang=ja#pose=full_single_P019&angle=side

Mfano wa pili utafungua kiolesura cha Kijapani na kuelekeza kwenye mtazamo wa ubavu wa full_single_P019. Baada ya kupeleka mtandaoni, unaweza pia kutumia vigezo na muundo huo wa heshi kushiriki maudhui maalum.

Kuelewa muundo wa mradi

Mradi huu unatumia muundo unaoendeshwa na data; data/poses.json ndiyo chanzo kikuu cha data cha maktaba. Vichujio, utafutaji, kadi na kurasa za picha kubwa zote hutengenezwa kutoka kwenye data hii.

RuiC-PoseAtlas/
├── index.html
├── assets/
│   ├── css/app.css
│   ├── js/app.js
│   └── js/i18n.js
├── data/poses.json
├── img/
├── thumbs/
├── scripts/
├── .github/workflows/
└── package.json

• assets/js/app.js: Inahusika na upakiaji wa data, utafutaji na uchujaji, uchoraji wa ukurasa, mwingiliano wa picha kubwa na vitufe vya mkato.
• assets/js/i18n.js: Huhifadhi kwa pamoja maandishi ya kiolesura katika lugha tatu.
• data/poses.json: Huhifadhi makundi 288 ya mikao, majina ya lugha tatu na njia za picha.
• img/: Huhifadhi picha asili za PNG zenye ukubwa wa 900 × 1200.
• thumbs/: Huhifadhi vijipicha vya JPEG vyenye ukubwa wa 300 × 400.
• scripts/: Ina hati za kujenga data, kurejesha picha na kukagua uadilifu.

Kujenga upya na kukagua data

Hati za data hazitegemei vifurushi vya watu wengine. Baada ya kurekebisha data chanzo au majina ya Kiingereza, unaweza kuendesha:

npm run data
npm run verify

npm run data huunganisha rekodi za Kichina na Kijapani kutoka scripts/source/ pamoja na jedwali la majina ya Kiingereza, hukusanya mitazamo kulingana na nambari ya mkao, kisha hutengeneza data/poses.json iliyobanwa.

npm run verify hukagua idadi ya mikao na picha, majina ya lugha tatu, tafsiri za mfululizo na kategoria, marejeo ya picha, mafaili yanayojirudia, muundo na vipimo vya picha, pamoja na ukamilifu wa funguo za i18n zinazotumiwa na ukurasa. Baada ya kurekebisha data, endesha amri hii kila mara ili kuzuia picha kukosekana, viungo kukatika au tafsiri kukosekana.

Kuongeza mkao mpya

1. Weka picha asili 4 hadi 5 za PNG kwenye img/.
2. Weka vijipicha vinavyolingana vya JPEG vya 300 × 400 kwenye thumbs/.
3. Ongeza kipengee cha mkao kwenye rekodi chanzo za scripts/source/.
4. Ongeza jina la Kiingereza kwenye scripts/en-pose-names.json.
5. Endesha npm run data && npm run verify.

Kabla ya kuongeza picha, lazima uthibitishe kuwa una ruhusa zinazofaa za matumizi na usambazaji. Msimbo wa chanzo wa mradi umetolewa chini ya MIT License, lakini picha, data asili na majina havijumuishwi kwenye leseni ya MIT.

Kurejesha mafaili ya picha yaliyokosekana

Ukigundua kuwa baadhi ya picha hazipo baada ya kloni mpya, unaweza kuendesha:

npm run fetch-images

Hati hukusanya njia za picha kutoka kwenye data ya mikao na kupakua kwa wakati mmoja mafaili yaliyokosekana, huruka mafaili yaliyopo yenye sahihi sahihi, na hukagua sahihi za mafaili ya PNG na JPEG. Upakuaji ukishindwa, hubadilisha chanzo na kujaribu tena. Hazina pia hutoa mtiririko wa GitHub Actions unaoitwa Fetch image assets.

Kupeleka kama tovuti tuli

Kutumia GitHub Pages

Hazina ina .github/workflows/deploy-pages.yml iliyojengewa ndani. Baada ya kusukuma mafaili yanayohusu tovuti kwenye tawi la main, mtiririko wa kazi utapeleka tovuti kiotomatiki; unaweza pia kuendesha Deploy to GitHub Pages mwenyewe kwenye ukurasa wa Actions.

Mchakato huu hufunga tu ukurasa wa kuanzia, rasilimali, data na picha zinazohitajika wakati wa kuendesha tovuti; hautaweka wazi README, hati za ujenzi na mafaili mengine yote yaliyo kwenye saraka ya nyaraka.

Kutumia Cloudflare Pages

1. Unganisha hazina ya GitHub kwenye Cloudflare Pages.
2. Weka Framework preset kuwa None.
3. Acha Build command ikiwa tupu.
4. Weka Output directory kuwa /.
5. Hifadhi mipangilio na uanze upelekezaji.

_headers iliyotolewa na mradi imeweka akiba ya muda mrefu ya mwaka mmoja kwa picha asili na vijipicha, akiba ya dakika tano kwa mafaili ya data, na inahitaji index.html kukaguliwa upya kila mara.

Mifumo mingine ya upangishaji

Netlify, Vercel, hifadhi ya vitu au Nginx yote inaweza kuhifadhi mradi huu. Kwa kuwa hakuna hatua ya ujenzi, unahitaji tu kutumia saraka ya mzizi wa hazina kama saraka ya tovuti tuli. Ukitumia kikoa maalum, inashauriwa kubadilisha og:image katika index.html kuwa URL kamili ili kurahisisha majukwaa ya kijamii kupata picha ya jalada.

Mbinu za matumizi ya juu

• Punguza ukubwa wa usambazaji: Ikiwa unahitaji tu kuvinjari gridi, unaweza kuhifadhi vijipicha pekee na kurekebisha sehemu za picha asili kwenye data pamoja na mantiki ya upakuaji, lakini utendaji wa kufungua picha kubwa na kupakua picha asili hautapatikana.
• Tumia upakiaji unapohitajika: Gridi ya ghala huomba tu vijipicha vya JPEG; picha asili za PNG hupakiwa pekee unapofungua picha kubwa au kuipakua. Hakuna haja ya kufuta picha asili kwa ajili ya kuongeza kasi ya mwonekano wa kwanza.
• Ongeza lugha mpya: Unahitaji kurekebisha kwa pamoja assets/js/i18n.js, sehemu ya names ya data ya mikao na kiteuzi cha kubadilisha lugha, kisha uendeshe ukaguzi kamili wa uadilifu.
• Hifadhi njia za jamaa: Rasilimali zote za mradi hutumia njia za jamaa, hivyo mradi unaweza kusambazwa kwenye mzizi wa kikoa au katika saraka ndogo.
• Fanya ukaguzi baada ya mabadiliko: Iwe unaongeza picha, kurekebisha kategoria au kubadilisha tafsiri, unapaswa kuendesha npm run verify.
• Zingatia upeo wa uchapishaji: Ikiwa unatumia hali ya uchapishaji wa tawi ya GitHub Pages, punguza saraka inayochapishwa ili kuzuia hati, nyaraka au faili zisizohusiana za hazina kuchapishwa kama rasilimali tuli.

Hakimiliki na mipaka ya matumizi

Msimbo wa mbele, mitindo, hati na nyaraka za mradi huu zimetolewa chini ya MIT License; hakimiliki za picha, data asili na majina ni za waandishi asili na hazijumuishwi katika leseni ya MIT. Waandishi asili wanaruhusu kazi hizi kutumiwa kama marejeo ya ubunifu, ikiwemo ubunifu wa kibiashara, uhariri na marejeo, lakini wanakataza kusambaza upya, kuchapisha tena au kuuza tena data ya picha yenyewe. Kabla ya matumizi ya kibiashara, soma maelezo ya tovuti asili na uthibitishe mwenyewe utii wa sheria.

Mradi asili ni POSE-DB-01, na mwandishi asili ni ギア. RuiC-PoseAtlas ni toleo lisilo rasmi lililopangwa upya, ambalo limekamilisha hasa upangaji wa data, uongezaji wa majina ya Kiingereza na uandikaji upya wa sehemu ya mbele.

Muhtasari

RuiC-PoseAtlas imepanga nyenzo za mikao zenye pembe nyingi zilizotawanyika kuwa ghala tuli la lugha tatu linaloweza kutafutwa, kuchujwa na kupakuliwa. Watumiaji wa kawaida wanaweza kulitumia moja kwa moja kusaidia kupanga muundo na mitindo, huku wasanidi wakijifunza kutokana na usanifu wake unaoendeshwa na data, ES Modules asilia, mfumo wa lugha nyingi, ufikivu na mpango wa usambazaji tuli. Baada ya kukamilisha uanzishaji wa ndani, inashauriwa kwanza kujifahamisha na kuvinjari kwa kibodi na viungo vya moja kwa moja, kisha upanue data au usambaze toleo lako kulingana na mahitaji.