মূল কনটেন্টে যান
এআই টিউটোরিয়াল

লোকাল প্রিভিউ থেকে Cloudflare Pages: AI Pose Gallery-এর চীনা সংস্করণ ডিপ্লয়

এই টিউটোরিয়ালে AI Pose Gallery-এর চীনা সংস্করণের ফিচার, ডেটা কাঠামো ও ব্যবহারপদ্ধতি পরিচয় করিয়ে দেওয়া হয়েছে। পাশাপাশি লোকাল প্রিভিউ, ডেটা যাচাই, অনুবাদ আপডেট এবং Cloudflare Pages-এ ডিপ্লয়ের ধাপগুলো সম্পন্ন করতে সাহায্য করা হবে।

পড়তে প্রায় 20 মিনিট লাগবে
লোকাল প্রিভিউ থেকে Cloudflare Pages: AI Pose Gallery-এর চীনা সংস্করণ ডিপ্লয়

প্রকল্পের পরিচিতি

AI Pose Gallery-এর চীনা সংস্করণটি AI চিত্রাঙ্কন, 3D সৃজনশীলতা এবং ফটোগ্রাফি রেফারেন্সের জন্য তৈরি একটি স্ট্যাটিক মানবদেহের ভঙ্গির গ্যালারি। প্রকল্পটিতে 288টি সেটে 1439টি বহু-কোণ রেফারেন্স ছবি রয়েছে এবং মূল সাইটের জাপানি মেটাডেটা সম্পূর্ণভাবে চীনা ভাষায় অনুবাদ করা হয়েছে।

রিপোজিটরিতে 1439টি JPG থাম্বনেইল এবং 1439টি PNG মূল ছবি, মোট 2878টি ছবি ফাইল সংরক্ষিত আছে। ফ্রন্টএন্ডটি একটি শূন্য-নির্ভরতা সিঙ্গেল-পেজ অ্যাপ্লিকেশন; কোনো ফ্রেমওয়ার্ক ইনস্টল বা বিল্ড টুল চালানোর প্রয়োজন নেই।

AI Pose Gallery-এর চীনা সংস্করণের গ্যালারি প্রিভিউ

বাস্তব ফলাফল দেখতে অনলাইন ডেমোতে যেতে পারেন, অথবা সম্পূর্ণ প্রকল্পটি GitHub রিপোজিটরি থেকে সংগ্রহ করতে পারেন।

গ্যালারিতে প্রাপ্তবয়স্কদের জন্য ভঙ্গির রেফারেন্স রয়েছে এবং কিছু শ্রেণির নামে যৌন আচরণসংক্রান্ত পরিভাষা ব্যবহৃত হয়েছে। বিষয়বস্তু কেবল শিল্পসৃষ্টি, অঙ্গভঙ্গির রেফারেন্স এবং ফ্রন্টএন্ড প্রযুক্তি শেখার জন্য; অপ্রাপ্তবয়স্কদের প্রবেশ নিষিদ্ধ।

প্রধান বৈশিষ্ট্য

অনুসন্ধান ও সম্মিলিত ফিল্টার

গ্যালারির বিষয়বস্তু চারটি সিস্টেমে সংগঠিত, এবং পৃষ্ঠায় প্রতিটি সিস্টেমের ছবির সংখ্যা ও ভঙ্গির সেটের সংখ্যা দেখানো হয়। অনুসন্ধান বাক্সে ভঙ্গির নাম, নম্বর, ID এবং শ্রেণির কীওয়ার্ড খোঁজা যায়; / চাপলে দ্রুত অনুসন্ধান বাক্সে ফোকাস করা যায়।

  • চারটি ভঙ্গি-সিস্টেমের ট্যাব
  • 26টি অঙ্গভঙ্গির শ্রেণি
  • সামনের, তির্যক পাশের, পাশের, ওপর থেকে এবং নিচ থেকে পাঁচ ধরনের দৃষ্টিকোণ
  • সিস্টেম, শ্রেণি ও দৃষ্টিকোণের সম্মিলিত ফিল্টার
  • এক ক্লিকে ফিল্টার রিসেট

