Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SeedDream v4 - AI Image Generator & Editor</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Left Panel: Controls --> | |
| <div class="left-panel"> | |
| <header> | |
| <h1>🎨 SeedDream v4</h1> | |
| <p class="subtitle">AI-powered image generation & editing</p> | |
| </header> | |
| <div class="controls-section"> | |
| <div class="card"> | |
| <h2>API Configuration</h2> | |
| <div class="settings-grid"> | |
| <div class="form-group"> | |
| <label for="apiKey">FAL API Key</label> | |
| <input type="password" id="apiKey" placeholder="Enter your FAL API key" /> | |
| <small class="help-text">Get your API key from <a href="https://fal.ai" target="_blank">fal.ai</a></small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="modelSelect">Model</label> | |
| <select id="modelSelect"> | |
| <option value="fal-ai/bytedance/seedream/v4.5/edit">Image Edit (v4.5)</option> | |
| <option value="fal-ai/bytedance/seedream/v4/edit">Image Edit (v4)</option> | |
| <option value="fal-ai/qwen-image-edit-plus">Image Edit (Qwen)</option> | |
| <option value="fal-ai/bytedance/seedream/v4.5/text-to-image">Text to Image (v4.5)</option> | |
| <option value="fal-ai/bytedance/seedream/v4/text-to-image">Text to Image (v4)</option> | |
| <option value="fal-ai/hunyuan-image/v3/text-to-image">Text to Image (Hunyuan v3)</option> | |
| <option value="fal-ai/bytedance/seedance/v1/pro/fast/text-to-video">Text to Video (Seedance Fast)</option> | |
| <option value="fal-ai/bytedance/seedance/v1/pro/fast/image-to-video">Image to Video (Seedance Fast)</option> | |
| <option value="wan/v2.6/text-to-video">Text to Video (Wan v2.6)</option> | |
| <option value="wan/v2.6/image-to-video">Image to Video (Wan v2.6)</option> | |
| </select> | |
| <small class="help-text">Select the model for generation</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2 id="promptTitle">Edit Instructions</h2> | |
| <div class="form-group"> | |
| <label for="prompt" id="promptLabel">Editing Prompt</label> | |
| <textarea id="prompt" rows="3" placeholder="e.g., Dress the model in the clothes and shoes.">Dress the model in the clothes and shoes.</textarea> | |
| </div> | |
| </div> | |
| <div class="card" id="imageInputCard"> | |
| <div class="card-header"> | |
| <h2>Input Images</h2> | |
| <button id="clearAllBtn" class="clear-all-btn" onclick="clearAllInputImages()" title="Clear all input images"> | |
| Clear All | |
| </button> | |
| </div> | |
| <div class="form-group"> | |
| <label>Upload Images (Max 10)</label> | |
| <input type="file" id="fileInput" multiple accept="image/*" /> | |
| <div id="imagePreview" class="image-preview"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="imageUrls">Or Enter Image URLs (one per line)</label> | |
| <textarea id="imageUrls" rows="3" placeholder="https://example.com/image1.jpg https://example.com/image2.jpg"></textarea> | |
| </div> | |
| </div> | |
| <div class="card collapsed" id="settingsCard"> | |
| <div class="card-header clickable" onclick="toggleSettings()"> | |
| <h2>Settings</h2> | |
| <span class="toggle-icon">▼</span> | |
| </div> | |
| <div class="settings-content"> | |
| <div class="settings-grid"> | |
| <div id="imageSettings"> | |
| <div class="form-group"> | |
| <label for="imageSize">Image Size</label> | |
| <select id="imageSize"> | |
| <option value="custom" selected>Custom Size</option> | |
| <option value="square_hd">Square HD (1024x1024)</option> | |
| <option value="square">Square</option> | |
| <option value="portrait_4_3">Portrait 4:3</option> | |
| <option value="portrait_16_9">Portrait 16:9</option> | |
| <option value="landscape_4_3">Landscape 4:3</option> | |
| <option value="landscape_16_9">Landscape 16:9</option> | |
| </select> | |
| </div> | |
| <div class="form-group custom-size"> | |
| <label>Custom Width</label> | |
| <input type="number" id="customWidth" min="1024" max="4096" value="1280" /> | |
| </div> | |
| <div class="form-group custom-size"> | |
| <label>Custom Height</label> | |
| <input type="number" id="customHeight" min="1024" max="4096" value="1280" /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="numImages">Number of Generations</label> | |
| <input type="number" id="numImages" min="1" max="10" value="1" /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="maxImages">Max Images per Generation</label> | |
| <input type="number" id="maxImages" min="1" max="10" value="1" /> | |
| </div> | |
| </div> | |
| <div id="videoSettings" style="display: none;"> | |
| <div class="form-group"> | |
| <label for="videoAspectRatio">Aspect Ratio</label> | |
| <select id="videoAspectRatio"> | |
| <option value="auto" selected>Auto</option> | |
| <option value="21:9">21:9</option> | |
| <option value="16:9">16:9</option> | |
| <option value="4:3">4:3</option> | |
| <option value="1:1">1:1</option> | |
| <option value="3:4">3:4</option> | |
| <option value="9:16">9:16</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="videoResolution">Resolution</label> | |
| <select id="videoResolution"> | |
| <option value="480p">480p</option> | |
| <option value="720p">720p</option> | |
| <option value="1080p" selected>1080p</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="videoDuration">Duration (seconds)</label> | |
| <select id="videoDuration"> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5" selected>5</option> | |
| <option value="6">6</option> | |
| <option value="7">7</option> | |
| <option value="8">8</option> | |
| <option value="9">9</option> | |
| <option value="10">10</option> | |
| <option value="11">11</option> | |
| <option value="12">12</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="cameraFixed">Camera Fixed</label> | |
| <input type="checkbox" id="cameraFixed" /> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="seed">Seed (optional)</label> | |
| <input type="number" id="seed" placeholder="Random" /> | |
| </div> | |
| <!-- Safety checker is disabled by default and hidden from UI --> | |
| <input type="hidden" id="safetyChecker" value="false" /> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="generate-btn"> | |
| <span class="btn-text">Generate</span> | |
| <div class="spinner" style="display: none;"></div> | |
| </button> | |
| <div id="statusMessage" class="status-message"></div> | |
| <div id="progressLogs" class="progress-logs"></div> | |
| </div> | |
| </div> | |
| <!-- Right Panel: Results & History --> | |
| <div class="right-panel"> | |
| <div class="history-header"> | |
| <h2>Generation History</h2> | |
| <div class="history-controls"> | |
| <button class="history-btn" onclick="clearHistory()" title="Clear all history"> | |
| 🗑️ Clear History | |
| </button> | |
| <button class="history-btn" onclick="downloadAllHistory()" title="Download all"> | |
| ⬇️ Download All | |
| </button> | |
| </div> | |
| </div> | |
| <div class="history-tabs"> | |
| <button class="tab-btn active" onclick="switchTab('current')">Current Generation</button> | |
| <button class="tab-btn" onclick="switchTab('history')">History (<span id="historyCount">0</span>)</button> | |
| </div> | |
| <div id="currentTab" class="tab-content active"> | |
| <div id="currentResults" class="results-grid"> | |
| <div class="empty-state"> | |
| <p>No current generation</p> | |
| <small>Generate to see results here</small> | |
| </div> | |
| </div> | |
| <div id="currentInfo" class="generation-info"></div> | |
| </div> | |
| <div id="historyTab" class="tab-content"> | |
| <div id="historyGrid" class="history-grid"> | |
| <div class="empty-state"> | |
| <p>No generation history</p> | |
| <small>Your generated content will be saved here</small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Modal/Lightbox --> | |
| <div id="imageModal" class="image-modal"> | |
| <span class="modal-close" onclick="closeImageModal()">×</span> | |
| <img class="modal-content" id="modalImage"> | |
| <div class="modal-caption"> | |
| <div id="modalCaption"></div> | |
| <button class="modal-use-btn" onclick="useModalImageAsInput()">↻ Use as Input</button> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |