Spaces:

MateusFF
/

model-intellect-hub

Running

App Files Files Community

MateusFF commited on 15 days ago

Commit

bdb03b6

verified ·

1 Parent(s): 0df5209

Promote version 3379a82 to main

Browse files

Promoted commit 3379a82fb54cfd9696078bafc8bd7f5c7c4973b2 to main branch

Files changed (3) hide show

index.html +278 -13
script.js +285 -3
style.css +126 -153

index.html CHANGED Viewed

@@ -4,21 +4,286 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Model Intellect Hub</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" href="style.css">
-    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-</head>
-<body>
-    <div id="app"></div>
-    <script type="importmap">
-    {
-        "imports": {
-            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
-            "vuetify": "https://unpkg.com/vuetify@3.4.0/dist/vuetify.esm.js"
         }
-    }
     </script>
-    <script type="module" src="app.js"></script>
 </body>
 </html>

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

script.js CHANGED Viewed

@@ -1,4 +1,286 @@
-// This file is no longer needed as the application is now built with Vue 3 and Vuetify 3
-// All logic has been moved to app.js
-console.log('Legacy script.js - Vue 3 app is running from app.js');

+// Model data with descriptions and specs
+const modelData = {
+    'stable-diffusion-xl': {
+        name: 'Stable Diffusion XL',
+        version: 'SDXL 1.0',
+        description: 'Open-source latent diffusion model capable of generating photo-realistic images given any text input. Features enhanced composition and improved face generation with a native 1024×1024 resolution.',
+        resolution: '1024×1024',
+        speed: 'Medium',
+        style: 'Versatile',
+        license: 'Open Source',
+        tags: ['Open Source', 'Customizable', 'Local Run', 'Community']
+    },
+    'dall-e-3': {
+        name: 'DALL-E 3',
+        version: 'Latest',
+        description: 'OpenAI\'s most advanced image generation model with exceptional prompt understanding and text rendering capabilities. Produces highly detailed, accurate images that closely follow complex prompts.',
+        resolution: '1024×1024',
+        speed: 'Fast',
+        style: 'Photorealistic',
+        license: 'Commercial',
+        tags: ['OpenAI', 'Text Rendering', 'API', 'Enterprise']
+    },
+    'midjourney-v6': {
+        name: 'Midjourney V6',
+        version: 'Alpha',
+        description: 'Latest iteration with unprecedented realism, coherent text generation, and improved prompt accuracy. Known for stunning artistic quality and aesthetic appeal in generated imagery.',
+        resolution: 'Up to 2048×2048',
+        speed: 'Medium',
+        style: 'Artistic',
+        license: 'Commercial',
+        tags: ['Discord', 'Artistic', 'High Quality', 'Trending']
+    },
+    'imagen-3': {
+        name: 'Imagen 3',
+        version: 'v3.0',
+        description: 'Google DeepMind\'s highest quality text-to-image model with exceptional detail, lighting, and fewer distracting artifacts. Excels at rendering text and following complex prompts.',
+        resolution: '1024×1024',
+        speed: 'Fast',
+        style: 'Photorealistic',
+        license: 'Commercial',
+        tags: ['Google', 'Safe', 'Reliable', 'Enterprise']
+    },
+    'firefly-3': {
+        name: 'Adobe Firefly 3',
+        version: 'v3.0',
+        description: 'Adobe\'s creative generative AI designed for safe commercial use. Integrated with Creative Cloud, featuring structure reference and style reference for precise control.',
+        resolution: '1024×1024',
+        speed: 'Fast',
+        style: 'Commercial',
+        license: 'Commercial Safe',
+        tags: ['Adobe', 'Creative Cloud', 'Safe', 'Designers']
+    },
+    'leonardo-phoenix': {
+        name: 'Leonardo Phoenix',
+        version: 'Phoenix',
+        description: 'Leonardo.ai\'s flagship model with exceptional coherence, prompt adherence, and native 1536×1536 resolution. Features Alchemy for premium quality enhancement.',
+        resolution: '1536×1536',
+        speed: 'Medium',
+        style: 'Game Assets',
+        license: 'Commercial',
+        tags: ['Gaming', 'Assets', 'Fine-tune', 'Community']
+    }
+};
+// DOM Elements
+const dropdownTrigger = document.getElementById('dropdownTrigger');
+const dropdownMenu = document.getElementById('dropdownMenu');
+const dropdownArrow = document.getElementById('dropdownArrow');
+const dropdownSelectedText = document.getElementById('dropdownSelectedText');
+const customDropdown = document.getElementById('customDropdown');
+const modal = document.getElementById('modelModal');
+const modalBackdrop = document.getElementById('modalBackdrop');
+const modalContent = document.getElementById('modalContent');
+const closeModal = document.getElementById('closeModal');
+const floatingLabel = document.getElementById('floatingLabel');
+const selectedDisplay = document.getElementById('selectedDisplay');
+const selectedModelName = document.getElementById('selectedModelName');
+const themeToggle = document.getElementById('themeToggle');
+// Modal content elements
+const modalTitle = document.getElementById('modalTitle');
+const modalVersion = document.getElementById('modalVersion');
+const modalDescription = document.getElementById('modalDescription');
+const modalResolution = document.getElementById('modalResolution');
+const modalSpeed = document.getElementById('modalSpeed');
+const modalStyle = document.getElementById('modalStyle');
+const modalLicense = document.getElementById('modalLicense');
+const modalTags = document.getElementById('modalTags');
+// State
+let currentModel = null;
+let isDropdownOpen = false;
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    feather.replace();
+    initTheme();
+    initDropdown();
+});
+// Theme handling
+function initTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    if (savedTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+    }
+}
+themeToggle.addEventListener('click', () => {
+    document.documentElement.classList.toggle('dark');
+    const isDark = document.documentElement.classList.contains('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    feather.replace();
+});
+// Dropdown functions
+function initDropdown() {
+    // Toggle dropdown on trigger click
+    dropdownTrigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleDropdown();
+    });
+    // Handle dropdown item clicks
+    document.querySelectorAll('.dropdown-item').forEach(item => {
+        item.addEventListener('click', (e) => {
+            // Don't select if info button was clicked
+            if (e.target.closest('.info-btn')) {
+                e.stopPropagation();
+                return;
+            }
+            const value = item.dataset.value;
+            selectModel(value);
+            closeDropdown();
+        });
+    });
+    // Handle info button clicks
+    document.querySelectorAll('.info-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const modelKey = btn.dataset.model;
+            showModelInfo(modelKey);
+        });
+    });
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (isDropdownOpen && !customDropdown.contains(e.target)) {
+            closeDropdown();
+        }
+    });
+    // Close dropdown on escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isDropdownOpen) {
+            closeDropdown();
+        }
+    });
+}
+function toggleDropdown() {
+    if (isDropdownOpen) {
+        closeDropdown();
+    } else {
+        openDropdown();
+    }
+}
+function openDropdown() {
+    isDropdownOpen = true;
+    dropdownMenu.classList.remove('opacity-0', 'invisible', 'scale-95');
+    dropdownMenu.classList.add('opacity-100', 'visible', 'scale-100');
+    dropdownArrow.classList.add('rotate-180');
+    dropdownTrigger.classList.add('ring-2', 'ring-primary-500', 'border-transparent');
+}
+function closeDropdown() {
+    isDropdownOpen = false;
+    dropdownMenu.classList.add('opacity-0', 'invisible', 'scale-95');
+    dropdownMenu.classList.remove('opacity-100', 'visible', 'scale-100');
+    dropdownArrow.classList.remove('rotate-180');
+    dropdownTrigger.classList.remove('ring-2', 'ring-primary-500', 'border-transparent');
+}
+function selectModel(value) {
+    currentModel = value;
+    if (value) {
+        // Show floating label
+        floatingLabel.classList.add('show-label');
+        // Update trigger text
+        const model = modelData[value];
+        dropdownSelectedText.textContent = model.name;
+        dropdownSelectedText.classList.add('text-gray-800', 'dark:text-white');
+        // Show selected display
+        selectedModelName.textContent = model.name;
+        selectedDisplay.classList.remove('hidden');
+        selectedDisplay.classList.add('selected-show');
+        // Add focus ring animation
+        dropdownTrigger.classList.add('focus-ring-animate');
+        setTimeout(() => {
+            dropdownTrigger.classList.remove('focus-ring-animate');
+        }, 300);
+    }
+}
+function showModelInfo(modelKey) {
+    const model = modelData[modelKey];
+    if (!model) return;
+    // Populate modal
+    modalTitle.textContent = model.name;
+    modalVersion.textContent = model.version;
+    modalDescription.textContent = model.description;
+    modalResolution.textContent = model.resolution;
+    modalSpeed.textContent = model.speed;
+    modalStyle.textContent = model.style;
+    modalLicense.textContent = model.license;
+    // Populate tags
+    modalTags.innerHTML = model.tags.map((tag, i) => `
+        <span class="px-3 py-1 text-xs font-medium rounded-full bg-gradient-to-r from-primary-100 to-secondary-100 dark:from-primary-900/50 dark:to-secondary-900/50 text-primary-700 dark:text-primary-300 border border-primary-200 dark:border-primary-800 tag-pop" style="animation-delay: ${i * 50}ms">
+            ${tag}
+        </span>
+    `).join('');
+    // Show modal
+    openModal();
+}
+// Modal functions
+function openModal() {
+    modal.classList.remove('hidden');
+    // Trigger reflow
+    void modal.offsetWidth;
+    modalBackdrop.classList.remove('opacity-0');
+    modalContent.classList.remove('scale-95', 'opacity-0');
+    modalContent.classList.add('scale-100', 'opacity-100');
+}
+function closeModalFunc() {
+    modalBackdrop.classList.add('opacity-0');
+    modalContent.classList.remove('scale-100', 'opacity-100');
+    modalContent.classList.add('scale-95', 'opacity-0');
+    setTimeout(() => {
+        modal.classList.add('hidden');
+    }, 300);
+}
+// Close modal handlers
+closeModal.addEventListener('click', closeModalFunc);
+modalBackdrop.addEventListener('click', closeModalFunc);
+// Close on escape key
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+        closeModalFunc();
+    }
+});
+// Use model button
+document.getElementById('useModelBtn').addEventListener('click', () => {
+    closeModalFunc();
+    // Add a subtle confirmation animation
+    modelSelect.parentElement.classList.add('focus-ring-animate');
+    setTimeout(() => {
+        modelSelect.parentElement.classList.remove('focus-ring-animate');
+    }, 300);
+});
+// Docs button
+document.getElementById('docsBtn').addEventListener('click', () => {
+    const urls = {
+        'stable-diffusion-xl': 'https://stability.ai/stable-diffusion',
+        'dall-e-3': 'https://openai.com/dall-e-3',
+        'midjourney-v6': 'https://www.midjourney.com',
+        'imagen-3': 'https://deepmind.google/technologies/imagen-3/',
+        'firefly-3': 'https://www.adobe.com/products/firefly.html',
+        'leonardo-phoenix': 'https://leonardo.ai'
+    };
+    if (currentModel && urls[currentModel]) {
+        window.open(urls[currentModel], '_blank');
+    }
+});

