app.py

"""
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:
    """코드뷰 미리보기용 문자열."""
    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 용)."""
    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[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)
    # 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;}
"""

# -------------------------------------------------------------------
# 🖥️  Gradio 앱
# -------------------------------------------------------------------
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.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 from output ➜ input • Click nodes to edit properties",
            )

        # ─── Export / Import 컨트롤 ───
        gr.Markdown("## 💾 Export · 📂 Import")

        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"])

        code_view = gr.Code(language="json", label="Workflow Configuration", lines=14)

        # 이벤트 연결
        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 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)  
                """
            )

# -------------------------------------------------------------------
# 🚀 실행
# -------------------------------------------------------------------
if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", show_error=True)