MateusFF/model-intellect-hub

1// Model data with descriptions and specs2const modelData = {3    'stable-diffusion-xl': {4        name: 'Stable Diffusion XL',5        version: 'SDXL 1.0',6        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.',7        resolution: '1024×1024',8        speed: 'Medium',9        style: 'Versatile',10        license: 'Open Source',11        tags: ['Open Source', 'Customizable', 'Local Run', 'Community']12    },13    'dall-e-3': {14        name: 'DALL-E 3',15        version: 'Latest',16        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.',17        resolution: '1024×1024',18        speed: 'Fast',19        style: 'Photorealistic',20        license: 'Commercial',21        tags: ['OpenAI', 'Text Rendering', 'API', 'Enterprise']22    },23    'midjourney-v6': {24        name: 'Midjourney V6',25        version: 'Alpha',26        description: 'Latest iteration with unprecedented realism, coherent text generation, and improved prompt accuracy. Known for stunning artistic quality and aesthetic appeal in generated imagery.',27        resolution: 'Up to 2048×2048',28        speed: 'Medium',29        style: 'Artistic',30        license: 'Commercial',31        tags: ['Discord', 'Artistic', 'High Quality', 'Trending']32    },33    'imagen-3': {34        name: 'Imagen 3',35        version: 'v3.0',36        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.',37        resolution: '1024×1024',38        speed: 'Fast',39        style: 'Photorealistic',40        license: 'Commercial',41        tags: ['Google', 'Safe', 'Reliable', 'Enterprise']42    },43    'firefly-3': {44        name: 'Adobe Firefly 3',45        version: 'v3.0',46        description: 'Adobe\'s creative generative AI designed for safe commercial use. Integrated with Creative Cloud, featuring structure reference and style reference for precise control.',47        resolution: '1024×1024',48        speed: 'Fast',49        style: 'Commercial',50        license: 'Commercial Safe',51        tags: ['Adobe', 'Creative Cloud', 'Safe', 'Designers']52    },53    'leonardo-phoenix': {54        name: 'Leonardo Phoenix',55        version: 'Phoenix',56        description: 'Leonardo.ai\'s flagship model with exceptional coherence, prompt adherence, and native 1536×1536 resolution. Features Alchemy for premium quality enhancement.',57        resolution: '1536×1536',58        speed: 'Medium',59        style: 'Game Assets',60        license: 'Commercial',61        tags: ['Gaming', 'Assets', 'Fine-tune', 'Community']62    }63};64// DOM Elements65const dropdownTrigger = document.getElementById('dropdownTrigger');66const dropdownMenu = document.getElementById('dropdownMenu');67const dropdownArrow = document.getElementById('dropdownArrow');68const dropdownSelectedText = document.getElementById('dropdownSelectedText');69const customDropdown = document.getElementById('customDropdown');70const modal = document.getElementById('modelModal');71const modalBackdrop = document.getElementById('modalBackdrop');72const modalContent = document.getElementById('modalContent');73const closeModal = document.getElementById('closeModal');74const floatingLabel = document.getElementById('floatingLabel');75const selectedDisplay = document.getElementById('selectedDisplay');76const selectedModelName = document.getElementById('selectedModelName');77const themeToggle = document.getElementById('themeToggle');78// Modal content elements79const modalTitle = document.getElementById('modalTitle');80const modalVersion = document.getElementById('modalVersion');81const modalDescription = document.getElementById('modalDescription');82const modalResolution = document.getElementById('modalResolution');83const modalSpeed = document.getElementById('modalSpeed');84const modalStyle = document.getElementById('modalStyle');85const modalLicense = document.getElementById('modalLicense');86const modalTags = document.getElementById('modalTags');87// State88let currentModel = null;89let isDropdownOpen = false;90 91// Initialize92document.addEventListener('DOMContentLoaded', () => {93    feather.replace();94    initTheme();95    initDropdown();96});97// Theme handling98function initTheme() {99    const savedTheme = localStorage.getItem('theme') || 'light';100    if (savedTheme === 'dark') {101        document.documentElement.classList.add('dark');102    }103}104 105themeToggle.addEventListener('click', () => {106    document.documentElement.classList.toggle('dark');107    const isDark = document.documentElement.classList.contains('dark');108    localStorage.setItem('theme', isDark ? 'dark' : 'light');109    feather.replace();110});111// Dropdown functions112function initDropdown() {113    // Toggle dropdown on trigger click114    dropdownTrigger.addEventListener('click', (e) => {115        e.stopPropagation();116        toggleDropdown();117    });118    119    // Handle dropdown item clicks120    document.querySelectorAll('.dropdown-item').forEach(item => {121        item.addEventListener('click', (e) => {122            // Don't select if info button was clicked123            if (e.target.closest('.info-btn')) {124                e.stopPropagation();125                return;126            }127            128            const value = item.dataset.value;129            selectModel(value);130            closeDropdown();131        });132    });133    134    // Handle info button clicks135    document.querySelectorAll('.info-btn').forEach(btn => {136        btn.addEventListener('click', (e) => {137            e.stopPropagation();138            const modelKey = btn.dataset.model;139            showModelInfo(modelKey);140        });141    });142    143    // Close dropdown when clicking outside144    document.addEventListener('click', (e) => {145        if (isDropdownOpen && !customDropdown.contains(e.target)) {146            closeDropdown();147        }148    });149    150    // Close dropdown on escape key151    document.addEventListener('keydown', (e) => {152        if (e.key === 'Escape' && isDropdownOpen) {153            closeDropdown();154        }155    });156}157 158function toggleDropdown() {159    if (isDropdownOpen) {160        closeDropdown();161    } else {162        openDropdown();163    }164}165 166function openDropdown() {167    isDropdownOpen = true;168    dropdownMenu.classList.remove('opacity-0', 'invisible', 'scale-95');169    dropdownMenu.classList.add('opacity-100', 'visible', 'scale-100');170    dropdownArrow.classList.add('rotate-180');171    dropdownTrigger.classList.add('ring-2', 'ring-primary-500', 'border-transparent');172}173 174function closeDropdown() {175    isDropdownOpen = false;176    dropdownMenu.classList.add('opacity-0', 'invisible', 'scale-95');177    dropdownMenu.classList.remove('opacity-100', 'visible', 'scale-100');178    dropdownArrow.classList.remove('rotate-180');179    dropdownTrigger.classList.remove('ring-2', 'ring-primary-500', 'border-transparent');180}181 182function selectModel(value) {183    currentModel = value;184    185    if (value) {186        // Show floating label187        floatingLabel.classList.add('show-label');188        189        // Update trigger text190        const model = modelData[value];191        dropdownSelectedText.textContent = model.name;192        dropdownSelectedText.classList.add('text-gray-800', 'dark:text-white');193        194        // Show selected display195        selectedModelName.textContent = model.name;196        selectedDisplay.classList.remove('hidden');197        selectedDisplay.classList.add('selected-show');198        199        // Add focus ring animation200        dropdownTrigger.classList.add('focus-ring-animate');201        setTimeout(() => {202            dropdownTrigger.classList.remove('focus-ring-animate');203        }, 300);204    }205}206 207function showModelInfo(modelKey) {208    const model = modelData[modelKey];209    if (!model) return;210    211    // Populate modal212    modalTitle.textContent = model.name;213    modalVersion.textContent = model.version;214    modalDescription.textContent = model.description;215    modalResolution.textContent = model.resolution;216    modalSpeed.textContent = model.speed;217    modalStyle.textContent = model.style;218    modalLicense.textContent = model.license;219    220    // Populate tags221    modalTags.innerHTML = model.tags.map((tag, i) => `222        <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">223            ${tag}224        </span>225    `).join('');226    227    // Show modal228    openModal();229}230// Modal functions231function openModal() {232    modal.classList.remove('hidden');233    // Trigger reflow234    void modal.offsetWidth;235    236    modalBackdrop.classList.remove('opacity-0');237    modalContent.classList.remove('scale-95', 'opacity-0');238    modalContent.classList.add('scale-100', 'opacity-100');239}240 241function closeModalFunc() {242    modalBackdrop.classList.add('opacity-0');243    modalContent.classList.remove('scale-100', 'opacity-100');244    modalContent.classList.add('scale-95', 'opacity-0');245    246    setTimeout(() => {247        modal.classList.add('hidden');248    }, 300);249}250 251// Close modal handlers252closeModal.addEventListener('click', closeModalFunc);253modalBackdrop.addEventListener('click', closeModalFunc);254 255// Close on escape key256document.addEventListener('keydown', (e) => {257    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {258        closeModalFunc();259    }260});261 262// Use model button263document.getElementById('useModelBtn').addEventListener('click', () => {264    closeModalFunc();265    // Add a subtle confirmation animation266    modelSelect.parentElement.classList.add('focus-ring-animate');267    setTimeout(() => {268        modelSelect.parentElement.classList.remove('focus-ring-animate');269    }, 300);270});271 272// Docs button273document.getElementById('docsBtn').addEventListener('click', () => {274    const urls = {275        'stable-diffusion-xl': 'https://stability.ai/stable-diffusion',276        'dall-e-3': 'https://openai.com/dall-e-3',277        'midjourney-v6': 'https://www.midjourney.com',278        'imagen-3': 'https://deepmind.google/technologies/imagen-3/',279        'firefly-3': 'https://www.adobe.com/products/firefly.html',280        'leonardo-phoenix': 'https://leonardo.ai'281    };282    283    if (currentModel && urls[currentModel]) {284        window.open(urls[currentModel], '_blank');285    }286});287