Make it text yo omage from promote given connecting to all the huggingface sfw and nsfw api

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pixelweave Ai Text To Image Alchemy Studio
-emoji: 😻
+title: PixelWeave AI | Text-to-Image Alchemy Studio ✨
 colorFrom: pink
-colorTo: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,70 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    border-top: 1px solid #1e293b;
+                }
+                
+                .footer-link:hover {
+                    color: #8b5cf6;
+                }
+            </style>
+            <footer class="bg-secondary-600 mt-16">
+                <div class="container mx-auto px-4 py-12">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">ShadowWeave AI</h3>
+                            <p class="text-gray-400 text-sm">Pixel Alchemy Studio for the digital age.</p>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-medium mb-4">Product</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Features</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Pricing</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">API</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-medium mb-4">Resources</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Documentation</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Tutorials</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Community</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-medium mb-4">Company</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">About</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Blog</a></li>
+                                <li><a href="#" class="footer-link text-gray-400 text-sm">Contact</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                        <p class="text-gray-400 text-sm">© 2024 ShadowWeave AI. All rights reserved.</p>
+                        <div class="flex gap-4 mt-4 md:mt-0">
+                            <a href="#" class="text-gray-400 hover:text-primary-500">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-primary-500">
+                                <i data-feather="discord"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-primary-500">
+                                <i data-feather="github"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,48 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: rgba(15, 23, 42, 0.8);
+                    backdrop-filter: blur(10px);
+                }
+                
+                .nav-link:hover {
+                    color: #8b5cf6;
+                }
+                
+                .nav-link.active {
+                    color: #8b5cf6;
+                    border-bottom: 2px solid #8b5cf6;
+                }
+            </style>
+            <nav class="border-b border-gray-800 sticky top-0 z-50">
+                <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+                    <a href="/" class="flex items-center gap-2">
+                        <i data-feather="hexagon" class="text-primary-500"></i>
+                        <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-purple-400 bg-clip-text text-transparent">ShadowWeave</span>
+                    </a>
+                    
+                    <div class="hidden md:flex items-center gap-8">
+                        <a href="#generate" class="nav-link active">Create</a>
+                        <a href="#gallery" class="nav-link">Gallery</a>
+                        <a href="#models" class="nav-link">Models</a>
+                        <a href="#spells" class="nav-link">Spells</a>
+                    </div>
+                    
+                    <div class="flex items-center gap-4">
+                        <button class="md:hidden">
+                            <i data-feather="menu"></i>
+                        </button>
+                        <a href="#" class="hidden md:block bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">
+                            Sign In
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/toast.js

