import gradio as gr
import time
import random
from PIL import Image
import numpy as np
# --- Custom CSS for Styling ---
CUSTOM_CSS = """
:root {
--primary: #6366f1;
--primary-dark: #4f46e5;
--secondary: #8b5cf6;
--accent: #ec4899;
--dark: #1e293b;
--darker: #0f172a;
--light: #f1f5f9;
--lighter: #f8fafc;
--text: #475569;
--border: #e2e8f0;
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--card-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/* Apply background to the main Gradio container body */
.gradio-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: var(--text);
position: relative;
padding: 0 !important;
}
/* Background pattern */
.gradio-container::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
pointer-events: none;
z-index: 1;
}
#main-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
position: relative;
z-index: 2;
}
#custom-header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--card-shadow);
animation: slideDown 0.5s ease-out;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
}
.logo-icon {
width: 50px;
height: 50px;
background: var(--gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.5rem;
}
#main-title {
font-size: 1.8rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
padding: 0;
}
.model-badge {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
#control-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2rem;
box-shadow: var(--card-shadow);
animation: slideUp 0.5s ease-out;
min-width: 300px;
}
#images-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2rem;
box-shadow: var(--card-shadow);
animation: slideUp 0.5s ease-out 0.1s both;
}
/* Target Gradio components for styling */
#prompt-box textarea {
min-height: 80px !important;
}
#prompt-box textarea, #negative-prompt-box textarea {
padding: 1rem !important;
border-radius: 12px !important;
font-size: 1rem !important;
}
#prompt-box textarea:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
#negative-prompt-box textarea {
background: var(--lighter) !important;
}
#negative-prompt-box textarea:focus {
border-color: var(--error) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
#generate-btn {
padding: 1rem 2rem;
background: var(--gradient) !important;
color: white !important;
border: none;
border-radius: 12px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-height: 60px;
}
#generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3) !important;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.panel-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--dark);
}
.image-count {
background: var(--light);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
color: var(--dark);
font-weight: 600;
}
/* Gallery styling */
#imagesGrid .gallery-item {
border-radius: 16px !important;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
#imagesGrid .gallery-item:hover {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
#main-wrapper {
padding: 1rem;
}
.main-content-row {
flex-direction: column;
}
#control-panel {
min-width: unset;
}
}
"""
# HTML for the custom header/logo section
HEADER_HTML = """
"""
# --- Mock Functionality ---
def generate_dummy_image(seed):
"""Generates a unique, colorful 512x512 PIL image to simulate output."""
np.random.seed(int(seed) % 1000)
size = 512
img_data = np.random.rand(size, size, 3) * 255
# Add some pattern based on the seed
color_shift = np.random.randint(0, 255, 3)
img_data = (img_data + color_shift) % 255
# Simple radial gradient effect
y, x = np.ogrid[-size/2:size/2, -size/2:size/2]
r = np.sqrt(x*x + y*y)
r_max = np.max(r)
r_norm = r / r_max
for i in range(3):
img_data[:, :, i] = img_data[:, :, i] * (1 - r_norm * 0.5) + 255 * r_norm * (i/3)
return Image.fromarray(img_data.astype(np.uint8))
def generate_images(prompt: str, negative_prompt: str, total_count: int):
"""
Simulates SDXL image generation, streaming progress updates.
Yields intermediate states for loading visualization.
"""
if not prompt or prompt.strip() == "":
prompt = "A majestic random scene, vibrant colors, fantasy art, volumetric light"
# 1. Immediate state update: disable button and start progress indicator
yield {
image_count_display: gr.Markdown(value='Generating...'),
generate_btn: gr.Button(interactive=False, value="Generating..."),
}
# 2. Simulate generation time with progress streaming
num_steps = 20
for i in range(num_steps):
time.sleep(0.05 + random.random() * 0.05)
progress_text = f"Generating... Step {i+1}/{num_steps} ({(i+1)/num_steps*100:.0f}%)"
yield {
image_count_display: gr.Markdown(value=f'{progress_text}')
}
# 3. Final Output Generation (4 images)
images = []
for i in range(4):
seed = time.time() + i + random.random()
img = generate_dummy_image(seed)
caption = f"Prompt: {prompt[:45]}..."
if negative_prompt and negative_prompt.strip():
caption += f" [No: {negative_prompt[:20]}...]"
images.append((img, caption))
new_total = total_count + 4
# 4. Return the final state updates
return {
output_gallery: images,
image_count_display: gr.Markdown(f'**{new_total} images** generated in total.'),
total_count: new_total,
generate_btn: gr.Button(interactive=True, value="Generate 4 Images")
}
# --- Gradio Application Definition ---
with gr.Blocks(
title="SDXL Image Generator",
css=CUSTOM_CSS,
theme=gr.themes.Soft(),
fill_height=True
) as demo:
# State to keep track of total generated images
total_count = gr.State(value=0)
# Custom Header (containing the required attribution)
gr.HTML(HEADER_HTML)
with gr.Row(elem_id="main-wrapper", elem_classes=["main-content-row"]):
# --- Control Panel (Left Column) ---
with gr.Column(scale=1, elem_id="control-panel"):
gr.Markdown("## ⚙️ Generation Settings", container=False)
# Prompt Input
prompt_input = gr.Textbox(
label="Prompt",