YOU MUST USE VUETIFY3 and VUE3. Do not use tailwindcss

app.js

@@ -0,0 +1,461 @@
+import { createApp, ref, computed, onMounted } from 'vue'
+import { createVuetify } from 'vuetify'
+
+const vuetify = createVuetify({
+    theme: {
+        defaultTheme: 'light',
+        themes: {
+            light: {
+                colors: {
+                    primary: '#0ea5e9',
+                    secondary: '#d946ef',
+                    surface: '#ffffff',
+                    background: '#f8fafc',
+                    error: '#ef4444',
+                    info: '#3b82f6',
+                    success: '#22c55e',
+                    warning: '#f59e0b',
+                }
+            },
+            dark: {
+                colors: {
+                    primary: '#38bdf8',
+                    secondary: '#e879f9',
+                    surface: '#1e293b',
+                    background: '#0f172a',
+                    error: '#f87171',
+                    info: '#60a5fa',
+                    success: '#4ade80',
+                    warning: '#fbbf24',
+                }
+            }
+        }
+    },
+    defaults: {
+        VBtn: {
+            variant: 'elevated',
+            rounded: 'lg',
+        },
+        VCard: {
+            rounded: 'xl',
+            elevation: 4,
+        },
+        VTextField: {
+            variant: 'outlined',
+            rounded: 'lg',
+            density: 'comfortable',
+        },
+        VSelect: {
+            variant: 'outlined',
+            rounded: 'lg',
+            density: 'comfortable',
+        },
+        VDialog: {
+            rounded: 'xl',
+        }
+    }
+})
+
+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'],
+        icon: 'mdi-cpu-64-bit',
+        color: 'cyan',
+        gradient: 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)'
+    },
+    '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'],
+        icon: 'mdi-image',
+        color: 'green',
+        gradient: 'linear-gradient(135deg, #22c55e 0%, #10b981 100%)'
+    },
+    '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'],
+        icon: 'mdi-camera-iris',
+        color: 'purple',
+        gradient: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)'
+    },
+    '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'],
+        icon: 'mdi-camera',
+        color: 'red',
+        gradient: 'linear-gradient(135deg, #ef4444 0%, #f97316 100%)'
+    },
+    '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'],
+        icon: 'mdi-weather-sunny',
+        color: 'amber',
+        gradient: 'linear-gradient(135deg, #eab308 0%, #f59e0b 100%)'
+    },
+    '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'],
+        icon: 'mdi-lightning-bolt',
+        color: 'indigo',
+        gradient: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)'
+    }
+}
+
+const modelUrls = {
+    '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'
+}
+
+createApp({
+    setup() {
+        const theme = ref('light')
+        const selectedModel = ref(null)
+        const dialogOpen = ref(false)
+        const dialogModel = ref(null)
+        
+        const modelOptions = computed(() => {
+            return Object.entries(modelData).map(([key, data]) => ({
+                key,
+                ...data
+            }))
+        })
+        
+        const currentModelData = computed(() => {
+            return selectedModel.value ? modelData[selectedModel.value] : null
+        })
+        
+        const toggleTheme = () => {
+            theme.value = theme.value === 'light' ? 'dark' : 'light'
+        }
+        
+        const openModelInfo = (modelKey) => {
+            dialogModel.value = modelKey
+            dialogOpen.value = true
+        }
+        
+        const useModel = () => {
+            if (dialogModel.value) {
+                selectedModel.value = dialogModel.value
+                dialogOpen.value = false
+            }
+        }
+        
+        const openDocs = () => {
+            if (dialogModel.value && modelUrls[dialogModel.value]) {
+                window.open(modelUrls[dialogModel.value], '_blank')
+            }
+        }
+        
+        const selectModelFromDropdown = (key) => {
+            selectedModel.value = key
+        }
+        
+        return {
+            theme,
+            selectedModel,
+            dialogOpen,
+            dialogModel,
+            modelOptions,
+            currentModelData,
+            modelData,
+            modelUrls,
+            toggleTheme,
+            openModelInfo,
+            useModel,
+            openDocs,
+            selectModelFromDropdown
+        }
+    },
+    template: `
+        <v-app :theme="theme">
+            <v-main class="bg-background">
+                <v-container class="py-8" style="max-width: 900px;">
+                    <!-- Header -->
+                    <div class="text-center mb-8">
+                        <h1 class="text-h3 font-weight-bold mb-2">
+                            <span class="gradient-text">Model Intellect Hub</span>
+                            <span class="ml-2">🔮</span>
+                        </h1>
+                        <p class="text-subtitle-1 text-medium-emphasis">
+                            Explore AI models with intelligent insights
+                        </p>
+                    </div>
+                    
+                    <!-- Main Card -->
+                    <v-card class="pa-6 pa-md-8">
+                        <!-- Card Header -->
+                        <div class="d-flex align-center gap-3 mb-6">
+                            <v-avatar size="48" class="gradient-avatar">
+                                <v-icon icon="mdi-image" color="white" size="24"></v-icon>
+                            </v-avatar>
+                            <div>
+                                <h2 class="text-h6 font-weight-semibold">Image Generation Model</h2>
+                                <p class="text-body-2 text-medium-emphasis">Configure your AI image generation settings</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Model Selector -->
+                        <div class="mb-4">
+                            <label class="text-subtitle-2 font-weight-medium mb-2 d-block">Select Model</label>
+                            
+                            <!-- Custom Dropdown -->
+                            <v-menu location="bottom" :close-on-content-click="true" offset="8">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        variant="outlined"
+                                        class="model-selector-btn w-100 justify-space-between"
+                                        height="56"
+                                        :class="{ 'has-selection': selectedModel }"
+                                    >
+                                        <span v-if="!selectedModel" class="text-medium-emphasis">Choose a model...</span>
+                                        <span v-else class="d-flex align-center gap-3">
+                                            <v-avatar size="32" :style="{ background: modelData[selectedModel].gradient }">
+                                                <v-icon :icon="modelData[selectedModel].icon" color="white" size="18"></v-icon>
+                                            </v-avatar>
+                                            {{ modelData[selectedModel].name }}
+                                        </span>
+                                        <v-icon icon="mdi-chevron-down" class="dropdown-arrow"></v-icon>
+                                    </v-btn>
+                                </template>
+                                
+                                <v-list class="model-dropdown-list py-2" rounded="lg" elevation="4">
+                                    <v-list-item
+                                        v-for="option in modelOptions"
+                                        :key="option.key"
+                                        @click="selectModelFromDropdown(option.key)"
+                                        class="model-list-item px-4 py-3"
+                                        :active="selectedModel === option.key"
+                                    >
+                                        <template v-slot:prepend>
+                                            <v-avatar size="36" :style="{ background: option.gradient }" class="mr-3">
+                                                <v-icon :icon="option.icon" color="white" size="20"></v-icon>
+                                            </v-avatar>
+                                        </template>
+                                        <v-list-item-title class="font-weight-medium">
+                                            {{ option.name }}
+                                        </v-list-item-title>
+                                        <template v-slot:append>
+                                            <v-btn
+                                                icon="mdi-information"
+                                                variant="text"
+                                                size="small"
+                                                color="primary"
+                                                class="info-btn"
+                                                @click.stop="openModelInfo(option.key)"
+                                            ></v-btn>
+                                        </template>
+                                    </v-list-item>
+                                </v-list>
+                            </v-menu>
+                        </div>
+                        
+                        <!-- Selected Model Display -->
+                        <v-expand-transition>
+                            <div v-if="selectedModel" class="mt-4">
+                                <v-sheet
+                                    class="selected-model-sheet pa-4 rounded-xl"
+                                    color="primary"
+                                    variant="tonal"
+                                >
+                                    <div class="d-flex align-center gap-3">
+                                        <v-avatar size="40" color="primary">
+                                            <v-icon icon="mdi-check" color="white" size="20"></v-icon>
+                                        </v-avatar>
+                                        <div>
+                                            <p class="text-caption text-medium-emphasis mb-0">Selected Model</p>
+                                            <p class="text-subtitle-1 font-weight-semibold mb-0">{{ currentModelData.name }}</p>
+                                        </div>
+                                    </div>
+                                </v-sheet>
+                            </div>
+                        </v-expand-transition>
+                        
+                        <!-- Quick Settings -->
+                        <v-divider class="my-6"></v-divider>
+                        
+                        <h3 class="text-subtitle-2 font-weight-medium mb-4">Quick Settings</h3>
+                        
+                        <div class="d-flex gap-4">
+                            <v-btn
+                                variant="outlined"
+                                class="settings-btn flex-grow-1 justify-start text-left"
+                                height="72"
+                                rounded="xl"
+                            >
+                                <div>
+                                    <v-icon icon="mdi-tune" color="primary" size="20" class="mb-2"></v-icon>
+                                    <p class="text-body-2 font-weight-medium mb-0">Advanced</p>
+                                </div>
+                            </v-btn>
+                            
+                            <v-btn
+                                variant="outlined"
+                                class="settings-btn flex-grow-1 justify-start text-left"
+                                height="72"
+                                rounded="xl"
+                            >
+                                <div>
+                                    <v-icon icon="mdi-lightning-bolt" color="secondary" size="20" class="mb-2"></v-icon>
+                                    <p class="text-body-2 font-weight-medium mb-0">Turbo Mode</p>
+                                </div>
+                            </v-btn>
+                        </div>
+                    </v-card>
+                </v-container>
+                
+                <!-- Model Info Dialog -->
+                <v-dialog v-model="dialogOpen" max-width="480" scrollable>
+                    <v-card v-if="dialogModel">
+                        <v-card-item>
+                            <template v-slot:prepend>
+                                <v-avatar size="56" :style="{ background: modelData[dialogModel].gradient }" class="mr-4">
+                                    <v-icon :icon="modelData[dialogModel].icon" color="white" size="28"></v-icon>
+                                </v-avatar>
+                            </template>
+                            <v-card-title class="text-h5 font-weight-bold pa-0">
+                                {{ modelData[dialogModel].name }}
+                            </v-card-title>
+                            <template v-slot:append>
+                                <v-btn
+                                    icon="mdi-close"
+                                    variant="text"
+                                    @click="dialogOpen = false"
+                                ></v-btn>
+                            </template>
+                        </v-card-item>
+                        
+                        <v-chip
+                            size="small"
+                            color="primary"
+                            variant="tonal"
+                            class="ml-4 mb-4"
+                        >
+                            {{ modelData[dialogModel].version }}
+                        </v-chip>
+                        
+                        <v-card-text>
+                            <p class="text-body-1 text-medium-emphasis mb-6">
+                                {{ modelData[dialogModel].description }}
+                            </p>
+                            
+                            <!-- Specs Grid -->
+                            <v-row class="mb-6">
+                                <v-col cols="6">
+                                    <v-sheet class="pa-3 rounded-lg" color="surface-variant">
+                                        <p class="text-caption text-medium-emphasis mb-1">Resolution</p>
+                                        <p class="text-body-2 font-weight-semibold">{{ modelData[dialogModel].resolution }}</p>
+                                    </v-sheet>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-sheet class="pa-3 rounded-lg" color="surface-variant">
+                                        <p class="text-caption text-medium-emphasis mb-1">Speed</p>
+                                        <p class="text-body-2 font-weight-semibold">{{ modelData[dialogModel].speed }}</p>
+                                    </v-sheet>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-sheet class="pa-3 rounded-lg" color="surface-variant">
+                                        <p class="text-caption text-medium-emphasis mb-1">Style</p>
+                                        <p class="text-body-2 font-weight-semibold">{{ modelData[dialogModel].style }}</p>
+                                    </v-sheet>
+                                </v-col>
+                                <v-col cols="6">
+                                    <v-sheet class="pa-3 rounded-lg" color="surface-variant">
+                                        <p class="text-caption text-medium-emphasis mb-1">License</p>
+                                        <p class="text-body-2 font-weight-semibold">{{ modelData[dialogModel].license }}</p>
+                                    </v-sheet>
+                                </v-col>
+                            </v-row>
+                            
+                            <!-- Tags -->
+                            <div class="d-flex flex-wrap gap-2">
+                                <v-chip
+                                    v-for="(tag, index) in modelData[dialogModel].tags"
+                                    :key="index"
+                                    size="small"
+                                    color="primary"
+                                    variant="tonal"
+                                    class="tag-chip"
+                                    :style="{ animationDelay: index * 50 + 'ms' }"
+                                >
+                                    {{ tag }}
+                                </v-chip>
+                            </div>
+                        </v-card-text>
+                        
+                        <v-card-actions class="pa-6 pt-2">
+                            <v-btn
+                                color="primary"
+                                variant="elevated"
+                                class="flex-grow-1"
+                                height="48"
+                                @click="useModel"
+                            >
+                                Use This Model
+                            </v-btn>
+                            <v-btn
+                                variant="outlined"
+                                icon="mdi-open-in-new"
+                                @click="openDocs"
+                            ></v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+                
+                <!-- Theme Toggle -->
+                <v-btn
+                    icon
+                    class="theme-toggle"
+                    size="large"
+                    elevation="4"
+                    @click="toggleTheme"
+                >
+                    <v-icon :icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'" 
+                            :color="theme === 'light' ? 'amber' : 'primary'"></v-icon>
+                </v-btn>
+            </v-main>
+        </v-app>
+    `
+})
+.use(vuetify)
+.mount('#app')

