Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelForge AI - Advanced Image Editor</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .editor-container { | |
| background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), | |
| linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), | |
| linear-gradient(45deg, transparent 75%, #f5f5f5 75%), | |
| linear-gradient(-45deg, transparent 75%, #f5f5f5 75%); | |
| background-size: 20px 20px; | |
| background-position: 0 0, 0 10px, 10px -10px, -10px 0px; | |
| } | |
| .tool-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .tool-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .canvas-wrapper { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .loading-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 10; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .loading-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 50%; | |
| border-top-color: #3b82f6; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .prompt-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); | |
| } | |
| .history-item { | |
| transition: all 0.2s ease; | |
| } | |
| .history-item:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .tab-btn.active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-magic text-blue-500 text-2xl"></i> | |
| <h1 class="text-xl font-bold text-gray-800">PixelForge AI</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-gray-600 hover:text-blue-500">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500">Blog</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto py-6 px-4"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Tools Panel --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex space-x-2 mb-6"> | |
| <button class="tab-btn active px-4 py-2" data-tab="edit">Edit</button> | |
| <button class="tab-btn px-4 py-2" data-tab="generate">Generate</button> | |
| </div> | |
| <div id="edit-tab" class="tab-content"> | |
| <h3 class="font-medium text-gray-700 mb-3">Basic Tools</h3> | |
| <div class="grid grid-cols-2 gap-3 mb-6"> | |
| <button class="tool-btn flex flex-col items-center justify-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <i class="fas fa-crop-alt text-blue-500 text-xl mb-1"></i> | |
| <span class="text-sm">Crop</span> | |
| </button> | |
| <button class="tool-btn flex flex-col items-center justify-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <i class="fas fa-sliders-h text-blue-500 text-xl mb-1"></i> | |
| <span class="text-sm">Adjust</span> | |
| </button> | |
| <button class="tool-btn flex flex-col items-center justify-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <i class="fas fa-font text-blue-500 text-xl mb-1"></i> | |
| <span class="text-sm">Text</span> | |
| </button> | |
| <button class="tool-btn flex flex-col items-center justify-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <i class="fas fa-filter text-blue-500 text-xl mb-1"></i> | |
| <span class="text-sm">Filters</span> | |
| </button> | |
| </div> | |
| <h3 class="font-medium text-gray-700 mb-3">AI Tools</h3> | |
| <div class="space-y-3"> | |
| <button id="remove-bg-btn" class="tool-btn w-full flex items-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-eraser text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Remove Background</h4> | |
| <p class="text-xs text-gray-500">Automatically remove image background</p> | |
| </div> | |
| </button> | |
| <button id="remove-object-btn" class="tool-btn w-full flex items-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-broom text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Remove Objects</h4> | |
| <p class="text-xs text-gray-500">Erase unwanted objects from your image</p> | |
| </div> | |
| </button> | |
| <button id="generative-fill-btn" class="tool-btn w-full flex items-center p-3 bg-gray-100 rounded-md hover:bg-blue-50"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-fill-drip text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Generative Fill</h4> | |
| <p class="text-xs text-gray-500">Add new elements with AI</p> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="generate-tab" class="tab-content hidden"> | |
| <h3 class="font-medium text-gray-700 mb-3">AI Generation</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Style</label> | |
| <select class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option>Realistic</option> | |
| <option>Digital Art</option> | |
| <option>Painting</option> | |
| <option>3D Render</option> | |
| <option>Pixel Art</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Prompt</label> | |
| <textarea id="generate-prompt" class="w-full p-2 border border-gray-300 rounded-md h-24" placeholder="Describe what you want to generate..."></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Negative Prompt</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-md h-16" placeholder="What you don't want to see..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Width</label> | |
| <select class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option>512px</option> | |
| <option>768px</option> | |
| <option>1024px</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Height</label> | |
| <select class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option>512px</option> | |
| <option>768px</option> | |
| <option>1024px</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generate-image-btn" class="w-full py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-md hover:opacity-90 transition"> | |
| Generate Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Area --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="font-medium">Editor</h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-undo"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="editor-container p-4 flex justify-center items-center"> | |
| <div class="canvas-wrapper relative"> | |
| <canvas id="editor-canvas" width="800" height="600" class="max-w-full h-auto border border-gray-200 rounded-md"></canvas> | |
| <div id="loading-overlay" class="loading-overlay"> | |
| <div class="text-center"> | |
| <div class="spinner mb-4"></div> | |
| <p class="text-gray-600">Processing your image...</p> | |
| </div> | |
| </div> | |
| <div id="generative-fill-ui" class="absolute inset-0 hidden"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> | |
| <div class="absolute top-4 left-4 right-4 bg-white p-4 rounded-md shadow-lg"> | |
| <h4 class="font-medium mb-2">Generative Fill</h4> | |
| <div class="flex mb-3"> | |
| <button class="brush-btn px-3 py-1 bg-blue-500 text-white rounded-l-md" data-size="10">Small</button> | |
| <button class="brush-btn px-3 py-1 bg-gray-200" data-size="30">Medium</button> | |
| <button class="brush-btn px-3 py-1 bg-gray-200 rounded-r-md" data-size="50">Large</button> | |
| </div> | |
| <input type="text" id="fill-prompt" class="w-full p-2 border border-gray-300 rounded-md mb-2" placeholder="What should appear here?"> | |
| <div class="flex justify-end space-x-2"> | |
| <button id="cancel-fill-btn" class="px-3 py-1 bg-gray-200 rounded-md">Cancel</button> | |
| <button id="apply-fill-btn" class="px-3 py-1 bg-blue-500 text-white rounded-md">Generate</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-white rounded-lg shadow-sm p-4"> | |
| <h3 class="font-medium text-gray-700 mb-3">History</h3> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <div class="history-item bg-gray-100 rounded-md overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/100" alt="History item" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="history-item bg-gray-100 rounded-md overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/100" alt="History item" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="history-item bg-gray-100 rounded-md overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/100" alt="History item" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="history-item bg-gray-100 rounded-md overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/100" alt="History item" class="w-full h-20 object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Properties Panel --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow-sm p-4"> | |
| <h3 class="font-medium text-gray-700 mb-4">Properties</h3> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Brightness</label> | |
| <input type="range" min="0" max="200" value="100" class="w-full"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Contrast</label> | |
| <input type="range" min="0" max="200" value="100" class="w-full"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Saturation</label> | |
| <input type="range" min="0" max="200" value="100" class="w-full"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label> | |
| <input type="range" min="-100" max="100" value="0" class="w-full"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vignette</label> | |
| <input type="range" min="0" max="100" value="0" class="w-full"> | |
| </div> | |
| <div class="pt-4 border-t"> | |
| <button class="w-full py-2 bg-gray-100 rounded-md hover:bg-gray-200 transition"> | |
| Reset All Adjustments | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t py-6 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-magic text-blue-500 text-xl"></i> | |
| <span class="font-bold text-gray-800">PixelForge AI</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Powerful AI image editing tools for everyone</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t text-center text-sm text-gray-500"> | |
| <p>© 2023 PixelForge AI. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Tab switching | |
| const tabBtns = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| tabBtns.forEach(b => b.classList.remove('active')); | |
| // Add active class to clicked button | |
| btn.classList.add('active'); | |
| // Hide all tab contents | |
| tabContents.forEach(content => content.classList.add('hidden')); | |
| // Show the selected tab content | |
| const tabId = btn.getAttribute('data-tab') + '-tab'; | |
| document.getElementById(tabId).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Brush size selection | |
| const brushBtns = document.querySelectorAll('.brush-btn'); | |
| brushBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| brushBtns.forEach(b => { | |
| b.classList.remove('bg-blue-500', 'text-white'); | |
| b.classList.add('bg-gray-200'); | |
| }); | |
| btn.classList.remove('bg-gray-200'); | |
| btn.classList.add('bg-blue-500', 'text-white'); | |
| // Here you would set the brush size in your canvas | |
| }); | |
| }); | |
| // AI Tools functionality | |
| const removeBgBtn = document.getElementById('remove-bg-btn'); | |
| const removeObjectBtn = document.getElementById('remove-object-btn'); | |
| const generativeFillBtn = document.getElementById('generative-fill-btn'); | |
| const loadingOverlay = document.getElementById('loading-overlay'); | |
| const generativeFillUI = document.getElementById('generative-fill-ui'); | |
| const cancelFillBtn = document.getElementById('cancel-fill-btn'); | |
| const applyFillBtn = document.getElementById('apply-fill-btn'); | |
| const generateImageBtn = document.getElementById('generate-image-btn'); | |
| // Simulate AI processing | |
| function simulateAIProcessing() { | |
| loadingOverlay.classList.add('active'); | |
| setTimeout(() => { | |
| loadingOverlay.classList.remove('active'); | |
| // Here you would update the canvas with the processed image | |
| }, 2000); | |
| } | |
| removeBgBtn.addEventListener('click', () => { | |
| simulateAIProcessing(); | |
| }); | |
| removeObjectBtn.addEventListener('click', () => { | |
| simulateAIProcessing(); | |
| }); | |
| generativeFillBtn.addEventListener('click', () => { | |
| generativeFillUI.classList.remove('hidden'); | |
| }); | |
| cancelFillBtn.addEventListener('click', () => { | |
| generativeFillUI.classList.add('hidden'); | |
| }); | |
| applyFillBtn.addEventListener('click', () => { | |
| generativeFillUI.classList.add('hidden'); | |
| simulateAIProcessing(); | |
| }); | |
| generateImageBtn.addEventListener('click', () => { | |
| const prompt = document.getElementById('generate-prompt').value; | |
| if (prompt.trim() === '') { | |
| alert('Please enter a prompt for image generation'); | |
| return; | |
| } | |
| simulateAIProcessing(); | |
| }); | |
| // Initialize canvas | |
| const canvas = document.getElementById('editor-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Draw placeholder image | |
| ctx.fillStyle = '#f0f0f0'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = '#ccc'; | |
| ctx.font = '16px Arial'; | |
| ctx.textAlign = 'center'; | |
| ctx.fillText('Upload or generate an image to start editing', canvas.width/2, canvas.height/2); | |
| // File upload functionality (would be implemented fully in a real app) | |
| canvas.addEventListener('click', () => { | |
| // In a real app, this would trigger a file input dialog | |
| console.log('Prompt user to upload an image'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=elvson/pixelforge-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |