// Venice AI Model Browser - Fetches from API (function() { // ========== FEATURE FLAGS ========== // Set to true to enable, false to hide const ENABLE_VIDEO = false; // Video models (coming soon) // =================================== // Configuration const API_BASE = 'https://api.venice.ai/api/v1/models'; const MODEL_TYPES = ['text', 'image', 'tts', 'embedding', 'upscale', 'inpaint', 'asr', ...(ENABLE_VIDEO ? ['video'] : [])]; const CACHE_KEY = 'venice-models-cache'; const CACHE_TTL = 5 * 60 * 1000; // 5 minutes // Models requiring manual status flags (until API supports these fields) const BETA_MODELS = new Set([ 'grok-41-fast', 'gemini-3-pro-preview', 'kimi-k2-thinking', 'openai-gpt-oss-120b', 'google-gemma-3-27b-it', 'qwen3-next-80b', 'deepseek-ai-DeepSeek-R1', 'hermes-3-llama-3.1-405b', 'claude-opus-45' ]); const DEPRECATED_MODELS = new Set(['qwen3-235b']); const ANONYMIZED_MODELS = new Set(['gemini-3-pro-preview']); const PRIVATE_TYPES = new Set(['upscale']); // Filter categories const CAPABILITY_FILTERS = ['reasoning', 'vision', 'function', 'code']; const VIDEO_FILTERS = ['text-to-video', 'image-to-video']; const IMAGE_FILTERS = ['image-gen', 'image-upscale', 'image-edit', 'image-uncensored']; // Tooltip text const TOOLTIPS = { private: 'This model is private and no prompt data is stored in any capacity.', anonymized: 'The provider of this model maintains prompt data (though it is anonymized by Venice). For sensitive content, use a private model.', beta: 'Experimental model that may change or be removed without notice. Not recommended for production.', deprecated: 'This model is scheduled for removal. See the deprecations page for timeline and migration guide.', uncensored: 'Responds to all prompts without content-based refusals or filtering.' }; let isInitializing = false; // Helpers function formatContext(tokens) { if (tokens >= 1000000) return (tokens / 1000000).toFixed(1) + 'M'; if (tokens >= 1000) return Math.round(tokens / 1000) + 'K'; return tokens; } function formatPrice(price) { return '$' + price.toFixed(2); } function getCapabilities(caps) { if (!caps) return []; const list = []; if (caps.supportsFunctionCalling) list.push('Function Calling'); if (caps.supportsReasoning) list.push('Reasoning'); if (caps.supportsVision) list.push('Vision'); if (caps.optimizedForCode) list.push('Code'); return list; } function escapeHtml(str) { if (!str) return ''; return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } function isUncensoredModel(model) { const spec = model.model_spec || {}; const traits = spec.traits || []; const modelId = model.id.toLowerCase(); return traits.includes('most_uncensored') || modelId.includes('uncensored') || modelId.includes('lustify'); } function isAnonymizedModel(model) { const spec = model.model_spec || {}; if (ANONYMIZED_MODELS.has(model.id)) return true; if (spec.privacy) return spec.privacy === 'anonymized'; const isPrivateType = PRIVATE_TYPES.has(model.type); return !isPrivateType && (!spec.modelSource || spec.modelSource === ''); } function isBetaModel(model) { const spec = model.model_spec || {}; return spec.beta === true || BETA_MODELS.has(model.id); } function isDeprecatedModel(model) { const spec = model.model_spec || {}; return spec.deprecated === true || DEPRECATED_MODELS.has(model.id); } function matchesCodeFilter(model) { const spec = model.model_spec || {}; const modelId = model.id.toLowerCase(); return (spec.capabilities && spec.capabilities.optimizedForCode) || modelId.includes('coder') || modelId.includes('grok'); } // Cache helpers function getCachedModels() { try { const cached = sessionStorage.getItem(CACHE_KEY); if (!cached) return null; const { data, timestamp } = JSON.parse(cached); if (Date.now() - timestamp > CACHE_TTL) { sessionStorage.removeItem(CACHE_KEY); return null; } return data; } catch { return null; } } function setCachedModels(models) { try { sessionStorage.setItem(CACHE_KEY, JSON.stringify({ data: models, timestamp: Date.now() })); } catch { // Storage full or disabled } } async function fetchModelsFromAPI() { const fetchPromises = MODEL_TYPES.map(type => fetch(`${API_BASE}?type=${type}`) .then(r => { if (!r.ok) throw new Error(`API returned ${r.status}`); return r.json(); }) .catch(() => ({ data: [] })) ); const results = await Promise.all(fetchPromises); const rawModels = results.flatMap(r => r.data || []); // Deduplicate by model ID const seen = new Set(); const models = rawModels.filter(m => { if (seen.has(m.id)) return false; seen.add(m.id); return true; }); setCachedModels(models); return models; } async function init() { if (isInitializing) return; const placeholder = document.getElementById('model-search-placeholder'); if (!placeholder) { setTimeout(init, 200); return; } isInitializing = true; const presetFilter = placeholder.dataset.filter || null; const hasCachedData = getCachedModels() !== null; // Create container - show loading only if no cache const container = document.createElement('div'); container.id = 'venice-model-browser'; container.innerHTML = `