style.css CHANGED Viewed

@@ -1,6 +1,3 @@
-/* Import Vuetify styles */
-@import "https://unpkg.com/vuetify@3.4.0/dist/vuetify.min.css";
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
@@ -20,221 +17,197 @@
     background: #94a3b8;
 }
-/* Gradient text */
-.gradient-text {
-    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-/* Gradient avatar */
-.gradient-avatar {
-    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%) !important;
-}
-/* Model selector button */
-.model-selector-btn {
-    text-transform: none !important;
-    letter-spacing: normal !important;
-    font-weight: 400 !important;
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-    transition: all 0.2s ease !important;
-}
-.model-selector-btn:hover {
-    border-color: rgb(var(--v-theme-primary)) !important;
-}
-.model-selector-btn.has-selection {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-}
-.dropdown-arrow {
-    transition: transform 0.2s ease;
-}
-.model-selector-btn[aria-expanded="true"] .dropdown-arrow {
-    transform: rotate(180deg);
-}
-/* Model dropdown list */
-.model-dropdown-list {
-    min-width: 100%;
-}
-.model-list-item {
-    transition: all 0.2s ease;
-    position: relative;
-}
-.model-list-item::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: linear-gradient(to bottom, #0ea5e9, #d946ef);
-    opacity: 0;
-    transition: opacity 0.2s ease;
 }
