392 lines
15 KiB
Plaintext
392 lines
15 KiB
Plaintext
---
|
|
title: "List of Supported Models"
|
|
description: "Comprehensive catalog of supported AI models with detailed specifications, capabilities, and costs"
|
|
icon: "list"
|
|
mode: "wide"
|
|
---
|
|
|
|
export const ModelDialog = React.memo(({ model, onClose }) => {
|
|
const modelString = `model: "${model.model || 'unknown'}"`
|
|
const jsonString = JSON.stringify(model, null, 2)
|
|
|
|
const copyModelString = useCallback(() => {
|
|
navigator.clipboard.writeText(modelString)
|
|
}, [modelString])
|
|
|
|
const copyJson = useCallback(() => {
|
|
navigator.clipboard.writeText(jsonString)
|
|
}, [jsonString])
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="bg-white dark:bg-zinc-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between p-4 border-b border-zinc-950/20 dark:border-white/20">
|
|
<h3 className="text-lg font-semibold text-zinc-950 dark:text-white">
|
|
Model Details: {model.model || 'Unknown'}
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg className="w-5 h-5 text-zinc-950 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto p-4 space-y-4">
|
|
<div className="bg-[#0C3B43]/10 dark:bg-[#07C983]/10 border border-[#0C3B43]/20 dark:border-[#07C983]/20 rounded-lg p-4">
|
|
<div className="text-xs font-semibold text-[#0C3B43] dark:text-[#07C983] mb-2 uppercase tracking-wide">
|
|
Use on Bifrost
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<code className="flex-1 text-sm font-mono text-zinc-950 dark:text-white bg-white dark:bg-zinc-950 px-3 py-2 rounded border border-zinc-950/20 dark:border-white/20">
|
|
{modelString}
|
|
</code>
|
|
<button
|
|
onClick={copyModelString}
|
|
className="p-2 text-sm font-medium text-[#0C3B43] dark:text-[#07C983] hover:bg-[#0C3B43]/10 dark:hover:bg-[#07C983]/10 rounded-lg transition-colors"
|
|
title="Copy model string"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-xs font-semibold text-zinc-950/70 dark:text-white/70 mb-2 uppercase tracking-wide">
|
|
Full Configuration (JSON)
|
|
</div>
|
|
<pre className="text-sm text-zinc-950 dark:text-white bg-zinc-50 dark:bg-zinc-950 p-4 rounded-lg overflow-auto border border-zinc-950/20 dark:border-white/20">
|
|
{jsonString}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 p-4 border-t border-zinc-950/20 dark:border-white/20">
|
|
<button
|
|
onClick={copyJson}
|
|
className="px-4 py-2 text-sm font-medium text-zinc-950 dark:text-white bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-colors"
|
|
>
|
|
Copy JSON
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-medium text-white bg-[#0C3B43] hover:bg-[#0a2f35] rounded-lg transition-colors"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export const ModelsCatalog = () => {
|
|
const [models, setModels] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [selectedProvider, setSelectedProvider] = useState('all')
|
|
const [selectedModel, setSelectedModel] = useState(null)
|
|
const [showDialog, setShowDialog] = useState(false)
|
|
|
|
useEffect(() => {
|
|
async function fetchModels () {
|
|
try {
|
|
const response = await fetch('https://getbifrost.ai/datasheet')
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch models: ${response.status}`)
|
|
}
|
|
const data = await response.json()
|
|
|
|
// Convert object format {modelName: {config}} to array format
|
|
if (data && typeof data === 'object' && !Array.isArray(data)) {
|
|
const modelsArray = Object.entries(data).map(([modelName, config]) => ({
|
|
model: modelName,
|
|
...config
|
|
}))
|
|
|
|
if (modelsArray.length === 0) {
|
|
throw new Error('No models data received')
|
|
}
|
|
|
|
setModels(modelsArray)
|
|
} else if (Array.isArray(data)) {
|
|
setModels(data)
|
|
} else {
|
|
throw new Error('Invalid data format')
|
|
}
|
|
} catch (err) {
|
|
console.error('Fetch error:', err)
|
|
setError(err.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchModels()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const styleId = 'custom-scrollbar-styles'
|
|
if (document.getElementById(styleId)) return
|
|
|
|
const style = document.createElement('style')
|
|
style.id = styleId
|
|
style.textContent = `
|
|
/* Firefox overlay scrollbar - always visible */
|
|
.custom-scrollbar {
|
|
overflow: auto !important;
|
|
scrollbar-gutter: auto !important;
|
|
scrollbar-width: thin !important;
|
|
scrollbar-color: rgba(228, 228, 231, 0.6) rgba(241, 245, 249, 0.5) !important;
|
|
}
|
|
|
|
.custom-scrollbar:hover {
|
|
scrollbar-color: rgba(228, 228, 231, 1) rgba(241, 245, 249, 0.7) !important;
|
|
}
|
|
|
|
.dark .custom-scrollbar {
|
|
scrollbar-color: rgba(113, 113, 122, 0.6) rgba(39, 39, 42, 0.5) !important;
|
|
}
|
|
|
|
.dark .custom-scrollbar:hover {
|
|
scrollbar-color: rgba(113, 113, 122, 1) rgba(39, 39, 42, 0.7) !important;
|
|
}
|
|
|
|
/* WebKit overlay scrollbar - always visible */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 8px !important;
|
|
height: 8px !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background-color: rgba(241, 245, 249, 0.5) !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-track {
|
|
background-color: rgba(39, 39, 42, 0.5) !important;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(228, 228, 231, 0.6) !important;
|
|
border-radius: 8px !important;
|
|
border: 2px solid transparent !important;
|
|
background-clip: padding-box !important;
|
|
transition: background-color 0.2s !important;
|
|
}
|
|
|
|
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
|
|
background-color: rgba(228, 228, 231, 1) !important;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(82, 82, 91, 1) !important;
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(113, 113, 122, 0.6) !important;
|
|
}
|
|
|
|
.dark .custom-scrollbar:hover::-webkit-scrollbar-thumb {
|
|
background-color: rgba(113, 113, 122, 1) !important;
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(161, 161, 170, 1) !important;
|
|
}
|
|
|
|
/* Make scrollbar overlay by extending table into scrollbar area */
|
|
.custom-scrollbar {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.custom-scrollbar > table {
|
|
width: calc(100% + 8px) !important;
|
|
margin-right: -8px !important;
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
|
|
return () => {
|
|
const existingStyle = document.getElementById(styleId)
|
|
if (existingStyle) {
|
|
existingStyle.remove()
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
const providers = useMemo(() => {
|
|
const uniqueProviders = new Set()
|
|
models.forEach(model => {
|
|
if (model.provider) {
|
|
uniqueProviders.add(model.provider)
|
|
}
|
|
})
|
|
return Array.from(uniqueProviders).sort()
|
|
}, [models])
|
|
|
|
const filteredModels = useMemo(() => {
|
|
let filtered = models
|
|
|
|
// Filter by provider
|
|
if (selectedProvider !== 'all') {
|
|
filtered = filtered.filter(model => model.provider === selectedProvider)
|
|
}
|
|
|
|
// Filter by search term
|
|
if (searchTerm) {
|
|
const term = searchTerm.toLowerCase()
|
|
filtered = filtered.filter(model =>
|
|
Object.values(model).some(value =>
|
|
String(value).toLowerCase().includes(term)
|
|
)
|
|
)
|
|
}
|
|
|
|
return filtered
|
|
}, [models, searchTerm, selectedProvider])
|
|
|
|
const formatColumnName = useCallback((name) => {
|
|
// Handle snake_case: replace underscores with spaces
|
|
let formatted = name.replace(/_/g, ' ')
|
|
// Handle camelCase: add space before capital letters
|
|
formatted = formatted.replace(/([A-Z])/g, ' $1')
|
|
// Capitalize first letter of each word and trim
|
|
return formatted
|
|
.split(' ')
|
|
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
.join(' ')
|
|
.trim()
|
|
}, [])
|
|
|
|
const handleRowClick = useCallback((model) => {
|
|
setSelectedModel(model)
|
|
setShowDialog(true)
|
|
}, [])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-10 text-center border border-zinc-950/20 dark:border-white/20 rounded-lg">
|
|
<div className="text-zinc-950/70 dark:text-white/70">Loading models...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="p-10 text-center border border-red-200 dark:border-red-800 rounded-lg bg-red-50 dark:bg-red-950">
|
|
<div className="text-red-600 dark:text-red-400">Error: {error}</div>
|
|
<div className="text-sm text-red-500 dark:text-red-500 mt-2">Check console for details</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!models || models.length === 0) {
|
|
return (
|
|
<div className="p-10 text-center border border-zinc-950/20 dark:border-white/20 rounded-lg">
|
|
<div className="text-zinc-950/70 dark:text-white/70">No models available</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="w-full not-prose" style={{ display: 'flex', flexDirection: 'column' }}>
|
|
<div className="sticky top-0 z-20 mb-4 pb-4 bg-white dark:bg-zinc-950" style={{ paddingTop: '1rem' }}>
|
|
<div className="flex gap-3 mb-3">
|
|
<input
|
|
type="text"
|
|
placeholder="Search models, providers, or any field..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="flex-1 px-3 py-2 text-base border-2 border-zinc-950/20 dark:border-white/20 rounded-lg focus:outline-none focus:border-[#0C3B43] dark:focus:border-[#07C983] transition-colors bg-white dark:bg-zinc-950 text-zinc-950 dark:text-white"
|
|
/>
|
|
<select
|
|
value={selectedProvider}
|
|
onChange={(e) => setSelectedProvider(e.target.value)}
|
|
className="px-3 py-2 text-base border-2 border-zinc-950/20 dark:border-white/20 rounded-lg focus:outline-none focus:border-[#0C3B43] dark:focus:border-[#07C983] transition-colors bg-white dark:bg-zinc-950 text-zinc-950 dark:text-white"
|
|
>
|
|
<option value="all">All Providers</option>
|
|
{providers.map(provider => (
|
|
<option key={provider} value={provider}>
|
|
{provider.charAt(0).toUpperCase() + provider.slice(1)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="text-sm text-zinc-950/70 dark:text-white/70">
|
|
Showing {filteredModels.length} of {models.length} models
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto custom-scrollbar border border-zinc-950/20 dark:border-white/20 rounded-lg" style={{ maxHeight: '600px', padding: 0, margin: 0, overflowX: 'hidden' }}>
|
|
<table className="w-full text-sm bg-white dark:bg-zinc-950" style={{ borderCollapse: 'collapse', tableLayout: 'fixed', margin: 0, padding: 0 }}>
|
|
<thead className="sticky bg-zinc-50 dark:bg-zinc-900" style={{ top: 0, zIndex: 10 }}>
|
|
<tr>
|
|
<th className="px-6 py-3 text-left font-semibold text-zinc-950 dark:text-white whitespace-nowrap border-b-2 border-zinc-950/20 dark:border-white/20" style={{ width: '200px' }}>
|
|
Provider
|
|
</th>
|
|
<th className="px-6 py-3 text-left font-semibold text-zinc-950 dark:text-white whitespace-nowrap border-b-2 border-zinc-950/20 dark:border-white/20">
|
|
Model
|
|
</th>
|
|
<th className="px-6 py-3 text-center font-semibold text-zinc-950 dark:text-white whitespace-nowrap border-b-2 border-zinc-950/20 dark:border-white/20" style={{ width: '150px' }}>
|
|
Details
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredModels.length === 0 && searchTerm ? (
|
|
<tr>
|
|
<td colSpan={3} className="px-6 py-10 text-center text-zinc-950/70 dark:text-white/70">
|
|
No models found matching "{searchTerm}"
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredModels.map((model, idx) => (
|
|
<tr
|
|
key={`${model.provider}-${model.model}`}
|
|
className="transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-900"
|
|
>
|
|
<td className="px-6 py-3 text-zinc-950/80 dark:text-white/80 border-b border-zinc-950/10 dark:border-white/10 capitalize">
|
|
{model.provider || '—'}
|
|
</td>
|
|
<td className="px-6 py-3 text-zinc-950/80 dark:text-white/80 border-b border-zinc-950/10 dark:border-white/10 font-mono">
|
|
{model.model || '—'}
|
|
</td>
|
|
<td className="px-6 py-3 border-b border-zinc-950/10 dark:border-white/10 text-center">
|
|
<button
|
|
onClick={() => handleRowClick(model)}
|
|
className="text-[#0C3B43] dark:text-[#07C983] hover:underline font-medium text-sm"
|
|
>
|
|
View Details
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{showDialog && selectedModel && <ModelDialog model={selectedModel} onClose={() => setShowDialog(false)} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
<ModelsCatalog />
|
|
|