${hasCachedData ? '' : 'Loading...'}

${hasCachedData ? '' : '

Loading models...

`; placeholder.replaceWith(container); // Get elements const searchInput = container.querySelector('.vmb-search'); const filterButtons = container.querySelectorAll('.vmb-filter'); const countDisplay = container.querySelector('.vmb-count'); const modelsContainer = container.querySelector('.vmb-models'); const categoryFilters = container.querySelector('.vmb-category-filters'); const capabilityFilters = container.querySelector('.vmb-capability-filters'); const videoFilters = ENABLE_VIDEO ? container.querySelector('.vmb-video-filters') : null; const imageFilters = container.querySelector('.vmb-image-filters'); // Configure filter visibility based on page context if (presetFilter) { categoryFilters.style.display = 'none'; const filterVisibility = { text: { capability: true, video: false, image: false }, video: { capability: false, video: true, image: false }, image: { capability: false, video: false, image: true } }; const config = filterVisibility[presetFilter] || { capability: false, video: false, image: false }; capabilityFilters.style.display = config.capability ? 'contents' : 'none'; if (videoFilters) videoFilters.style.display = config.video ? 'contents' : 'none'; imageFilters.style.display = config.image ? 'contents' : 'none'; } else { capabilityFilters.style.display = 'none'; if (videoFilters) videoFilters.style.display = 'none'; imageFilters.style.display = 'none'; } let allModels = []; let activeFilter = presetFilter || 'all'; let activeCapability = null; let activeVideoType = null; let activeImageType = null; // Try cache first for instant render const cachedModels = getCachedModels(); if (cachedModels && cachedModels.length > 0) { allModels = cachedModels; renderModels(); // Refresh in background (don't await) fetchModelsFromAPI().then(freshModels => { if (freshModels.length > 0) { allModels = freshModels; renderModels(); } }).catch(() => {}); } else { // No cache - fetch and show loading try { allModels = await fetchModelsFromAPI(); if (allModels.length === 0) { modelsContainer.innerHTML = '

No models found.

'; isInitializing = false; return; } renderModels(); } catch (error) { modelsContainer.innerHTML = '

Failed to load models. Please refresh the page.

'; isInitializing = false; } } function matchesCategory(model) { if (activeFilter === 'all') return true; if (activeFilter === 'text') return model.type === 'text'; if (activeFilter === 'image') return model.type === 'image' || model.type === 'upscale' || model.type === 'inpaint'; if (activeFilter === 'video') return model.type === 'video'; if (activeFilter === 'audio') return model.type === 'tts' || model.type === 'asr'; if (activeFilter === 'embedding') return model.type === 'embedding'; return true; } function matchesCapability(model) { if (!activeCapability) return true; const spec = model.model_spec || {}; const caps = spec.capabilities || {}; if (activeCapability === 'reasoning') return caps.supportsReasoning; if (activeCapability === 'vision') return caps.supportsVision; if (activeCapability === 'function') return caps.supportsFunctionCalling; if (activeCapability === 'code') return matchesCodeFilter(model); return true; } function matchesVideoType(model) { if (!activeVideoType) return true; const constraints = model.model_spec?.constraints || {}; return constraints.model_type === activeVideoType; } function matchesImageType(model) { if (!activeImageType) return true; const modelId = model.id.toLowerCase(); if (activeImageType === 'image-gen') return model.type === 'image' && !modelId.includes('qwen'); if (activeImageType === 'image-upscale') return model.type === 'upscale'; if (activeImageType === 'image-edit') return model.type === 'inpaint' || modelId.includes('qwen-image'); if (activeImageType === 'image-uncensored') return isUncensoredModel(model); return true; } function renderModels() { const query = searchInput.value.toLowerCase().trim(); const filtered = allModels.filter(model => { const spec = model.model_spec || {}; const name = (spec.name || model.id || '').toLowerCase(); const modelId = (model.id || '').toLowerCase(); const caps = getCapabilities(spec.capabilities); const matchesSearch = !query || name.includes(query) || modelId.includes(query) || caps.some(c => c.toLowerCase().includes(query)); return matchesSearch && matchesCategory(model) && matchesCapability(model) && matchesVideoType(model) && matchesImageType(model); }); countDisplay.textContent = filtered.length + ' model' + (filtered.length !== 1 ? 's' : ''); if (filtered.length === 0) { modelsContainer.innerHTML = '

No models match your filters

'; return; } modelsContainer.innerHTML = filtered.map(model => renderModelCard(model)).join(''); } function renderModelCard(model) { const spec = model.model_spec || {}; const caps = getCapabilities(spec.capabilities); const pricing = spec.pricing || model.pricing || {}; const constraints = spec.constraints || {}; // Context/info string let contextStr = ''; if (spec.availableContextTokens) { contextStr = `${formatContext(spec.availableContextTokens)} context`; } else if (model.type === 'video' && constraints.resolutions?.length > 0) { contextStr = `up to ${constraints.resolutions[constraints.resolutions.length - 1]}`; } else if (model.type === 'tts' && spec.voices?.length > 0) { contextStr = `${spec.voices.length} voices`; } // Pricing string let priceStr = ''; if (pricing.input && pricing.output) { priceStr = `${formatPrice(pricing.input.usd)}/M input | ${formatPrice(pricing.output.usd)}/M output`; } else if (pricing.input && model.type === 'tts') { priceStr = `${formatPrice(pricing.input.usd)}/M chars`; } else if (pricing.generation) { priceStr = `${formatPrice(pricing.generation.usd)} per image`; } else if (pricing.perCharacter) { priceStr = `${formatPrice(pricing.perCharacter.usd * 1000000)}/M chars`; } else if (pricing.perSecond) { priceStr = `${formatPrice(pricing.perSecond.usd)}/sec`; } const modelName = escapeHtml(spec.name || model.id); const modelId = escapeHtml(model.id); const hasLink = spec.modelSource?.length > 0; const nameLink = hasLink ? `${modelName}` : `${modelName}`; // Badges const typeBadge = model.type !== 'text' ? `${escapeHtml(model.type)}` : ''; const privacyBadge = isAnonymizedModel(model) ? `` : ``; const betaBadge = isBetaModel(model) ? `` : ''; const deprecatedBadge = isDeprecatedModel(model) ? `` : ''; const uncensoredBadge = isUncensoredModel(model) ? `` : ''; // Copy button SVGs const copyIcon = ``; const checkIcon = ``; const copyBtn = ``; // Video-specific metadata const videoMeta = model.type === 'video' ? [ constraints.model_type ? `${constraints.model_type === 'text-to-video' ? 'Text to Video' : 'Image to Video'}` : '', constraints.durations?.length ? `${constraints.durations.join(', ')}` : '', constraints.audio ? `Audio` : '' ].filter(Boolean).map(s => `|${s}`).join('') : ''; return `

${nameLink}${copyBtn}${typeBadge}${privacyBadge}${betaBadge}${deprecatedBadge}${uncensoredBadge}

${contextStr}

${modelId} ${priceStr ? `|${priceStr}` : ''} ${caps.length > 0 ? `|${caps.join(' · ')}` : ''} ${videoMeta}

`; } function updateAriaPressed(btn, isActive) { btn.setAttribute('aria-pressed', isActive ? 'true' : 'false'); } // Event: Search input with debounce let searchTimeout; searchInput.addEventListener('input', () => { clearTimeout(searchTimeout); searchTimeout = setTimeout(renderModels, 100); }); // Event: Filter buttons filterButtons.forEach(btn => { btn.addEventListener('click', () => { const filter = btn.dataset.filter; const isCapability = CAPABILITY_FILTERS.includes(filter); const isVideoType = VIDEO_FILTERS.includes(filter); const isImageType = IMAGE_FILTERS.includes(filter); if (isCapability) { if (activeCapability === filter) { activeCapability = null; btn.classList.remove('active'); updateAriaPressed(btn, false); } else { capabilityFilters.querySelectorAll('.vmb-filter').forEach(b => { b.classList.remove('active'); updateAriaPressed(b, false); }); activeCapability = filter; btn.classList.add('active'); updateAriaPressed(btn, true); } } else if (isVideoType && videoFilters) { if (activeVideoType === filter) { activeVideoType = null; btn.classList.remove('active'); updateAriaPressed(btn, false); } else { videoFilters.querySelectorAll('.vmb-filter').forEach(b => { b.classList.remove('active'); updateAriaPressed(b, false); }); activeVideoType = filter; btn.classList.add('active'); updateAriaPressed(btn, true); } } else if (isImageType) { if (activeImageType === filter) { activeImageType = null; btn.classList.remove('active'); updateAriaPressed(btn, false); } else { imageFilters.querySelectorAll('.vmb-filter').forEach(b => { b.classList.remove('active'); updateAriaPressed(b, false); }); activeImageType = filter; btn.classList.add('active'); updateAriaPressed(btn, true); } } else { // Category filter (main page only) activeFilter = filter; activeCapability = null; activeVideoType = null; activeImageType = null; filterButtons.forEach(b => { b.classList.remove('active'); updateAriaPressed(b, false); }); btn.classList.add('active'); updateAriaPressed(btn, true); } renderModels(); }); }); // Event: Copy button (delegated) modelsContainer.addEventListener('click', async (e) => { const copyBtn = e.target.closest('.vmb-copy-btn'); if (!copyBtn) return; const modelId = copyBtn.dataset.modelId; await navigator.clipboard.writeText(modelId).catch(() => {}); copyBtn.classList.add('copied'); setTimeout(() => copyBtn.classList.remove('copied'), 1500); }); } function tryInit() { if (!window.location.pathname.includes('/models')) return; const placeholder = document.getElementById('model-search-placeholder'); const existing = document.getElementById('venice-model-browser'); if (placeholder && !existing) { isInitializing = false; init(); } } // Initialize on page load if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => setTimeout(tryInit, 100)); } else { setTimeout(tryInit, 100); } // Watch for SPA navigation (works even when starting from non-models page) const observer = new MutationObserver(() => { requestAnimationFrame(tryInit); }); observer.observe(document.body, { childList: true, subtree: true }); })();

Model Catalog