Update app.py

app.py

@@ -101,31 +101,40 @@ def infer(
     history.insert(0, (img, caption_text))
     progress(1.0, desc="Done!")
 
-    # Gallery 用 dict リスト
+    # Gallery 用に (PIL.Image, HTML) のタプルリスト
     gallery_items = [
-        {"image": item[0], "caption": make_html_table(item[1])}
+        (item[0], make_html_table(item[1]))
         for item in history
     ]
     return img, gallery_items
 
-# CSS設定（温かい喫茶店風＋カスタムローディング＋モーダルオーバーレイ）
+# 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 {
+  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; }
+#col-container a {
+  color:#8b5e3c; text-decoration:none; border-bottom:1px dotted #8b5e3c;
+}
 /* カスタムローディング */
 .gradio-spinner { display:none !important; }
-#custom-loader { display:none; align-items:center; justify-content:center;
-  font-weight:bold; margin:12px 0; }
+#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 .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 .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;
+}
+/* Gallery */
+.gr-gallery { background:#fffaf1; padding:10px; border-radius:12px; }
 /* モーダルオーバーレイ */
 #modal-overlay {
   display:none; position:fixed; top:0; left:0; width:100vw; height:100vh;
@@ -143,6 +152,12 @@ body.gradio-running #custom-loader { display:flex!important; }
 }
 #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;
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -150,12 +165,12 @@ 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,…")
+                                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")
@@ -178,19 +193,20 @@ with gr.Blocks(css=css) as demo:
             + ''.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"/></div>'
+            )
+            + '<img src="icon.png" alt="icon"/></div>'
         )
 
+        # 生成プレビュー
         img_out = gr.Image()
 
         # 生成履歴ギャラリー
         history_gallery = gr.Gallery(
             label="生成履歴", columns=4, height=280,
-            show_label=False, interactive=True, type="auto"
+            show_label=False, interactive=True, type="pil"
         )
 
-        # 自前モーダル HTML＋スクリプト
+        # 自前モーダル HTML + JS
         gr.HTML("""
 <div id="modal-overlay">
   <div id="modal-content">
@@ -200,17 +216,14 @@ with gr.Blocks(css=css) as demo:
   </div>
 </div>
 <script>
-document.addEventListener('click', (e) => {
-  // サムネイル画像クリック
-  if (e.target.closest('.gr-gallery img')) {
-    const img = e.target.src;
-    // figcaption 内の HTML を取得
-    const cap = e.target.parentElement.querySelector('figcaption')?.innerHTML || '';
-    document.getElementById('modal-img').src = img;
+document.addEventListener('click', e => {
+  const thumb = e.target.closest('.gr-gallery img');
+  if (thumb) {
+    document.getElementById('modal-img').src = thumb.src;
+    const cap = thumb.closest('figure').querySelector('figcaption')?.innerHTML || '';
     document.getElementById('modal-caption').innerHTML = cap;
     document.getElementById('modal-overlay').style.display = 'flex';
   }
-  // 閉じるボタン or オーバーレイ背景クリック
   if (e.target.id==='modal-close' || e.target.id==='modal-overlay') {
     document.getElementById('modal-overlay').style.display = 'none';
   }