دليل 拍片哥 للملابس النسائية: بناء مكتبة صور ثنائية اللغة وخدمة تجربة افتراضية للملابس

مقدمة على المشروع

ملابس بايبيانغ (COSTUME-DB-01) هي مكتبة مفتوحة المصدر وذات ثيم غامق لمراجع الملابس بالذكاء الاصطناعي، فيها 1407 صورة ديال ملابس مولّدة بالذكاء الاصطناعي، بلا ما يبان شي شخص فالصورة وبنسبة 2:3. الواجهة الأمامية موقع ثابت خالص ما كيحتاجش للبناء، وتقدر تتصفحو وتقلّب فيه وتفلتر النتائج مباشرة؛ وإذا بغيتي التجربة الافتراضية، تقدر حتى تنصّب الواجهة الخلفية GoFrame v2 الموجودة فـ backend/.

تقدر تبدا بفتح النسخة الأونلاين وتجرب وظائف المكتبة المجانية، أو تجيب الكود المصدري من مستودع GitHub باش تشغلو محلياً وتطوّرو.

الوظائف الرئيسية

• 1407 طقم ديال الملابس: مقسّمين على 8 فئات: الربيع، الصيف، الخريف، الشتاء، الملابس الداخلية، الحفلات، ملابس السباحة والملابس المثيرة.
• ثنائية اللغة الصينية والإنجليزية: العرض الافتراضي بالصينية، وتقدر تبدّل للإنجليزية من الفوق على اليمين.
• البحث بالكلمات المفتاحية فالاتجاهين: كيدعم كلمات صينية بحال «أبيض، دانتيل، فستان»، وكيدعم حتى كلمات إنجليزية بحال white وlace وdress.
• تصفّح الصور: كاين التمرير اللانهائي، عرض الصورة الكبيرة، التنقل بمفاتيح الاتجاه يمين ويسار، الإغلاق بـ Esc، ورابط تحميل PNG بالحجم الأصلي.
• منصة تنسيق وتجربة اللباس: تقدر ترفع صورة ديال شخص، تختار اللباس، وتدير المعاينة والسحب والتكبير والتركيب من بعد عزل الخلفية.
• تبديل الملابس بالذكاء الاصطناعي: من خلال الواجهة الخلفية الاختيارية، تقدر تستعمل Gemini أو 豆包 أو GPT Image أو نماذج متوافقة مع OpenAI Images أو ComfyUI المحلي.
• تخزين محلي للخصوصية: إعدادات النماذج كتتحفظ فالمتصفح الحالي؛ والسجلات اللي تنجحات فالتوليد كتتحفظ فـ IndexedDB وما كتتزامنش بين الأجهزة.
• البحث بالصورة على نفس المنتج: تفاصيل الصورة الكبيرة ومنطقة تجربة اللباس يقدرو يفتحو البحث بالصور فـ淘宝.

الخطوة الأولى: تشغيل الواجهة الأمامية الثابتة

الواجهة الأمامية مكوّنة بالأساس من index.html وdata.js وassets/، وما كتحتاجش تثبيت الاعتماديات ولا تنفيذ البناء. من بعد ما تجيب المستودع، شغّل أي خادم ملفات ثابتة من جذر المشروع.

باستعمال Python

python3 -m http.server 3000

باستعمال Node.js

npx serve -l 3000 .

من بعد دخل لـ http://localhost:3000. وتقدر حتى تفتح index.html مباشرة بمتصفح حديث، ولكن التشغيل عبر خادم HTTP محلي كيناسب أكثر اختبار التفاعلات كاملة.

تصفّح المكتبة، الفلترة حسب الفئات، البحث ثنائي اللغة، عرض الصور الكبيرة ومنصة التنسيق الأساسية ما كيحتاجوش API Key وما كيفرضوش تنصيب الواجهة الخلفية. الحجم الإجمالي ديال ملفات PNG بالحجم الأصلي كيتجاوز تقريباً 1GB، وهادي علاش ما داخلاش فالمستودع؛ زر التحميل كيوجّه لموارد الموقع الأصلي.

