Update app.py

app.py

@@ -38,8 +38,8 @@ dpm_scheduler = DPMSolverMultistepScheduler.from_config(
 )
 pipe.scheduler = euler_scheduler
 
-# 生成履歴を (PIL.Image, キャプションテキスト) タプルで保持
-history = []
+# 生成履歴保持
+dhistory = []
 
 # HTMLテーブル生成ヘルパー
 def make_html_table(caption):
@@ -63,16 +63,13 @@ def infer(
     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.set_timesteps(steps)
-
     def _callback(pipeline, step_idx, timestep, callback_kwargs):
-        progress(step_idx / steps, desc=f"Step {step_idx}/{steps}")
+        progress(step_idx/steps, desc=f"Step {step_idx}/{steps}")
         return callback_kwargs
-
     output = pipe(
         prompt=prompt,
         negative_prompt=neg or None,
@@ -84,7 +81,6 @@ def infer(
         callback_on_step_end=_callback
     )
     img = output.images[0]
-
     caption_text = (
         f"Prompt: {prompt}\n"
         f"Negative: {neg or 'None'}\n"
@@ -94,127 +90,64 @@ def infer(
         f"Steps: {steps}\n"
         f"Scheduler: {scheduler_type}"
     )
-
     history.insert(0, (img, caption_text))
     progress(1.0, desc="Done!")
-
-    gallery_items = [
-        (item[0], make_html_table(item[1]))
-        for item in history
-    ]
+    gallery_items = [(item[0], make_html_table(item[1])) for item in history]
     return img, gallery_items
 
+# Gradio UI
 def main():
     with gr.Blocks() as demo:
-        # --- 最上部にカスタム CSS & JS をまとめて注入 ---
-        demo.append(gr.HTML("""
+        # カスタム CSS/JS を直接挿入
+        gr.HTML(_js=None,_html="""
 <style>
-/* 元スピナー／ローディング画面を完全に隠す */
-.loading-screen,
-.gradio-container > .loading,
-.gradio-container .loading {
-  display: none !important;
-}
-
-/* カスタムローダー */
-#custom-loader {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  margin: 12px 0;
-}
-body.gradio-running #custom-loader {
-  display: flex !important;
-}
-
-/* 文字１文字ずつフェード */
-@keyframes fadeLetter {
-  0%,100% { opacity: 1; }
-  50%     { opacity: 0.2; }
-}
-#custom-loader span {
-  display: inline-block;
-  animation: fadeLetter 1s ease-in-out infinite;
-}
-
-/* モーダルオーバーレイ */
-#modal-overlay {
-  display: none; position: fixed; top:0; left:0;
-  width:100vw; height:100vh;
-  background: rgba(0,0,0,0.6);
-  align-items: center; justify-content: center;
-  z-index: 9999;
-}
-#modal-content {
-  background: white; border-radius: 12px; padding: 16px;
-  max-width: 80vw; max-height: 80vh;
-  overflow: auto; position: relative;
-}
-#modal-close {
-  position: absolute; top:8px; right:8px;
-  background: #c48f61; border: none; color:white;
-  font-size:18px; width:32px; height:32px;
-  border-radius:50%; cursor: pointer;
-}
-#modal-img {
-  max-width: 100%; max-height: 60vh;
-  display: block; margin: 0 auto;
-}
-#modal-caption {
-  margin-top: 12px;
-}
+.loading-screen, .gradio-container > .loading, .gradio-container .loading { display: none !important; }
+#custom-loader { display: none; align-items: center; justify-content: center; font-weight: bold; margin: 12px 0; }
+body.gradio-running #custom-loader { display: flex !important; }
+@keyframes fadeLetter { 0%,100% { opacity:1; } 50% { opacity:0.2; }}
+#modal-overlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:9999; }
+#modal-content { background:white; border-radius:12px; padding:16px; max-width:80vw; max-height:80vh; overflow:auto; position:relative; }
+#modal-close { position:absolute; top:8px; right:8px; background:#c48f61; border:none; color:white; font-size:18px; width:32px; height:32px; border-radius:50%; cursor:pointer; }
+#modal-img { max-width:100%; max-height:60vh; display:block; margin:0 auto; }
+#modal-caption { margin-top:12px; }
 </style>
 
-<!-- モーダルの HTML -->
-<div id="modal-overlay">
-  <div id="modal-content">
-    <button id="modal-close">&times;</button>
-    <img id="modal-img" src="" alt="expanded"/>
-    <div id="modal-caption"></div>
-  </div>
-</div>
+<div id="modal-overlay"><div id="modal-content">
+  <button id="modal-close">×</button>
+  <img id="modal-img" src="" alt="expanded"/>
+  <div id="modal-caption"></div>
+</div></div>
 
 <script>
-// ギャラリーのサムネイルをクリックしたらモーダルを開く
 document.addEventListener('click', e => {
   const thumb = e.target.closest('.gr-gallery img');
-  if (thumb) {
+  if(thumb) {
     document.getElementById('modal-img').src = thumb.src;
-    const cap = thumb.closest('figure').querySelector('figcaption')?.innerHTML || '';
+    const cap = thumb.closest('figure').querySelector('figcaption')?.innerHTML||'';
     document.getElementById('modal-caption').innerHTML = cap;
     document.getElementById('modal-overlay').style.display = 'flex';
   }
-  // 閉じる
-  if (e.target.id === 'modal-close' || e.target.id === 'modal-overlay') {
+  if(e.target.id==='modal-close'||e.target.id==='modal-overlay') {
     document.getElementById('modal-overlay').style.display = 'none';
   }
 });
 </script>
-"""))
+""")
 
-        # UI コンテナ
         with gr.Column(elem_id="col-container"):
             gr.Markdown("## SDXL Base – cocoamixXL3 Demo")
             gr.Markdown("[Link: Civitai](https://civitai.com/models/1553716?modelVersionId=1855218)")
 
-            # カスタムローディング要素
             gr.HTML(
-                '<div id="custom-loader">'
-                + ''.join(
-                    f'<span style="animation-delay:{i*0.1:.1f}s">{c}</span>'
-                    for i, c in enumerate("in progress")
-                )
-                + '<img src="/icon.png" alt="icon" style="width:32px;height:32px;border-radius:50%;margin-left:8px;"/>'
-                + '</div>'
+                '<div id="custom-loader">' + ''.join(
+                    f'<span style="animation:fadeLetter 1s ease-in-out infinite;animation-delay:{i*0.1:.1f}s">{c}</span>'
+                    for i,c in enumerate("in progress")
+                ) + '<img src="/icon.png" style="width:32px;height:32px;border-radius:50%;margin-left:8px;"/></div>'
             )
 
-            # フォーム
             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,…")
+                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, …")
             with gr.Row():
                 seed_sl = gr.Slider(0, MAX_SEED, step=1, value=0, label="Seed")
                 rand    = gr.Checkbox(True, label="Randomize seed")
@@ -225,27 +158,13 @@ document.addEventListener('click', e => {
                 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")
 
-            # 出力
             img_out = gr.Image()
-            history_gallery = gr.Gallery(
-                label="生成履歴", columns=4, height=280,
-                show_label=False, show_caption=True,
-                interactive=True, type="pil"
-            )
-
-        run.click(
-            fn=infer,
-            inputs=[prompt, neg, seed_sl, rand, width, height, cfg, steps, scheduler_type],
-            outputs=[img_out, history_gallery]
-        )
+            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, width, height, cfg, steps, scheduler_type], outputs=[img_out, history_gallery])
         demo.queue()
         demo.launch()