Update app.py

app.py

@@ -1,177 +1,290 @@
 import gradio as gr
+import numpy as np
+import random
 import torch
-
-# Transformers의 파이프라인을 이용해 번역용 파이프라인 로드
-from transformers import pipeline as translation_pipeline
-translator = translation_pipeline("translation", model="Helsinki-NLP/opus-mt-ko-en", device="cpu")
-
-# Diffusers 모델 로드
 from diffusers import DiffusionPipeline
+import spaces
 
-model_id = "black-forest-labs/FLUX.1-schnell"
+# 기본 설정
+dtype = torch.bfloat16
+device = "cuda" if torch.cuda.is_available() else "cpu"
 
+# 모델 로드
 pipe = DiffusionPipeline.from_pretrained(
-    model_id,
-    torch_dtype=torch.float32
-).to("cpu")  # CPU 사용
+    "black-forest-labs/FLUX.1-schnell",
+    torch_dtype=dtype
+).to(device)
 
-def translate_prompt_if_korean(prompt_text: str) -> str:
-    if any("가" <= ch <= "힣" for ch in prompt_text):
-        result = translator(prompt_text)
-        return result[0]['translation_text']
-    return prompt_text
+MAX_SEED = np.iinfo(np.int32).max
+MAX_IMAGE_SIZE = 2048
 
-def generate_storyboard(
-    prompt,
-    width=768,
-    height=512,
-    num_inference_steps=10,
-    guidance_scale=7.5,
-    seed=42
-):
-    # 번역 처리 (한글 -> 영어)
-    prompt_en = translate_prompt_if_korean(prompt)
+# 플로우차트 예시
+EXAMPLES = [
+    {
+        "title": "Business Workflow",
+        "prompt": """A hand-drawn style flowchart, vibrant colors, minimalistic icons.
+        BUSINESS WORKFLOW
+        ├── START [Green Button ~40px]
+        │   ├── COLLECT REQUIREMENTS [Folder Icon]
+        │   └── ANALYZE DATA [Chart Icon]
+        ├── IMPLEMENTATION [Coding Symbol ~50px]
+        │   ├── FRONTEND [Browser Icon]
+        │   └── BACKEND [Server Icon]
+        ├── TEST & INTEGRATION [Gear Icon ~45px]
+        └── DEPLOY
+            └── END [Checkered Flag ~40px]""",
+        "width": 1024,
+        "height": 1024
+    },
+    {
+        "title": "Software Release Flow",
+        "prompt": """A hand-drawn style flowchart, pastel colors, arrows between stages.
+        SOFTWARE RELEASE
+        ├── FEATURE BRANCH [Git Branch Icon ~45px]
+        │   ├── DEVELOPMENT [Code Editor]
+        │   └── UNIT TEST [Check Mark]
+        ├── MERGE TO MAIN [Pull Request Icon]
+        │   ├── CI/CD [Pipeline Icon ~40px]
+        │   └── BUILD [Gear Icon]
+        └── PRODUCTION
+            └── DEPLOY [Cloud Upload Icon]""",
+        "width": 1024,
+        "height": 1024
+    },
+    {
+        "title": "E-Commerce Checkout",
+        "prompt": """A hand-drawn style flowchart, light watercolor, user journey from cart to payment.
+        E-COMMERCE CHECKOUT
+        ├── CART [Shopping Cart ~40px]
+        │   ├── LOGIN [User Icon]
+        │   └── ADDRESS [Location Pin]
+        ├── PAYMENT [Credit Card Icon ~45px]
+        │   ├── VALIDATION [Lock Icon]
+        │   └── CONFIRMATION [Receipt Icon]
+        └── ORDER COMPLETE
+            └── THANK YOU [Smiley Icon]""",
+        "width": 1024,
+        "height": 1024
+    },
+    {
+        "title": "Data Pipeline",
+        "prompt": """A hand-drawn style flowchart, tech-focused, neon highlights, showing data flow.
+        DATA PIPELINE
+        ├── INGESTION [Database Icon ~50px]
+        │   ├── STREAMING [Kafka Symbol]
+        │   └── BATCH [CSV/JSON Files]
+        ├── TRANSFORMATION [Gear Icon ~45px]
+        │   ├── CLEANING [Brush Icon]
+        │   └── AGGREGATION [Bar Graph]
+        ├── STORAGE [Cloud Icon ~50px]
+        └── ANALYTICS
+            └── DASHBOARDS [Monitor Icon]""",
+        "width": 1024,
+        "height": 1024
+    },
+    {
+        "title": "Machine Learning Lifecycle",
+        "prompt": """A hand-drawn style flowchart, pastel palette, ML steps from data to deployment.
+        ML LIFECYCLE
+        ├── DATA COLLECTION [Folder Icon ~45px]
+        │   ├── DATA CLEANING [Soap Icon]
+        │   └── FEATURE ENGINEERING [Puzzle Icon]
+        ├── MODEL TRAINING [Robot Icon ~50px]
+        │   ├── HYPERPARAM TUNING [Dial Knob]
+        │   └── EVALUATION [Magnifier Icon]
+        ├── DEPLOYMENT [Cloud Icon ~45px]
+        └── MONITORING
+            └── FEEDBACK LOOP [Arrow Circle Icon]""",
+        "width": 1024,
+        "height": 1024
+    }
+]
 
