// AI Generation Manager class AIGenerationManager { constructor() { if (!localStorage.getItem('generationHistory')) { localStorage.setItem('generationHistory', JSON.stringify([])); } this.favoriteGenerations = JSON.parse(localStorage.getItem('favoriteGenerations') || '[]'); } saveGeneration(prompt, images, metadata = {}) { const history = JSON.parse(localStorage.getItem('generationHistory')); history.unshift({ prompt, images, metadata: { model: metadata.model || 'stable-diffusion-v2', style: metadata.style || 'default', timestamp: new Date().toISOString(), favorite: false } }); localStorage.setItem('generationHistory', JSON.stringify(history)); } addFeedback(id, feedback) { const history = JSON.parse(localStorage.getItem('generationHistory')); const item = history.find(item => item.id === id); if (item) { item.feedback = feedback; localStorage.setItem('generationHistory', JSON.stringify(history)); } } toggleFavorite(id) { const history = JSON.parse(localStorage.getItem('generationHistory')); const item = history.find(item => item.id === id); if (item) { item.metadata.favorite = !item.metadata.favorite; localStorage.setItem('generationHistory', JSON.stringify(history)); return item.metadata.favorite; } return false; } getHistory() { return JSON.parse(localStorage.getItem('generationHistory')); } getFavorites() { return this.getHistory().filter(item => item.metadata.favorite); } } const aiManager = new AIGenerationManager(); document.addEventListener('DOMContentLoaded', async function() { // Load AI models from API (simulated) async function loadAIModels() { // In a real app, this would fetch from your API return new Promise(resolve => { setTimeout(() => { resolve([ { id: 'stable-diffusion-v2', name: 'Stable Diffusion v2', description: 'Best for general purpose generations' }, { id: 'dall-e-3', name: 'DALL-E 3', description: 'Best for creative and artistic generations' }, { id: 'midjourney-v5', name: 'Midjourney v5', description: 'Best for photorealistic images' } ]); }, 500); }); } // Initialize AI models dropdown if (document.querySelector('#ai-model')) { const models = await loadAIModels(); const modelSelect = document.querySelector('#ai-model'); models.forEach(model => { const option = document.createElement('option'); option.value = model.id; option.textContent = model.name; modelSelect.appendChild(option); }); } // Initialize file upload functionality const uploadArea = document.querySelector('.border-dashed'); const fileInput = document.querySelector('input[type="file"]'); uploadArea.addEventListener('click', () => fileInput.click()); uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('border-primary', 'bg-gray-700/50'); }); uploadArea.addEventListener('dragleave', () => { uploadArea.classList.remove('border-primary', 'bg-gray-700/50'); }); uploadArea.addEventListener('drop', (e) => { e.preventDefault(); uploadArea.classList.remove('border-primary', 'bg-gray-700/50'); if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; handleFileUpload(e.dataTransfer.files[0]); } }); fileInput.addEventListener('change', () => { if (fileInput.files.length) { handleFileUpload(fileInput.files[0]); } }); }); function handleFileUpload(file) { // In a real app, you would handle the file upload here console.log('File selected:', file.name); // Preview the image const reader = new FileReader(); reader.onload = function(e) { const uploadArea = document.querySelector('.border-dashed'); uploadArea.innerHTML = ` Preview

${file.name}

