Update app.py

app.py

@@ -1,42 +1,43 @@
 import gradio as gr
 import torch
+import spaces
 from diffusers import StableDiffusionXLPipeline, DPMSolverMultistepScheduler
 from huggingface_hub import hf_hub_download
 import random
 
-# ── Device ────────────────────────────────────────────────────────────────────
-DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
-DTYPE  = torch.float16 if DEVICE == "cuda" else torch.float32
-print(f"Running on: {DEVICE.upper()}")
-
-# ── Model ─────────────────────────────────────────────────────────────────────
+# ── Model config ──────────────────────────────────────────────────────────────
 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, "
 
+# ── Load model on CPU at startup, ZeroGPU moves it to GPU per request ─────────
 print("Downloading model...")
 local_path = hf_hub_download(repo_id=MODEL_REPO, filename=MODEL_FILE)
-print(f"Loading from {local_path}...")
+print("Loading pipeline...")
 
-pipe = StableDiffusionXLPipeline.from_single_file(local_path, torch_dtype=DTYPE)
+pipe = StableDiffusionXLPipeline.from_single_file(
+    local_path,
+    torch_dtype=torch.float16,
+)
 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("Pipeline ready.")
 
-# ── Generation ────────────────────────────────────────────────────────────────
+# ── Generation — @spaces.GPU gives this function a real GPU for its duration ──
+@spaces.GPU(duration=120)
 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)
