مطور يكشف عن كيفية بناء Roomify — محرر الداخليات بالذكاء الاصطناعي على React و Puter

أظهر مطور كامل المكدس أندريه كيف بنى Roomify — تطبيق ويب يحول مخطط الأرضية العادي إلى تصيير ثلاثي الأبعاد واقعي للغاية في ثوان. المشروع مثير للاهتمام ليس فقط بالنتيجة، بل وبالعمارة أيضاً: بدلاً من الواجهة الخلفية الكلاسيكية، يستخدم React على جانب العميل ومنصة Puter لتخزين الملفات وبيانات KV وعمال بدون خادم واستدعاءات نماذج الذكاء الاصطناعي.

العمارة بدون خادم

في قلب Roomify توجد مكدس حديثة وعملية إلى حد ما: React 19 و TypeScript و React Router 7 و Vite و Tailwind CSS و Lucide React و SDK Puter.js. اختار المؤلف Puter ليس كخدمة إضافية، بل كبديل عملي لخادم منفصل. توفر المنصة تخزين الملفات وقاعدة بيانات المفتاح والقيمة وعمال بدون خادم والوصول إلى نماذج الذكاء الاصطناعي مباشرة من المتصفح. وقد أتاح ذلك بناء المشروع بسرعة أكبر، دون قضاء الوقت في DevOps وإعداد طبقة API ودعم بنية الخادم الخاصة به.

يبدو تدفق البيانات على النحو التالي: يقوم المستخدم بتحميل مخطط أرضية في المتصفح، تقوم الواجهة الأمامية بإرسال الملف إلى Puter، وتتلقى عنواناً URL عاماً وتمرره إلى وظيفة عامل إنشاء المشروع. إذا كان هناك حاجة إلى تصيير، يتم تشغيل عامل منفصل ai.render3d، الذي يسترجع الصورة الأصلية ويشكل موجهاً ويتصل بـ Claude أو Gemini ويحفظ الصورة النهائية في تخزين الملفات ويحدث بيانات تعريف المشروع في KV. نتيجة لذلك، يحصل العميل على واجهة برمجية تطبيقية شبه كاملة بدون خادمه الخاص ويتواصل معها من خلال استدعاءات puter.action.

كيفية توليد الديكور الداخلي

قلب Roomify هو دالة تولد عرضاً ثلاثي الأبعاد من مخطط ثنائي الأبعاد. في العامل، يصف المؤلف المشهد بنص: يطلب من النموذج أن يأخذ في الاعتبار الجدران والنوافذ والأبواب واختيار زاوية وإضافة الأثاث والمواد والضوء والظلال، ثم إرجاع صورة بأسلوب التصور المعماري المهني. لا يتطلب هذا النهج تعديلاً يدويّاً للمشهد في Blender أو 3ds Max ويسمح لك بعرض نتيجة مفهومة للعميل بسرعة أكبر بكثير من خط أنابيب التصيير الداخلي الكلاسيكي.

"حول مخطط الأرضية المعطى إلى صورة ديكور داخلي ثلاثي الأبعاد واقعية للغاية"

على الواجهة الأمامية، تم كل شيء أيضاً مع التركيز على سيناريو استخدام بسيط. تعرض الصفحة الرئيسية قائمة بالمشاريع وتسمح بتحميل مخطط جديد، وتبدأ صفحة المصور تلقائياً الإنشاء إذا لم يكن التصيير موجوداً بعد. لمقارنة الرسم الأصلي والصورة النهائية، يتم استخدام react-compare-slider بحيث يرى المستخدم على الفور الفرق بين "قبل" و"بعد". توقع المؤلف أيضاً حماية من إعادة تشغيل الإنشاء من خلال useRef، لأنه في React Strict Mode يمكن للتأثيرات في التطوير أن تنطلق مرتين.

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

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

• قيود على صور الإدخال: حتى 10 ميجابايت و JPG/PNG فقط
• قد يصل وقت الإنشاء إلى 10-15 ثانية
• Base64 غير مريح للتخزين مباشرة بسبب حدود نقل البيانات
• في وضع dev، قد يعيد React تشغيل الإنشاء
• تطلب التكيف الجوال لـ compare-slider تحسيناً منفصلاً

في الوقت ذاته، المشروع يعمل بالفعل كنموذج أولي مكتمل، والخطوة التالية للمؤلف عملية تماماً: إضافة اختيار نمط الديكور الداخلي وتحرير النتيجة بعد الإنشاء ودعم الصيغ المتجهة مثل SVG و DXF وتطبيق محمول على React Native وعمليات التكامل مع أنظمة BIM.

يظهر Roomify بهذه الصيغة ليس سحر الذكاء الاصطناعي المثالي، بل مخطط هندسي حقيقي حيث يتم دمج نموذج توليدي في منتج المستخدم ويخضع لسيناريو محدد — التحول السريع للمخطط إلى تصور واضح.

ماذا يعني هذا

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