Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Model Intellect Hub</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#fdf4ff', | |
| 100: '#fae8ff', | |
| 200: '#f5d0fe', | |
| 300: '#f0abfc', | |
| 400: '#e879f9', | |
| 500: '#d946ef', | |
| 600: '#c026d3', | |
| 700: '#a21caf', | |
| 800: '#86198f', | |
| 900: '#701a75', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2"> | |
| <span class="bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent"> | |
| Model Intellect Hub | |
| </span> | |
| 🔮 | |
| </h1> | |
| <p class="text-gray-600 dark:text-gray-400">Explore AI models with intelligent insights</p> | |
| </header> | |
| <!-- Main Card --> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border border-gray-100 dark:border-gray-700"> | |
| <div class="flex items-center gap-3 mb-6"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center"> | |
| <i data-feather="image" class="text-white w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Image Generation Model</h2> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Configure your AI image generation settings</p> | |
| </div> | |
| </div> | |
| <!-- Model Selector Component --> | |
| <div class="space-y-4"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> | |
| Select Model | |
| </label> | |
| <!-- Custom Dropdown with Info Button Inside --> | |
| <div class="relative group" id="customDropdown"> | |
| <!-- Dropdown Trigger --> | |
| <button | |
| id="dropdownTrigger" | |
| class="w-full flex items-center justify-between bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-4 py-3 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-primary-300 dark:hover:border-primary-700" | |
| > | |
| <span id="dropdownSelectedText">Choose a model...</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 text-gray-400 transition-transform duration-200" id="dropdownArrow"></i> | |
| </button> | |
| <!-- Floating Label Animation --> | |
| <div class="absolute -top-2 left-3 px-1 bg-white dark:bg-gray-800 text-xs text-primary-500 font-medium opacity-0 transition-opacity duration-200" id="floatingLabel"> | |
| Modelo | |
| </div> | |
| <!-- Dropdown Menu --> | |
| <div id="dropdownMenu" class="absolute z-20 w-full mt-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl opacity-0 invisible transform scale-95 transition-all duration-200 origin-top"> | |
| <div class="py-1 max-h-64 overflow-y-auto"> | |
| <!-- Stable Diffusion XL --> | |
| <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="stable-diffusion-xl"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">Stable Diffusion XL</span> | |
| </div> | |
| <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="stable-diffusion-xl"> | |
| <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i> | |
| </button> | |
| </div> | |
| <!-- DALL-E 3 --> | |
| <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="dall-e-3"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center"> | |
| <i data-feather="image" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">DALL-E 3</span> | |
| </div> | |
| <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="dall-e-3"> | |
| <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i> | |
| </button> | |
| </div> | |
| <!-- Midjourney V6 --> | |
| <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="midjourney-v6"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <i data-feather="aperture" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">Midjourney V6</span> | |
| </div> | |
| <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="midjourney-v6"> | |
| <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i> | |
| </button> | |
| </div> | |
| <!-- Imagen 3 --> | |
| <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="imagen-3"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center"> | |
| <i data-feather="camera" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">Imagen 3</span> | |
| </div> | |
| <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="imagen-3"> | |
| <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i> | |
| </button> | |
| </div> | |
| <!-- Adobe Firefly 3 --> | |
| <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors border-b border-gray-100 dark:border-gray-600 last:border-b-0" data-value="firefly-3"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-amber-500 flex items-center justify-center"> | |
| <i data-feather="sun" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">Adobe Firefly 3</span> | |
| </div> | |
| <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="firefly-3"> | |
| <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i> | |
| </button> | |
| </div> | |
| <!-- Leonardo Phoenix --> | |
| <div class="dropdown-item group/item flex items-center justify-between px-4 py-3 hover:bg-primary-50 dark:hover:bg-primary-900/20 cursor-pointer transition-colors" data-value="leonardo-phoenix"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center"> | |
| <i data-feather="zap" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">Leonardo Phoenix</span> | |
| </div> | |
| <button class="info-btn p-2 rounded-lg hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors opacity-0 group-hover/item:opacity-100" data-model="leonardo-phoenix"> | |
| <i data-feather="info" class="w-4 h-4 text-primary-600 dark:text-primary-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Selected Model Display --> | |
| <div id="selectedDisplay" class="hidden mt-4 p-4 bg-gradient-to-r from-primary-50 to-secondary-50 dark:from-primary-900/20 dark:to-secondary-900/20 rounded-xl border border-primary-100 dark:border-primary-800"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-primary-500 flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Selected Model</p> | |
| <p id="selectedModelName" class="font-semibold text-gray-800 dark:text-white"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Settings --> | |
| <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700"> | |
| <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Quick Settings</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="p-3 rounded-xl border border-gray-200 dark:border-gray-600 hover:border-primary-300 dark:hover:border-primary-700 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all text-left"> | |
| <i data-feather="sliders" class="w-4 h-4 text-primary-500 mb-2"></i> | |
| <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</p> | |
| </button> | |
| <button class="p-3 rounded-xl border border-gray-200 dark:border-gray-600 hover:border-secondary-300 dark:hover:border-secondary-700 hover:bg-secondary-50 dark:hover:bg-secondary-900/10 transition-all text-left"> | |
| <i data-feather="zap" class="w-4 h-4 text-secondary-500 mb-2"></i> | |
| <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Turbo Mode</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal/Dialog --> | |
| <div id="modelModal" class="fixed inset-0 z-50 hidden"> | |
| <!-- Backdrop --> | |
| <div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 opacity-0" id="modalBackdrop"></div> | |
| <!-- Modal Content --> | |
| <div class="absolute inset-0 flex items-center justify-center p-4"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full transform scale-95 opacity-0 transition-all duration-300" id="modalContent"> | |
| <!-- Modal Header --> | |
| <div class="relative p-6 pb-4"> | |
| <div class="absolute top-4 right-4"> | |
| <button id="closeModal" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> | |
| <i data-feather="x" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center shadow-lg shadow-primary-500/25"> | |
| <i data-feather="cpu" class="text-white w-7 h-7"></i> | |
| </div> | |
| <div> | |
| <h3 id="modalTitle" class="text-xl font-bold text-gray-800 dark:text-white">Model Name</h3> | |
| <span id="modalVersion" class="text-xs font-medium px-2 py-1 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400">v1.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal Body --> | |
| <div class="px-6 pb-6"> | |
| <p id="modalDescription" class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6"> | |
| Model description goes here... | |
| </p> | |
| <!-- Specs Grid --> | |
| <div class="grid grid-cols-2 gap-3 mb-6"> | |
| <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl"> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Resolution</p> | |
| <p id="modalResolution" class="font-semibold text-gray-800 dark:text-white">1024×1024</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl"> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Speed</p> | |
| <p id="modalSpeed" class="font-semibold text-gray-800 dark:text-white">Fast</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl"> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Style</p> | |
| <p id="modalStyle" class="font-semibold text-gray-800 dark:text-white">Photorealistic</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl"> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">License</p> | |
| <p id="modalLicense" class="font-semibold text-gray-800 dark:text-white">Commercial</p> | |
| </div> | |
| </div> | |
| <!-- Tags --> | |
| <div id="modalTags" class="flex flex-wrap gap-2"> | |
| <!-- Tags injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Modal Footer --> | |
| <div class="px-6 pb-6 pt-2 flex gap-3"> | |
| <button id="useModelBtn" class="flex-1 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-medium py-3 px-4 rounded-xl transition-all duration-200 shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transform hover:-translate-y-0.5"> | |
| Use This Model | |
| </button> | |
| <button id="docsBtn" class="px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> | |
| <i data-feather="external-link" class="w-5 h-5 text-gray-600 dark:text-gray-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Theme Toggle --> | |
| <button id="themeToggle" class="fixed bottom-6 right-6 p-3 rounded-full bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 hover:scale-110 transition-transform"> | |
| <i data-feather="sun" class="w-5 h-5 text-amber-500 hidden dark:block"></i> | |
| <i data-feather="moon" class="w-5 h-5 text-primary-500 block dark:hidden"></i> | |
| </button> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |