/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const models = [ { slug: "claude-3-5-sonnet-20241022", name: "Claude 3.5 Sonnet New" }, { slug: "claude-3-5-haiku-20241022", name: "Claude 3.5 Haiku" }, { slug: "claude-3-haiku-20240307", name: "Claude 3 Haiku" }, { slug: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet Old" }, ]; interface ModelState { output: string; time: number; tokenSpeed: number; isComplete: boolean; } function App() { const [prompt, setPrompt] = useState("Pros and cons for tabs vs spaces"); const [apiKey, setApiKey] = useState(""); const [modelStates, setModelStates] = useState>( Object.fromEntries(models.map(({ slug }) => [slug, { output: "", time: 0, tokenSpeed: 0, isComplete: false }])), ); const calculateSpeedComparison = (currentSpeed: number, compareSpeed: number) => { const difference = ((currentSpeed - compareSpeed) / compareSpeed) * 100; return difference > 0 ? `${difference.toFixed(0)}% faster than` : `${Math.abs(difference).toFixed(0)}% slower than`; }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setModelStates( Object.fromEntries(models.map(({ slug }) => [slug, { output: "", time: 0, tokenSpeed: 0, isComplete: false }])), ); models.forEach(async ({ slug }) => { const startTime = Date.now(); let totalTokens = 0; const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, model: slug, apiKey }), }); const reader = response.body!.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); const lines = chunk.split("\n"); lines.forEach(line => { if (line.startsWith("data: ")) { const data = JSON.parse(line.slice(5)); if (data.type === "content") { setModelStates(prev => ({ ...prev, [slug]: { ...prev[slug], output: prev[slug].output + data.content, time: (Date.now() - startTime) / 1000, }, })); totalTokens += data.content.split(/\s+/).length; } } }); } const endTime = Date.now(); const duration = (endTime - startTime) / 1000; const tokenSpeed = totalTokens / duration; setModelStates(prev => ({ ...prev, [slug]: { ...prev[slug], time: duration, tokenSpeed, isComplete: true, }, })); }); }; return (

Anthropic Model Comparison Tool

setApiKey(e.target.value)} placeholder="Enter your Anthropic API key" required />

setPrompt(e.target.value)}
          placeholder="Enter your prompt here"
          rows={4}
        />
        <button type="submit">Compare Models</button>
      </form>
      <div className="model-outputs">
        {models.map(({ slug, name }) => {
          const state = modelStates[slug];
          return (
            <div key={slug} className="model-column">
              <h2>{name}</h2>
              <p className="model-slug">{slug}</p>
              <p>Time: {state.time.toFixed(2)} seconds</p>
              {state.isComplete && (
                <>
                  <p>
                    Speed: <strong>{state.tokenSpeed.toFixed(2)}</strong> tokens/sec
                  </p>
                  <div className="speed-comparisons">
                    {models
                      .filter(m => m.slug !== slug)
                      .map(m => (
                        <p key={m.slug} className="speed-comparison">
                          <strong>
                            {calculateSpeedComparison(state.tokenSpeed, modelStates[m.slug].tokenSpeed)} {m.name}
                          </strong>
                        </p>
                      ))}
                  </div>
                </>
              )}
              <pre>{state.output}</pre>
            </div>
          );
        })}
      </div>
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")}>View Source</a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")!).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(req: Request): Promise<Response> {
  if (req.method === "POST" && new URL(req.url).pathname === "/generate") {
    const { Anthropic } = await import("https://esm.sh/@anthropic-ai/sdk@0.18.0");
    const { prompt, model, apiKey } = await req.json();
    const anthropic = new Anthropic({ apiKey });

const encoder = new TextEncoder();
    const stream = new TransformStream();
    const writer = stream.writable.getWriter();

const anthropicStream = await anthropic.messages.create({
      model,
      max_tokens: 1000,
      messages: [{ role: "user", content: prompt }],
      stream: true,
    });

(async () => {
      for await (const chunk of anthropicStream) {
        if (chunk.type === "content_block_delta") {
          writer.write(encoder.encode(`data: ${
            JSON.stringify({
              type: "content",
              content: chunk.delta.text,
            })
          }\n\n`));
        }
      }
      writer.close();
    })();

return new Response(stream.readable, {
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        "Connection": "keep-alive",
      },
    });
  }

return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Anthropic Model Comparison Tool</title>
      <style>${css}</style>
    </head>
    <body>
      <div id="root"></div>
      <script src="https://esm.town/v/std/catch"></script>
      <script type="module" src="${import.meta.url}"></script>
    </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}

claude_speed_test

Version 8