\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`;",[],[207],"files",[145,165,176,185,194,205],"counts",{"_219":33,"_220":157,"_221":33,"_222":33},"pulls","branches","forks","envVars","contents",[],"file",{"_107":186,"_99":187,"_148":188,"_150":149,"_151":137,"_152":189,"_154":155,"_109":227,"_104":94,"_158":172,"_160":191,"_161":27,"_162":-5,"_102":228},["D",1739168338110],[147,187],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":234,"_143":238,"_215":257,"_225":258,"_223":260,"_229":-5,"_261":27,"_262":-5},{"_107":108,"_99":100,"_109":235,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":33,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":236,"_134":237},["D",1739123427596],{"_97":98,"_132":133},{"_104":136,"_99":43,"_107":137,"_138":108,"_139":-5,"_140":-5,"_141":-5,"_142":-5},[239,254],{"_107":146,"_99":147,"_148":149,"_150":-5,"_151":137,"_152":153,"_154":155,"_109":156,"_104":157,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":240,"_102":253},[241,244,247,250],{"_107":166,"_99":167,"_148":168,"_150":149,"_151":137,"_152":169,"_154":155,"_109":170,"_104":171,"_158":172,"_160":173,"_161":27,"_162":-5,"_163":242,"_102":243},[],[147,167],{"_107":177,"_99":178,"_148":179,"_150":149,"_151":137,"_152":180,"_154":155,"_109":181,"_104":94,"_158":172,"_160":182,"_161":27,"_162":-5,"_163":245,"_102":246},[],[147,178],{"_107":186,"_99":187,"_148":188,"_150":149,"_151":137,"_152":189,"_154":155,"_109":190,"_104":94,"_158":172,"_160":191,"_161":27,"_162":-5,"_163":248,"_102":249},[],[147,187],{"_107":195,"_99":196,"_148":197,"_150":149,"_151":137,"_152":198,"_154":155,"_109":199,"_104":200,"_158":172,"_160":201,"_161":27,"_162":-5,"_163":251,"_102":252},[],[147,196],[147],{"_107":206,"_99":207,"_148":208,"_150":-5,"_151":137,"_152":136,"_154":155,"_109":209,"_104":210,"_158":211,"_160":212,"_161":27,"_162":-5,"_163":255,"_102":256},[],[207],[239,241,244,247,250,254],{"_107":186,"_99":187,"_148":188,"_150":149,"_151":137,"_152":189,"_154":155,"_109":227,"_104":94,"_158":172,"_160":191,"_161":27,"_162":-5,"_102":259},[147,187],[],"showCompareCallout","pull","routes/_app","actionData","errors"]