Update app.py

app.py

@@ -1,16 +1,23 @@
+"""
+app.py  ―――――――――――――――――――――――――――――――――――――――――――――――――――――――
+● 🔄 Preview JSON  : 코드 창에 현재 워크플로 JSON 표시  
+● 💾 Save JSON     : JSON 파일 다운로드  
+● 📂 Load JSON     : JSON 업로드 ➜ 노드·좌표·연결 즉시 복원
+"""
+
 import os, json, typing, tempfile
 import gradio as gr
 from gradio_workflowbuilder import WorkflowBuilder
 
 # -------------------------------------------------------------------
-# 🛠️  헬퍼
+# 🛠️  헬퍼 함수
 # -------------------------------------------------------------------
 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_file(data: typing.Dict[str, typing.Any]) -> str | None:
-    """JSON을 임시 파일로 저장 후 경로 반환(DownloadButton에 전달)."""
+    """임시 JSON 파일 경로 반환(DownloadButton 용)."""
     if not data:
         return None
     fd, path = tempfile.mkstemp(suffix=".json")
@@ -18,43 +25,44 @@ def export_file(data: typing.Dict[str, typing.Any]) -> str | None:
         json.dump(data, f, ensure_ascii=False, indent=2)
     return path
 
-def import_workflow(file_obj: gr.File) -> tuple[dict | None, str]:
-    """업로드된 JSON → builder 값 & 코드뷰 문자열 동시 반환."""
+def import_workflow(file_obj: gr.File) -> tuple[gr.Update | None, str]:
+    """업로드된 JSON → WorkflowBuilder 값 & 코드뷰 동시 갱신."""
     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)
+    # gr.update 로 감싸야 시각적으로 재렌더링됨
+    return gr.update(value=data), json.dumps(data, indent=2, ensure_ascii=False)
+
+# -------------------------------------------------------------------
+# 🎨 UI (인라인 CSS)
+# -------------------------------------------------------------------
+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-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;}
+"""
 
 # -------------------------------------------------------------------
-# 🎨 UI
+# 🖥️  Gradio 앱
 # -------------------------------------------------------------------
-with gr.Blocks(
-    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;
-        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.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css=CSS) as demo:
 
     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**Create sophisticated workflows with drag-and-drop simplicity.**")
 
         gr.HTML(
             """
@@ -71,10 +79,10 @@ with gr.Blocks(
         with gr.Column(elem_classes=["workflow-section"]):
             workflow_builder = WorkflowBuilder(
                 label="🎨 Visual Workflow Designer",
-                info="Drag components from the sidebar → connect → click nodes to edit properties",
+                info="Drag from output ➜ input • Click nodes to edit properties",
             )
 
-        # ─── Export / Import 영역 ───
+        # ─── Export / Import 컨트롤 ───
         gr.Markdown("## 💾 Export · 📂 Import")
 
         with gr.Row(elem_classes=["button-row"]):
@@ -82,33 +90,22 @@ with gr.Blocks(
             btn_download = gr.DownloadButton("💾 Save JSON file")
             file_upload  = gr.File(label="📂 Load JSON", file_types=[".json"])
 
-        export_output = gr.Code(language="json", label="Workflow Configuration", lines=12)
+        code_view = gr.Code(language="json", label="Workflow Configuration", lines=14)
 
-        # ─── 이벤트 바인딩 ───
-        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]
-        )
+        # 이벤트 연결
+        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])
 
-        # (선택) 간단 사용법
+        # 사용법
         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)  
+1. **Add Components** — drag items from the sidebar onto the canvas  
+2. **Connect Nodes** — drag from 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)  
                 """
             )