Update app.py

app.py

@@ -133,6 +133,11 @@ def calc_tile_size(target_height, target_width, overlap_pixels, max_tile_width_s
 
     new_target_height = best_adjusted_target_height
     new_target_width = best_adjusted_target_width
+
+    # ★ 새로 계산된 target 높이와 너비가 8로 나누어 떨어지도록 조정 (오류 방지)
+    new_target_height = new_target_height - (new_target_height % 8)
+    new_target_width = new_target_width - (new_target_width % 8)
+
     tile_width = best_tile_width
     tile_height = best_tile_height
 
@@ -142,7 +147,7 @@ def calc_tile_size(target_height, target_width, overlap_pixels, max_tile_width_s
     print(f"Tile Width (max {max_tile_width_size}, divisible by 8): {tile_width}")
     print(f"Columns: {num_cols} | Rows: {num_rows}")
     print(f"Original Target: {target_height} x {target_width}")
-    print(f"Adjusted Target: {new_target_height} x {new_target_width}\n")
+    print(f"Adjusted Target (divisible by 8): {new_target_height} x {new_target_width}\n")
 
     return new_target_height, new_target_width, tile_height, tile_width
 
@@ -159,25 +164,29 @@ def randomize_seed_fn(generation_seed: int, randomize_seed: bool) -> int:
     return generation_seed
 #endregion
 
-# CSS 강화: 그라데이션 배경, 입체적 그림자, 부드러운 전환 효과 등으로 UI를 비주얼하게 개선
+# CSS 개선: 입체감 있는 배경, 반투명 컨테이너, 그림자, 애니메이션 효과 등 적용
 css = """
 body {
-    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    color: #333;
+    margin: 0;
+    padding: 0;
 }
 .gradio-container {
     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);
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px auto;
+    max-width: 1200px;
 }
 .gradio-container h1 {
-    color: #333333;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    color: #333;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }
-.fillable {
-    width: 95% !important;
+.fillable { 
+    width: 95% !important; 
     max-width: unset !important;
 }
 #examples_container {
@@ -187,40 +196,35 @@ body {
 #examples_row {
     justify-content: center;
 }
-
-/* 스타일리시한 버튼 */
-button {
-    background: linear-gradient(145deg, #6a82fb, #fc5c7d);
-    color: #ffffff;
-    font-weight: bold;
-    border: none;
+.sidebar {
+    background: rgba(255, 255, 255, 0.98);
     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);
+    padding: 20px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
-
-/* 입력 필드 및 텍스트박스 포커스 효과 */
-input[type="text"], textarea {
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    padding: 10px;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+button, .btn {
+    background: linear-gradient(90deg, #ff8a00, #e52e71);
+    border: none;
+    color: #fff;
+    padding: 12px 24px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
 }
-input[type="text"]:focus, textarea:focus {
-    border-color: #6a82fb;
-    box-shadow: 0 0 10px rgba(106, 130, 251, 0.5);
+button:hover, .btn:hover {
+    transform: scale(1.05);
 }
 """
 
 title = """
-<h1 align="center" style="margin-bottom: 0.2em;">Panorama X3 IMAGE 🤗</h1>
-
+<h1 align="center" style="margin-bottom: 0.2em;">Mixture-of-Diffusers for SDXL Tiling Pipeline 🤗</h1>
+<p align="center" style="font-size:1.1em; color:#555;">
+    좌/중앙/우 각 영역에 다른 프롬프트를 적용하여 타일링 이미지를 생성합니다.<br>
+    아래 예제를 클릭하면 입력창에 값이 채워집니다.
+</p>
 """
 
 with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
@@ -282,10 +286,10 @@ with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
             gr.Examples(
                 examples=[
                     [
-                        "Iron Man, repulsor rays blasting enemies in destroyed cityscape, sparks, energy trails, crumbling skyscrapers, smoke, debris, cinematic lighting, photorealistic, intense action. Focus: Iron Man.",
-                        "Captain America charging forward, vibranium shield deflecting energy blasts in destroyed cityscape, collapsing buildings, rubble streets, battle-damaged suit, determined expression, distant explosions, cinematic composition, realistic rendering. Focus: Captain America.",
-                        "Thor wielding Stormbreaker in destroyed cityscape, lightning crackling, powerful strike downwards, shattered buildings, burning debris, ground trembling, Asgardian armor, cinematic photography, realistic details. Focus: Thor.",
-                       "blurry, low resolution, artifacts, poor details",
+                        "Lush green forest with sun rays filtering through the canopy",
+                        "Crystal clear lake reflecting a vibrant sky",
+                        "Majestic mountains with snowy peaks in the distance",
+                        "blurry, low resolution, artifacts, poor details",
                         7, 7, 7,
                         128,
                         30,
@@ -296,10 +300,10 @@ with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
                         1280
                     ],
                     [
-                        "A charming house in the countryside, by jakub rozalski, sunset lighting, elegant, highly detailed, smooth, sharp focus, artstation, stunning masterpiece",
-                        "A dirt road in the countryside crossing pastures, by jakub rozalski, sunset lighting, elegant, highly detailed, smooth, sharp focus, artstation, stunning masterpiece",
-                        "An old and rusty giant robot lying on a dirt road, by jakub rozalski, dark sunset lighting, elegant, highly detailed, smooth, sharp focus, artstation, stunning masterpiece",
-                       "blurry, poorly rendered, low quality, disfigured",
+                        "Vibrant city street with neon signs and bustling crowds",
+                        "Sleek modern skyscrapers with digital billboards",
+                        "High-speed maglev train gliding over a futuristic urban landscape",
+                        "blurry, poorly rendered, low quality, disfigured",
                         8, 8, 8,
                         100,
                         35,
@@ -310,10 +314,10 @@ with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
                         1280
                     ],
                     [
-                        "Abstract decorative illustration, by joan miro and gustav klimt and marlina vera and loish, elegant, intricate, highly detailed, smooth, sharp focus, vibrant colors, artstation, stunning masterpiece",
-                        "Abstract decorative illustration, by joan miro and gustav klimt and marlina vera and loish, elegant, intricate, highly detailed, smooth, sharp focus, vibrant colors, artstation, stunning masterpiece",
-                        "Abstract decorative illustration, by joan miro and gustav klimt and marlina vera and loish, elegant, intricate, highly detailed, smooth, sharp focus, vibrant colors, artstation, stunning masterpiece",
-                       "text, watermark, signature, distorted",
+                        "Vibrant abstract strokes with fluid, swirling patterns in cool tones",
+                        "Interlocking geometric shapes bursting with color and texture",
+                        "Dynamic composition of splattered ink with smooth gradients",
+                        "text, watermark, signature, distorted",
                         6, 6, 6,
                         80,
                         25,
@@ -324,10 +328,10 @@ with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
                         1280
                     ],
                     [
-                        "Magical diagrams and runes written with chalk on a blackboard, elegant, intricate, highly detailed, smooth, sharp focus, artstation, stunning masterpiece",
-                        "Magical diagrams and runes written with chalk on a blackboard, elegant, intricate, highly detailed, smooth, sharp focus, artstation, stunning masterpiece",
-                        "Magical diagrams and runes written with chalk on a blackboard, elegant, intricate, highly detailed, smooth, sharp focus, artstation, stunning masterpiece",
-                         "low quality, artifact, deformed, sketchy",
+                        "Enchanted forest with glowing bioluminescent plants and mystical fog",
+                        "Ancient castle with towering spires bathed in moonlight",
+                        "Majestic dragon soaring above a starry night sky",
+                        "low quality, artifact, deformed, sketchy",
                         9, 9, 9,
                         150,
                         40,