Update app.py

app.py

@@ -1,66 +1,129 @@
 import gradio as gr
-import time
+import torch
+import random
+import numpy as np
+from diffusers import (
+    StableDiffusionXLPipeline,
+    EulerAncestralDiscreteScheduler,
+    DPMSolverMultistepScheduler
+)
+from huggingface_hub import hf_hub_download
 
-def generate(prompt):
-    time.sleep(3)
-    return ["/file/example1.png", "/file/example2.png"]
+# デバイスと型の設定
+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
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    with gr.Row():
-        with gr.Column(scale=1, min_width=200):
-            prompt = gr.Textbox(label="Prompt")
-            generate_button = gr.Button("Generate")
-        with gr.Column(scale=2):
-            gallery = gr.Gallery(label="Generated Images").style(grid=2)
+# モデルファイルのダウンロード
+model_path = hf_hub_download(
+    repo_id="cocoat/cocoamix",
+    filename="recocoamixXL3_coamixXL3.safetensors"
+)
 
-    # カスタムローディングスクリプトを読み込み時に仕込む
-    demo.load(None, None, None, _js=r"""
-        () => {
-            const existing = document.getElementById("custom-loader");
-            if (existing) existing.remove();
+# パイプライン構築＆スケジューラ設定
+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
 
-            const loader = document.createElement("div");
-            loader.id = "custom-loader";
-            loader.style.position = "fixed";
-            loader.style.top = "20px";
-            loader.style.right = "20px";
-            loader.style.zIndex = 9999;
-            loader.style.background = "rgba(255,255,255,0.95)";
-            loader.style.border = "1px solid #ccc";
-            loader.style.padding = "8px 12px";
-            loader.style.borderRadius = "8px";
-            loader.style.display = "flex";
-            loader.style.alignItems = "center";
-            loader.style.fontSize = "16px";
-            loader.style.fontWeight = "bold";
-            loader.style.color = "#734c36";
-            loader.innerHTML = `<span id="progress-text"></span><img src="/icon.png" style="width:32px;height:32px;border-radius:50%;margin-left:8px;" />`;
+# 生成履歴保持
+history = []
 
-            const target = document.querySelector("body");
-            if (target) target.appendChild(loader);
+# HTMLテーブル生成ヘルパー
+def make_html_table(caption):
+    rows = caption.split("\n")
+    html = '<table style="width:100%;border-collapse:collapse;background:#fffaf1;">'
+    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:8px;color:#8b5e3c;">{key}</th>'
+                f'<td style="border:1px solid #ddd;padding:8px;">{val}</td></tr>'
+            )
+    html += '</table>'
+    return html
 
-            const text = "in progress";
-            let index = 0;
-            const span = loader.querySelector("#progress-text");
-            function animateText() {
-                if (index <= text.length) {
-                    span.textContent = text.slice(0, index++);
-                    setTimeout(animateText, 100);
-                }
-            }
-            animateText();
+# 推論
+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)
+    gen = 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 cb(p, i, t, kw):
+        progress(i/steps, desc=f"Step {i}/{steps}")
+        return kw
+    out = pipe(
+        prompt=prompt,
+        negative_prompt=neg or None,
+        guidance_scale=cfg,
+        num_inference_steps=steps,
+        width=w,
+        height=h,
+        generator=gen,
+        callback_on_step_end=cb
+    )
+    img = out.images[0]
+    cap = (
+        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, cap))
+    progress(1.0, desc="Done!")
+    return img, [(im, make_html_table(c)) for im, c in history]
 
-            // Gradioのデフォルトスピナーを完全に非表示にする
-            const style = document.createElement("style");
-            style.innerHTML = `
-                .loading-wrap, .svelte-spinner, .loading {
-                    display: none !important;
-                }
-            `;
-            document.head.appendChild(style);
-        }
-    """)
+# カフェ風スタイルのCSS
+def get_cafe_css():
+    return """
+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 a {
+    color: #8b5e3c;
+    text-decoration: none;
+    border-bottom: 1px dotted #8b5e3c;
+}
+"""
 
-    generate_button.click(fn=generate, inputs=prompt, outputs=gallery)
+with gr.Blocks(css=get_cafe_css()) as demo:
+    with gr.Column(elem_id="col-container"):
+        gr.Markdown("## SDXL Base – cocoamixXL3 Demo")
+        gr.Markdown("[Link: Civitai](https://civitai.com/models/1553716?modelVersionId=1855218)")
+        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,")
+        seed_sl = gr.Slider(0, MAX_SEED, step=1, value=0, label="Seed")
+        rand = gr.Checkbox(True, label="Randomize seed")
+        width = gr.Slider(256, MAX_SIZE, step=32, value=512, label="Width")
+        height = gr.Slider(256, MAX_SIZE, step=32, value=512, label="Height")
+        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")
+        scheduler_type = gr.Radio(["Euler Ancestral", "DPM++ 2M SDE"], value="Euler Ancestral", label="Scheduler")
+        run = gr.Button("Generate")
+        img_out = gr.Image()
+        gallery = gr.Gallery(label="生成履歴", columns=4, height=280, show_label=False, interactive=True, type="pil")
 
-demo.launch()
+    run.click(
+        fn=infer,
+        inputs=[prompt, neg, seed_sl, rand, width, height, cfg, steps, scheduler_type],
+        outputs=[img_out, gallery]
+    )
+
+    demo.queue()
+    demo.launch()