Update app.py

app.py

@@ -159,17 +159,27 @@ def randomize_seed_fn(generation_seed: int, randomize_seed: bool) -> int:
     return generation_seed
 #endregion
 
-# CSS 개선: 배경, 여백, 그림자 및 예제 영역 중앙 배치
+# CSS 강화: 그라데이션 배경, 입체적 그림자, 부드러운 전환 효과 등으로 UI를 비주얼하게 개선
 css = """
-body { background-color: #f0f2f5; }
+body {
+    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
 .gradio-container {
-    background: #ffffff;
-    border-radius: 15px;
-    padding: 20px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+.gradio-container h1 {
+    color: #333333;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 95% !important;
+    max-width: unset !important;
 }
-.gradio-container h1 { color: #333333; }
-.fillable { width: 95% !important; max-width: unset !important; }
 #examples_container {
     margin: auto;
     width: 90%;
@@ -177,6 +187,35 @@ body { background-color: #f0f2f5; }
 #examples_row {
     justify-content: center;
 }
+
+/* 스타일리시한 버튼 */
+button {
+    background: linear-gradient(145deg, #6a82fb, #fc5c7d);
+    color: #ffffff;
+    font-weight: bold;
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* 입력 필드 및 텍스트박스 포커스 효과 */
+input[type="text"], textarea {
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    padding: 10px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+input[type="text"]:focus, textarea:focus {
+    border-color: #6a82fb;
+    box-shadow: 0 0 10px rgba(106, 130, 251, 0.5);
+}
 """
 
 title = """
@@ -302,7 +341,6 @@ with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
                         1280
                     ]
                 ],
-                # 예제 클릭 시 각 입력창에 값이 채워지도록 "inputs" 인수를 추가합니다.
                 inputs=[left_prompt, center_prompt, right_prompt, negative_prompt, 
                         left_gs, center_gs, right_gs, overlap, steps, generation_seed, 
                         scheduler, tile_height, tile_width, height, width, max_tile_size],