-    # 시드 생성
-    generator = torch.Generator(device="cpu").manual_seed(seed)
+# Convert examples to Gradio format (if needed)
+GRADIO_EXAMPLES = [
+    [example["prompt"], example["width"], example["height"]]
+    for example in EXAMPLES
+]
 
-    # 이미지 생성
-    with torch.autocast("cpu"):
-        result = pipe(
-            prompt=prompt_en,
-            width=width,
-            height=height,
-            num_inference_steps=num_inference_steps,
-            guidance_scale=guidance_scale,
-            generator=generator
-        ).images[0]
-    return result
+@spaces.GPU()
+def infer(prompt, seed=42, randomize_seed=False, width=1024, height=1024, num_inference_steps=4, progress=gr.Progress(track_tqdm=True)):
+    if randomize_seed:
+        seed = random.randint(0, MAX_SEED)
+    generator = torch.Generator().manual_seed(seed)
+    image = pipe(
+        prompt=prompt,
+        width=width,
+        height=height,
+        num_inference_steps=num_inference_steps,
+        generator=generator,
+        guidance_scale=0.0  # 플로우차트 텍스트에 집중하되, 자유로운 표현
+    ).images[0]
+    return image, seed
 
-# --- 비주얼 & 세련된 UI를 위한 CSS ---
-custom_css = """
-#title {
+# CSS 스타일 (기존 구조 유지, 명칭만 일부 수정)
+css = """
+.container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+.input-column {
+    flex: 1;
+    padding: 20px;
+    border-right: 2px solid #eee;
+    max-width: 800px;
+}
+.examples-column {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background: #f7f7f7;
+}
+.title {
     text-align: center;
-    font-size: 3em;
+    color: #2a2a2a;
+    padding: 20px;
+    font-size: 2.5em;
     font-weight: bold;
-    margin: 20px 0;
-    color: #333;
+    background: linear-gradient(90deg, #f0f0f0 0%, #ffffff 100%);
+    border-bottom: 3px solid #ddd;
+    margin-bottom: 30px;
 }
-#subtitle {
+.subtitle {
     text-align: center;
     color: #666;
     margin-bottom: 30px;
-    font-size: 1.2em;
-}
-.gradio-container {
-    background: linear-gradient(120deg, #f8f8f8 0%, #ffffff 100%);
 }
-.input-panel, .output-panel {
+.input-box {
     background: white;
-    border-radius: 12px;
     padding: 20px;
+    border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+    width: 100%;
 }
-#prompt-input {
+.input-box textarea {
+    width: 100% !important;
+    min-width: 600px !important;
     font-size: 14px !important;
-    min-height: 140px !important;
+    line-height: 1.5 !important;
+    padding: 12px !important;
 }
-.advanced-settings {
-    font-size: 0.9em;
-    color: #444;
-}
-.example-box {
-    background: #f9f9f9;
-    padding: 10px;
-    margin-top: 10px;
+.example-card {
+    background: white;
+    padding: 15px;
+    margin: 10px 0;
     border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+.example-title {
+    font-weight: bold;
+    color: #2a2a2a;
+    margin-bottom: 10px;
+}
+.contain {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+}
+.input-area {
+    flex: 2 !important;
+}
+.examples-area {
+    flex: 1 !important;
 }
 """
 
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("<div id='title'>Gini Storyboard</div>")
-    gr.Markdown("<div id='subtitle'>Generate a hand-drawn style storyboard in black & white film noir or any style you wish!</div>")
+# Gradio 인터페이스
+with gr.Blocks(css=css) as demo:
+    gr.Markdown(
+        """
+        <div class="title">GINI Flowchart</div>
+        <div class="subtitle">Create professional process flowcharts using FLUX AI</div>
+        """)
 
-    with gr.Row():
-        with gr.Column(elem_classes="input-panel", scale=1):
-            prompt = gr.Textbox(
-                label="Storyboard Prompt",
-                placeholder="Enter your scene descriptions here (in English or Korean)",
-                lines=8,
-                elem_id="prompt-input"
-            )
-            seed = gr.Slider(
-                label="Seed",
-                value=42,
-                minimum=0,
-                maximum=999999,
-                step=1
-            )
-            with gr.Row():
-                width = gr.Slider(
-                    label="Width",
-                    minimum=256,
-                    maximum=1280,
-                    value=768,
-                    step=64
+    with gr.Row(equal_height=True):
+        # 왼쪽 입력 컬럼
+        with gr.Column(elem_id="input-column", scale=2):
+            with gr.Group(elem_classes="input-box"):
+                prompt = gr.Text(
+                    label="Flowchart Prompt",
+                    placeholder="Enter your process flowchart structure...",
+                    lines=10,
+                    elem_classes="prompt-input"
                 )
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=1280,
-                    value=512,
-                    step=64
+                run_button = gr.Button("Generate Flowchart", variant="primary")
+                result = gr.Image(label="Generated Flowchart")
+            
+            with gr.Accordion("Advanced Settings", open=False):
+                seed = gr.Slider(
+                    label="Seed",
+                    minimum=0,
+                    maximum=MAX_SEED,
+                    step=1,
+                    value=0,
                 )
-            with gr.Accordion("Advanced Settings", open=False, elem_classes="advanced-settings"):
+                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+                
+                with gr.Row():
+                    width = gr.Slider(
+                        label="Width",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024,
+                    )
+                    height = gr.Slider(
+                        label="Height",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024,
+                    )
+                
                 num_inference_steps = gr.Slider(
                     label="Number of inference steps",
-                    value=10,
                     minimum=1,
                     maximum=50,
-                    step=1
-                )
-                guidance_scale = gr.Slider(
-                    label="Guidance Scale",
-                    value=7.5,
-                    minimum=0.0,
-                    maximum=20.0,
-                    step=0.5
+                    step=1,
+                    value=4,
                 )
-            
-            run_button = gr.Button("Generate Storyboard", variant="primary")
+        
+        # 오른쪽 예제 컬럼
+        with gr.Column(elem_id="examples-column", scale=1):
+            gr.Markdown("### Example Flowcharts")
+            for example in EXAMPLES:
+                with gr.Group(elem_classes="example-card"):
+                    gr.Markdown(f"#### {example['title']}")
+                    gr.Markdown(f"```\n{example['prompt']}\n```")
+                    
+                    def create_example_handler(ex):
+                        def handler():
+                            return {
+                                prompt: ex["prompt"],
+                                width: ex["width"],
+                                height: ex["height"]
+                            }
+                        return handler
+                    
+                    gr.Button("Use This Example", size="sm").click(
+                        fn=create_example_handler(example),
+                        outputs=[prompt, width, height]
+                    )
 
-        with gr.Column(elem_classes="output-panel", scale=1):
-            result = gr.Image(label="Storyboard Result")
-
-    # 예제 프롬프트
-    gr.Markdown("### Example Prompt")
-    # ↓ Box가 아닌 Group으로 변경
-    with gr.Group(elem_classes="example-box"):
-        example_text = (
-            "A hand-drawn storyboard style, film noir theme, black and white.\n"
-            "SCENE 1: A detective enters a dark alley [Frame 1]\n"
-            "SCENE 2: He notices a shadow [Frame 2]\n"
-            "SCENE 3: A sudden flash of light reveals a clue [Frame 3]"
-        )
-        gr.Markdown(f"```\n{example_text}\n```")
-        example_button = gr.Button("Use Example")
-
-    def load_example():
-        return example_text
-    example_button.click(fn=load_example, outputs=[prompt])
-
-    run_button.click(
-        fn=generate_storyboard,
-        inputs=[prompt, width, height, num_inference_steps, guidance_scale, seed],
-        outputs=[result]
-    )
-
-    # 엔터로 제출 시에도 실행
-    prompt.submit(
-        fn=generate_storyboard,
-        inputs=[prompt, width, height, num_inference_steps, guidance_scale, seed],
-        outputs=[result]
+    # 이벤트 바인딩 (버튼 클릭 & 텍스트박스 엔터)
+    gr.on(
+        triggers=[run_button.click, prompt.submit],
+        fn=infer,
+        inputs=[prompt, seed, randomize_seed, width, height, num_inference_steps],
+        outputs=[result, seed]
     )
 
 if __name__ == "__main__":
     demo.queue()
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=False)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True,
+        debug=True
+    )