Update app.py

app.py

@@ -5,7 +5,7 @@ from diffusers import StableDiffusionXLPipeline, DPMSolverMultistepScheduler
 from huggingface_hub import hf_hub_download
 import random
 
-# ── Model config ──────────────────────────────────────────────────────────────
+# ── Model ─────────────────────────────────────────────────────────────────────
 MODEL_REPO = "cyberdelia/CyberRealisticPony"
 MODEL_FILE = "CyberRealisticPony_V16.0_FP16.safetensors"
 PONY_POS   = "score_9, score_8_up, score_7_up, "
@@ -14,37 +14,98 @@ PONY_NEG   = "score_6, score_5, score_4, "
 print("Downloading model...")
 local_path = hf_hub_download(repo_id=MODEL_REPO, filename=MODEL_FILE)
 print("Loading pipeline...")
-
-pipe = StableDiffusionXLPipeline.from_single_file(
-    local_path,
-    torch_dtype=torch.float16,
-)
+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()
+print("Ready.")
+
+# ── Style presets (Fooocus-style) ─────────────────────────────────────────────
+STYLES = {
+    "None": {
+        "pos": "",
+        "neg": "",
+    },
+    "📸 Photorealistic": {
+        "pos": "RAW photo, photorealistic, hyperrealistic, 8k uhd, dslr, high quality, film grain, Fujifilm XT3, sharp focus, detailed skin texture, natural lighting, ",
+        "neg": "painting, illustration, cartoon, anime, render, cgi, drawing, ",
+    },
+    "🎬 Cinematic": {
+        "pos": "cinematic shot, movie scene, dramatic lighting, shallow depth of field, anamorphic lens, film grain, color graded, professional cinematography, epic composition, ",
+        "neg": "static, flat lighting, amateur, snapshot, ",
+    },
+    "🖼️ Portrait": {
+        "pos": "professional portrait, studio lighting, bokeh background, sharp eyes, detailed face, perfect skin, 85mm lens, f/1.8, headshot, ",
+        "neg": "wide angle, fish eye, distorted face, bad eyes, cropped head, ",
+    },
+    "🌆 Neon City": {
+        "pos": "cyberpunk city, neon lights, rain reflections on pavement, night scene, atmospheric fog, vibrant colors, futuristic architecture, blade runner aesthetic, ",
+        "neg": "daytime, rural, nature, warm tones, bright sunshine, ",
+    },
+    "🎨 Oil Painting": {
+        "pos": "oil painting, impressionist, visible brushstrokes, canvas texture, artistic masterpiece, museum quality, rich colors, painted by a master, ",
+        "neg": "photo, photograph, digital art, flat colors, ",
+    },
+    "✨ Fantasy Epic": {
+        "pos": "fantasy art, epic scene, magical atmosphere, dramatic clouds, volumetric lighting, highly detailed, concept art, artstation, 4k, ",
+        "neg": "modern, contemporary, mundane, boring, flat, ",
+    },
+}
 
-# Keep on CPU at startup — ZeroGPU allocates GPU per request
-print("Pipeline ready.")
+# ── LoRA presets ──────────────────────────────────────────────────────────────
+LORAS = {
+    "None": None,
+    "✋ Perfect Hands": {
+        "repo": "WolfAether21/PONY-DIFFUSION-SDXL-LORA",
+        "file": "Perfect Hands v2.safetensors",
+        "default_strength": 0.7,
+    },
+    "🔍 Detail Enhancer": {
+        "repo": "WolfAether21/PONY-DIFFUSION-SDXL-LORA",
+        "file": "SDXL Detail.safetensors",
+        "default_strength": 0.6,
+    },
+}
 
 # ── Generation ────────────────────────────────────────────────────────────────
 @spaces.GPU(duration=180)
-def generate(prompt, negative_prompt, width, height, steps, guidance, seed, randomize):
+def generate(prompt, negative_prompt, style, lora_name, lora_strength,
+             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)
 