الخطوة الثانية: تصفّح والبحث على الملابس

1. اختيار الفئة: ضيّق نطاق التصفّح باختيار فئات بحال الربيع والصيف والخريف والشتاء.
2. إدخال كلمة مفتاحية: كتب فخانة البحث خاصية ديال اللباس بالصينية أو بالإنجليزية، والنتائج غادي تتحدّث مباشرة.
3. تبديل اللغة: استعمل زر اللغة اللي فالفوق على اليمين باش تبدّل بين الواجهة الصينية والإنجليزية.
4. عرض الصورة الكبيرة: من بعد ما تفتح تفاصيل اللباس، استعمل مفاتيح الاتجاه يمين ويسار باش تتصفّح الصور المجاورة، وضغط على Esc باش تسدّها.
5. التحميل أو البحث على نفس المنتج: استعمل رابط التحميل بالحجم الأصلي حسب الحاجة، أو حلّ البحث بالصور فـ淘宝.

الموقع كيدعم حتى مشاركة لغة وحالة البحث المحددتين باستعمال معاملات URL:

?lang=en
?q=lace
?lang=en&q=white

تقدر تخلي lang هي zh أو en، وq كتحدد كلمة البحث الأولية.

الخطوة الثالثة: استعمال منصة تجربة وتنسيق اللباس الأساسية

من بعد ما تفتح وظيفة التجربة فالواجهة الأمامية، اختار أولاً لباساً مرجعياً من المكتبة، ومن بعد رفع صورة ديال شخص. منصة التنسيق الأساسية كتدعم المعاينة الأونلاين، والسحب، والتكبير، والتركيب من بعد عزل الخلفية، وما كتستعملش النماذج الكبيرة. إلا بغيتي اللباس يجي ملائم أكثر لشكل الجسم، خاصك تكمل بتنصيب الواجهة الخلفية لتبديل الملابس بالذكاء الاصطناعي.

ملي كترفع الصورة، الواجهة الأمامية كتكيّف أطول ضلع حتى 2048 بيكسل، وكتحوّلها أولاً لـ WebP، وكتضغطها بدرجات جودة من 0.90 حتى 0.75.

الخطوة الرابعة: تنصيب الواجهة الخلفية لتبديل الملابس باستعمال Docker

الواجهة الخلفية كاينة فـ backend/، وكيُنصح باستعمال Docker Compose باش ما تضطرش تنصّب بيئة تجميع Go فالجهاز المضيف.

cp backend/.env.example backend/.env
docker compose up -d

حرّر backend/.env وعمّر مفاتيح النماذج اللي ناوي تستعمل. من بعد ما تبدا الخدمة، كتستمع افتراضياً فـ http://localhost:8000. إلا كانت الواجهة الأمامية محلولة حتى هي عبر localhost أو 127.0.0.1، غادي تحاول أوتوماتيكياً تتصل بـ http://127.0.0.1:8000.

باستعمال Docker Run

cd backend
docker build -f manifest/docker/Dockerfile -t costume-tryon .
docker run -d --name costume-tryon -p 8000:8000 -e ARK_API_KEY="مفتاح Ark ديالك ديال 豆包" -e OPENAI_API_KEY="sk-مفتاح OpenAI ديالك" costume-tryon

بلا Docker

مستعملو Windows يقدرو يشغلو backend/restart.bat. واللي منصّبين Go يقدرو حتى يشغلو مباشرة:

cd backend
export ARK_API_KEY="المفتاح ديالك"
go run main.go

فـ Windows PowerShell، طريقة كتابة متغير البيئة هي $env:ARK_API_KEY="المفتاح ديالك".

الخطوة الخامسة: إعداد نماذج تبديل الملابس

ملف إعداد النماذج كاين فـ backend/manifest/config/config.yaml، والقالب هو config.example.yaml. كل نموذج يقدر تحدد ليه بشكل مستقل البروتوكول، وAPI Key، واسم متغير البيئة، وBase URL، والاسم الحقيقي للنموذج.

