Update app.py

app.py

@@ -46,24 +46,36 @@ def make_html_table(caption):
         if ": " in row:
             key, val = row.split(": ", 1)
             html += (
-                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>'
+                f'<tr>'
+                f'<th style="text-align:left;border:1px solid #ddd;padding:4px;">{key}</th>'
+                f'<td style="border:1px solid #ddd;padding:4px;">{val}</td>'
+                f'</tr>'
             )
     html += '</table>'
     return html
 
-def infer(prompt, neg, seed, rand, w, h, cfg, steps, scheduler_type, 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)
     generator = torch.Generator(device=device).manual_seed(seed)
 
-    pipe.scheduler = euler_scheduler if scheduler_type == "Euler Ancestral" else dpm_scheduler
+    # スケジューラ切り替え＆ステップ設定
+    pipe.scheduler = (
+        euler_scheduler if scheduler_type == "Euler Ancestral"
+        else dpm_scheduler
+    )
     pipe.scheduler.set_timesteps(steps)
 
+    # コールバックで進捗更新
     def _callback(pipeline, step_idx, timestep, callback_kwargs):
         progress(step_idx / steps, desc=f"Step {step_idx}/{steps}")
         return callback_kwargs
 
+    # 推論実行
     output = pipe(
         prompt=prompt,
         negative_prompt=neg or None,
@@ -76,6 +88,7 @@ def infer(prompt, neg, seed, rand, w, h, cfg, steps, scheduler_type, progress=gr
     )
     img = output.images[0]
 
+    # キャプション生成＆履歴登録
     caption_text = (
         f"Prompt: {prompt}\n"
         f"Negative: {neg or 'None'}\n"
@@ -88,63 +101,70 @@ def infer(prompt, neg, seed, rand, w, h, cfg, steps, scheduler_type, progress=gr
     history.insert(0, (img, caption_text))
     progress(1.0, desc="Done!")
 
+    # ギャラリー用項目
     gallery_items = [(item[0], make_html_table(item[1])) for item in history]
     return img, gallery_items
 
+# CSS 設定（ダークモード防止＋カフェ風テーマ＋カスタムローダー）
 css = """
-/* ──────────────────────────────── */
-/* 全体背景とカフェ風２色配色 */
-body,
-html.dark body,
-html.light body {
+body {
   background-color: #f4e1c1 !important;
+  font-family: 'Georgia', serif;
+  color: #000 !important;
 }
-.gradio-container,
-html.dark .gradio-container,
-html.light .gradio-container {
+html, .gradio-container, .dark, .dark * {
   background: #fffaf1 !important;
-  position: relative;
+  color: #000 !important;
 }
-/* ──────────────────────────────── */
-
-/* 標準スピナーを完全に非表示 */
-.gradio-container .gradio-spinner {
-  display: none !important;
+#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;
 }
-
-/* ──────────────────────────────── */
-/* スピナーカバー（予備） */
-#spinner-cover {
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+.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;
+}
+.gr-gallery {
   background: #fffaf1;
-  z-index: 9998;
-  display: none;
+  padding: 10px;
+  border-radius: 12px;
 }
-body.gradio-running #spinner-cover {
-  display: block;
+
+/* 標準スピナー非表示 */
+.gradio-spinner {
+  display: none !important;
 }
-/* ──────────────────────────────── */
 
-/* カスタムローダー */
+/* カスタムローダー初期状態 */
 #custom-loader {
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 9999;
   display: none;
   align-items: center;
   justify-content: center;
-  font-family: 'Georgia', serif;
-  font-size: 1.2em;
-  color: #5a3e27;
+  font-weight: bold;
+  margin: 12px 0;
 }
+
+/* 実行中のみ表示 */
 body.gradio-running #custom-loader {
   display: flex;
 }
 
-/* カスタムローダー文字アニメーション */
+/* 文字ごとのフェードアニメ */
 @keyframes fadeLetter {
   0%,100% { opacity: 1; }
   50%     { opacity: 0.2; }
@@ -152,28 +172,15 @@ body.gradio-running #custom-loader {
 #custom-loader .loading-text span {
   display: inline-block;
   animation: fadeLetter 1s ease-in-out infinite;
-  animation-delay: calc(var(--i) * 0.1s);
 }
-"""
 
-script = """
-<script>
-// ページ読み込み時：スピナー要素を完全に削除
-window.addEventListener('load', function() {
-  document.querySelectorAll('.gradio-spinner').forEach(el => el.remove());
-});
-
-// 生成開始時：カスタムローダーを表示
-document.addEventListener('gradio:request', () => {
-  document.getElementById('spinner-cover').style.display = 'block';
-  document.getElementById('custom-loader').style.display = 'flex';
-});
-// 生成完了時：カスタムローダーを非表示
-document.addEventListener('gradio:response', () => {
-  document.getElementById('spinner-cover').style.display = 'none';
-  document.getElementById('custom-loader').style.display = 'none';
-});
-</script>
+/* アイコン調整 */
+#custom-loader img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-left: 8px;
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -181,63 +188,72 @@ with gr.Blocks(css=css) as demo:
         gr.Markdown("## SDXL Base – cocoamixXL3 Demo")
         gr.Markdown("[Link: Civitai](https://civitai.com/models/1553716?modelVersionId=1855218)")
 
+        # 入力欄
         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, smoke")
-
+            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")
-
+            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")
+            scheduler_type = gr.Radio(
+                choices=["Euler Ancestral", "DPM++ 2M SDE"],
+                value="Euler Ancestral",
+                label="Scheduler"
+            )
             run = gr.Button("Generate")
 
-        # カバーとローダー要素を埋め込む
-        gr.HTML('<div id="spinner-cover"></div>')
-        gr.HTML(
+        # カスタムローダー表示エリア
+        loader = gr.HTML(
             '<div id="custom-loader">'
             '  <div class="loading-text">'
-            '    <span style="--i:0">i</span>'
-            '    <span style="--i:1">n</span>'
-            '    <span style="--i:2"> </span>'
-            '    <span style="--i:3">p</span>'
-            '    <span style="--i:4">r</span>'
-            '    <span style="--i:5">o</span>'
-            '    <span style="--i:6">g</span>'
-            '    <span style="--i:7">r</span>'
-            '    <span style="--i:8">e</span>'
-            '    <span style="--i:9">s</span>'
-            '    <span style="--i:10">s</span>'
+            '    <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()
-        history_gallery = gr.Gallery(label="生成履歴", columns=4, height=280, show_label=False, interactive=True, type="pil")
-
-        prompt.submit(
-            fn=infer,
-            inputs=[prompt, neg, seed_sl, rand, width, height, cfg, steps, scheduler_type],
-            outputs=[img_out, history_gallery],
-            show_progress="hidden"
-        )
-        run.click(
-            fn=infer,
-            inputs=[prompt, neg, seed_sl, rand, width, height, cfg, steps, scheduler_type],
-            outputs=[img_out, history_gallery]
+        # 出力欄
+        img_out = gr.Image()
+        history_gallery = gr.Gallery(
+            label="生成履歴",
+            columns=4,
+            height=280,
+            show_label=False,
+            interactive=True,
+            type="pil"
         )
 
-    # JavaScript を末尾で埋め込む
-    gr.HTML(script)
+    # ボタンクリック時の動作定義
+    run.click(
+        fn=infer,
+        inputs=[prompt, neg, seed_sl, rand, width, height, cfg, steps, scheduler_type],
+        outputs=[img_out, history_gallery]
+    )
 
     demo.queue()
     demo.launch()