-.model-list-item:hover::before,
-.model-list-item--active::before {
-    opacity: 1;
 }
-.model-list-item:hover,
-.model-list-item--active {
-    background: rgba(var(--v-theme-primary), 0.08) !important;
 }
-/* Info button in dropdown */
-.info-btn {
-    opacity: 0;
-    transition: all 0.2s ease;
 }
-.model-list-item:hover .info-btn {
-    opacity: 1;
 }
-.info-btn:hover {
-    transform: scale(1.1);
 }
-/* Selected model sheet */
-.selected-model-sheet {
-    animation: slideDown 0.3s ease-out;
 }
-@keyframes slideDown {
     from {
         opacity: 0;
-        transform: translateY(-10px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
     }
 }
-/* Settings buttons */
-.settings-btn {
-    text-transform: none !important;
-    letter-spacing: normal !important;
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-    transition: all 0.2s ease !important;
 }
-.settings-btn:hover {
-    border-color: rgb(var(--v-theme-primary)) !important;
-    background: rgba(var(--v-theme-primary), 0.04) !important;
 }
-/* Tag chips animation */
-.tag-chip {
-    animation: tagPop 0.3s ease-out backwards;
 }
 @keyframes tagPop {
-    0% {
-        transform: scale(0);
-        opacity: 0;
-    }
-    70% {
-        transform: scale(1.1);
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
 }
-/* Theme toggle */
-.theme-toggle {
-    position: fixed !important;
-    bottom: 24px;
-    right: 24px;
-    border-radius: 50% !important;
-    transition: transform 0.2s ease !important;
 }
-.theme-toggle:hover {
-    transform: scale(1.1) !important;
 }
-/* Dialog animations */
-.v-dialog-enter-active,
-.v-dialog-leave-active {
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.v-dialog-enter-from,
-.v-dialog-leave-to {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
 }
-/* Gap utility */
-.gap-3 {
-    gap: 12px;
 }
-.gap-4 {
-    gap: 16px;
 }
-/* Focus ring animation */
-.focus-ring-animate {
-    animation: focusPulse 0.3s ease-out;
 }
-@keyframes focusPulse {
-    0% {
-        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
-    }
-    100% {
-        box-shadow: 0 0 0 4px rgba(14, 165, 233, 0);
-    }
 }
-/* Button glow effect */
-.btn-glow:hover {
-    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4) !important;
 }
-/* Smooth transitions */
-.transition-smooth {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
-/* Glass effect */
-.glass {
-    background: rgba(255, 255, 255, 0.7) !important;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
 }
-.v-theme--dark .glass {
-    background: rgba(15, 23, 42, 0.7) !important;
 }
 /* Custom scrollbar for dropdown */
-.model-dropdown-list::-webkit-scrollbar {
     width: 6px;
 }
-.model-dropdown-list::-webkit-scrollbar-track {
     background: transparent;
 }
-.model-dropdown-list::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 3px;
 }
-.v-theme--dark .model-dropdown-list::-webkit-scrollbar-thumb {
     background: #475569;
 }

 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
     background: #94a3b8;
 }
+.dark ::-webkit-scrollbar-thumb {
+    background: #475569;
 }
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
 }
