Update app.py

app.py

@@ -19,7 +19,7 @@ SCHEDULERS = [
     "UniPCMultistepScheduler"
 ]
 
-# 로딩: VAE 및 타일링 파이프라인 모델 초기화
+# 모델 로딩: VAE 및 타일링 파이프라인 초기화
 vae = AutoencoderKL.from_pretrained(
     "madebyollin/sdxl-vae-fp16-fix", torch_dtype=torch.float16
 ).to("cuda")
@@ -59,7 +59,7 @@ def select_scheduler(scheduler_name):
 def predict(left_prompt, center_prompt, right_prompt, negative_prompt, left_gs, center_gs, right_gs,
             overlap_pixels, steps, generation_seed, scheduler, tile_height, tile_width, target_height, target_width):
     global pipe
-    # 스케줄러 선택
+    # 스케줄러 설정
     print(f"Using scheduler: {scheduler}...")
     pipe.scheduler = select_scheduler(scheduler)
     
@@ -71,7 +71,7 @@ def predict(left_prompt, center_prompt, right_prompt, negative_prompt, left_gs,
     tile_height = int(tile_height)
     tile_width = int(tile_width)
     
-    # 타일링된 이미지 생성 (좌/중앙/우 영역)
+    # 좌/중앙/우 영역 프롬프트를 이용한 타일링 이미지 생성
     image = pipe(
         prompt=[[left_prompt, center_prompt, right_prompt]],
         negative_prompt=negative_prompt,
@@ -160,18 +160,13 @@ def do_calc_tile(target_height, target_width, overlap_pixels, max_tile_size):
 def clear_result():
     return gr.update(value=None)
 
-def run_for_examples(left_prompt, center_prompt, right_prompt, negative_prompt, left_gs, center_gs, right_gs,
-                     overlap_pixels, steps, generation_seed, scheduler, tile_height, tile_width, target_height, target_width, max_tile_width):
-    return predict(left_prompt, center_prompt, right_prompt, negative_prompt, left_gs, center_gs, right_gs,
-                   overlap_pixels, steps, generation_seed, scheduler, tile_height, tile_width, target_height, target_width)
-
 def randomize_seed_fn(generation_seed: int, randomize_seed: bool) -> int:
     if randomize_seed:
         generation_seed = random.randint(0, MAX_SEED)
     return generation_seed
 #endregion
 
-# 개선된 CSS: 배경색, 여백, 그림자 등을 추가하여 UI를 깔끔하게 표현
+# 개선된 CSS: 배경색, 여백, 그림자 및 중앙 정렬 추가
 css = """
 body { background-color: #f0f2f5; }
 .gradio-container {
@@ -182,14 +177,21 @@ body { background-color: #f0f2f5; }
 }
 .gradio-container h1 { color: #333333; }
 .fillable { width: 95% !important; max-width: unset !important; }
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
 """
 
 # 제목 및 간단한 설명
 title = """
 <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>
-    아래의 예제나 직접 프롬프트를 입력하여 창의적인 이미지를 만들어보세요.
+    좌/중앙/우 각 영역에 다른 프롬프트를 적용하여 타일링 이미지를 생성합니다.<br>
+    아래 예제를 클릭하면 입력창에 값이 채워집니다.
 </p>
 """
 
@@ -245,79 +247,79 @@ with gr.Blocks(css=css, title="SDXL Tiling Pipeline") as app:
             with gr.Row():
                 scheduler = gr.Dropdown(label="Scheduler", choices=SCHEDULERS, value=SCHEDULERS[0])
 
-    # 예제 탭: 목적에 맞는 예시 프롬프트 제공
-    with gr.Row():
-        gr.Markdown("### Example Prompts")
-        gr.Examples(
-            examples=[
-                # Example 1: Serene Nature
-                [
-                    "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,
-                    123456789,
-                    "UniPCMultistepScheduler",
-                    1024, 1280,
-                    1024, 1920,
-                    1280
-                ],
-                # Example 2: Futuristic Cityscape
-                [
-                    "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,
-                    987654321,
-                    "EulerDiscreteScheduler",
-                    1024, 1280,
-                    1024, 1920,
-                    1280
-                ],
-                # Example 3: Abstract Art
-                [
-                    "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,
-                    192837465,
-                    "DPMSolverMultistepScheduler-Karras",
-                    1024, 1280,
-                    1024, 1920,
-                    1280
+    # 중앙에 배치된 예제 영역
+    with gr.Row(elem_id="examples_row"):
+        with gr.Column(scale=12, elem_id="examples_container"):
+            gr.Markdown("### Example Prompts")
+            gr.Examples(
+                examples=[
+                    # Example 1: Serene Nature
+                    [
+                        "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,
+                        123456789,
+                        "UniPCMultistepScheduler",
+                        1024, 1280,
+                        1024, 1920,
+                        1280
+                    ],
+                    # Example 2: Futuristic Cityscape
+                    [
+                        "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,
+                        987654321,
+                        "EulerDiscreteScheduler",
+                        1024, 1280,
+                        1024, 1920,
+                        1280
+                    ],
+                    # Example 3: Abstract Art
+                    [
+                        "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,
+                        192837465,
+                        "DPMSolverMultistepScheduler-Karras",
+                        1024, 1280,
+                        1024, 1920,
+                        1280
+                    ],
+                    # Example 4: Fantasy Landscape
+                    [
+                        "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,
+                        1029384756,
+                        "DPMSolverMultistepScheduler-Karras-SDE",
+                        1024, 1280,
+                        1024, 1920,
+                        1280
+                    ]
                 ],
-                # Example 4: Fantasy Landscape
-                [
-                    "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,
-                    1029384756,
-                    "DPMSolverMultistepScheduler-Karras-SDE",
-                    1024, 1280,
-                    1024, 1920,
-                    1280
-                ]
-            ],
-            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],
-            fn=run_for_examples,
-            outputs=result,
-            cache_examples=True
-        )
+                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],
+                cache_examples=True
+                # fn와 outputs 인수를 제거하여 예제 클릭시 입력창에 값이 채워지도록 함.
+            )
 
     # 이벤트 연결: 타일 사이즈 계산 및 이미지 생성
     event_calc_tile_size = {