手動修正

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

# モデルファイルのダウンロード
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

# 履歴保存
history = []

def make_html_table(caption):
rows = caption.split("\n")
html = '<table style="width:100%;border-collapse:collapse;background:#fffaf1;color:#000">'
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

# CSS 設定（ダークモード強制防止＋カフェ風テーマ）
css = """
body {
background-color: #f4e1c1 !important;
font-family: 'Georgia', serif;
color: #000 !important;
}
html, .gradio-container, .dark, .dark * {
background: #fffaf1 !important;
color: #000 !important;
}
#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;
}
.gr-button {
background-color: #d4a373 !important;
color: white !important;
border-radius: 8px !important;
padding: 10px 24px !important;
font-weight: bold;
transition: background-color 0.3s;
}
.gr-button:hover {
background-color: #c48f61 !important;
}
.gr-textbox, .gr-slider, .gr-radio, .gr-checkbox, .gr-image {
background: #fff;
border-radius: 8px;
}
.gr-gallery {
background: #fffaf1;
padding: 10px;
border-radius: 12px;
}
.gradio-spinner { display: none !important; }
#custom-loader {
display: none;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 12px 0;
}
.block.svelte-11xb1hd{
background:#efd1bf !important;
}
.span.svelte-g2oxp3, label.svelte-5ncdh7.svelte-5ncdh7.svelte-5ncdh7{
color: #915325 !important;
}
.svelte-zyxd38{
display:none !important;
}
.secondary.svelte-1ixn6qd{
background: #dca08a !important;
color: #631c00 !important;
}
:root{
--color-accent: #a57659;
}
.max_value.svelte-10lj3xl.svelte-10lj3xl{
color: #a54618 !important;
}
body.gradio-running #custom-loader { display: flex; }


@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;
}
"""

with gr.Blocks(css=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)")

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, bad shadow, lowres, error, miss stroke, sketch art, smoke, ugly, extra digits, creepy, imprecise, glowing blur,")
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")

loader = gr.HTML(
'<div id="custom-loader">'
' <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" />'
'</div>'
)

img_out = gr.Image()
state = gr.State([])
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()

app.py

@@ -138,6 +138,25 @@ html, .gradio-container, .dark, .dark * {
   font-weight: bold;
   margin: 12px 0;
 }
+.block.svelte-11xb1hd{
+  background:#efd1bf !important;
+}
+.span.svelte-g2oxp3, label.svelte-5ncdh7.svelte-5ncdh7.svelte-5ncdh7{
+  color: #915325 !important;
+}
+.svelte-zyxd38{
+ display:none !important;
+}
+.secondary.svelte-1ixn6qd{
+  background: #dca08a !important;
+  color: #631c00 !important;
+}
+:root{
+  --color-accent: #a57659;
+}
+.max_value.svelte-10lj3xl.svelte-10lj3xl{
+  color: #a54618 !important;
+}
 body.gradio-running #custom-loader { display: flex; }
 @keyframes fadeLetter {
   0%,100% { opacity: 1; }