RuiC-PoseAtlas ٹیوٹوریل: سہ لسانی انسانی پوز ریفرنس گیلری بنانا اور استعمال کرنا

RuiC-PoseAtlas سے تعارف

RuiC-PoseAtlas انسانی جسمانی پوز کے حوالے کے لیے ایک مکمل طور پر جامد، زیرو رن ٹائم ڈیپینڈنسی والا تصویری ذخیرہ ہے۔ اس منصوبے میں 288 پوز گروپس اور 1,439 مینیکن لائن ڈرائنگز شامل ہیں۔ ایک ہی پوز کے سامنے، ترچھے پہلو، پہلو، اوپر سے اور نیچے سے زاویوں کو مرکزی طور پر منظم کیا گیا ہے، تاکہ تخلیق کار جسمانی ساخت، تناسب، اعضا کی سمت اور کیمرے کے تعلق کا مسلسل موازنہ کر سکیں۔

یہ AI ڈرائنگ، illustration، کامکس، 3D ماڈلنگ، اینیمیشن، فوٹوگرافی کمپوزیشن اور بصری ڈیزائن کے لیے موزوں ہے، اور اسے مقامی فرنٹ اینڈ منصوبوں کے تعلیمی نمونے کے طور پر بھی استعمال کیا جا سکتا ہے۔ ویب سائٹ خالص HTML، CSS اور ES Modules سے بنائی گئی ہے اور React، Vue یا کسی bundler پر منحصر نہیں ہے۔

مواد سے متعلق اطلاع: یہ منصوبہ بالغ تخلیق کاروں کے لیے ہے، اور اس کا کچھ مواد نابالغوں کے لیے موزوں نہیں۔ استعمال کے دوران اپنے علاقے کے قوانین اور پلیٹ فارم کے ضوابط کی پابندی کریں۔

اگر آپ صرف براہِ راست براؤز کرنا چاہتے ہیں تو RuiC-PoseAtlas آن لائن ڈیمو کھولیں۔ اگر سورس کوڈ کا مطالعہ، ڈیٹا کی تخصیص یا خود میزبانی درکار ہو تو بعد کے مراحل کے مطابق repository کلون کریں۔

بنیادی خصوصیات

• متعدد زاویوں کا موازنہ: ہر پوز گروپ میں 4 سے 5 زاویے شامل ہیں، جنہیں کارڈ یا بڑے تصویر والے صفحے پر تبدیل کیا جا سکتا ہے۔
• براؤزنگ کے دو طریقے: ”پوز کے لحاظ سے“ ایک گروپ کے زاویوں کو اکٹھا کرتا ہے، جبکہ ”ایک تصویر“ موڈ ہر زاویے کو الگ دکھاتا ہے۔
• مشترکہ فلٹرنگ: سیریز، زمرے اور زاویے کے لحاظ سے فلٹر کیا جا سکتا ہے۔ منصوبے میں 4 موادی سیریز اور 26 ذیلی زمرے شامل ہیں۔
• کثیر لسانی تلاش: چینی، انگریزی اور جاپانی نام بیک وقت index کیے جاتے ہیں۔ پوز نمبر، زمرہ اور سیریز سے بھی تلاش کی جا سکتی ہے۔
• تین زبانوں کا انٹرفیس: چینی، English اور 日本語 کے درمیان فوری تبدیلی ممکن ہے، اور انتخاب localStorage میں محفوظ ہو جاتا ہے۔
• کی بورڈ کنٹرول: سمت کے بٹن زاویہ اور پوز تبدیل کرتے ہیں، جبکہ Esc بڑا تصویر والا منظر بند کرتا ہے۔
• اصل تصویر ڈاؤن لوڈ: بڑے تصویر والے صفحے پر 900 × 1200 PNG فائل ڈاؤن لوڈ کی جا سکتی ہے۔
• ڈیپ لنکس: URL کے ذریعے مخصوص زبان، پوز اور زاویہ براہِ راست شیئر کیا جا سکتا ہے۔
• رسپانسیو لے آؤٹ: ڈیسک ٹاپ پر متعدد کالموں کا گرڈ، موبائل پر دو کالم کارڈز اور تنگ اسکرین پر بڑا تصویر والا براؤزنگ موڈ دستیاب ہے۔
• انجینئرنگ کی توثیق: npm run verify کے ذریعے ڈیٹا، تراجم، فائل حوالوں، تصویر کے سائز اور i18n کیز کی جانچ کی جا سکتی ہے۔

