Update app.py

app.py

@@ -4,67 +4,42 @@ from diffusers import StableDiffusionXLPipeline, DPMSolverMultistepScheduler
 from huggingface_hub import hf_hub_download
 import random
 
-# ── Device detection ───────────────────────────────────────────────────────────
+# ── Device ────────────────────────────────────────────────────────────────────
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
-DTYPE = torch.float16 if DEVICE == "cuda" else torch.float32
+DTYPE  = torch.float16 if DEVICE == "cuda" else torch.float32
+print(f"Running on: {DEVICE.upper()}")
 
-print(f"Running on: {DEVICE.upper()} | dtype: {DTYPE}")
-
-# ── Model ──────────────────────────────────────────────────────────────────────
+# ── Model ─────────────────────────────────────────────────────────────────────
 MODEL_REPO = "cyberdelia/CyberRealisticPony"
 MODEL_FILE = "CyberRealisticPony_V16.0_FP16.safetensors"
+PONY_POS   = "score_9, score_8_up, score_7_up, "
+PONY_NEG   = "score_6, score_5, score_4, "
 
-# ── Pony quality tags ──────────────────────────────────────────────────────────
-PONY_POS_PREFIX = "score_9, score_8_up, score_7_up, "
-PONY_NEG_PREFIX = "score_6, score_5, score_4, "
-
-# ── Download then load from local path ────────────────────────────────────────
-print("Downloading model — this may take several minutes on first start...")
-
-local_path = hf_hub_download(
-    repo_id=MODEL_REPO,
-    filename=MODEL_FILE,
-)
-
-print(f"Model downloaded to: {local_path}")
-print("Loading pipeline...")
-
-pipe = StableDiffusionXLPipeline.from_single_file(
-    local_path,
-    torch_dtype=DTYPE,
-)
+print("Downloading model...")
+local_path = hf_hub_download(repo_id=MODEL_REPO, filename=MODEL_FILE)
+print(f"Loading from {local_path}...")
 
+pipe = StableDiffusionXLPipeline.from_single_file(local_path, torch_dtype=DTYPE)
 pipe.scheduler = DPMSolverMultistepScheduler.from_config(
-    pipe.scheduler.config,
-    use_karras_sigmas=True,
+    pipe.scheduler.config, use_karras_sigmas=True
 )
-
 pipe.enable_attention_slicing()
-
 if DEVICE == "cuda":
     pipe.enable_xformers_memory_efficient_attention()
-
 pipe = pipe.to(DEVICE)
+print("Ready.")
 
-print("Model ready.")
-
-# ── Generation function ────────────────────────────────────────────────────────
-def generate_image(prompt, negative_prompt, width, height, steps, guidance, seed, randomize_seed):
-    if not prompt or prompt.strip() == "":
-        raise gr.Error("Please enter a prompt before generating.")
-
-    if randomize_seed:
+# ── Generation ────────────────────────────────────────────────────────────────
+def generate(prompt, negative_prompt, width, height, steps, guidance, seed, randomize):
+    if not prompt.strip():
+        raise gr.Error("Please enter a prompt.")
+    if randomize:
         seed = random.randint(0, 2**32 - 1)
-
     seed = int(seed)
     generator = torch.Generator(device=DEVICE).manual_seed(seed)
