Create app-backup.py

app-backup.py

@@ -0,0 +1,743 @@
+import gradio as gr
+import os
+import sys
+import json
+import requests
+
+# 현재 디렉토리와 폰트 파일 경로 설정
+CURRENT_DIR = os.path.dirname(os.path.abspath(__file__))
+FONT_PATH = os.path.join(CURRENT_DIR, 'NanumGothic-Regular.ttf')
+FONTS_CONF_PATH = os.path.join(CURRENT_DIR, 'fonts.conf')
+
+# fonts.conf 파일 생성 함수
+def create_fonts_conf():
+    """Graphviz가 로컬 폰트를 인식할 수 있도록 fonts.conf 파일 생성"""
+    fonts_conf_content = f"""<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+    <!-- 로컬 폰트 디렉토리 추가 -->
+    <dir>{CURRENT_DIR}</dir>
+    
+    <!-- NanumGothic 폰트 별칭 설정 -->
+    <alias>
+        <family>NanumGothic</family>
+        <prefer>
+            <family>NanumGothic-Regular</family>
+        </prefer>
+    </alias>
+    
+    <alias>
+        <family>NanumGothic-Regular</family>
+        <default>
+            <family>NanumGothic-Regular</family>
+        </default>
+    </alias>
+    
+    <!-- 한글 폰트 매핑 -->
+    <match target="pattern">
+        <test name="family">
+            <string>NanumGothic</string>
+        </test>
+        <edit name="family" mode="assign">
+            <string>NanumGothic-Regular</string>
+        </edit>
+    </match>
+</fontconfig>
+"""
+    
+    with open(FONTS_CONF_PATH, 'w', encoding='utf-8') as f:
+        f.write(fonts_conf_content)
+    print(f"fonts.conf 파일 생성됨: {FONTS_CONF_PATH}")
+
+# 폰트 설정
+if os.path.exists(FONT_PATH):
+    print(f"한글 폰트 파일 발견: {FONT_PATH}")
+    
+    # fonts.conf 파일 생성
+    create_fonts_conf()
+    
+    # Graphviz가 폰트를 찾을 수 있도록 환경 변수 설정
+    os.environ['GDFONTPATH'] = CURRENT_DIR
+    os.environ['FONTCONFIG_PATH'] = CURRENT_DIR
+    os.environ['FONTCONFIG_FILE'] = FONTS_CONF_PATH
+    
+    print(f"GDFONTPATH 설정: {CURRENT_DIR}")
+    print(f"FONTCONFIG_FILE 설정: {FONTS_CONF_PATH}")
+else:
+    print(f"경고: 한글 폰트 파일을 찾을 수 없습니다: {FONT_PATH}")
+
+# 환경 변수로 폰트 경로 저장 (generator들이 사용할 수 있도록)
+os.environ['KOREAN_FONT_PATH'] = FONT_PATH
+
+from concept_map_generator import generate_concept_map
+from synoptic_chart_generator import generate_synoptic_chart
+from radial_diagram_generator import generate_radial_diagram
+from process_flow_generator import generate_process_flow_diagram
+from wbs_diagram_generator import generate_wbs_diagram
+
+from sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON, PROCESS_FLOW_JSON, WBS_DIAGRAM_JSON
+
+# LLM API 함수
+def call_llm_api(prompt, diagram_type):
+    """Friendli AI API를 호출하여 JSON 생성"""
+    token = os.environ.get("FRIENDLI_TOKEN") or "YOUR_FRIENDLI_TOKEN"
+    url = "https://api.friendli.ai/dedicated/v1/chat/completions"
+    headers = {
+        "Authorization": "Bearer " + token,
+        "Content-Type": "application/json"
+    }
+    
+    # 다이어그램 타입별 JSON 구조 가이드 - 실제 생성기가 요구하는 정확한 형식
+    json_guides = {
+        "Concept Map": """Generate a JSON for a concept map with the EXACT following structure:
+{
+  "central_node": "Main Topic",
+  "nodes": [
+    {
+      "id": "node1",
+      "label": "First Concept",
+      "relationship": "is part of",
+      "subnodes": [
+        {
+          "id": "node1_1",
+          "label": "Sub Concept 1",
+          "relationship": "includes",
+          "subnodes": []
+        }
+      ]
+    },
+    {
+      "id": "node2",
+      "label": "Second Concept",
+      "relationship": "relates to",
+      "subnodes": []
+    }
+  ]
+}""",
+        "Synoptic Chart": """Generate a JSON for a synoptic chart with the EXACT following structure:
+{
+  "central_node": "Chart Title",
+  "nodes": [
+    {
+      "id": "phase1",
+      "label": "Phase 1 Name",
+      "relationship": "starts with",
+      "subnodes": [
+        {
+          "id": "sub1_1",
+          "label": "Sub Item 1",
+          "relationship": "includes",
+          "subnodes": []
+        }
+      ]
+    }
+  ]
+}""",
+        "Radial Diagram": """Generate a JSON for a radial diagram with the EXACT following structure:
+{
+  "central_node": "Central Concept",
+  "nodes": [
+    {
+      "id": "branch1",
+      "label": "Branch 1",
+      "relationship": "connected to",
+      "subnodes": [
+        {
+          "id": "item1",
+          "label": "Item 1",
+          "relationship": "example",
+          "subnodes": []
+        }
+      ]
+    }
+  ]
+}""",
+        "Process Flow": """Generate a JSON for a process flow diagram with the EXACT following structure:
+{
+  "start_node": "Start Process",
+  "nodes": [
+    {"id": "step1", "label": "First Step", "type": "process"},
+    {"id": "step2", "label": "Decision Point", "type": "decision"},
+    {"id": "step3", "label": "Another Step", "type": "process"},
+    {"id": "end", "label": "End Process", "type": "end"}
+  ],
+  "connections": [
+    {"from": "start_node", "to": "step1", "label": "Begin"},
+    {"from": "step1", "to": "step2", "label": "Next"},
+    {"from": "step2", "to": "step3", "label": "Yes"},
+    {"from": "step3", "to": "end", "label": "Complete"}
+  ]
+}""",
+        "WBS Diagram": """Generate a JSON for a WBS diagram with the EXACT following structure:
+{
+  "project_title": "Project Name",
+  "phases": [
+    {
+      "id": "phase1",
+      "label": "Phase 1",
+      "tasks": [
+        {
+          "id": "task1_1",
+          "label": "Task 1.1",
+          "subtasks": [
+            {
+              "id": "subtask1_1_1",
+              "label": "Subtask 1.1.1",
+              "sub_subtasks": []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}"""
+    }
+    
+    system_prompt = f"""You are a helpful assistant that generates JSON structures for diagrams.
+{json_guides.get(diagram_type, '')}
+
+Important rules:
+1. Generate ONLY valid JSON without any explanation or markdown formatting
+2. The JSON must follow the EXACT structure shown above - do not change field names
+3. Make the content relevant to the user's prompt
+4. Use the user's language (Korean or English) for the content values
+5. For IDs, use simple alphanumeric strings without spaces (e.g., "node1", "task1_1")
+6. Ensure all connections reference existing node IDs
+7. For Process Flow: 'type' can be: "process", "decision", "start", "end", "io"
+8. For nested structures (Concept Map, Synoptic Chart, Radial, WBS), include empty 'subnodes' or 'subtasks' arrays when there are no children
+9. Do not add any additional fields not shown in the example structure"""
+
+    payload = {
+        "model": "dep89a2fld32mcm",
+        "messages": [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": f"Create a {diagram_type} JSON for: {prompt}"}
+        ],
+        "max_tokens": 16384,
+        "top_p": 0.8,
+        "stream": False  # 간단하게 처리하기 위해 stream을 False로 설정
+    }
+    
+    try:
+        response = requests.post(url, json=payload, headers=headers, timeout=30)
+        
+        # API 응답 상태 확인
+        if response.status_code != 200:
+            return json.dumps({"error": f"API returned status code {response.status_code}: {response.text}"})
+        
+        response_data = response.json()
+        
+        if 'choices' in response_data and len(response_data['choices']) > 0:
+            content = response_data['choices'][0]['message']['content']
+            # JSON 부분만 추출 (마크다운 코드 블록 제거)
+            content = content.strip()
+            if content.startswith("```json"):
+                content = content[7:]
+            if content.startswith("```"):
+                content = content[3:]
+            if content.endswith("```"):
+                content = content[:-3]
+            
+            # 추가적인 텍스트 제거 (JSON 외의 설명이 있을 경우)
+            content = content.strip()
+            # JSON 시작 위치 찾기
+            json_start = content.find('{')
+            if json_start != -1:
+                content = content[json_start:]
+                # JSON 끝 위치 찾기
+                bracket_count = 0
+                json_end = -1
+                for i, char in enumerate(content):
+                    if char == '{':
+                        bracket_count += 1
+                    elif char == '}':
+                        bracket_count -= 1
+                        if bracket_count == 0:
+                            json_end = i
+                            break
+                if json_end != -1:
+                    content = content[:json_end + 1]
+            
+            return content.strip()
+        else:
+            return json.dumps({"error": "No response from LLM"})
+    except requests.exceptions.Timeout:
+        return json.dumps({"error": "Request timed out"})
+    except requests.exceptions.RequestException as e:
+        print(f"LLM API Request Error: {str(e)}")
+        return json.dumps({"error": f"Request failed: {str(e)}"})
+    except Exception as e:
+        print(f"LLM API Error: {str(e)}")
+        return json.dumps({"error": str(e)})
+
+def generate_with_llm(prompt, diagram_type, output_format):
+    """LLM으로 JSON을 생성하고 다이어그램을 생성"""
+    if not prompt:
+        return None, "Please enter a prompt"
+    
+    # LLM으로 JSON 생성
+    generated_json = call_llm_api(prompt, diagram_type)
+    
+    try:
+        # JSON 유효성 검사
+        json_data = json.loads(generated_json)
+        json_str = json.dumps(json_data, indent=2, ensure_ascii=False)
+        
+        # JSON 구조 검증
+        if diagram_type in ["Concept Map", "Synoptic Chart", "Radial Diagram"]:
+            if "central_node" not in json_data or "nodes" not in json_data:
+                return None, f"Invalid JSON structure for {diagram_type}. Missing 'central_node' or 'nodes'. Generated JSON:\n{json_str}"
+        elif diagram_type == "Process Flow":
+            if "start_node" not in json_data or "nodes" not in json_data or "connections" not in json_data:
+                return None, f"Invalid JSON structure for Process Flow. Missing 'start_node', 'nodes', or 'connections'. Generated JSON:\n{json_str}"
+        elif diagram_type == "WBS Diagram":
+            if "project_title" not in json_data or "phases" not in json_data:
+                return None, f"Invalid JSON structure for WBS. Missing 'project_title' or 'phases'. Generated JSON:\n{json_str}"
+        
+        # 다이어그램 생성
+        try:
+            if diagram_type == "Concept Map":
+                diagram = generate_concept_map(json_str, output_format)
+            elif diagram_type == "Synoptic Chart":
+                diagram = generate_synoptic_chart(json_str, output_format)
+            elif diagram_type == "Radial Diagram":
+                diagram = generate_radial_diagram(json_str, output_format)
+            elif diagram_type == "Process Flow":
+                diagram = generate_process_flow_diagram(json_str, output_format)
+            elif diagram_type == "WBS Diagram":
+                diagram = generate_wbs_diagram(json_str, output_format)
+            else:
+                return None, "Invalid diagram type"
+            
+            # 에러 메시지가 반환된 경우
+            if isinstance(diagram, str) and diagram.startswith("Error:"):
+                return None, f"Diagram generation error: {diagram}\n\nGenerated JSON:\n{json_str}"
+            
+            return diagram, json_str
+            
+        except Exception as e:
+            return None, f"Error generating diagram: {str(e)}\n\nGenerated JSON:\n{json_str}"
+        
+    except json.JSONDecodeError as e:
+        return None, f"Invalid JSON generated: {str(e)}\n\nGenerated content:\n{generated_json}"
+    except Exception as e:
+        return None, f"Unexpected error: {str(e)}\n\nGenerated content:\n{generated_json}"
+
+if __name__ == "__main__":
+    DEFAULT_BASE_COLOR = '#19191a' 
+
+    with gr.Blocks(
+        title="Advanced Graph Generator",
+        theme=gr.themes.Soft(
+            primary_hue="violet",
+            secondary_hue="purple",
+        ),
+        css="""
+        /* 그라디언트 배경 */
+        .gradio-container {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        
+        /* 메인 컨테이너 스타일 */
+        .main-container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 30px;
+            margin: 20px auto;
+            max-width: 1400px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* 헤더 스타일 */
+        .header-section {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px;
+            border-radius: 15px;
+            margin-bottom: 30px;
+            text-align: center;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+        }
+        
+        .header-section h1 {
+            font-size: 2.5em;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+        
+        .header-section p {
+            font-size: 1.2em;
+            opacity: 0.9;
+        }
+        
+        /* 탭 스타일 */
+        .gr-tab-item {
+            padding: 15px 30px;
+            font-size: 1.1em;
+            font-weight: 600;
+            background: white;
+            border-radius: 10px 10px 0 0;
+            transition: all 0.3s ease;
+            margin-right: 5px;
+        }
+        
+        .gr-tab-item:hover {
+            background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
+        }
+        
+        .gr-tab-item.selected {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white !important;
+        }
+        
+        /* 버튼 스타일 */
+        .gr-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 30px;
+            font-size: 1.1em;
+            font-weight: 600;
+            border-radius: 10px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        }
+        
+        .gr-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+        }
+        
+        .gr-button.primary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        
+        /* 입력 필드 스타일 */
+        .gr-textbox, .gr-dropdown {
+            border: 2px solid #e9ecef;
+            border-radius: 10px;
+            padding: 12px;
+            font-size: 1em;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        
+        .gr-textbox:focus, .gr-dropdown:focus {
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        
+        /* 패널 스타일 */
+        .panel-section {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+        }
+        
+        /* 이미지 컨테이너 스타일 */
+        .gr-image {
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* 예제 이미지 스타일 */
+        .example-images {
+            gap: 20px;
+        }
+        
+        .example-images .gr-image {
+            transition: transform 0.3s ease;
+        }
+        
+        .example-images .gr-image:hover {
+            transform: scale(1.02);
+        }
+        
+        /* 라디오 버튼 스타일 */
+        .gr-radio {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px solid #e9ecef;
+        }
+        
+        /* LLM 탭 특별 스타일 */
+        .llm-tab {
+            background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
+            padding: 30px;
+            border-radius: 15px;
+        }
+        
+        .llm-input-section {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            margin-bottom: 20px;
+        }
+        
+        /* 반응형 디자인 */
+        @media (max-width: 768px) {
+            .main-container {
+                padding: 15px;
+                margin: 10px;
+            }
+            
+            .header-section h1 {
+                font-size: 2em;
+            }
+            
+            .gr-tab-item {
+                padding: 10px 15px;
+                font-size: 1em;
+            }
+        }
+        """
+    ) as demo:
+        with gr.Column(elem_classes=["main-container"]):
+            with gr.Column(elem_classes=["header-section"]):
+                gr.Markdown(
+                    """
+                    # 🎨 ChartGPT : AI-Powered Multi Diagram Generator
+                    ### based LLM 'Gemma-3-R1984-27B' Model. Powered by VIDraft⚡
+                    """
+                )
+
+            with gr.Row(variant="panel", elem_classes=["panel-section"]):
+                output_format_radio = gr.Radio(
+                    choices=["png", "svg"],
+                    value="png",
+                    label="📁 Output Format",
+                    interactive=True
+                )
+
+            with gr.Tabs():
+                # AI 어시스턴트 탭 (첫 번째)
+                with gr.TabItem("🤖 AI Assistant", elem_classes=["llm-tab"]):
+                    gr.Markdown(
+                        """
+                        ### 💡 Describe your diagram in Korean or English, and AI will create it for you!
+                        """
+                    )
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1, elem_classes=["llm-input-section"]):
+                            prompt_input = gr.Textbox(
+                                placeholder="예: '머신러닝 프로세스를 보여주는 플로우차트를 만들어줘' or 'Create a concept map about climate change'",
+                                label="📝 Enter your prompt",
+                                lines=3
+                            )
+                            
+                            diagram_type_select = gr.Dropdown(
+                                choices=["Concept Map", "Synoptic Chart", "Radial Diagram", "Process Flow", "WBS Diagram"],
+                                value="Concept Map",
+                                label="📊 Select Diagram Type",
+                                interactive=True
+                            )
+                            
+                            generate_btn = gr.Button("✨ Generate with AI", variant="primary", size="lg")
+                            
+                            generated_json_output = gr.Textbox(
+                                label="📄 Generated JSON",
+                                lines=15,
+                                interactive=True,
+                                visible=True
+                            )
+                        
+                        with gr.Column(scale=2):
+                            ai_output_image = gr.Image(
+                                label="🎨 Generated Diagram",
+                                type="filepath",
+                                show_download_button=True,
+                                height=600
+                            )
+                    
+                    generate_btn.click(
+                        fn=generate_with_llm,
+                        inputs=[prompt_input, diagram_type_select, output_format_radio],
+                        outputs=[ai_output_image, generated_json_output]
+                    )
+                    
+                    with gr.Row(elem_classes=["panel-section"]):
+                        gr.Examples(
+                            examples=[
+                                ["Design a process flow diagram that maps every phase of the software development life cycle SDLC from requirements to maintenance and shows handoffs and feedback loops to reduce risk and speed delivery", "Process Flow"],
+                                ["Develop a concept map that classifies key types of artificial intelligence symbolic, statistical, neural, hybrid and links each to real world application areas such as healthcare diagnostics, autonomous vehicles, predictive maintenance and generative media to highlight unique capabilities", "Concept Map"],
+                                ["Build a work breakdown structure WBS diagram for an online shopping mall project that decomposes scope into clear deliverables and work packages including UX research, responsive front end, secure payment integration, logistics APIs and post launch analytics to align resources and schedules", "WBS Diagram"],
+                                ["Create a radial diagram with Renewable Energy at the center and spokes for solar, wind, hydro, geothermal and biomass each annotated with core technologies capacity trends and sustainability impact to underline the diversified portfolio needed for a net zero future", "Radial Diagram"],
+                                ["Present a synoptic chart of the machine learning pipeline showing data ingestion, cleansing, feature engineering, model training, validation and deployment with parallel swimlanes for tools compute resources and compliance checkpoints to optimize accuracy and governance", "Synoptic Chart"],
+                                ["DevSecOps 게이트, 실시간 KPI 대시보드, 자동 롤백 경로, AI 기반 의사 결정 노드를 교차 배치하여 지속적 딜리버리 우수성을 보여주는 엔터프라이즈급 SDLC 프로세스 플로우 시각화를 설계하라", "Process Flow"],
+                                ["뉴로심볼릭 추론, 파운데이션 모델, 엣지 AI, 자기 지도 학습과 같은 최첨단 패러다임을 한데 엮고 이를 바이오테크, 스마트 시티, 기후 모델링, 몰입형 XR 등 파괴적 활용 사례와 동적으로 연결하여 최전선 혁신을 조명하는 방대한 AI 분류 체계 컨셉맵을 구축하라", "Concept Map"],
+                                ["마이크로서비스, CI/CD 파이프라인, 헤드리스 CMS 통합, 초개인화 추천 엔진 튜닝, 멀티 클라우드 회복탄력성까지 세분화하여 작업량 추정과 크리티컬 패스 상호 연계를 주석으로 담은 차세대 옴니채널 e-커머스 생태계를 위한 초정밀 WBS를 설계하라", "WBS Diagram"],
+                                ["재생에너지를 중심으로 다층 방사형 다이어그램을 그리되, 발전·저장·송배전·정책 수단을 동심원으로 배치하고, 태양광 PV, CSP, 해상 및 육상풍력, 조력, 그린 수소, 차세대 배터리 화학, 스마트 그리드 AI를 스포크로 연결하며, LCOE 추세와 탄소 상쇄 시나리오를 주석으로 표기하라", "Radial Diagram"],
+                                ["데이터 출처, 자동화된 피처 스토어, 연합 학습 오케스트레이션, 모델 성능 드리프트 감지, 섀도 배포 캐너리, 윤리 준수 감사의 시간 축 레인을 병치하고, 게이트 기준과 롤백 트리거까지 갖춘 프로덕션급 머신러닝 파이프라인을 영화적 시야로 묘사한 시놉틱 차트를 제작하라", "Synoptic Chart"]
+                            ],
+                            inputs=[prompt_input, diagram_type_select],
+                            label="💭 Example Prompts"
+                        )
+
+                # 기존 탭들
+                with gr.TabItem("🗺️ Concept Map"):
+                    with gr.Row():
+                        with gr.Column(scale=1, elem_classes=["panel-section"]):
+                            json_input_cm = gr.Textbox(
+                                value=CONCEPT_MAP_JSON,
+                                placeholder="Paste JSON following the documented format",
+                                label="JSON Input",
+                                lines=20
+                            )
+                            submit_btn_cm = gr.Button("Generate Concept Map", variant="primary")
+                        
+                        with gr.Column(scale=2):
+                            output_cm = gr.Image(
+                                label="Generated Diagram",
+                                type="filepath",
+                                show_download_button=True,
+                                height=500
+                            )
+                    
+                    submit_btn_cm.click(
+                        fn=generate_concept_map, 
+                        inputs=[json_input_cm, output_format_radio], 
+                        outputs=output_cm
+                    )
+                    
+                    gr.Markdown("## 📸 Examples")
+                    with gr.Row(elem_classes=["example-images"]):
+                        gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False)
+                        gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False)
+
+                with gr.TabItem("📊 Synoptic Chart"):
+                    with gr.Row():
+                        with gr.Column(scale=1, elem_classes=["panel-section"]):
+                            json_input_sc = gr.Textbox(
+                                value=SYNOPTIC_CHART_JSON,
+                                placeholder="Paste JSON following the documented format",
+                                label="JSON Input",
+                                lines=20
+                            )
+                            submit_btn_sc = gr.Button("Generate Synoptic Chart", variant="primary")
+                        
+                        with gr.Column(scale=2):
+                            output_sc = gr.Image(
+                                label="Generated Diagram",
+                                type="filepath",
+                                show_download_button=True,
+                                height=500
+                            )
+                    
+                    submit_btn_sc.click(
+                        fn=generate_synoptic_chart, 
+                        inputs=[json_input_sc, output_format_radio], 
+                        outputs=output_sc
+                    )
+                    
+                    gr.Markdown("## 📸 Examples")
+                    with gr.Row(elem_classes=["example-images"]):
+                        gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False)
+                        gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False)
+
+                with gr.TabItem("☀️ Radial Diagram"):
+                    with gr.Row():
+                        with gr.Column(scale=1, elem_classes=["panel-section"]):
+                            json_input_rd = gr.Textbox(
+                                value=RADIAL_DIAGRAM_JSON,
+                                placeholder="Paste JSON following the documented format",
+                                label="JSON Input",
+                                lines=20
+                            )
+                            submit_btn_rd = gr.Button("Generate Radial Diagram", variant="primary")
+                        
+                        with gr.Column(scale=2):
+                            output_rd = gr.Image(
+                                label="Generated Diagram",
+                                type="filepath",
+                                show_download_button=True,
+                                height=500
+                            )
+                    
+                    submit_btn_rd.click(
+                        fn=generate_radial_diagram, 
+                        inputs=[json_input_rd, output_format_radio], 
+                        outputs=output_rd
+                    )
+                    
+                    gr.Markdown("## 📸 Examples")
+                    with gr.Row(elem_classes=["example-images"]):
+                        gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False)
+                        gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False)
+                        gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False)
+                        gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False)
+
+                with gr.TabItem("🔄 Process Flow"):
+                    with gr.Row():
+                        with gr.Column(scale=1, elem_classes=["panel-section"]):
+                            json_input_pf = gr.Textbox(
+                                value=PROCESS_FLOW_JSON,
+                                placeholder="Paste JSON following the documented format",
+                                label="JSON Input",
+                                lines=20
+                            )
+                            submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
+                        
+                        with gr.Column(scale=2):
+                            output_pf = gr.Image(
+                                label="Generated Diagram",
+                                type="filepath",
+                                show_download_button=True,
+                                height=500
+                            )
+                    
+                    submit_btn_pf.click(
+                        fn=generate_process_flow_diagram, 
+                        inputs=[json_input_pf, output_format_radio], 
+                        outputs=output_pf
+                    )
+                    
+                    gr.Markdown("## 📸 Examples")
+                    with gr.Row(elem_classes=["example-images"]):
+                        gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False)
+                        gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False)
+
+                with gr.TabItem("📋 WBS Diagram"):
+                    with gr.Row():
+                        with gr.Column(scale=1, elem_classes=["panel-section"]):
+                            json_input_wbs = gr.Textbox(
+                                value=WBS_DIAGRAM_JSON,
+                                placeholder="Paste JSON following the documented format",
+                                label="JSON Input",
+                                lines=20
+                            )
+                            submit_btn_wbs = gr.Button("Generate WBS Diagram", variant="primary")
+                        
+                        with gr.Column(scale=2):
+                            output_wbs = gr.Image(
+                                label="Generated Diagram",
+                                type="filepath",
+                                show_download_button=True,
+                                height=500
+                            )
+                    
+                    submit_btn_wbs.click(
+                        fn=generate_wbs_diagram, 
+                        inputs=[json_input_wbs, output_format_radio], 
+                        outputs=output_wbs
+                    )
+                    
+                    gr.Markdown("## 📸 Examples")
+                    with gr.Row(elem_classes=["example-images"]):
+                        gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False)
+                        gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False)
+    
+    demo.launch(
+        mcp_server=True,
+        share=False,
+        server_port=7860,
+        server_name="0.0.0.0"
+    )