+/* Select styling enhancements */
+select {
+    background-image: none !important;
 }
+/* Focus ring animation */
+.focus-ring-animate {
+    animation: focusPulse 0.3s ease-out;
 }
+@keyframes focusPulse {
+    0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
+    100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0); }
 }
+/* Modal animations */
+.modal-enter {
+    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
+.modal-exit {
+    animation: modalOut 0.2s ease-out forwards;
 }
+@keyframes modalIn {
     from {
         opacity: 0;
+        transform: scale(0.95) translateY(10px);
     }
     to {
         opacity: 1;
+        transform: scale(1) translateY(0);
     }
 }
+@keyframes modalOut {
+    from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+}
+/* Gradient text animation */
+.gradient-text-animate {
+    background-size: 200% auto;
+    animation: gradientShift 3s ease infinite;
 }
+@keyframes gradientShift {
+    0%, 100% { background-position: 0% center; }
+    50% { background-position: 100% center; }
 }
+/* Button hover glow */
+.btn-glow:hover {
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
+}
+/* Tag animation */
+.tag-pop {
+    animation: tagPop 0.3s ease-out;
 }
 @keyframes tagPop {
+    0% { transform: scale(0); opacity: 0; }
+    70% { transform: scale(1.1); }
+    100% { transform: scale(1); opacity: 1; }
 }
+/* Smooth transitions */
+.transition-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
+/* Glass effect */
+.glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
+.dark .glass {
+    background: rgba(15, 23, 42, 0.7);
 }
+/* Custom select dropdown styling */
+select option {
+    padding: 12px;
+    font-size: 14px;
+}
+/* Dropdown menu animations */
+#dropdownMenu {
+    transform-origin: top;
 }
+/* Info button in dropdown */
+.info-btn {
+    transition: all 0.2s ease;
 }
+.info-btn:hover {
+    transform: scale(1.1);
 }
+.info-btn:active {
+    transform: scale(0.95);
 }
+/* Dropdown item hover effects */
+.dropdown-item {
+    position: relative;
 }
+.dropdown-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(to bottom, #0ea5e9, #d946ef);
+    opacity: 0;
+    transition: opacity 0.2s ease;
 }
+.dropdown-item:hover::before {
+    opacity: 1;
 }
+/* Dropdown arrow rotation */
+#dropdownArrow {
+    transition: transform 0.2s ease;
 }
+#dropdownArrow.rotate-180 {
+    transform: rotate(180deg);
 }
 /* Custom scrollbar for dropdown */
+#dropdownMenu::-webkit-scrollbar {
     width: 6px;
 }
+#dropdownMenu::-webkit-scrollbar-track {
     background: transparent;
+    border-radius: 0 8px 8px 0;
 }
+#dropdownMenu::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 3px;
 }
+.dark #dropdownMenu::-webkit-scrollbar-thumb {
     background: #475569;
+}
+/* Dropdown trigger focus state */
+#dropdownTrigger:focus,
+#dropdownTrigger.ring-2 {
+    border-color: transparent;
+}
+/* Floating label show */
+.show-label {
+    opacity: 1 !important;
+}
+/* Selected display animation */
+.selected-show {
+    animation: slideDown 0.3s ease-out;
+}
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }