\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",[148,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],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":233,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":234},["D",1739168120269],[150],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":236,"_99":214,"_161":215,"_163":216,"_164":22,"_165":-5,"_98":237},["D",1739170295930],[211],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":247,"_230":252,"_257":-7,"_258":-5,"_259":-5,"_219":260,"_279":280,"_281":-5,"_282":-5},{"_102":103,"_95":96,"_104":248,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":249,"_130":250,"_133":251,"_145":22},["D",1739123427596],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[253,255],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":233,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":254},[150],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":236,"_99":214,"_161":215,"_163":216,"_164":22,"_165":-5,"_98":256},[211],"readme","upstream","pull",[261,263,266,269,272,276],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":159,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":262,"_98":275},[263,266,269,272],{"_102":169,"_95":170,"_151":171,"_153":152,"_154":136,"_155":172,"_157":158,"_104":173,"_99":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_166":264,"_98":265},[],[150,170],{"_102":180,"_95":181,"_151":182,"_153":152,"_154":136,"_155":183,"_157":158,"_104":184,"_99":185,"_161":175,"_163":186,"_164":22,"_165":-5,"_166":267,"_98":268},[],[150,181],{"_102":190,"_95":191,"_151":192,"_153":152,"_154":136,"_155":193,"_157":158,"_104":194,"_99":185,"_161":175,"_163":195,"_164":22,"_165":-5,"_166":270,"_98":271},[],[150,191],{"_102":199,"_95":200,"_151":201,"_153":152,"_154":136,"_155":202,"_157":158,"_104":203,"_99":204,"_161":175,"_163":205,"_164":22,"_165":-5,"_166":273,"_98":274},[],[150,200],[150],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":213,"_99":214,"_161":215,"_163":216,"_164":22,"_165":-5,"_166":277,"_98":278},[],[211],"previews",[276],"ahead","behind","actionData","errors"]

prashamtrivedi

LlmDashboard