Update app.py

app.py

@@ -2,7 +2,7 @@
 app.py  ――――――――――――――――――――――――――――――――――――――――――――――――
 ✓ Preview · Save · Load 기능 포함
 ✓ Load 시 노드/좌표/엣지 자동 복원
-✓ State를 사용한 안정적인 JSON 로드
+✓ gr.update()를 사용한 강제 업데이트
 """
 
 import os, json, typing, tempfile
@@ -13,6 +13,7 @@ from gradio_workflowbuilder import WorkflowBuilder
 # 🛠️  헬퍼
 # -------------------------------------------------------------------
 def export_pretty(data: typing.Dict[str, typing.Any]) -> str:
+    print(f"[Export] Current workflow data: {json.dumps(data, indent=2)}")
     return json.dumps(data, indent=2, ensure_ascii=False) if data else "No workflow to export"
 
 def export_file(data: typing.Dict[str, typing.Any]) -> typing.Optional[str]:
@@ -23,301 +24,481 @@ def export_file(data: typing.Dict[str, typing.Any]) -> typing.Optional[str]:
         json.dump(data, f, ensure_ascii=False, indent=2)
     return path
 
-def load_workflow_from_file(file_obj):
-    """JSON 파일을 읽어서 데이터만 반환"""
+def import_workflow(file_obj):
+    """파일에서 JSON을 읽고 WorkflowBuilder를 업데이트"""
     if file_obj is None:
-        return None
+        return None, "No file selected", "Status: No file", gr.update(visible=False)
     
     try:
         with open(file_obj.name, "r", encoding="utf-8") as f:
             data = json.load(f)
-        return data
+        
+        print(f"[Import] Loaded data: {json.dumps(data, indent=2)}")
+        
+        # 데이터 검증
+        if not isinstance(data, dict):
+            return None, "Invalid format: not a dictionary", "Status: Invalid format", gr.update(visible=False)
+        
+        # 필수 필드 확인
+        if 'nodes' not in data:
+            data['nodes'] = []
+        if 'edges' not in data:
+            data['edges'] = []
+            
+        nodes_count = len(data.get('nodes', []))
+        edges_count = len(data.get('edges', []))
+        
+        # 직접 데이터 반환
+        return (
+            data,  # 직접 데이터 반환
+            json.dumps(data, indent=2, ensure_ascii=False),
+            f"✅ Loaded: {nodes_count} nodes, {edges_count} edges",
+            gr.update(visible=True)  # JavaScript 실행 버튼 표시
+        )
+        
     except Exception as e:
-        print(f"Error loading file: {e}")
-        return None
+        print(f"[Import] Error: {str(e)}")
+        return None, f"Error: {str(e)}", f"❌ Error: {str(e)}", gr.update(visible=False)
 
-def update_workflow_display(workflow_data):
-    """워크플로우 데이터를 코드뷰에 표시"""
-    if workflow_data:
-        return json.dumps(workflow_data, indent=2, ensure_ascii=False)
-    return "No workflow loaded"
+def reset_workflow():
+    """워크플로우 초기화"""
+    empty_workflow = {"nodes": [], "edges": []}
+    return empty_workflow, "Reset complete"
+
+def set_sample_workflow():
+    """샘플 워크플로우 설정"""
+    sample = {
+        "nodes": [
+            {
+                "id": "1",
+                "type": "default",
+                "position": {"x": 100, "y": 100},
+                "data": {"label": "Start Node"}
+            },
+            {
+                "id": "2",
+                "type": "default",
+                "position": {"x": 300, "y": 100},
+                "data": {"label": "Process"}
+            },
+            {
+                "id": "3",
+                "type": "default",
+                "position": {"x": 500, "y": 100},
+                "data": {"label": "End Node"}
+            }
+        ],
+        "edges": [
+            {
+                "id": "e1-2",
+                "source": "1",
+                "target": "2"
+            },
+            {
+                "id": "e2-3",
+                "source": "2",
+                "target": "3"
+            }
+        ]
+    }
+    
+    print(f"[Sample] Setting workflow: {json.dumps(sample, indent=2)}")
+    return sample, json.dumps(sample, indent=2, ensure_ascii=False), "✅ Sample loaded"
 
-def debug_workflow(data):
-    """현재 워크플로우 상태 디버깅"""
+def debug_current_state(data):
+    """현재 상태 디버깅"""
     if not data:
-        return "No workflow data"
-    nodes_count = len(data.get('nodes', []))
-    edges_count = len(data.get('edges', []))
-    return f"Nodes: {nodes_count}, Edges: {edges_count}"
+        return "Empty workflow", "{}"
+    
+    nodes = data.get('nodes', [])
+    edges = data.get('edges', [])
+    
+    debug_info = f"Nodes: {len(nodes)}, Edges: {len(edges)}"
+    if nodes:
+        debug_info += f"\nFirst node: {nodes[0].get('id', 'unknown')}"
+    
+    return debug_info, json.dumps(data, indent=2)
 
 # -------------------------------------------------------------------
 # 🎨 CSS
 # -------------------------------------------------------------------
 CSS = """
 .main-container{max-width:1600px;margin:0 auto;}
