更新边界框组件的错误处理逻辑，改进了数据加载和JavaScript通信，升级Gradio版本至5.31.0，添加详细的调试日志以增强用户体验。

SOLUTION_SUMMARY.md

@@ -3,6 +3,7 @@
 ## 🔍 问题诊断
 
 你的边界框绘制功能目前存在以下问题：
+
 1. **绘制无响应** - 鼠标拖拽没有绘制边界框
 2. **数据同步失败** - 边界框数据没有传递给Gradio
 
@@ -11,16 +12,19 @@
 我已经为你进行了以下修复：
 
 ### 1. 代码改进
+
 - ✅ 更新了 `bbox_component.html` 和 `bbox_component_fixed.html`
 - ✅ 改进了 `app.py` 中的数据处理和JavaScript通信
 - ✅ 添加了详细的调试日志和错误处理
 
 ### 2. 通信机制优化
+
 - ✅ 简化了JavaScript通信逻辑
 - ✅ 改进了元素选择器和事件触发
 - ✅ 增加了多种数据同步方式
 
 ### 3. 调试工具
+
 - ✅ 创建了 `test_simple.py` 用于独立测试
 - ✅ 提供了详细的调试指南 `BBOX_DEBUG_GUIDE.md`
 
@@ -37,6 +41,7 @@ python test_simple.py
 ```
 
 然后：
+
 1. 打开浏览器访问 `http://localhost:7861`
 2. 打开开发者工具 (F12)
 3. 在画布上拖拽鼠标测试绘制