@@ -0,0 +1,61 @@
+class CustomToast extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    position: fixed;
+                    bottom: 1rem;
+                    right: 1rem;
+                    z-index: 1000;
+                }
+                .toast {
+                    padding: 0.75rem 1.5rem;
+                    border-radius: 0.5rem;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    color: white;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    transition: all 0.3s ease;
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                .toast.visible {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+                .toast.info {
+                    background-color: #8b5cf6;
+                }
+                .toast.success {
+                    background-color: #10b981;
+                }
+                .toast.warning {
+                    background-color: #f59e0b;
+                }
+                .toast.error {
+                    background-color: #ef4444;
+                }
+            </style>
+            <div class="toast">
+                <slot></slot>
+            </div>
+        `;
+    }
+
+    show(message, type = 'info', duration = 3000) {
+        const toast = this.shadowRoot.querySelector('.toast');
+        toast.textContent = message;
+        toast.className = 'toast ' + type;
+        toast.classList.add('visible');
+        
+        setTimeout(() => {
+            toast.classList.remove('visible');
+            setTimeout(() => this.remove(), 300);
+        }, duration);
+    }
+}
+
+customElements.define('custom-toast', CustomToast);

index.html

@@ -1,19 +1,166 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ShadowWeave AI | Pixel Alchemy Studio</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                        },
+                        secondary: {
+                            500: '#1e293b',
+                            600: '#0f172a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-secondary-600 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-16">
+            <div class="md:w-1/2 space-y-6">
+                <h1 class="text-5xl font-bold bg-gradient-to-r from-primary-500 to-purple-400 bg-clip-text text-transparent">
+                    Weave Your Digital Dreams
+                </h1>
+                <p class="text-xl text-gray-300">
+                    Transform ideas into stunning visuals with our AI-powered pixel alchemy. No skills required - just imagination.
+                </p>
+                <div class="flex gap-4">
+                    <a href="#generate" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2">
+                        <i data-feather="sparkles"></i> Start Creating
+                    </a>
+                    <a href="#gallery" class="border border-primary-500 text-primary-500 hover:bg-primary-500/10 px-6 py-3 rounded-lg font-medium transition-all">
+                        Explore Gallery
+                    </a>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <img src="http://static.photos/technology/1024x576/42" alt="AI Generated Art" class="rounded-xl shadow-2xl border border-gray-700">
+            </div>
+        </section>
+
+        <!-- Generation Section -->
+        <section id="generate" class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Pixel Alchemy Studio</h2>
+            
+            <div class="bg-secondary-500 rounded-xl p-6 shadow-lg">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Prompt Input -->
+                    <div class="lg:col-span-2 space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-2">Your Creative Vision</label>
+                            <textarea class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-4 focus:ring-2 focus:ring-primary-500 focus:border-transparent" rows="4" placeholder="Describe what you want to create..."></textarea>
+                        </div>
+                        
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Style</label>
+                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
+                                    <option>Anime</option>
+                                    <option>Cyberpunk</option>
+                                    <option>3D Render</option>
+                                    <option>Pixel Art</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Model</label>
+                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
+                                    <option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion</option>
+                                    <option value="lykon/dreamshaper-8">DreamShaper</option>
+                                    <option value="cagliostrolab/animagine-xl-3.0">Anime</option>
+                                    <option value="DGSpitzer/Cyberpunk-Anime-Diffusion">Cyberpunk</option>
+                                </select>
+                            </div>
+<div>
+                                <label class="block text-sm font-medium mb-2">Quality</label>
+                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
+                                    <option>Standard</option>
+                                    <option>HD</option>
+                                    <option selected>Premium</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Aspect</label>
+                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
+                                    <option>Square</option>
+                                    <option>Portrait</option>
+                                    <option>Landscape</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Preview & Generate -->
+                    <div class="space-y-4">
+                        <div class="aspect-square bg-secondary-700 rounded-lg border-2 border-dashed border-gray-600 flex items-center justify-center">
+                            <div class="text-center p-4">
+                                <i data-feather="image" class="w-12 h-12 mx-auto text-gray-500 mb-2"></i>
+                                <p class="text-gray-400">Your creation will appear here</p>
+                            </div>
+                        </div>
+                        <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-medium transition-all flex items-center justify-center gap-2">
+                            <i data-feather="zap"></i> Generate Magic
+                        </button>
+                        <div class="text-xs text-gray-400 text-center">
+                            <p>By generating, you agree to our Terms of Service</p>
+                            <p class="mt-1">Premium generations: 5 remaining</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Model Showcase -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Alchemy Models</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-secondary-500 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all">
+                    <img src="http://static.photos/abstract/640x360/1" alt="Dream Model" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-2">Dream Weaver</h3>
+                        <p class="text-gray-300 text-sm">Ethereal beauty with a touch of darkness</p>
+                        <div class="mt-4 flex justify-between items-center">
+                            <span class="text-primary-500 font-medium">Free</span>
+                            <button class="text-xs bg-primary-500/20 text-primary-500 px-3 py-1 rounded-full">Select</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Repeat similar blocks for other models -->
+            </div>
+        </section>
+
+        <!-- Gallery Section -->
+        <section id="gallery" class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center">Pixel Gallery</h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                <img src="http://static.photos/abstract/320x240/2" alt="Gallery item" class="rounded-lg hover:scale-105 transition-transform cursor-pointer">
+                <!-- Repeat similar img tags for gallery items -->
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/toast.js"></script>
+    <script src="script.js"></script>
+<script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,192 @@
+
+// HuggingFace API Configuration
+const HF_API_KEY = 'YOUR_HF_API_KEY';
+const SFW_MODELS = {
+    'Stable Diffusion XL': 'stabilityai/stable-diffusion-xl-base-1.0',
+    'DreamShaper XL': 'lykon/dreamshaper-xl',
+    'Anime XL': 'cagliostrolab/animagine-xl-3.0',
+    'Cyberpunk Anime': 'DGSpitzer/Cyberpunk-Anime-Diffusion',
+    'Realistic Vision': 'SG161222/Realistic_Vision_V5.1',
+    'Juggernaut XL': 'stabilityai/stable-diffusion-xl-base-1.0',
+    'Epic Realism': 'epicrealism/epicrealism-natural-sin',
+    'Pixel Art': 'nerijs/pixel-art-xl'
+};
+
+const NSFW_MODELS = {
+    'Erotica XL': 'gsdf/Counterfeit-V3.0',
+    'Hentai XL': 'nitrosocke/henmixReal',
+    'Adult XL': 'gsdf/Erotica',
+    'NSFW Anime': 'cagliostro/hentai-diffusion',
+    'Lewd Realism': 'gsdf/lewd-diffusion',
+    'Boudoir': 'gsdf/boudoir-diffusion',
+    'Kinky Art': 'gsdf/kinky-diffusion'
+};
+
+let currentModel = SFW_MODELS['Stable Diffusion XL'];
+let isNSFW = false;
+// DOM Elements
+const promptInput = document.querySelector('textarea');
+const styleSelect = document.querySelector('select:nth-of-type(1)');
+const modelSelect = document.querySelector('select:nth-of-type(2)');
+const generateBtn = document.querySelector('button');
+const previewBox = document.querySelector('.aspect-square');
+const gallerySection = document.getElementById('gallery');
+const nsfwToggle = document.createElement('div');
+
+// Initialize NSFW Toggle
+function initNSFWToggle() {
+    nsfwToggle.className = 'flex items-center gap-2 mb-4';
+    nsfwToggle.innerHTML = `
+        <span class="text-sm font-medium">Content Filter</span>
+        <label class="relative inline-flex items-center cursor-pointer">
+            <input type="checkbox" class="sr-only peer" ${isNSFW ? 'checked' : ''}>
+            <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:bg-primary-500 peer-focus:ring-2 peer-focus:ring-primary-500">
+                <div class="absolute top-0.5 left-[2px] bg-white w-5 h-5 rounded-full transition-transform peer-checked:translate-x-5"></div>
+            </div>
+            <span class="ml-2 text-sm">${isNSFW ? 'NSFW' : 'SFW'}</span>
+        </label>
+    `;
+    document.querySelector('#generate .space-y-4').prepend(nsfwToggle);
+    nsfwToggle.querySelector('input').addEventListener('change', toggleNSFW);
+}
+
+// Toggle NSFW/SFW mode
+function toggleNSFW(e) {
+    isNSFW = e.target.checked;
+    updateModelOptions();
+    nsfwToggle.querySelector('span:last-child').textContent = isNSFW ? 'NSFW' : 'SFW';
+}
+
+// Update model options based on SFW/NSFW mode
+function updateModelOptions() {
+    modelSelect.innerHTML = '';
+    const models = isNSFW ? NSFW_MODELS : SFW_MODELS;
+    
+    for (const [name, modelId] of Object.entries(models)) {
+        const option = document.createElement('option');
+        option.value = modelId;
+        option.textContent = name;
+        if (modelId === currentModel) option.selected = true;
+        modelSelect.appendChild(option);
+    }
+}
+// Enhanced image generation with error handling and model status checks
+async function generateImage() {
+    const prompt = promptInput.value.trim();
+    if (!prompt) {
+        showToast('Please enter a prompt', 'error');
+        return;
+    }
+
+    generateBtn.disabled = true;
+    generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Weaving Pixels...';
+    feather.replace();
+
+    try {
+        // First check if model is loaded
+        const modelStatus = await fetch(`https://api-inference.huggingface.co/status/${currentModel}`, {
+            headers: { 'Authorization': `Bearer ${HF_API_KEY}` }
+        });
+
+        if (!modelStatus.ok) throw new Error('Model status check failed');
+        
+        const statusData = await modelStatus.json();
+        if (statusData.loaded !== true) {
+            showToast('Model is loading, please wait...', 'warning');
+            return;
+        }
+
+        // Generate image
+        const response = await fetch(`https://api-inference.huggingface.co/models/${currentModel}`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${HF_API_KEY}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                inputs: prompt,
+                parameters: {
+                    width: 1024,
+                    height: 1024,
+                    num_inference_steps: 50,
+                    guidance_scale: 7.5
+                },
+                options: { wait_for_model: true }
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Generation failed');
+        }
+
+        const imageBlob = await response.blob();
+        const imageUrl = URL.createObjectURL(imageBlob);
+        
+        // Update preview
+        previewBox.innerHTML = `
+            <div class="relative w-full h-full">
+                <img src="${imageUrl}" alt="Generated image" class="w-full h-full object-cover rounded-lg">
+                <div class="absolute bottom-0 left-0 right-0 bg-black/70 text-white p-2 text-xs">
+                    ${prompt.substring(0, 100)}${prompt.length > 100 ? '...' : ''}
+                </div>
+            </div>
+        `;
+        
+        // Add to gallery
+        addToGallery(imageUrl, prompt);
+        showToast('Image generated successfully!', 'success');
+        
+    } catch (error) {
+        console.error('Error:', error);
+        showToast(error.message || 'Generation failed. Please try again.', 'error');
+    } finally {
+        generateBtn.disabled = false;
+        generateBtn.innerHTML = '<i data-feather="zap"></i> Generate Magic';
+        feather.replace();
+    }
+}
+
+// Show toast notification
+function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
+        type === 'error' ? 'bg-red-500' : 
+        type === 'success' ? 'bg-green-500' : 
+        type === 'warning' ? 'bg-yellow-500' : 'bg-primary-500'
+    }`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+// Add generated image to gallery
+function addToGallery(imageUrl, prompt) {
+    const galleryItem = document.createElement('div');
+    galleryItem.className = 'relative group rounded-lg overflow-hidden';
+    galleryItem.innerHTML = `
+        <img src="${imageUrl}" alt="${prompt}" class="w-full h-48 object-cover rounded-lg hover:scale-105 transition-transform cursor-pointer">
+        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-4">
+            <p class="text-white text-sm text-center">${prompt}</p>
+        </div>
+    `;
+    gallerySection.querySelector('.grid').prepend(galleryItem);
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    initNSFWToggle();
+    updateModelOptions();
+    
+    // Event listeners
+    generateBtn.addEventListener('click', generateImage);
+    modelSelect.addEventListener('change', (e) => {
+        currentModel = e.target.value;
+    });
+    
+    // Load feather icons
+    feather.replace();
+});

style.css

@@ -1,28 +1,91 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #0f172a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #8b5cf6;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #7c3aed;
+}
+/* Animation for generate button */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
+    }
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.animate-pulse {
+    animation: pulse 2s infinite;
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+/* Gallery hover effects */
+.gallery-item {
+    transition: all 0.3s ease;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.gallery-item:hover {
+    transform: scale(1.05);
+    z-index: 10;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.gallery-caption {
+    transition: opacity 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Generation preview enhancements */
+.preview-container {
+    position: relative;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.prompt-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    padding: 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
 }
+
+/* Loading state */
+.loading-spinner {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+