Update app.py

app.py

@@ -1,33 +1,108 @@
 import gradio as gr
-
-def noop(): return None
+# 以下省略：torch/pipe 定義などは既存コードをそのまま使ってください
 
 with gr.Blocks() as demo:
-    # ① カスタム CSS／JS を最上部にまとめて挿入
+    # ─── ここからインラインで CSS＋JS ───
     gr.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:#fff; padding:20px; border-radius:8px; }
+  #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;
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 80vw; max-height: 80vh;
+    overflow: auto;
+    position: relative;
+  }
+  #modal-close {
+    position: absolute; top:8px; right:8px;
+    background: #c48f61; color: white; border: none;
+    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>
+
+<!-- モーダル構造 -->
 <div id="modal-overlay">
   <div id="modal-content">
-    <p>モーダルが開きました！</p>
-    <button id="modal-close">閉じる</button>
+    <button id="modal-close">×</button>
+    <img id="modal-img" src="" alt="expanded"/>
+    <div id="modal-caption"></div>
   </div>
 </div>
+
 <script>
-  document.getElementById('open-modal').addEventListener('click', () => {
-    document.getElementById('modal-overlay').style.display = 'flex';
-  });
-  document.getElementById('modal-close').addEventListener('click', () => {
+document.addEventListener('click', e => {
+  const t = e.target;
+  // モーダルを閉じる
+  if (t.id==='modal-close' || t.id==='modal-overlay') {
     document.getElementById('modal-overlay').style.display = 'none';
-  });
+    return;
+  }
+  // ギャラリーサムネイルをクリック
+  const thumb = t.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';
+  }
+});
 </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" style="width:32px;height:32px;border-radius:50%;margin-left:8px;"/>'
+            + '</div>'
+        )
+
+        # …（フォーム、ボタン、Gallery）…
 
-    # ② ボタンをひとつ置いてテスト
-    btn = gr.Button("モーダルを開く", elem_id="open-modal")
+    # run.click と demo.launch() もそのまま
 
-demo.launch()
+    demo.queue()
+    demo.launch()