Spaces:

thetwistedpixie
/

anycoder-00324b82

Running

App Files Files Community

thetwistedpixie commited on Dec 26, 2025

Commit

0b64be0

verified ·

1 Parent(s): 8a938f1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +664 -821

index.html CHANGED Viewed

@@ -3,886 +3,729 @@
 <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ComfyUI Workflow</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+            background-color: #000000;
+            color: #f5f5f7;
+            line-height: 1.6;
+            padding: 20px;
             min-height: 100vh;
         }
+        .container {
             max-width: 1200px;
             margin: 0 auto;
         }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 40px 20px;
         }
+        .header h1 {
+            font-size: 48px;
+            font-weight: 600;
+            color: #ffffff;
+            margin-bottom: 12px;
+            letter-spacing: -0.02em;
         }
+        .header p {
+            font-size: 18px;
+            color: #86868b;
+            font-weight: 400;
         }
+        .controls {
             display: flex;
+            gap: 12px;
+            margin-bottom: 24px;
             justify-content: center;
         }
         .btn {
+            padding: 12px 24px;
             border: none;
+            border-radius: 24px;
+            font-size: 14px;
+            font-weight: 500;
             cursor: pointer;
+            transition: all 0.2s;
+            font-family: inherit;
         }
         .btn-primary {
+            background: #ffffff;
+            color: #000000;
         }
         .btn-primary:hover {
+            background: #f5f5f7;
+            transform: scale(0.98);
         }
         .btn-secondary {
+            background: #1d1d1f;
+            color: #f5f5f7;
+            border: 1px solid #424245;
         }
         .btn-secondary:hover {
+            background: #2d2d2f;
+            transform: scale(0.98);
+        }
+        .json-container {
+            background-color: #1d1d1f;
+            border-radius: 16px;
+            padding: 32px;
+            overflow-x: auto;
+            border: 1px solid #424245;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        }
+        pre {
+            margin: 0;
+            font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+            font-size: 13px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            word-wrap: break-word;
         }
+        .json-key {
+            color: #9cdcfe;
         }
+        .json-string {
+            color: #ce9178;
         }
+        .json-number {
+            color: #b5cea8;
         }
+        .json-boolean {
+            color: #569cd6;
         }
+        .json-null {
+            color: #569cd6;
         }
+        .success {
+            color: #30d158;
         }
         @media (max-width: 768px) {
+            .header h1 {
+                font-size: 32px;
             }
+            .controls {
+                flex-direction: column;
             }
+            .json-container {
+                padding: 20px;
             }
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <div class="header">
+            <h1>ComfyUI Workflow</h1>
+            <p>View and download your workflow JSON</p>
+        </div>
+        <div class="controls">
+            <button class="btn btn-primary" onclick="downloadJSON()">Download JSON</button>
+            <button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button>
+        </div>
+        <div class="json-container">
+            <pre id="json-content">{
+  "last_node_id": 10,
+  "last_link_id": 12,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [
+        20,
+        50
+      ],
+      "size": {
+        "0": 350,
+        "1": 100
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [
+            1
+          ],
+          "shape": 3,
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [
+            2,
+            3
+          ],
+          "shape": 3,
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [
+            7
+          ],
+          "shape": 3,
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": [
+        "v1-5-pruned-emaonly.safetensors"
+      ]
+    },
+    {
+      "id": 3,
+      "type": "CLIPTextEncode",
+      "pos": [
+        420,
+        50
+      ],
+      "size": {
+        "0": 425,
+        "1": 180
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            4
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "beautiful landscape, mountains, sunset, detailed, 8k, masterpiece"
+      ]
+    },
+    {
+      "id": 4,
+      "type": "CLIPTextEncode",
+      "pos": [
+        420,
+        280
+      ],
+      "size": {
+        "0": 425,
+        "1": 180
+      },
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "link": 3
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            5
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "ugly, blurry, low quality, distorted"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [
+        420,
+        500
+      ],
+      "size": {
+        "0": 315,
+        "1": 110
+      },
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            6
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "EmptyLatentImage"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1
+      ]
+    },
+    {
+      "id": 6,
+      "type": "KSampler",
+      "pos": [
+        900,
+        150
+      ],
+      "size": {
+        "0": 300,
+        "1": 260
+      },
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 1
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 4
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": 5
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 6
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            8
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        123456789,
+        "randomize",
+        20,
+        7,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 7,
+      "type": "VAEDecode",
+      "pos": [
+        1280,
+        150
+      ],
+      "size": {
+        "0": 210,
+        "1": 50
+      },
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": 8
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 7
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            9
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      }
+    },
+    {
+      "id": 8,
+      "type": "SaveImage",
+      "pos": [
+        1560,
+        150
+      ],
+      "size": {
+        "0": 315,
+        "1": 60
+      },
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 9
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SaveImage"
+      },
+      "widgets_values": [
+        "ComfyUI_Image"
+      ]
+    },
+    {
+      "id": 9,
+      "type": "KSamplerAdvanced",
+      "pos": [
+        900,
+        500
+      ],
+      "size": {
+        "0": 300,
+        "1": 330
+      },
+      "flags": {},
+      "order": 7,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 1
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 4
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": 5
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 6
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            10
+          ],
+          "shape": 3,
+          "slot_index": 0
+        },
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSamplerAdvanced"
+      },
+      "widgets_values": [
+        "enable",
+        123456789,
+        "randomize",
+        20,
+        7,
+        "euler",
+        "normal",
+        0,
+        20,
+        "disable"
+      ]
+    },
+    {
+      "id": 10,
+      "type": "PreviewImage",
+      "pos": [
+        1280,
+        500
+      ],
+      "size": {
+        "0": 295,
+        "1": 290
+      },
+      "flags": {},
+      "order": 8,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 11
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      }
+    },
+    {
+      "id": 11,
+      "type": "VAEDecode",
+      "pos": [
+        1280,
+        320
+      ],
+      "size": {
+        "0": 210,
+        "1": 50
+      },
+      "flags": {},
+      "order": 9,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": 10
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 7
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            11
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      }
+    }
+  ],
+  "links": [
+    [
+      1,
+      1,
+      0,
+      6,
+      0,
+      "MODEL"
+    ],
+    [
+      2,
+      1,
+      1,
+      3,
+      0,
+      "CLIP"
+    ],
+    [
+      3,
+      1,
+      1,
+      4,
+      0,
+      "CLIP"
+    ],
+    [
+      4,
+      3,
+      0,
+      6,
+      1,
+      "CONDITIONING"
+    ],
+    [
+      5,
+      4,
+      0,
+      6,
+      2,
+      "CONDITIONING"
+    ],
+    [
+      6,
+      5,
+      0,
+      6,
+      3,
+      "LATENT"
+    ],
+    [
+      7,
+      1,
+      2,
+      7,
+      1,
+      "VAE"
+    ],
+    [
+      8,
+      6,
+      0,
+      7,
+      0,
+      "LATENT"
+    ],
+    [
+      9,
+      7,
+      0,
+      8,
+      0,
+      "IMAGE"
+    ],
+    [
+      10,
+      9,
+      0,
+      11,
+      0,
+      "LATENT"
+    ],
+    [
+      11,
+      11,
+      0,
+      10,
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}</pre>
         </div>
     </div>
     <script>
+        function copyToClipboard() {
+            const jsonContent = document.getElementById('json-content').textContent;
+            navigator.clipboard.writeText(jsonContent).then(() => {
+                const btn = event.target;
+                const originalText = btn.textContent;
+                btn.textContent = 'Copied!';
+                btn.classList.add('success');
                 setTimeout(() => {
+                    btn.textContent = originalText;
+                    btn.classList.remove('success');
+                }, 2000);
+            }).catch(err => {
+                alert('Failed to copy to clipboard');
             });
+        }
+        function downloadJSON() {
+            const jsonContent = document.getElementById('json-content').textContent;
+            const blob = new Blob([jsonContent], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'comfyui_workflow.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            const btn = event.target;
+            const originalText = btn.textContent;
+            btn.textContent = 'Downloaded!';
+            btn.classList.add('success');
             setTimeout(() => {
+                btn.textContent = originalText;
+                btn.classList.remove('success');
+            }, 2000);
         }
+        // Add syntax highlighting
+        function highlightJSON() {
+            const content = document.getElementById('json-content');
+            let html = content.innerHTML;
+            // Highlight different JSON elements
+            html = html.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');
+            html = html.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>');
+            html = html.replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>');
+            html = html.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>');
+            html = html.replace(/: null/g, ': <span class="json-null">null</span>');
+            content.innerHTML = html;
         }
+        // Apply syntax highlighting after page load
+        window.addEventListener('load', highlightJSON);
     </script>
 </body>
 </html>