গ্রুপ ও একক ছবি ব্রাউজিং

পৃষ্ঠায় ভঙ্গি অনুযায়ী গ্রুপ এবং একটি করে ছবি দেখা—এই দুই মোড রয়েছে। গ্রুপ কার্ডে একই ভঙ্গির একাধিক কোণের থাম্বনেইল দেখানো হয়; থাম্বনেইলে হোভার বা ক্লিক করলে কার্ডের প্রধান ছবি বদলে যায়।

লাইটবক্স খুললে প্রথমে 300×400 থাম্বনেইল দেখানো হয়, এরপর 900×1200 PNG মূল ছবি লোড হয়। লাইটবক্সে PNG ডাউনলোড, রেকর্ড ID কপি এবং নতুন উইন্ডোতে ছবি খোলার সুবিধা রয়েছে।

  • ← এবং →: বর্তমান ভঙ্গির কোণ বদলানো
  • ↑ এবং ↓: ভঙ্গি বদলানো
  • Esc: লাইটবক্স বন্ধ করা
  • মোবাইলে ডানে-বামে সোয়াইপ: ছবি বদলানো

রেসপনসিভ লেআউট

ডেস্কটপে বহু-কলামের গ্রিড এবং মোবাইলে দুই-কলামের গ্রিড ব্যবহৃত হয়। ছোট পর্দায় ব্রাউজিং সহজ করতে মোবাইল ডিভাইসে ফিল্টার প্যানেল খোলা বা বন্ধ করা যায়।

ডেটার পরিমাণ ও কাঠামো

1439টি রেকর্ড চারটি সিস্টেমে বিভক্ত:

  • পূর্ণদেহ একক ব্যক্তি・স্ট্যান্ডার্ড: 365টি
  • পূর্ণদেহ একক ব্যক্তি・সেক্সি: 399টি
  • উর্ধ্বাঙ্গ একক ব্যক্তি: 400টি
  • দুই ব্যক্তি ঘনিষ্ঠ: 275টি

ফ্রন্টএন্ড বাস্তবে data/pose-zh.json পড়ে। প্রতিটি রেকর্ডে অনন্য ID, সিস্টেম, ভঙ্গির নম্বর, শ্রেণি, ভঙ্গির নাম, কোণ, থাম্বনেইল পাথ, মূল ছবির পাথ এবং অনুসন্ধান স্ট্রিং রয়েছে।

{
  "id": "full_sexy_P001_front",
  "体系": "全身单人・性感系",
  "姿势编号": "P001",
  "分类": "站姿",
  "姿势名称": "S形站姿・胯部侧顶",
  "角度": "正面",
  "缩略图": "thumbs/…jpg",
  "原图": "img/…png",
  "检索": "用于前端模糊搜索的拼接串"
}

data/pose.json-এ মূল জাপানি ফিল্ড ও ডেটা রাখা হয়েছে, যাতে অনুবাদ যাচাই বা ডেটা পুনঃপ্রবেশ করা যায়। data/translations.csv-এ 323টি জাপানি-চীনা তুলনামূলক রেকর্ড রয়েছে।

প্রকল্প সংগ্রহ

Git এবং Python 3 প্রস্তুত করে রিপোজিটরি ক্লোন করুন এবং প্রকল্প ডিরেক্টরিতে প্রবেশ করুন:

git clone https://github.com/anhao/ai-pose-gallery-zh.git
cd ai-pose-gallery-zh

প্রকল্পে npm বা Python নির্ভরতা ইনস্টল করার ধাপ নেই। মূল পৃষ্ঠা index.html-এ অবস্থিত, আর ডেটা ও ছবি সংশ্লিষ্ট ডিরেক্টরিতে রিপোজিটরিতেই সংরক্ষিত।

