Update app.py

app.py

@@ -21,142 +21,239 @@ model_path = hf_hub_download(
     filename="recocoamixXL3_coamixXL3.safetensors"
 )
 
-# パイプライン構築＆スケジューラ設定
+# 単一ファイルからパイプラインを構築
 pipe = StableDiffusionXLPipeline.from_single_file(
-    model_path, torch_dtype=torch_dtype, use_safetensors=True
+    model_path,
+    torch_dtype=torch_dtype,
+    use_safetensors=True
 ).to(device)
-euler_scheduler = EulerAncestralDiscreteScheduler.from_config(pipe.scheduler.config, use_karras_sigmas=True)
-dpm_scheduler = DPMSolverMultistepScheduler.from_config(pipe.scheduler.config)
+
+# スケジューラのプリセット
+euler_scheduler = EulerAncestralDiscreteScheduler.from_config(
+    pipe.scheduler.config,
+    use_karras_sigmas=True
+)
+dpm_scheduler = DPMSolverMultistepScheduler.from_config(
+    pipe.scheduler.config
+)
 pipe.scheduler = euler_scheduler
 
-# 生成履歴保持
+# 生成履歴を (PIL.Image, キャプションテキスト) タプルで保持
 history = []
 
 # HTMLテーブル生成ヘルパー
 def make_html_table(caption):
     rows = caption.split("\n")
-    html = '<table style="width:100%;border-collapse:collapse;background:#fffaf1;">'
+    html = '<table style="width:100%;border-collapse:collapse;">'
     for row in rows:
         if ": " in row:
-            k, v = row.split(": ", 1)
+            key, val = row.split(": ", 1)
             html += (
-                f'<tr><th style="text-align:left;border:1px solid #ddd;padding:8px;color:#8b5e3c;">{k}</th>'
-                f'<td style="border:1px solid #ddd;padding:8px;">{v}</td></tr>'
+                f'<tr><th style="text-align:left;border:1px solid #ddd;padding:4px;">{key}</th>'
+                f'<td style="border:1px solid #ddd;padding:4px;">{val}</td></tr>'
             )
     html += '</table>'
     return html
 
 # 推論関数
-def infer(prompt, neg, seed, rand, w, h, cfg, steps, sched, progress=gr.Progress(track_tqdm=True)):
+def infer(
+    prompt, neg, seed, rand, w, h, cfg, steps, scheduler_type,
+    progress=gr.Progress(track_tqdm=True)
+):
     if rand:
         seed = random.randint(0, MAX_SEED)
-    gen = torch.Generator(device=device).manual_seed(seed)
-    pipe.scheduler = euler_scheduler if sched == "Euler Ancestral" else dpm_scheduler
+    generator = torch.Generator(device=device).manual_seed(seed)
+
+    # スケジューラ切替
+    pipe.scheduler = (
+        euler_scheduler if scheduler_type == "Euler Ancestral" else dpm_scheduler
+    )
     pipe.scheduler.set_timesteps(steps)
 
-    def cb(p, i, t, kw):
-        progress(i/steps, desc=f"Step {i}/{steps}")
-        return kw
+    def _callback(pipeline, step_idx, timestep, callback_kwargs):
+        progress(step_idx / steps, desc=f"Step {step_idx}/{steps}")
+        return callback_kwargs
 
