Update app.py

app.py

@@ -233,77 +233,137 @@ def infer(prompt, seed=42, randomize_seed=False, width=1024, height=1024, num_in
     ).images[0]
     return image, seed
 
-# CSS 스타일
-css="""
-#col-container {
-    margin: 0 auto;
-    max-width: 520px;
+# CSS 스타일 수정
+css = """
+.container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+.input-column {
+    flex: 1;
+    padding: 20px;
+    border-right: 2px solid #eee;
+    max-width: 600px;
+}
+
+.examples-column {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background: #f7f7f7;
+}
+
+.title {
+    text-align: center;
+    color: #2a2a2a;
+    padding: 20px;
+    font-size: 2.5em;
+    font-weight: bold;
+    background: linear-gradient(90deg, #f0f0f0 0%, #ffffff 100%);
+    border-bottom: 3px solid #ddd;
+    margin-bottom: 30px;
+}
+
+.subtitle {
+    text-align: center;
+    color: #666;
+    margin-bottom: 30px;
+}
+
+.input-box {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+
+.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;
 }
 """
 
-# Gradio 인터페이스 생성
+# Gradio 인터페이스 수정
 with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_id="col-container"):
-        gr.Markdown("""# FLUX.1 [schnell]
-12B param rectified flow transformer distilled from [FLUX.1 [pro]](https://blackforestlabs.ai/) for 4 step generation
-[[blog](https://blackforestlabs.ai/announcing-black-forest-labs/)] [[model](https://huggingface.co/black-forest-labs/FLUX.1-schnell)]
+    gr.Markdown(
+        """
+        <div class="title">FLUX Diagram Generator</div>
+        <div class="subtitle">Create beautiful hand-drawn style diagrams using FLUX AI</div>
         """)
-        
-        with gr.Row():
-            prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
-                max_lines=1,
-                placeholder="Enter your prompt",
-                container=False,
-            )
-            run_button = gr.Button("Run", scale=0)
-        
-        result = gr.Image(label="Result", show_label=False)
-        
-        with gr.Accordion("Advanced Settings", open=False):
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
-            )
-            
-            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+
+    gr.HTML("""<a href="https://visitorbadge.io/status?path=https%3A%2F%2Faiqcamp-diagram.hf.space">
+               <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Faiqcamp-diagram.hf.space&countColor=%23263759" />
+               </a>""")
+    
+    with gr.Row(equal_height=True) as main_row:
+        # 왼쪽 입력 컬럼
+        with gr.Column(elem_id="input-column", scale=1):
+            with gr.Box(elem_classes="input-box"):
+                prompt = gr.Text(
+                    label="Diagram Prompt",
+                    placeholder="Enter your diagram structure...",
+                    lines=5
+                )
+                run_button = gr.Button("Generate Diagram", variant="primary")
+                result = gr.Image(label="Generated Diagram")
             
-            with gr.Row():
-                width = gr.Slider(
-                    label="Width",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
+            with gr.Accordion("Advanced Settings", open=False):
+                seed = gr.Slider(
+                    label="Seed",
+                    minimum=0,
+                    maximum=MAX_SEED,
+                    step=1,
+                    value=0,
                 )
+                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
                 
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
+                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",
+                    minimum=1,
+                    maximum=50,
+                    step=1,
+                    value=4,
                 )
-            
-            num_inference_steps = gr.Slider(
-                label="Number of inference steps",
-                minimum=1,
-                maximum=50,
-                step=1,
-                value=4,
-            )
         
-        gr.Examples(
-            examples=GRADIO_EXAMPLES,
-            fn=infer,
-            inputs=[prompt],
-            outputs=[result, seed],
-            cache_examples="lazy"
-        )
+        # 오른쪽 예제 컬럼
+        with gr.Column(elem_id="examples-column", scale=1):
+            gr.Markdown("### Example Diagrams")
+            for example in EXAMPLES:
+                with gr.Box(elem_classes="example-card"):
+                    gr.Markdown(f"#### {example['title']}")
+                    gr.Markdown(f"```\n{example['prompt']}\n```")
+                    if gr.Button("Use This Example", size="sm"):
+                        prompt.update(value=example['prompt'])
+                        width.update(value=example['width'])
+                        height.update(value=example['height'])
 
     gr.on(
         triggers=[run_button.click, prompt.submit],