গুরুত্বপূর্ণ ডিরেক্টরি

  • index.html: শূন্য-নির্ভরতা সিঙ্গেল-পেজ গ্যালারি
  • data/: জাপানি ডেটা, চীনা ডেটা, শ্রেণি ও অনুবাদ তুলনামূলক সারণি
  • thumbs/: 1439টি 300×400 JPG থাম্বনেইল
  • img/: 1439টি 900×1200 PNG মূল ছবি
  • scripts/: ডাউনলোড, অনুবাদ প্রয়োগ, যাচাই ও প্রকাশনা স্ক্রিপ্ট
  • _headers: Cloudflare Pages ক্যাশ নীতি
  • robots.txt এবং sitemap.xml: সার্চ ইঞ্জিন কনফিগারেশন

স্থানীয়ভাবে গ্যালারি চালু করা

পৃষ্ঠাটি fetch ব্যবহার করে JSON ডেটা লোড করে, তাই index.html-এ সরাসরি ডাবল-ক্লিক করা যাবে না। স্থানীয় ফাইল প্রোটোকল ব্যবহার করলে ব্রাউজার নিরাপত্তা নীতির কারণে অনুরোধ আটকে দেবে।

রিপোজিটরির মূল ডিরেক্টরিতে Python HTTP সার্ভার চালু করুন:

python3 -m http.server 8000

এরপর খুলুন:

http://127.0.0.1:8000

পৃষ্ঠা লোড হওয়ার পর নিচের ক্রমে মৌলিক操作 শিখে নিতে পারেন:

  1. উপরের ট্যাব থেকে একটি ভঙ্গি-সিস্টেম বেছে নিন।
  2. অঙ্গভঙ্গির শ্রেণি এবং এক বা একাধিক দৃষ্টিকোণ বেছে নিন।
  3. অনুসন্ধান বাক্সে ভঙ্গির নাম, নম্বর, ID বা শ্রেণির কীওয়ার্ড লিখুন।
  4. গ্রুপ মোড ও একক ছবি মোডের মধ্যে বদলান।
  5. কার্ডে ক্লিক করে লাইটবক্স খুলুন, তারপর কীবোর্ড বা টাচ জেসচার দিয়ে নেভিগেট করুন।
  6. লাইটবক্সে PNG মূল ছবি ডাউনলোড করুন বা রেকর্ড ID কপি করুন।

ছবি ও অনুবাদ ডেটা রক্ষণাবেক্ষণ

ছবি পুনরায় ডাউনলোড

রিপোজিটরিতে সমান্তরাল ডাউনলোড স্ক্রিপ্ট রয়েছে। আগে থেকে থাকা ফাইল স্বয়ংক্রিয়ভাবে বাদ দেওয়া হয়, তাই কমান্ডটি পুনরায় চালানো যায় এবং এতে বিরতি থেকে চালিয়ে যাওয়া ও স্বয়ংক্রিয় পুনঃচেষ্টা সমর্থিত।

python3 scripts/download.py

ডিফল্ট সমান্তরাল কাজের সংখ্যা 48। এটি পরিবর্তন করতে WORKERS সেট করুন:

WORKERS=64 python3 scripts/download.py

চীনা অনুবাদ আপডেট

অনুবাদ অভিধান scripts/i18n.py-এ রয়েছে। অনুবাদ পরিবর্তনের পর চীনা ডেটা পুনরায় তৈরি করতে ব্যাকফিল স্ক্রিপ্ট চালান:

python3 scripts/apply_translation.py

উৎপন্ন ফলাফল ফ্রন্টএন্ড পড়বে। আপডেটের পর data/pose-zh.json-এ সিস্টেম, শ্রেণি, ভঙ্গির নাম, কোণ এবং অনুসন্ধান ফিল্ড প্রত্যাশামতো আছে কি না পরীক্ষা করার পরামর্শ দেওয়া হয়।

ছবির অখণ্ডতা যাচাই

যাচাই স্ক্রিপ্টটি 2878টি ফাইলের উপস্থিতি, ফাইলের আকার এবং ছবির হেডার পরীক্ষা করে:

python3 scripts/verify.py