-
-    full_prompt   = PONY_POS_PREFIX + prompt.strip()
-    full_negative = PONY_NEG_PREFIX + negative_prompt.strip()
-
-    output = pipe(
-        prompt=full_prompt,
-        negative_prompt=full_negative,
+    result = pipe(
+        prompt=PONY_POS + prompt.strip(),
+        negative_prompt=PONY_NEG + negative_prompt.strip(),
         width=int(width),
         height=int(height),
         num_inference_steps=int(steps),
@@ -72,62 +47,231 @@ def generate_image(prompt, negative_prompt, width, height, steps, guidance, seed
         generator=generator,
         clip_skip=2,
     )
+    return result.images[0], seed
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+css = """
+/* ── Base ── */
+body, .gradio-container {
+    background: #0f0f13 !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+}
+
+/* ── Header ── */
+.header-box {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    border: 1px solid #e94560;
+    border-radius: 16px;
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 8px;
+}
+.header-box h1 {
+    color: #ffffff;
+    font-size: 1.8em;
+    font-weight: 800;
+    margin: 0 0 6px 0;
+    letter-spacing: -0.5px;
+}
+.header-box p {
+    color: #a0a0b8;
+    font-size: 0.85em;
+    margin: 0;
+}
+.header-box .badge {
+    display: inline-block;
+    background: #e94560;
+    color: white;
+    font-size: 0.7em;
+    font-weight: 700;
+    padding: 2px 10px;
+    border-radius: 20px;
+    margin-top: 8px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* ── Output image ── */
+.output-box {
+    background: #1a1a2e;
+    border: 2px dashed #2a2a4a;
+    border-radius: 16px;
+    overflow: hidden;
+    min-height: 300px;
+}
+.output-box img {
+    border-radius: 14px;
+    width: 100%;
+}
+
+/* ── Panel cards ── */
+.panel-card {
+    background: #1a1a2e;
+    border: 1px solid #2a2a4a;
+    border-radius: 14px;
+    padding: 16px;
+    margin-bottom: 10px;
+}
+.section-label {
+    color: #e94560 !important;
+    font-size: 0.75em !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1.5px !important;
+    margin-bottom: 10px !important;
+}
+
+/* ── Inputs ── */
+textarea, input[type="number"] {
+    background: #0f0f13 !important;
+    border: 1px solid #2a2a4a !important;
+    border-radius: 10px !important;
+    color: #e0e0f0 !important;
+    font-size: 15px !important;
+}
+textarea:focus, input[type="number"]:focus {
+    border-color: #e94560 !important;
+    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2) !important;
+}
+
+/* ── Sliders ── */
+.gradio-slider input[type=range] {
+    accent-color: #e94560;
+}
+
+/* ── Generate button ── */
+.generate-btn {
+    background: linear-gradient(135deg, #e94560, #c23152) !important;
+    border: none !important;
+    border-radius: 14px !important;
+    color: white !important;
+    font-size: 1.1em !important;
+    font-weight: 700 !important;
+    padding: 16px !important;
+    width: 100% !important;
+    letter-spacing: 0.5px !important;
+    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.4) !important;
+    transition: all 0.2s ease !important;
+}
+.generate-btn:active {
+    transform: scale(0.98) !important;
+    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.3) !important;
+}
+
+/* ── Seed row ── */
+.seed-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* ── Used seed display ── */
+.used-seed input {
+    background: #0f0f13 !important;
+    border: 1px solid #2a2a4a !important;
+    color: #606080 !important;
+    font-size: 0.85em !important;
+    text-align: center !important;
+}
+
+/* ── Labels ── */
+label span, .gradio-label {
+    color: #a0a0c0 !important;
+    font-size: 0.82em !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.8px !important;
+}
+
+/* ── Mobile: stack columns ── */
+@media (max-width: 768px) {
+    .gr-row { flex-direction: column !important; }
+    .gr-col { width: 100% !important; min-width: 100% !important; }
+}
+"""
+
+# ── UI ────────────────────────────────────────────────────────────────────────
+with gr.Blocks(css=css, title="CyberRealistic Pony") as demo:
+
+    # Header
+    gr.HTML("""
+    <div class="header-box">
+        <h1>🐴 CyberRealistic Pony</h1>
+        <p>SDXL · Pony Architecture · v16.0</p>
+        <span class="badge">⚠ CPU Mode — Slow</span>
+    </div>
+    """)
+
+    # Output image — top on mobile so you see result first
+    with gr.Group(elem_classes="output-box"):
+        output_image = gr.Image(
+            label="",
+            type="pil",
+            show_label=False,
+            height=420,
+        )
+
+    used_seed = gr.Number(
+        label="Seed used  —  save to reproduce",
+        interactive=False,
+        elem_classes="used-seed",
+    )
 
-    return output.images[0], seed
+    # ── Prompt card ──
+    gr.HTML('<div class="section-label" style="margin-top:14px;color:#e94560;font-size:0.75em;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;">✏️ Prompt</div>')
 
+    prompt = gr.Textbox(
+        label="",
+        placeholder="a woman in a futuristic city, cinematic lighting, highly detailed, photorealistic",
+        lines=3,
+        show_label=False,
+    )
 
-# ── UI ─────────────────────────────────────────────────────────────────────────
-with gr.Blocks(title="CyberRealistic Pony", theme=gr.themes.Soft()) as demo:
+    gr.HTML('<div class="section-label" style="margin-top:10px;color:#e94560;font-size:0.75em;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;">🚫 Negative Prompt</div>')
 
-    gr.Markdown("# 🐴 CyberRealistic Pony Generator")
-    gr.Markdown(
-        "> **Model:** CyberRealistic Pony v16.0 · SDXL / Pony architecture  \n"
-        "> ⚠️ **Running on CPU** — generation takes 30–90+ minutes per image. "
-        "Upgrade to ZeroGPU in Space Settings for practical speeds.\n\n"
-        "_Quality tags (`score_9, score_8_up, score_7_up`) are prepended to your prompt automatically._"
+    negative_prompt = gr.Textbox(
+        label="",
+        value=(
+            "(worst quality:1.2), (low quality:1.2), (normal quality:1.2), "
+            "lowres, bad anatomy, bad hands, signature, watermarks, "
+            "ugly, imperfect eyes, skewed eyes, unnatural face, "
+            "unnatural body, error, extra limb, missing limbs"
+        ),
+        lines=2,
+        show_label=False,
     )
 
+    # ── Size card ──
+    gr.HTML('<div class="section-label" style="margin-top:14px;color:#e94560;font-size:0.75em;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;">📐 Size</div>')
+
+    with gr.Row():
+        width  = gr.Slider(512, 896,  value=768, step=64, label="Width")
+        height = gr.Slider(512, 1152, value=896, step=64, label="Height")
+
+    # ── Sampling card ──
+    gr.HTML('<div class="section-label" style="margin-top:14px;color:#e94560;font-size:0.75em;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;">⚙️ Sampling</div>')
+
+    steps    = gr.Slider(10, 30,  value=20,  step=1,   label="Steps")
+    guidance = gr.Slider(1.0, 12.0, value=5.0, step=0.5, label="CFG Scale")
+
+    # ── Seed card ──
+    gr.HTML('<div class="section-label" style="margin-top:14px;color:#e94560;font-size:0.75em;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;">🎲 Seed</div>')
+
     with gr.Row():
-        with gr.Column(scale=1):
-
-            prompt = gr.Textbox(
-                label="Prompt",
-                placeholder="a woman in a futuristic city, cinematic lighting, highly detailed, photorealistic",
-                lines=4,
-            )
-            negative_prompt = gr.Textbox(
-                label="Negative Prompt",
-                value=(
-                    "(worst quality:1.2), (low quality:1.2), (normal quality:1.2), "
-                    "lowres, bad anatomy, bad hands, signature, watermarks, "
-                    "ugly, imperfect eyes, skewed eyes, unnatural face, "
-                    "unnatural body, error, extra limb, missing limbs"
-                ),
-                lines=3,
-            )
-
-            gr.Markdown("### Image Size")
-            with gr.Row():
-                width  = gr.Slider(minimum=512, maximum=896,  value=768, step=64, label="Width")
-                height = gr.Slider(minimum=512, maximum=1152, value=896, step=64, label="Height")
-
-            gr.Markdown("### Sampling")
-            steps    = gr.Slider(minimum=10, maximum=30, value=20, step=1, label="Steps — keep low on CPU")
-            guidance = gr.Slider(minimum=1.0, maximum=12.0, value=5.0, step=0.5, label="Guidance Scale (CFG) — recommended: 5")
-
-            gr.Markdown("### Seed")
-            with gr.Row():
-                seed           = gr.Number(label="Seed", value=42, precision=0, minimum=0, maximum=2**32 - 1)
-                randomize_seed = gr.Checkbox(label="Randomise Seed", value=True)
-
-            generate_btn = gr.Button("Generate Image 🖼️", variant="primary", size="lg")
-
-        with gr.Column(scale=1):
-            output_image = gr.Image(label="Generated Image", type="pil", height=500)
-            used_seed    = gr.Number(label="Seed Used", interactive=False)
+        seed           = gr.Number(label="Seed", value=42, precision=0, minimum=0, maximum=2**32-1, scale=2)
+        randomize_seed = gr.Checkbox(label="Random", value=True, scale=1)
+
+    # ── Generate button ──
+    generate_btn = gr.Button(
+        "✦ Generate Image",
+        variant="primary",
+        size="lg",
+        elem_classes="generate-btn",
+    )
 
+    # ── Wire up ──
     generate_btn.click(
-        fn=generate_image,
+        fn=generate,
         inputs=[prompt, negative_prompt, width, height, steps, guidance, seed, randomize_seed],
         outputs=[output_image, used_seed],
     )