رن ٹائم ماحول کی تیاری

روزمرہ براؤزنگ کے لیے صرف ایک جدید براؤزر اور جامد HTTP سرور درکار ہے۔ README میں Python 3 استعمال کرنے کی تجویز ہے؛ اگر ڈیٹا دوبارہ بنانا، تصاویر بحال کرنا یا مکمل سالمیت کی جانچ کرنا ہو تو Node.js 18 یا اس کے بعد کا ورژن بھی درکار ہوگا۔

• Chrome، Edge، Safari یا Firefox جیسے جدید براؤزر
• Python 3 یا کوئی دوسرا جامد سرور
• Node.js 18 یا اس کے بعد کا ورژن، صرف اسکرپٹ کے کاموں کے لیے
• کافی ڈسک اسپیس، کیونکہ اصل PNG تصاویر تقریباً 654 MB اور تھمب نیلز تقریباً 25 MB جگہ لیتے ہیں

مقامی تنصیب اور آغاز

پہلا مرحلہ: repository کلون کریں

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

repository میں مکمل 1,439 اصل PNG تصاویر اور 1,439 JPEG تھمب نیلز شامل ہیں، اس لیے پہلی بار کلون کرنے میں کچھ وقت لگ سکتا ہے۔

دوسرا مرحلہ: جامد سرور شروع کریں

python3 -m http.server 8123 --bind 127.0.0.1

پھر براؤزر میں یہ پتہ کھولیں:

http://127.0.0.1:8123/

اگر Node.js پہلے سے نصب ہے تو منصوبے کی فراہم کردہ کمانڈ بھی براہِ راست چلائی جا سکتی ہے:

npm start

index.html پر براہِ راست ڈبل کلک نہ کریں۔ صفحہ fetch() کے ذریعے data/poses.json پڑھتا ہے، اور file:// پروٹوکول کے تحت براؤزر کی same-origin policy اسے روک سکتی ہے، جس سے خالی صفحہ ظاہر ہو سکتا ہے۔

بنیادی استعمال

پوز تلاش اور فلٹر کریں

1. تلاش کے خانے میں چینی، انگریزی یا جاپانی پوز کا نام، یا P019 جیسا نمبر درج کریں۔
2. مواد کا دائرہ محدود کرنے کے لیے اوپر موجود سیریز کے ٹیگز استعمال کریں۔
3. متعدد فلٹر شرائط کو یکجا کرنے کے لیے زمرہ اور زاویہ منتخب کریں۔
4. پوز گروپس کا موازنہ کرنے یا ایک ایک تصویر فلٹر کرنے کے لیے ”پوز کے لحاظ سے“ اور ”ایک تصویر“ کے درمیان تبدیل کریں۔
5. موبائل پر ”فلٹر“ پر ٹیپ کر کے منہدم فلٹر پینل کھولیں۔

کارڈ اور بڑی تصویر براؤز کریں

کارڈ کے نچلے حصے میں موجود زاویے کے تھمب نیل پر کلک کر کے اسی کارڈ میں متعلقہ زاویے کا پیش نظارہ کیا جا سکتا ہے؛ کارڈ کی مرکزی تصویر یا عنوان پر کلک کرنے سے بڑا تصویر والا منظر کھلتا ہے۔ اگر پہلے کارڈ میں زاویہ منتخب کر لیا جائے اور پھر مرکزی تصویر پر کلک کیا جائے تو بڑا تصویر والا صفحہ اسی زاویے سے شروع ہوگا۔

بڑے تصویر والے صفحے پر درج ذیل کی بورڈ کنٹرول دستیاب ہیں:

