Spaces:

thetwistedpixie
/

anycoder-00324b82

Running

App Files Files Community

thetwistedpixie commited on Dec 26, 2025

Commit

e348e14

verified ·

1 Parent(s): e04ef7d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +888 -19

index.html CHANGED Viewed

@@ -1,19 +1,888 @@
-<!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 Craft - Creative Image Prompt Generator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --dark-bg: #0f0f23;
+            --card-bg: rgba(255, 255, 255, 0.05);
+            --text-primary: #ffffff;
+            --text-secondary: #b8b8d1;
+            --border-color: rgba(255, 255, 255, 0.1);
+            --success: #00ff88;
+            --warning: #ffaa00;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--dark-bg);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 20%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+            z-index: -1;
+            animation: floatGradient 20s ease infinite;
+        }
+        @keyframes floatGradient {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            33% { transform: translate(-20px, -20px) rotate(120deg); }
+            66% { transform: translate(20px, -10px) rotate(240deg); }
+        }
+        header {
+            padding: 2rem;
+            text-align: center;
+            border-bottom: 1px solid var(--border-color);
+            backdrop-filter: blur(10px);
+            background: rgba(15, 15, 35, 0.8);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        h1 {
+            font-size: 2.5rem;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 0.5rem;
+            animation: glow 3s ease-in-out infinite;
+        }
+        @keyframes glow {
+            0%, 100% { filter: brightness(1); }
+            50% { filter: brightness(1.2); }
+        }
+        .subtitle {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            margin-bottom: 1rem;
+        }
+        .built-with {
+            display: inline-block;
+            padding: 0.5rem 1rem;
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 20px;
+            text-decoration: none;
+            color: var(--text-secondary);
+            transition: all 0.3s ease;
+        }
+        .built-with:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-primary);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+        }
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 3rem 2rem;
+        }
+        .controls-section {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+        .control-card {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 20px;
+            padding: 1.5rem;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .control-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
+            border-color: rgba(102, 126, 234, 0.3);
+        }
+        .control-card h3 {
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1.2rem;
+        }
+        .control-card i {
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .tag-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+        .tag {
+            padding: 0.3rem 0.8rem;
+            background: rgba(102, 126, 234, 0.2);
+            border: 1px solid rgba(102, 126, 234, 0.3);
+            border-radius: 15px;
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .tag:hover {
+            background: rgba(102, 126, 234, 0.3);
+            transform: scale(1.05);
+        }
+        .tag.active {
+            background: var(--primary-gradient);
+            border-color: transparent;
+        }
+        .prompt-display {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 20px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            backdrop-filter: blur(10px);
+            min-height: 200px;
+            position: relative;
+            overflow: hidden;
+        }
+        .prompt-display::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: var(--primary-gradient);
+            border-radius: 20px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        .prompt-display.enhanced::before {
+            opacity: 0.3;
+        }
+        .prompt-text {
+            font-size: 1.2rem;
+            line-height: 1.6;
+            margin-bottom: 1rem;
+            animation: fadeIn 0.5s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .prompt-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+        .prompt-tag {
+            padding: 0.2rem 0.6rem;
+            background: rgba(79, 172, 254, 0.2);
+            border: 1px solid rgba(79, 172, 254, 0.3);
+            border-radius: 10px;
+            font-size: 0.75rem;
+            color: #4facfe;
+        }
+        .action-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .btn {
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        .btn:active::before {
+            width: 300px;
+            height: 300px;
+        }
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+        }
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+        }
+        .btn-secondary {
+            background: transparent;
+            color: var(--text-primary);
+            border: 2px solid var(--border-color);
+        }
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.05);
+            border-color: rgba(102, 126, 234, 0.5);
+            transform: translateY(-3px);
+        }
+        .history-section {
+            margin-top: 3rem;
+        }
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        .history-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1rem;
+        }
+        .history-item {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 15px;
+            padding: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .history-item:hover {
+            transform: scale(1.02);
+            border-color: rgba(102, 126, 234, 0.3);
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
+        }
+        .history-item-text {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .history-item-time {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            opacity: 0.6;
+        }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            padding: 1rem 1.5rem;
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transform: translateX(400px);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+        }
+        .toast.show {
+            transform: translateX(0);
+        }
+        .toast.success {
+            border-color: var(--success);
+            background: rgba(0, 255, 136, 0.1);
+        }
+        .enhancement-tips {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+        }
+        .tips-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+        }
+        .tips-list {
+            list-style: none;
+        }
+        .tips-list li {
+            padding: 0.5rem 0;
+            color: var(--text-secondary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .tips-list li::before {
+            content: '✨';
+        }
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            .controls-section {
+                grid-template-columns: 1fr;
+            }
+            .history-grid {
+                grid-template-columns: 1fr;
+            }
+            .btn {
+                padding: 0.8rem 1.5rem;
+                font-size: 0.9rem;
+            }
+        }
+        .slider-container {
+            margin-top: 1rem;
+        }
+        .slider-label {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+        .slider {
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            -webkit-appearance: none;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary-gradient);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .slider::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+        }
+        .slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary-gradient);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="header-content">
+            <h1>AI Prompt Craft</h1>
+            <p class="subtitle">Master the Art of AI Image Generation with Creative Prompts</p>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+                <i class="fas fa-code"></i> Built with anycoder
+            </a>
+        </div>
+    </header>
+    <main>
+        <section class="controls-section">
+            <div class="control-card">
+                <h3><i class="fas fa-palette"></i> Art Style</h3>
+                <div class="tag-group" id="styleTags">
+                    <span class="tag" data-type="style" data-value="photorealistic">Photorealistic</span>
+                    <span class="tag" data-type="style" data-value="digital painting">Digital Painting</span>
+                    <span class="tag" data-type="style" data-value="anime style">Anime Style</span>
+                    <span class="tag" data-type="style" data-value="oil painting">Oil Painting</span>
+                    <span class="tag" data-type="style" data-value="watercolor">Watercolor</span>
+                    <span class="tag" data-type="style" data-value="3D render">3D Render</span>
+                    <span class="tag" data-type="style" data-value="sketch">Sketch</span>
+                    <span class="tag" data-type="style" data-value="abstract">Abstract</span>
+                </div>
+            </div>
+            <div class="control-card">
+                <h3><i class="fas fa-magic"></i> Enhancement Words</h3>
+                <div class="tag-group" id="enhancementTags">
+                    <span class="tag" data-type="enhancement" data-value="hyperdetailed">Hyperdetailed</span>
+                    <span class="tag" data-type="enhancement" data-value="cinematic lighting">Cinematic</span>
+                    <span class="tag" data-type="enhancement" data-value="vibrant colors">Vibrant</span>
+                    <span class="tag" data-type="enhancement" data-value="dramatic">Dramatic</span>
+                    <span class="tag" data-type="enhancement" data-value="ethereal">Ethereal</span>
+                    <span class="tag" data-type="enhancement" data-value="surreal">Surreal</span>
+                    <span class="tag" data-type="enhancement" data-value="majestic">Majestic</span>
+                    <span class="tag" data-type="enhancement" data-value="intricate">Intricate</span>
+                </div>
+            </div>
+            <div class="control-card">
+                <h3><i class="fas fa-camera"></i> Camera & Composition</h3>
+                <div class="tag-group" id="cameraTags">
+                    <span class="tag" data-type="camera" data-value="wide angle">Wide Angle</span>
+                    <span class="tag" data-type="camera" data-value="macro shot">Macro</span>
+                    <span class="tag" data-type="camera" data-value="bird's eye view">Bird's Eye</span>
+                    <span class="tag" data-type="camera" data-value="close up">Close Up</span>
+                    <span class="tag" data-type="camera" data-value="panoramic">Panoramic</span>
+                    <span class="tag" data-type="camera" data-value="portrait">Portrait</span>
+                    <span class="tag" data-type="camera" data-value="action shot">Action Shot</span>
+                    <span class="tag" data-type="camera" data-value="depth of field">Depth of Field</span>
+                </div>
+            </div>
+            <div class="control-card">
+                <h3><i class="fas fa-adjust"></i> Quality Settings</h3>
+                <div class="slider-container">
+                    <div class="slider-label">
+                        <span>Detail Level</span>
+                        <span id="detailValue">50</span>
+                    </div>
+                    <input type="range" class="slider" id="detailSlider" min="0" max="100" value="50">
+                </div>
+                <div class="slider-container">
+                    <div class="slider-label">
+                        <span>Creativity</span>
+                        <span id="creativityValue">50</span>
+                    </div>
+                    <input type="range" class="slider" id="creativitySlider" min="0" max="100" value="50">
+                </div>
+            </div>
+        </section>
+        <section class="prompt-display" id="promptDisplay">
+            <div class="prompt-text" id="promptText">
+                Click "Generate Prompt" to create a unique AI image prompt with artistic enhancements and professional composition techniques.
+            </div>
+            <div class="prompt-tags" id="promptTags"></div>
+        </section>
+        <section class="action-buttons">
+            <button class="btn btn-primary" id="generateBtn">
+                <i class="fas fa-sparkles"></i> Generate Prompt
+            </button>
+            <button class="btn btn-secondary" id="randomizeBtn">
+                <i class="fas fa-dice"></i> Randomize All
+            </button>
+            <button class="btn btn-secondary" id="copyBtn">
+                <i class="fas fa-copy"></i> Copy Prompt
+            </button>
+            <button class="btn btn-secondary" id="enhanceBtn">
+                <i class="fas fa-wand-magic-sparkles"></i> Enhance
+            </button>
+        </section>
+        <section class="enhancement-tips">
+            <div class="tips-header">
+                <i class="fas fa-lightbulb"></i>
+                <span>Pro Tips for Better Prompts</span>
+            </div>
+            <ul class="tips-list">
+                <li>Combine multiple styles for unique results (e.g., "photorealistic with anime elements")</li>
+                <li>Use specific lighting descriptions like "golden hour" or "neon glow"</li>
+                <li>Include emotional words like "nostalgic", "mysterious", or "serene"</li>
+                <li>Add technical details like "8K resolution", "Unreal Engine 5", or "Octane render"</li>
+                <li>Experiment with negative prompts to refine your results</li>
+            </ul>
+        </section>
+        <section class="history-section">
+            <div class="history-header">
+                <h2><i class="fas fa-history"></i> Recent Prompts</h2>
+                <button class="btn btn-secondary" id="clearHistoryBtn">
+                    <i class="fas fa-trash"></i> Clear
+                </button>
+            </div>
+            <div class="history-grid" id="historyGrid">
+                <!-- History items will be added here -->
+            </div>
+        </section>
+    </main>
+    <div class="toast" id="toast">
+        <i class="fas fa-check-circle"></i>
+        <span id="toastMessage">Prompt copied to clipboard!</span>
+    </div>
+    <script>
+        // Prompt Generator Class
+        class PromptGenerator {
+            constructor() {
+                this.subjects = [
+                    'a mystical forest with glowing mushrooms',
+                    'an ancient dragon sleeping on treasure',
+                    'a futuristic city at sunset',
+                    'a serene Japanese garden in spring',
+                    'a cosmic nebula with stars',
+                    'a steampunk airship in clouds',
+                    'an underwater coral kingdom',
+                    'a medieval castle on a mountain',
+                    'a cyberpunk street in rain',
+                    'a magical library with floating books',
+                    'a desert oasis with palm trees',
+                    'a Viking longship in stormy seas',
+                    'a space station orbiting Earth',
+                    'a enchanted cottage with fairy lights',
+                    'a tropical paradise waterfall'
+                ];
+                this.atmospheres = [
+                    'dreamlike atmosphere',
+                    'mysterious ambiance',
+                    'peaceful and serene',
+                    'dramatic and intense',
+                    'whimsical and playful',
+                    'dark and moody',
+                    'bright and cheerful',
+                    'elegant and sophisticated',
+                    'rustic and natural',
+                    'futuristic and sleek'
+                ];
+                this.technicalTerms = [
+                    '8K resolution',
+                    'Unreal Engine 5',
+                    'Octane render',
+                    'V-Ray',
+                    'photorealistic details',
+                    'sharp focus',
+                    'depth of field',
+                    'bokeh effect',
+                    'global illumination',
+                    'ambient occlusion'
+                ];
+                this.selectedStyles = new Set();
+                this.selectedEnhancements = new Set();
+                this.selectedCamera = new Set();
+                this.detailLevel = 50;
+                this.creativity = 50;
+                this.history = [];
+            }
+            generatePrompt() {
+                const subject = this.getRandomElement(this.subjects);
+                const atmosphere = this.getRandomElement(this.atmospheres);
+                const technical = this.getRandomElement(this.technicalTerms);
+                let prompt = subject + ', ' + atmosphere;
+                // Add selected styles
+                if (this.selectedStyles.size > 0) {
+                    prompt += ', ' + Array.from(this.selectedStyles).join(', ');
+                }
+                // Add selected enhancements
+                if (this.selectedEnhancements.size > 0) {
+                    prompt += ', ' + Array.from(this.selectedEnhancements).join(', ');
+                }
+                // Add camera/composition
+                if (this.selectedCamera.size > 0) {
+                    prompt += ', ' + Array.from(this.selectedCamera).join(' ');
+                }
+                // Add technical terms based on detail level
+                if (this.detailLevel > 70) {
+                    prompt += ', ' + technical;
+                }
+                if (this.detailLevel > 85) {
+                    prompt += ', masterpiece, best quality';
+                }
+                // Add creativity boosters
+                if (this.creativity > 70) {
+                    prompt += ', surreal, imaginative, unique perspective';
+                }
+                return prompt;
+            }
+            getRandomElement(array) {
+                return array[Math.floor(Math.random() * array.length)];
+            }
+            enhancePrompt(prompt) {
+                const enhancements = [
+                    'masterpiece, best quality, highly detailed',
+                    'ultra realistic, 8K, sharp focus',
+                    'cinematic lighting, dramatic shadows',
+                    'vibrant colors, rich textures',
+                    'award-winning photography',
+                    'professional composition'
+                ];
+                const randomEnhancement = this.getRandomElement(enhancements);
+                return prompt + ', ' + randomEnhancement;
+            }
+            addToHistory(prompt) {
+                const historyItem = {
+                    text: prompt,
+                    timestamp: new Date().toLocaleTimeString()
+                };
+                this.history.unshift(historyItem);
+                if (this.history.length > 6) {
+                    this.history.pop();
+                }
+                this.updateHistoryDisplay();
+            }
+            updateHistoryDisplay() {
+                const historyGrid = document.getElementById('historyGrid');
+                historyGrid.innerHTML = '';
+                this.history.forEach(item => {
+                    const historyDiv = document.createElement('div');
+                    historyDiv.className = 'history-item';
+                    historyDiv.innerHTML = `
+                        <div class="history-item-text">${item.text}</div>
+                        <div class="history-item-time">${item.timestamp}</div>
+                    `;
+                    historyDiv.addEventListener('click', () => {
+                        document.getElementById('promptText').textContent = item.text;
+                        this.showToast('History prompt loaded!');
+                    });
+                    historyGrid.appendChild(historyDiv);
+                });
+            }
+            showToast(message, type = 'success') {
+                const toast = document.getElementById('toast');
+                const toastMessage = document.getElementById('toastMessage');
+                toastMessage.textContent = message;
+                toast.className = `toast ${type} show`;
+                setTimeout(() => {
+                    toast.classList.remove('show');
+                }, 3000);
+            }
+        }
+        // Initialize
+        const generator = new PromptGenerator();
+        // Event Listeners
+        document.getElementById('generateBtn').addEventListener('click', () => {
+            const prompt = generator.generatePrompt();
+            const promptText = document.getElementById('promptText');
+            promptText.style.animation = 'none';
+            setTimeout(() => {
+                promptText.textContent = prompt;
+                promptText.style.animation = 'fadeIn 0.5s ease';
+            }, 10);
+            generator.addToHistory(prompt);
+            updatePromptTags();
+            generator.showToast('New prompt generated!');
+        });
+        document.getElementById('randomizeBtn').addEventListener('click', () => {
+            // Randomize all tags
+            document.querySelectorAll('.tag').forEach(tag => {
+                if (Math.random() > 0.5) {
+                    tag.classList.add('active');
+                } else {
+                    tag.classList.remove('active');
+                }
+            });
+            // Update selections
+            updateSelections();
+            // Randomize sliders
+            const randomDetail = Math.floor(Math.random() * 100);
+            const randomCreativity = Math.floor(Math.random() * 100);
+            document.getElementById('detailSlider').value = randomDetail;
+            document.getElementById('creativitySlider').value = randomCreativity;
+            document.getElementById('detailValue').textContent = randomDetail;
+            document.getElementById('creativityValue').textContent = randomCreativity;
+            generator.detailLevel = randomDetail;
+            generator.creativity = randomCreativity;
+            // Generate new prompt
+            document.getElementById('generateBtn').click();
+        });
+        document.getElementById('copyBtn').addEventListener('click', () => {
+            const promptText = document.getElementById('promptText').textContent;
+            navigator.clipboard.writeText(promptText).then(() => {
+                generator.showToast('Prompt copied to clipboard!');
+            });
+        });
+        document.getElementById('enhanceBtn').addEventListener('click', () => {
+            const currentPrompt = document.getElementById('promptText').textContent;
+            const enhanced = generator.enhancePrompt(currentPrompt);
+            const promptText = document.getElementById('promptText');
+            promptText.textContent = enhanced;
+            document.getElementById('promptDisplay').classList.add('enhanced');
+            setTimeout(() => {
+                document.getElementById('promptDisplay').classList.remove('enhanced');
+            }, 1000);
+            generator.showToast('Prompt enhanced!');
+        });
+        document.getElementById('clearHistoryBtn').addEventListener('click', () => {
+            generator.history = [];
+            generator.updateHistoryDisplay();
+            generator.showToast('History cleared!');
+        });
+        // Tag selection
+        document.querySelectorAll('.tag').forEach(tag => {
+            tag.addEventListener('click', function() {
+                this.classList.toggle('active');
+                updateSelections();
+            });
+        });
+        function updateSelections() {
+            generator.selectedStyles.clear();
+            generator.selectedEnhancements.clear();
+            generator.selectedCamera.clear();
+            document.querySelectorAll('.tag.active').forEach(tag => {
+                const type = tag.dataset.type;
+                const value = tag.dataset.value;
+                if (type === 'style') generator.selectedStyles.add(value);
+                else if (type === 'enhancement') generator.selectedEnhancements.add(value);
+                else if (type === 'camera') generator.selectedCamera.add(value);
+            });
+        }
+        function updatePromptTags() {
+            const promptTags = document.getElementById('promptTags');
+            promptTags.innerHTML = '';
+            const allTags = [
+                ...generator.selectedStyles,
+                ...generator.selectedEnhancements,
+                ...generator.selectedCamera
+            ];
+            allTags.forEach(tag => {
+                const tagSpan = document.createElement('span');
+                tagSpan.className = 'prompt-tag';
+                tagSpan.textContent = tag;
+                promptTags.appendChild(tagSpan);
+            });
+        }
+        // Sliders
+        document.getElementById('detailSlider').addEventListener('input', function() {
+            generator.detailLevel = this.value;
+            document.getElementById('detailValue').textContent = this.value;
+        });
+        document.getElementById('creativitySlider').addEventListener('input', function() {
+            generator.creativity = this.value;
+            document.getElementById('creativityValue').textContent = this.value;
+        });
+        // Initialize with a random prompt on load
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                document.getElementById('generateBtn').click();
+            }, 500);
+        });
+    </script>
+</body>
+</html>