-    out = pipe(
+    output = pipe(
         prompt=prompt,
         negative_prompt=neg or None,
         guidance_scale=cfg,
         num_inference_steps=steps,
-        width=w, height=h,
-        generator=gen,
-        callback_on_step_end=cb
+        width=w,
+        height=h,
+        generator=generator,
+        callback_on_step_end=_callback
     )
-    img = out.images[0]
-    cap = (
+    img = output.images[0]
+
+    # キャプション構築
+    caption_text = (
         f"Prompt: {prompt}\n"
         f"Negative: {neg or 'None'}\n"
         f"Seed: {seed}\n"
         f"Size: {w}×{h}\n"
         f"CFG: {cfg}\n"
         f"Steps: {steps}\n"
-        f"Scheduler: {sched}"
+        f"Scheduler: {scheduler_type}"
     )
-    history.insert(0, (img, cap))
-    progress(1.0, desc="Done!")
-    gallery = [(im, make_html_table(caption)) for im, caption in history]
-    return img, gallery
 
-# カフェ風スタイル + カスタムローダー用CSS
-css = r"""
-body { background:#f4e1c1; font-family:'Georgia', serif; color:#4b2e2e; }
-#col-container { background:#fffaf1; padding:20px; border-radius:16px;
-  box-shadow:0 4px 12px rgba(0,0,0,0.1); margin:auto; max-width:780px; }
-#col-container a { color:#8b5e3c; text-decoration:none; border-bottom:1px dotted #8b5e3c; }
+    # 履歴に追加（最新を先頭）
+    history.insert(0, (img, caption_text))
+    progress(1.0, desc="Done!")
 
-/* デフォルトスピナーを完全非表示 */
-.loading-screen, .gradio-spinner, .gr-spinner, .loading { display: none!important; }
+    # Gallery には (PIL.Image, HTML caption) のリストを渡す
+    gallery_items = [
+        (item[0], make_html_table(item[1])) for item in history
+    ]
+    return img, gallery_items
 
+# CSS設定（温かい喫茶店風）
+css = """
+body {
+  background-color: #f4e1c1;
+  font-family: 'Georgia', serif;
+}
+#col-container {
+  background: #fffaf1;
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  margin: auto;
+  max-width: 780px;
+}
+/* リンクの装飾 */
+#col-container a {
+  color: #8b5e3c;
+  text-decoration: none;
+  border-bottom: 1px dotted #8b5e3c;
+}
+/* ボタン */
+.gr-button {
+  background-color: #d4a373 !important;
+  color: white !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: bold;
+  transition: background-color 0.3s;
+}
+.gr-button:hover {
+  background-color: #c48f61 !important;
+}
+/* フォーム要素 */
+.gr-textbox, .gr-slider, .gr-radio, .gr-checkbox, .gr-image {
+  background: #fff;
+  border-radius: 8px;
+}
+/* Gallery */
+.gr-gallery {
+  background: #fffaf1;
+  padding: 10px;
+  border-radius: 12px;
+}
+/* デフォルトスピナーを隠す */
+.gradio-spinner { display: none !important; }
 /* カスタムローダー */
 #custom-loader {
-  display: none; position: fixed; top: 16px; right: 16px;
-  padding: 8px 12px; background: rgba(255,255,255,0.95);
-  border-radius: 8px; align-items: center; font-size: 16px;
-  font-weight: bold; color: #734c36; z-index: 9999;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  margin: 12px 0;
+}
+body.gradio-running #custom-loader { display: flex; }
+/* 文字１文字ずつのフェードアニメーション */
+@keyframes fadeLetter {
+  0%,100% { opacity: 1; }
+  50%     { opacity: 0.2; }
+}
+#custom-loader .loading-text span {
+  display: inline-block;
+  animation: fadeLetter 1s ease-in-out infinite;
+}
+/* アイコン */
+#custom-loader img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-left: 8px;
 }
