Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuraFlow AI | Image Generation & Editing Pipeline</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #06b6d4; | |
| --dark: #0f172a; | |
| --light: #f8fafc; | |
| --gray: #94a3b8; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --error: #ef4444; | |
| --card-bg: rgba(255, 255, 255, 0.05); | |
| --border: rgba(255, 255, 255, 0.1); | |
| --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: var(--light); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| /* Header */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| margin-bottom: 30px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .logo i { | |
| font-size: 2.2rem; | |
| } | |
| .anycoder-link { | |
| color: var(--secondary); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary); | |
| text-decoration: underline; | |
| } | |
| /* Main Layout */ | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| } | |
| @media (max-width: 1024px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Cards */ | |
| .card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 24px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .card:hover { | |
| border-color: rgba(99, 102, 241, 0.3); | |
| box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .card-title { | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .card-title i { | |
| color: var(--secondary); | |
| } | |
| /* Input Section */ | |
| .prompt-container { | |
| margin-bottom: 25px; | |
| } | |
| .prompt-label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: 500; | |
| color: var(--gray); | |
| } | |
| .prompt-input { | |
| width: 100%; | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 16px; | |
| color: var(--light); | |
| font-size: 1rem; | |
| resize: vertical; | |
| min-height: 120px; | |
| transition: var(--transition); | |
| } | |
| .prompt-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); | |
| } | |
| /* Model Selection */ | |
| .model-selection { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 25px; | |
| } | |
| .model-option { | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 15px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .model-option:hover { | |
| border-color: var(--primary); | |
| transform: translateY(-3px); | |
| } | |
| .model-option.active { | |
| border-color: var(--primary); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .model-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| color: var(--secondary); | |
| } | |
| .model-name { | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .model-desc { | |
| font-size: 0.85rem; | |
| color: var(--gray); | |
| } | |
| /* Parameters */ | |
| .parameters { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 25px; | |
| } | |
| .param-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .param-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| } | |
| .param-value { | |
| color: var(--secondary); | |
| font-weight: 600; | |
| } | |
| .slider { | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: rgba(15, 23, 42, 0.7); | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| cursor: pointer; | |
| border: 3px solid var(--light); | |
| } | |
| /* Buttons */ | |
| .btn-group { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .btn { | |
| flex: 1; | |
| padding: 16px 24px; | |
| border: none; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: translateY(-3px); | |
| } | |
| /* Image Display */ | |
| .image-container { | |
| position: relative; | |
| width: 100%; | |
| height: 400px; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 25px; | |
| } | |
| .image-placeholder { | |
| text-align: center; | |
| color: var(--gray); | |
| } | |
| .image-placeholder i { | |
| font-size: 4rem; | |
| margin-bottom: 15px; | |
| color: var(--secondary); | |
| } | |
| .generated-image { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| display: none; | |
| } | |
| /* Pipeline Visualization */ | |
| .pipeline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 40px 0; | |
| } | |
| .pipeline-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| width: 120px; | |
| position: relative; | |
| } | |
| .pipeline-step:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| top: 25px; | |
| right: -60px; | |
| width: 120px; | |
| height: 2px; | |
| background: var(--border); | |
| } | |
| .step-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 2px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| transition: var(--transition); | |
| } | |
| .pipeline-step.active .step-icon { | |
| background: rgba(99, 102, 241, 0.2); | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .step-name { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| } | |
| /* Editing Tools */ | |
| .edit-tools { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .edit-tool { | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 15px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .edit-tool:hover { | |
| border-color: var(--secondary); | |
| transform: translateY(-3px); | |
| } | |
| .edit-tool i { | |
| font-size: 1.5rem; | |
| color: var(--secondary); | |
| margin-bottom: 10px; | |
| } | |
| /* Processing Animation */ | |
| .processing { | |
| display: none; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid rgba(6, 182, 212, 0.2); | |
| border-top-color: var(--secondary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 15px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 30px 0; | |
| margin-top: 40px; | |
| border-top: 1px solid var(--border); | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .main-content { | |
| gap: 20px; | |
| } | |
| .card { | |
| padding: 20px; | |
| } | |
| .model-selection { | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| } | |
| .pipeline { | |
| flex-wrap: wrap; | |
| gap: 30px; | |
| } | |
| .pipeline-step:not(:last-child)::after { | |
| display: none; | |
| } | |
| .btn-group { | |
| flex-direction: column; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 15px; | |
| } | |
| .logo { | |
| font-size: 1.4rem; | |
| } | |
| .parameters { | |
| grid-template-columns: 1fr; | |
| } | |
| .image-container { | |
| height: 300px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-brain-circuit"></i> | |
| <span>NeuraFlow AI</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fas fa-code"></i> | |
| <span>Built with anycoder</span> | |
| </a> | |
| </header> | |
| <div class="main-content"> | |
| <!-- Generation Panel --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title"> | |
| <i class="fas fa-robot"></i> | |
| AI Image Generation | |
| </h2> | |
| <div class="status-indicator"> | |
| <span class="status-dot active"></span> | |
| <span class="status-text">Ready</span> | |
| </div> | |
| </div> | |
| <div class="prompt-container"> | |
| <label class="prompt-label" for="prompt-input"> | |
| <i class="fas fa-keyboard"></i> Describe your image | |
| </label> | |
| <textarea | |
| id="prompt-input" | |
| class="prompt-input" | |
| placeholder="A futuristic cityscape at sunset with flying cars and neon lights, cyberpunk style, highly detailed, 4k" | |
| >A futuristic cityscape at sunset with flying cars and neon lights, cyberpunk style, highly detailed, 4k</textarea> | |
| </div> | |
| <div class="model-selection"> | |
| <div class="model-option active" data-model="grok"> | |
| <div class="model-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="model-name">Grok-Vision</div> | |
| <div class="model-desc">Advanced multimodal</div> | |
| </div> | |
| <div class="model-option" data-model="dalle"> | |
| <div class="model-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <div class="model-name">DALL-E 3</div> | |
| <div class="model-desc">Creative & artistic</div> | |
| </div> | |
| <div class="model-option" data-model="midjourney"> | |
| <div class="model-icon"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <div class="model-name">Midjourney V6</div> | |
| <div class="model-desc">Stylized & detailed</div> | |
| </div> | |
| <div class="model-option" data-model="stable"> | |
| <div class="model-icon"> | |
| <i class="fas fa-cube"></i> | |
| </div> | |
| <div class="model-name">Stable Diffusion</div> | |
| <div class="model-desc">Open source</div> | |
| </div> | |
| </div> | |
| <div class="parameters"> | |
| <div class="param-group"> | |
| <label class="param-label" for="creativity-slider"> | |
| Creativity | |
| <span class="param-value" id="creativity-value">7</span> | |
| </label> | |
| <input type="range" min="1" max="10" value="7" class="slider" id="creativity-slider"> | |
| </div> | |
| <div class="param-group"> | |
| <label class="param-label" for="detail-slider"> | |
| Detail | |
| <span class="param-value" id="detail-value">8</span> | |
| </label> | |
| <input type="range" min="1" max="10" value="8" class="slider" id="detail-slider"> | |
| </div> | |
| <div class="param-group"> | |
| <label class="param-label" for="style-slider"> | |
| Style Strength | |
| <span class="param-value" id="style-value">6</span> | |
| </label> | |
| <input type="range" min="1" max="10" value="6" class="slider" id="style-slider"> | |
| </div> | |
| </div> | |
| <div class="btn-group"> | |
| <button class="btn btn-primary" id="generate-btn"> | |
| <i class="fas fa-bolt"></i> | |
| Generate Image | |
| </button> | |
| <button class="btn btn-secondary" id="random-prompt"> | |
| <i class="fas fa-dice"></i> | |
| Random Prompt | |
| </button> | |
| </div> | |
| <div class="processing" id="processing"> | |
| <div class="spinner"></div> | |
| <p>Generating your image with AI... This may take a moment.</p> | |
| <p class="processing-detail" id="processing-detail">Initializing Grok-Vision model...</p> | |
| </div> | |
| </div> | |
| <!-- Image Display & Editing Panel --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title"> | |
| <i class="fas fa-image"></i> | |
| Output & Editing | |
| </h2> | |
| <div class="image-actions"> | |
| <button class="btn-secondary" id="download-btn" style="padding: 8px 12px; font-size: 0.9rem;"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <div class="image-placeholder" id="image-placeholder"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>Your generated image will appear here</p> | |
| <p>You can also upload an image to edit</p> | |
| </div> | |
| <img src="" alt="Generated Image" class="generated-image" id="generated-image"> | |
| </div> | |
| <!-- Pipeline Visualization --> | |
| <div class="pipeline"> | |
| <div class="pipeline-step active" id="step-1"> | |
| <div class="step-icon"> | |
| <i class="fas fa-keyboard"></i> | |
| </div> | |
| <div class="step-name">Input</div> | |
| </div> | |
| <div class="pipeline-step" id="step-2"> | |
| <div class="step-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="step-name">Processing</div> | |
| </div> | |
| <div class="pipeline-step" id="step-3"> | |
| <div class="step-icon"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <div class="step-name">Generation</div> | |
| </div> | |
| <div class="pipeline-step" id="step-4"> | |
| <div class="step-icon"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <div class="step-name">Refinement</div> | |
| </div> | |
| <div class="pipeline-step" id="step-5"> | |
| <div class="step-icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="step-name">Output</div> | |
| </div> | |
| </div> | |
| <h3 class="card-title" style="margin-top: 30px;"> | |
| <i class="fas fa-edit"></i> | |
| Edit Tools | |
| </h3> | |
| <div class="edit-tools"> | |
| <div class="edit-tool" data-edit="enhance"> | |
| <i class="fas fa-star"></i> | |
| <div>Enhance</div> | |
| </div> | |
| <div class="edit-tool" data-edit="upscale"> | |
| <i class="fas fa-expand-alt"></i> | |
| <div>Upscale 2x</div> | |
| </div> | |
| <div class="edit-tool" data-edit="style"> | |
| <i class="fas fa-paint-brush"></i> | |
| <div>Change Style</div> | |
| </div> | |
| <div class="edit-tool" data-edit="background"> | |
| <i class="fas fa-layer-group"></i> | |
| <div>Remove BG</div> | |
| </div> | |
| <div class="edit-tool" data-edit="color"> | |
| <i class="fas fa-fill-drip"></i> | |
| <div>Recolor</div> | |
| </div> | |
| <div class="edit-tool" data-edit="object"> | |
| <i class="fas fa-plus-circle"></i> | |
| <div>Add Object</div> | |
| </div> | |
| </div> | |
| <div class="btn-group" style="margin-top: 30px;"> | |
| <button class="btn btn-secondary" id="upload-btn"> | |
| <i class="fas fa-upload"></i> | |
| Upload Image to Edit | |
| </button> | |
| <button class="btn btn-primary" id="apply-edit-btn" disabled> | |
| <i class="fas fa-play"></i> | |
| Apply Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>NeuraFlow AI Pipeline v1.2 | Advanced image generation and editing with state-of-the-art AI models</p> | |
| <p>© 2023 NeuraFlow AI. All rights reserved. | <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank" style="display: inline;">Built with anycoder</a></p> | |
| </footer> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const promptInput = document.getElementById('prompt-input'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const randomPromptBtn = document.getElementById('random-prompt'); | |
| const processingDiv = document.getElementById('processing'); | |
| const processingDetail = document.getElementById('processing-detail'); | |
| const imagePlaceholder = document.getElementById('image-placeholder'); | |
| const generatedImage = document.getElementById('generated-image'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const uploadBtn = document.getElementById('upload-btn'); | |
| const applyEditBtn = document.getElementById('apply-edit-btn'); | |
| const modelOptions = document.querySelectorAll('.model-option'); | |
| const sliders = document.querySelectorAll('.slider'); | |
| const pipelineSteps = document.querySelectorAll('.pipeline-step'); | |
| const editTools = document.querySelectorAll('.edit-tool'); | |
| // Sample images for demonstration | |
| const sampleImages = [ | |
| 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', | |
| 'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', | |
| 'https://images.unsplash.com/photo-1550684376-efcbd6e3f031?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', | |
| 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80' | |
| ]; | |
| // Random prompts for demo | |
| const randomPrompts = [ | |
| "A majestic dragon soaring over a medieval castle at sunrise, fantasy art, highly detailed, digital painting", | |
| "An astronaut exploring an alien jungle with bioluminescent plants, sci-fi, cinematic lighting", | |
| "A cyberpunk street market in a futuristic Asian city at night, neon signs, rain reflections", | |
| "A serene landscape of floating islands with waterfalls, Studio Ghibli style, soft colors", | |
| "A steampunk laboratory with intricate brass machinery, gears, and glowing crystals", | |
| "A magical library with infinite bookshelves, floating books, and celestial ceiling" | |
| ]; | |
| // Selected model and edit tool | |
| let selectedModel = 'grok'; | |
| let selectedEditTool = null; | |
| // Initialize sliders | |
| sliders.forEach(slider => { | |
| const valueElement = document.getElementById(`${slider.id.replace('-slider', '')}-value`); | |
| valueElement.textContent = slider.value; | |
| slider.addEventListener('input', () => { | |
| valueElement.textContent = slider.value; | |
| }); | |
| }); | |
| // Model selection | |
| modelOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| modelOptions.forEach(opt => opt.classList.remove('active')); | |
| option.classList.add('active'); | |
| selectedModel = option.getAttribute('data-model'); | |
| }); | |
| }); | |
| // Edit tool selection | |
| editTools.forEach(tool => { | |
| tool.addEventListener('click', () => { | |
| editTools.forEach(t => t.style.borderColor = ''); | |
| tool.style.borderColor = 'var(--secondary)'; | |
| selectedEditTool = tool.getAttribute('data-edit'); | |
| applyEditBtn.disabled = false; | |
| }); | |
| }); | |
| // Random prompt button | |
| randomPromptBtn.addEventListener('click', () => { | |
| const randomIndex = Math.floor(Math.random() * randomPrompts.length); | |
| promptInput.value = randomPrompts[randomIndex]; | |
| }); | |
| // Generate image button | |
| generateBtn.addEventListener('click', () => { | |
| // Show processing | |
| processingDiv.style.display = 'block'; | |
| generateBtn.disabled = true; | |
| // Reset pipeline visualization | |
| pipelineSteps.forEach(step => step.classList.remove('active')); | |
| pipelineSteps[0].classList.add('active'); | |
| // Simulate pipeline steps | |
| const steps = [ | |
| "Processing your prompt with Grok-Vision...", | |
| "Analyzing semantic context and style parameters...", | |
| "Generating initial image composition...", | |
| "Refining details and enhancing visual quality...", | |
| "Finalizing output and applying post-processing..." | |
| ]; | |
| let step = 0; | |
| const processInterval = setInterval(() => { | |
| if (step < steps.length) { | |
| processingDetail.textContent = steps[step]; | |
| pipelineSteps[step].classList.add('active'); | |
| step++; | |
| } else { | |
| clearInterval(processInterval); | |
| // Show generated image after a delay | |
| setTimeout(() => { | |
| processingDiv.style.display = 'none'; | |
| generateBtn.disabled = false; | |
| // Randomly select a sample image for demo | |
| const randomImage = sampleImages[Math.floor(Math.random() * sampleImages.length)]; | |
| generatedImage.src = randomImage; | |
| generatedImage.style.display = 'block'; | |
| imagePlaceholder.style.display = 'none'; | |
| // Enable download button | |
| downloadBtn.disabled = false; | |
| }, 1000); | |
| } | |
| }, 800); | |
| }); | |
| // Download button | |
| downloadBtn.addEventListener('click', () => { | |
| if (generatedImage.src) { | |
| // Create a temporary link to download the image | |
| const link = document.createElement('a'); | |
| link.href = generatedImage.src; | |
| link.download = 'neuraflow-ai-generated-image.jpg'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| // Show feedback | |
| const originalText = downloadBtn.innerHTML; | |
| downloadBtn.innerHTML = '<i class="fas fa-check"></i> Downloaded!'; | |
| downloadBtn.style.background = 'var(--success)'; | |
| setTimeout(() => { | |
| downloadBtn.innerHTML = originalText; | |
| downloadBtn.style.background = ''; | |
| }, 2000); | |
| } | |
| }); | |
| // Upload button | |
| uploadBtn.addEventListener('click', () => { | |
| // Simulate file upload | |
| const fileInput = document.createElement('input'); | |
| fileInput.type = 'file'; | |
| fileInput.accept = 'image/*'; | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files && e.target.files[0]) { | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| generatedImage.src = event.target.result; | |
| generatedImage.style.display = 'block'; | |
| imagePlaceholder.style.display = 'none'; | |
| // Reset edit selection | |
| editTools.forEach(t => t.style.borderColor = ''); | |
| selectedEditTool = null; | |
| applyEditBtn.disabled = true; | |
| }; | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| }); | |
| fileInput.click(); | |
| }); | |
| // Apply edit button | |
| applyEditBtn.addEventListener('click', () => { | |
| if (!selectedEditTool) return; | |
| // Show processing | |
| processingDiv.style.display = 'block'; | |
| processingDetail.textContent = `Applying ${selectedEditTool} edit...`; | |
| applyEditBtn.disabled = true; | |
| // Simulate edit processing | |
| setTimeout(() => { | |
| processingDiv.style.display = 'none'; | |
| applyEditBtn.disabled = false; | |
| // Show a different sample image as if edited | |
| const currentIndex = sampleImages.indexOf(generatedImage.src); | |
| let nextIndex = (currentIndex + 1) % sampleImages.length; | |
| if (currentIndex === -1) nextIndex = 0; | |
| generatedImage.src = sampleImages[nextIndex]; | |
| // Show feedback | |
| const originalText = applyEditBtn.innerHTML; | |
| applyEditBtn.innerHTML = '<i class="fas fa-check"></i> Edit Applied!'; | |
| applyEditBtn.style.background = 'var(--success)'; | |
| setTimeout(() => { | |
| applyEditBtn.innerHTML = originalText; | |
| applyEditBtn.style.background = ''; | |
| }, 2000); | |
| }, 1500); | |
| }); | |
| // Initialize with a sample image for demo purposes | |
| window.addEventListener('load', () => { | |
| // Show a sample image after a short delay | |
| setTimeout(() => { | |
| generatedImage.src = sampleImages[0]; | |
| generatedImage.style.display = 'block'; | |
| imagePlaceholder.style.display = 'none'; | |
| }, 500); | |
| }); | |
| </script> | |
| </body> | |
| </html> |