[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b72b9a9eb081918c00f3e3afaa246f","versionInt","title","Cost Vs Score Scatter (dark)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// Dark-mode, canvas-rendered scatter plot: X = Percent correct (score), Y = Cost ($)\n// Adds: distance to the perfect vector (100, 0) using Euclidean distance and a ranked table.\n// Low cost + high score is ideal (bottom-right). OpenAI is purple.\n\nconst RAW = [\n { model: \"openai/gpt-5\", score: 88.0, cost: 29.08, company: \"OpenAI\" },\n { model: \"gpt-5 (high)\", score: 86.7, cost: 17.69, company: \"OpenAI\" },\n { model: \"o3-pro (high)\", score: 84.9, cost: 146.32, company: \"OpenAI\" },\n { model: \"gemini-2.5-pro-preview-06-05 (32k think)\", score: 83.1, cost: 49.88, company: \"Google\" },\n { model: \"gpt-5 (low)\", score: 81.3, cost: 10.37, company: \"OpenAI\" },\n { model: \"o3 (high)\", score: 81.3, cost: 21.23, company: \"OpenAI\" },\n { model: \"grok-4 (high)\", score: 79.6, cost: 59.62, company: \"xAI\" },\n { model: \"gemini-2.5-pro-preview-06-05 (default think)\", score: 79.1, cost: 45.6, company: \"Google\" },\n { model: \"o3 (high) + gpt-4.1\", score: 78.2, cost: 17.55, company: \"Hybrid\" },\n { model: \"o3\", score: 76.9, cost: 13.75, company: \"OpenAI\" },\n { model: \"Gemini 2.5 Pro Preview 05-06\", score: 76.9, cost: 37.41, company: \"Google\" },\n // 72.9% (missing cost) skipped\n { model: \"claude-opus-4-20250514 (32k thinking)\", score: 72.0, cost: 65.75, company: \"Anthropic\" },\n { model: \"o4-mini (high)\", score: 72.0, cost: 19.64, company: \"OpenAI\" },\n { model: \"DeepSeek R1 (0528)\", score: 71.4, cost: 4.8, company: \"DeepSeek\" },\n { model: \"claude-opus-4-20250514 (no think)\", score: 70.7, cost: 68.63, company: \"Anthropic\" },\n { model: \"claude-3-7-sonnet-20250219 (32k thinking tokens)\", score: 64.9, cost: 36.83, company: \"Anthropic\" },\n { model: \"DeepSeek R1 + claude-3-5-sonnet-20241022\", score: 64.0, cost: 13.29, company: \"Hybrid\" },\n { model: \"o1-2024-12-17 (high)\", score: 61.7, cost: 186.5, company: \"OpenAI\" },\n { model: \"claude-sonnet-4-20250514 (32k thinking)\", score: 61.3, cost: 26.58, company: \"Anthropic\" },\n { model: \"claude-3-7-sonnet-20250219 (no thinking)\", score: 60.4, cost: 17.72, company: \"Anthropic\" },\n { model: \"o3-mini (high)\", score: 60.4, cost: 18.16, company: \"OpenAI\" },\n // Qwen3 235B A22B missing cost\n { model: \"Kimi K2\", score: 59.1, cost: 1.24, company: \"Moonshot\" },\n { model: \"DeepSeek R1\", score: 56.9, cost: 5.42, company: \"DeepSeek\" },\n { model: \"claude-sonnet-4-20250514 (no thinking)\", score: 56.4, cost: 15.82, company: \"Anthropic\" },\n { model: \"gemini-2.5-flash-preview-05-20 (24k think)\", score: 55.1, cost: 8.56, company: \"Google\" },\n { model: \"DeepSeek V3 (0324)\", score: 55.1, cost: 1.12, company: \"DeepSeek\" },\n // Quasar Alpha missing cost\n { model: \"o3-mini (medium)\", score: 53.8, cost: 8.86, company: \"OpenAI\" },\n { model: \"Grok 3 Beta\", score: 53.3, cost: 11.03, company: \"xAI\" },\n // Optimus Alpha missing cost\n { model: \"gpt-4.1\", score: 52.4, cost: 9.86, company: \"OpenAI\" },\n { model: \"claude-3-5-sonnet-20241022\", score: 51.6, cost: 14.41, company: \"Anthropic\" },\n { model: \"Grok 3 Mini Beta (high)\", score: 49.3, cost: 0.73, company: \"xAI\" },\n { model: \"DeepSeek Chat V3 (prev)\", score: 48.4, cost: 0.34, company: \"DeepSeek\" },\n { model: \"gemini-2.5-flash-preview-04-17 (default)\", score: 47.1, cost: 1.85, company: \"Google\" },\n { model: \"chatgpt-4o-latest (2025-03-29)\", score: 45.3, cost: 19.74, company: \"OpenAI\" },\n { model: \"gpt-4.5-preview\", score: 44.9, cost: 183.18, company: \"OpenAI\" },\n { model: \"gemini-2.5-flash-preview-05-20 (no think)\", score: 44.0, cost: 1.14, company: \"Google\" },\n { model: \"gpt-oss-120b (high)\", score: 41.8, cost: 0.74, company: \"OpenRouter\" },\n { model: \"Qwen3 32B\", score: 40.0, cost: 0.76, company: \"Alibaba\" },\n // gemini-exp-1206 missing cost\n // Gemini 2.0 Pro exp-02-05 missing cost\n { model: \"Grok 3 Mini Beta (low)\", score: 34.7, cost: 0.79, company: \"xAI\" },\n { model: \"o1-mini-2024-09-12\", score: 32.9, cost: 18.58, company: \"OpenAI\" },\n { model: \"gpt-4.1-mini\", score: 32.4, cost: 1.99, company: \"OpenAI\" },\n { model: \"claude-3-5-haiku-20241022\", score: 28.0, cost: 6.06, company: \"Anthropic\" },\n { model: \"chatgpt-4o-latest (2025-02-15)\", score: 27.1, cost: 14.37, company: \"OpenAI\" },\n // QwQ-32B + Qwen 2.5 Coder Instruct missing cost\n { model: \"gpt-4o-2024-08-06\", score: 23.1, cost: 7.03, company: \"OpenAI\" },\n // gemini-2.0-flash-exp missing cost\n // qwen-max-2025-01-25 missing cost\n // QwQ-32B missing cost\n // gemini-2.0-flash-thinking-exp-01-21 missing cost\n { model: \"gpt-4o-2024-11-20\", score: 18.2, cost: 6.74, company: \"OpenAI\" },\n { model: \"DeepSeek Chat V2.5\", score: 17.8, cost: 0.51, company: \"DeepSeek\" },\n // Qwen2.5-Coder-32B-Instruct missing cost\n // Llama 4 Maverick missing cost\n // yi-lightning missing cost\n // command-a-03-2025-quality missing cost\n { model: \"Codestral 25.01\", score: 11.1, cost: 1.98, company: \"Mistral\" },\n { model: \"gpt-4.1-nano\", score: 8.9, cost: 0.43, company: \"OpenAI\" },\n // Qwen2.5-Coder-32B-Instruct (dup) missing cost\n // gemma-3-27b-it missing cost\n { model: \"gpt-4o-mini-2024-07-18\", score: 3.6, cost: 0.32, company: \"OpenAI\" },\n];\n\nconst COMPANY_COLORS: Record = {\n OpenAI: \"#a855f7\", // purple\n Google: \"#22d3ee\", // cyan\n Anthropic: \"#f59e0b\", // amber\n xAI: \"#f472b6\", // pink\n DeepSeek: \"#34d399\", // emerald\n Alibaba: \"#f87171\", // red\n Moonshot: \"#06b6d4\", // cyan-500 (distinct from Google hue)\n OpenRouter: \"#eab308\", // yellow\n Meta: \"#0ea5e9\", // sky\n Cohere: \"#84cc16\", // lime\n Mistral: \"#fb7185\", // rose\n OpenHands: \"#a3a3a3\", // neutral\n Hybrid: \"#94a3b8\", // slate\n Other: \"#9ca3af\",\n};\n\nfunction niceStep(range: number, targetTicks = 6) {\n const rough = range / targetTicks;\n const pow10 = Math.pow(10, Math.floor(Math.log10(rough)));\n const unit = rough / pow10;\n let stepUnit: number;\n if (unit < 1.5) stepUnit = 1;\n else if (unit < 3) stepUnit = 2;\n else if (unit < 7) stepUnit = 5;\n else stepUnit = 10;\n return stepUnit * pow10;\n}\n\nfunction useResizeObserver(ref: React.RefObject) {\n const [size, setSize] = useState<{ width: number; height: number }>({ width: 960, height: 600 });\n useEffect(() => {\n if (!ref.current) return;\n const ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const cr = entry.contentRect;\n setSize({ width: cr.width, height: cr.height });\n }\n });\n ro.observe(ref.current);\n return () => ro.disconnect();\n }, [ref]);\n return size;\n}\n\nconst PERFECT = { x: 100, y: 0 };\n\nexport default function CostVsScoreScatter() {\n const wrapRef = useRef(null);\n const canvasRef = useRef(null);\n const { width, height } = useResizeObserver(wrapRef);\n\n // Add distance & efficiency\n const data = useMemo(\n () =>\n RAW.filter((d) => Number.isFinite(d.cost) && Number.isFinite(d.score)).map((d) => {\n const performance = d.score; // x\n const cost = d.cost; // y\n const distance = Math.hypot(PERFECT.x - performance, PERFECT.y - cost);\n const efficiency = cost > 0 ? performance / cost : Infinity; // score per $ (higher is better)\n return { ...d, performance, cost, distance, efficiency };\n }),\n []\n );\n\n const ranked = useMemo(() => {\n const r = [...data].sort((a, b) => a.distance - b.distance);\n return r.map((d, i) => ({ rank: i + 1, ...d }));\n }, [data]);\n\n const margin = { top: 28, right: 20, bottom: 44, left: 56 };\n const dpr = typeof window !== \"undefined\" ? Math.min(window.devicePixelRatio || 1, 2) : 1;\n\n const xDomain = { min: 0, max: 100 };\n const yMaxRaw = Math.max(...data.map((d) => d.cost));\n const yDomain = { min: 0, max: Math.ceil(yMaxRaw / 10) * 10 };\n\n const plotW = Math.max(200, Math.floor((width * 2) / 3) - margin.left - margin.right);\n const plotH = Math.max(220, height - margin.top - margin.bottom);\n\n type Pt = { x: number; y: number; r: number; d: (typeof ranked)[0] };\n const pointsRef = useRef([]);\n const [hover, setHover] = useState(null);\n\n // Drawing\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n canvas.width = Math.max(1, Math.floor(width * dpr));\n canvas.height = Math.max(1, Math.floor(height * dpr));\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n ctx.scale(dpr, dpr);\n\n const toX = (val: number) => margin.left + ((val - xDomain.min) / (xDomain.max - xDomain.min)) * plotW;\n const toY = (val: number) => margin.top + plotH - ((val - yDomain.min) / (yDomain.max - yDomain.min)) * plotH;\n\n // Background\n ctx.fillStyle = \"#0b1220\";\n ctx.fillRect(0, 0, width, height);\n\n // Plot area gradient (bad→good)\n const grad = ctx.createLinearGradient(margin.left, margin.top, margin.left + plotW, margin.top + plotH);\n grad.addColorStop(0, \"rgba(239,68,68,0.10)\");\n grad.addColorStop(0.5, \"rgba(0,0,0,0.0)\");\n grad.addColorStop(1, \"rgba(34,197,94,0.14)\");\n ctx.fillStyle = grad;\n ctx.fillRect(margin.left, margin.top, plotW, plotH);\n\n // Axes & grid\n ctx.save();\n ctx.lineWidth = 1;\n\n // X grid & ticks (score %)\n const xStep = niceStep(xDomain.max - xDomain.min, 10);\n for (let x = xDomain.min; x <= xDomain.max + 1e-6; x += xStep) {\n const px = toX(x);\n ctx.beginPath();\n ctx.moveTo(px, margin.top);\n ctx.lineTo(px, margin.top + plotH);\n ctx.strokeStyle = x % (xStep * 2) === 0 ? \"#374151\" : \"#1f2937\";\n ctx.stroke();\n ctx.fillStyle = \"#94a3b8\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"top\";\n ctx.font = \"12px ui-sans-serif, system-ui\";\n ctx.fillText(`${x}%`, px, margin.top + plotH + 8);\n }\n\n // Y grid & ticks (cost $)\n const yStep = niceStep(yDomain.max - yDomain.min, 6);\n for (let y = yDomain.min; y <= yDomain.max + 1e-6; y += yStep) {\n const py = toY(y);\n ctx.beginPath();\n ctx.moveTo(margin.left, py);\n ctx.lineTo(margin.left + plotW, py);\n ctx.strokeStyle = y % (yStep * 2) === 0 ? \"#374151\" : \"#1f2937\";\n ctx.stroke();\n ctx.fillStyle = \"#94a3b8\";\n ctx.textAlign = \"right\";\n ctx.textBaseline = \"middle\";\n ctx.font = \"12px ui-sans-serif, system-ui\";\n ctx.fillText(`$${y}`, margin.left - 8, py);\n }\n\n // Axis labels\n ctx.fillStyle = \"#e5e7eb\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"alphabetic\";\n ctx.font = \"600 13px ui-sans-serif, system-ui\";\n ctx.fillText(\"Score (percent correct)\", margin.left + plotW / 2, margin.top + plotH + 32);\n\n ctx.save();\n ctx.translate(16, margin.top + plotH / 2);\n ctx.rotate(-Math.PI / 2);\n ctx.fillText(\"Cost ($)\", 0, 0);\n ctx.restore();\n\n // Perfect marker at (100, 0)\n const pxPerfect = toX(PERFECT.x);\n const pyPerfect = toY(PERFECT.y);\n ctx.save();\n ctx.beginPath();\n ctx.strokeStyle = \"#22c55e\";\n ctx.setLineDash([4, 4]);\n ctx.moveTo(pxPerfect, margin.top);\n ctx.lineTo(pxPerfect, margin.top + plotH);\n ctx.moveTo(margin.left, pyPerfect);\n ctx.lineTo(margin.left + plotW, pyPerfect);\n ctx.stroke();\n ctx.setLineDash([]);\n\n // small star\n ctx.beginPath();\n ctx.arc(pxPerfect, pyPerfect, 4, 0, Math.PI * 2);\n ctx.fillStyle = \"#22c55e\";\n ctx.fill();\n ctx.font = \"600 12px ui-sans-serif, system-ui\";\n ctx.fillStyle = \"#86efac\";\n ctx.textAlign = \"right\";\n ctx.textBaseline = \"bottom\";\n ctx.fillText(\"perfect (100%, $0)\", pxPerfect - 6, pyPerfect - 6);\n ctx.restore();\n\n // Title & subtitle\n ctx.fillStyle = \"#e5e7eb\";\n ctx.textAlign = \"left\";\n ctx.textBaseline = \"alphabetic\";\n ctx.font = \"700 16px ui-sans-serif, system-ui\";\n ctx.fillText(\"Model Score vs Cost\", margin.left, 22);\n ctx.font = \"400 12px ui-sans-serif, system-ui\";\n ctx.fillStyle = \"#9ca3af\";\n ctx.fillText(\"Distance computed to (100, $0) using Euclidean metric\", margin.left, 38);\n\n // Points\n const r = 5;\n const points: Pt[] = [];\n for (const d of ranked) {\n const px = toX(d.performance);\n const py = toY(d.cost);\n const color = COMPANY_COLORS[d.company] || COMPANY_COLORS.Other;\n\n // dot + shadow\n ctx.save();\n ctx.shadowColor = color + \"40\";\n ctx.shadowBlur = 10;\n ctx.beginPath();\n ctx.arc(px, py, r, 0, Math.PI * 2);\n ctx.fillStyle = color;\n ctx.fill();\n ctx.restore();\n\n // subtle stroke\n ctx.beginPath();\n ctx.arc(px, py, r, 0, Math.PI * 2);\n ctx.strokeStyle = \"#0b1220\";\n ctx.lineWidth = 1;\n ctx.stroke();\n\n points.push({ x: px, y: py, r, d });\n }\n\n // Hover accent + line to perfect\n if (hover) {\n const { x, y, r: rr, d } = hover;\n ctx.beginPath();\n ctx.arc(x, y, rr + 4, 0, Math.PI * 2);\n ctx.strokeStyle = (COMPANY_COLORS[d.company] || COMPANY_COLORS.Other);\n ctx.lineWidth = 2;\n ctx.stroke();\n\n // line to perfect\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.lineTo(pxPerfect, pyPerfect);\n ctx.strokeStyle = \"#64748b\";\n ctx.setLineDash([3, 4]);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n pointsRef.current = points;\n }, [width, height, dpr, ranked, margin.bottom, margin.left, margin.right, margin.top, xDomain.max, xDomain.min, yDomain.max, yDomain.min, hover]);\n\n // Mouse interactivity\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const onMove = (evt: MouseEvent) => {\n const rect = canvas.getBoundingClientRect();\n const mx = evt.clientX - rect.left;\n const my = evt.clientY - rect.top;\n const pts = pointsRef.current;\n let nearest: Pt | null = null;\n let minDist = Infinity;\n for (const p of pts) {\n const dx = p.x - mx;\n const dy = p.y - my;\n const dist = Math.hypot(dx, dy);\n if (dist < Math.max(12, p.r + 6) && dist < minDist) {\n nearest = p;\n minDist = dist;\n }\n }\n setHover(nearest);\n };\n const onLeave = () => setHover(null);\n\n canvas.addEventListener(\"mousemove\", onMove);\n canvas.addEventListener(\"mouseleave\", onLeave);\n return () => {\n canvas.removeEventListener(\"mousemove\", onMove);\n canvas.removeEventListener(\"mouseleave\", onLeave);\n };\n }, []);\n\n const companies = useMemo(() => {\n const set = new Set();\n for (const d of data) set.add(d.company);\n return Array.from(set).sort((a, b) => (a === \"OpenAI\" ? -1 : b === \"OpenAI\" ? 1 : a.localeCompare(b)));\n }, [data]);\n\n const fmt2 = (n: number) => n.toFixed(2);\n\n return (\n

\n Hover a dot for details. OpenAI is purple.\n Distance = √((100 − score)^2 + (cost)^2). Missing-cost rows are omitted.\n

\n\n {/* Legend */}\n

\n {companies.map((c) => (\n

\n \n {c}\n

\n ))}\n

\n\n {/* Layout: plot + ranked table */}\n

\n {/* Canvas / Plot */}\n

\n )}\n

\n\n {/* Ranked table */}\n

Rank by Distance to Perfect

\n \n \n \n \n \n \n \n \n \n \n \n {ranked.map((d) => (\n \n \n \n \n \n \n \n ))}\n \n

#	Model	Score%	$	Dist
{d.rank}	\n \n \n {d.model}\n \n	{d.performance.toFixed(1)}	{d.cost.toFixed(2)}	{fmt2(d.distance)}

\n Distance metric: √((100 − performance)^2 + (cost)^2). Higher performance and lower cost reduce the distance.\n

\n\n {/* Footer */}\n

\n Bottom-right shaded green indicates the ideal region (high score, low cost). Top-left is softly red.\n Efficiency (score per $) shown in tooltip for quick cost-effectiveness read.\n

\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","16409750084547384646","traceTime",1781587544958]