-@keyframes fadeLetter { 0%,100% { opacity:1; } 50% { opacity:0.2; } }
-#custom-loader span { display:inline-block; animation:fadeLetter 1s ease-in-out infinite; }
 """
 
 with gr.Blocks(css=css) as demo:
-    # カスタムローダー要素 + アニメーションテキスト + アイコン
-    gr.HTML(r"""
-<div id="custom-loader">
-  <span id="loader-text"></span>
-  <img src="/icon.png" style="width:32px;height:32px;border-radius:50%;margin-left:8px;"/>
-</div>
-<script>
-(function(){
-  const text = "in progress";
-  const span = document.getElementById("loader-text");
-  let idx = 0;
-  function animate() {
-    if (idx <= text.length) {
-      span.textContent = text.slice(0, idx++);
-      setTimeout(animate, 150);
-    }
-  }
-  // ボタンクリックでローダー表示
-  document.querySelector('button').addEventListener('click', () => {
-    document.getElementById('custom-loader').style.display = 'flex';
-    idx = 0; animate();
-  });
-  // 画像生成完了でローダー非表示
-  const obs = new MutationObserver(() => {
-    if (document.querySelector('.gr-gallery img')) {
-      document.getElementById('custom-loader').style.display = 'none'; obs.disconnect();
-    }
-  });
-  obs.observe(document.body, { childList:true, subtree:true });
-})();
-</script>
-    """)
-
     with gr.Column(elem_id="col-container"):
         gr.Markdown("## SDXL Base – cocoamixXL3 Demo")
         gr.Markdown("[Link: Civitai](https://civitai.com/models/1553716?modelVersionId=1855218)")
-        prompt       = gr.Textbox(lines=1, placeholder="Prompt…", value="1girl, cocoart, masterpiece, anime,")
-        neg          = gr.Textbox(lines=1, placeholder="Negative prompt", value="low quality, worst quality,…")
-        seed_sl      = gr.Slider(0, MAX_SEED, step=1, value=0, label="Seed")
-        rand_chk     = gr.Checkbox(True, label="Randomize seed")
-        width_sl     = gr.Slider(256, MAX_SIZE, step=32, value=512, label="Width")
-        height_sl    = gr.Slider(256, MAX_SIZE, step=32, value=512, label="Height")
-        cfg_sl       = gr.Slider(1.0, 30.0, step=0.1, value=7.5, label="CFG Scale")
-        steps_sl     = gr.Slider(1, 50, step=1, value=12, label="Steps")
-        sched_rad    = gr.Radio(["Euler Ancestral","DPM++ 2M SDE"], value="Euler Ancestral", label="Scheduler")
-        run_btn      = gr.Button("Generate")
-        img_out      = gr.Image()
-        history_gal  = gr.Gallery(label="生成履歴", columns=4, height=280, interactive=True, type="pil")
-
-    run_btn.click(
+
+        # フォーム配置（かわいくアレンジ）
+        with gr.Row():
+            prompt = gr.Textbox(
+                lines=1,
+                placeholder="Prompt…",
+                value="1girl, cocoart, masterpiece, anime,"
+            )
+            neg = gr.Textbox(
+                lines=1,
+                placeholder="Negative prompt",
+                value=(
+                    "low quality, worst quality, bad shadow, lowres, error, miss stroke, "
+                    "sketch art, smoke, ugly, extra digits, creepy, imprecise, glowing blur,"
+                )
+            )
+        with gr.Row():
+            seed_sl = gr.Slider(0, MAX_SEED, step=1, value=0, label="Seed")
+            rand    = gr.Checkbox(True, label="Randomize seed")
+        with gr.Row():
+            width  = gr.Slider(256, MAX_SIZE, step=32, value=512, label="Width")
+            height = gr.Slider(256, MAX_SIZE, step=32, value=512, label="Height")
+        with gr.Row():
+            cfg    = gr.Slider(1.0, 30.0, step=0.1, value=7.5, label="CFG Scale")
+            steps  = gr.Slider(1, 50, step=1, value=12,   label="Steps")
+        with gr.Row():
+            scheduler_type = gr.Radio(
+                choices=["Euler Ancestral", "DPM++ 2M SDE"],
+                value="Euler Ancestral",
+                label="Scheduler"
+            )
+            run = gr.Button("Generate")
+
+        # カスタムローディング
+        loader = gr.HTML(
+            '<div id="custom-loader">'
+            '  <div class="loading-text">'
+            '    <span style="animation-delay:0s">i</span>'
+            '    <span style="animation-delay:0.1s">n</span>'
+            '    <span style="animation-delay:0.2s"> </span>'
+            '    <span style="animation-delay:0.3s">p</span>'
+            '    <span style="animation-delay:0.4s">r</span>'
+            '    <span style="animation-delay:0.5s">o</span>'
+            '    <span style="animation-delay:0.6s">g</span>'
+            '    <span style="animation-delay:0.7s">r</span>'
+            '    <span style="animation-delay:0.8s">e</span>'
+            '    <span style="animation-delay:0.9s">s</span>'
+            '    <span style="animation-delay:1.0s">s</span>'
+            '  </div>'
+            '  <img src="icon.png" alt="loading icon" />'
+            '</div>'
+        )
+
+        img_out = gr.Image()
+        state   = gr.State([])
+
+        # 生成履歴ギャラリー（画像＋キャプションHTML）
+        history_gallery = gr.Gallery(
+            label="生成履歴",
+            columns=4,
+            height=280,
+            show_label=False,
+            interactive=True,
+            type="pil"
+        )
+
+    # イベント設定
+    run.click(
         fn=infer,
-        inputs=[prompt, neg, seed_sl, rand_chk, width_sl, height_sl, cfg_sl, steps_sl, sched_rad],
-        outputs=[img_out, history_gal]
+        inputs=[prompt, neg, seed_sl, rand, width, height, cfg, steps, scheduler_type],
+        outputs=[img_out, history_gallery]
     )
 
     demo.queue()