• ← اور →: پچھلے یا اگلے زاویے پر جائیں۔
• ↑ اور ↓: پچھلے یا اگلے پوز پر جائیں۔
• Esc: بڑا تصویر والا منظر بند کریں۔
• Tab: بڑے تصویر والے صفحے کے کنٹرولز کے درمیان فوکس منتقل کریں۔

صفحہ پوز کا نام، نمبر، سیریز، زمرہ، موجودہ زاویہ اور تصویر کی تفصیلات بھی دکھاتا ہے۔ حوالہ جاتی مواد محفوظ کرنے کے لیے ”اصل تصویر ڈاؤن لوڈ کریں (PNG)“ پر کلک کریں۔

زبان تبدیل کریں اور ڈیپ لنک شیئر کریں

اوپر دائیں جانب چینی، انگریزی اور جاپانی کے درمیان تبدیل کیا جا سکتا ہے۔ زبان کا انتخاب پہلے URL پیرامیٹر، پھر localStorage سے پڑھا جاتا ہے، اور آخر میں براؤزر کی زبان کی بنیاد پر ڈیفالٹ انٹرفیس طے ہوتا ہے۔

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

دوسری مثال جاپانی انٹرفیس کھولے گی اور full_single_P019 کے پہلو والے زاویے پر لے جائے گی۔ آن لائن تعیناتی کے بعد بھی مخصوص مواد شیئر کرنے کے لیے یہی پیرامیٹرز اور hash ساخت استعمال کی جا سکتی ہے۔

منصوبے کی ساخت سمجھیں

منصوبہ data-driven ڈیزائن استعمال کرتا ہے، اور data/poses.json تصویری ذخیرے کا بنیادی ڈیٹا ماخذ ہے۔ فلٹرنگ، تلاش، کارڈ اور بڑے تصویر والے صفحات اسی ڈیٹا سے تیار ہوتے ہیں۔

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: ڈیٹا لوڈنگ، تلاش و فلٹرنگ، صفحہ رینڈرنگ، بڑے تصویر والے تعامل اور شارٹ کٹس کا ذمہ دار ہے۔
• assets/js/i18n.js: تین زبانوں کے انٹرفیس متن کو مرکزی طور پر محفوظ کرتا ہے۔
• data/poses.json: 288 پوز گروپس، تین زبانوں کے نام اور تصاویر کے راستے محفوظ کرتا ہے۔
• img/: 900 × 1200 PNG اصل تصاویر محفوظ کرتا ہے۔
• thumbs/: 300 × 400 JPEG تھمب نیلز محفوظ کرتا ہے۔
• scripts/: ڈیٹا بنانے، تصاویر بحال کرنے اور سالمیت کی جانچ کے اسکرپٹس پر مشتمل ہے۔

ڈیٹا دوبارہ بنائیں اور جانچیں

ڈیٹا اسکرپٹس کو کسی third-party پیکیج کی ضرورت نہیں۔ ماخذ ڈیٹا یا انگریزی نام تبدیل کرنے کے بعد یہ کمانڈز چلائی جا سکتی ہیں:

npm run data
npm run verify

npm run data، scripts/source/ میں موجود چینی و جاپانی ریکارڈز اور انگریزی ناموں کی جدول کو یکجا کرتا ہے، زاویوں کو پوز نمبر کے لحاظ سے گروپ کرتا ہے، پھر مختصر data/poses.json تیار کرتا ہے۔

npm run verify پوز اور تصاویر کی تعداد، تین زبانوں کے نام، سیریز اور زمرے کے تراجم، تصویری حوالوں، فائلوں کی تکرار، تصویر کے فارمیٹ اور سائز، نیز صفحے میں استعمال ہونے والی i18n کیز کی تکمیل جانچتا ہے۔ ڈیٹا تبدیل کرنے کے بعد یہ کمانڈ ہمیشہ چلائیں تاکہ غائب تصاویر، ٹوٹے ہوئے لنکس یا نامکمل تراجم پیدا نہ ہوں۔

نیا پوز گروپ شامل کریں

