RuiC-PoseAtlas টিউটোরিয়াল: ত্রিভাষিক মানবদেহের ভঙ্গি রেফারেন্স লাইব্রেরি তৈরি ও ব্যবহার

RuiC-PoseAtlas-এর সঙ্গে পরিচিতি

RuiC-PoseAtlas হলো সম্পূর্ণ স্ট্যাটিক এবং রানটাইম নির্ভরতামুক্ত মানবদেহের ভঙ্গির রেফারেন্স গ্যালারি। প্রকল্পটিতে 288টি ভঙ্গি এবং 1,439টি ম্যানিকিন লাইন-আর্ট রয়েছে। একই ভঙ্গির সামনের, তির্যক পাশের, পাশের, ওপর থেকে এবং নিচ থেকে দেখা কোণগুলো একসঙ্গে সাজানো হয়েছে, যাতে নির্মাতারা দেহভঙ্গি, অনুপাত, অঙ্গপ্রত্যঙ্গের দিকনির্দেশ এবং ক্যামেরার সম্পর্ক ধারাবাহিকভাবে তুলনা করতে পারেন।

এটি AI অঙ্কন, ইলাস্ট্রেশন, কমিকস, 3D মডেলিং, অ্যানিমেশন, ফটোগ্রাফি কম্পোজিশন এবং ভিজ্যুয়াল ডিজাইনের জন্য উপযোগী। পাশাপাশি এটি নেটিভ ফ্রন্টএন্ড প্রকল্প শেখার উদাহরণ হিসেবেও ব্যবহার করা যায়। ওয়েবসাইটটি React, Vue বা কোনো বান্ডলার ছাড়াই শুধু HTML, CSS এবং ES Modules দিয়ে তৈরি।

বিষয়বস্তু সতর্কতা: প্রকল্পটি প্রাপ্তবয়স্ক নির্মাতাদের জন্য তৈরি; কিছু বিষয়বস্তু অপ্রাপ্তবয়স্কদের জন্য উপযুক্ত নয়। ব্যবহারের সময় নিজের এলাকার আইন, বিধি এবং প্ল্যাটফর্মের নীতিমালা মেনে চলুন।

শুধু সরাসরি ব্রাউজ করতে চাইলে RuiC-PoseAtlas অনলাইন ডেমো খুলুন। সোর্স কোড বিশ্লেষণ, ডেটা কাস্টমাইজ বা নিজে স্থাপন করতে চাইলে পরবর্তী ধাপগুলো অনুসরণ করে রিপোজিটরি ক্লোন করুন।

মূল বৈশিষ্ট্য

• বহু-কোণ তুলনা: প্রতিটি ভঙ্গিতে 4 থেকে 5টি কোণ রয়েছে, যা কার্ড বা বড় ছবির পাতায় পরিবর্তন করা যায়।
• দুটি ব্রাউজিং মোড: “ভঙ্গি অনুযায়ী” একই গোষ্ঠীর কোণগুলো একত্র করে, আর “একক ছবি” মোডে প্রতিটি কোণ আলাদাভাবে দেখায়।
• সমন্বিত ফিল্টার: সিরিজ, শ্রেণি এবং কোণ অনুযায়ী ফিল্টার করা যায়। প্রকল্পটিতে 4টি বিষয়বস্তু সিরিজ ও 26টি উপশ্রেণি রয়েছে।
• বহুভাষিক অনুসন্ধান: চীনা, ইংরেজি ও জাপানি নাম একই সঙ্গে ইনডেক্স করা হয়। ভঙ্গির নম্বর, শ্রেণি এবং সিরিজ দিয়েও অনুসন্ধান করা যায়।
• তিন ভাষার ইন্টারফেস: 中文, 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 জায়গা নেয়

স্থানীয় ইনস্টলেশন ও চালু করা

ধাপ 1: রিপোজিটরি ক্লোন করুন

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

রিপোজিটরিতে সম্পূর্ণ 1,439টি PNG মূল ছবি এবং 1,439টি JPEG থাম্বনেইল রয়েছে, তাই প্রথমবার ক্লোন করতে কিছুটা সময় লাগতে পারে।

ধাপ 2: স্ট্যাটিক সার্ভার চালু করুন

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:// প্রোটোকলের অধীনে ব্রাউজারের একই-উৎস নীতির কারণে এটি আটকে গিয়ে খালি পৃষ্ঠা দেখা যেতে পারে।

মৌলিক ব্যবহার