-    # Move to GPU for this request
+    # Build final prompt with style
+    style_data = STYLES.get(style, STYLES["None"])
+    final_pos = PONY_POS + style_data["pos"] + prompt.strip()
+    final_neg = PONY_NEG + style_data["neg"] + negative_prompt.strip()
+
+    # Move to GPU
     pipe.to("cuda")
 
+    # Load LoRA if selected
+    lora_loaded = False
+    lora_data = LORAS.get(lora_name)
+    if lora_data:
+        try:
+            lora_path = hf_hub_download(repo_id=lora_data["repo"], filename=lora_data["file"])
+            pipe.load_lora_weights(lora_path)
+            pipe.fuse_lora(lora_scale=float(lora_strength))
+            lora_loaded = True
+            print(f"LoRA loaded: {lora_name} @ {lora_strength}")
+        except Exception as e:
+            print(f"LoRA load failed, continuing without: {e}")
+
     generator = torch.Generator(device="cpu").manual_seed(seed)
 
     result = pipe(
-        prompt=PONY_POS + prompt.strip(),
-        negative_prompt=PONY_NEG + negative_prompt.strip(),
+        prompt=final_pos,
+        negative_prompt=final_neg,
         width=int(width),
         height=int(height),
         num_inference_steps=int(steps),
@@ -53,236 +114,308 @@ def generate(prompt, negative_prompt, width, height, steps, guidance, seed, rand
         clip_skip=2,
     )
 
-    # Move back to CPU to free GPU for other users
+    # Unload LoRA and free GPU
+    if lora_loaded:
+        pipe.unfuse_lora()
+        pipe.unload_lora_weights()
+
     pipe.to("cpu")
 
     return result.images[0], seed
 
 # ── CSS ───────────────────────────────────────────────────────────────────────
 css = """
-* { box-sizing: border-box; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
 body, .gradio-container {
-    background: #0a0a0f !important;
+    background: #080810 !important;
     font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
-    max-width: 520px !important;
+    max-width: 480px !important;
     margin: 0 auto !important;
+    padding: 10px !important;
 }
 
-.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: 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%);
-}
-.site-header h1 {
-    color: #ffffff;
-    font-size: 1.7em;
-    font-weight: 900;
-    margin: 0 0 4px;
-    letter-spacing: -1px;
-    position: relative;
+/* ── Top bar ── */
+.topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 4px;
+    margin-bottom: 10px;
 }
-.site-header .sub {
-    color: #9966cc;
-    font-size: 0.78em;
-    font-weight: 500;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    position: relative;
+.topbar-title {
+    color: #fff;
+    font-size: 1.0em;
+    font-weight: 800;
+    letter-spacing: -0.3px;
 }
-.gpu-badge {
-    display: inline-block;
-    background: linear-gradient(90deg, #00c853, #00e676);
+.topbar-badge {
+    background: #1aff7a;
     color: #000;
-    font-size: 0.68em;
-    font-weight: 800;
-    padding: 3px 12px;
+    font-size: 0.6em;
+    font-weight: 900;
+    padding: 3px 10px;
     border-radius: 20px;
-    margin-top: 10px;
+    letter-spacing: 1px;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
-    position: relative;
 }
 
-.output-wrap {
-    background: #0f0f1a;
-    border: 1px solid #1e1e35;
+/* ── Output image ── */
+.img-output {
+    background: #0e0e18;
+    border: 1px solid #1c1c2e;
     border-radius: 18px;
     overflow: hidden;
     margin-bottom: 10px;
-    min-height: 340px;
+    aspect-ratio: 3/4;
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 }
-.output-wrap img {
-    width: 100%;
+.img-output img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain;
     border-radius: 18px;
 }
-
-.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;
+/* Empty state placeholder */
+.img-output .empty {
+    color: #2a2a3e;
+    font-size: 3em;
 }
 
-.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;
+/* ── Prompt area ── */
+.prompt-wrap {
+    background: #0e0e18;
+    border: 1px solid #1c1c2e;
+    border-radius: 14px;
+    padding: 12px;
+    margin-bottom: 8px;
+    transition: border-color 0.2s;
+}
+.prompt-wrap:focus-within {
+    border-color: #5533aa;
 }
-.sec-head::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: linear-gradient(90deg, #331155, transparent);
+.prompt-label {
+    color: #44334a;
+    font-size: 0.65em;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    margin-bottom: 6px;
 }
 
 textarea {
-    background: #0f0f1a !important;
-    border: 1px solid #221133 !important;
-    border-radius: 12px !important;
-    color: #d0c0ee !important;
-    font-size: 15px !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    color: #c8b8e8 !important;
+    font-size: 14px !important;
     line-height: 1.5 !important;
-    padding: 12px !important;
+    padding: 0 !important;
     resize: none !important;
+    box-shadow: none !important;
+    width: 100% !important;
 }
 textarea:focus {
-    border-color: #7733cc !important;
-    box-shadow: 0 0 0 3px #7733cc22 !important;
     outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
 }
-textarea::placeholder { color: #443355 !important; }
+textarea::placeholder { color: #2e2640 !important; }
 
-input[type=range] { accent-color: #7733cc !important; }
-.gradio-slider {
-    background: #0f0f1a !important;
-    border: 1px solid #1e1e35 !important;
-    border-radius: 12px !important;
-    padding: 12px 14px !important;
-    margin-bottom: 8px !important;
+/* ── Style pills ── */
+.style-pills {
+    margin-bottom: 8px;
+}
+.style-pills .gr-radio-group {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 6px !important;
 }
-.gradio-slider label span {
-    color: #9966cc !important;
+.style-pills label {
+    background: #0e0e18 !important;
+    border: 1px solid #1c1c2e !important;
+    border-radius: 20px !important;
+    color: #7766aa !important;
+    cursor: pointer !important;
     font-size: 0.78em !important;
     font-weight: 600 !important;
+    padding: 6px 14px !important;
+    transition: all 0.15s !important;
+    white-space: nowrap !important;
+}
+.style-pills label:has(input:checked) {
+    background: #1e0e3e !important;
+    border-color: #6633cc !important;
+    color: #cc99ff !important;
+}
+.style-pills input[type=radio] { display: none !important; }
+
+/* ── Accordion ── */
+.gradio-accordion {
+    background: #0e0e18 !important;
+    border: 1px solid #1c1c2e !important;
+    border-radius: 14px !important;
+    margin-bottom: 8px !important;
+    overflow: hidden !important;
+}
+.gradio-accordion > .label-wrap {
+    padding: 12px 16px !important;
+    color: #7766aa !important;
+    font-size: 0.78em !important;
+    font-weight: 700 !important;
     text-transform: uppercase !important;
     letter-spacing: 1px !important;
 }
+.gradio-accordion > .label-wrap:hover {
+    color: #aa88ff !important;
+}
 
+/* ── Sliders ── */
+.gradio-slider {
+    padding: 4px 0 !important;
+    background: transparent !important;
+    border: none !important;
+}
+input[type=range] {
+    accent-color: #6633cc !important;
+    width: 100% !important;
+    height: 3px !important;
+}
+.gradio-slider span {
+    color: #7766aa !important;
+    font-size: 0.75em !important;
+    font-weight: 600 !important;
+}
+
+/* ── Number input ── */
 input[type=number] {
-    background: #0f0f1a !important;
-    border: 1px solid #221133 !important;
+    background: #0a0a14 !important;
+    border: 1px solid #1c1c2e !important;
     border-radius: 10px !important;
-    color: #d0c0ee !important;
-    font-size: 14px !important;
-    padding: 10px !important;
+    color: #aa88ff !important;
+    font-size: 13px !important;
+    padding: 8px 10px !important;
+    width: 100% !important;
 }
 
-.gradio-checkbox {
-    background: #0f0f1a !important;
-    border: 1px solid #1e1e35 !important;
-    border-radius: 12px !important;
-    padding: 10px 14px !important;
-}
+/* ── Checkbox ── */
 input[type=checkbox] {
-    accent-color: #7733cc !important;
-    width: 18px !important;
-    height: 18px !important;
+    accent-color: #6633cc !important;
+    width: 16px !important;
+    height: 16px !important;
 }
-
-label span {
-    color: #8855bb !important;
+.gradio-checkbox label span {
+    color: #7766aa !important;
     font-size: 0.78em !important;
-    font-weight: 700 !important;
-    text-transform: uppercase !important;
-    letter-spacing: 1px !important;
+    font-weight: 600 !important;
 }
 
-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;
+/* ── Dropdown (LoRA) ── */
+.gradio-dropdown {
+    background: #0a0a14 !important;
+    border: 1px solid #1c1c2e !important;
+    border-radius: 10px !important;
+}
+.gradio-dropdown select, .gradio-dropdown input {
+    background: transparent !important;
+    color: #aa88ff !important;
+    font-size: 13px !important;
+}
+
+/* ── Seed row ── */
+.seed-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 4px;
+}
+.seed-out input {
+    background: #0a0a14 !important;
+    border: 1px solid #111120 !important;
+    border-radius: 8px !important;
+    color: #332255 !important;
+    font-size: 0.75em !important;
+    text-align: center !important;
+    padding: 6px !important;
+}
+
+/* ── Generate button ── */
+.gen-btn button {
+    background: linear-gradient(135deg, #5522aa 0%, #3a1580 100%) !important;
+    border: 1px solid #7744cc !important;
+    border-radius: 14px !important;
+    color: #fff !important;
+    font-size: 0.95em !important;
     font-weight: 800 !important;
-    padding: 18px !important;
+    padding: 16px !important;
     width: 100% !important;
-    letter-spacing: 1px !important;
+    letter-spacing: 1.5px !important;
     text-transform: uppercase !important;
-    box-shadow: 0 4px 24px #7733cc55 !important;
-    transition: all 0.15s ease !important;
-    margin-top: 6px !important;
+    box-shadow: 0 4px 20px #5522aa44 !important;
+    transition: all 0.15s !important;
+    margin-top: 4px !important;
 }
-button.lg.primary:hover {
-    box-shadow: 0 6px 32px #7733cc88 !important;
+.gen-btn button:hover {
+    box-shadow: 0 6px 28px #5522aa88 !important;
     transform: translateY(-1px) !important;
 }
-button.lg.primary:active {
-    transform: scale(0.98) translateY(0) !important;
-    box-shadow: 0 2px 12px #7733cc44 !important;
+.gen-btn button:active {
+    transform: scale(0.98) !important;
+    box-shadow: 0 2px 10px #5522aa33 !important;
+}
+
+/* ── Labels ── */
+label > span:first-child {
+    color: #55446a !important;
+    font-size: 0.72em !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
 }
 
-footer { display: none !important; }
-.built-with { display: none !important; }
+footer, .built-with, .svelte-1ipelgc { display: none !important; }
 """
 
 # ── UI ────────────────────────────────────────────────────────────────────────
-with gr.Blocks(css=css, title="CyberRealistic Pony") as demo:
+with gr.Blocks(css=css, title="ImageGen") as demo:
 
+    # Top bar
     gr.HTML("""
-    <div class="site-header">
-        <h1>🐴 CyberRealistic Pony</h1>
-        <div class="sub">v16.0 · SDXL · Pony XL</div>
-        <div class="gpu-badge">⚡ ZeroGPU</div>
+    <div class="topbar">
+        <span class="topbar-title">🐴 CyberRealistic Pony</span>
+        <span class="topbar-badge">⚡ GPU</span>
     </div>
     """)
 
-    with gr.Group(elem_classes="output-wrap"):
-        output_image = gr.Image(
-            show_label=False,
-            type="pil",
-            height=400,
-        )
+    # Output
+    output_image = gr.Image(
+        show_label=False,
+        type="pil",
+        height=440,
+        elem_classes="img-output",
+    )
 
+    # Seed used (small, below image)
     used_seed = gr.Number(
-        label="Seed used — note this to recreate",
+        label="Last seed",
         interactive=False,
-        elem_classes="seed-display",
+        elem_classes="seed-out",
     )
 
-    gr.HTML('<div class="sec-head">✏️ Prompt</div>')
+    # Prompt
+    gr.HTML('<div class="prompt-label">Prompt</div>')
     prompt = gr.Textbox(
         show_label=False,
-        placeholder="a woman in a futuristic city, cinematic lighting, highly detailed, photorealistic",
+        placeholder="describe your image...",
         lines=3,
+        elem_classes="prompt-wrap",
     )
 
-    gr.HTML('<div class="sec-head">🚫 Negative</div>')
+    # Negative
+    gr.HTML('<div class="prompt-label" style="margin-top:8px">Negative</div>')
     negative_prompt = gr.Textbox(
         show_label=False,
         value=(
@@ -292,27 +425,52 @@ with gr.Blocks(css=css, title="CyberRealistic Pony") as demo:
             "unnatural body, error, extra limb, missing limbs"
         ),
         lines=2,
+        elem_classes="prompt-wrap",
     )
 
-    gr.HTML('<div class="sec-head">📐 Size</div>')
-    with gr.Row():
-        width  = gr.Slider(512, 896,  value=832,  step=64, label="Width")
-        height = gr.Slider(512, 1152, value=1024, step=64, label="Height")
-
-    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")
+    # Style presets
+    gr.HTML('<div class="prompt-label" style="margin-top:8px">Style</div>')
+    style = gr.Radio(
+        choices=list(STYLES.keys()),
+        value="None",
+        show_label=False,
+        elem_classes="style-pills",
+    )
 
-    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=3)
-        randomize_seed = gr.Checkbox(label="Random", value=True, scale=1)
+    # Advanced settings accordion
+    with gr.Accordion("⚙️  Advanced Settings", open=False):
+        gr.HTML('<div style="height:8px"></div>')
+
+        with gr.Row():
+            width  = gr.Slider(512, 896,  value=832,  step=64, label="Width")
+            height = gr.Slider(512, 1152, value=1024, step=64, label="Height")
+
+        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")
+
+        with gr.Row():
+            seed           = gr.Number(label="Seed", value=42, precision=0,
+                                       minimum=0, maximum=2**32-1, scale=3)
+            randomize_seed = gr.Checkbox(label="Random seed", value=True, scale=1)
+
+    # LoRA accordion
+    with gr.Accordion("🎨  LoRA", open=False):
+        gr.HTML('<div style="height:8px"></div>')
+        gr.HTML('<div style="color:#554466;font-size:0.72em;margin-bottom:10px;">Add a LoRA to tweak style or fix common issues like hands.</div>')
+        lora_name     = gr.Dropdown(
+            choices=list(LORAS.keys()),
+            value="None",
+            label="LoRA",
+        )
+        lora_strength = gr.Slider(0.1, 1.0, value=0.7, step=0.05, label="LoRA Strength")
 
-    generate_btn = gr.Button("⚡ Generate", variant="primary", size="lg")
+    # Generate
+    generate_btn = gr.Button("Generate ✦", variant="primary", size="lg", elem_classes="gen-btn")
 
     generate_btn.click(
         fn=generate,
-        inputs=[prompt, negative_prompt, width, height, steps, guidance, seed, randomize_seed],
+        inputs=[prompt, negative_prompt, style, lora_name, lora_strength,
+                width, height, steps, guidance, seed, randomize_seed],
         outputs=[output_image, used_seed],
     )