Elite Wear — متجر أزياء مع تجربة افتراضية للملابس
واجهة متجر أزياء ضمن مشروع جماعي، مع تجربة لوضع صورة قميص فوق فيديو الكاميرا اعتمادًا على تقدير وضعية الجسم. تجمع مساهمتي بين رؤية الحاسوب وتطوير واجهات الويب التفاعلية.
English
صور المنتجات الثابتة لا تتيح دائمًا تجربة تفاعلية لتصور الملابس. استكشف المشروع التدريبي ضمن DEPI فكرة عرض قطعة ملابس باستخدام الكاميرا، وليس خدمة تجارية دقيقة لقياس المقاسات أو إتمام الدفع.
طوّر الفريق نموذجًا لواجهة متجر أزياء. كانت مساهمتي تطوير الصفحة الرئيسية وصفحتي من نحن واتصل بنا، وتوثيق المشروع وتطبيق التجربة الافتراضية. يستخدم التطبيق TensorFlow.js وPoseNet لتقدير مواضع أجزاء الجسم العلوية، ثم يعرض صورة قميص قابلة للتعديل باستخدام Canvas. نفّذ أعضاء الفريق بقية مكونات المتجر.
تستخدم الواجهة HTML وCSS وJavaScript. يحمّل TensorFlow.js نموذج PoseNet في المتصفح، وتُستخدم مواضع الكتفين والوركين لتحديد أبعاد صورة القميص وموضعها على Canvas. لا يعتمد كود التجربة على خدمة ذكاء اصطناعي خلفية مخصصة. تم فحص التنفيذ في المصدر؛ لم يتم التحقق من تشغيل الكاميرا فعليًا في بيئة المراجعة الحالية. تظل المحاذاة والتحكم اليدوي وجودة العرض تجريبية.
- إدخال فيديو الكاميرا من خلال MediaDevices في المتصفح
- تقدير مواضع الكتفين والوركين باستخدام PoseNet
- التحكم في اللون والشفافية والعرض والارتفاع
- أدوات لتحريك الصورة بالفأرة وإعادة ضبطها
- تنفيذ حفظ لقطة بصيغة PNG باستخدام Canvas
- واجهة متجر جماعية تشمل الفئات والسلة والوضعين الفاتح والداكن
دوري: الصفحة الرئيسية، وصفحتا من نحن واتصل بنا، وREADME، وتطبيق التجربة الافتراضية. ينسب توثيق المستودع هذه المساهمات إلى محمد؛ أما المتجر الأوسع فهو عمل جماعي.
المسار المنفذ في المصدر: فتح الصفحة ← السماح بالكاميرا ← تحميل النموذج ← تقدير وضعية الجسم ← وضع صورة القميص ← تعديل العرض ← حفظ لقطة PNG. هذا وصف للكود وليس تأكيدًا لاختبار الكاميرا المباشر.
الحدود: العرض صورة ثنائية الأبعاد مرتبطة بوضعية الجسم، وليس توليدًا واقعيًا للملابس أو توقعًا دقيقًا للمقاس. شاشات الحساب والدفع نماذج واجهات؛ لم يتم إثبات وجود خدمات مصادقة أو دفع تجارية.
قبل النشر: يلزم اعتماد نسب المساهمات وحقوق الصور ولقطة أصلية للتجربة. سنة الإنجاز المذكورة 2024، ولم يتم تأكيد التاريخ الدقيق.
تحتاج تجربة ويب تفاعلية لمشروعك؟
أخبرنا بهدفك وسنساعدك في تحديد الخطوة العملية التالية.