`; }; }); // Show preview for default selected style immediately const defaultStyle = styleSelect.value; const defaultImg = new Image(); defaultImg.src = stylePreviews[defaultStyle]; defaultImg.alt = `${defaultStyle} style preview`; defaultImg.onload = function() { previewImage.src = this.src; previewImage.alt = this.alt; previewPlaceholder.style.display = 'none'; previewImage.style.display = 'block'; }; defaultImg.onerror = function() { previewPlaceholder.style.display = 'block'; }; // Generate visual prompt document.getElementById('generate-visual-prompt').addEventListener('click', generateVisualPrompt); document.getElementById('regenerate-prompt').addEventListener('click', generateVisualPrompt); // Copy prompt to clipboard document.getElementById('copy-prompt').addEventListener('click', function() { const promptText = document.getElementById('visual-prompt-output').textContent; navigator.clipboard.writeText(promptText).then(() => { const originalText = this.textContent; this.textContent = 'Copied!'; setTimeout(() => { this.textContent = originalText; }, 2000); }).catch(err => { console.error('Failed to copy text: ', err); }); }); // Save preset (placeholder functionality) document.getElementById('save-preset').addEventListener('click', function() { alert('Preset saved! (This would connect to your backend in a real implementation)'); }); // Generate the visual prompt function generateVisualPrompt() { const subject = document.getElementById('subject').value.trim(); const style = document.getElementById('style-type').value; const composition = document.querySelector('input[name="composition"]:checked').value; const lighting = document.getElementById('lighting').value; const colorPalette = document.getElementById('color-palette').value; const details = document.getElementById('details').value.trim(); if (!subject) { alert('Please enter a main subject'); return; } // Style descriptors const styleDescriptors = { 'realistic': 'hyper realistic, detailed textures, lifelike rendering', 'photographic': 'professional photography, DSLR, high resolution', 'digital-art': 'digital painting, concept art, matte painting', 'anime': 'anime style, vibrant colors, expressive eyes', 'watercolor': 'watercolor painting, soft edges, translucent colors', 'oil-painting': 'oil on canvas, visible brush strokes, rich texture', 'cyberpunk': 'neon lights, futuristic, high tech low life', 'fantasy': 'fantasy art, magical, ethereal lighting', 'low-poly': 'low poly 3D, geometric shapes, minimalist', 'pixel-art': '8-bit pixel art, retro gaming style' }; // Composition descriptors const compositionDescriptors = { 'close-up': 'close-up shot, detailed facial features', 'portrait': 'portrait composition, upper body focus', 'full-body': 'full body shot, complete figure', 'landscape': 'wide landscape, expansive view' }; // Lighting descriptors const lightingDescriptors = { 'natural': 'natural lighting, soft shadows', 'studio': 'studio lighting, professional setup', 'dramatic': 'dramatic lighting, high contrast', 'neon': 'neon lighting, vibrant glow', 'backlit': 'backlit, silhouette effect', 'soft': 'soft lighting, diffused glow', 'volumetric': 'volumetric lighting, god rays' }; // Color palette descriptors const colorDescriptors = { 'vibrant': 'vibrant color palette, saturated colors', 'pastel': 'pastel colors, soft tones', 'monochrome': 'monochrome, black and white', 'warm': 'warm color tones, golden hues', 'cool': 'cool color tones, blueish tint', 'high-contrast': 'high contrast, bold colors' }; // Build the prompt let prompt = `${compositionDescriptors[composition]} of ${subject}, ${styleDescriptors[style]}, ${lightingDescriptors[lighting]}, ${colorDescriptors[colorPalette]}`; // Add details if provided if (details) { prompt += `, ${details}`; } // Add quality boosters prompt += `, highly detailed, professional composition, trending on art station`; // Display the result document.getElementById('visual-prompt-output').textContent = prompt; document.getElementById('result-container').style.display = 'block'; // Scroll to result document.getElementById('result-container').scrollIntoView({ behavior: 'smooth' }); } }); // Add CSS for spinner animation const style = document.createElement('style'); style.textContent = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(style);