উপকরণ পুনরায় ডাউনলোড, ডিরেক্টরি সরানো বা প্রকাশের আগে একবার যাচাই চালালে অনলাইনে ছবি না থাকা বা নষ্ট ছবির ঝুঁকি কমে।

Cloudflare Pages-এ প্রকাশ

প্রকল্পটি একটি সম্পূর্ণ স্ট্যাটিক সাইট। GitHub সংযুক্ত করে Cloudflare Pages-এর মাধ্যমে স্বয়ংক্রিয় প্রকাশনা করার পরামর্শ দেওয়া হয়।

  1. Cloudflare Dashboard-এ লগইন করুন।
  2. Workers & Pages-এ গিয়ে Create, Pages এবং Connect to Git নির্বাচন করুন।
  3. প্রকল্পের রিপোজিটরি নির্বাচন করে প্রোডাকশন ব্রাঞ্চ হিসেবে main সেট করুন।
  4. Framework preset হিসেবে None সেট করুন।
  5. Build command হিসেবে bash scripts/build.sh সেট করুন।
  6. Build output directory হিসেবে dist সেট করুন।
  7. সংরক্ষণ করে প্রকাশ করুন; সাধারণত প্রায় 2 থেকে 5 মিনিট পর https://<project>.pages.dev ঠিকানা পাওয়া যাবে।

এরপর প্রতিবার প্রোডাকশন ব্রাঞ্চে git push করলে Cloudflare Pages স্বয়ংক্রিয়ভাবে পুনরায় বিল্ড ও প্রকাশ করবে।

Build output directory সরাসরি রিপোজিটরির মূল ডিরেক্টরি হিসেবে সেট করবেন না। মূল ডিরেক্টরির .git-এ কয়েকশ MB ডেটা থাকতে পারে; Cloudflare-এর pack ফাইল স্ক্যান করার সময় 25 MiB একক-ফাইল সীমা অতিক্রম হতে পারে। scripts/build.sh কেবল সাইটের প্রয়োজনীয় ফাইলগুলো dist-এ কপি করে।

রিপোজিটরির সবচেয়ে বড় একক ফাইল প্রায় 917 KB এবং প্রকাশনা ডিরেক্টরিতে প্রায় 2883টি ফাইল রয়েছে। তাই Cloudflare Pages-এর একক ফাইল 25 MiB-এর বেশি না হওয়া এবং এক প্রকাশনায় 20000টির বেশি ফাইল না থাকার সীমা পূরণ হয়।

কমান্ড লাইন ব্যবহার করে প্রকাশ

GitHub সংযুক্ত না করেও প্রথমে প্রকাশনা ডিরেক্টরি তৈরি করে Wrangler-এর মাধ্যমে আপলোড করতে পারেন:

bash scripts/build.sh
npx wrangler pages deploy dist --project-name ai-pose-gallery-zh

_headers-এ img/ এবং thumbs/-এর জন্য এক বছরের দীর্ঘ ক্যাশ সেট করা আছে, ফলে অপরিবর্তিত ছবির জন্য ব্রাউজারকে বারবার অনুরোধ করতে হয় না।

উন্নত কনফিগারেশনের পরামর্শ

নিজস্ব ডোমেইন ব্যবহার

রিপোজিটরির পরম ঠিকানাগুলো ডিফল্টভাবে https://ai-pose-gallery.anhao.app/-এর দিকে নির্দেশ করে। Fork করে নিজের ডোমেইনে প্রকাশ করলে নিচের স্থানগুলোও পরিবর্তন করতে হবে:

  • index.html-এর canonical ঠিকানা
  • Open Graph-এর og:* ঠিকানা
  • Twitter Card-এর twitter:* কনফিগারেশন
  • JSON-LD স্ট্রাকচার্ড ডেটার সাইট ঠিকানা
  • robots.txt-এর sitemap ঠিকানা
  • sitemap.xml-এর হোমপেজ ঠিকানা

