Spaces:

VanNguyen1214
/

room_layout

Runtime error

App Files Files Community

VanNguyen1214 commited on Jul 8, 2025

Commit

75e661f

verified ·

1 Parent(s): fda97ae

Update app.py

Browse files

Files changed (1) hide show

app.py +266 -3

app.py CHANGED Viewed

@@ -566,8 +566,177 @@ if __name__ == '__main__':
     args.cfg = 'src/config/zind.yaml'
     zind_model = get_model(args)
-    with gr.Blocks(title="Layout Estimate Room", theme=gr.themes.Soft()) as demo:
-        gr.Markdown("# Layout Estimate Room - Multi-Room Edition")
         with gr.Row():
             with gr.Column(scale=1):
@@ -693,6 +862,18 @@ if __name__ == '__main__':
                     height=400
                 )
                 with gr.Row():
                     mesh_file = gr.File(label='💾 Tải xuống file 3D')
@@ -720,6 +901,7 @@ if __name__ == '__main__':
             if mode == "🏠 Phòng đơn":
                 return (
                     gr.update(visible=True),   # single_image
                     gr.update(visible=False),  # multi_images
                     gr.update(visible=True),   # single_guide
                     gr.update(visible=False),  # multi_guide
@@ -728,6 +910,7 @@ if __name__ == '__main__':
             elif mode == "🏢 Phòng rộng":
                 return (
                     gr.update(visible=False),  # single_image
                     gr.update(visible=True),   # multi_images
                     gr.update(visible=False),  # single_guide
                     gr.update(visible=True),   # multi_guide
@@ -736,6 +919,7 @@ if __name__ == '__main__':
             else:  # "🚪 Ghép phòng thông minh"
                 return (
                     gr.update(visible=False),  # single_image
                     gr.update(visible=True),   # multi_images
                     gr.update(visible=False),  # single_guide
                     gr.update(visible=False),  # multi_guide
@@ -746,7 +930,7 @@ if __name__ == '__main__':
         processing_mode.change(
             fn=switch_mode,
             inputs=[processing_mode],
-            outputs=[single_image, multi_images, single_guide, multi_guide, smart_guide]
         )
         # Function to handle processing based on selected mode
@@ -769,6 +953,85 @@ if __name__ == '__main__':
                 else:
                     return [None, None, None, None, None]
         # Event handlers
         process_btn.click(

     args.cfg = 'src/config/zind.yaml'
     zind_model = get_model(args)
+    description = """
+    # 🏠 Layout Estimate Room - Multi-Room Edition
+    **Ước lượng layout phòng 3D từ ảnh panorama với khả năng ghép nhiều phòng thông qua cửa**
+    Ứng dụng này sử dụng công nghệ AI tiên tiến để phân tích ảnh toàn cảnh 360° và tạo ra mô hình 3D chi tiết của phòng.
+    **🆕 Tính năng mới**: Tự động phát hiện cửa và ghép nhiều phòng thành bản đồ hoàn chỉnh!
+    ### ✨ Tính năng nổi bật:
+    - 🎯 Phân tích layout phòng tự động từ ảnh panorama
+    - 🚪 **Phát hiện cửa thông minh** và ghép các phòng liền kề
+    - 🏠 **Tạo bản đồ toàn bộ ngôi nhà** từ nhiều ảnh panorama
+    - 🎨 Tạo mô hình 3D chất lượng cao cho từng phòng và toàn bộ không gian
+    - 📊 Hiển thị kết quả trực quan với thông tin chi tiết về cửa và kết nối
+    - 💾 Xuất file 3D và JSON với dữ liệu layout hoàn chỉnh
+    ---
+    """
+    # Enhanced CSS without Light/Dark mode
+    custom_css = """
+    .gradio-container {
+        max-width: 1800px !important;
+        margin: auto !important;
+        transition: all 0.3s ease;
+    }
+    /* Enhanced Components */
+    .panorama-viewer {
+        width: 100% !important;
+        height: 450px !important;
+        border-radius: 15px;
+        margin: 20px 0;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .panorama-viewer:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+    }
+    /* Improved Cards */
+    .info-card {
+        backdrop-filter: blur(10px);
+        border-radius: 15px;
+        padding: 20px;
+        margin: 15px 0;
+        transition: all 0.3s ease;
+    }
+    .info-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+    /* Button Enhancements */
+    .gr-button {
+        border: none !important;
+        border-radius: 25px !important;
+        padding: 12px 24px !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+    }
+    .gr-button:hover {
+        transform: translateY(-2px) !important;
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .gradio-container {
+            max-width: 100% !important;
+            padding: 10px !important;
+        }
+        .panorama-viewer {
+            height: 300px !important;
+        }
+    }
+    /* Animation Classes */
+    .fade-in {
+        animation: fadeIn 0.5s ease-in;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .slide-in {
+        animation: slideIn 0.3s ease-out;
+    }
+    @keyframes slideIn {
+        from { transform: translateX(-20px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    """
+    # Pannellum HTML template
+    pannellum_html = """
+    <!DOCTYPE HTML>
+    <html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Panorama Viewer</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
+        <style>
+        #panorama {
+            width: 100%;
+            height: 400px;
+            border-radius: 10px;
+        }
+        body {
+            margin: 0;
+            padding: 10px;
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .controls {
+            text-align: center;
+            margin: 10px 0;
+            color: white;
+        }
+        .info {
+            background: rgba(255,255,255,0.9);
+            padding: 10px;
+            border-radius: 5px;
+            margin: 10px 0;
+            font-size: 14px;
+        }
+        </style>
+    </head>
+    <body>
+        <div class="info">
+            <strong>🌐 Panorama 360° Viewer</strong><br>
+            Sử dụng chuột để xoay, scroll để zoom. Ảnh này sẽ được phân tích để tạo layout 3D.
+        </div>
+        <div id="panorama"></div>
+        <div class="controls">
+            <p>📱 Di chuyển chuột để khám phá không gian 360°</p>
+        </div>
+        <script>
+        pannellum.viewer('panorama', {
+            "type": "equirectangular",
+            "panorama": "{image_path}",
+            "autoLoad": true,
+            "autoRotate": -2,
+            "compass": true,
+            "northOffset": 0,
+            "showZoomCtrl": true,
+            "showFullscreenCtrl": true,
+            "showControls": true,
+            "hotSpotDebug": false,
+            "backgroundColor": [0, 0, 0],
+            "minHfov": 50,
+            "maxHfov": 120,
+            "hfov": 100
+        });
+        </script>
+    </body>
+    </html>
+    """
+    with gr.Blocks(css=custom_css, title="Layout Estimate Room", theme=gr.themes.Soft()) as demo:
+        gr.Markdown(description)
         with gr.Row():
             with gr.Column(scale=1):
                     height=400
                 )
+                # Panorama 360° viewer positioned below 3D model
+                panorama_viewer = gr.HTML(
+                    label="🌐 Xem Panorama 360°",
+                    value="""
+                    <div style="text-align: center; padding: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; color: white;">
+                        <h3>🌐 Panorama 360° Viewer</h3>
+                        <p>Tải lên ảnh panorama để xem trước 360°</p>
+                        <p><small>Hỗ trợ định dạng: JPG, PNG, JPEG</small></p>
+                    </div>
+                    """,
+                    visible=True
+                )
                 with gr.Row():
                     mesh_file = gr.File(label='💾 Tải xuống file 3D')
             if mode == "🏠 Phòng đơn":
                 return (
                     gr.update(visible=True),   # single_image
+                    gr.update(visible=True),   # panorama_viewer
                     gr.update(visible=False),  # multi_images
                     gr.update(visible=True),   # single_guide
                     gr.update(visible=False),  # multi_guide
             elif mode == "🏢 Phòng rộng":
                 return (
                     gr.update(visible=False),  # single_image
+                    gr.update(visible=False),  # panorama_viewer
                     gr.update(visible=True),   # multi_images
                     gr.update(visible=False),  # single_guide
                     gr.update(visible=True),   # multi_guide
             else:  # "🚪 Ghép phòng thông minh"
                 return (
                     gr.update(visible=False),  # single_image
+                    gr.update(visible=False),  # panorama_viewer
                     gr.update(visible=True),   # multi_images
                     gr.update(visible=False),  # single_guide
                     gr.update(visible=False),  # multi_guide
         processing_mode.change(
             fn=switch_mode,
             inputs=[processing_mode],
+            outputs=[single_image, panorama_viewer, multi_images, single_guide, multi_guide, smart_guide]
         )
         # Function to handle processing based on selected mode
                 else:
                     return [None, None, None, None, None]
+        # Function to update panorama viewer with iframe
+        def update_panorama_viewer(image_path):
+            if image_path is None:
+                return """
+                <div style="text-align: center; padding: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; color: white;">
+                    <h3>🌐 Panorama 360° Viewer</h3>
+                    <p>Tải lên ảnh panorama để xem trước 360°</p>
+                    <p><small>Hỗ trợ định dạng: JPG, PNG, JPEG</small></p>
+                </div>
+                """
+            try:
+                import base64
+                import os
+                # Create base64 data URL for the image
+                with open(image_path, "rb") as img_file:
+                    img_data = base64.b64encode(img_file.read()).decode()
+                # Determine MIME type
+                file_ext = os.path.splitext(image_path)[1].lower()
+                if file_ext in ['.jpg', '.jpeg']:
+                    mime_type = 'image/jpeg'
+                elif file_ext == '.png':
+                    mime_type = 'image/png'
+                else:
+                    mime_type = 'image/jpeg'
+                data_url = f"data:{mime_type};base64,{img_data}"
+                # Create iframe with Pannellum CDN (fixed parameters)
+                iframe_html = f"""
+                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 15px; margin: 10px 0;">
+                    <div style="background: rgba(255,255,255,0.95); color: #333; padding: 15px; border-radius: 8px; margin-bottom: 15px; font-size: 14px;">
+                        <strong>🌐 Panorama 360° của bạn</strong><br>
+                        Khám phá không gian trước khi phân tích layout. Sử dụng chuột để xoay, scroll để zoom.
+                    </div>
+                    <iframe
+                        width="100%"
+                        height="400"
+                        allowfullscreen
+                        style="border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);"
+                        src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama={data_url}&autoLoad=true&autoRotate=-2">
+                    </iframe>
+                    <div style="text-align: center; margin-top: 15px; color: white;">
+                        <p style="margin: 5px 0;">💡 <strong>Mẹo sử dụng:</strong></p>
+                        <p style="margin: 5px 0; font-size: 13px;">• Di chuyển chuột để xoay 360° • Scroll để zoom • Nhấn fullscreen để xem toàn màn hình</p>
+                    </div>
+                </div>
+                """
+                return iframe_html
+            except Exception as e:
+                logger.warning(f"Could not create panorama viewer: {e}")
+                return f"""
+                <div style="text-align: center; padding: 50px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); border-radius: 10px; color: white;">
+                    <h3>⚠️ Lỗi Panorama Viewer</h3>
+                    <p>Không thể tải ảnh panorama. Vui lòng kiểm tra định dạng ảnh.</p>
+                    <p><small>Lỗi: {str(e)}</small></p>
+                    <p><small>Hỗ trợ: JPG, PNG, JPEG</small></p>
+                </div>
+                """
+        # Event handler for updating panorama viewer when image changes
+        single_image.change(
+            fn=update_panorama_viewer,
+            inputs=[single_image],
+            outputs=[panorama_viewer]
+        )
+        # Initialize panorama viewer with default image on app load
+        demo.load(
+            fn=update_panorama_viewer,
+            inputs=[single_image],
+            outputs=[panorama_viewer]
+        )
         # Event handlers
         process_btn.click(