llm:
  models:
    gpt-image:
      provider: openai
      envKey: "OPENAI_API_KEY"
      baseURL: "https://api.openai.com/v1"
      model: "gpt-image-2"

    doubao:
      provider: doubao
      envKey: "ARK_API_KEY"
      baseURL: "https://ark.cn-beijing.volces.com/api/v3"
      model: "doubao-seedream-3-0-t2i-250415"

    gemini:
      provider: gemini
      envKey: "GEMINI_API_KEY"
      baseURL: "https://generativelanguage.googleapis.com/v1beta"
      model: "gemini-3.1-flash-image"

أولوية متغير البيئة أعلى من apiKey اللي فالإعدادات. إلا بغيتي تربط خدمات متوافقة مع بروتوكول OpenAI Images بحال通义万相 أو智谱 CogView أو硅基流动، تقدر تزيد مقطع نموذج فيه provider: openai وتعمّر Base URL واسم النموذج المناسبين، بلا ما تبدّل كود التكييف.

الخطوة السادسة: ربط الواجهة الأمامية بالواجهة الخلفية

الواجهة الأمامية كتقلب على خدمة تبديل الملابس بالذكاء الاصطناعي حسب الأولوية التالية:

1. «عنوان API ديال الواجهة الخلفية» المحفوظ فمركز الإعدادات.
2. المتغير العام window.AI_API_URL اللي كيتحدد قبل تحميل الصفحة.
3. المعامل tryon الموجود فـ URL.
4. ملي كتكون الواجهة الأمامية محلولة محلياً، الرجوع لـ http://127.0.0.1:8000.

أسهل طريقة هي تفتح مركز الإعدادات من الفوق على اليمين وتدخل http://localhost:8000. وتقدر حتى تستعمل عنوان المشاركة التالي:

https://عنوان الواجهة الأمامية ديالك/?tryon=http://localhost:8000

مركز الإعدادات كيسمح حتى بحفظ البروتوكول، واسم النموذج، وBase URL، وAPI Key، وToken مستقل للدخول للواجهة الخلفية. إعدادات النموذج الشخصية كتتحفظ غير فالمتصفح الحالي، وكتتبعت مؤقتاً للواجهة الخلفية مع كل طلب أثناء التوليد، وما كتتكتبش فقاعدة بيانات الواجهة الخلفية ولا فملفات الإعداد ولا فالسجلات التشغيلية. من بعد استعمال جهاز مشترك، خاصك تمسح الإعدادات المحلية بيدك.

تبديل الملابس محلياً بلا إنترنت باستعمال ComfyUI

إلا كان الحاسوب فيه بطاقة رسومات مستقلة، أو كاين جهاز ComfyUI فالشبكة المحلية، تقدر تستعمل الحل المحلي اللي ما كيحتاجش API Key. المشروع كيدعم سير عمل Qwen-Image-Edit-2511 Int8 وLightning LoRA من 4 خطوات وسير عمل MiniMax H3، وكيقدر يرجع لـ H3 إلا ما كانش سير العمل المفضّل واجد.

1. شغّل ComfyUI، والعنوان الافتراضي هو http://127.0.0.1:8188.
2. حط نموذج Qwen-Image-Edit-2511 وLightning LoRA حسب التعليمات فـ backend/README.MD.
3. ضبط مقطع نموذج ComfyUI وملفات سير العمل.
4. من مركز إعدادات الموقع اختار «ComfyUI المحلي»، ومن بعد ما ينجح اختبار الاتصال حفظ الإعدادات.

comfyui:
  provider: comfyui
  baseURL: "http://127.0.0.1:8188"
  model: "qwen-image-edit-2511"
  workflowPath: "workflows/comfyui_qwen_image_edit_2511_api.json"

نصائح متقدمة واقتراحات للنشر فالإنتاج

اختيار حل النموذج المناسب

