Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Prompt Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .prompt-box { | |
| min-height: 150px; | |
| transition: all 0.3s ease; | |
| } | |
| .prompt-box:focus { | |
| box-shadow: 0 0 0 2px rgba(118, 75, 162, 0.5); | |
| } | |
| .copy-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .copy-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .copy-btn.copied { | |
| background-color: #10b981 ; | |
| } | |
| .platform-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .platform-radio:checked + .platform-card { | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5); | |
| } | |
| .platform-radio:checked + .platform-card .platform-icon { | |
| transform: scale(1.1); | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .generating { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold mb-2">AI Prompt Generator</h1> | |
| <p class="text-lg opacity-90">Transform your simple idea into a detailed AI art prompt</p> | |
| </div> | |
| <!-- Generator Form --> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 shadow-lg mb-8"> | |
| <div class="mb-6"> | |
| <label for="basicPrompt" class="block text-sm font-medium mb-2">Your Simple Idea</label> | |
| <div class="relative"> | |
| <textarea | |
| id="basicPrompt" | |
| rows="2" | |
| class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 placeholder-white placeholder-opacity-70 resize-none prompt-box" | |
| placeholder="e.g. A futuristic city at night"></textarea> | |
| <div class="absolute bottom-2 right-2 text-xs opacity-70">Characters: <span id="charCount">0</span>/120</div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-3">Select AI Platform</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <!-- Midjourney --> | |
| <label class="relative"> | |
| <input type="radio" name="platform" value="midjourney" class="hidden platform-radio" checked> | |
| <div class="platform-card flex flex-col items-center justify-center p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 cursor-pointer border border-transparent"> | |
| <i class="fas fa-paint-brush text-3xl mb-2 platform-icon text-purple-300"></i> | |
| <span>Midjourney</span> | |
| </div> | |
| </label> | |
| <!-- Stable Diffusion --> | |
| <label class="relative"> | |
| <input type="radio" name="platform" value="stable_diffusion" class="hidden platform-radio"> | |
| <div class="platform-card flex flex-col items-center justify-center p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 cursor-pointer border border-transparent"> | |
| <i class="fas fa-atom text-3xl mb-2 platform-icon text-blue-300"></i> | |
| <span>Stable Diffusion</span> | |
| </div> | |
| </label> | |
| <!-- DALL·E --> | |
| <label class="relative"> | |
| <input type="radio" name="platform" value="dalle" class="hidden platform-radio"> | |
| <div class="platform-card flex flex-col items-center justify-center p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 cursor-pointer border border-transparent"> | |
| <i class="fas fa-robot text-3xl mb-2 platform-icon text-green-300"></i> | |
| <span>DALL·E</span> | |
| </div> | |
| </label> | |
| <!-- Other --> | |
| <label class="relative"> | |
| <input type="radio" name="platform" value="other" class="hidden platform-radio"> | |
| <div class="platform-card flex flex-col items-center justify-center p-4 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 cursor-pointer border border-transparent"> | |
| <i class="fas fa-rainbow text-3xl mb-2 platform-icon text-yellow-300"></i> | |
| <span>Other</span> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="styleSelect" class="block text-sm font-medium mb-2">Art Style</label> | |
| <select id="styleSelect" class="w-full px-4 py-3 rounded-lg bg-indigo-900 border border-white border-opacity-30 appearance-none"> | |
| <option value="realistic">Realistic</option> | |
| <option value="digital_art">Digital Art</option> | |
| <option value="fantasy">Fantasy</option> | |
| <option value="anime">Anime</option> | |
| <option value="photographic">Photographic</option> | |
| <option value="3d_render">3D Render</option> | |
| <option value="watercolor">Watercolor</option> | |
| <option value="cyberpunk">Cyberpunk</option> | |
| <option value="steampunk">Steampunk</option> | |
| <option value="surreal">Surreal</option> | |
| </select> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex-1 min-w-[120px]"> | |
| <label for="detailLevel" class="block text-sm font-medium mb-1">Detail Level</label> | |
| <select id="detailLevel" class="w-full px-3 py-2 rounded-lg bg-indigo-900 border border-white border-opacity-30 appearance-none"> | |
| <option value="medium">Medium</option> | |
| <option value="low">Simple</option> | |
| <option value="high">Very Detailed</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 min-w-[120px]"> | |
| <label for="quality" class="block text-sm font-medium mb-1">Quality</label> | |
| <select id="quality" class="w-full px-3 py-2 rounded-lg bg-indigo-900 border border-white border-opacity-30 appearance-none"> | |
| <option value="hq">High Quality</option> | |
| <option value="standard">Standard</option> | |
| <option value="ultra">Ultra HD</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 min-w-[120px]"> | |
| <label for="lighting" class="block text-sm font-medium mb-1">Lighting</label> | |
| <select id="lighting" class="w-full px-3 py-2 rounded-lg bg-indigo-900 border border-white border-opacity-30 appearance-none"> | |
| <option value="dynamic">Dynamic</option> | |
| <option value="soft">Soft</option> | |
| <option value="dramatic">Dramatic</option> | |
| <option value="neon">Neon</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="w-full mt-6 px-6 py-3 rounded-lg bg-indigo-500 hover:bg-indigo-600 font-medium flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> | |
| Generate Enhanced Prompt | |
| </button> | |
| </div> | |
| <!-- Result Section --> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 shadow-lg"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h2 class="text-xl font-semibold">Generated Prompt</h2> | |
| <div class="flex items-center gap-2"> | |
| <span id="platformIndicator" class="text-sm px-2 py-1 rounded bg-white bg-opacity-20"> | |
| <i class="fas fa-paint-brush mr-1"></i> Midjourney | |
| </span> | |
| <button id="copyBtn" class="copy-btn text-sm px-3 py-1 rounded bg-indigo-500 hover:bg-indigo-600"> | |
| <i class="far fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div id="resultContainer" class="relative"> | |
| <div id="initialState" class="text-center py-8 px-4 bg-white bg-opacity-5 rounded-lg"> | |
| <i class="fas fa-wand-magic-sparkles text-4xl mb-3 opacity-60"></i> | |
| <p>Enter your idea above and generate a detailed AI art prompt</p> | |
| </div> | |
| <div id="loadingState" class="hidden text-center py-8 px-4 bg-white bg-opacity-5 rounded-lg"> | |
| <div class="flex items-center justify-center gap-3"> | |
| <i class="fas fa-spinner fa-spin text-xl generating"></i> | |
| <span class="font-medium">Crafting your perfect prompt...</span> | |
| </div> | |
| </div> | |
| <div id="resultOutput" class="hidden"> | |
| <textarea id="generatedPrompt" class="w-full px-4 py-3 mb-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 resize-none prompt-box" rows="6" readonly></textarea> | |
| <div class="flex justify-end"> | |
| <button id="regenerateBtn" class="text-sm px-4 py-1.5 rounded-lg bg-white bg-opacity-10 hover:bg-opacity-20"> | |
| <i class="fas fa-sync-alt mr-1"></i> Regenerate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const basicPrompt = document.getElementById('basicPrompt'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const regenerateBtn = document.getElementById('regenerateBtn'); | |
| const copyBtn = document.getElementById('copyBtn'); | |
| const platformRadios = document.querySelectorAll('input[name="platform"]'); | |
| const platformIndicator = document.getElementById('platformIndicator'); | |
| const initialState = document.getElementById('initialState'); | |
| const loadingState = document.getElementById('loadingState'); | |
| const resultOutput = document.getElementById('resultOutput'); | |
| const generatedPrompt = document.getElementById('generatedPrompt'); | |
| const charCount = document.getElementById('charCount'); | |
| // Character count for textarea | |
| basicPrompt.addEventListener('input', function() { | |
| const count = this.value.length; | |
| charCount.textContent = count; | |
| if (count > 120) { | |
| charCount.classList.add('text-yellow-300'); | |
| } else { | |
| charCount.classList.remove('text-yellow-300'); | |
| } | |
| }); | |
| // Platform selection change | |
| platformRadios.forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| if (this.checked) { | |
| const platformName = this.value === 'midjourney' ? 'Midjourney' : | |
| this.value === 'stable_diffusion' ? 'Stable Diffusion' : | |
| this.value === 'dalle' ? 'DALL·E' : 'Generic AI'; | |
| const iconClass = this.value === 'midjourney' ? 'fa-paint-brush' : | |
| this.value === 'stable_diffusion' ? 'fa-atom' : | |
| this.value === 'dalle' ? 'fa-robot' : 'fa-rainbow'; | |
| platformIndicator.innerHTML = `<i class="fas ${iconClass} mr-1"></i> ${platformName}`; | |
| } | |
| }); | |
| }); | |
| // Generate button click | |
| generateBtn.addEventListener('click', function() { | |
| if (!basicPrompt.value.trim()) { | |
| basicPrompt.focus(); | |
| return; | |
| } | |
| generatePrompt(); | |
| }); | |
| // Regenerate button click | |
| regenerateBtn.addEventListener('click', generatePrompt); | |
| // Copy button click | |
| copyBtn.addEventListener('click', function() { | |
| if (!generatedPrompt.value) return; | |
| generatedPrompt.select(); | |
| document.execCommand('copy'); | |
| // Visual feedback | |
| const originalText = copyBtn.innerHTML; | |
| copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; | |
| copyBtn.classList.add('copied'); | |
| setTimeout(() => { | |
| copyBtn.innerHTML = originalText; | |
| copyBtn.classList.remove('copied'); | |
| }, 2000); | |
| }); | |
| // Generate prompt function | |
| function generatePrompt() { | |
| const platform = document.querySelector('input[name="platform"]:checked').value; | |
| const basicIdea = basicPrompt.value.trim(); | |
| const style = document.getElementById('styleSelect').value; | |
| const detailLevel = document.getElementById('detailLevel').value; | |
| const quality = document.getElementById('quality').value; | |
| const lighting = document.getElementById('lighting').value; | |
| // Show loading state | |
| initialState.classList.add('hidden'); | |
| loadingState.classList.remove('hidden'); | |
| resultOutput.classList.add('hidden'); | |
| generateBtn.disabled = true; | |
| // Simulate processing delay | |
| setTimeout(() => { | |
| // Generate the enhanced prompt based on platform and settings | |
| const prompt = buildPrompt(platform, basicIdea, style, detailLevel, quality, lighting); | |
| // Show result | |
| loadingState.classList.add('hidden'); | |
| resultOutput.classList.remove('hidden'); | |
| generatedPrompt.value = prompt; | |
| generateBtn.disabled = false; | |
| // Auto-scroll to result | |
| resultOutput.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | |
| }, 1500); | |
| } | |
| // Prompt building function | |
| function buildPrompt(platform, basicIdea, style, detailLevel, quality, lighting) { | |
| // Artist names | |
| const artists = { | |
| realistic: "by Greg Rutkowski, by Artgerm, by Alphonse Mucha", | |
| digital_art: "by WLOP, by Rossdraws, by Sakimichan", | |
| fantasy: "by Noah Bradley, by Kekai Kotaki, by Rebecca Guay", | |
| anime: "by Makoto Shinkai, by Kuvshinov Ilya, by Yoshitaka Amano", | |
| photographic: "by Annie Leibovitz, by Steve McCurry, by Peter McKinnon", | |
| "3d_render": "by Beeple, by Ian Spriggs, by Raphael Lacoste", | |
| cyberpunk: "by Simon Stålenhag, by Katsuya Terada, by Feng Zhu", | |
| steampunk: "by James Ng, by Igor Kieryluk, by Jakub Rozalski", | |
| surreal: "by Salvador Dali, by Zdzisław Beksiński, by René Magritte" | |
| }; | |
| // Style descriptors | |
| const styleDescriptors = { | |
| realistic: "hyper realistic, intricate details, photo realistic, highly detailed", | |
| digital_art: "digital art, concept art, cinematic composition, dramatic lighting", | |
| fantasy: "fantasy art, ethereal, magical, dreamlike, otherworldly", | |
| anime: "anime style, vibrant colors, expressive characters, detailed background", | |
| photographic: "professional photography, 35mm lens, shallow depth of field, bokeh", | |
| "3d_render": "3D render, octane rendering, ray tracing, ultra detailed", | |
| watercolor: "watercolor painting, soft textures, artistic brush strokes, pastel colors", | |
| oil_painting: "oil painting texture, impasto brushwork, rich colors, painterly style", | |
| pop_art: "pop art style, bold colors, comic book aesthetic, halftone patterns", | |
| postmodernism: "postmodern art, eclectic mix of styles, conceptual, thought-provoking", | |
| portrait: "professional portrait, expressive face, character study, emotionally compelling", | |
| glass_art: "glass art style, translucent, refractive, stained glass effect", | |
| graffiti: "graffiti art, urban street style, bold outlines, spray paint texture", | |
| cyberpunk: "cyberpunk style, neon lighting, futuristic, dystopian, sci-fi", | |
| steampunk: "steampunk style, brass and gears, Victorian era, mechanical details", | |
| surreal: "surrealism, dreamlike, impossible architecture, metaphysical" | |
| }; | |
| // Quality descriptors | |
| const qualityDescriptors = { | |
| hq: "high quality, 8k, ultra detailed", | |
| standard: "high resolution, well detailed", | |
| ultra: "ultra HD, 16k resolution, insanely detailed" | |
| }; | |
| // Lighting descriptors | |
| const lightingDescriptors = { | |
| dynamic: "dynamic lighting, cinematic lighting, volumetric light", | |
| soft: "soft lighting, diffused light, ambient glow", | |
| dramatic: "dramatic lighting, high contrast, chiaroscuro", | |
| neon: "neon lighting, vibrant colors, glow in the dark" | |
| }; | |
| // Detail level | |
| let detailText = ""; | |
| if (detailLevel === "low") { | |
| detailText = "simple, clean composition"; | |
| } else if (detailLevel === "medium") { | |
| detailText = "detailed, intricate elements"; | |
| } else { | |
| detailText = "extremely detailed, intricate elements, complex composition"; | |
| } | |
| // Platform-specific adjustments | |
| let platformSpecific = ""; | |
| let platformEnd = ""; | |
| if (platform === "midjourney") { | |
| platformSpecific = "--ar 16:9 --v 5"; | |
| } else if (platform === "stable_diffusion") { | |
| platformSpecific = "((masterpiece)), (best quality), (ultra-detailed)"; | |
| platformEnd = ", trending on artstation, sharp focus"; | |
| } else if (platform === "dalle") { | |
| platformSpecific = "highly detailed, digital illustration"; | |
| } else { | |
| platformSpecific = "AI generated art, highly detailed"; | |
| } | |
| // Build the prompt | |
| let prompt = `${platformSpecific}, ${basicIdea}, ${styleDescriptors[style]}, ${detailText}, `; | |
| prompt += `${lightingDescriptors[lighting]}, ${qualityDescriptors[quality]}, ${artists[style] || ''}`; | |
| prompt += platformEnd; | |
| // Capitalize first letter | |
| prompt = prompt.charAt(0).toUpperCase() + prompt.slice(1); | |
| return prompt; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AnySue/ai-prompt-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |