\n \n

\n );\n}\n\nfunction ModelCard({ \n model, \n onUpdate, \n onDelete,\n expanded,\n onToggle \n}: {\n model: BaseModel;\n onUpdate: (id: string, updates: Partial) => void;\n onDelete: (id: string) => void;\n expanded: boolean;\n onToggle: () => void;\n}) {\n return (\n

\n {model.name}\n ({model.provider})\n

\n \n ${model.pricing.inputPer1k} / ${model.pricing.outputPer1k} per 1k tokens\n \n

\n {\n e.stopPropagation();\n onDelete(model.id);\n }}\n className=\"p-1 hover:bg-red-100 dark:hover:bg-red-900 rounded-full text-red-500\"\n >\n \n \n {expanded ? : }\n

\n\n {expanded && (\n

\n \n Model Name\n \n onUpdate(model.id, { name: e.target.value })}\n />\n

\n \n Context Window\n \n onUpdate(model.id, { \n contextWindow: parseInt(e.target.value) \n })}\n />\n

\n\n

Capabilities

\n {Object.entries(model.capabilities).map(([key, value]) => (\n \n onUpdate(model.id, {\n capabilities: { ...model.capabilities, [key]: e.target.checked }\n })}\n className=\"rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700\"\n />\n {key}\n \n ))}\n

\n\n

Configuration

\n \n Temperature\n \n onUpdate(model.id, {\n config: { ...model.config, temperature: parseFloat(e.target.value) }\n })}\n />\n

\n \n Max Tokens\n \n onUpdate(model.id, {\n config: { ...model.config, maxTokens: parseInt(e.target.value) }\n })}\n />\n

\n )}\n