@@ -82,9 +87,10 @@ document.dispatchEvent(new CustomEvent('bbox_data_update', {
 
 ## 📋 预期结果
 
-### 正常工作时应该看到：
+### 正常工作时应该看到
 
 1. **控制台日志**:
+
    ```
    边界框组件已加载
    画布已初始化
@@ -92,6 +98,7 @@ document.dispatchEvent(new CustomEvent('bbox_data_update', {
    ```
 
 2. **绘制时**:
+
    ```
    开始绘制: (x, y)
    添加边界框: 1个
@@ -108,7 +115,7 @@ document.dispatchEvent(new CustomEvent('bbox_data_update', {
 
 1. **运行的命令**: 是运行 `test_simple.py` 还是 `app.py`？
 2. **浏览器控制台日志**: 复制完整的Console输出
-3. **具体现象**: 
+3. **具体现象**:
    - 能看到画布吗？
    - 鼠标在画布上有任何反应吗？
    - 右侧有数据显示吗？
@@ -116,6 +123,7 @@ document.dispatchEvent(new CustomEvent('bbox_data_update', {
 ## 🎉 成功标志
 
 当边界框功能正常工作时，你应该能够：
+
 - ✅ 在画布上拖拽绘制彩色边界框
 - ✅ 看到实时的绘制预览（虚线框）
 - ✅ 为每个边界框添加文字描述
@@ -124,4 +132,4 @@ document.dispatchEvent(new CustomEvent('bbox_data_update', {
 
 ---
 
-🚀 **开始测试**: 运行 `python test_simple.py` 并访问 `http://localhost:7861` 开始调试！ 
+🚀 **开始测试**: 运行 `python test_simple.py` 并访问 `http://localhost:7861` 开始调试！

app.py

@@ -11,7 +11,7 @@ import warnings
 try:
     from dream_renderer import DreamRendererPipeline
 except ImportError:
-    print("Error: dream_renderer 模块未找到。请确保模型文件存在。")
+    print("Warning: dream_renderer 模块未找到。将使用演示模式。")
     # raise
 
 warnings.filterwarnings("ignore")
@@ -41,12 +41,17 @@ def initialize_pipeline():
 def load_bbox_component():
     """加载边界框绘制组件"""
     try:
-        with open('bbox_component_fixed.html', 'r', encoding='utf-8') as f:
-            return f.read()
-    except FileNotFoundError:
-        # 如果修复版本不存在，使用原版本
         with open('bbox_component.html', 'r', encoding='utf-8') as f:
-            return f.read()
+            content = f.read()
+        return content
+    except FileNotFoundError:
+        # 返回简化的HTML内容
+        return """
+        <div style="text-align: center; padding: 20px; border: 2px dashed #ccc; border-radius: 8px;">
+            <p>边界框组件加载失败</p>
+            <p>请检查 bbox_component.html 文件是否存在</p>
+        </div>
+        """
 
 def update_bbox_data(bbox_json: str):
     """更新边界框数据显示"""
@@ -235,12 +240,6 @@ def create_interface():
         font-weight: bold;
         padding: 12px 25px;
     }
-    .parameter-group {
-        background: #f8f9fa;
-        border-radius: 10px;
-        padding: 15px;
-        margin: 10px 0;
-    }
     """
     
     with gr.Blocks(css=css, title="DreamRenderer - Multi-Instance Control", theme=gr.themes.Soft()) as demo:
@@ -279,7 +278,7 @@ def create_interface():
                 # 初始化部分
                 with gr.Group():
                     gr.Markdown("### 🚀 模型初始化")
-                    init_btn = gr.Button("🚀 初始化DreamRenderer", variant="primary", elem_classes=["init-btn"])
+                    init_btn = gr.Button("🚀 初始化DreamRenderer", variant="primary")
                     init_status = gr.Textbox(label="初始化状态", interactive=False, lines=2)
                 
                 # 边界框绘制区域
@@ -291,7 +290,7 @@ def create_interface():
                         <p style="margin: 5px 0 0 0; color: #1976d2;"><strong>步骤2:</strong> 在右侧为每个框输入详细描述</p>
                     </div>
                     """)
-                    bbox_component = gr.HTML(load_bbox_component(), elem_classes=["bbox-container"])
+                    bbox_component = gr.HTML(load_bbox_component())
                     
                     # 隐藏的输入框用于接收边界框数据
                     bbox_data_input = gr.Textbox(visible=False, elem_id="bbox_data")
@@ -357,7 +356,6 @@ def create_interface():
                 generate_btn = gr.Button(
                     "🎨 生成图像", 
                     variant="primary", 
-                    elem_classes=["generate-btn"],
                     size="lg"
                 )
                 
@@ -407,150 +405,157 @@ def create_interface():
         function() {
             console.log('DreamRenderer界面已加载');
             
-            // 全局变量
-            let isDrawing = false;
-            let startX, startY, currentRect;
-            let bboxes = [];
+            // 给DOM一些时间加载
+            setTimeout(function() {
+                try {
+                    // 全局变量
+                    let isDrawing = false;
+                    let startX, startY, currentRect;
+                    let bboxes = [];
 
-            const canvas = document.getElementById('bboxCanvas');
-            if (!canvas) {
-                console.error('画布元素未找到');
-                return;
-            }
-            
-            const ctx = canvas.getContext('2d');
+                    const canvas = document.getElementById('bboxCanvas');
+                    if (!canvas) {
+                        console.error('画布元素未找到');
+                        return;
+                    }
+                    
+                    const ctx = canvas.getContext('2d');
 
-            // 清除之前的监听器并添加新的
-            canvas.replaceWith(canvas.cloneNode(true));
-            const newCanvas = document.getElementById('bboxCanvas');
-            const newCtx = newCanvas.getContext('2d');
+                    // 清除之前的监听器并添加新的
+                    canvas.replaceWith(canvas.cloneNode(true));
+                    const newCanvas = document.getElementById('bboxCanvas');
+                    const newCtx = newCanvas.getContext('2d');
 
-            // 重新设置样式
-            newCanvas.style.display = 'block';
-            newCanvas.style.border = '2px solid #4ECDC4';
-            newCanvas.style.backgroundColor = 'white';
-            newCanvas.style.cursor = 'crosshair';
-            newCanvas.style.borderRadius = '8px';
+                    // 重新设置样式
+                    newCanvas.style.display = 'block';
+                    newCanvas.style.border = '2px solid #4ECDC4';
+                    newCanvas.style.backgroundColor = 'white';
+                    newCanvas.style.cursor = 'crosshair';
+                    newCanvas.style.borderRadius = '8px';
 
-            // 边界框编辑函数
-            window.updateBboxField = function(index, field, value) {
-                if (index >= 0 && index < bboxes.length) {
-                    bboxes[index][field] = value;
-                    console.log(`更新边界框 ${index} 的 ${field}:`, value);
-                    updateBboxData();
-                }
-            };
+                    // 边界框编辑函数
+                    window.updateBboxField = function(index, field, value) {
+                        if (index >= 0 && index < bboxes.length) {
+                            bboxes[index][field] = value;
+                            console.log(`更新边界框 ${index} 的 ${field}:`, value);
+                            updateBboxData();
+                        }
+                    };
 
-            window.deleteBbox = function(index) {
-                if (index >= 0 && index < bboxes.length) {
-                    bboxes.splice(index, 1);
-                    console.log(`删除边界框 ${index}`);
-                    redrawCanvas();
-                    updateBboxData();
-                }
-            };
+                    window.deleteBbox = function(index) {
+                        if (index >= 0 && index < bboxes.length) {
+                            bboxes.splice(index, 1);
+                            console.log(`删除边界框 ${index}`);
+                            redrawCanvas();
+                            updateBboxData();
+                        }
+                    };
 
-            window.clearAllBboxes = function() {
-                bboxes = [];
-                console.log('清空所有边界框');
-                redrawCanvas();
-                updateBboxData();
-            };
+                    window.clearAllBboxes = function() {
+                        bboxes = [];
+                        console.log('清空所有边界框');
+                        redrawCanvas();
+                        updateBboxData();
+                    };
 
-            // 重绘画布
-            function redrawCanvas() {
-                newCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
-                bboxes.forEach((bbox, index) => {
-                    newCtx.strokeStyle = `hsl(${index * 60}, 70%, 50%)`;
-                    newCtx.lineWidth = 2;
-                    newCtx.strokeRect(bbox.x, bbox.y, bbox.width, bbox.height);
-                    
-                    // 绘制标签
-                    newCtx.fillStyle = `hsl(${index * 60}, 70%, 50%)`;
-                    newCtx.font = '12px Arial';
-                    newCtx.fillText(bbox.label || `区域${index + 1}`, bbox.x + 5, bbox.y - 5);
-                });
-            }
+                    // 重绘画布
+                    function redrawCanvas() {
+                        newCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
+                        bboxes.forEach((bbox, index) => {
+                            newCtx.strokeStyle = `hsl(${index * 60}, 70%, 50%)`;
+                            newCtx.lineWidth = 2;
+                            newCtx.strokeRect(bbox.x, bbox.y, bbox.width, bbox.height);
+                            
+                            // 绘制标签
+                            newCtx.fillStyle = `hsl(${index * 60}, 70%, 50%)`;
+                            newCtx.font = '12px Arial';
+                            newCtx.fillText(bbox.label || `区域${index + 1}`, bbox.x + 5, bbox.y - 5);
+                        });
+                    }
 
-            // 更新边界框数据
-            function updateBboxData() {
-                const relativeBboxes = bboxes.map(b => ({
-                    x: b.x / newCanvas.width,
-                    y: b.y / newCanvas.height,
-                    width: b.width / newCanvas.width,
-                    height: b.height / newCanvas.height,
-                    label: b.label || '',
-                    prompt: b.prompt || ''
-                }));
-                
-                const dataString = JSON.stringify(relativeBboxes);
-                console.log('📤 更新数据:', relativeBboxes.length, '个边界框');
-                
-                const textarea = document.querySelector('#bbox_data textarea');
-                if (textarea) {
-                    textarea.value = dataString;
-                    textarea.dispatchEvent(new Event('input', { bubbles: true }));
-                }
-            }
+                    // 更新边界框数据
+                    function updateBboxData() {
+                        const relativeBboxes = bboxes.map(b => ({
+                            x: b.x / newCanvas.width,
+                            y: b.y / newCanvas.height,
+                            width: b.width / newCanvas.width,
+                            height: b.height / newCanvas.height,
+                            label: b.label || '',
+                            prompt: b.prompt || ''
+                        }));
+                        
+                        const dataString = JSON.stringify(relativeBboxes);
+                        console.log('📤 更新数据:', relativeBboxes.length, '个边界框');
+                        
+                        const textarea = document.querySelector('#bbox_data textarea');
+                        if (textarea) {
+                            textarea.value = dataString;
+                            textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                        }
+                    }
 
-            // 添加绘制事件监听器
-            newCanvas.addEventListener('mousedown', function(e) {
-                isDrawing = true;
-                startX = e.offsetX;
-                startY = e.offsetY;
-                console.log('🎯 开始绘制:', startX, startY);
-            });
+                    // 添加绘制事件监听器
+                    newCanvas.addEventListener('mousedown', function(e) {
+                        isDrawing = true;
+                        startX = e.offsetX;
+                        startY = e.offsetY;
+                        console.log('🎯 开始绘制:', startX, startY);
+                    });
 
-            newCanvas.addEventListener('mousemove', function(e) {
-                if (!isDrawing) return;
-                
-                const currentX = e.offsetX;
-                const currentY = e.offsetY;
-                
-                // 清除画布并重绘所有边界框
-                redrawCanvas();
-                
-                // 绘制当前正在绘制的框
-                newCtx.strokeStyle = '#007bff';
-                newCtx.lineWidth = 2;
-                newCtx.setLineDash([5, 5]);
-                const width = currentX - startX;
-                const height = currentY - startY;
-                newCtx.strokeRect(startX, startY, width, height);
-                newCtx.setLineDash([]);
-            });
+                    newCanvas.addEventListener('mousemove', function(e) {
+                        if (!isDrawing) return;
+                        
+                        const currentX = e.offsetX;
+                        const currentY = e.offsetY;
+                        
+                        // 清除画布并重绘所有边界框
+                        redrawCanvas();
+                        
+                        // 绘制当前正在绘制的框
+                        newCtx.strokeStyle = '#007bff';
+                        newCtx.lineWidth = 2;
+                        newCtx.setLineDash([5, 5]);
+                        const width = currentX - startX;
+                        const height = currentY - startY;
+                        newCtx.strokeRect(startX, startY, width, height);
+                        newCtx.setLineDash([]);
+                    });
 
-            newCanvas.addEventListener('mouseup', function(e) {
-                if (!isDrawing) return;
-                isDrawing = false;
-                
-                const endX = e.offsetX;
-                const endY = e.offsetY;
-                const width = endX - startX;
-                const height = endY - startY;
-                
-                // 只有当框足够大时才添加
-                if (Math.abs(width) > 10 && Math.abs(height) > 10) {
-                    const bbox = {
-                        x: Math.min(startX, endX),
-                        y: Math.min(startY, endY),
-                        width: Math.abs(width),
-                        height: Math.abs(height),
-                        label: `区域${bboxes.length + 1}`,
-                        prompt: ''
-                    };
-                    
-                    bboxes.push(bbox);
-                    console.log('✅ 添加边界框:', bbox);
-                    
-                    redrawCanvas();
-                    updateBboxData();
-                }
-                
-                console.log('🎯 绘制结束，当前边界框数量:', bboxes.length);
-            });
+                    newCanvas.addEventListener('mouseup', function(e) {
+                        if (!isDrawing) return;
+                        isDrawing = false;
+                        
+                        const endX = e.offsetX;
+                        const endY = e.offsetY;
+                        const width = endX - startX;
+                        const height = endY - startY;
+                        
+                        // 只有当框足够大时才添加
+                        if (Math.abs(width) > 10 && Math.abs(height) > 10) {
+                            const bbox = {
+                                x: Math.min(startX, endX),
+                                y: Math.min(startY, endY),
+                                width: Math.abs(width),
+                                height: Math.abs(height),
+                                label: `区域${bboxes.length + 1}`,
+                                prompt: ''
+                            };
+                            
+                            bboxes.push(bbox);
+                            console.log('✅ 添加边界框:', bbox);
+                            
+                            redrawCanvas();
+                            updateBboxData();
+                        }
+                        
+                        console.log('🎯 绘制结束，当前边界框数量:', bboxes.length);
+                    });
 
-            console.log('🚀 DreamRenderer边界框功能已就绪！');
+                    console.log('🚀 DreamRenderer边界框功能已就绪！');
+                } catch (error) {
+                    console.error('初始化边界框功能时出错:', error);
+                }
+            }, 1000);  // 延迟1秒执行
         }
         """)
     

requirements.txt

@@ -1,4 +1,4 @@
-gradio==4.44.0
+gradio==5.31.0
 spaces>=0.28.0
 torch>=2.0.0
 torchvision