| | <!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> |
| |
|
