Update app.py

app.py

@@ -310,7 +310,7 @@ with gr.Blocks(css=css) as demo:
     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"):
+            with gr.Group(elem_classes="input-box"):  # Box를 Group으로 변경
                 prompt = gr.Text(
                     label="Diagram Prompt",
                     placeholder="Enter your diagram structure...",
@@ -357,7 +357,75 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(elem_id="examples-column", scale=1):
             gr.Markdown("### Example Diagrams")
             for example in EXAMPLES:
-                with gr.Box(elem_classes="example-card"):
+                with gr.Group(elem_classes="example-card"):  # Box를 Group으로 변경
+                    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'])# Gradio 인터페이스 수정
+with gr.Blocks(css=css) as demo:
+    gr.Markdown(
+        """
+        <div class="title">FLUX Diagram Generator</div>
+        <div class="subtitle">Create beautiful hand-drawn style diagrams using FLUX AI</div>
+        """)
+
+    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.Group(elem_classes="input-box"):  # Box를 Group으로 변경
+                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.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)
+                
+                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,
+                )
+        
+        # 오른쪽 예제 컬럼
+        with gr.Column(elem_id="examples-column", scale=1):
+            gr.Markdown("### Example Diagrams")
+            for example in EXAMPLES:
+                with gr.Group(elem_classes="example-card"):  # Box를 Group으로 변경
                     gr.Markdown(f"#### {example['title']}")
                     gr.Markdown(f"```\n{example['prompt']}\n```")
                     if gr.Button("Use This Example", size="sm"):