-.workflow-section{margin-bottom:2rem;}
+.workflow-section{margin-bottom:2rem;min-height:500px;}
 .button-row{display:flex;gap:1rem;justify-content:center;margin:1rem 0;}
+.status-box{
+    padding:10px;border-radius:5px;margin-top:10px;
+    background:#f0f9ff;border:1px solid #3b82f6;color:#1e40af;
+}
 .component-description{
   padding:24px;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
   border-left:4px solid #3b82f6;border-radius:12px;
   box-shadow:0 2px 8px rgba(0,0,0,.05);margin:16px 0;
-  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 }
-.component-description p{margin:10px 0;line-height:1.6;color:#374151;}
-.base-description{font-size:17px;font-weight:600;color:#1e293b;}
-.base-description strong{color:#3b82f6;font-weight:700;}
-.feature-description{font-size:16px;font-weight:500;color:#1e293b;}
-.customization-note{font-size:15px;font-style:italic;color:#64748b;}
-.sample-intro{font-size:15px;font-weight:600;color:#1e293b;margin-top:16px;
-              border-top:1px solid #e2e8f0;padding-top:16px;}
-.load-button{background:#10b981 !important;}
 """
 
 # -------------------------------------------------------------------
 # 🖥️  Gradio 앱
 # -------------------------------------------------------------------
 with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css=CSS) as demo:
-    # State로 워크플로우 데이터 관리
-    workflow_state = gr.State(value={"nodes": [], "edges": []})
-
-    with gr.Column(elem_classes=["main-container"]):
-        gr.Markdown("# 🎨 Visual Workflow Builder\n**Create sophisticated workflows with drag-and-drop simplicity.**")
+    
+    gr.Markdown("# 🎨 Visual Workflow Builder\n**Debug Version - Testing JSON Load**")
+    
+    # 상태 표시
+    status_text = gr.Textbox(
+        label="Status", 
+        value="Ready", 
+        elem_classes=["status-box"],
+        interactive=False
+    )
 
-        gr.HTML(
-            """
-            <div class="component-description">
-              <p class="base-description">Base custom component powered by <strong>svelteflow</strong>.</p>
-              <p class="feature-description">Create custom workflows.</p>
-              <p class="customization-note">You can customise the nodes as well as the design of the workflow.</p>
-              <p class="sample-intro">Here is a sample:</p>
-            </div>
-            """
+    # ─── Workflow Builder ───
+    with gr.Column(elem_classes=["workflow-section"]):
+        workflow_builder = WorkflowBuilder(
+            label="🎨 Visual Workflow Designer",
+            value={"nodes": [], "edges": []},
+            elem_id="workflow_builder"
         )
 
-        # ─── Workflow Builder ───
-        with gr.Column(elem_classes=["workflow-section"]):
-            workflow_builder = WorkflowBuilder(
-                label="🎨 Visual Workflow Designer",
-                info="Drag from output ➜ input • Click nodes to edit properties",
-                value={"nodes": [], "edges": []}
+    # ─── Control Panel ───
+    gr.Markdown("## 🎮 Control Panel")
+    
+    # JavaScript force update button (hidden by default)
+    btn_force_update = gr.Button("⚡ Force Update (JavaScript)", variant="warning", visible=False)
+    loaded_data_store = gr.State(None)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### 📥 Import")
+            file_upload = gr.File(
+                label="Select JSON file",
+                file_types=[".json"],
+                type="filepath"
             )
+            btn_load = gr.Button("🚀 Load File", variant="primary", size="lg")
+            
+        with gr.Column(scale=1):
+            gr.Markdown("### 🧪 Test")
+            btn_sample = gr.Button("📊 Load Sample", variant="primary", size="lg")
+            btn_reset = gr.Button("🔄 Reset", variant="stop", size="lg")
+            
+        with gr.Column(scale=1):
+            gr.Markdown("### 💾 Export")
+            btn_preview = gr.Button("👁️ Preview JSON", size="lg")
+            btn_download = gr.DownloadButton("💾 Download JSON", size="lg")
+
+    # ─── Alternative Render Method ───
+    with gr.Accordion("🔬 Alternative Load Method", open=False):
+        gr.Markdown("If normal loading fails, try this dynamic rendering approach:")
+        btn_render = gr.Button("🎯 Render with Data", variant="primary")
+        render_container = gr.Column()
+        
+        @gr.render(inputs=[loaded_data_store], triggers=[btn_render.click])
+        def render_workflow_dynamic(data):
+            if data:
+                with gr.Column():
+                    gr.Markdown("### Dynamically Rendered Workflow")
+                    return WorkflowBuilder(
+                        label="Dynamic Workflow",
+                        value=data
+                    )
+            else:
+                return gr.Markdown("No data loaded yet")
 
-        # ─── Export / Import ───
-        gr.Markdown("## 💾 Export · 📂 Import")
+    # ─── Debug Section ──���
+    with gr.Accordion("🔍 Debug Info", open=True):
+        with gr.Row():
+            debug_text = gr.Textbox(label="State Info", lines=2)
+            debug_json = gr.Code(language="json", label="Current JSON", lines=10)
+        btn_debug = gr.Button("🔍 Update Debug Info", variant="secondary")
 
-        with gr.Row(elem_classes=["button-row"]):
-            btn_preview  = gr.Button("🔄 Preview JSON")
-            btn_download = gr.DownloadButton("💾 Save JSON file")
+    # ─── Code View ───
+    code_view = gr.Code(language="json", label="JSON Preview", lines=15)
+
+    # ─── Event Handlers ───
+    
+    # Load file - 데이터를 State에 저장
+    file_upload.change(
+        fn=import_workflow,
+        inputs=file_upload,
+        outputs=[loaded_data_store, code_view, status_text, btn_force_update]
+    )
+    
+    # Load button - State에서 WorkflowBuilder로 전송
+    btn_load.click(
+        fn=lambda data: data if data else {"nodes": [], "edges": []},
+        inputs=loaded_data_store,
+        outputs=workflow_builder
+    )
+    
+    # Force update with JavaScript
+    btn_force_update.click(
+        fn=None,
+        inputs=loaded_data_store,
+        outputs=None,
+        js="""
+        (data) => {
+            console.log('[Force Update] Attempting to update WorkflowBuilder with:', data);
+            
+            // WorkflowBuilder 엘리먼트 찾기
+            const workflowElement = document.querySelector('#workflow_builder');
+            if (workflowElement) {
+                // 여러 방법 시도
+                
+                // 방법 1: 직접 value 설정
+                if (workflowElement.__vue__) {
+                    workflowElement.__vue__.value = data;
+                    workflowElement.__vue__.$forceUpdate();
+                }
+                
+                // 방법 2: 이벤트 발생
+                const event = new CustomEvent('input', { 
+                    detail: data,
+                    bubbles: true 
+                });
+                workflowElement.dispatchEvent(event);
+                
+                // 방법 3: Gradio 이벤트
+                if (window.gradio_config && window.gradio_config.components) {
+                    const component = Object.values(window.gradio_config.components).find(
+                        c => c.props && c.props.elem_id === 'workflow_builder'
+                    );
+                    if (component) {
+                        component.props.value = data;
+                    }
+                }
+            }
             
-        with gr.Row(elem_classes=["button-row"]):
-            file_upload  = gr.File(label="📂 Select JSON file", file_types=[".json"])
-            btn_load = gr.Button("📥 Load into Workflow", variant="primary", elem_classes=["load-button"])
+            return data;
+        }
+        """
+    )
+    
+    # Sample workflow
+    btn_sample.click(
+        fn=set_sample_workflow,
+        outputs=[workflow_builder, code_view, status_text]
+    )
+    
+    # Reset
+    btn_reset.click(
+        fn=reset_workflow,
+        outputs=[workflow_builder, status_text]
+    )
+    
+    # Preview
+    btn_preview.click(
+        fn=export_pretty,
+        inputs=workflow_builder,
+        outputs=code_view
+    )
+    
+    # Download
+    btn_download.click(
+        fn=export_file,
+        inputs=workflow_builder
+    )
+    
+    # Debug
+    btn_debug.click(
+        fn=debug_current_state,
+        inputs=workflow_builder,
+        outputs=[debug_text, debug_json]
+    )
+    
+    # Auto-debug on change
+    workflow_builder.change(
+        fn=lambda x: f"Changed - Nodes: {len(x.get('nodes', []))}, Edges: {len(x.get('edges', []))}",
+        inputs=workflow_builder,
+        outputs=status_text
+    )
+    
+    # HTML viewer 업데이트
+    workflow_builder.change(
+        fn=create_html_view,
+        inputs=workflow_builder,
+        outputs=html_viewer
+    )
+    
+    # Also update HTML view when loading
+    loaded_data_store.change(
+        fn=create_html_view,
+        inputs=loaded_data_store,
+        outputs=html_viewer
+    )
 
-        code_view = gr.Code(language="json", label="Workflow Configuration", lines=14)
+    # ─── Instructions ───
+    with gr.Accordion("📖 Troubleshooting", open=True):
+        gr.Markdown(
+            """
+### 🔧 If JSON doesn't load visually:
 
-        # 디버깅 섹션
-        with gr.Row():
-            btn_debug = gr.Button("🔍 Debug Current State", variant="secondary")
-            debug_output = gr.Textbox(label="Debug Info", lines=1)
+1. **Try the Sample first** - Click "Load Sample" to test if the component works
+2. **Check Console** - Open browser DevTools (F12) for errors
+3. **File Format** - Ensure your JSON has this structure:
+```json
+{
+  "nodes": [{
+    "id": "1",
+    "type": "default",
+    "position": {"x": 100, "y": 100},
+    "data": {"label": "Node"}
+  }],
+  "edges": [{
+    "id": "e1",
+    "source": "1",
+    "target": "2"
+  }]
+}
+```
 
-        # ─── 이벤트 연결 ───
-        
-        # Preview 버튼 - 현재 워크플로우를 JSON으로 표시
-        btn_preview.click(
-            fn=export_pretty, 
-            inputs=workflow_builder, 
-            outputs=code_view
+4. **Alternative Methods**:
+   - Click file → Click "Load File" button
+   - Try "Reset" then load again
+   - Refresh page (F5) after loading
+   - Use the "Force Update" button if it appears
+
+5. **Component Limitations**:
+   - Some custom Gradio components may have bugs with dynamic updates
+   - The WorkflowBuilder might require specific node types or data formats
+
+### 🚨 Known Issues with gradio_workflowbuilder:
+
+This appears to be a bug in the gradio_workflowbuilder component where it doesn't properly respond to value updates. Possible workarounds:
+
+1. **Manual Recreation**: Copy the JSON and manually recreate nodes
+2. **Component Update**: Check if there's a newer version: `pip install --upgrade gradio_workflowbuilder`
+3. **Alternative Components**: Consider using other workflow builders or diagram libraries
+4. **Report Bug**: Report this issue to the component maintainer
+
+### 💡 Alternative Solution:
+
+If loading continues to fail, you might need to:
+```python
+# Option 1: Recreate the component on each load
+@gr.render(inputs=[loaded_data_store])
+def render_workflow(data):
+    return WorkflowBuilder(value=data)
+
+# Option 2: Use a different workflow library
+# Consider react-flow, vis.js, or cytoscape.js wrapped in Gradio HTML
+```
+
+### 🎨 HTML Fallback Viewer:
+
+If the WorkflowBuilder component is broken, use the HTML viewer below to at least see your workflow structure:
+            """
         )
         
-        # Download 버튼
-        btn_download.click(
-            fn=export_file, 
-            inputs=workflow_builder
-        )
+    # HTML Fallback Viewer
+    gr.Markdown("### 📊 HTML Workflow Viewer (Fallback)")
+    html_viewer = gr.HTML(label="Workflow HTML View")
+    
+    def create_html_view(data):
+        """JSON을 HTML로 시각화"""
+        if not data:
+            return "<p>No workflow data</p>"
         
-        # 파일 업로드 -> State에 저장
-        file_upload.change(
-            fn=load_workflow_from_file,
-            inputs=file_upload,
-            outputs=workflow_state
-        ).then(
-            fn=update_workflow_display,
-            inputs=workflow_state,
-            outputs=code_view
-        )
+        html = """
+        <div style='font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; border-radius: 8px;'>
+            <h3>Workflow Visualization</h3>
+            <div style='display: flex; gap: 20px; flex-wrap: wrap;'>
+        """
         
-        # Load 버튼 클릭 -> State에서 WorkflowBuilder로 전달
-        btn_load.click(
-            fn=lambda x: x,  # State 값을 그대로 전달
-            inputs=workflow_state,
-            outputs=workflow_builder
-        )
+        # 노드 표시
+        nodes = data.get('nodes', [])
+        for node in nodes:
+            node_id = node.get('id', 'unknown')
+            label = node.get('data', {}).get('label', 'Node')
+            x = node.get('position', {}).get('x', 0)
+            y = node.get('position', {}).get('y', 0)
+            
+            html += f"""
+            <div style='background: white; border: 2px solid #3b82f6; border-radius: 8px; 
+                       padding: 15px; margin: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                       min-width: 150px;'>
+                <strong>ID:</strong> {node_id}<br>
+                <strong>Label:</strong> {label}<br>
+                <strong>Position:</strong> ({x}, {y})
+            </div>
+            """
         
-        # Debug 버튼
-        btn_debug.click(
-            fn=debug_workflow, 
-            inputs=workflow_builder, 
-            outputs=debug_output
-        )
+        html += "</div>"
         
-        # WorkflowBuilder 값 변경 시 State 업데이트
-        workflow_builder.change(
-            fn=lambda x: x,
-            inputs=workflow_builder,
-            outputs=workflow_state
-        )
-
-        # ─── 샘플 워크플로우 ───
-        gr.Markdown("### 🎯 Sample Workflows")
+        # 엣지 표시
+        edges = data.get('edges', [])
+        if edges:
+            html += "<h4>Connections:</h4><ul>"
+            for edge in edges:
+                source = edge.get('source', '?')
+                target = edge.get('target', '?')
+                html += f"<li>{source} → {target}</li>"
+            html += "</ul>"
         
-        def create_sample_workflow():
-            return {
-                "nodes": [
-                    {
-                        "id": "node_1",
-                        "type": "custom",
-                        "position": {"x": 100, "y": 100},
-                        "data": {"label": "Input Node", "value": "Start"}
-                    },
-                    {
-                        "id": "node_2",
-                        "type": "custom",
-                        "position": {"x": 300, "y": 100},
-                        "data": {"label": "Process Node", "value": "Transform"}
-                    },
-                    {
-                        "id": "node_3",
-                        "type": "custom",
-                        "position": {"x": 500, "y": 100},
-                        "data": {"label": "Output Node", "value": "Result"}
-                    }
-                ],
-                "edges": [
-                    {
-                        "id": "edge_1",
-                        "source": "node_1",
-                        "target": "node_2",
-                        "type": "default"
-                    },
-                    {
-                        "id": "edge_2",
-                        "source": "node_2",
-                        "target": "node_3",
-                        "type": "default"
-                    }
-                ]
-            }
+        html += "</div>"
+        return html
         
-        with gr.Row():
-            btn_sample1 = gr.Button("📊 Load Linear Workflow", variant="primary")
-            btn_sample2 = gr.Button("🔀 Load Branching Workflow", variant="primary")
+        # HTML Fallback Viewer
+        gr.Markdown("### 📊 HTML Workflow Viewer (Fallback)")
+        html_viewer = gr.HTML(label="Workflow HTML View")
         
-        def create_branching_workflow():
-            return {
-                "nodes": [
-                    {
-                        "id": "start",
-                        "type": "custom",
-                        "position": {"x": 100, "y": 200},
-                        "data": {"label": "Start", "value": "Input Data"}
-                    },
-                    {
-                        "id": "branch1",
-                        "type": "custom",
-                        "position": {"x": 300, "y": 100},
-                        "data": {"label": "Branch A", "value": "Process A"}
-                    },
-                    {
-                        "id": "branch2",
-                        "type": "custom",
-                        "position": {"x": 300, "y": 300},
-                        "data": {"label": "Branch B", "value": "Process B"}
-                    },
-                    {
-                        "id": "merge",
-                        "type": "custom",
-                        "position": {"x": 500, "y": 200},
-                        "data": {"label": "Merge", "value": "Combine Results"}
-                    }
-                ],
-                "edges": [
-                    {"id": "e1", "source": "start", "target": "branch1", "type": "default"},
-                    {"id": "e2", "source": "start", "target": "branch2", "type": "default"},
-                    {"id": "e3", "source": "branch1", "target": "merge", "type": "default"},
-                    {"id": "e4", "source": "branch2", "target": "merge", "type": "default"}
-                ]
-            }
-        
-        # 샘플 로드 이벤트
-        btn_sample1.click(
-            fn=create_sample_workflow,
-            outputs=workflow_state
-        ).then(
-            fn=lambda x: x,
-            inputs=workflow_state,
-            outputs=workflow_builder
-        ).then(
-            fn=update_workflow_display,
-            inputs=workflow_state,
-            outputs=code_view
-        )
+        def create_html_view(data):
+            """JSON을 HTML로 시각화"""
+            if not data:
+                return "<p>No workflow data</p>"
+            
+            html = """
+            <div style='font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; border-radius: 8px;'>
+                <h3>Workflow Visualization</h3>
+                <div style='display: flex; gap: 20px; flex-wrap: wrap;'>
+            """
+            
+            # 노드 표시
+            nodes = data.get('nodes', [])
+            for node in nodes:
+                node_id = node.get('id', 'unknown')
+                label = node.get('data', {}).get('label', 'Node')
+                x = node.get('position', {}).get('x', 0)
+                y = node.get('position', {}).get('y', 0)
+                
+                html += f"""
+                <div style='background: white; border: 2px solid #3b82f6; border-radius: 8px; 
+                           padding: 15px; margin: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                           min-width: 150px;'>
+                    <strong>ID:</strong> {node_id}<br>
+                    <strong>Label:</strong> {label}<br>
+                    <strong>Position:</strong> ({x}, {y})
+                </div>
+                """
+            
+            html += "</div>"
+            
+            # 엣지 표시
+            edges = data.get('edges', [])
+            if edges:
+                html += "<h4>Connections:</h4><ul>"
+                for edge in edges:
+                    source = edge.get('source', '?')
+                    target = edge.get('target', '?')
+                    html += f"<li>{source} → {target}</li>"
+                html += "</ul>"
+            
+            html += "</div>"
+            return html
         
-        btn_sample2.click(
-            fn=create_branching_workflow,
-            outputs=workflow_state
-        ).then(
-            fn=lambda x: x,
-            inputs=workflow_state,
-            outputs=workflow_builder
-        ).then(
-            fn=update_workflow_display,
-            inputs=workflow_state,
-            outputs=code_view
+        # HTML viewer 업데이트
+        workflow_builder.change(
+            fn=create_html_view,
+            inputs=workflow_builder,
+            outputs=html_viewer
         )
 
-        # ─── 사용 방법 ───
-        with gr.Accordion("📖 How to Use", open=False):
-            gr.Markdown(
-                """
-### 🚀 Quick Start
-1. **Create Workflow** — Add nodes and connect them
-2. **Save** — Click "Save JSON file" to download
-3. **Load** — Select file → Click "Load into Workflow"
-
-### 📝 Loading Workflows
-1. Click "Select JSON file" and choose your workflow file
-2. Click the green "Load into Workflow" button
-3. Your workflow will appear in the visual designer
-
-### 🎯 Try Sample Workflows
-- Click sample buttons to see example workflows
-- Modify them to understand the structure
-
-### 📋 JSON Structure
-```json
-{
-  "nodes": [
-    {
-      "id": "unique_id",
-      "type": "custom",
-      "position": {"x": 100, "y": 100},
-      "data": {"label": "Node Name"}
-    }
-  ],
-  "edges": [
-    {
-      "id": "edge_id",
-      "source": "node_id_1",
-      "target": "node_id_2"
-    }
-  ]
-}
-```
-                """
-            )
-
 # -------------------------------------------------------------------
 # 🚀 실행
 # -------------------------------------------------------------------
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", show_error=True)
+    demo.launch(
+        server_name="0.0.0.0",
+        show_error=True,
+        debug=True  # 디버그 모드 활성화
+    )