`; }; reader.readAsDataURL(file); } // Creative random prompt generator with more variety const promptTemplates = [ "{color} {mood} {subject} in {environment} with {style} style, {lighting} lighting, {perspective} view", "{adjective} {subject} in {timeOfDay} with {colorScheme} colors, {artStyle} style", "{artStyle} of {subject} in {worldType}, {mood} atmosphere, {weather} weather", "{perspective} view of {subject} with {lighting} lighting, {artStyle} style", "{subject} in {location}, {timePeriod} {style} style, {mood} atmosphere", "A {adjective} {subject} {action} in {environment}, {artStyle} style", "{subject} {action} during {timeOfDay} in {location}, {style} style" ]; const promptWords = { subject: ["dragon", "castle", "forest", "robot", "spaceship", "samurai", "wizard", "city", "ocean", "beast", "knight", "unicorn", "cyborg", "mermaid", "phoenix", "dinosaur", "alien", "ghost", "angel", "demon"], mood: ["mystical", "dramatic", "serene", "chaotic", "moody", "whimsical", "dark", "light", "surreal", "epic", "romantic", "ominous", "joyful", "melancholic", "energetic", "peaceful"], environment: ["misty mountains", "cyberpunk alley", "ancient ruins", "crystal caves", "floating islands", "underground city", "magical library", "space station", "enchanted forest", "haunted mansion"], color: ["red", "blue", "golden", "silver", "purple", "emerald", "rainbow", "pastel", "neon", "monochrome"], adjective: ["glowing", "ethereal", "futuristic", "ancient", "majestic", "tiny", "gigantic", "mysterious", "legendary", "forgotten", "hidden", "celestial", "mechanical", "organic", "crystalline"], timeOfDay: ["sunrise", "midnight", "golden hour", "blue hour", "noon", "twilight", "dawn", "dusk"], colorScheme: ["monochromatic", "complementary", "analogous", "warm", "cool", "triadic", "tetradic"], artStyle: ["Painting", "Sculpture", "Digital art", "Watercolor", "Oil painting", "Charcoal sketch", "Pixel art", "Anime", "Concept art", "Surrealist", "Impressionist", "Abstract"], worldType: ["fantasy world", "sci-fi universe", "post-apocalyptic wasteland", "alien planet", "steampunk city", "dream realm", "underwater kingdom", "floating continent"], perspective: ["Close-up", "Wide angle", "Birds-eye", "Worms-eye", "Tilted", "Macro", "Fisheye", "Panoramic"], lighting: ["volumetric", "neon", "natural", "bioluminescent", "chiaroscuro", "moonlight", "sunbeams", "candlelight", "strobe", "firelight"], location: ["Paris", "Tokyo", "New York", "African savanna", "Amazon rainforest", "Himalayas", "Great Barrier Reef", "Sahara Desert", "Antarctica", "Venice"], timePeriod: ["medieval", "Victorian", "1920s", "futuristic", "Stone age", "Renaissance", "Ancient Egypt", "Wild West", "Space Age", "Prehistoric"], style: ["photorealistic", "concept art", "character design", "editorial", "minimalist", "hyperrealistic", "low poly", "isometric", "line art", "graffiti"], weather: ["rainy", "sunny", "foggy", "stormy", "snowy", "windy", "cloudy", "aurora-filled"], action: ["flying", "battling", "meditating", "exploring", "dancing", "singing", "casting spells", "building", "destroying", "protecting"] }; function generateRandomPrompt() { const template = promptTemplates[Math.floor(Math.random() * promptTemplates.length)]; let prompt = template.replace(/{([^}]+)}/g, (match, key) => { const words = promptWords[key]; return words ? words[Math.floor(Math.random() * words.length)] : match; }); // Add some random artistic modifiers 50% of the time if (Math.random() > 0.5) { const modifiers = [ "trending on artstation", "4k resolution", "highly detailed", "intricate details", "cinematic lighting", "octane render", "unreal engine", "8k wallpaper", "sharp focus", "studio quality" ]; prompt += `, ${modifiers[Math.floor(Math.random() * modifiers.length)]}`; } return prompt; } document.getElementById('random-prompt').addEventListener('click', function() { const promptInput = document.getElementById('prompt-input'); promptInput.value = generateRandomPrompt(); promptInput.focus(); }); // Generate button functionality document.querySelector('.bg-gradient-to-r').addEventListener('click', function() { // In a real app, this would call your AI generation API console.log('Generating images...'); // Simulate loading const button = this; const originalText = button.innerHTML; button.innerHTML = ' Generating...'; button.disabled = true; // Simulate API call setTimeout(() => { button.innerHTML = originalText; button.disabled = false; // Simulate generated images const generatedImages = [ 'http://static.photos/abstract/640x360/' + Math.floor(Math.random() * 100), 'http://static.photos/abstract/640x360/' + Math.floor(Math.random() * 100) ]; // Save to history const prompt = document.querySelector('textarea').value || 'Untitled generation'; const model = document.querySelector('#ai-model').value; const style = document.querySelector('#style-select').value; aiManager.saveGeneration(prompt, generatedImages, { model, style }); // Show success message const success = document.createElement('div'); success.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg'; success.innerHTML = ' Images generated successfully!'; document.body.appendChild(success); // Show results section with generated images const resultsSection = document.getElementById('results'); resultsSection.classList.remove('hidden'); resultsSection.scrollIntoView({ behavior: 'smooth' }); // Update the images const previews = document.querySelectorAll('image-preview'); previews[0].setAttribute('src', generatedImages[0]); previews[0].setAttribute('ai-generated', 'true'); previews[1].setAttribute('src', generatedImages[1]); previews[1].setAttribute('ai-generated', 'true'); // Refresh icons (since we added new ones) feather.replace(); // Remove message after 3 seconds setTimeout(() => success.remove(), 3000); }, 2000); });