ভঙ্গি অনুসন্ধান ও ফিল্টার করা

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-এর পাশের কোণে নিয়ে যাবে। অনলাইনে স্থাপন করার পরও একই প্যারামিটার ও হ্যাশ কাঠামো ব্যবহার করে নির্দিষ্ট বিষয়বস্তু শেয়ার করা যায়।

প্রকল্পের কাঠামো বোঝা

প্রকল্পটি ডেটা-চালিত নকশা অনুসরণ করে। 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/: ডেটা তৈরি, ছবি পুনরুদ্ধার এবং সম্পূর্ণতা যাচাইয়ের স্ক্রিপ্ট রয়েছে।

ডেটা পুনর্নির্মাণ ও যাচাই

ডেটা স্ক্রিপ্টগুলো তৃতীয় পক্ষের প্যাকেজের ওপর নির্ভর করে না। উৎস ডেটা বা ইংরেজি নাম পরিবর্তন করার পর চালাতে পারেন:

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 ফাইলের স্বাক্ষর যাচাই করে। ডাউনলোড ব্যর্থ হলে এটি অন্য উৎসে পরিবর্তন করে পুনরায় চেষ্টা করে। রিপোজিটরিতে Fetch image assets নামে একটি GitHub Actions ওয়ার্কফ্লোও রয়েছে।

স্ট্যাটিক ওয়েবসাইট হিসেবে স্থাপন

GitHub Pages ব্যবহার

রিপোজিটরিতে .github/workflows/deploy-pages.yml আগে থেকেই রয়েছে। সাইট-সম্পর্কিত ফাইল main ব্রাঞ্চে পুশ করলে ওয়ার্কফ্লো স্বয়ংক্রিয়ভাবে স্থাপন করবে। চাইলে Actions পৃষ্ঠা থেকে Deploy to GitHub Pages ম্যানুয়ালভাবেও চালানো যায়।

এই প্রক্রিয়ায় সাইট চালানোর জন্য প্রয়োজনীয় এন্ট্রি, রিসোর্স, ডেটা ও ছবিগুলোই প্যাকেজ করা হয়; README, বিল্ড স্ক্রিপ্ট এবং ডকুমেন্টেশন ডিরেক্টরির অন্যান্য ফাইল সর্বসাধারণের জন্য প্রকাশ করা হয় না।

Cloudflare Pages ব্যবহার

1. Cloudflare Pages-এ GitHub রিপোজিটরি সংযুক্ত করুন।
2. Framework preset হিসেবে None নির্বাচন করুন।
3. Build command ফাঁকা রাখুন।
4. Output directory হিসেবে / নির্ধারণ করুন।
5. সেটিংস সংরক্ষণ করে স্থাপন শুরু করুন।

প্রকল্পের দেওয়া _headers ফাইলে মূল ছবি ও থাম্বনেইলের জন্য এক বছরের শক্ত ক্যাশ, ডেটা ফাইলের জন্য পাঁচ মিনিটের ক্যাশ এবং index.html প্রতিবার পুনরায় যাচাই করার নিয়ম নির্ধারিত আছে।

অন্যান্য হোস্টিং প্ল্যাটফর্ম

Netlify, Vercel, অবজেক্ট স্টোরেজ বা Nginx দিয়েও এই প্রকল্প হোস্ট করা যায়। কোনো বিল্ড ধাপ নেই, তাই রিপোজিটরির মূল ডিরেক্টরিকেই স্ট্যাটিক সাইট ডিরেক্টরি হিসেবে ব্যবহার করুন। কাস্টম ডোমেইন ব্যবহার করলে সামাজিক প্ল্যাটফর্মে কভার ছবি সংগ্রহ সহজ করার জন্য index.html-এর og:image একটি পূর্ণাঙ্গ URL-এ পরিবর্তন করার পরামর্শ দেওয়া হয়।

উন্নত ব্যবহারের কৌশল