1. 4 سے 5 اصل PNG تصاویر img/ میں رکھیں۔
2. متعلقہ 300 × 400 JPEG تھمب نیلز thumbs/ میں رکھیں۔
3. scripts/source/ کے ماخذ ریکارڈ میں پوز کا اندراج شامل کریں۔
4. scripts/en-pose-names.json میں انگریزی نام شامل کریں۔
5. npm run data && npm run verify چلائیں۔

تصاویر شامل کرنے سے پہلے لازماً تصدیق کریں کہ آپ کے پاس متعلقہ استعمال اور تقسیم کے حقوق موجود ہیں۔ منصوبے کا سورس کوڈ MIT License کے تحت ہے، لیکن تصاویر، اصل ڈیٹا اور نام MIT لائسنس کے دائرے میں شامل نہیں ہیں۔

غائب تصویری فائلیں بحال کریں

اگر مکمل طور پر نیا کلون بنانے کے بعد کچھ تصاویر غائب ملیں تو یہ کمانڈ چلائیں:

npm run fetch-images

اسکرپٹ پوز ڈیٹا سے تصویری راستے جمع کرتا ہے، غائب فائلیں بیک وقت ڈاؤن لوڈ کرتا ہے، درست دستخط والی موجودہ فائلوں کو چھوڑ دیتا ہے، اور PNG و JPEG فائلوں کے دستخط کی جانچ کرتا ہے۔ ڈاؤن لوڈ ناکام ہونے کی صورت میں یہ ماخذ تبدیل کر کے دوبارہ کوشش بھی کرتا ہے۔ repository میں Fetch image assets نامی GitHub Actions ورک فلو بھی موجود ہے۔

جامد ویب سائٹ کے طور پر تعینات کریں

GitHub Pages استعمال کریں

repository میں .github/workflows/deploy-pages.yml پہلے سے شامل ہے۔ سائٹ سے متعلق فائلیں main برانچ پر push کرنے کے بعد ورک فلو خودکار طور پر تعینات ہو جائے گا؛ اسے Actions صفحے سے Deploy to GitHub Pages منتخب کر کے دستی طور پر بھی چلایا جا سکتا ہے۔

یہ عمل صرف سائٹ چلانے کے لیے درکار entry point، assets، ڈیٹا اور تصاویر کو پیکیج کرتا ہے، اور README، build اسکرپٹس یا دستاویزات کے فولڈر میں موجود دیگر تمام فائلیں عوامی نہیں کرتا۔

Cloudflare Pages استعمال کریں

1. Cloudflare Pages میں GitHub repository سے کنیکٹ کریں۔
2. Framework preset کو None پر سیٹ کریں۔
3. Build command خالی چھوڑ دیں۔
4. Output directory کو / پر سیٹ کریں۔
5. ترتیبات محفوظ کریں اور تعیناتی شروع کریں۔

منصوبے کی فراہم کردہ _headers فائل اصل تصاویر اور تھمب نیلز کے لیے ایک سال کی مضبوط cache، ڈیٹا فائلوں کے لیے پانچ منٹ کی cache، اور index.html کی ہر بار دوبارہ توثیق ترتیب دیتی ہے۔

دیگر ہوسٹنگ پلیٹ فارم

Netlify، Vercel، object storage یا Nginx بھی اس منصوبے کی میزبانی کر سکتے ہیں۔ چونکہ کوئی build مرحلہ نہیں ہے، اس لیے repository کی root directory کو جامد سائٹ ڈائریکٹری کے طور پر استعمال کریں۔ اگر custom domain استعمال کیا جائے تو بہتر ہے کہ index.html میں موجود og:image کو absolute URL میں تبدیل کر دیں، تاکہ سوشل پلیٹ فارم cover image حاصل کر سکیں۔

اعلیٰ درجے کے استعمال کی تجاویز