index.html

@@ -4,286 +4,21 @@
     <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">
-    <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',
-                        }
-                    }
-                }
-            }
+    <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>
-</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>
+    <script type="module" src="app.js"></script>
 </body>
 </html>

script.js

@@ -1,286 +1,4 @@
-// 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');
-    }
-});
+// 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');

style.css

@@ -1,3 +1,6 @@
+/* Import Vuetify styles */
+@import "https://unpkg.com/vuetify@3.4.0/dist/vuetify.min.css";
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
@@ -17,197 +20,221 @@
     background: #94a3b8;
 }
 
-.dark ::-webkit-scrollbar-thumb {
-    background: #475569;
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
-.dark ::-webkit-scrollbar-thumb:hover {
-    background: #64748b;
+/* Gradient avatar */
+.gradient-avatar {
+    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%) !important;
 }
 
-/* Select styling enhancements */
-select {
-    background-image: none !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;
 }
 
-/* Focus ring animation */
-.focus-ring-animate {
-    animation: focusPulse 0.3s ease-out;
+.model-selector-btn:hover {
+    border-color: rgb(var(--v-theme-primary)) !important;
 }
 
-@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); }
+.model-selector-btn.has-selection {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
 }
 
-/* Modal animations */
-.modal-enter {
-    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+.dropdown-arrow {
+    transition: transform 0.2s ease;
 }
 
-.modal-exit {
-    animation: modalOut 0.2s ease-out forwards;
+.model-selector-btn[aria-expanded="true"] .dropdown-arrow {
+    transform: rotate(180deg);
 }
 
-@keyframes modalIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95) translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
+/* Model dropdown list */
+.model-dropdown-list {
+    min-width: 100%;
 }
 
-@keyframes modalOut {
-    from {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.95) translateY(10px);
-    }
+.model-list-item {
+    transition: all 0.2s ease;
+    position: relative;
 }
 
-/* Gradient text animation */
-.gradient-text-animate {
-    background-size: 200% auto;
-    animation: gradientShift 3s ease infinite;
+.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;
 }
 
-@keyframes gradientShift {
-    0%, 100% { background-position: 0% center; }
-    50% { background-position: 100% center; }
+.model-list-item:hover::before,
+.model-list-item--active::before {
+    opacity: 1;
 }
 
-/* Button hover glow */
-.btn-glow:hover {
-    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
+.model-list-item:hover,
+.model-list-item--active {
+    background: rgba(var(--v-theme-primary), 0.08) !important;
 }
 
-/* Tag animation */
-.tag-pop {
-    animation: tagPop 0.3s ease-out;
+/* Info button in dropdown */
+.info-btn {
+    opacity: 0;
+    transition: all 0.2s ease;
 }
 
-@keyframes tagPop {
-    0% { transform: scale(0); opacity: 0; }
-    70% { transform: scale(1.1); }
-    100% { transform: scale(1); opacity: 1; }
+.model-list-item:hover .info-btn {
+    opacity: 1;
 }
 
-/* Smooth transitions */
-.transition-smooth {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.info-btn:hover {
+    transform: scale(1.1);
 }
 
-/* Glass effect */
-.glass {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+/* Selected model sheet */
+.selected-model-sheet {
+    animation: slideDown 0.3s ease-out;
 }
 
-.dark .glass {
-    background: rgba(15, 23, 42, 0.7);
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-/* Custom select dropdown styling */
-select option {
-    padding: 12px;
-    font-size: 14px;
+/* 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;
 }
-/* Dropdown menu animations */
-#dropdownMenu {
-    transform-origin: top;
+
+.settings-btn:hover {
+    border-color: rgb(var(--v-theme-primary)) !important;
+    background: rgba(var(--v-theme-primary), 0.04) !important;
 }
 
-/* Info button in dropdown */
-.info-btn {
-    transition: all 0.2s ease;
+/* Tag chips animation */
+.tag-chip {
+    animation: tagPop 0.3s ease-out backwards;
 }
 
-.info-btn:hover {
-    transform: scale(1.1);
+@keyframes tagPop {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    70% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
-.info-btn:active {
-    transform: scale(0.95);
+/* Theme toggle */
+.theme-toggle {
+    position: fixed !important;
+    bottom: 24px;
+    right: 24px;
+    border-radius: 50% !important;
+    transition: transform 0.2s ease !important;
 }
 
-/* Dropdown item hover effects */
-.dropdown-item {
-    position: relative;
+.theme-toggle:hover {
+    transform: scale(1.1) !important;
 }
 
-.dropdown-item::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: linear-gradient(to bottom, #0ea5e9, #d946ef);
+/* 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;
-    transition: opacity 0.2s ease;
+    transform: scale(0.95) translateY(10px);
 }
 
-.dropdown-item:hover::before {
-    opacity: 1;
+/* Gap utility */
+.gap-3 {
+    gap: 12px;
 }
 
-/* Dropdown arrow rotation */
-#dropdownArrow {
-    transition: transform 0.2s ease;
+.gap-4 {
+    gap: 16px;
 }
 
-#dropdownArrow.rotate-180 {
-    transform: rotate(180deg);
+/* Focus ring animation */
+.focus-ring-animate {
+    animation: focusPulse 0.3s ease-out;
 }
 
-/* Custom scrollbar for dropdown */
-#dropdownMenu::-webkit-scrollbar {
-    width: 6px;
+@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);
+    }
 }
 
-#dropdownMenu::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 0 8px 8px 0;
+/* Button glow effect */
+.btn-glow:hover {
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4) !important;
 }
 
-#dropdownMenu::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 3px;
+/* Smooth transitions */
+.transition-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
-.dark #dropdownMenu::-webkit-scrollbar-thumb {
-    background: #475569;
+/* Glass effect */
+.glass {
+    background: rgba(255, 255, 255, 0.7) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
-/* Dropdown trigger focus state */
-#dropdownTrigger:focus,
-#dropdownTrigger.ring-2 {
-    border-color: transparent;
+.v-theme--dark .glass {
+    background: rgba(15, 23, 42, 0.7) !important;
 }
-/* Floating label show */
-.show-label {
-    opacity: 1 !important;
+
+/* Custom scrollbar for dropdown */
+.model-dropdown-list::-webkit-scrollbar {
+    width: 6px;
 }
 
-/* Selected display animation */
-.selected-show {
-    animation: slideDown 0.3s ease-out;
+.model-dropdown-list::-webkit-scrollbar-track {
+    background: transparent;
 }
 
-@keyframes slideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.model-dropdown-list::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+}
+
+.v-theme--dark .model-dropdown-list::-webkit-scrollbar-thumb {
+    background: #475569;
 }