application files

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/build/examples/*.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,12 +0,0 @@
----
-title: Wallgen
-emoji: 📈
-colorFrom: pink
-colorTo: purple
-sdk: docker
-pinned: false
-license: other
-short_description: wallpaper generation using diffusion models
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1 @@
+from backend.main import app

backend/main.py

@@ -0,0 +1,224 @@
+from fastapi import FastAPI
+from fastapi.responses import JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+import torch
+import uvicorn
+from fastapi.staticfiles import StaticFiles
+from diffusers import StableDiffusionPipeline, LCMScheduler
+from PIL import Image
+import numpy as np
+from sklearn.cluster import KMeans
+import random
+import io
+import base64
+from typing import Optional
+import os
+from fastapi.staticfiles import StaticFiles
+
+
+
+print("Model will load on first request...")
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+# Force CPU in Docker container for consistency
+device = "cpu" if os.getenv("DOCKER_CONTAINER", False) else ("cuda" if torch.cuda.is_available() else "cpu")
+MODEL_CACHE_DIR = os.getenv("MODEL_CACHE_DIR", os.path.abspath(os.path.join(BASE_DIR, "..", "models")))
+pipe = None  # lazy-loaded on first generation request
+
+def load_pipeline():
+    global pipe
+    if pipe is not None:
+        return pipe
+
+    print("Loading model into memory...")
+    local_device = "cuda" if torch.cuda.is_available() else "cpu"
+
+    # Directly load from Hugging Face Hub, safetensors by default (no .bin)
+    p = StableDiffusionPipeline.from_pretrained(
+        "SimianLuo/LCM_Dreamshaper_v7",
+        torch_dtype=torch.float16,
+        safety_checker=None,
+        requires_safety_checker=False,
+        low_cpu_mem_usage=True,
+        # cache_sir = "../models"
+    )
+
+    p.scheduler = LCMScheduler.from_config(p.scheduler.config)
+    p = p.to(local_device)
+    if local_device == "cuda":
+        p.enable_model_cpu_offload()
+    else:
+        p.enable_attention_slicing()
+    pipe = p
+    print("Model has been loaded successfully!")
+    return pipe
+
+
+def extract_colors(image: Image.Image, num_colors=6):
+    img_array = np.array(image)
+    pixels = img_array.reshape(-1, 3)
+    kmeans = KMeans(n_clusters=num_colors, random_state=42, n_init=10)
+    kmeans.fit(pixels)
+    colors = kmeans.cluster_centers_.astype(int)
+    hex_colors = ['#{:02x}{:02x}{:02x}'.format(r, g, b) for r, g, b in colors]
+    return hex_colors
+
+def resize_image(image: Image.Image, width: int, height: int):
+    return image.resize((width, height), Image.Resampling.LANCZOS)
+
+app = FastAPI()
+app.mount("/", StaticFiles(directory="../frontend/build", html=True), name="static")
+
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], 
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class GenerationRequest(BaseModel):
+    style: str = "Gradient"
+    seed: int = 42
+    resolution: str = "Desktop (1920x1080)"
+    steps: int = 4
+    color: Optional[str] = None
+
+@app.post("/generate-wallpaper/")
+async def generate_wallpaper_endpoint(request: GenerationRequest):
+    prompts = {
+        "Geometric": "sharp geometric patterns, triangular tessellations, hexagonal grids, precise angular shapes, colorful polygon arrangements, geometric mandala designs, crystalline symmetric patterns, abstract mathematical forms, vector art precision, clean geometric compositions, bright geometric color blocks, structured pattern design, 8k wallpaper",
+        
+        "Organic": "flowing organic forms, silky fluid textures, soft ethereal lighting, high-detail depth, oil painting feel, zen abstract design, bioluminescent flowing lines, translucent silk ribbons, watercolor blending, natural formations",
+        
+        "Vibrant": "futuristic neon shapes, cyberpunk color palette, dark background, glowing fractals, high contrast, vivid reflections, neon geometric patterns, electric plasma effects, holographic surfaces, laser light trails, ultra bright colors",
+        
+        "Minimal": "watercolor drops on white canvas, circular water color spots, bright colored water drops spreading on paper, wet watercolor bleeding circles, vibrant color drops with soft edges, colorful water stains on clean background, translucent watercolor circles, artistic water drops pattern, high contrast bright drops, clean minimalist watercolor design",
+        
+        "Ink Flow": "flowing liquid ink patterns, organic ink bleeds, watercolor paint flows, dynamic brush strokes, fluid color transitions, ink spreading on wet paper, abstract paint movements, colorful ink drops merging, artistic liquid patterns, paint flow dynamics",
+        
+        "Gradient": "smooth color gradients, organic flowing waves, ethereal abstract patterns, bright vivid color transitions, watercolor style blending, soft gradient meshes, flowing energy patterns, color field painting, seamless color flows, high resolution gradients",
+        
+        "Crystal": "high-resolution crystal surfaces, prism reflections, iridescent colors, shattered glass texture, futuristic diamond shapes, cinematic lighting, dichroic glass effects, crystalline structures, refracting light patterns",
+        
+        "Retro Wave": "synthwave aesthetic, neon grid lines, 1980s retro futuristic, purple pink gradients, chrome reflections, vintage synthesizer vibes, outrun highway aesthetic, neon palm trees, retrowave sunset",
+        
+        "Botanical": "botanical illustrations, detailed leaves and flowers, vintage naturalist style, earth tones, Art Nouveau vine patterns, organic plant geometry, natural forms, herbarium specimens, botanical cross-sections",
+        
+        "Space Cosmic": "deep space nebula, cosmic dust clouds, distant galaxies, purple blue cosmic colors, stellar formations, aurora borealis patterns, cosmic energy flows, nebula formations, space photography aesthetic",
+        
+        "Psychedelic": "trippy psychedelic patterns, kaleidoscope effects, vibrant swirling colors, mind-bending fractals, mandala patterns, liquid light shows, synesthetic color flows, geometric portals, infinite pattern recursion",
+        
+        "Industrial": "metal textures, rust patterns, industrial materials, concrete and steel aesthetics, weathered surfaces, industrial photography, high contrast lighting, urban decay patterns, metallic reflections",
+        
+        "Fractal": "complex fractal spirals, infinite zoom illusion, glowing edges, depth of field blur, mathematical precision, cosmic art, Mandelbrot-inspired structure"
+    }
+
+    resolutions = {
+        "Mobile Portrait (1080x1920)": (1080, 1920),
+        "Desktop (1920x1080)": (1920, 1080),
+        "Square (1080x1080)": (1080, 1080),
+        "Ultrawide (2560x1080)": (2560, 1080),
+        "4K Desktop (3840x2160)": (3840, 2160),
+    }
+
+    base_prompt = prompts.get(request.style, prompts["Gradient"])
+    
+    # Add quality enhancers and style variations
+    quality_modifiers = [
+        "masterpiece", "best quality", "ultra-detailed", "8k resolution", 
+        "professional", "award-winning", "trending on artstation", "highly detailed"
+    ]
+    
+    # Randomly select 2-3 quality modifiers to add variety
+    selected_modifiers = random.sample(quality_modifiers, k=random.randint(2, 3))
+    
+    # Build the final prompt with variations
+    final_prompt = f"{base_prompt}, {', '.join(selected_modifiers)}"
+    
+    # Add artistic style variations occasionally
+    if random.random() > 0.7:
+        artistic_styles = [
+            "oil painting style", "digital art", "photorealistic", "concept art",
+            "matte painting", "volumetric lighting", "ray tracing", "octane render"
+        ]
+        final_prompt += f", {random.choice(artistic_styles)}"
+    
+    # Add composition variations
+    if random.random() > 0.6:
+        compositions = [
+            "rule of thirds", "golden ratio composition", "symmetrical balance",
+            "dynamic composition", "centered composition", "diagonal flow"
+        ]
+        final_prompt += f", {random.choice(compositions)}"
+    
+    if request.color and request.color.strip():
+        # Enhanced color integration
+        color_integration = random.choice([
+            f"dominated by {request.color.strip()} tones",
+            f"featuring prominent {request.color.strip()} accents",
+            f"with {request.color.strip()} color palette",
+            f"infused with {request.color.strip()} hues",
+            f"{request.color.strip()} color harmony"
+        ])
+        final_prompt += f", {color_integration}"
+    
+    # Add negative prompt to avoid common issues and maintain abstract focus
+    negative_prompt = "low quality, blurry, pixelated, watermark, text, logo, signature, artifacts, distorted, people, person, human, face, car, vehicle, building, realistic objects, photography, portrait, landscape"
+
+    try:
+        # Set seed
+        torch.manual_seed(request.seed)
+        if torch.cuda.is_available():
+            torch.cuda.manual_seed(request.seed)
+
+        # Generate base image
+        # Ensure pipeline is loaded lazily
+        p = load_pipeline()
+        with torch.no_grad():
+            base_image = p(
+                final_prompt,
+                num_inference_steps=request.steps,
+                guidance_scale=1.0,
+                negative_prompt=negative_prompt,
+                height=512,
+                width=512
+            ).images[0]
+
+        # Resize image
+        target_width, target_height = resolutions.get(request.resolution, (1920, 1080))
+        resized_image = resize_image(base_image, target_width, target_height)
+
+        # Extract colors
+        colors = extract_colors(resized_image)
+
+        # Convert image to Base64 string to send via JSON
+        buffered = io.BytesIO()
+        resized_image.save(buffered, format="PNG")
+        img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
+
+        return JSONResponse(content={
+            "image": f"data:image/png;base64,{img_str}",
+            "palette": colors,
+            "seed": request.seed,
+            "style": request.style,
+            "steps": request.steps,
+            "resolution": f"{target_width}x{target_height}"
+        })
+    except Exception as e:
+        print(f"Error during generation: {e}")
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+@app.get("/random-seed/")
+async def random_seed_endpoint():
+    return {"seed": random.randint(1, 999999)}
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "message": "AI Wallpaper Generator API is running"}
+
+if __name__ == "__main__":
+    port = int(os.getenv("PORT", 8000))
+    print("Starting AI Wallpaper Generator API...")
+    uvicorn.run(app, host="0.0.0.0", port=port)

frontend/build/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Wallpaper Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="particles-container" id="particles"></div>
+    
+    <div id="background-container"></div>
+     </div>
+
+    <div class="main-content">
+        <header>
+            <h1>AI Wallpaper Generator</h1>
+            <p id="tagline"></p>
+        </header>
+
+        <main>
+            <div class="controls">
+                <div class="control-group">
+                    <label for="style-select">Style</label>
+                    <select id="style-select">
+                        <option value="Geometric">Geometric</option>
+                        <option value="Organic">Organic</option>
+                        <option value="Vibrant">Vibrant</option>
+                        <option value="Minimal">Minimal</option>
+                        <option value="Ink Flow">Ink Flow</option>
+                        <option value="Gradient" selected>Gradient</option>
+                        <option value="Crystal">Crystal</option>
+                        <option value="Retro Wave">Retro Wave</option>
+                        <option value="Botanical">Botanical</option>
+                        <option value="Space Cosmic">Space Cosmic</option>
+                        <option value="Psychedelic">Psychedelic</option>
+                        <option value="Industrial">Industrial</option>
+                    </select>
+                </div>
+                
+                <div class="control-group">
+                    <label for="color-input">Color Influence</label>
+                    <input type="text" id="color-input" placeholder="e.g., pastel pink, dark green">
+                </div>
+                
+                <div class="control-group">
+                    <label for="resolution-select">Resolution</label>
+                    <select id="resolution-select">
+                        <option value="Desktop (1920x1080)">Desktop (1920x1080)</option>
+                        <option value="Mobile Portrait (1080x1920)">Mobile Portrait (1080x1920)</option>
+                        <option value="Square (1080x1080)">Square (1080x1080)</option>
+                        <option value="Ultrawide (2560x1080)">Ultrawide (2560x1080)</option>
+                        <option value="4K Desktop (3840x2160)">4K Desktop (3840x2160)</option>
+                    </select>
+                </div>
+                
+                <div class="control-group">
+                    <label for="seed-input">Seed</label>
+                    <div class="seed-wrapper">
+                        <input type="number" id="seed-input" value="42">
+                        <button id="random-seed-btn" title="Randomize Seed">🎲</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="action-buttons">
+                <button id="generate-btn"> Generate</button>
+                <button id="surprise-btn"> Surprise Me</button>
+            </div>
+
+            <div class="output">
+                <div id="status-display" class="status">Click Generate to start!</div>
+                <div id="loader" class="hidden"></div>
+                <img id="result-image" src="" alt="Generated Wallpaper" class="hidden">
+                
+                <div id="post-generation-tools" class="hidden">
+                    <button id="copy-seed-btn" title="Copy Seed">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                        </svg>
+                        <span id="copy-seed-feedback">Copy Seed</span>
+                    </button>
+                    <button id="download-btn" title="Download Wallpaper">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                        <span>Download</span>
+                    </button>
+                </div>
+
+                <div id="palette-container"></div>
+            </div>
+        </main>
+    </div>
+
+    <section id="recent-creations" class="hidden">
+        <h2>Recent Creations</h2>
+        <div id="recent-gallery" class="hide-scrollbar"></div>
+    </section>
+
+    <div class="side-text">
+        <span>&copy; 2025 Wallbeauti | AI Wallpaper Generator</span>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

frontend/build/script.js

@@ -0,0 +1,487 @@
+
+document.addEventListener('DOMContentLoaded', () => {
+    const elements = {
+        generateBtn: document.getElementById('generate-btn'),
+        surpriseBtn: document.getElementById('surprise-btn'),
+        randomSeedBtn: document.getElementById('random-seed-btn'),
+        resultImage: document.getElementById('result-image'),
+        paletteContainer: document.getElementById('palette-container'),
+        loader: document.getElementById('loader'),
+        backgroundContainer: document.getElementById('background-container'),
+        statusDisplay: document.getElementById('status-display'),
+        styleSelect: document.getElementById('style-select'),
+        seedInput: document.getElementById('seed-input'),
+        colorInput: document.getElementById('color-input'),
+        postGenerationTools: document.getElementById('post-generation-tools'),
+        copySeedBtn: document.getElementById('copy-seed-btn'),
+        downloadBtn: document.getElementById('download-btn'),
+        copySeedFeedback: document.getElementById('copy-seed-feedback'),
+        tagline: document.getElementById('tagline'),
+        recentCreationsSection: document.getElementById('recent-creations'),
+        recentGallery: document.getElementById('recent-gallery'),
+        particlesContainer: document.getElementById('particles'),
+    };
+
+    // API URL for your Python backend
+    const API_URL = '';
+
+    // const API_URL = 'http://127.0.0.1:8000';
+
+    // State Variables
+    let backgroundImages = [];
+    let recentCreations = [];
+    let statusInterval;
+    const MAX_BG_IMAGES = 6;
+    const MAX_RECENTS = 4;
+
+    // Preloaded example images for floating background
+    const EXAMPLE_IMAGES = [
+        'examples/img1.png',
+        'examples/img2.png',
+        'examples/img3.png',
+        'examples/img4.png',
+        'examples/img5.png',
+        'examples/img6.png',
+    ];
+
+    // Enhanced Particles System
+    function createParticles() {
+        const colors = ['#4D6473', '#A58A73', '#B59B67', '#F4C2C2', '#E6CFC1'];
+        for (let i = 0; i < 20; i++) {
+            const particle = document.createElement('div');
+            particle.className = 'particle';
+            particle.style.width = Math.random() * 8 + 4 + 'px';
+            particle.style.height = particle.style.width;
+            particle.style.left = Math.random() * 100 + '%';
+            particle.style.top = Math.random() * 100 + '%';
+            particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+            particle.style.animationDelay = Math.random() * 15 + 's';
+            particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
+            elements.particlesContainer.appendChild(particle);
+        }
+    }
+
+    // Enhanced Typing Animation
+    function typeText(element, text, speed = 100) {
+        let i = 0;
+        element.innerHTML = "";
+        const typing = setInterval(() => {
+            if (i < text.length) {
+                element.innerHTML += text.charAt(i);
+                i++;
+            } else {
+                clearInterval(typing);
+                setTimeout(() => {
+                    element.style.textShadow = '0 0 20px rgba(77, 100, 115, 0.5)';
+                    setTimeout(() => {
+                        element.style.textShadow = 'none';
+                    }, 1000);
+                }, 500);
+            }
+        }, speed);
+    }
+
+    // Enhanced Floating Background Logic
+    function addFloatingImage(imageUrl) {
+        const img = document.createElement('img');
+        img.src = imageUrl;
+        img.className = 'floating-bg';
+        if (backgroundImages.length >= MAX_BG_IMAGES) {
+            const oldImg = backgroundImages.shift();
+            oldImg.style.opacity = '0';
+            oldImg.style.transform = 'scale(0.8)';
+            setTimeout(() => oldImg.remove(), 1000);
+        }
+        const size = Math.random() * 180 + 120;
+        img.style.width = `${size}px`;
+        img.style.height = 'auto';
+        img.style.top = `${Math.random() * 80 + 10}%`;
+        img.style.left = `${Math.random() * 80 + 10}%`;
+        img.style.animationDuration = `${Math.random() * 15 + 20}s`;
+        img.style.zIndex = Math.floor(Math.random() * 3) + 1;
+        elements.backgroundContainer.appendChild(img);
+        backgroundImages.push(img);
+    }
+
+    function addFloatingImageFromExamples() {
+        const imageUrl = EXAMPLE_IMAGES[Math.floor(Math.random() * EXAMPLE_IMAGES.length)];
+        addFloatingImage(imageUrl);
+    }
+
+    function addFloatingImageAt(imageUrl, topPercent, leftPercent, cellWPercent) {
+        const img = document.createElement('img');
+        img.src = imageUrl;
+        img.className = 'floating-bg';
+
+        if (backgroundImages.length >= MAX_BG_IMAGES) {
+            const oldImg = backgroundImages.shift();
+            oldImg.style.opacity = '0';
+            oldImg.style.transform = 'scale(0.8)';
+            setTimeout(() => oldImg.remove(), 1000);
+        }
+
+        // Size scaled to cell width for better spacing
+        const cellWidthPx = window.innerWidth * (cellWPercent / 100);
+        const targetWidth = Math.max(120, Math.min(220, cellWidthPx * 0.6));
+        img.style.width = `${Math.round(targetWidth)}px`;
+        img.style.height = 'auto';
+
+        // track percent positions for later adjustment
+        img.dataset.topPercent = String(topPercent);
+        img.dataset.leftPercent = String(leftPercent);
+        img.style.top = `${topPercent}%`;
+        img.style.left = `${leftPercent}%`;
+        img.style.animationDuration = `${Math.random() * 15 + 20}s`;
+        img.style.zIndex = Math.floor(Math.random() * 3) + 1;
+
+        elements.backgroundContainer.appendChild(img);
+
+        // After the image has dimensions, nudge it so no more than 50% is under the controls card
+        if (img.complete) {
+            adjustToAvoidControls(img, 8);
+        } else {
+            img.addEventListener('load', () => adjustToAvoidControls(img, 8), { once: true });
+        }
+
+        backgroundImages.push(img);
+    }
+
+    function computeEvenPositions(count, margin = 8) {
+        const cols = Math.ceil(Math.sqrt(count));
+        const rows = Math.ceil(count / cols);
+        const availableW = 100 - 2 * margin;
+        const availableH = 100 - 2 * margin;
+        const cellW = availableW / cols;
+        const cellH = availableH / rows;
+        const positions = [];
+        for (let i = 0; i < count; i++) {
+            const r = Math.floor(i / cols);
+            const c = i % cols;
+            let top = margin + (r + 0.5) * cellH;
+            let left = margin + (c + 0.5) * cellW;
+            const jitterX = (Math.random() - 0.5) * cellW * 0.3;
+            const jitterY = (Math.random() - 0.5) * cellH * 0.3;
+            top += jitterY;
+            left += jitterX;
+            top = Math.max(margin, Math.min(100 - margin, top));
+            left = Math.max(margin, Math.min(100 - margin, left));
+            positions.push({ top, left });
+        }
+        return { positions, cellW, cellH, rows, cols };
+    }
+
+    function computeOverlapArea(r1, r2) {
+        const x = Math.max(0, Math.min(r1.right, r2.right) - Math.max(r1.left, r2.left));
+        const y = Math.max(0, Math.min(r1.bottom, r2.bottom) - Math.max(r1.top, r2.top));
+        return x * y;
+    }
+
+    function adjustToAvoidControls(img, margin = 8) {
+        const controls = document.querySelector('.controls');
+        if (!controls) return;
+
+        const clamp = (val, min, max) => Math.max(min, Math.min(max, val));
+        let topP = parseFloat(img.dataset.topPercent || '50');
+        let leftP = parseFloat(img.dataset.leftPercent || '50');
+
+        const step = 3; // percent per nudge
+        const maxTries = 25;
+
+        for (let i = 0; i < maxTries; i++) {
+            const imgRect = img.getBoundingClientRect();
+            const ctrlRect = controls.getBoundingClientRect();
+            const imgArea = imgRect.width * imgRect.height;
+            if (!imgArea) break;
+
+            const overlap = computeOverlapArea(imgRect, ctrlRect);
+            const ratio = overlap / imgArea;
+            if (ratio <= 0.5) break; // acceptable
+
+            const cx = ctrlRect.left + ctrlRect.width / 2;
+            const cy = ctrlRect.top + ctrlRect.height / 2;
+            const ix = imgRect.left + imgRect.width / 2;
+            const iy = imgRect.top + imgRect.height / 2;
+
+            const overlapW = Math.max(0, Math.min(imgRect.right, ctrlRect.right) - Math.max(imgRect.left, ctrlRect.left));
+            const overlapH = Math.max(0, Math.min(imgRect.bottom, ctrlRect.bottom) - Math.max(imgRect.top, ctrlRect.top));
+
+            if (overlapW >= overlapH) {
+                const dir = ix < cx ? -1 : 1; // move away horizontally
+                leftP = clamp(leftP + dir * step, margin, 100 - margin);
+            } else {
+                const dir = iy < cy ? -1 : 1; // move away vertically
+                topP = clamp(topP + dir * step, margin, 100 - margin);
+            }
+
+            img.dataset.topPercent = String(topP);
+            img.dataset.leftPercent = String(leftP);
+            img.style.top = `${topP}%`;
+            img.style.left = `${leftP}%`;
+        }
+    }
+
+    // Enhanced Status Messages
+    function startStatusUpdates() {
+        const messages = [
+            " Mixing digital paint...",
+            " Consulting the AI muse...",
+            " Channeling creative energy...",
+            " Weaving visual magic...",
+            " Launching imagination...",
+            " Almost there..."
+        ];
+        let msgIndex = 0;
+        elements.statusDisplay.textContent = messages[msgIndex];
+        statusInterval = setInterval(() => {
+            msgIndex = (msgIndex + 1) % messages.length;
+            elements.statusDisplay.textContent = messages[msgIndex];
+        }, 2500);
+    }
+
+    function stopStatusUpdates(finalMessage) {
+        clearInterval(statusInterval);
+        elements.statusDisplay.textContent = finalMessage;
+        elements.statusDisplay.style.transform = 'scale(1.1)';
+        elements.statusDisplay.style.color = '#4D6473';
+        setTimeout(() => {
+            elements.statusDisplay.style.transform = 'scale(1)';
+            elements.statusDisplay.style.color = '';
+        }, 300);
+    }
+
+    // Enhanced Recent Creations
+    function renderRecents() {
+        if (recentCreations.length === 0) return;
+        elements.recentGallery.innerHTML = "";
+        recentCreations.forEach((creation, index) => {
+            const img = document.createElement('img');
+            img.src = creation.src;
+            img.title = `Style: ${creation.style}, Seed: ${creation.seed}`;
+            img.style.animationDelay = `${index * 0.1}s`;
+            img.addEventListener('click', () => {
+                elements.styleSelect.value = creation.style;
+                elements.seedInput.value = creation.seed;
+                elements.colorInput.value = creation.color || "";
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+                elements.styleSelect.style.boxShadow = '0 0 20px rgba(77, 100, 115, 0.5)';
+                setTimeout(() => {
+                    elements.styleSelect.style.boxShadow = '';
+                }, 2000);
+            });
+            elements.recentGallery.appendChild(img);
+        });
+        elements.recentCreationsSection.classList.remove('hidden');
+    }
+
+    // Enhanced Color Palette Display
+    function displayColorPalette(colors) {
+        elements.paletteContainer.innerHTML = '';
+        colors.forEach((color, index) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'color-swatch-wrapper';
+            wrapper.style.animationDelay = `${index * 0.1}s`;
+            const swatch = document.createElement('div');
+            swatch.className = 'color-swatch';
+            swatch.style.backgroundColor = color;
+            const hexCode = document.createElement('span');
+            hexCode.className = 'hex-code';
+            hexCode.textContent = color;
+            swatch.addEventListener('click', () => {
+                navigator.clipboard.writeText(color).then(() => {
+                    hexCode.textContent = 'Copied!';
+                    swatch.style.transform = 'scale(1.3) rotate(10deg)';
+                    setTimeout(() => {
+                        hexCode.textContent = color;
+                        swatch.style.transform = '';
+                    }, 1500);
+                });
+            });
+            wrapper.appendChild(swatch);
+            wrapper.appendChild(hexCode);
+            elements.paletteContainer.appendChild(wrapper);
+        });
+    }
+
+    // **UPDATED** Generation Function with actual API call
+    async function performGeneration() {
+        elements.loader.classList.remove('hidden');
+        elements.resultImage.classList.add('hidden');
+        elements.paletteContainer.innerHTML = '';
+        elements.generateBtn.disabled = true;
+        elements.surpriseBtn.disabled = true;
+        elements.postGenerationTools.classList.add('hidden');
+        startStatusUpdates();
+
+        const generationData = {
+            style: elements.styleSelect.value,
+            resolution: document.getElementById('resolution-select').value,
+            seed: parseInt(elements.seedInput.value, 10),
+            color: elements.colorInput.value,
+            steps: 4,
+        };
+
+        try {
+            const response = await fetch(`${API_URL}/generate-wallpaper/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(generationData),
+            });
+
+            if (!response.ok) {
+                throw new Error(`Server error! Status: ${response.status}`);
+            }
+
+            const data = await response.json();
+
+            // Display result
+            elements.resultImage.src = data.image;
+            elements.resultImage.classList.remove('hidden');
+
+
+            // Show tools and palette
+            elements.postGenerationTools.classList.remove('hidden');
+            displayColorPalette(data.palette);
+
+            // Add to recents
+            recentCreations.unshift({ ...generationData,
+                src: data.image
+            });
+            if (recentCreations.length > MAX_RECENTS) {
+                recentCreations.pop();
+            }
+            renderRecents();
+
+            stopStatusUpdates(' Masterpiece created!');
+
+        } catch (error) {
+            console.error('Generation failed:', error);
+            stopStatusUpdates(`Error: ${error.message}`);
+        } finally {
+            elements.loader.classList.add('hidden');
+            elements.generateBtn.disabled = false;
+            elements.surpriseBtn.disabled = false;
+        }
+    }
+
+    // **UPDATED** Random Seed Generator with actual API call
+    async function updateRandomSeed() {
+        try {
+            const response = await fetch(`${API_URL}/random-seed/`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch seed from server.');
+            }
+            const data = await response.json();
+            elements.seedInput.value = data.seed;
+
+            // Visual feedback
+            elements.seedInput.style.background = 'rgba(77, 100, 115, 0.2)';
+            setTimeout(() => {
+                elements.seedInput.style.background = '';
+            }, 500);
+
+        } catch (error) {
+            console.error('Failed to get random seed:', error);
+            elements.seedInput.value = Math.floor(Math.random() * 999999);
+        }
+    }
+
+    elements.generateBtn.addEventListener('click', performGeneration);
+    elements.randomSeedBtn.addEventListener('click', updateRandomSeed);
+
+    elements.surpriseBtn.addEventListener('click', async () => {
+        const options = elements.styleSelect.options;
+        const randomIndex = Math.floor(Math.random() * options.length);
+        elements.styleSelect.value = options[randomIndex].value;
+        elements.colorInput.value = "";
+        await updateRandomSeed();
+        elements.surpriseBtn.style.transform = 'rotate(360deg)';
+        setTimeout(() => {
+            elements.surpriseBtn.style.transform = '';
+            performGeneration();
+        }, 500);
+    });
+
+    elements.copySeedBtn.addEventListener('click', () => {
+        const seedValue = elements.seedInput.value;
+        navigator.clipboard.writeText(seedValue).then(() => {
+            elements.copySeedFeedback.textContent = 'Copied!';
+            elements.copySeedBtn.style.background = 'rgba(77, 100, 115, 0.3)';
+            setTimeout(() => {
+                elements.copySeedFeedback.textContent = 'Copy Seed';
+                elements.copySeedBtn.style.background = '';
+            }, 2000);
+        });
+    });
+
+    elements.downloadBtn.addEventListener('click', () => {
+        if (!elements.resultImage.src || elements.resultImage.src.startsWith('http')) return;
+        const link = document.createElement('a');
+        link.href = elements.resultImage.src;
+        const style = elements.styleSelect.value.replace(/\s+/g, '-').toLowerCase();
+        const seed = elements.seedInput.value;
+        link.download = `wallpaper-${style}-${seed}.png`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        elements.downloadBtn.style.transform = 'scale(1.1)';
+        setTimeout(() => {
+            elements.downloadBtn.style.transform = '';
+        }, 200);
+    });
+
+    // Enhanced Input Interactions
+    [elements.styleSelect, elements.colorInput, elements.seedInput].forEach(input => {
+        input.addEventListener('focus', (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+        });
+        input.addEventListener('blur', (e) => {
+            e.target.style.transform = '';
+        });
+    });
+
+    // Initialize Everything
+    createParticles();
+    typeText(elements.tagline, "Create unique, high-resolution wallpapers with AI magic ");
+    if (typeof initThemeSelector === 'function') {
+        initThemeSelector();
+    }
+
+    // Compute an even spread layout and seed images
+    const layout = computeEvenPositions(EXAMPLE_IMAGES.length, 8);
+    EXAMPLE_IMAGES.forEach((src, i) => {
+        const pos = layout.positions[i];
+        setTimeout(() => addFloatingImageAt(src, pos.top, pos.left, layout.cellW), i * 400);
+    });
+
+    // Keep floating background anchored during scroll (no parallax)
+    window.addEventListener('scroll', () => {
+        elements.backgroundContainer.style.transform = 'translateY(0)';
+    });
+
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey || e.metaKey) {
+            switch (e.key) {
+                case 'Enter':
+                    e.preventDefault();
+                    performGeneration();
+                    break;
+                case 'r':
+                    e.preventDefault();
+                    updateRandomSeed();
+                    break;
+                case 's':
+                    e.preventDefault();
+                    elements.surpriseBtn.click();
+                    break;
+            }
+        }
+    });
+
+    console.log('AI Wallpaper Generator initialized successfully!');
+});

frontend/build/style.css

@@ -0,0 +1,626 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+    :root {
+        /* Enhanced Color Palette */
+        --cream-light: #FAF7F3;
+        --cream-medium: #F5EDE6;
+        --cream-dark: #EBD9CA;
+        --sage-light: #E9EAE5;
+        --sage-medium: #D4D6CE;
+        --sage-dark: #3B3F3A;
+        --slate-blue: #4D6473;
+        --slate-dark: #3C505C;
+        --warm-brown: #A58A73;
+        --golden-brown: #B59B67;
+        --accent-coral: #F4C2C2;
+        --accent-pink: #FFB7C5;
+        --accent-red: #E52B50;
+        
+        /* Dynamic Variables */
+        --text-primary: #3E3B39;
+        --text-light: #f0f0f0;
+        --glass-bg: rgba(255, 255, 255, 0.15);
+        --glass-border: rgba(255, 255, 255, 0.3);
+        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
+        --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+        font-family: 'Inter', sans-serif;
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        background: linear-gradient(
+            135deg,
+            var(--cream-light) 0%,
+            var(--sage-light) 25%,
+            var(--cream-medium) 50%,
+            var(--warm-brown) 75%,
+            var(--slate-blue) 100%
+        );
+        background-size: 400% 400%;
+        animation: gradientFlow 20s ease infinite;
+        min-height: 100vh;
+        color: var(--text-primary);
+        position: relative;
+    }
+    html::-webkit-scrollbar {
+    display: none;
+}
+
+    @keyframes gradientFlow {
+        0%, 100% { background-position: 0% 50%; }
+        25% { background-position: 100% 50%; }
+        50% { background-position: 50% 100%; }
+        75% { background-position: 0% 0%; }
+    }
+
+    .particles-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    .particle {
+        position: absolute;
+        border-radius: 50%;
+        opacity: 0.6;
+        animation: float 15s infinite ease-in-out;
+    }
+
+    @keyframes float {
+        0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
+        25% { transform: translateY(-20px) rotate(90deg); opacity: 0.8; }
+        50% { transform: translateY(-40px) rotate(180deg); opacity: 0.5; }
+        75% { transform: translateY(-20px) rotate(270deg); opacity: 0.7; }
+    }
+
+    /* Floating Background Images */
+    #background-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    .floating-bg {
+        position: absolute;
+        border-radius: 16px;
+        opacity: 0;
+        box-shadow: var(--shadow-soft);
+        border: 2px solid var(--glass-border);
+        filter: blur(1px);
+        animation: subtleFloat 30s infinite ease-in-out alternate;
+        transition: all 0.5s ease;
+    }
+
+    @keyframes subtleFloat {
+        0% { 
+            transform: translateY(30px) rotate(-3deg) scale(0.9); 
+            opacity: 0; 
+        }
+        15% { opacity: 0.4; }
+        85% { opacity: 0.6; }
+        100% { 
+            transform: translateY(-30px) rotate(5deg) scale(1.05); 
+            opacity: 0; 
+        }
+    }
+
+    /* Main Content */
+    .main-content {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-height: 100vh;
+        padding: 2rem;
+    }
+
+    /* Enhanced Header */
+    header {
+        text-align: center;
+        margin-bottom: 3rem;
+        position: relative;
+    }
+
+    header::before {
+        content: '';
+        position: absolute;
+        top: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100px;
+        height: 4px;
+        background: linear-gradient(90deg, var(--slate-blue), var(--golden-brown), var(--accent-coral));
+        border-radius: 2px;
+        animation: headerAccent 3s ease infinite;
+    }
+
+    @keyframes headerAccent {
+        0%, 100% { width: 100px; opacity: 0.7; }
+        50% { width: 150px; opacity: 1; }
+    }
+
+    h1 {
+        font-size: clamp(2rem, 5vw, 3.5rem);
+        font-weight: 700;
+        margin: 0.5rem 0;
+        background: linear-gradient(
+            135deg,
+            var(--slate-blue) 0%,
+            var(--warm-brown) 30%,
+            var(--golden-brown) 60%,
+            var(--slate-dark) 100%
+        );
+        background-size: 200% auto;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        animation: textGradient 8s linear infinite;
+        text-shadow: 0 0 30px rgba(77, 100, 115, 0.3);
+    }
+
+    @keyframes textGradient {
+        0% { background-position: 0% center; }
+        100% { background-position: 200% center; }
+    }
+
+    #tagline {
+        font-size: 1.2rem;
+        font-weight: 400;
+        color: var(--text-primary);
+        opacity: 0.8;
+        min-height: 2em;
+        position: relative;
+    }
+
+    #tagline::after {
+        content: '|';
+        animation: blink 1s infinite;
+        color: var(--slate-blue);
+    }
+
+    @keyframes blink {
+        0%, 50% { opacity: 1; }
+        51%, 100% { opacity: 0; }
+    }
+
+    /* Enhanced Controls */
+    .controls {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 2rem;
+        width: 100%;
+        max-width: 1000px;
+        margin-bottom: 3rem;
+        padding: 3rem;
+        background: var(--glass-bg);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border: 1px solid var(--glass-border);
+        border-radius: 24px;
+        box-shadow: var(--shadow-soft);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .controls::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(90deg, transparent, var(--slate-blue), transparent);
+        animation: borderGlow 4s ease-in-out infinite;
+    }
+
+    @keyframes borderGlow {
+        0% { left: -100%; }
+        100% { left: 100%; }
+    }
+
+    .control-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .control-group label {
+        font-weight: 600;
+        font-size: 0.9rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+    }
+
+    .controls select,
+    .controls input[type="text"],
+    .controls input[type="number"] {
+        height: 52px;
+        padding: 0 1.5rem;
+        background: rgba(255, 255, 255, 0.4);
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        border-radius: 16px;
+        color: var(--text-primary);
+        font-size: 1rem;
+        font-family: 'Inter', sans-serif;
+        font-weight: 500;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        appearance: none;
+    }
+
+    .controls select {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234D6473' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right 1.5rem center;
+        background-size: 1em;
+        padding-right: 3rem;
+    }
+
+    .controls select:focus,
+    .controls input:focus {
+        outline: none;
+        border-color: var(--slate-blue);
+        background: rgba(255, 255, 255, 0.6);
+        box-shadow: 0 0 0 4px rgba(77, 100, 115, 0.2);
+        transform: translateY(-2px);
+    }
+
+    .seed-wrapper {
+        display: flex;
+        align-items: stretch;
+        position: relative;
+    }
+
+    .seed-wrapper input {
+        flex: 1;
+        border-radius: 16px 16px 16px 16px;
+        border-right: none;
+    }
+
+    .seed-wrapper button {
+        height: 52px;
+        /* padding: 0; */
+        background: rgba(255, 255, 255, 0.4);
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        border-left: none;
+        border-radius: 16px 16px 16px 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 1.2rem;
+    }
+
+    .seed-wrapper button:hover {
+        background: var(--golden-brown);
+        color: white;
+        transform: scale(1.05);
+    }
+
+    /* Enhanced Action Buttons */
+    .action-buttons {
+        display: flex;
+        gap: 1.5rem;
+        margin-bottom: 3rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .action-buttons button {
+        position: relative;
+        padding: 1rem 2rem;
+        border: none;
+        border-radius: 50px;
+        font-family: 'Inter', sans-serif;
+        font-weight: 600;
+        font-size: 1.1rem;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+        box-shadow: var(--shadow-soft);
+    }
+
+    .action-buttons button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+        transition: left 0.6s ease;
+    }
+
+    .action-buttons button:hover::before {
+        left: 100%;
+    }
+
+    #generate-btn {
+        background: linear-gradient(135deg, var(--slate-blue), var(--slate-dark));
+        color: white;
+    }
+
+    #surprise-btn {
+        background: linear-gradient(135deg, var(--golden-brown), var(--warm-brown));
+        color: white;
+    }
+
+    .action-buttons button:hover {
+        transform: translateY(-3px) scale(1.05);
+        box-shadow: var(--shadow-hover);
+    }
+
+    .action-buttons button:active {
+        transform: translateY(-1px) scale(1.02);
+    }
+
+    .action-buttons button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none;
+    }
+
+    /* Enhanced Output Area */
+    .output {
+        width: 100%;
+        max-width: 900px;
+        text-align: center;
+        justify-content: center;
+    }
+
+    .status {
+        font-size: 1.2rem;
+        font-weight: 500;
+        margin-bottom: 2rem;
+        min-height: 1.5em;
+        color: var(--text-primary);
+        position: relative;
+    }
+
+    #result-image {
+        max-width: 100%;
+        max-height: 70vh;
+        border-radius: 20px;
+        border: 3px solid var(--glass-border);
+        margin-bottom: 2rem;
+        box-shadow: var(--shadow-hover);
+        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    #result-image:hover {
+        transform: scale(1.02);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    }
+
+    #loader {
+        width: 60px;
+        height: 60px;
+        margin: 2rem auto;
+        position: relative;
+    }
+
+    #loader::before,
+    #loader::after {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+        animation: loader 2s ease-in-out infinite;
+    }
+
+    #loader::before {
+        width: 60px;
+        height: 60px;
+        border: 4px solid var(--slate-blue);
+        border-top-color: transparent;
+        animation: spin 1s linear infinite;
+    }
+
+    #loader::after {
+        width: 40px;
+        height: 40px;
+        top: 10px;
+        left: 10px;
+        border: 4px solid var(--golden-brown);
+        border-bottom-color: transparent;
+        animation: spin 1.5s linear infinite reverse;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    #post-generation-tools {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin: 1rem 0 2rem;
+        opacity: 0;
+        transform: translateY(20px);
+        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    #post-generation-tools:not(.hidden) {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    #post-generation-tools button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1.5rem;
+        background: var(--glass-bg);
+        border: 1px solid var(--glass-border);
+        border-radius: 25px;
+        color: var(--text-primary);
+        font-family: 'Inter', sans-serif;
+        font-weight: 500;
+        cursor: pointer;
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+
+    #post-generation-tools button:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-soft);
+    }
+
+    #palette-container {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-top: 2rem;
+    }
+
+    .color-swatch-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+    }
+
+    .color-swatch-wrapper:hover {
+        transform: translateY(-5px);
+    }
+
+    .color-swatch {
+        width: 50px;
+        height: 50px;
+        border-radius: 12px;
+        border: 3px solid white;
+        cursor: pointer;
+        box-shadow: var(--shadow-soft);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .color-swatch:hover {
+        transform: scale(1.2) rotate(5deg);
+        box-shadow: var(--shadow-hover);
+    }
+
+    .hex-code {
+        font-family: 'Courier New', monospace;
+        font-size: 0.8rem;
+        font-weight: 500;
+        background: rgba(255, 255, 255, 0.6);
+        padding: 2px 8px;
+        border-radius: 8px;
+        color: var(--text-primary);
+        backdrop-filter: blur(5px);
+    }
+
+    #recent-creations {
+        width: 100%;
+        max-width: 1200px;
+        margin: 4rem auto 2rem;
+        padding: 0 2rem;
+        opacity: 0;
+        transform: translateY(30px);
+        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    #recent-creations:not(.hidden) {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    #recent-creations h2 {
+        text-align: center;
+        font-size: 2rem;
+        font-weight: 600;
+        margin-bottom: 2rem;
+        background: linear-gradient(135deg, var(--slate-blue), var(--warm-brown));
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
+
+    #recent-gallery {
+        display: flex;
+        gap: 1.5rem;
+        overflow-x: auto;
+        padding: 1rem;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    #recent-gallery::-webkit-scrollbar {
+        display: none;
+    }
+
+    #recent-gallery img {
+        height: 140px;
+        border-radius: 12px;
+        border: 2px solid var(--glass-border);
+        cursor: pointer;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: var(--shadow-soft);
+    }
+
+    #recent-gallery img:hover {
+        transform: scale(1.1) rotate(2deg);
+        box-shadow: var(--shadow-hover);
+        border-color: var(--slate-blue);
+    }
+
+    .side-text {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        z-index: 10;
+    }
+
+    .side-text span {
+        font-size: 0.8rem;
+        color: rgba(62, 59, 57, 0.6);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .hidden { display: none !important; }
+
+    @media (max-width: 768px) {
+        .controls {
+            grid-template-columns: 1fr;
+            padding: 2rem;
+        }
+        
+        .action-buttons {
+            flex-direction: column;
+            align-items: center;
+        }
+        .action-buttons button {
+            width: 100%;
+            max-width: 300px;
+        }
+        
+        #post-generation-tools {
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+    .random-seed-btn{
+        left: unset;
+    }
+
+    .theme-warm { background: linear-gradient(135deg, var(--golden-brown), var(--warm-brown)); }
+    .theme-cool { background: linear-gradient(135deg, var(--slate-blue), var(--slate-dark)); }
+    .theme-coral { background: linear-gradient(135deg, var(--accent-coral), var(--accent-pink)); }

requirements.txt

@@ -0,0 +1,9 @@
+torch --index-url https://download.pytorch.org/whl/cpu
+fastapi
+uvicorn[standard]
+accelerate
+diffusers
+scikit-learn
+Pillow
+numpy
+python-multipart