Update app.py

app.py

@@ -2,7 +2,7 @@
 app.py  ――――――――――――――――――――――――――――――――――――――――――――――――
 ✓ Preview · Save · Load 기능 포함
 ✓ Load 시 노드/좌표/엣지 자동 복원
-✓ JSON 로드 시 시각적 노드 자동 배치 수정
+✓ State를 사용한 안정적인 JSON 로드
 """
 
 import os, json, typing, tempfile
@@ -23,32 +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.Dict[str, typing.Any], str]:
-    """
-    업로드된 JSON → WorkflowBuilder 값 & 코드뷰 갱신.
-    WorkflowBuilder가 직접 dict를 받도록 수정
-    """
+def load_workflow_from_file(file_obj):
+    """JSON 파일을 읽어서 데이터만 반환"""
     if file_obj is None:
-        return {}, "No workflow loaded"
+        return None
     
     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)
-    
+        return data
     except Exception as e:
-        return {}, f"Error loading workflow: {str(e)}"
+        print(f"Error loading file: {e}")
+        return None
+
+def update_workflow_display(workflow_data):
+    """워크플로우 데이터를 코드뷰에 표시"""
+    if workflow_data:
+        return json.dumps(workflow_data, indent=2, ensure_ascii=False)
+    return "No workflow loaded"
+
+def debug_workflow(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}"
 
 # -------------------------------------------------------------------
 # 🎨 CSS
@@ -70,12 +70,15 @@ CSS = """
 .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.**")
@@ -96,7 +99,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": []}  # 초기값 설정
+                value={"nodes": [], "edges": []}
             )
 
         # ─── Export / Import ───
@@ -105,114 +108,213 @@ with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css
         with gr.Row(elem_classes=["button-row"]):
             btn_preview  = gr.Button("🔄 Preview JSON")
             btn_download = gr.DownloadButton("💾 Save JSON file")
-            file_upload  = gr.File(label="📂 Load JSON", file_types=[".json"])
+            
+        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"])
 
         code_view = gr.Code(language="json", label="Workflow Configuration", lines=14)
 
-        # 상태 메시지 표시용
-        status_msg = gr.Textbox(label="Status", visible=False)
+        # 디버깅 섹션
+        with gr.Row():
+            btn_debug = gr.Button("🔍 Debug Current State", variant="secondary")
+            debug_output = gr.Textbox(label="Debug Info", lines=1)
 
-        # 이벤트 연결
-        btn_preview.click(fn=export_pretty, inputs=workflow_builder, outputs=code_view)
-        btn_download.click(fn=export_file, inputs=workflow_builder)
+        # ─── 이벤트 연결 ───
         
-        # file_upload 이벤트 수정 - WorkflowBuilder를 직접 업데이트
+        # Preview 버튼 - 현재 워크플로우를 JSON으로 표시
+        btn_preview.click(
+            fn=export_pretty, 
+            inputs=workflow_builder, 
+            outputs=code_view
+        )
+        
+        # Download 버튼
+        btn_download.click(
+            fn=export_file, 
+            inputs=workflow_builder
+        )
+        
+        # 파일 업로드 -> State에 저장
         file_upload.change(
-            fn=import_workflow, 
-            inputs=file_upload, 
-            outputs=[workflow_builder, code_view]
+            fn=load_workflow_from_file,
+            inputs=file_upload,
+            outputs=workflow_state
+        ).then(
+            fn=update_workflow_display,
+            inputs=workflow_state,
+            outputs=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(
-                """
-1. **Add Nodes** — drag items from the sidebar onto the canvas  
-2. **Connect** — blue handle (output) ➜ gray handle (input)  
-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"
-    }
-  ]
-}
-```
-                """
-            )
+        # Load 버튼 클릭 -> State에서 WorkflowBuilder로 전달
+        btn_load.click(
+            fn=lambda x: x,  # State 값을 그대로 전달
+            inputs=workflow_state,
+            outputs=workflow_builder
+        )
+        
+        # Debug 버튼
+        btn_debug.click(
+            fn=debug_workflow, 
+            inputs=workflow_builder, 
+            outputs=debug_output
+        )
+        
+        # WorkflowBuilder 값 변경 시 State 업데이트
+        workflow_builder.change(
+            fn=lambda x: x,
+            inputs=workflow_builder,
+            outputs=workflow_state
+        )
 
-        # 샘플 워크플로우 로드 버튼
+        # ─── 샘플 워크플로우 ───
         gr.Markdown("### 🎯 Sample Workflows")
         
-        def load_sample_workflow():
-            sample = {
+        def create_sample_workflow():
+            return {
                 "nodes": [
                     {
-                        "id": "input_1",
-                        "type": "input",
+                        "id": "node_1",
+                        "type": "custom",
                         "position": {"x": 100, "y": 100},
-                        "data": {"label": "Input Node", "value": "Sample Input"}
+                        "data": {"label": "Input Node", "value": "Start"}
                     },
                     {
-                        "id": "process_1",
-                        "type": "default",
+                        "id": "node_2",
+                        "type": "custom",
                         "position": {"x": 300, "y": 100},
-                        "data": {"label": "Process Node"}
+                        "data": {"label": "Process Node", "value": "Transform"}
                     },
                     {
-                        "id": "output_1",
-                        "type": "output",
+                        "id": "node_3",
+                        "type": "custom",
                         "position": {"x": 500, "y": 100},
-                        "data": {"label": "Output Node"}
+                        "data": {"label": "Output Node", "value": "Result"}
                     }
                 ],
                 "edges": [
                     {
                         "id": "edge_1",
-                        "source": "input_1",
-                        "target": "process_1",
-                        "sourceHandle": "output",
-                        "targetHandle": "input"
+                        "source": "node_1",
+                        "target": "node_2",
+                        "type": "default"
                     },
                     {
                         "id": "edge_2",
-                        "source": "process_1",
-                        "target": "output_1",
-                        "sourceHandle": "output",
-                        "targetHandle": "input"
+                        "source": "node_2",
+                        "target": "node_3",
+                        "type": "default"
                     }
                 ]
             }
-            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]
+        with gr.Row():
+            btn_sample1 = gr.Button("📊 Load Linear Workflow", variant="primary")
+            btn_sample2 = gr.Button("🔀 Load Branching Workflow", variant="primary")
+        
+        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
         )
+        
+        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
+        )
+
+        # ─── 사용 방법 ───
+        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"
+    }
+  ]
+}
+```
+                """
+            )
 
 # -------------------------------------------------------------------
 # 🚀 실행