Spaces:

AISaasHub
/

ai-image-prompt-optimizer

Running

App Files Files Community

GavinKing commited on Apr 3

Commit

51076de

verified ·

1 Parent(s): f25ec01

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +408 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai Image Prompt Optimizer
-emoji: 🌖
-colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai-image-prompt-optimizer
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,408 @@
-<!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">
+<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">
+                        <!-- Optimized prompt will appear here -->
+                    </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">
+                        <!-- Suggestions will appear here -->
+                    </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">
+                        <!-- Keyword chips will appear here -->
+                    </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 &copy; 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');
+            // Keyword database
+            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']
+            };
+            // Optimize prompt
+            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' });
+            });
+            // Clear input
+            clearBtn.addEventListener('click', function() {
+                promptInput.value = '';
+                optimizedSection.classList.add('hidden');
+            });
+            // Copy optimized prompt
+            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);
+                });
+            });
+            // Regenerate
+            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();
+                // Add animation
+                optimizedPrompt.classList.add('animate-pulse');
+                setTimeout(() => {
+                    optimizedPrompt.classList.remove('animate-pulse');
+                }, 500);
+            });
+            // Add all keywords
+            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>`;
+                // Add animation
+                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);
+                });
+            });
+            // Refresh keywords
+            refreshKeywordsBtn.addEventListener('click', function() {
+                generateKeywordChips();
+            });
+            // Prompt optimization logic
+            function optimizePrompt(prompt) {
+                // Simple optimization logic - in practice you'd use more complex algorithms
+                let optimized = prompt;
+                // Add detail descriptions
+                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');
+                }
+                // Ensure lighting description
+                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)]}`;
+                }
+                // Add quality description
+                if (!optimized.match(/(HD|ultra HD|4K|8K|detailed)/i)) {
+                    optimized += ', 8K ultra HD, highly detailed';
+                }
+                // Add style description
+                if (!optimized.match(/(style|ism|art)/i)) {
+                    const styleOptions = ['surrealism', 'minimalist', 'impressionist style'];
+                    optimized += `, ${styleOptions[Math.floor(Math.random() * styleOptions.length)]}`;
+                }
+                return optimized;
+            }
+            // Generate optimization suggestions
+            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;
+            }
+            // Generate keyword chips
+            function generateKeywordChips() {
+                keywordChips.innerHTML = '';
+                // Select 1-2 random keywords from each category
+                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);
+                    });
+                });
+            }
+            // Helper function: Shuffle array
+            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>