Update app.py

app.py

@@ -1,172 +1,33 @@
 import gradio as gr
-import torch
-import random
-import numpy as np
-from diffusers import (
-    StableDiffusionXLPipeline,
-    EulerAncestralDiscreteScheduler,
-    DPMSolverMultistepScheduler
-)
-from huggingface_hub import hf_hub_download
 
-# デバイスと型の設定
-device = "cuda" if torch.cuda.is_available() else "cpu"
-torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
-MAX_SEED = np.iinfo(np.int32).max
-MAX_SIZE = 2048
+def noop(): return None
 
-# モデルファイルのダウンロード
-model_path = hf_hub_download(
-    repo_id="cocoat/cocoamix",
-    filename="recocoamixXL3_coamixXL3.safetensors"
-)
-
-# 単一ファイルからパイプラインを構築
-pipe = StableDiffusionXLPipeline.from_single_file(
-    model_path,
-    torch_dtype=torch_dtype,
-    use_safetensors=True
-).to(device)
-
-# スケジューラのプリセット
-euler_scheduler = EulerAncestralDiscreteScheduler.from_config(
-    pipe.scheduler.config,
-    use_karras_sigmas=True
-)
-dpm_scheduler = DPMSolverMultistepScheduler.from_config(
-    pipe.scheduler.config
-)
-pipe.scheduler = euler_scheduler
-
-# 生成履歴保持
-dhistory = []
-
-# HTMLテーブル生成ヘルパー
-def make_html_table(caption):
-    rows = caption.split("\n")
-    html = '<table style="width:100%;border-collapse:collapse;">'
-    for row in rows:
-        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>'
-            )
-    html += '</table>'
-    return html
-
-# 推論関数
-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.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,
-        guidance_scale=cfg,
-        num_inference_steps=steps,
-        width=w,
-        height=h,
-        generator=generator,
-        callback_on_step_end=_callback
-    )
-    img = output.images[0]
-    caption_text = (
-        f"Prompt: {prompt}\n"
-        f"Negative: {neg or 'None'}\n"
-        f"Seed: {seed}\n"
-        f"Size: {w}×{h}\n"
-        f"CFG: {cfg}\n"
-        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]
-    return img, gallery_items
-
-# Gradio UI
-def main():
-    with gr.Blocks() as demo:
-        # カスタム CSS/JS を直接挿入
-        gr.HTML(_js=None,_html="""
+with gr.Blocks() as demo:
+    # ① カスタム 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; }}
-#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; }
+  /* モーダルオーバーレイ */
+  #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; }
 </style>
-
-<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>
-
+<div id="modal-overlay">
+  <div id="modal-content">
+    <p>モーダルが開きました！</p>
+    <button id="modal-close">閉じる</button>
+  </div>
+</div>
 <script>
-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('open-modal').addEventListener('click', () => {
     document.getElementById('modal-overlay').style.display = 'flex';
-  }
-  if(e.target.id==='modal-close'||e.target.id==='modal-overlay') {
+  });
+  document.getElementById('modal-close').addEventListener('click', () => {
     document.getElementById('modal-overlay').style.display = 'none';
-  }
-});
+  });
 </script>
 """)
 
-        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: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, …")
-            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")
-            with gr.Row():
-                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, 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()
+    # ② ボタンをひとつ置いてテスト
+    btn = gr.Button("モーダルを開く", elem_id="open-modal")
 
-if __name__ == "__main__":
-    main()
+demo.launch()