|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Output/Input Price Multiple Analysis - LLM Pricing</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>🔢 Output/Input Price Multiple Analysis</h1> |
|
|
<p class="subtitle">Understanding the Cost Differential Between Input and Output Tokens</p> |
|
|
<nav class="header-nav"> |
|
|
<a href="index.html">← Back to Main Dashboard</a> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main class="container"> |
|
|
<section class="methodology"> |
|
|
<h2>Understanding the Output/Input Multiple</h2> |
|
|
<div class="info-box"> |
|
|
<h3>What is the Output/Input Multiple?</h3> |
|
|
<p>The output/input multiple shows how much more expensive <strong>output tokens</strong> (generation) are compared to <strong>input tokens</strong> (prompt processing). For example, a 4x multiple means that generating tokens costs 4 times more than reading them.</p> |
|
|
|
|
|
<p><strong>Median Multiple: <span id="median-multiple-stat">4.00x</span></strong></p> |
|
|
|
|
|
<h4>Why Does This Matter?</h4> |
|
|
<ul> |
|
|
<li><strong>Generation-Heavy Workloads:</strong> If your application generates long outputs (content creation, code generation, long-form answers), lower multiples save you money</li> |
|
|
<li><strong>Analysis-Heavy Workloads:</strong> If you send large prompts but get short answers (document analysis, classification), the multiple matters less</li> |
|
|
<li><strong>Batch Processing:</strong> For agentic workflows with multiple round-trips, output from one call becomes input for the next - multiples compound</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="warning-box"> |
|
|
<h3>⚠️ Important Caveats</h3> |
|
|
<p><strong>These ratios likely understate the actual cost differential</strong> because they don't account for:</p> |
|
|
<ul> |
|
|
<li><strong>Prompt Caching:</strong> Many providers (Anthropic, OpenAI, Google) offer prompt caching that significantly reduces input token costs for repeated prefixes. When caching is active, the effective cost of input tokens can drop to 10% or even 1% of the listed rate, making the output/input multiple dramatically higher in practice.</li> |
|
|
<li><strong>Bulk Pricing:</strong> Some providers offer volume discounts on input tokens or special pricing for batch API calls, which aren't reflected in the base per-token rates shown here.</li> |
|
|
<li><strong>Free Tiers:</strong> Certain context amounts may be free or discounted (e.g., first N tokens free), affecting the real-world cost structure.</li> |
|
|
</ul> |
|
|
<p class="emphasis">In real-world scenarios with prompt caching and bulk discounts, output tokens often cost 10x-100x more than input tokens, not just the 2-5x shown in base pricing.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="stats-grid"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number" id="total-models">198</div> |
|
|
<div class="stat-label">Models Analyzed</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number" id="median-multiple">4.00x</div> |
|
|
<div class="stat-label">Median Multiple</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number" id="equal-pricing-count">-</div> |
|
|
<div class="stat-label">Equal Pricing (1x)</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number" id="high-multiple-count">-</div> |
|
|
<div class="stat-label">High Multiple (5x+)</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="chart-section"> |
|
|
<h2>Output/Input Multiple vs Average Cost</h2> |
|
|
<p>This quadrant chart shows how the output/input pricing structure relates to overall model cost. Models are divided by the median multiple (<strong><span id="median-line-value">4.00x</span></strong>) and median average cost.</p> |
|
|
<div class="chart-container"> |
|
|
<canvas id="multipleQuadrantChart"></canvas> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="chart-section"> |
|
|
<h2>Distribution of Output/Input Multiples</h2> |
|
|
<p>How common are different pricing structures across all models?</p> |
|
|
<div class="chart-container"> |
|
|
<canvas id="multipleDistribution"></canvas> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="data-section"> |
|
|
<h2>All Models by Output/Input Multiple</h2> |
|
|
<div class="table-controls"> |
|
|
<input type="text" id="search" placeholder="Search models or vendors..." /> |
|
|
<select id="multiple-filter"> |
|
|
<option value="">All Multiples</option> |
|
|
<option value="equal">Equal Pricing (≤1x)</option> |
|
|
<option value="low">Low Multiple (<2x)</option> |
|
|
<option value="medium">Medium Multiple (2-5x)</option> |
|
|
<option value="high">High Multiple (5-10x)</option> |
|
|
<option value="very-high">Very High (10x+)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="table-wrapper"> |
|
|
<table id="models-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="sortable" data-sort="model_name">Model Name <span class="sort-indicator"></span></th> |
|
|
<th class="sortable" data-sort="displayVendor">Vendor <span class="sort-indicator"></span></th> |
|
|
<th class="sortable" data-sort="input_price_usd_per_m">Input ($/M) <span class="sort-indicator"></span></th> |
|
|
<th class="sortable" data-sort="output_price_usd_per_m">Output ($/M) <span class="sort-indicator"></span></th> |
|
|
<th class="sortable" data-sort="output_input_multiple">Out/In Multiple <span class="sort-indicator"></span></th> |
|
|
<th class="sortable" data-sort="avg_cost">Avg Cost ($/M) <span class="sort-indicator"></span></th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="table-body"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<p>Data source: <a href="https://openrouter.ai/" target="_blank">OpenRouter API</a> | <a href="index.html">Main Dashboard</a></p> |
|
|
<p class="disclaimer">Prices are subject to change. Actual costs may vary significantly with prompt caching and volume discounts.</p> |
|
|
</footer> |
|
|
|
|
|
<script src="output-input-analysis.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
