Update app.py

app.py

@@ -1,126 +1,119 @@
+import os, json, typing, tempfile
 import gradio as gr
 from gradio_workflowbuilder import WorkflowBuilder
-import json
 
+# -------------------------------------------------------------------
+# 🛠️  헬퍼
+# -------------------------------------------------------------------
+def export_pretty(data: typing.Dict[str, typing.Any]) -> str:
+    """코드뷰 미리보기용 JSON 문자열."""
+    return json.dumps(data, indent=2, ensure_ascii=False) if data else "No workflow to export"
 
-def export_workflow(workflow_data):
-    """Export workflow as formatted JSON"""
-    if not workflow_data:
-        return "No workflow to export"
-    return json.dumps(workflow_data, indent=2)
+def export_file(data: typing.Dict[str, typing.Any]) -> str | None:
+    """JSON을 임시 파일로 저장 후 경로 반환(DownloadButton에 전달)."""
+    if not data:
+        return None
+    fd, path = tempfile.mkstemp(suffix=".json")
+    with os.fdopen(fd, "w", encoding="utf-8") as f:
+        json.dump(data, f, ensure_ascii=False, indent=2)
+    return path
 
+def import_workflow(file_obj: gr.File) -> tuple[dict | None, str]:
+    """업로드된 JSON → builder 값 & 코드뷰 문자열 동시 반환."""
+    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 data, json.dumps(data, indent=2, ensure_ascii=False)
 
-# Create the main interface
+# -------------------------------------------------------------------
+# 🎨 UI
+# -------------------------------------------------------------------
 with gr.Blocks(
-    title="🎨 Visual Workflow Builder", 
+    title="🎨 Visual Workflow Builder",
     theme=gr.themes.Soft(),
     css="""
     .main-container { max-width: 1600px; margin: 0 auto; }
     .workflow-section { margin-bottom: 2rem; }
     .button-row { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
-    
     .component-description {
         padding: 24px;
-        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-        border-radius: 12px;
-        border-left: 4px solid #3b82f6;
-        margin: 16px 0;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .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;
-        color: #1e293b;
-        font-weight: 500;
-    }
-
-    .customization-note {
-        font-size: 15px;
-        color: #64748b;
-        font-style: italic;
-    }
-
-    .sample-intro {
-        font-size: 15px;
-        color: #1e293b;
-        font-weight: 600;
-        margin-top: 16px;
-        border-top: 1px solid #e2e8f0;
-        padding-top: 16px;
+        background: linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
+        border-radius: 12px; border-left: 4px solid #3b82f6;
+        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;}
     """
 ) as demo:
-    
+
     with gr.Column(elem_classes=["main-container"]):
-        gr.Markdown("""
-        # 🎨 Visual Workflow Builder
-        
-        **Create sophisticated workflows with drag and drop simplicity.**
-        """)
-        
-        # Simple description section with styling
-        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>
-        """)
-        
-        # Main workflow builder section
+        gr.Markdown("# 🎨 Visual Workflow Builder\n**Create sophisticated workflows with drag-and-drop simplicity.**")
+
+        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",
-                info="Drag components from the sidebar → Connect nodes by dragging from output (right) to input (left) → Click nodes to edit properties"
+                info="Drag components from the sidebar → connect → click nodes to edit properties",
             )
-        
-        # Export section below the workflow
-        gr.Markdown("## 💾 Export Workflow")
-        
-        with gr.Row():
-            with gr.Column():
-                export_output = gr.Code(
-                    language="json", 
-                    label="Workflow Configuration",
-                    lines=10
-                )
-        
-        # Action button
+
+        # ─── Export / Import 영역 ───
+        gr.Markdown("## 💾 Export · 📂 Import")
+
         with gr.Row(elem_classes=["button-row"]):
-            export_btn = gr.Button("💾 Export JSON", variant="primary", size="lg")
-        
-        # Instructions
+            btn_preview  = gr.Button("🔄 Preview JSON")
+            btn_download = gr.DownloadButton("💾 Save JSON file")
+            file_upload  = gr.File(label="📂 Load JSON", file_types=[".json"])
 
-    
-    # Event handlers
-    export_btn.click(
-        fn=export_workflow,
-        inputs=[workflow_builder],
-        outputs=[export_output]
-    )
+        export_output = gr.Code(language="json", label="Workflow Configuration", lines=12)
 
+        # ─── 이벤트 바인딩 ───
+        btn_preview.click(
+            fn=export_pretty,
+            inputs=workflow_builder,
+            outputs=export_output
+        )
+        btn_download.click(
+            fn=export_file,
+            inputs=workflow_builder
+        )
+        file_upload.change(
+            fn=import_workflow,
+            inputs=file_upload,
+            outputs=[workflow_builder, export_output]
+        )
+
+        # (선택) 간단 사용법
+        with gr.Accordion("📖 How to Use", open=False):
+            gr.Markdown(
+                """
+1. **Add Components** – drag items from the left sidebar onto the canvas  
+2. **Connect Nodes** – drag from blue circle (output) ➜ gray circle (input)  
+3. **Edit Properties** – click a node to change its settings  
+4. **Save** – *Save JSON file* to download your workflow  
+5. **Load** – *Load JSON* to restore (nodes auto-position)  
+                """
+            )
 
+# -------------------------------------------------------------------
+# 🚀 실행
+# -------------------------------------------------------------------
 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)