Anthropic Model Comparison Tool

\n setApiKey(e.target.value)}\n placeholder=\"Enter your Anthropic API key\"\n required\n />\n setPrompt(e.target.value)}\n placeholder=\"Enter your prompt here\"\n rows={4}\n />\n \n \n

\n {models.map(({ slug, name }) => {\n const state = modelStates[slug];\n return (\n

{name}

{slug}

Time: {state.time.toFixed(2)} seconds

\n {state.isComplete && (\n <>\n

\n Speed: {state.tokenSpeed.toFixed(2)} tokens/sec\n

\n {models\n .filter(m => m.slug !== slug)\n .map(m => (\n

\n \n {calculateSpeedComparison(state.tokenSpeed, modelStates[m.slug].tokenSpeed)} {m.name}\n \n

\n ))}\n

\n \n )}\n

{state.output}

\n );\n })}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n if (req.method === \"POST\" && new URL(req.url).pathname === \"/generate\") {\n const { Anthropic } = await import(\"https://esm.sh/@anthropic-ai/sdk@0.18.0\");\n const { prompt, model, apiKey } = await req.json();\n const anthropic = new Anthropic({ apiKey });\n\n const encoder = new TextEncoder();\n const stream = new TransformStream();\n const writer = stream.writable.getWriter();\n\n const anthropicStream = await anthropic.messages.create({\n model,\n max_tokens: 1000,\n messages: [{ role: \"user\", content: prompt }],\n stream: true,\n });\n\n (async () => {\n for await (const chunk of anthropicStream) {\n if (chunk.type === \"content_block_delta\") {\n writer.write(encoder.encode(`data: ${\n JSON.stringify({\n type: \"content\",\n content: chunk.delta.text,\n })\n }\\n\\n`));\n }\n }\n writer.close();\n })();\n\n return new Response(stream.readable, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n Anthropic Model Comparison Tool\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 font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 1300px;\n margin: 0 auto;\n padding: 20px;\n }\n .container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n h1 {\n text-align: center;\n }\n form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n input[type=\"password\"] {\n width: 100%;\n padding: 10px;\n }\n textarea {\n width: 100%;\n padding: 10px;\n }\n button {\n padding: 10px;\n background-color: #007bff;\n color: white;\n border: none;\n cursor: pointer;\n }\n button:hover {\n background-color: #0056b3;\n }\n .model-outputs {\n display: flex;\n gap: 20px;\n overflow-x: auto;\n }\n .model-column {\n flex: 1;\n min-width: 250px;\n border: 1px solid #ddd;\n padding: 10px;\n border-radius: 5px;\n }\n .model-slug {\n font-size: 0.8em;\n color: #666;\n margin-top: -10px;\n }\n pre {\n white-space: pre-wrap;\n word-break: break-word;\n margin-top: 10px;\n }\n footer {\n text-align: center;\n margin-top: 20px;\n }\n .speed-comparisons {\n font-size: 0.9em;\n margin-top: 5px;\n margin-bottom: 10px;\n }\n .speed-comparison {\n margin: 0;\n line-height: 1.4;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/claude_speed_test/code/main.tsx","extension","actionData","errors"]