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

عرض المطوّر المتكامل (full-stack) أندريه كيف بنى Roomify، وهو تطبيق ويب يحوّل مخطط غرفة عاديًا إلى عرض ثلاثي الأبعاد واقعي خلال ثوانٍ قليلة. لا تكمن أهمية المشروع في نتيجته فحسب، بل في بنيته المعمارية أيضًا: فبدلًا من الخادم الخلفي التقليدي، يعتمد على React في جهة العميل ومنصة Puter لتخزين الملفات وبيانات KV وتشغيل workers بلا خادم (serverless) واستدعاء نماذج الذكاء الاصطناعي.

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

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

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

كيف يُولَّد التصميم الداخلي

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

«حوّل مخطط الغرفة المعطى إلى صورة ثلاثية الأبعاد واقعية للتصميم الداخلي»

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

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

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

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

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

ماذا يعني هذا

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