\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`;","deleted","label",[99],"permalink","https://www.val.town/x/prashamtrivedi/LlmDashboard/code/model-management","extension","actionData","errors"]