• تعیناتی کا حجم کم کریں: اگر صرف گرڈ براؤزنگ درکار ہو تو صرف تھمب نیلز رکھیں اور ڈیٹا میں اصل تصویر کے فیلڈز اور ڈاؤن لوڈ منطق کو ایڈجسٹ کریں، لیکن اس کے نتیجے میں بڑی تصویر اور اصل تصویر ڈاؤن لوڈ کرنے کی سہولت دستیاب نہیں رہے گی۔
• ضرورت کے مطابق لوڈنگ سے فائدہ اٹھائیں: گیلری گرڈ صرف JPEG تھمب نیلز کی درخواست کرتا ہے، جبکہ PNG اصل تصویر صرف بڑی تصویر کھولنے یا ڈاؤن لوڈ کرنے کے وقت لوڈ ہوتی ہے؛ ابتدائی اسکرین کی رفتار کے لیے اصل تصاویر حذف کرنے کی ضرورت نہیں۔
• نئی زبان شامل کریں: assets/js/i18n.js، پوز ڈیٹا کے names فیلڈ اور زبان تبدیل کرنے والے کنٹرول میں بیک وقت ترمیم کریں، پھر مکمل سالمیت کی جانچ چلائیں۔
• متعلقہ راستے برقرار رکھیں: پروجیکٹ کے تمام وسائل متعلقہ راستے استعمال کرتے ہیں، اس لیے اسے ڈومین کی جڑ یا ذیلی ڈائریکٹری میں تعینات کیا جا سکتا ہے۔
• ترمیم کے بعد پہلے جانچ کریں: نئی تصاویر شامل کرنے، زمرہ جات ایڈجسٹ کرنے یا ترجمہ تبدیل کرنے کی صورت میں npm run verify چلائیں۔
• اشاعت کے دائرہ کار پر توجہ دیں: اگر GitHub Pages کا برانچ پبلشنگ موڈ استعمال کیا جائے تو پبلشنگ ڈائریکٹری محدود رکھیں، تاکہ اسکرپٹس، دستاویزات یا ریپوزٹری کی غیر متعلقہ فائلیں جامد وسائل کے طور پر ظاہر نہ ہوں۔

کاپی رائٹ اور استعمال کی حدود

پروجیکٹ کا فرنٹ اینڈ کوڈ، اسٹائلز، اسکرپٹس اور دستاویزات MIT License کے تحت ہیں؛ تصاویر، اصل ڈیٹا اور ناموں کے حقوق اصل مصنفین کے پاس ہیں اور یہ MIT لائسنس کے دائرے میں شامل نہیں۔ اصل مصنفین ان کاموں کو تخلیقی حوالہ کے طور پر استعمال کرنے کی اجازت دیتے ہیں، جس میں تجارتی تخلیق، تدوین اور حوالہ شامل ہیں، لیکن خود تصویری ڈیٹا کو دوبارہ تقسیم، دوبارہ شائع یا دوبارہ فروخت کرنا ممنوع ہے۔ تجارتی استعمال سے پہلے اصل سائٹ کی وضاحت پڑھیں اور خود قانونی مطابقت کی تصدیق کریں۔

اصل پروجیکٹ POSE-DB-01 ہے، اور اصل مصنف ギア ہیں۔ RuiC-PoseAtlas ایک غیر سرکاری مرتب کردہ ورژن ہے، جس میں بنیادی طور پر ڈیٹا کی تنظیم، انگریزی ناموں کا اضافہ اور فرنٹ اینڈ کی ازسرنو تحریر کی گئی ہے۔

خلاصہ

RuiC-PoseAtlas نے مختلف زاویوں پر مشتمل منتشر پوز مواد کو ایک ایسی تین لسانی جامد تصویری گیلری میں منظم کیا ہے جس میں تلاش، فلٹرنگ اور ڈاؤن لوڈ کی سہولت موجود ہے۔ عام صارفین اسے براہ راست کمپوزیشن اور انداز سازی میں مدد کے لیے استعمال کر سکتے ہیں، جبکہ ڈویلپرز اس کے ڈیٹا پر مبنی فن تعمیر، مقامی ES Modules، بین الاقوامی کاری، قابل رسائی ڈیزائن اور جامد تعیناتی کے طریقے سے سیکھ سکتے ہیں۔ مقامی طور پر شروع کرنے کے بعد پہلے کی بورڈ براؤزنگ اور ڈیپ لنکس سے واقف ہونے کی سفارش کی جاتی ہے، پھر ضرورت کے مطابق ڈیٹا کو وسعت دیں یا اپنا ورژن تعینات کریں۔