Update app.py

app.py

@@ -2,6 +2,7 @@
 app.py  ――――――――――――――――――――――――――――――――――――――――――――――――
 ✓ Preview · Save · Load 기능 포함
 ✓ Load 시 노드/좌표/엣지 자동 복원
+✓ JSON 로드 시 시각적 노드 자동 배치 수정
 """
 
 import os, json, typing, tempfile
@@ -22,16 +23,32 @@ def export_file(data: typing.Dict[str, typing.Any]) -> typing.Optional[str]:
         json.dump(data, f, ensure_ascii=False, indent=2)
     return path
 
-def import_workflow(file_obj: gr.File) -> typing.Tuple[typing.Any, str]:
+def import_workflow(file_obj: gr.File) -> typing.Tuple[typing.Dict[str, typing.Any], str]:
     """
     업로드된 JSON → WorkflowBuilder 값 & 코드뷰 갱신.
-    첫 반환값은 gr.update(value=...) 로 감싸 시각적 재배치 유도.
+    WorkflowBuilder가 직접 dict를 받도록 수정
     """
     if file_obj is None:
-        return None, "No workflow loaded"
-    with open(file_obj.name, "r", encoding="utf-8") as f:
-        data = json.load(f)
-    return gr.update(value=data), json.dumps(data, indent=2, ensure_ascii=False)
+        return {}, "No workflow loaded"
+    
+    try:
+        with open(file_obj.name, "r", encoding="utf-8") as f:
+            data = json.load(f)
+        
+        # WorkflowBuilder가 기대하는 형식인지 확인
+        if not isinstance(data, dict):
+            return {}, "Invalid workflow format: expected dictionary"
+        
+        # 필수 키들이 있는지 확인 (nodes, edges 등)
+        if 'nodes' not in data:
+            data['nodes'] = []
+        if 'edges' not in data:
+            data['edges'] = []
+            
+        return data, json.dumps(data, indent=2, ensure_ascii=False)
+    
+    except Exception as e:
+        return {}, f"Error loading workflow: {str(e)}"
 
 # -------------------------------------------------------------------
 # 🎨 CSS
@@ -79,6 +96,7 @@ with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css
             workflow_builder = WorkflowBuilder(
                 label="🎨 Visual Workflow Designer",
                 info="Drag from output ➜ input • Click nodes to edit properties",
+                value={"nodes": [], "edges": []}  # 초기값 설정
             )
 
         # ─── Export / Import ───
@@ -91,10 +109,28 @@ with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css
 
         code_view = gr.Code(language="json", label="Workflow Configuration", lines=14)
 
+        # 상태 메시지 표시용
+        status_msg = gr.Textbox(label="Status", visible=False)
+
         # 이벤트 연결
         btn_preview.click(fn=export_pretty, inputs=workflow_builder, outputs=code_view)
         btn_download.click(fn=export_file, inputs=workflow_builder)
-        file_upload.change(fn=import_workflow, inputs=file_upload, outputs=[workflow_builder, code_view])
+        
+        # file_upload 이벤트 수정 - WorkflowBuilder를 직접 업데이트
+        file_upload.change(
+            fn=import_workflow, 
+            inputs=file_upload, 
+            outputs=[workflow_builder, code_view]
+        )
+
+        # 디버깅용 - 현재 workflow 상태 확인
+        def debug_workflow(data):
+            print("Current workflow data:", json.dumps(data, indent=2))
+            return f"Nodes: {len(data.get('nodes', []))}, Edges: {len(data.get('edges', []))}"
+        
+        btn_debug = gr.Button("🔍 Debug Current State", variant="secondary")
+        debug_output = gr.Textbox(label="Debug Info", lines=1)
+        btn_debug.click(fn=debug_workflow, inputs=workflow_builder, outputs=debug_output)
 
         with gr.Accordion("📖 How to Use", open=False):
             gr.Markdown(
@@ -104,11 +140,82 @@ with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css
 3. **Edit** — click any node to change its properties  
 4. **Save** — *Save JSON file* to download your workflow  
 5. **Load** — *Load JSON* to restore (nodes auto-position)  
+
+### 📝 Expected JSON Format:
+```json
+{
+  "nodes": [
+    {
+      "id": "node_1",
+      "type": "custom",
+      "position": {"x": 100, "y": 100},
+      "data": {"label": "Node 1"}
+    }
+  ],
+  "edges": [
+    {
+      "id": "edge_1",
+      "source": "node_1",
+      "target": "node_2"
+    }
+  ]
+}
+```
                 """
             )
 
+        # 샘플 워크플로우 로드 버튼
+        gr.Markdown("### 🎯 Sample Workflows")
+        
+        def load_sample_workflow():
+            sample = {
+                "nodes": [
+                    {
+                        "id": "input_1",
+                        "type": "input",
+                        "position": {"x": 100, "y": 100},
+                        "data": {"label": "Input Node", "value": "Sample Input"}
+                    },
+                    {
+                        "id": "process_1",
+                        "type": "default",
+                        "position": {"x": 300, "y": 100},
+                        "data": {"label": "Process Node"}
+                    },
+                    {
+                        "id": "output_1",
+                        "type": "output",
+                        "position": {"x": 500, "y": 100},
+                        "data": {"label": "Output Node"}
+                    }
+                ],
+                "edges": [
+                    {
+                        "id": "edge_1",
+                        "source": "input_1",
+                        "target": "process_1",
+                        "sourceHandle": "output",
+                        "targetHandle": "input"
+                    },
+                    {
+                        "id": "edge_2",
+                        "source": "process_1",
+                        "target": "output_1",
+                        "sourceHandle": "output",
+                        "targetHandle": "input"
+                    }
+                ]
+            }
+            return sample, json.dumps(sample, indent=2, ensure_ascii=False)
+        
+        btn_sample = gr.Button("📥 Load Sample Workflow", variant="primary")
+        btn_sample.click(
+            fn=load_sample_workflow,
+            outputs=[workflow_builder, code_view]
+        )
+
 # -------------------------------------------------------------------
 # 🚀 실행
 # -------------------------------------------------------------------
 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)