| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>PixelWizard AI Image Editor ✨</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| | <style> |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background-color: #111827; |
| | color: #f3f4f6; |
| | } |
| | .dropzone { |
| | border: 2px dashed #06b6d4; |
| | border-radius: 0.5rem; |
| | transition: all 0.3s ease; |
| | } |
| | .dropzone-active { |
| | border-color: #0ea5e9; |
| | background-color: rgba(6, 182, 212, 0.1); |
| | } |
| | .vanta-globe { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | z-index: -1; |
| | opacity: 0.2; |
| | } |
| | .toast { |
| | animation: slideUp 0.3s ease-out; |
| | } |
| | @keyframes slideUp { |
| | from { transform: translateY(100%); opacity: 0; } |
| | to { transform: translateY(0); opacity: 1; } |
| | } |
| | .image-mask { |
| | position: relative; |
| | } |
| | .image-mask::after { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background-color: rgba(6, 182, 212, 0.3); |
| | pointer-events: none; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="vanta-globe" id="vanta-globe"></div> |
| | |
| | <div class="min-h-screen flex flex-col"> |
| | |
| | <header class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-10"> |
| | <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| | <h1 class="text-2xl font-bold text-cyan-400 flex items-center"> |
| | <i data-feather="wand-2" class="mr-2"></i> |
| | PixelWizard AI |
| | </h1> |
| | <a href="https://github.com" target="_blank" class="text-gray-400 hover:text-cyan-400 transition-colors"> |
| | <i data-feather="github"></i> |
| | </a> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="flex-grow container mx-auto px-4 pt-20 pb-8 flex flex-col lg:flex-row gap-6"> |
| | |
| | <div class="w-full lg:w-96 bg-gray-800/80 backdrop-blur-md rounded-xl border border-gray-700 p-6 flex flex-col"> |
| | |
| | <div class="space-y-6"> |
| | |
| | <div class="space-y-3"> |
| | <h2 class="text-lg font-semibold text-gray-200">1. Upload Your Photo</h2> |
| | <div id="dropzone" class="dropzone h-48 flex flex-col items-center justify-center p-4 cursor-pointer"> |
| | <i data-feather="upload" class="text-cyan-400 w-8 h-8 mb-2"></i> |
| | <p class="text-center text-gray-300">Drag & drop your image here</p> |
| | <p class="text-xs text-gray-500 mt-1">or click to browse</p> |
| | <input type="file" id="image-upload" class="hidden" accept="image/*"> |
| | </div> |
| | <button id="face-protect-btn" class="hidden w-full py-2 px-4 bg-gray-700 hover:bg-gray-600 text-cyan-400 rounded-lg transition-colors flex items-center justify-center"> |
| | <i data-feather="shield" class="mr-2"></i> |
| | Protect Faces (Manual) |
| | </button> |
| | <div id="face-protect-success" class="hidden text-green-400 text-sm flex items-center"> |
| | <i data-feather="check-circle" class="mr-1"></i> |
| | Face protection active |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="reference-section" class="hidden space-y-3"> |
| | <h2 class="text-lg font-semibold text-gray-200">2. Style Reference (Optional)</h2> |
| | <div id="reference-dropzone" class="dropzone h-32 flex flex-col items-center justify-center p-4 cursor-pointer"> |
| | <i data-feather="image" class="text-cyan-400 w-6 h-6 mb-2"></i> |
| | <p class="text-center text-sm text-gray-300">Drag & drop reference image</p> |
| | </div> |
| | <input type="text" id="reference-name" placeholder="e.g., 'Mhomt shirt'" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
| | </div> |
| |
|
| | |
| | <div class="space-y-3"> |
| | <h2 class="text-lg font-semibold text-gray-200">3. Describe Your Edits</h2> |
| | <textarea id="edit-prompt" rows="4" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="e.g., 'Change the shirt color to blue and add a futuristic background'"></textarea> |
| | </div> |
| |
|
| | |
| | <div id="elements-section" class="hidden space-y-3"> |
| | <h2 class="text-lg font-semibold text-gray-200">4. Elements to Edit (Optional)</h2> |
| | <div id="analyze-prompt" class="p-4 bg-gray-700 rounded-lg text-center cursor-pointer hover:bg-gray-600 transition-colors"> |
| | <p class="text-gray-300">Click on the original image to analyze elements</p> |
| | </div> |
| | <div id="analyzing" class="hidden p-4 bg-gray-700 rounded-lg text-center"> |
| | <div class="flex items-center justify-center space-x-2"> |
| | <div class="animate-spin"> |
| | <i data-feather="loader"></i> |
| | </div> |
| | <p class="text-gray-300">Analyzing image...</p> |
| | </div> |
| | </div> |
| | <div id="elements-list" class="hidden space-y-2"> |
| | |
| | </div> |
| | <div id="mask-active" class="hidden text-cyan-400 text-sm flex items-center"> |
| | <i data-feather="check-circle" class="mr-1"></i> |
| | Precision mask is active |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="space-y-3"> |
| | <h2 class="text-lg font-semibold text-gray-200">5. Render Profile (Optional)</h2> |
| | <select id="render-profile" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
| | <option value="default">Default</option> |
| | <option value="iphone">iPhone 14 Pro</option> |
| | <option value="pro">Professional Camera</option> |
| | <option value="film">Film Look</option> |
| | <option value="illustration">Illustration Style</option> |
| | </select> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mt-auto pt-6 space-y-3"> |
| | <button id="optimize-prompt-btn" class="w-full py-3 px-4 border border-cyan-400 text-cyan-400 rounded-lg hover:bg-cyan-400/10 transition-colors flex items-center justify-center"> |
| | <i data-feather="sparkles" class="mr-2"></i> |
| | Optimize Prompt |
| | </button> |
| | <button id="apply-magic-btn" class="w-full py-3 px-4 bg-cyan-500 hover:bg-cyan-600 text-gray-900 font-medium rounded-lg transition-colors flex items-center justify-center"> |
| | <i data-feather="zap" class="mr-2"></i> |
| | Apply Magic |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="flex-grow bg-gray-800/80 backdrop-blur-md rounded-xl border border-gray-700 p-6 flex flex-col"> |
| | <div class="flex-grow grid grid-cols-1 md:grid-cols-2 gap-4"> |
| | |
| | <div class="relative bg-gray-900 rounded-lg overflow-hidden"> |
| | <div class="absolute top-3 left-3 z-10 flex space-x-2"> |
| | <button class="p-2 bg-gray-800/80 rounded-full hover:bg-gray-700/80 transition-colors"> |
| | <i data-feather="zoom-in" class="w-4 h-4 text-gray-300"></i> |
| | </button> |
| | <button class="p-2 bg-gray-800/80 rounded-full hover:bg-gray-700/80 transition-colors"> |
| | <i data-feather="zoom-out" class="w-4 h-4 text-gray-300"></i> |
| | </button> |
| | <button class="p-2 bg-gray-800/80 rounded-full hover:bg-gray-700/80 transition-colors"> |
| | <i data-feather="refresh-cw" class="w-4 h-4 text-gray-300"></i> |
| | </button> |
| | <button id="mask-toggle" class="p-2 bg-gray-800/80 rounded-full hover:bg-gray-700/80 transition-colors"> |
| | <i data-feather="edit-3" class="w-4 h-4 text-gray-300"></i> |
| | </button> |
| | </div> |
| | <div id="original-container" class="h-full flex items-center justify-center"> |
| | <p class="text-gray-500">Original image will appear here</p> |
| | </div> |
| | <canvas id="mask-canvas" class="absolute inset-0 w-full h-full hidden"></canvas> |
| | </div> |
| |
|
| | |
| | <div class="relative bg-gray-900 rounded-lg overflow-hidden"> |
| | <div id="edited-container" class="h-full flex items-center justify-center"> |
| | <p class="text-gray-500">Edited image will appear here</p> |
| | </div> |
| | <div id="processing" class="hidden absolute inset-0 flex items-center justify-center bg-gray-900/80"> |
| | <div class="text-center"> |
| | <div class="animate-spin mx-auto mb-3"> |
| | <i data-feather="loader" class="w-8 h-8 text-cyan-400"></i> |
| | </div> |
| | <p class="text-gray-300">Creating magic...</p> |
| | <p class="text-xs text-gray-500">This may take a moment</p> |
| | </div> |
| | </div> |
| | <button id="download-btn" class="hidden absolute bottom-3 right-3 p-2 bg-cyan-500 hover:bg-cyan-600 rounded-full transition-colors"> |
| | <i data-feather="download" class="w-4 h-4 text-gray-900"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <div id="mask-tools" class="fixed inset-0 bg-gray-900/90 backdrop-blur-md z-20 hidden"> |
| | <div class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-gray-800 rounded-full px-4 py-2 flex space-x-3"> |
| | <button id="brush-tool" class="p-2 bg-cyan-500/20 rounded-full hover:bg-cyan-500/30 transition-colors text-cyan-400"> |
| | <i data-feather="edit-2" class="w-4 h-4"></i> |
| | </button> |
| | <button id="erase-tool" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition-colors text-gray-300"> |
| | <i data-feather="eraser" class="w-4 h-4"></i> |
| | </button> |
| | <div class="flex items-center space-x-2"> |
| | <i data-feather="minimize-2" class="w-4 h-4 text-gray-400"></i> |
| | <input type="range" id="brush-size" min="1" max="50" value="10" class="w-24"> |
| | <i data-feather="maximize-2" class="w-4 h-4 text-gray-400"></i> |
| | </div> |
| | <button id="clear-mask" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition-colors text-gray-300"> |
| | <i data-feather="trash-2" class="w-4 h-4"></i> |
| | </button> |
| | <button id="save-mask" class="p-2 bg-cyan-500 rounded-full hover:bg-cyan-600 transition-colors text-gray-900"> |
| | <i data-feather="check" class="w-4 h-4"></i> |
| | </button> |
| | <button id="cancel-mask" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition-colors text-gray-300"> |
| | <i data-feather="x" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="toast" class="fixed bottom-4 left-4 hidden"> |
| | <div class="bg-gray-800 border rounded-lg shadow-lg px-4 py-3 flex items-start max-w-xs"> |
| | <div class="flex-grow"> |
| | <div class="flex items-center"> |
| | <i data-feather="alert-circle" class="text-red-400 mr-2"></i> |
| | <p id="toast-message" class="text-sm text-gray-200">Error message here</p> |
| | </div> |
| | </div> |
| | <button id="close-toast" class="ml-3 text-gray-400 hover:text-gray-300"> |
| | <i data-feather="x" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <script> |
| | |
| | function applyEdits() { |
| | const originalImg = document.querySelector('#original-container img'); |
| | const prompt = document.getElementById('edit-prompt').value.toLowerCase(); |
| | |
| | if (!originalImg) { |
| | showToast('Please upload an image first', 'error'); |
| | return false; |
| | } |
| | |
| | const editedImg = originalImg.cloneNode(true); |
| | let hasChanges = false; |
| | |
| | |
| | if (prompt.includes('color') || prompt.includes('colour')) { |
| | if (prompt.includes('blue')) { |
| | editedImg.style.filter = 'hue-rotate(180deg)'; |
| | hasChanges = true; |
| | } else if (prompt.includes('red')) { |
| | editedImg.style.filter = 'hue-rotate(-90deg)'; |
| | hasChanges = true; |
| | } else if (prompt.includes('green')) { |
| | editedImg.style.filter = 'hue-rotate(90deg)'; |
| | hasChanges = true; |
| | } |
| | } |
| | |
| | if (prompt.includes('brighten') || prompt.includes('lighten')) { |
| | editedImg.style.filter = (editedImg.style.filter || '') + ' brightness(1.2)'; |
| | hasChanges = true; |
| | } |
| | |
| | if (prompt.includes('darken')) { |
| | editedImg.style.filter = (editedImg.style.filter || '') + ' brightness(0.8)'; |
| | hasChanges = true; |
| | } |
| | |
| | if (prompt.includes('blur') || prompt.includes('background')) { |
| | editedImg.style.filter = (editedImg.style.filter || '') + ' blur(4px)'; |
| | hasChanges = true; |
| | } |
| | |
| | if (!hasChanges) { |
| | editedImg.style.transform = 'scaleX(-1)'; |
| | } |
| | |
| | return editedImg; |
| | } |
| | |
| | |
| | VANTA.GLOBE({ |
| | el: "#vanta-globe", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0x06b6d4, |
| | backgroundColor: 0x111827, |
| | size: 0.8 |
| | }); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | feather.replace(); |
| | }); |
| | |
| | |
| | document.getElementById('image-upload').addEventListener('change', function(e) { |
| | const file = e.target.files[0]; |
| | if (file) { |
| | const reader = new FileReader(); |
| | reader.onload = function(event) { |
| | const img = document.createElement('img'); |
| | img.src = event.target.result; |
| | img.className = 'max-w-full max-h-full'; |
| | |
| | const container = document.getElementById('original-container'); |
| | container.innerHTML = ''; |
| | container.appendChild(img); |
| | |
| | |
| | document.getElementById('face-protect-btn').classList.remove('hidden'); |
| | document.getElementById('reference-section').classList.remove('hidden'); |
| | document.getElementById('elements-section').classList.remove('hidden'); |
| | |
| | |
| | showToast('Image uploaded successfully!'); |
| | }; |
| | reader.readAsDataURL(file); |
| | } |
| | }); |
| | |
| | document.getElementById('dropzone').addEventListener('click', function() { |
| | document.getElementById('image-upload').click(); |
| | }); |
| | |
| | document.getElementById('face-protect-btn').addEventListener('click', function() { |
| | this.classList.add('hidden'); |
| | document.getElementById('face-protect-success').classList.remove('hidden'); |
| | showToast('Face protection activated'); |
| | }); |
| | document.getElementById('apply-magic-btn').addEventListener('click', function() { |
| | document.getElementById('processing').classList.remove('hidden'); |
| | document.getElementById('edited-container').innerHTML = '<p class="text-gray-500">Edited image will appear here</p>'; |
| | |
| | setTimeout(function() { |
| | document.getElementById('processing').classList.add('hidden'); |
| | |
| | const editedImg = applyEdits(); |
| | if (editedImg) { |
| | document.getElementById('edited-container').innerHTML = ''; |
| | document.getElementById('edited-container').appendChild(editedImg); |
| | document.getElementById('download-btn').classList.remove('hidden'); |
| | showToast('Edits applied successfully!'); |
| | } |
| | }, 2000); |
| | }); |
| | document.getElementById('mask-toggle').addEventListener('click', function() { |
| | document.getElementById('mask-tools').classList.remove('hidden'); |
| | document.body.style.overflow = 'hidden'; |
| | }); |
| | |
| | document.getElementById('cancel-mask').addEventListener('click', function() { |
| | document.getElementById('mask-tools').classList.add('hidden'); |
| | document.body.style.overflow = ''; |
| | }); |
| | |
| | document.getElementById('save-mask').addEventListener('click', function() { |
| | document.getElementById('mask-tools').classList.add('hidden'); |
| | document.body.style.overflow = ''; |
| | document.getElementById('elements-list').innerHTML = ''; |
| | document.getElementById('mask-active').classList.remove('hidden'); |
| | showToast('Precision mask saved'); |
| | }); |
| | |
| | document.getElementById('download-btn').addEventListener('click', function() { |
| | showToast('Download started'); |
| | }); |
| | document.getElementById('optimize-prompt-btn').addEventListener('click', function() { |
| | const prompt = document.getElementById('edit-prompt').value; |
| | if (prompt.trim() === '') { |
| | showToast('Please enter a prompt first', 'error'); |
| | return; |
| | } |
| | |
| | showToast('Optimizing your prompt...'); |
| | setTimeout(function() { |
| | let optimized = `Professional edit: ${prompt}. `; |
| | |
| | if (prompt.toLowerCase().includes('color') || prompt.toLowerCase().includes('colour')) { |
| | optimized += 'Using precise color adjustments. '; |
| | } |
| | if (prompt.toLowerCase().includes('background')) { |
| | optimized += 'With enhanced background separation. '; |
| | } |
| | if (prompt.toLowerCase().includes('face') || prompt.toLowerCase().includes('portrait')) { |
| | optimized += 'Maintaining natural skin tones. '; |
| | } |
| | |
| | optimized += 'Preserving original composition and lighting.'; |
| | document.getElementById('edit-prompt').value = optimized; |
| | showToast('Prompt optimized!'); |
| | }, 1500); |
| | }); |
| | |
| | function showToast(message, type = 'success') { |
| | const toast = document.getElementById('toast'); |
| | const toastMessage = document.getElementById('toast-message'); |
| | const toastIcon = document.querySelector('#toast i'); |
| | |
| | toastMessage.textContent = message; |
| | |
| | if (type === 'error') { |
| | toastIcon.setAttribute('data-feather', 'alert-triangle'); |
| | toastIcon.classList.remove('text-green-400', 'text-yellow-400'); |
| | toastIcon.classList.add('text-red-400'); |
| | toast.classList.remove('border-green-500'); |
| | toast.classList.add('border-red-500'); |
| | } else if (type === 'warning') { |
| | toastIcon.setAttribute('data-feather', 'alert-circle'); |
| | toastIcon.classList.remove('text-green-400', 'text-red-400'); |
| | toastIcon.classList.add('text-yellow-400'); |
| | toast.classList.remove('border-green-500', 'border-red-500'); |
| | toast.classList.add('border-yellow-500'); |
| | } else { |
| | toastIcon.setAttribute('data-feather', 'check-circle'); |
| | toastIcon.classList.remove('text-red-400', 'text-yellow-400'); |
| | toastIcon.classList.add('text-green-400'); |
| | toast.classList.remove('border-red-500', 'border-yellow-500'); |
| | toast.classList.add('border-green-500'); |
| | } |
| | feather.replace(); |
| | toast.classList.remove('hidden'); |
| | |
| | setTimeout(function() { |
| | toast.classList.add('hidden'); |
| | }, 5000); |
| | } |
| | |
| | document.getElementById('close-toast').addEventListener('click', function() { |
| | document.getElementById('toast').classList.add('hidden'); |
| | }); |
| | |
| | |
| | ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| | document.getElementById('dropzone').addEventListener(eventName, preventDefaults, false); |
| | }); |
| | |
| | function preventDefaults(e) { |
| | e.preventDefault(); |
| | e.stopPropagation(); |
| | } |
| | |
| | ['dragenter', 'dragover'].forEach(eventName => { |
| | document.getElementById('dropzone').addEventListener(eventName, highlight, false); |
| | }); |
| | |
| | ['dragleave', 'drop'].forEach(eventName => { |
| | document.getElementById('dropzone').addEventListener(eventName, unhighlight, false); |
| | }); |
| | |
| | function highlight() { |
| | document.getElementById('dropzone').classList.add('dropzone-active'); |
| | } |
| | |
| | function unhighlight() { |
| | document.getElementById('dropzone').classList.remove('dropzone-active'); |
| | } |
| | |
| | document.getElementById('dropzone').addEventListener('drop', handleDrop, false); |
| | |
| | function handleDrop(e) { |
| | const dt = e.dataTransfer; |
| | const files = dt.files; |
| | document.getElementById('image-upload').files = files; |
| | |
| | |
| | const event = new Event('change'); |
| | document.getElementById('image-upload').dispatchEvent(event); |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