• ComfyUI: مناسب للي عندهم بطاقة رسومات محلية، وكيهمّهم الحفاظ على الخصوصية وباغين يتفاداو مصاريف API.
• Gemini: README كيعرض Nano Banana 2، أي gemini-3.1-flash-image، كخيار سحابي افتراضي موصى به.
• 豆包 Seedream: مناسب للي محتاجين حلاً خداماً مع الشبكات داخل الصين.
• GPT Image 2: كيستعمل بروتوكول OpenAI Images، وتقدر حتى تضبط عنوان وسيط من طرف ثالث ومتوافق معاه.

تفعيل قيود الأمان عند النشر العمومي

ملي تنشر الواجهة الخلفية فالإنترنت، ما خاصكش تكتفي بكشف الخدمة الافتراضية. المشروع كيوفّر المصادقة بـ Bearer Token، وقائمة CORS مضبوطة، وتحديد المعدل باستعمال دلو الرموز، وحصة يومية، وتحكماً فالتزامن العام وتزامن كل جهة. القيم الافتراضية المذكورة فـ README هي 10 طلبات فالدقيقة، و100 طلب فالنهار، وتزامنان عامّان وتزامن واحد لكل جهة؛ ولإعدادات الإنتاج بالتحديد راجع backend/DEPLOY.md.

الواجهة الخلفية كتقبل غير المحتوى الحقيقي ديال الصور بصيغ JPEG وPNG وWebP. الحد الأقصى للصورة الواحدة هو 8 MiB، والمجموع ديال جوج صور ما يفوتش 16 MiB؛ طول وعرض الصورة خاصهم يكونو بين 256 و8192 بكسل، ومجموع البكسلات ما يفوتش 20 مليون. هاد القيود كتهدف تنقص من مخاطر الملفات المزوّرة، وحقن الكود، وقنابل البكسلات الناتجة عن فك الضغط.

فهم حدود البيانات المحلية والخصوصية

نتيجة تبديل الملابس بالذكاء الاصطناعي، منين كتنجح، كتتحفظ فـ IndexedDB ديال المتصفح الحالي، وتقدر تشوفها، تنزّلها، تحيدها وحدة بوحدة أو تمسحها كاملة. السجلات ما كتترفعش وما كتتزامنش أوتوماتيكياً مع أجهزة أخرى. Base URL الشخصي ممنوع افتراضياً يوجّه لـ localhost أو الشبكة الداخلية أو العناوين المحجوزة، باش ما يتستعملش الباك إند العمومي كوكيل لطلبات الشبكة الداخلية.

توسيع بيانات الملابس

بيانات معرض الصور محفوظة فـ data.js. كل سجل فيه id وカテゴリ وキーワード وサムネ و画像 و原寸. أسماء هاد الحقول باليابانية مخليّينها كيف ما هي باش تبقى متوافقة مع البيانات الأصلية، والواجهة الأمامية كتعوّض التصنيفات والكلمات المفتاحية أوتوماتيكياً بالصينية أو بالإنجليزية. منين كتزيد بيانات جديدة، خاصك تبقى تابع نفس بنية الحقول وقواعد مسارات الصور الموجودة.

الخلاصة

«拍片哥女装» تقدر تكون معرضاً ثنائي اللغة جاهزاً للاستعمال كمرجع لملابس الذكاء الاصطناعي، وتقدر حتى تكون أساساً أمامياً وخلفياً لمشروع تجربة الملابس الافتراضية باستعمال نماذج متعددة. فالبداية، غير شغّل الواجهة الأمامية الثابتة؛ ومنين تحتاج تبديل الملابس فعلياً بالذكاء الاصطناعي، اختار حسب الحاجة نموذج Docker سحابي أو حل ComfyUI محلي. المشروع مرخّص برخصة MIT، وكيْسمح بالاستعمال التجاري والتعديل والدمج وإعادة التوزيع، ولكن خاص الاحتفاظ بتصريحات الرخصة الضرورية، والانتباه إلى أن جميع صور معرض الصور هي تصاميم مفاهيمية لملابس مولّدة بالذكاء الاصطناعي، وماشي صوراً لمنتجات علامات تجارية حقيقية.