gpt

app.py

@@ -138,23 +138,23 @@ html, .gradio-container, .dark, .dark * {
   font-weight: bold;
   margin: 12px 0;
 }
-.block.svelte-11xb1hd{
-  background:#efd1bf !important;
+.block.svelte-11xb1hd {
+  background: #efd1bf !important;
 }
-.span.svelte-g2oxp3, label.svelte-5ncdh7.svelte-5ncdh7.svelte-5ncdh7{
+.span.svelte-g2oxp3, label.svelte-5ncdh7.svelte-5ncdh7.svelte-5ncdh7 {
   color: #915325 !important;
 }
-.svelte-zyxd38 g{
- display:none !important;
+.svelte-zyxd38 g {
+  display: none !important;
 }
-.secondary.svelte-1ixn6qd{
+.secondary.svelte-1ixn6qd {
   background: #dca08a !important;
   color: #631c00 !important;
 }
-:root{
+:root {
   --color-accent: #a57659;
 }
-.max_value.svelte-10lj3xl.svelte-10lj3xl{
+.max_value.svelte-10lj3xl.svelte-10lj3xl {
   color: #a54618 !important;
 }
 body.gradio-running #custom-loader { display: flex; }
@@ -172,61 +172,20 @@ body.gradio-running #custom-loader { display: flex; }
   border-radius: 50%;
   margin-left: 8px;
 }
-.nobackground, .nobackground div{
+.nobackground, .nobackground div {
   background-color: transparent !important;
 }
 """
-with gr.Blocks(css=css) as demo:
-    loader = gr.HTML(
-        """
-        <div id="custom-loader" style="display:none;align-items:center;justify-content:center;font-weight:bold;margin:12px 0;">
-          <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" style="width:32px;height:32px;border-radius:50%;margin-left:8px;" />
-        </div>
-        <script>
-        (()=>{
-          // 1) SVG 要素を探す
-          const targetSvg = document.querySelector('svg.svelte-zyxd38');
-          const loaderEl = document.getElementById('custom-loader');
-          if (!targetSvg || !loaderEl) return;
-
-          // 2) SVG の直後にローダーを移動
-          targetSvg.parentNode.insertBefore(loaderEl, targetSvg.nextSibling);
-
-          // 3) SVG の存在を監視（属性変化でも再表示を制御可）
-          const mo = new MutationObserver(() => {
-            // SVG が DOM 内にあるか？
-            const stillThere = document.contains(targetSvg);
-            loaderEl.style.display = stillThere ? 'flex' : 'none';
-          });
-          mo.observe(document.body, { childList: true, subtree: true });
 
-          // 初回表示
-          loaderEl.style.display = 'flex';
-        })();
-        </script>
-        """
-    )
-    
+with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown('<section class="nobackground"> 〈b〉 SDXL Base – cocoamixXL3 Demo 〈/b〉 </section>')
-        gr.Markdown('<section class="nobackground"> [Link: Civitai](https://civitai.com/models/1553716?modelVersionId=1855218) </section>')
+        # 元のまま：section.nobackground で囲むことでデザイン崩れなし
+        gr.Markdown('<section class="nobackground">## SDXL Base – cocoamixXL3 Demo</section>')
+        gr.Markdown('<section class="nobackground">[Link: Civitai](https://civitai.com/models/1553716?modelVersionId=1855218)</section>')
 
         with gr.Row():
             prompt = gr.Textbox(lines=1, placeholder="Prompt…", value="1girl, cocoart, masterpiece, anime,", label="Prompt")
-            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,", label="Negative prompt")
+            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,", label="Negative prompt")
         with gr.Row():
             seed_sl = gr.Slider(0, MAX_SEED, step=1, value=0, label="Seed")
             rand    = gr.Checkbox(True, label="Randomize seed")
@@ -240,6 +199,7 @@ with gr.Blocks(css=css) as demo:
             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">'
@@ -261,7 +221,14 @@ with gr.Blocks(css=css) as demo:
 
         img_out = gr.Image()
         state   = gr.State([])
-        history_gallery = gr.Gallery(label="生成履歴", columns=4, height=280, show_label=False, interactive=True, type="pil", sanitize=False)
+        history_gallery = gr.Gallery(
+            label="生成履歴",
+            columns=4,
+            height=280,
+            show_label=False,
+            interactive=True,
+            type="auto"
+        )
 
     run.click(
         fn=infer,