|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Image Prompt Optimizer</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, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.prompt-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.prompt-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.keyword-chip { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.keyword-chip:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
textarea { |
|
|
min-height: 120px; |
|
|
resize: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="gradient-bg text-white py-12 px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">AI Image Prompt Optimizer</h1> |
|
|
<p class="text-xl md:text-2xl mb-8">Transform your simple ideas into professional-grade AI image generation prompts</p> |
|
|
<div class="bg-white bg-opacity-20 backdrop-blur-md rounded-xl p-6 shadow-lg"> |
|
|
<textarea id="promptInput" class="w-full p-4 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-300" placeholder="Enter your initial prompt, e.g. 'a cute cat in a garden'"></textarea> |
|
|
<div class="flex flex-wrap justify-center gap-4 mt-6"> |
|
|
<button id="optimizeBtn" class="bg-white text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-semibold flex items-center gap-2 transition-all"> |
|
|
<i class="fas fa-magic"></i> Optimize Prompt |
|
|
</button> |
|
|
<button id="clearBtn" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-full font-semibold flex items-center gap-2 transition-all"> |
|
|
<i class="fas fa-trash-alt"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-6xl mx-auto px-4 py-12"> |
|
|
<div id="optimizedSection" class="hidden fade-in"> |
|
|
<div class="flex flex-col md:flex-row gap-8 mb-12"> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-2xl font-bold mb-4 text-gray-800">Optimized Prompt</h2> |
|
|
<div id="optimizedPrompt" class="bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500"> |
|
|
|
|
|
</div> |
|
|
<div class="mt-4 flex gap-3"> |
|
|
<button id="copyBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-copy"></i> Copy |
|
|
</button> |
|
|
<button id="regenerateBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-sync-alt"></i> Regenerate |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-2xl font-bold mb-4 text-gray-800">Optimization Suggestions</h2> |
|
|
<div id="suggestions" class="bg-white p-6 rounded-xl shadow-md"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-12"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Keyword Enhancements</h2> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex flex-wrap gap-3 mb-6" id="keywordChips"> |
|
|
|
|
|
</div> |
|
|
<div class="flex gap-3"> |
|
|
<button id="addAllKeywordsBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-plus-circle"></i> Add All Keywords |
|
|
</button> |
|
|
<button id="refreshKeywordsBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-random"></i> Refresh Keywords |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Example Showcase</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="prompt-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg"> |
|
|
<h3 class="font-semibold text-lg text-purple-600 mb-3">Original Prompt</h3> |
|
|
<p class="text-gray-600 mb-4">"a cat in a garden"</p> |
|
|
<h3 class="font-semibold text-lg text-purple-600 mb-3">Optimized Prompt</h3> |
|
|
<p class="text-gray-800">"A fluffy orange tabby cat sitting in a sunny English garden surrounded by vibrant tulips and roses, soft afternoon lighting, ultra HD 8K resolution, highly detailed, shallow depth of field"</p> |
|
|
</div> |
|
|
<div class="prompt-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg"> |
|
|
<h3 class="font-semibold text-lg text-purple-600 mb-3">Original Prompt</h3> |
|
|
<p class="text-gray-600 mb-4">"futuristic city"</p> |
|
|
<h3 class="font-semibold text-lg text-purple-600 mb-3">Optimized Prompt</h3> |
|
|
<p class="text-gray-800">"Cyberpunk-style futuristic metropolis, neon lights illuminating a rainy night, towering glass skyscrapers with holographic advertisements, flying cars zooming between buildings, streets filled with people wearing high-tech clothing, predominantly blue-purple color scheme, cinematic lighting effects, hyper-realistic details"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="tipsSection" class="mt-16 bg-white rounded-xl shadow-md p-8"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-center text-gray-800">How to Write Better AI Image Generation Prompts</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="text-purple-600 text-3xl mb-4"> |
|
|
<i class="fas fa-layer-group"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Clear Structure</h3> |
|
|
<p class="text-gray-700">Organize prompts with "subject + environment + style + details" structure. First describe the main subject, then the background, followed by artistic style, and finally technical details.</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="text-purple-600 text-3xl mb-4"> |
|
|
<i class="fas fa-adjust"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Be Specific</h3> |
|
|
<p class="text-gray-700">Avoid vague terms, use concrete descriptions. For example, use "a fluffy orange tabby cat" instead of "a cat", or "a sunny English garden" instead of "garden".</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="text-purple-600 text-3xl mb-4"> |
|
|
<i class="fas fa-palette"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Style References</h3> |
|
|
<p class="text-gray-700">Include artistic styles or photographer references like "cyberpunk style", "Ansel Adams-style photography" or "Studio Ghibli animation style".</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="text-purple-600 text-3xl mb-4"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Lighting Descriptions</h3> |
|
|
<p class="text-gray-700">Describing lighting conditions can dramatically change image mood. Examples: "soft afternoon light", "dramatic sidelighting" or "neon-lit rainy night".</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="text-purple-600 text-3xl mb-4"> |
|
|
<i class="fas fa-camera"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Technical Details</h3> |
|
|
<p class="text-gray-700">Include technical terms like "8K ultra HD", "shallow depth of field", "film grain" or "cinematic lighting" to enhance image quality.</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="text-purple-600 text-3xl mb-4"> |
|
|
<i class="fas fa-balance-scale"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Balance Creativity</h3> |
|
|
<p class="text-gray-700">Strike a balance between specific guidance and creative freedom. Provide enough direction without overly restricting the AI's creativity.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="max-w-6xl mx-auto px-4 text-center"> |
|
|
<p>AI Image Prompt Optimizer © 2023 - Helping you create better AI-generated images</p> |
|
|
<div class="flex justify-center gap-4 mt-4"> |
|
|
<a href="#" class="hover:text-purple-300 transition-colors"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="hover:text-purple-300 transition-colors"><i class="fab fa-github"></i></a> |
|
|
<a href="#" class="hover:text-purple-300 transition-colors"><i class="fab fa-discord"></i></a> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<a href="https://flux1.ai/?utm_source=hf_ipo_space" class="text-purple-300 hover:text-purple-100 transition-colors">Flux AI Image Generator</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const promptInput = document.getElementById('promptInput'); |
|
|
const optimizeBtn = document.getElementById('optimizeBtn'); |
|
|
const clearBtn = document.getElementById('clearBtn'); |
|
|
const optimizedSection = document.getElementById('optimizedSection'); |
|
|
const optimizedPrompt = document.getElementById('optimizedPrompt'); |
|
|
const suggestions = document.getElementById('suggestions'); |
|
|
const keywordChips = document.getElementById('keywordChips'); |
|
|
const copyBtn = document.getElementById('copyBtn'); |
|
|
const regenerateBtn = document.getElementById('regenerateBtn'); |
|
|
const addAllKeywordsBtn = document.getElementById('addAllKeywordsBtn'); |
|
|
const refreshKeywordsBtn = document.getElementById('refreshKeywordsBtn'); |
|
|
|
|
|
|
|
|
const keywordCategories = { |
|
|
'Style': ['Cyberpunk', 'Minimalist', 'Surrealism', 'Impressionist', 'Steampunk', 'Futurism', 'Vintage', 'Watercolor'], |
|
|
'Lighting': ['Soft natural light', 'Dramatic sidelight', 'Neon lighting', 'Golden hour sunlight', 'Moonlight', 'Studio lighting', 'Candlelight'], |
|
|
'Details': ['8K ultra HD', 'Highly detailed', 'Shallow depth of field', 'Film grain', 'Cinematic lighting', 'HDR effect', 'Macro photography'], |
|
|
'Texture': ['Metallic', 'Furry', 'Glossy', 'Rough', 'Translucent', 'Reflective', 'Matte'], |
|
|
'Perspective': ['Aerial view', 'Macro view', 'Isometric view', 'Low-angle shot', 'First-person view', 'Wide-angle lens'], |
|
|
'Artists': ['Studio Ghibli style', 'Van Gogh style', 'Monet style', 'Ansel Adams style', 'Greg Rutkowski style'] |
|
|
}; |
|
|
|
|
|
|
|
|
optimizeBtn.addEventListener('click', function() { |
|
|
const originalPrompt = promptInput.value.trim(); |
|
|
if (!originalPrompt) { |
|
|
alert('Please enter a prompt'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const optimized = optimizePrompt(originalPrompt); |
|
|
const suggestionList = generateSuggestions(originalPrompt); |
|
|
|
|
|
optimizedPrompt.innerHTML = `<p class="text-gray-800">${optimized}</p>`; |
|
|
suggestions.innerHTML = suggestionList; |
|
|
|
|
|
generateKeywordChips(); |
|
|
|
|
|
optimizedSection.classList.remove('hidden'); |
|
|
optimizedSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
clearBtn.addEventListener('click', function() { |
|
|
promptInput.value = ''; |
|
|
optimizedSection.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
copyBtn.addEventListener('click', function() { |
|
|
const text = optimizedPrompt.textContent; |
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
const originalText = copyBtn.innerHTML; |
|
|
copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied'; |
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
regenerateBtn.addEventListener('click', function() { |
|
|
const originalPrompt = promptInput.value.trim(); |
|
|
if (!originalPrompt) return; |
|
|
|
|
|
const optimized = optimizePrompt(originalPrompt); |
|
|
optimizedPrompt.innerHTML = `<p class="text-gray-800">${optimized}</p>`; |
|
|
generateKeywordChips(); |
|
|
|
|
|
|
|
|
optimizedPrompt.classList.add('animate-pulse'); |
|
|
setTimeout(() => { |
|
|
optimizedPrompt.classList.remove('animate-pulse'); |
|
|
}, 500); |
|
|
}); |
|
|
|
|
|
|
|
|
addAllKeywordsBtn.addEventListener('click', function() { |
|
|
const currentPrompt = optimizedPrompt.textContent; |
|
|
const chips = keywordChips.querySelectorAll('.keyword-chip'); |
|
|
let newPrompt = currentPrompt; |
|
|
|
|
|
chips.forEach(chip => { |
|
|
const keyword = chip.textContent.trim(); |
|
|
if (!currentPrompt.includes(keyword)) { |
|
|
newPrompt += `, ${keyword}`; |
|
|
} |
|
|
}); |
|
|
|
|
|
optimizedPrompt.innerHTML = `<p class="text-gray-800">${newPrompt}</p>`; |
|
|
|
|
|
|
|
|
keywordChips.querySelectorAll('.keyword-chip').forEach(chip => { |
|
|
chip.classList.add('bg-green-100', 'border-green-400'); |
|
|
setTimeout(() => { |
|
|
chip.classList.remove('bg-green-100', 'border-green-400'); |
|
|
}, 1000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
refreshKeywordsBtn.addEventListener('click', function() { |
|
|
generateKeywordChips(); |
|
|
}); |
|
|
|
|
|
|
|
|
function optimizePrompt(prompt) { |
|
|
|
|
|
let optimized = prompt; |
|
|
|
|
|
|
|
|
if (!optimized.includes('fluffy') && (optimized.includes('cat') || optimized.includes('dog'))) { |
|
|
optimized = optimized.replace(/(cat|dog)/, 'fluffy $1'); |
|
|
} |
|
|
|
|
|
if (optimized.includes('city') && !optimized.includes('style')) { |
|
|
optimized += ', cyberpunk style'; |
|
|
} |
|
|
|
|
|
if (optimized.includes('person') && !optimized.includes('wearing')) { |
|
|
optimized = optimized.replace(/person/g, 'person wearing stylish clothes'); |
|
|
} |
|
|
|
|
|
|
|
|
if (!optimized.match(/(light|lighting|sunlight|illumination)/i)) { |
|
|
const lightOptions = ['soft natural light', 'dramatic sidelight', 'golden hour sunlight']; |
|
|
optimized += `, ${lightOptions[Math.floor(Math.random() * lightOptions.length)]}`; |
|
|
} |
|
|
|
|
|
|
|
|
if (!optimized.match(/(HD|ultra HD|4K|8K|detailed)/i)) { |
|
|
optimized += ', 8K ultra HD, highly detailed'; |
|
|
} |
|
|
|
|
|
|
|
|
if (!optimized.match(/(style|ism|art)/i)) { |
|
|
const styleOptions = ['surrealism', 'minimalist', 'impressionist style']; |
|
|
optimized += `, ${styleOptions[Math.floor(Math.random() * styleOptions.length)]}`; |
|
|
} |
|
|
|
|
|
return optimized; |
|
|
} |
|
|
|
|
|
|
|
|
function generateSuggestions(prompt) { |
|
|
const suggestions = []; |
|
|
|
|
|
if (prompt.length < 20) { |
|
|
suggestions.push('Your prompt is quite short, consider adding more descriptive details'); |
|
|
} |
|
|
|
|
|
if (!prompt.match(/(light|lighting|sunlight|illumination)/i)) { |
|
|
suggestions.push('Consider adding lighting conditions like "soft natural light" or "dramatic sidelight"'); |
|
|
} |
|
|
|
|
|
if (!prompt.match(/(style|ism|art)/i)) { |
|
|
suggestions.push('Adding artistic style references can significantly change the image, like "cyberpunk style" or "impressionist"'); |
|
|
} |
|
|
|
|
|
if (!prompt.match(/(HD|ultra HD|4K|8K|detailed)/i)) { |
|
|
suggestions.push('Include quality descriptors like "8K ultra HD" or "highly detailed" to improve image clarity'); |
|
|
} |
|
|
|
|
|
if (prompt.split(' ').length < 5) { |
|
|
suggestions.push('Try using more specific terms instead of generic ones, like "fluffy orange tabby cat" instead of "a cat"'); |
|
|
} |
|
|
|
|
|
let html = '<ul class="space-y-3">'; |
|
|
suggestions.forEach(suggestion => { |
|
|
html += `<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">${suggestion}</span> |
|
|
</li>`; |
|
|
}); |
|
|
html += '</ul>'; |
|
|
|
|
|
return html; |
|
|
} |
|
|
|
|
|
|
|
|
function generateKeywordChips() { |
|
|
keywordChips.innerHTML = ''; |
|
|
|
|
|
|
|
|
Object.keys(keywordCategories).forEach(category => { |
|
|
const keywords = keywordCategories[category]; |
|
|
const randomCount = Math.random() > 0.5 ? 2 : 1; |
|
|
const selected = shuffleArray(keywords).slice(0, randomCount); |
|
|
|
|
|
selected.forEach(keyword => { |
|
|
const chip = document.createElement('div'); |
|
|
chip.className = 'keyword-chip bg-gray-100 border border-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-purple-100 hover:border-purple-300 flex items-center gap-1'; |
|
|
chip.innerHTML = `<span class="text-purple-600">+</span> ${keyword}`; |
|
|
|
|
|
chip.addEventListener('click', function() { |
|
|
const currentPrompt = optimizedPrompt.textContent; |
|
|
if (!currentPrompt.includes(keyword)) { |
|
|
optimizedPrompt.innerHTML = `<p class="text-gray-800">${currentPrompt}, ${keyword}</p>`; |
|
|
} |
|
|
chip.classList.add('bg-purple-100', 'border-purple-400'); |
|
|
setTimeout(() => { |
|
|
chip.classList.remove('bg-purple-100', 'border-purple-400'); |
|
|
}, 500); |
|
|
}); |
|
|
|
|
|
keywordChips.appendChild(chip); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function shuffleArray(array) { |
|
|
const newArray = [...array]; |
|
|
for (let i = newArray.length - 1; i > 0; i--) { |
|
|
const j = Math.floor(Math.random() * (i + 1)); |
|
|
[newArray[i], newArray[j]] = [newArray[j], newArray[i]]; |
|
|
} |
|
|
return newArray; |
|
|
} |
|
|
}); |
|
|
</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=GavinKing/ai-image-prompt-optimizer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