এই ঠিকানাগুলো একসঙ্গে আপডেট করলে সার্চ ইঞ্জিনের কাছে কাস্টম ডোমেইন ও pages.dev ডোমেইন ডুপ্লিকেট পৃষ্ঠা হিসেবে চিহ্নিত হওয়ার ঝুঁকি কমে।

SEO অর্থ বজায় রাখা

পৃষ্ঠায় স্বতন্ত্র description, keywords, author, Open Graph, Twitter Card এবং WebSite ও ImageGallery JSON-LD ডেটা কনফিগার করা আছে। ফ্রন্টএন্ড পরিবর্তনের সময় একটি প্রধান শিরোনাম, স্পষ্ট বিভাগীয় শিরোনাম এবং ভঙ্গির নাম ও দৃষ্টিকোণ-সমৃদ্ধ ছবির বিকল্প টেক্সট বজায় রাখা উচিত।

থাম্বনেইলে lazy loading ব্যবহৃত হয়; লাইটবক্সে প্রথমে ছোট ছবি এবং পরে মূল ছবি অনুরোধ করা হয়। পৃষ্ঠার বৈশিষ্ট্য বাড়ানোর সময় এই লোডিং ক্রম বজায় রাখার পরামর্শ দেওয়া হয়, যাতে 900×1200 PNG একসঙ্গে অনুরোধ হয়ে প্রথম স্ক্রিনের গতি কমিয়ে না দেয়।

ডেটা পরিবর্তনের সময় ফিল্ড সামঞ্জস্য বজায় রাখা

অনুসন্ধান, ফিল্টার, গ্রুপ এবং কোণ পরিবর্তন—সবই pose-zh.json-এর ফিল্ডের ওপর নির্ভর করে। রেকর্ড হাতে সম্পাদনা করার সময় id-এর এককতা, ছবির আপেক্ষিক পাথ, সিস্টেমের নাম, শ্রেণি, ভঙ্গির নম্বর এবং কোণের নামের প্রতি বিশেষ নজর দিন এবং পরিবর্তনের পর যাচাই স্ক্রিপ্ট চালান।

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

ছবি ও মূল ডেটার কপিরাইট মূল লেখক ギア-এর। রিপোজিটরি রক্ষণাবেক্ষণকারীরা এসব উপকরণের ওপর কোনো অধিকার দাবি করেন না, এবং প্রকল্পটি মূল কাজের বাণিজ্যিক ব্যবহারের অনুমতিও দেয় না।

scripts/ এবং index.html-এর কোড MIT লাইসেন্সের অধীনে, তবে এই লাইসেন্স img/, thumbs/ এবং data/-এর ছবি ও মূল ডেটার ক্ষেত্রে প্রযোজ্য নয়। উপকরণ পুনঃপ্রকাশ বা ব্যবহারের আগে নিশ্চিত করুন যে ব্যবহারটি সংশ্লিষ্ট কপিরাইটের শর্ত পূরণ করে।

সারসংক্ষেপ

AI Pose Gallery-এর চীনা সংস্করণে সম্পূর্ণ চীনা অনুবাদ করা ডেটা, স্থানীয় ছবি রিসোর্স এবং রেসপনসিভ ফ্রন্টএন্ডকে একটি শূন্য-নির্ভরতা স্ট্যাটিক প্রকল্পে একত্র করা হয়েছে। Python HTTP সার্ভারের মাধ্যমে স্থানীয়ভাবে প্রিভিউ করা যায়। অন্তর্নির্মিত স্ক্রিপ্ট ব্যবহার করে উপকরণ পুনরায় ডাউনলোড, অনুবাদ আপডেট এবং সম্পদ যাচাই করা যায়, এরপর Cloudflare Pages দিয়ে দ্রুত প্রকাশ করা যায়। নিজের সংস্করণ স্থাপন করার সময় ডোমেন-সম্পর্কিত SEO কনফিগারেশন সামঞ্জস্য করতে এবং প্রকল্পের বিষয়বস্তু নির্দেশনা ও কপিরাইটের সীমারেখা মেনে চলতে ভুলবেন না।