Update app.py

app.py

@@ -59,7 +59,7 @@ MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
 # ----------------------------------------------
-# 수정된 부분: infer 함수 내에서 hidden_prompt를 앞에 추가
+# infer 함수 (기존 로직 그대로 유지)
 # ----------------------------------------------
 @spaces.GPU(duration=80)
 def infer(
@@ -134,7 +134,6 @@ examples = [
         "gh4.jpg",
         0.5
     ],
-
     [
         "sunglass",
         "gh1.jpg",
@@ -142,35 +141,98 @@ examples = [
     ],    
 ]
 
+# --------------------------
+# 개선된 UI를 위한 CSS
+# --------------------------
 css = """
+body {
+    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
 #col-container {
-    margin: 0 auto;
+    margin: 0 auto !important;
     max-width: 720px;
+    background: rgba(255,255,255,0.85);
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+}
+
+#header-title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+#prompt-row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+#prompt-text {
+    flex: 1;
 }
-#result img{
+
+#result img {
     object-position: top;
+    border-radius: 8px;
+}
+
+#result .image-container {
+    height: 100%;
 }
-#result .image-container{
-    height: 100%
+
+.gr-button {
+    background-color: #2E8BFB !important;
+    color: white !important;
+    border: none !important;
+    transition: background-color 0.2s ease;
+}
+
+.gr-button:hover {
+    background-color: #186EDB !important;
+}
+
+.gr-slider input[type=range] {
+    accent-color: #2E8BFB !important;
+}
+
+.gr-box {
+    background-color: #fafafa !important;
+    border: 1px solid #ddd !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+}
+
+#advanced-settings {
+    margin-top: 1rem;
+    border-radius: 8px;
 }
 """
 
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""
-        # Beyond Ghibli Reimagined
-        """)
+        gr.Markdown("<div id='header-title'>Beyond Ghibli Reimagined</div>")
         
-        with gr.Row():
+        # 상단: 프롬프트 입력 + 실행 버튼
+        with gr.Row(elem_id="prompt-row"):
             prompt = gr.Text(
                 label="Prompt",
                 show_label=False,
                 max_lines=1,
                 placeholder="Enter your prompt",
-                container=False,
+                elem_id="prompt-text",
             )
-            run_button = gr.Button("Run", scale=0)
+            run_button = gr.Button("Run", elem_id="run-button")
         
+        # 가운데: 이미지 입력과 슬라이더, 결과 이미지
         with gr.Row():
             with gr.Column():
                 ip_adapter_image = gr.Image(label="IP-Adapter Image", type="pil")
@@ -184,10 +246,11 @@ with gr.Blocks(css=css) as demo:
                 )
             result = gr.Image(label="Result", elem_id="result")
 
-        with gr.Accordion("Advanced Settings", open=False):
+        # 하단: 고급 설정(Accordion)
+        with gr.Accordion("Advanced Settings", open=False, elem_id="advanced-settings"):
             negative_prompt = gr.Text(
                 label="Negative prompt",
-                max_lines=1,
+                max_lines=2,
                 placeholder=(
                     "Copy(worst quality, low quality:1.4), bad anatomy, bad hands, text, error, "
                     "missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, "
@@ -234,7 +297,8 @@ with gr.Blocks(css=css) as demo:
                     step=1,
                     value=50,
                 )
-            
+        
+        # 예시들
         gr.Examples(
             examples=examples,
             fn=infer,
@@ -243,6 +307,7 @@ with gr.Blocks(css=css) as demo:
             cache_examples="lazy"
         )
 
+    # 버튼 클릭/프롬프트 엔터 시 실행
     gr.on(
         triggers=[run_button.click, prompt.submit],
         fn=infer,