| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Fooocus AI Magic Studio</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> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: '#d946ef', |
| secondary: '#6b7280' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .gradient-border { |
| background: linear-gradient(135deg, #d946ef, #6b7280); |
| padding: 2px; |
| border-radius: 0.75rem; |
| } |
| .gradient-border > div { |
| background: #1f2937; |
| border-radius: 0.5rem; |
| } |
| .drop-zone { |
| border: 2px dashed #d946ef; |
| transition: all 0.3s ease; |
| } |
| .drop-zone:hover { |
| border-color: #ec4899; |
| background: rgba(217, 70, 239, 0.05); |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen"> |
| |
| <header class="glass-effect border-b border-gray-800 sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-gradient-to-r from-fuchsia-500 to-purple-600 rounded-lg flex items-center justify-center"> |
| <i data-feather="sparkles" class="w-5 h-5 text-white"></i> |
| </div> |
| <div> |
| <h1 class="text-xl font-bold bg-gradient-to-r from-fuchsia-400 to-purple-400 bg-clip-text text-transparent"> |
| Fooocus 2.5.5 |
| </h1> |
| <p class="text-gray-400 text-sm">AI Magic Studio ✨</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="px-4 py-2 bg-fuchsia-600 hover:bg-fuchsia-700 rounded-lg transition-colors flex items-center space-x-2"> |
| <i data-feather="settings" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="glass-effect rounded-xl p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold text-fuchsia-400">Generation Progress</h2> |
| <span class="text-fuchsia-400 font-bold">32%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-fuchsia-500 h-2 rounded-full" style="width: 32%"></div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-6"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> |
| <button class="bg-fuchsia-600 hover:bg-fuchsia-700 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2"> |
| <i data-feather="play" class="w-4 h-4"></i> |
| <span>Generate</span> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2"> |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> |
| <span>Reconnect</span> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2"> |
| <i data-feather="download" class="w-4 h-4"></i> |
| <span>Load</span> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2"> |
| <i data-feather="skip-forward" class="w-4 h-4"></i> |
| <span>Skip</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-6"> |
| <div class="flex items-center space-x-2 mb-4"> |
| <input type="checkbox" checked class="rounded bg-gray-700 border-gray-600 text-fuchsia-500"> |
| <label class="text-gray-300">Input Image</label> |
| </div> |
| <div class="drop-zone rounded-lg p-8 text-center cursor-pointer"> |
| <i data-feather="image" class="w-12 h-12 text-fuchsia-400 mx-auto mb-4"></i> |
| <p class="text-gray-400">Drop Image Here - or - Click to Upload</p> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-6"> |
| <div class="flex items-center space-x-2 mb-4"> |
| <input type="checkbox" checked class="rounded bg-gray-700 border-gray-600 text-fuchsia-500"> |
| <label class="text-gray-300">Advanced</label> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-gray-400 text-sm mb-2">Upscale or Variation</label> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> |
| <option>Disabled</option> |
| <option>Vary (Subtle)</option> |
| <option>Vary (Strong)</option> |
| <option>Upscale (1.5x)</option> |
| <option>Upscale (2x)</option> |
| <option>Upscale (Fast 2x)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-400 text-sm mb-2">Image Prompt</label> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> |
| <option>ImagePrompt</option> |
| <option>PyraCanny</option> |
| <option>CPDS</option> |
| <option>FaceSwap</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-6"> |
| <label class="block text-gray-400 text-sm mb-2">Prompt</label> |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white h-24" placeholder="Describe your vision..."></textarea> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-6"> |
| |
| <div class="glass-effect rounded-xl p-6"> |
| <h2 class="text-lg font-semibold text-fuchsia-400 mb-4">Preview</h2> |
| <div class="aspect-square bg-gray-800 rounded-lg flex items-center justify-center"> |
| <img src="https://static.photos/technology/640x360/42" alt="AI Generated Preview" class="rounded-lg w-full h-full object-cover"> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-6"> |
| <h2 class="text-lg font-semibold text-fuchsia-400 mb-4">Finished Images</h2> |
| <div class="grid grid-cols-2 gap-3"> |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> |
| <img src="https://static.photos/abstract/320x240/133" alt="Generated Art" class="w-full h-full object-cover"> |
| </div> |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> |
| <img src="https://static.photos/minimal/320x240/456" alt="Generated Art" class="w-full h-full object-cover"> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-xl p-6"> |
| <h2 class="text-lg font-semibold text-fuchsia-400 mb-4">Quick Settings</h2> |
| <div class="space-y-3"> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> |
| <option>Performance: Quality</option> |
| <option>Performance: Speed</option> |
| <option>Performance: Extreme Speed</option> |
| </select> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> |
| <option>1152×896 ∣ 9:7</option> |
| <option>1024×1024 ∣ 1:1</option> |
| <option>768×1344 ∣ 4:7</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8 glass-effect rounded-xl p-6"> |
| <div class="flex flex-wrap gap-4 justify-center"> |
| <button class="px-6 py-3 bg-fuchsia-600 hover:bg-fuchsia-700 rounded-lg transition-colors flex items-center space-x-2"> |
| <i data-feather="zap" class="w-4 h-4"></i> |
| <span>Generate</span> |
| </button> |
| <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center space-x-2"> |
| <i data-feather="skip-forward" class="w-4 h-4"></i> |
| <span>Skip</span> |
| </button> |
| <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center space-x-2"> |
| <i data-feather="square" class="w-4 h-4"></i> |
| <span>Stop</span> |
| </button> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="border-t border-gray-800 mt-12"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-4 text-gray-400"> |
| <span>Built with Gradio</span> |
| <span>•</span> |
| <span>API Available</span> |
| </div> |
| <div class="mt-4 md:mt-0"> |
| <a href="#" class="text-fuchsia-400 hover:text-fuchsia-300 text-sm flex items-center space-x-1"> |
| <i data-feather="book-open" class="w-4 h-4"></i> |
| <span>Documentation</span> |
| </a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.drop-zone').forEach(zone => { |
| zone.addEventListener('click', () => { |
| alert('Image upload functionality would be implemented here!'); |
| }); |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.ctrlKey && e.key === 'z') { |
| e.preventDefault(); |
| alert('Undo action triggered!'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
