\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 \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 Delete\n \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 \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 \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 \n onUpdate(model.id, {\n config: { ...model.config, temperature: parseFloat(e.target.value) },\n })}\n />\n

\n \n Max Tokens\n \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\n && 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 Add New Model\n \n

\n\n

\n \n View Source\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`;",[],[211],"files",[149,168,179,189,198,209],"counts",{"_223":32,"_224":160,"_225":32,"_226":227},"pulls","branches","forks","envVars",{"_228":32,"_229":32},"count","emptyCount","contents",[232,235,238,241],{"_103":169,"_95":170,"_151":171,"_153":152,"_154":137,"_155":172,"_157":158,"_105":233,"_100":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_98":234},["D",1739170273834],[99,170],{"_103":180,"_95":181,"_151":182,"_153":152,"_154":137,"_155":183,"_157":158,"_105":236,"_100":185,"_161":175,"_163":186,"_164":22,"_165":-5,"_98":237},["D",1739168303345],[99,181],{"_103":190,"_95":191,"_151":192,"_153":152,"_154":137,"_155":193,"_157":158,"_105":239,"_100":185,"_161":175,"_163":195,"_164":22,"_165":-5,"_98":240},["D",1739168338110],[99,191],{"_103":199,"_95":200,"_151":201,"_153":152,"_154":137,"_155":202,"_157":158,"_105":242,"_100":204,"_161":175,"_163":205,"_164":22,"_165":-5,"_98":243},["D",1739168262152],[99,200],"file",{"_103":150,"_95":99,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":158,"_105":246,"_100":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":247},["D",1739168120269],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":256,"_147":261,"_219":280,"_244":281,"_230":283,"_292":-5,"_293":-5,"_294":-5,"_295":-5,"_296":297},{"_103":104,"_95":96,"_105":257,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":258,"_131":259,"_134":260,"_146":22},["D",1739123427596],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[262,277],{"_103":150,"_95":99,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":158,"_105":159,"_100":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":263,"_98":276},[264,267,270,273],{"_103":169,"_95":170,"_151":171,"_153":152,"_154":137,"_155":172,"_157":158,"_105":173,"_100":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_166":265,"_98":266},[],[99,170],{"_103":180,"_95":181,"_151":182,"_153":152,"_154":137,"_155":183,"_157":158,"_105":184,"_100":185,"_161":175,"_163":186,"_164":22,"_165":-5,"_166":268,"_98":269},[],[99,181],{"_103":190,"_95":191,"_151":192,"_153":152,"_154":137,"_155":193,"_157":158,"_105":194,"_100":185,"_161":175,"_163":195,"_164":22,"_165":-5,"_166":271,"_98":272},[],[99,191],{"_103":199,"_95":200,"_151":201,"_153":152,"_154":137,"_155":202,"_157":158,"_105":203,"_100":204,"_161":175,"_163":205,"_164":22,"_165":-5,"_166":274,"_98":275},[],[99,200],[99],{"_103":210,"_95":211,"_151":212,"_153":-5,"_154":137,"_155":136,"_157":158,"_105":213,"_100":214,"_161":215,"_163":216,"_164":22,"_165":-5,"_166":278,"_98":279},[],[211],[262,264,267,270,273,277],{"_103":150,"_95":99,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":158,"_105":246,"_100":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":282},[99],[284,286,288,290],{"_103":169,"_95":170,"_151":171,"_153":152,"_154":137,"_155":172,"_157":158,"_105":233,"_100":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_98":285},[99,170],{"_103":180,"_95":181,"_151":182,"_153":152,"_154":137,"_155":183,"_157":158,"_105":236,"_100":185,"_161":175,"_163":186,"_164":22,"_165":-5,"_98":287},[99,181],{"_103":190,"_95":191,"_151":192,"_153":152,"_154":137,"_155":193,"_157":158,"_105":239,"_100":185,"_161":175,"_163":195,"_164":22,"_165":-5,"_98":289},[99,191],{"_103":199,"_95":200,"_151":201,"_153":152,"_154":137,"_155":202,"_157":158,"_105":242,"_100":204,"_161":175,"_163":205,"_164":22,"_165":-5,"_98":291},[99,200],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

prashamtrivedi

LlmDashboard