AI Inference Cost Calculator — Compare Provider Pricing

:root{–bg:#0f1117;–surface:#1a1d27;–border:#2a2d3a;–accent:#6366f1;–accent-light:#818cf8;–text:#e2e8f0;–muted:#94a3b8;–green:#34d399;–yellow:#fbbf24;–red:#f87171}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,’Segoe UI‘,Roboto,sans-serif;background:var(–bg);color:var(–text);line-height:1.6;padding:2rem 1rem}
.container{max-width:900px;margin:0 auto}
h1{font-size:1.8rem;font-weight:800;margin-bottom:0.3rem;background:linear-gradient(135deg,var(–accent-light),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(–muted);margin-bottom:2rem;font-size:0.95rem}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;background:var(–surface);border:1px solid var(–border);border-radius:10px;padding:1.5rem}
@media(max-width:600px){.controls{grid-template-columns:1fr}}
label{display:block;font-size:0.85rem;font-weight:600;color:var(–muted);margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.05em}
input,select{width:100%;padding:0.7rem 1rem;background:var(–bg);border:1px solid var(–border);border-radius:6px;color:var(–text);font-size:1rem}
input:focus,select:focus{outline:none;border-color:var(–accent);box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
input[type=number]{-moz-appearance:textfield}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.result-card{background:var(–surface);border:1px solid var(–border);border-radius:10px;padding:1.2rem;text-align:center;transition:transform 0.2s}
.result-card:hover{transform:translateY(-2px);border-color:var(–accent)}
.result-card.best{border-color:var(–green);box-shadow:0 0 20px rgba(52,211,153,0.1)}
.provider-name{font-size:0.85rem;color:var(–muted);margin-bottom:0.3rem}
.model-name{font-size:0.75rem;color:var(–border);margin-bottom:0.8rem}
.cost{font-size:1.8rem;font-weight:800;color:var(–text)}
.cost.best-cost{color:var(–green)}
.cost-detail{font-size:0.8rem;color:var(–muted);margin-top:0.3rem}
.chart-container{background:var(–surface);border:1px solid var(–border);border-radius:10px;padding:1.5rem;margin-bottom:2rem}
.chart-row{display:flex;align-items:center;gap:1rem;margin:0.6rem 0}
.chart-label{width:160px;font-size:0.85rem;color:var(–muted);text-align:right;flex-shrink:0}
.chart-bar-wrap{flex:1;background:var(–bg);border-radius:4px;height:28px;position:relative;overflow:hidden}
.chart-bar{height:100%;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:0.6rem;font-size:0.8rem;font-weight:600;transition:width 0.5s ease}
.chart-bar.best-bar{background:linear-gradient(90deg,var(–green),#059669)}
.chart-bar.normal-bar{background:linear-gradient(90deg,var(–accent),#4f46e5)}
.chart-bar.expensive-bar{background:linear-gradient(90deg,var(–red),#dc2626)}
.summary{background:var(–surface);border:1px solid var(–border);border-left:4px solid var(–green);border-radius:0 8px 8px 0;padding:1rem 1.2rem;margin-top:1.5rem}
.summary-title{font-weight:700;color:var(–green);margin-bottom:0.3rem}

const providers = [
{ name: „OpenAI“, model: „GPT-4o“, inputPrice: 2.50, outputPrice: 10.00, color: „normal-bar“ },
{ name: „OpenAI“, model: „GPT-4o mini“, inputPrice: 0.15, outputPrice: 0.60, color: „normal-bar“ },
{ name: „OpenAI“, model: „o4-mini“, inputPrice: 1.10, outputPrice: 4.40, color: „normal-bar“ },
{ name: „Anthropic“, model: „Claude 3.5 Sonnet“, inputPrice: 3.00, outputPrice: 15.00, color: „normal-bar“ },
{ name: „Anthropic“, model: „Claude 3.5 Haiku“, inputPrice: 0.80, outputPrice: 4.00, color: „normal-bar“ },
{ name: „Google“, model: „Gemini 2.5 Pro“, inputPrice: 1.25, outputPrice: 10.00, color: „normal-bar“ },
{ name: „Google“, model: „Gemini 2.5 Flash“, inputPrice: 0.15, outputPrice: 0.60, color: „normal-bar“ },
{ name: „DeepSeek“, model: „DeepSeek-V3“, inputPrice: 0.27, outputPrice: 1.10, color: „normal-bar“ },
{ name: „DeepSeek“, model: „DeepSeek-R1“, inputPrice: 0.55, outputPrice: 2.19, color: „normal-bar“ },
{ name: „Meta (self-host)“, model: „Llama 3.1 405B (4xH100)“, inputPrice: 0.12, outputPrice: 0.35, color: „normal-bar“ },
{ name: „Mistral“, model: „Mistral Large 2“, inputPrice: 2.00, outputPrice: 6.00, color: „normal-bar“ },
{ name: „Groq“, model: „Llama 3.1 70B“, inputPrice: 0.59, outputPrice: 0.79, color: „normal-bar“ },
];

function calculate() {
const inputK = parseFloat(document.getElementById(‚inputTokens‘).value) || 0;
const outputK = parseFloat(document.getElementById(‚outputTokens‘).value) || 0;
const reqM = parseFloat(document.getElementById(‚requests‘).value) || 0;

const results = providers.map(p => {
const costPerK = (inputK * p.inputPrice + outputK * p.outputPrice);
const monthlyCost = costPerK * reqM * 1000;
return { …p, costPerK, monthlyCost };
});

results.sort((a, b) => a.costPerK – b.costPerK);
const best = results[0].costPerK;
const worst = results[results.length – 1].costPerK;

// Result cards (top 6)
const top6 = results.slice(0, 6);
document.getElementById(‚results‘).innerHTML = top6.map((p, i) => `

`).join(“);

// Bar chart (all)
document.getElementById(‚chart‘).innerHTML = results.map((p, i) => {
const pct = worst > 0 ? (p.costPerK / worst) * 100 : 0;
const barClass = i === 0 ? ‚best-bar‘ : (p.costPerK > worst * 0.7 ? ‚expensive-bar‘ : ’normal-bar‘);
return `

`;
}).join(“);

// Summary
const savings = results[results.length – 1].monthlyCost – results[0].monthlyCost;
const savingsPct = results[results.length – 1].monthlyCost > 0
? ((savings / results[results.length – 1].monthlyCost) * 100).toFixed(0) : 0;
document.getElementById(’summary‘).innerHTML = `

Choosing ${results[0].name} ${results[0].model} over ${results[results.length-1].name} ${results[results.length-1].model}
saves $${savings >= 1000 ? (savings/1000).toFixed(1)+’K‘ : savings.toFixed(0)}/mo (${savingsPct}% reduction)
at ${reqM}M requests/month with ${input}K input + ${output}K output tokens per request.

`;
}

calculate();