+
+    generator = torch.Generator(device="cuda").manual_seed(seed)
+
     result = pipe(
         prompt=PONY_POS + prompt.strip(),
         negative_prompt=PONY_NEG + negative_prompt.strip(),
@@ -51,186 +52,254 @@ def generate(prompt, negative_prompt, width, height, steps, guidance, seed, rand
 
 # ── CSS ───────────────────────────────────────────────────────────────────────
 css = """
-/* ── Base ── */
+* { box-sizing: border-box; }
+
 body, .gradio-container {
-    background: #0f0f13 !important;
-    font-family: 'Inter', system-ui, sans-serif !important;
+    background: #0a0a0f !important;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+    max-width: 520px !important;
+    margin: 0 auto !important;
 }
 
-/* ── Header ── */
-.header-box {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-    border: 1px solid #e94560;
-    border-radius: 16px;
-    padding: 20px;
+/* Header */
+.site-header {
+    background: linear-gradient(160deg, #12001a, #1e0033, #0d001a);
+    border: 1px solid #6f00ff44;
+    border-radius: 20px;
+    padding: 24px 20px 18px;
     text-align: center;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
+    position: relative;
+    overflow: hidden;
+}
+.site-header::before {
+    content: '';
+    position: absolute;
+    top: -40px; left: -40px; right: -40px;
+    height: 120px;
+    background: radial-gradient(ellipse, #6f00ff22 0%, transparent 70%);
 }
-.header-box h1 {
+.site-header h1 {
     color: #ffffff;
-    font-size: 1.8em;
-    font-weight: 800;
-    margin: 0 0 6px 0;
-    letter-spacing: -0.5px;
+    font-size: 1.7em;
+    font-weight: 900;
+    margin: 0 0 4px;
+    letter-spacing: -1px;
+    position: relative;
 }
-.header-box p {
-    color: #a0a0b8;
-    font-size: 0.85em;
-    margin: 0;
+.site-header .sub {
+    color: #9966cc;
+    font-size: 0.78em;
+    font-weight: 500;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    position: relative;
 }
-.header-box .badge {
+.gpu-badge {
     display: inline-block;
-    background: #e94560;
-    color: white;
-    font-size: 0.7em;
-    font-weight: 700;
-    padding: 2px 10px;
+    background: linear-gradient(90deg, #00c853, #00e676);
+    color: #000;
+    font-size: 0.68em;
+    font-weight: 800;
+    padding: 3px 12px;
     border-radius: 20px;
-    margin-top: 8px;
+    margin-top: 10px;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 1.5px;
+    position: relative;
 }
 
-/* ── Output image ── */
-.output-box {
-    background: #1a1a2e;
-    border: 2px dashed #2a2a4a;
-    border-radius: 16px;
+/* Output area */
+.output-wrap {
+    background: #0f0f1a;
+    border: 1px solid #1e1e35;
+    border-radius: 18px;
     overflow: hidden;
-    min-height: 300px;
+    margin-bottom: 10px;
+    min-height: 340px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-.output-box img {
-    border-radius: 14px;
+.output-wrap img {
     width: 100%;
+    border-radius: 18px;
 }
 
-/* ── Panel cards ── */
-.panel-card {
-    background: #1a1a2e;
-    border: 1px solid #2a2a4a;
-    border-radius: 14px;
-    padding: 16px;
-    margin-bottom: 10px;
+/* Seed display */
+.seed-display input {
+    background: #0f0f1a !important;
+    border: 1px solid #1e1e35 !important;
+    border-radius: 10px !important;
+    color: #5544aa !important;
+    font-size: 0.8em !important;
+    text-align: center !important;
+    padding: 8px !important;
 }
-.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;
+
+/* Section headers */
+.sec-head {
+    color: #7733cc;
+    font-size: 0.7em;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin: 16px 0 8px;
+    padding-left: 2px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.sec-head::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, #331155, transparent);
 }
 
-/* ── Inputs ── */
-textarea, input[type="number"] {
-    background: #0f0f13 !important;
-    border: 1px solid #2a2a4a !important;
-    border-radius: 10px !important;
-    color: #e0e0f0 !important;
+/* Textareas */
+textarea {
+    background: #0f0f1a !important;
+    border: 1px solid #221133 !important;
+    border-radius: 12px !important;
+    color: #d0c0ee !important;
     font-size: 15px !important;
+    line-height: 1.5 !important;
+    padding: 12px !important;
+    resize: none !important;
 }
-textarea:focus, input[type="number"]:focus {
-    border-color: #e94560 !important;
-    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2) !important;
+textarea:focus {
+    border-color: #7733cc !important;
+    box-shadow: 0 0 0 3px #7733cc22 !important;
+    outline: none !important;
 }
-
-/* ── Sliders ── */
-.gradio-slider input[type=range] {
-    accent-color: #e94560;
+textarea::placeholder {
+    color: #443355 !important;
 }
 
-/* ── 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;
+/* Sliders */
+input[type=range] {
+    accent-color: #7733cc !important;
+    height: 4px;
 }
-.generate-btn:active {
-    transform: scale(0.98) !important;
-    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.3) !important;
+.gradio-slider {
+    background: #0f0f1a !important;
+    border: 1px solid #1e1e35 !important;
+    border-radius: 12px !important;
+    padding: 12px 14px !important;
+    margin-bottom: 8px !important;
 }
-
-/* ── Seed row ── */
-.seed-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.gradio-slider label span {
+    color: #9966cc !important;
+    font-size: 0.78em !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
 }
 
-/* ── 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;
+/* Number inputs */
+input[type=number] {
+    background: #0f0f1a !important;
+    border: 1px solid #221133 !important;
+    border-radius: 10px !important;
+    color: #d0c0ee !important;
+    font-size: 14px !important;
+    padding: 10px !important;
 }
 
-/* ── Labels ── */
-label span, .gradio-label {
-    color: #a0a0c0 !important;
+/* Checkbox */
+.gradio-checkbox {
+    background: #0f0f1a !important;
+    border: 1px solid #1e1e35 !important;
+    border-radius: 12px !important;
+    padding: 10px 14px !important;
+}
+input[type=checkbox] {
+    accent-color: #7733cc !important;
+    width: 18px !important;
+    height: 18px !important;
+}
+.gradio-checkbox label span {
+    color: #9966cc !important;
     font-size: 0.82em !important;
     font-weight: 600 !important;
+}
+
+/* Labels */
+label span {
+    color: #8855bb !important;
+    font-size: 0.78em !important;
+    font-weight: 700 !important;
     text-transform: uppercase !important;
-    letter-spacing: 0.8px !important;
+    letter-spacing: 1px !important;
 }
 
-/* ── Mobile: stack columns ── */
-@media (max-width: 768px) {
-    .gr-row { flex-direction: column !important; }
-    .gr-col { width: 100% !important; min-width: 100% !important; }
+/* Generate button */
+button.lg.primary {
+    background: linear-gradient(135deg, #7733cc 0%, #5500aa 50%, #3d007a 100%) !important;
+    border: 1px solid #9944ee !important;
+    border-radius: 16px !important;
+    color: #ffffff !important;
+    font-size: 1.05em !important;
+    font-weight: 800 !important;
+    padding: 18px !important;
+    width: 100% !important;
+    letter-spacing: 1px !important;
+    text-transform: uppercase !important;
+    box-shadow: 0 4px 24px #7733cc55 !important;
+    transition: all 0.15s ease !important;
+    margin-top: 6px !important;
 }
+button.lg.primary:hover {
+    box-shadow: 0 6px 32px #7733cc88 !important;
+    transform: translateY(-1px) !important;
+}
+button.lg.primary:active {
+    transform: scale(0.98) translateY(0) !important;
+    box-shadow: 0 2px 12px #7733cc44 !important;
+}
+
+/* Hide gradio footer */
+footer { display: none !important; }
+.built-with { display: none !important; }
 """
 
 # ── UI ────────────────────────────────────────────────────────────────────────
 with gr.Blocks(css=css, title="CyberRealistic Pony") as demo:
 
-    # Header
     gr.HTML("""
-    <div class="header-box">
+    <div class="site-header">
         <h1>🐴 CyberRealistic Pony</h1>
-        <p>SDXL · Pony Architecture · v16.0</p>
-        <span class="badge">⚠ CPU Mode — Slow</span>
+        <div class="sub">v16.0 · SDXL · Pony XL</div>
+        <div class="gpu-badge">⚡ ZeroGPU</div>
     </div>
     """)
 
-    # Output image — top on mobile so you see result first
-    with gr.Group(elem_classes="output-box"):
+    # Output — top of page so it's the first thing you see on mobile
+    with gr.Group(elem_classes="output-wrap"):
         output_image = gr.Image(
-            label="",
-            type="pil",
             show_label=False,
-            height=420,
+            type="pil",
+            height=400,
         )
 
     used_seed = gr.Number(
-        label="Seed used  —  save to reproduce",
+        label="Seed used — note this down to recreate",
         interactive=False,
-        elem_classes="used-seed",
+        elem_classes="seed-display",
     )
 
-    # ── 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.HTML('<div class="sec-head">✏️ Prompt</div>')
     prompt = gr.Textbox(
-        label="",
+        show_label=False,
         placeholder="a woman in a futuristic city, cinematic lighting, highly detailed, photorealistic",
         lines=3,
-        show_label=False,
     )
 
-    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.HTML('<div class="sec-head">🚫 Negative</div>')
     negative_prompt = gr.Textbox(
-        label="",
+        show_label=False,
         value=(
             "(worst quality:1.2), (low quality:1.2), (normal quality:1.2), "
             "lowres, bad anatomy, bad hands, signature, watermarks, "
@@ -238,38 +307,27 @@ with gr.Blocks(css=css, title="CyberRealistic Pony") as demo:
             "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>')
-
+    # Size
+    gr.HTML('<div class="sec-head">📐 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")
+        width  = gr.Slider(512, 896,  value=832, step=64, label="Width")
+        height = gr.Slider(512, 1152, value=1216, 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")
+    # Sampling
+    gr.HTML('<div class="sec-head">⚙️ Sampling</div>')
+    steps    = gr.Slider(20, 60, value=30, 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>')
-
+    # Seed
+    gr.HTML('<div class="sec-head">🎲 Seed</div>')
     with gr.Row():
-        seed           = gr.Number(label="Seed", value=42, precision=0, minimum=0, maximum=2**32-1, scale=2)
+        seed           = gr.Number(label="Seed", value=42, precision=0, minimum=0, maximum=2**32-1, scale=3)
         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",
-    )
+    generate_btn = gr.Button("⚡ Generate", variant="primary", size="lg")
 
-    # ── Wire up ──
     generate_btn.click(
         fn=generate,
         inputs=[prompt, negative_prompt, width, height, steps, guidance, seed, randomize_seed],