Update app.py

app.py

@@ -1,8 +1,7 @@
 """
-app.py  ―――――――――――――――――――――――――――――――――――――――――――――――――――――――
-● 🔄 Preview JSON  : 코드 창에 현재 워크플로 JSON 표시  
-● 💾 Save JSON     : JSON 파일 다운로드  
-● 📂 Load JSON     : JSON 업로드 ➜ 노드·좌표·연결 즉시 복원
+app.py  ――――――――――――――――――――――――――――――――――――――――――――――――
+✓ Preview · Save · Load 기능 포함
+✓ Load 시 노드/좌표/엣지 자동 복원
 """
 
 import os, json, typing, tempfile
@@ -10,14 +9,12 @@ import gradio as gr
 from gradio_workflowbuilder import WorkflowBuilder
 
 # -------------------------------------------------------------------
-# 🛠️  헬퍼 함수
+# 🛠️  헬퍼
 # -------------------------------------------------------------------
 def export_pretty(data: typing.Dict[str, typing.Any]) -> str:
-    """코드뷰 미리보기용 문자열."""
     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 용)."""
+def export_file(data: typing.Dict[str, typing.Any]) -> typing.Optional[str]:
     if not data:
         return None
     fd, path = tempfile.mkstemp(suffix=".json")
@@ -25,17 +22,19 @@ 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[gr.Update | None, str]:
-    """업로드된 JSON → WorkflowBuilder 값 & 코드뷰 동시 갱신."""
+def import_workflow(file_obj: gr.File) -> typing.Tuple[typing.Any, str]:
+    """
+    업로드된 JSON → WorkflowBuilder 값 & 코드뷰 갱신.
+    첫 반환값은 gr.update(value=...) 로 감싸 시각적 재배치 유도.
+    """
     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)
-    # gr.update 로 감싸야 시각적으로 재렌더링됨
     return gr.update(value=data), json.dumps(data, indent=2, ensure_ascii=False)
 
 # -------------------------------------------------------------------
-# 🎨 UI (인라인 CSS)
+# 🎨 CSS
 # -------------------------------------------------------------------
 CSS = """
 .main-container{max-width:1600px;margin:0 auto;}
@@ -62,7 +61,7 @@ CSS = """
 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(
             """
@@ -82,7 +81,7 @@ with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css
                 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"]):
@@ -97,12 +96,11 @@ with gr.Blocks(title="🎨 Visual Workflow Builder", theme=gr.themes.Soft(), css
         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 sidebar onto the canvas  
-2. **Connect Nodes** — drag from blue handle (output) ➜ gray handle (input)  
+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)