Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Imaginix Fusion - NSFW Image Combiner</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #ff4757; | |
| --secondary: #2ed573; | |
| --dark: #2f3542; | |
| --light: #f1f2f6; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #2f3542 0%, #1e272e 100%); | |
| min-height: 100vh; | |
| color: var(--light); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .upload-area { | |
| border: 3px dashed var(--primary); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| background: rgba(255, 71, 87, 0.1); | |
| } | |
| .upload-area:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--secondary); | |
| } | |
| .preview-image { | |
| width: 100%; | |
| max-height: 400px; | |
| object-fit: cover; | |
| border-radius: 10px; | |
| display: none; | |
| } | |
| #prompt-input { | |
| width: 100%; | |
| padding: 1rem; | |
| margin: 2rem 0; | |
| background: rgba(255,255,255,0.1); | |
| border: 2px solid var(--secondary); | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 1.1rem; | |
| } | |
| #generate-btn { | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| border: none; | |
| padding: 1rem 3rem; | |
| color: white; | |
| font-size: 1.2rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| #generate-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .result-container { | |
| margin-top: 3rem; | |
| text-align: center; | |
| } | |
| #combined-result { | |
| width: 100%; | |
| max-width: 800px; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); | |
| display: none; | |
| } | |
| .loading { | |
| display: none; | |
| margin: 2rem 0; | |
| font-size: 1.2rem; | |
| } | |
| .warning { | |
| color: var(--primary); | |
| margin: 1rem 0; | |
| font-weight: 500; | |
| } | |
| @media (max-width: 768px) { | |
| .main-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .container { | |
| padding: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="logo">ImaginixFusion</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--secondary); text-decoration: none;">Built with anycoder</a> | |
| </div> | |
| <div class="warning">⚠️ Warning: This tool is intended for creative NSFW content generation. Use responsibly.</div> | |
| <input type="text" id="prompt-input" placeholder="Enter your fusion prompt (e.g. 'cyberpunk neon aesthetic')..."> | |
| <div class="main-grid"> | |
| <div class="upload-area" onclick="document.getElementById('file1').click()"> | |
| <i class="fas fa-cloud-upload-alt fa-3x"></i> | |
| <p>Upload First Image</p> | |
| <input type="file" id="file1" hidden accept="image/*"> | |
| <img class="preview-image" id="preview1"> | |
| </div> | |
| <div class="upload-area" onclick="document.getElementById('file2').click()"> | |
| <i class="fas fa-cloud-upload-alt fa-3x"></i> | |
| <p>Upload Second Image</p> | |
| <input type="file" id="file2" hidden accept="image/*"> | |
| <img class="preview-image" id="preview2"> | |
| </div> | |
| </div> | |
| <button id="generate-btn" onclick="processImages()">Generate Fusion</button> | |
| <div class="loading" id="loading">🌀 Synthesizing creative fusion...</div> | |
| <div class="result-container"> | |
| <img id="combined-result"> | |
| </div> | |
| </div> | |
| <script> | |
| function handleImageUpload(input, previewId) { | |
| const file = input.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const preview = document.getElementById(previewId); | |
| preview.src = e.target.result; | |
| preview.style.display = 'block'; | |
| input.parentNode.querySelector('i, p').style.display = 'none'; | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| document.getElementById('file1').addEventListener('change', function() { | |
| handleImageUpload(this, 'preview1'); | |
| }); | |
| document.getElementById('file2').addEventListener('change', function() { | |
| handleImageUpload(this, 'preview2'); | |
| }); | |
| function processImages() { | |
| const loading = document.getElementById('loading'); | |
| const result = document.getElementById('combined-result'); | |
| const prompt = document.getElementById('prompt-input').value; | |
| if (!prompt) { | |
| alert('Please enter a fusion prompt!'); | |
| return; | |
| } | |
| loading.style.display = 'block'; | |
| // Simulated processing delay | |
| setTimeout(() => { | |
| // In a real implementation, this would send the images and prompt to an API | |
| // For demonstration, we'll create a canvas combination | |
| const canvas = document.createElement('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Combine preview images | |
| const img1 = document.getElementById('preview1'); | |
| const img2 = document.getElementById('preview2'); | |
| if (!img1.src || !img2.src) { | |
| alert('Please upload both images!'); | |
| loading.style.display = 'none'; | |
| return; | |
| } | |
| canvas.width = Math.max(img1.width, img2.width); | |
| canvas.height = img1.height + img2.height; | |
| ctx.drawImage(img1, 0, 0); | |
| ctx.drawImage(img2, 0, img1.height); | |
| result.src = canvas.toDataURL(); | |
| result.style.display = 'block'; | |
| loading.style.display = 'none'; | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |