chore : update ui

app.py

@@ -69,86 +69,98 @@ examples = [
 css="""
 #col-container {
     margin: 0 auto;
-    max-width: 520px;
+    max-width: 580px;
+}
+
+.footer {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 0.8em;
+    color: #666;
 }
 """
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, theme="soft") as demo:
     
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""# [POSTECH] PONIX Generator 🌊
+        gr.Markdown(f"""# 🌊 [POSTECH] PONIX Generator
 [[based on FLUX.1-dev](https://huggingface.co/black-forest-labs/FLUX.1-dev/blob/main/LICENSE.md)] 
         """)
         
-        with gr.Row():
-            
+        with gr.Box():
+            gr.Markdown("""
+### 🔍 사용 가이드
+- 생성하고 싶은 이미지를 한글로 간단하게 작성해주세요.
+- 이미지는 노이즈에서 점차적으로 생성됩니다. (40~50초 소요)
+- 문의는 이메일로 부탁드립니다: [email protected]
+            """)
+        
+        with gr.Group():
             prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
+                label="프롬프트 입력",
                 max_lines=1,
-                placeholder="Enter your prompt",
-                container=False,
+                placeholder="원하는 포닉스 이미지를 한글로 설명해주세요",
+                container=True,
             )
             
-            run_button = gr.Button("Run", scale=0)
+            run_button = gr.Button("🚀 생성하기", variant="primary")
         
-        result = gr.Image(label="Result", show_label=False)
+        result = gr.Image(label="생성된 이미지")
         
-        with gr.Accordion("Advanced Settings", open=False):
-
-            use_prompt_refinement = gr.Checkbox(
-                label="Use prompt refinement", 
-                value=True,
-                info="AI가 입력한 프롬프트를 자동으로 개선합니다. "
-            )
-            
-            
-            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,
+        with gr.Accordion("🛠️ 고급 설정", open=False):
+            with gr.Group():
+                use_prompt_refinement = gr.Checkbox(
+                    label="프롬프트 자동 개선", 
+                    value=True,
+                    info="AI가 입력한 프롬프트를 자동으로 개선합니다."
                 )
                 
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
-                )
-            
-            with gr.Row():
-
-                guidance_scale = gr.Slider(
-                    label="Guidance Scale",
-                    minimum=1,
-                    maximum=15,
-                    step=0.1,
-                    value=3.5,
-                )
-  
-                num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=1,
-                    maximum=50,
-                    step=1,
-                    value=28,
-                )
+                with gr.Row():
+                    seed = gr.Slider(
+                        label="시드 값",
+                        minimum=0,
+                        maximum=MAX_SEED,
+                        step=1,
+                        value=0,
+                    )
+                    
+                    randomize_seed = gr.Checkbox(label="랜덤 시드 사용", value=True)
+                
+                with gr.Row():
+                    width = gr.Slider(
+                        label="너비",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024,
+                    )
+                    
+                    height = gr.Slider(
+                        label="높이",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024,
+                    )
+                
+                with gr.Row():
+                    guidance_scale = gr.Slider(
+                        label="가이던스 스케일",
+                        minimum=1,
+                        maximum=15,
+                        step=0.1,
+                        value=3.5,
+                    )
+      
+                    num_inference_steps = gr.Slider(
+                        label="추론 단계 수",
+                        minimum=1,
+                        maximum=50,
+                        step=1,
+                        value=28,
+                    )
         
+        gr.Markdown("### 예시 프롬프트")
         gr.Examples(
             examples = examples,
             fn = infer,
@@ -156,6 +168,12 @@ with gr.Blocks(css=css) as demo:
             outputs = [result, seed],
             cache_examples="lazy"
         )
+        
+        gr.HTML("""
+        <div class="footer">
+            PONIX Generator by 허채원 | POSTECH
+        </div>
+        """)
 
     gr.on(
         triggers=[run_button.click, prompt.submit],