Spaces:

AnySue
/

ai-prompt-generator

Running

App Files Files Community

AnySue commited on Jun 11

Commit

f6585af

verified ·

1 Parent(s): d675efd

I don't need a drop down for this but can you please add artist names to the generated prompt - Follow Up Deployment

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +397 -19
prompts.txt +5 -0

README.md CHANGED Viewed

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

 ---
+title: ai-prompt-generator
+emoji: 🐳
 colorFrom: pink
+colorTo: red
 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,397 @@
-<!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 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 !important;
+        }
+        .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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+Hello, I would like a prompt generator where I enter a simple prompt and choose between Midjourney, Stable Diffusion, DALL E etc and then it generates a long prompt
+Please add to the art style drop down: watercolor, oil painting, pop art, Postmodernism, Portrait, Glass art, Graffiti, and photography
+please change the background color for the art style drop down so that I can see the choices
+Please do the same for the Detail Level, Quality, and Lighting drop downs
+I don't need a drop down for this but can you please add artist names to the generated prompt