Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Remix images with text prompts using AI models like Gemini and GPT. Drag and drop your images into three spots for creative combinations."> | |
| <meta name="keywords" content="image remixer, AI art, Gemini, GPT, image generation, drag and drop, creative tool"> | |
| <meta name="author" content="Anycoder"> | |
| <title>AI Image Remixer</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50%' y='50%' style='dominant-baseline:central;text-anchor:middle;font-size:80px;'%3E🎨%3C/text%3E%3C/svg%3E" type="image/svg+xml"> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div class="container"> | |
| <h1>AI Image Remixer 🎨</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank" rel="noopener noreferrer">Built with anycoder</a> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <section class="upload-section"> | |
| <h2>1. Upload or Drop Images</h2> | |
| <div id="upload-dropzone" class="dropzone"> | |
| <p>Drag & drop images here, or click to upload</p> | |
| <input type="file" id="image-upload" accept="image/*" multiple style="display: none;"> | |
| <button id="upload-button" class="btn">Browse Files</button> | |
| </div> | |
| <div id="uploaded-previews" class="uploaded-previews"> | |
| <!-- Uploaded image previews will go here --> | |
| </div> | |
| </section> | |
| <section class="remix-spots-section"> | |
| <h2>2. Place Images in Spots</h2> | |
| <p class="instruction-text">Drag images from the "Uploads" section into these three blank spots.</p> | |
| <div class="remix-spots"> | |
| <div class="image-spot" id="spot-1" data-index="0"> | |
| <span class="spot-label">Spot 1</span> | |
| <img class="spot-image" src="assets/img/placeholder.png" alt="Image spot 1"> | |
| </div> | |
| <div class="image-spot" id="spot-2" data-index="1"> | |
| <span class="spot-label">Spot 2</span> | |
| <img class="spot-image" src="assets/img/placeholder.png" alt="Image spot 2"> | |
| </div> | |
| <div class="image-spot" id="spot-3" data-index="2"> | |
| <span class="spot-label">Spot 3</span> | |
| <img class="spot-image" src="assets/img/placeholder.png" alt="Image spot 3"> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="prompt-model-section"> | |
| <h2>3. Add a Prompt & Select Model</h2> | |
| <div class="prompt-input-group"> | |
| <label for="text-prompt">Text Prompt:</label> | |
| <textarea id="text-prompt" placeholder="Describe the remix, e.g., 'A surreal landscape with elements of all three images, painted in an impressionistic style.'" rows="4"></textarea> | |
| </div> | |
| <div class="model-selection"> | |
| <h3>Choose AI Model:</h3> | |
| <div class="model-options"> | |
| <label class="model-radio"> | |
| <input type="radio" name="ai-model" value="gemini-2" checked> | |
| Gemini-2 | |
| <span class="tooltip">Advanced multimodal reasoning.</span> | |
| </label> | |
| <label class="model-radio"> | |
| <input type="radio" name="ai-model" value="gpt-image-1"> | |
| GPT Image-1 | |
| <span class="tooltip">Powerful image generation.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button id="remix-button" class="btn btn-primary">Remix Images</button> | |
| <div id="status-message" class="status-message" aria-live="polite"></div> | |
| </section> | |
| <section class="result-section"> | |
| <h2>4. Your Remixed Image</h2> | |
| <div id="remix-result" class="remix-result"> | |
| <img id="result-image" src="assets/img/initial-result.png" alt="Remixed image output" style="display: none;"> | |
| <p id="result-placeholder">Your remixed image will appear here.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <div class="container"> | |
| <p>© 2023 AI Image Remixer. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> |