دليل RuiC-PoseAtlas: إعداد واستعمال مكتبة مرجعية ثلاثية اللغات لوضعيات جسم الإنسان

التعريف بـ RuiC-PoseAtlas

RuiC-PoseAtlas هو معرض مرجعي ثابت بالكامل لوضعيات الجسم البشري، وما كيحتاج حتى اعتماد وقت التشغيل. كيضم المشروع 288 مجموعة ديال الوضعيات و1,439 رسمة خطية للمانيكان، وكيجمع زوايا الوضعية نفسها: من القدّام، مائلة، من الجانب، من الفوق ومن التحت، باش يسهل على المبدعين يقارنو باستمرار هيئة الجسم، النِّسب، اتجاه الأطراف وعلاقة الكاميرا.

كيصلح للرسومات بالذكاء الاصطناعي، الإيضاح، القصص المصورة، النمذجة ثلاثية الأبعاد، التحريك، تركيب الصور والتصميم البصري، ويمكن حتى يكون مثالاً تعليمياً لمشروع واجهة أمامية أصلي. الموقع مكتوب بـ HTML وCSS وES Modules فقط، بلا React ولا Vue ولا أي أداة تجميع.

تنبيه بخصوص المحتوى: المشروع موجّه للمبدعين البالغين، وبعض المحتويات ما كتصلحش للقاصرين. من فضلك احترم القوانين المحلية وقواعد المنصة أثناء الاستعمال.

إلى بغيتي غير تتصفح مباشرة، حلّ العرض التجريبي ديال RuiC-PoseAtlas على الإنترنت. وإلى كنت باغي تدرس المصدر، تخصّص البيانات أو تنشر المشروع بنفسك، تبع الخطوات التالية واستنسخ المستودع.

الخصائص الرئيسية

• المقارنة من زوايا متعددة: كل مجموعة وضعيات فيها من 4 حتى 5 زوايا، ويمكن التبديل بينها داخل البطاقة أو صفحة الصورة الكبيرة.
• جوج طرق للتصفح: وضعية “حسب الوضعية” كتجمع زوايا المجموعة نفسها، بينما وضعية “صورة واحدة” كتبيّن كل زاوية بوحدها.
• تصفية مركّبة: يمكن التصفية حسب السلسلة والتصنيف والزاوية، والمشروع فيه 4 سلاسل محتوى و26 تصنيفاً فرعياً.
• بحث متعدد اللغات: الأسماء بالصينية والإنجليزية واليابانية كتدخل كلها فالفهرس، ويمكن حتى البحث برقم الوضعية أو التصنيف أو السلسلة.
• واجهة بثلاث لغات: دعم التبديل الفوري بين الصينية وEnglish واليابانية، مع حفظ الاختيار فـ localStorage.
• التحكم بلوحة المفاتيح: مفاتيح الأسهم كتبدّل الزوايا والوضعيات، وEsc كيسد الصورة الكبيرة.
• تحميل الصورة الأصلية: صفحة الصورة الكبيرة كتوفّر تحميل ملف PNG بقياس 900 × 1200.
• الروابط العميقة: يمكن مشاركة لغة ووضعية وزاوية محددة مباشرة عبر 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

التثبيت والتشغيل محلياً

الخطوة الأولى: استنساخ المستودع

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

المستودع فيه كاملين 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 بالنقر المزدوج. الصفحة كتقرا data/poses.json باستعمال fetch()، وتحت بروتوكول 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/: كيحفظ الصور الأصلية PNG بقياس 900 × 1200.
• thumbs/: كيحفظ الصور المصغرة JPEG بقياس 300 × 400.
• 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. حط الصور المصغرة JPEG الموافقة بقياس 300 × 400 فـ 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. إلا فشل التحميل، كيبدّل المصدر وكيعاود المحاولة. المستودع فيه حتى سير عمل GitHub Actions سميتو Fetch image assets.

نشر الموقع كصفحة ثابتة

استعمال GitHub Pages

المستودع فيه مسبقاً .github/workflows/deploy-pages.yml. من بعد دفع ملفات الموقع إلى الفرع main، سير العمل غادي ينشر الموقع تلقائياً؛ ويمكن حتى تشغّلو يدوياً من صفحة Actions عبر Deploy to GitHub Pages.

هاد العملية كتجمع غير المدخل والموارد والبيانات والصور اللي كيحتاجها الموقع فالتشغيل، وما كتعرّضش README ولا سكريبتات البناء ولا باقي الملفات الموجودة فمجلد التوثيق كاملة.

استعمال Cloudflare Pages

1. ربط مستودع GitHub فـ Cloudflare Pages.
2. عيّن Framework preset إلى None.
3. خلّي Build command خاوي.
4. عيّن Output directory إلى /.
5. حفظ الإعدادات وبدا النشر.

الملف _headers اللي موفّرو المشروع كيضبط تخزيناً مؤقتاً لمدة عام للصور الأصلية والمصغرة، وخمس دقايق لملفات البيانات، وكيطلب إعادة التحقق من index.html فكل مرة.

منصات استضافة أخرى

Netlify وVercel وتخزين الكائنات أو Nginx كاملين يقدرو يستضيفو المشروع. حيث ما كايناش مرحلة بناء، غير استعمل المجلد الجذري للمستودع كمجلد موقع ثابت. إلا استعملتي نطاقاً مخصصاً، من الأفضل تبدّل og:image فـ index.html إلى 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 الأصلية، والتدويل، وإمكانية الولوج، وحلول النشر الثابت. من بعد ما تكمل التشغيل المحلي، من الأحسن تبدا بالتعرف على التصفح بلوحة المفاتيح والروابط العميقة، ومن بعد توسّع البيانات ولا تنشر النسخة ديالك حسب الحاجة.