\n );\n}\n\nfunction App() {\n const [models, setModels] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [expandedModels, setExpandedModels] = useState>(new Set());\n const [theme, setTheme] = useState<'light' | 'dark'>('light');\n const [progress, setProgress] = useState(0);\n\n useEffect(() => {\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n setTheme('dark');\n }\n fetchModels();\n }, []);\n\n useEffect(() => {\n document.documentElement.classList.toggle('dark', theme === 'dark');\n }, [theme]);\n\n const toggleTheme = () => {\n setTheme(prev => prev === 'light' ? 'dark' : 'light');\n };\n\n const fetchModels = async () => {\n setLoading(true);\n setProgress(0);\n \n const simulateProgress = () => {\n setProgress(prev => Math.min(90, prev + 10));\n };\n const progressInterval = setInterval(simulateProgress, 500);\n\n try {\n const response = await fetch(\"/api/models\");\n if (!response.ok) throw new Error(\"Failed to fetch models\");\n const data = await response.json();\n setModels(data);\n } catch (err) {\n setError(err.message);\n } finally {\n clearInterval(progressInterval);\n setProgress(100);\n setTimeout(() => {\n setLoading(false);\n setProgress(0);\n }, 500);\n }\n };\n\n const toggleModel = async (modelId: string) => {\n setExpandedModels(prev => {\n const next = new Set(prev);\n if (next.has(modelId)) {\n next.delete(modelId);\n } else {\n next.add(modelId);\n }\n return next;\n });\n };\n\n const modelsByProvider = models.reduce((acc, model) => {\n const provider = model.provider;\n if (!acc[provider]) {\n acc[provider] = [];\n }\n acc[provider].push(model);\n return acc;\n }, {} as Record);\n\n return (\n

Model Management

\n \n {theme === 'light' ? '🌙' : '☀️'}\n \n

\n\n {loading && (\n

\n \n

\n Loading... {progress}%\n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n\n {!loading && !error && Object.entries(modelsByProvider).map(([provider, providerModels]) => (\n

\n {provider}\n

\n {providerModels.map(model => (\n toggleModel(model.id)}\n />\n ))}\n

\n ))}\n\n \n \n Add New Model\n \n

\n\n

\n \n href={import.meta.url.replace(\"esm.town\", \"val.town\")}\n target=\"_top\"\n className=\"text-blue-600 dark:text-blue-400 hover:underline\"\n >\n View Source\n \n

\n );\n}\n\n\n// Client initialization\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\n// Server handler\nexport default async function handler(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1)!;\n\n // Create models table if it doesn't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_models (\n id TEXT PRIMARY KEY,\n data TEXT NOT NULL\n )\n `);\n\n if (req.method === \"POST\") {\n const models = await req.json();\n await sqlite.execute(`DELETE FROM ${KEY}_models`);\n for (const model of models) {\n await sqlite.execute(\n `INSERT INTO ${KEY}_models (id, data) VALUES (?, ?)`,\n [model.id, JSON.stringify(model)],\n );\n }\n return new Response(JSON.stringify({ success: true }));\n }\n\n if (req.url.endsWith(\"/api/models\")) {\n // Initialize providers\n const providers = [\n new OpenAIProvider(),\n new AnthropicProvider(),\n new GoogleProvider(),\n ];\n\n // Get saved model configurations\n const savedModels = await sqlite.execute(`SELECT * FROM ${KEY}_models`);\n const savedModelsMap = new Map(\n savedModels.rows.map(row => [row.id, JSON.parse(row.data)]),\n );\n\n // Combine provider models with saved configurations\n const allModels = providers.flatMap(provider =>\n provider.models.map(model => ({\n ...model,\n provider: provider.name,\n enabled: true,\n ...savedModelsMap.get(model.id),\n }))\n );\n\n // Add any custom models from saved configurations\n const customModels = Array.from(savedModelsMap.values())\n .filter(model => model.provider === \"custom\");\n\n return new Response(\n JSON.stringify([...allModels, ...customModels]),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Serve the HTML page\n return new Response(\n `\n \n \n \n LLM Model Management\n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n margin: 0;\n font-family: system-ui, sans-serif;\n }\n`;",[],[100],"files",[154,173,184,194,203,213],"counts",{"_225":32,"_226":165,"_227":32,"_228":229},"pulls","branches","forks","envVars",{"_230":32,"_231":32},"count","emptyCount","contents",[],"file",{"_105":214,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":236,"_101":216,"_166":217,"_168":218,"_169":22,"_170":-5,"_99":237},["D",1739169918553],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":246,"_152":251,"_221":270,"_234":271,"_232":273,"_274":-5,"_275":-5,"_276":-5,"_277":-5,"_278":279},{"_105":106,"_96":97,"_107":247,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":248,"_136":249,"_139":250,"_151":22},["D",1739123427596],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[252,267],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":253,"_99":266},[254,257,260,263],{"_105":174,"_96":175,"_157":176,"_159":158,"_160":142,"_161":177,"_163":22,"_107":178,"_101":179,"_166":180,"_168":181,"_169":22,"_170":-5,"_171":255,"_99":256},[],[156,175],{"_105":185,"_96":186,"_157":187,"_159":158,"_160":142,"_161":188,"_163":119,"_107":189,"_101":190,"_166":180,"_168":191,"_169":22,"_170":-5,"_171":258,"_99":259},[],[156,186],{"_105":195,"_96":196,"_157":197,"_159":158,"_160":142,"_161":198,"_163":119,"_107":199,"_101":190,"_166":180,"_168":200,"_169":22,"_170":-5,"_171":261,"_99":262},[],[156,196],{"_105":204,"_96":205,"_157":206,"_159":158,"_160":142,"_161":207,"_163":119,"_107":208,"_101":179,"_166":180,"_168":209,"_169":22,"_170":-5,"_171":264,"_99":265},[],[156,205],[156],{"_105":214,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":215,"_101":216,"_166":217,"_168":218,"_169":22,"_170":-5,"_171":268,"_99":269},[],[100],[252,254,257,260,263,267],{"_105":214,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":236,"_101":216,"_166":217,"_168":218,"_169":22,"_170":-5,"_99":272},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

prashamtrivedi

LlmDashboard