• ডিপ্লয়মেন্টের আকার কমানো: যদি শুধু গ্রিড ভিউ প্রয়োজন হয়, তাহলে কেবল থাম্বনেইল রেখে ডেটার মূল ছবির ক্ষেত্র এবং ডাউনলোড লজিক সামঞ্জস্য করা যায়। তবে এতে বড় ছবি ও মূল ছবি ডাউনলোডের সুবিধা আর কাজ করবে না।
• চাহিদাভিত্তিক লোডিং ব্যবহার করা: গ্যালারি গ্রিডে শুধু JPEG থাম্বনেইল অনুরোধ করা হয়, আর PNG মূল ছবি কেবল বড় ছবি খোলা বা ডাউনলোড করার সময় লোড হয়; তাই প্রথম স্ক্রিন দ্রুত দেখানোর জন্য মূল ছবি মুছে ফেলার প্রয়োজন নেই।
• নতুন ভাষা যোগ করা: একই সঙ্গে assets/js/i18n.js, পোজ ডেটার names ক্ষেত্র এবং ভাষা পরিবর্তক সংশোধন করতে হবে। এরপর অখণ্ডতা যাচাই চালাতে হবে।
• আপেক্ষিক পাথ রাখা: প্রকল্পের সব রিসোর্স আপেক্ষিক পাথ ব্যবহার করে, তাই ডোমেইনের মূল ডিরেক্টরি বা সাবডিরেক্টরিতে ডেপ্লয় করা যায়।
• পরিবর্তনের পর আগে যাচাই করুন: নতুন ছবি যোগ করা, শ্রেণিবিন্যাস সামঞ্জস্য করা বা অনুবাদ পরিবর্তন করা—যাই করা হোক, npm run verify চালানো উচিত।
• প্রকাশের পরিসর খেয়াল রাখুন: GitHub Pages-এর শাখা-ভিত্তিক প্রকাশনা পদ্ধতি ব্যবহার করলে প্রকাশনা ডিরেক্টরি সীমিত রাখা উচিত, যাতে স্ক্রিপ্ট, ডকুমেন্টেশন বা রিপোজিটরির অপ্রাসঙ্গিক ফাইল স্ট্যাটিক রিসোর্স হিসেবে প্রকাশ না পায়।

কপিরাইট ও ব্যবহারের সীমা

প্রকল্পের ফ্রন্টএন্ড কোড, স্টাইল, স্ক্রিপ্ট এবং ডকুমেন্টেশন MIT License-এর অধীনে প্রকাশিত; ছবি, মূল ডেটা এবং নামগুলোর কপিরাইট মূল লেখকদের, যা MIT লাইসেন্সের আওতাভুক্ত নয়। মূল লেখকরা সৃষ্টিশীল কাজের রেফারেন্স হিসেবে এগুলো ব্যবহারের অনুমতি দিয়েছেন, যার মধ্যে বাণিজ্যিক সৃষ্টি, সম্পাদনা এবং রেফারেন্স অন্তর্ভুক্ত; তবে ছবির ডেটা নিজে পুনর্বিতরণ, পুনঃপ্রকাশ বা পুনর্বিক্রয় নিষিদ্ধ। বাণিজ্যিক ব্যবহারের আগে মূল সাইটের নির্দেশনা পড়ে নিজেই আইনানুগতা নিশ্চিত করুন।

মূল প্রকল্পটি হলো POSE-DB-01, আর মূল লেখক হলেন ギア। RuiC-PoseAtlas একটি অনানুষ্ঠানিক সংগঠিত সংস্করণ, যার প্রধান কাজ হলো ডেটা সাজানো, ইংরেজি নাম যোগ করা এবং ফ্রন্টএন্ড পুনর্লিখন।

সারসংক্ষেপ

RuiC-PoseAtlas বিভিন্ন দিকের ছড়িয়ে থাকা পোজ-সংক্রান্ত উপাদানকে অনুসন্ধানযোগ্য, ফিল্টারযোগ্য এবং ডাউনলোডযোগ্য ত্রিভাষিক স্ট্যাটিক গ্যালারিতে সাজিয়েছে। সাধারণ ব্যবহারকারীরা এটি সরাসরি কম্পোজিশন ও ভঙ্গি নির্ধারণে সহায়ক হিসেবে ব্যবহার করতে পারেন। ডেভেলপাররা এর ডেটা-নির্ভর আর্কিটেকচার, নেটিভ ES Modules, আন্তর্জাতিকীকরণ, অ্যাক্সেসিবিলিটি এবং স্ট্যাটিক ডেপ্লয়মেন্ট পদ্ধতি থেকে শিখতে পারেন। স্থানীয়ভাবে চালু করার পর প্রথমে কীবোর্ড নেভিগেশন ও ডিপ লিংকের সঙ্গে পরিচিত হওয়া, তারপর প্রয়োজন অনুযায়ী ডেটা সম্প্রসারণ বা নিজস্ব সংস্করণ ডেপ্লয় করার পরামর্শ দেওয়া হয়।