Add output/input price multiple analysis

- Calculate output/input price multiple for all models (median: 4.00x)
- Add Out/In Multiple column to main data table with color coding
- Update statistics to show median input ($0.40/M) and output ($1.60/M) prices
- Create dedicated output/input-analysis.html page with:
* Comprehensive explanation of what the metric means
* Important caveats about prompt caching and bulk pricing
* Quadrant chart: multiple vs average cost
* Distribution bar chart showing multiple ranges
* Filterable table sorted by multiple
- Update cost tier threshold: "very high" now = $40+/M (was $5+)
- Add navigation links between main dashboard and analysis page
- Add info-box and warning-box CSS styles for contextual content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

add_output_input_multiple.py

@@ -0,0 +1,40 @@
+#!/usr/bin/env python3
+"""
+Add output/input price multiple to the quadrants CSV.
+This calculates how many times more expensive output tokens are compared to input tokens.
+"""
+
+import pandas as pd
+
+# Read the CSV
+df = pd.read_csv('quadrants.csv')
+
+# Calculate output/input multiple
+# Handle edge cases where input price might be 0 (shouldn't happen, but be safe)
+df['output_input_multiple'] = df.apply(
+    lambda row: row['output_price_usd_per_m'] / row['input_price_usd_per_m']
+    if row['input_price_usd_per_m'] > 0 else 0,
+    axis=1
+)
+
+# Save updated CSV
+df.to_csv('quadrants.csv', index=False)
+
+# Calculate and display statistics
+median_multiple = df['output_input_multiple'].median()
+mean_multiple = df['output_input_multiple'].mean()
+min_multiple = df['output_input_multiple'].min()
+max_multiple = df['output_input_multiple'].max()
+
+print(f"Output/Input Price Multiple Statistics:")
+print(f"  Median: {median_multiple:.2f}x")
+print(f"  Mean: {mean_multiple:.2f}x")
+print(f"  Min: {min_multiple:.2f}x")
+print(f"  Max: {max_multiple:.2f}x")
+print(f"\nTotal models: {len(df)}")
+print(f"\nModels by output/input multiple:")
+print(f"  1x (equal pricing): {len(df[df['output_input_multiple'] == 1])}")
+print(f"  <2x: {len(df[df['output_input_multiple'] < 2])}")
+print(f"  2-5x: {len(df[(df['output_input_multiple'] >= 2) & (df['output_input_multiple'] < 5)])}")
+print(f"  5-10x: {len(df[(df['output_input_multiple'] >= 5) & (df['output_input_multiple'] < 10)])}")
+print(f"  10x+: {len(df[df['output_input_multiple'] >= 10])}")

app.js

@@ -78,6 +78,7 @@ function initializeApp() {
     createQuadrantChart();
     createAllQuadrantsChart();
     createIndividualQuadrantCharts();
+    createMultipleQuadrantChart();
 }
 
 // Setup tab navigation
@@ -104,24 +105,36 @@ function setupTabs() {
 function updateStats() {
     const costs = allModels.map(m => m.avg_cost);
     const contexts = allModels.map(m => m.context_length);
-    const minCost = Math.min(...costs);
-    const maxCost = Math.max(...costs);
+    const inputPrices = allModels.map(m => m.input_price_usd_per_m);
+    const outputPrices = allModels.map(m => m.output_price_usd_per_m);
+    const multiples = allModels.map(m => m.output_input_multiple);
     const minContext = Math.min(...contexts);
     const maxContext = Math.max(...contexts);
     const vendors = new Set(allModels.map(m => m.displayVendor)).size;
 
-    // Calculate medians for methodology display
+    // Calculate medians
     const medianCost = median(costs);
     const medianContext = median(contexts);
+    const medianInput = median(inputPrices);
+    const medianOutput = median(outputPrices);
+    const medianMultiple = median(multiples);
 
     document.getElementById('total-models').textContent = allModels.length;
-    document.getElementById('price-range').textContent = `$${minCost.toFixed(2)} - $${maxCost.toFixed(2)}`;
-    document.getElementById('context-range').textContent = `${(minContext/1000).toFixed(0)}K - ${(maxContext/1000000).toFixed(1)}M`;
     document.getElementById('vendors').textContent = vendors;
+    document.getElementById('median-input').textContent = `$${medianInput.toFixed(2)}`;
+    document.getElementById('median-output').textContent = `$${medianOutput.toFixed(2)}`;
+    document.getElementById('median-multiple').textContent = `${medianMultiple.toFixed(2)}x`;
+    document.getElementById('context-range').textContent = `${(minContext/1000).toFixed(0)}K - ${(maxContext/1000000).toFixed(1)}M`;
 
     // Update methodology section with actual median values
     document.getElementById('median-cost-display').textContent = `$${medianCost.toFixed(2)}/M tokens`;
     document.getElementById('median-context-display').textContent = `${(medianContext/1000).toFixed(0)}K tokens`;
+
+    // Update multiple display if it exists
+    const multipleDisplay = document.getElementById('median-multiple-display');
+    if (multipleDisplay) {
+        multipleDisplay.textContent = `${medianMultiple.toFixed(2)}x`;
+    }
 }
 
 // Calculate median for quadrant lines
@@ -250,8 +263,8 @@ function getCostTier(cost) {
     if (cost < 0.10) return 'cost-very-low';
     if (cost < 0.50) return 'cost-low';
     if (cost < 2.00) return 'cost-medium';
-    if (cost < 5.00) return 'cost-high';
-    return 'cost-very-high';
+    if (cost < 40.00) return 'cost-high';
+    return 'cost-very-high';  // $40+ per million tokens
 }
 
 // Get tier class for context
@@ -263,6 +276,15 @@ function getContextTier(context) {
     return 'context-ultra';
 }
 
+// Get tier class for output/input multiple
+function getMultipleTier(multiple) {
+    if (multiple <= 1) return 'multiple-equal';      // Equal or cheaper output
+    if (multiple < 2) return 'multiple-low';         // Less than 2x
+    if (multiple < 5) return 'multiple-medium';      // 2-5x (most common)
+    if (multiple < 10) return 'multiple-high';       // 5-10x
+    return 'multiple-very-high';                     // 10x+
+}
+
 // Clean up model name by removing redundant vendor prefix
 function cleanModelName(modelName, vendor) {
     // Common patterns to remove
@@ -333,6 +355,9 @@ function populateTable(models = filteredModels) {
             <td class="${getCostTier(m.output_price_usd_per_m)}" style="font-weight: 600;">
                 $${m.output_price_usd_per_m.toFixed(2)}
             </td>
+            <td class="${getMultipleTier(m.output_input_multiple)}" style="font-weight: 600;">
+                ${m.output_input_multiple.toFixed(2)}x
+            </td>
             <td><span class="quadrant-badge">${m.quadrant}</span></td>
         </tr>
     `;

index.html

@@ -14,6 +14,9 @@
         <h1>Agentic LLM Price Comparison</h1>
         <p class="subtitle">Cost-effectiveness analysis of 218 tool-calling models from OpenRouter</p>
         <p class="date">Data snapshot: November 8, 2025</p>
+        <nav class="header-nav">
+            <a href="output-input-analysis.html">🔢 Output/Input Price Analysis →</a>
+        </nav>
     </header>
 
     <main>
@@ -51,16 +54,24 @@
                 <div class="stat-label">Models Analyzed</div>
             </div>
             <div class="stat-card">
-                <div class="stat-number" id="price-range">-</div>
-                <div class="stat-label">Price Range ($/M)</div>
+                <div class="stat-number" id="vendors">-</div>
+                <div class="stat-label">Vendors</div>
             </div>
             <div class="stat-card">
-                <div class="stat-number" id="context-range">-</div>
-                <div class="stat-label">Context Range (K)</div>
+                <div class="stat-number" id="median-input">-</div>
+                <div class="stat-label">Median Input ($/M)</div>
             </div>
             <div class="stat-card">
-                <div class="stat-number" id="vendors">-</div>
-                <div class="stat-label">Vendors</div>
+                <div class="stat-number" id="median-output">-</div>
+                <div class="stat-label">Median Output ($/M)</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="median-multiple">-</div>
+                <div class="stat-label">Median Out/In Multiple</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="context-range">-</div>
+                <div class="stat-label">Context Range</div>
             </div>
         </section>
 
@@ -125,6 +136,7 @@
                             <th class="sortable" data-sort="context_length">Context <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="quadrant">Quadrant <span class="sort-indicator"></span></th>
                         </tr>
                     </thead>
@@ -209,6 +221,14 @@
                     <canvas id="quadrantChart"></canvas>
                 </div>
             </section>
+
+            <section class="chart-section">
+                <h2>Output/Input Price Multiple Analysis</h2>
+                <p>This chart shows how much more expensive output tokens are compared to input tokens (median: <strong><span id="median-multiple-display">4.00x</span></strong>). Lower multiples are better for generation-heavy workloads.</p>
+                <div class="chart-container">
+                    <canvas id="multipleQuadrantChart"></canvas>
+                </div>
+            </section>
         </div>
     </main>
 

output-input-analysis.html

@@ -0,0 +1,125 @@
+<!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">
+                        <!-- Populated by JavaScript -->
+                    </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>

output-input-analysis.js

@@ -0,0 +1,440 @@
+// Global data storage
+let allModels = [];
+let filteredModels = [];
+
+// Vendor name mapping (same as main app)
+const vendorNameMap = {
+    'qwen': 'Qwen',
+    'meta-llama': 'Meta',
+    'x-ai': 'xAI',
+    'z-ai': 'Zhipu AI',
+    'google': 'Google',
+    'openai': 'OpenAI',
+    'anthropic': 'Anthropic',
+    'mistralai': 'Mistral AI',
+    'deepseek': 'DeepSeek',
+    'alibaba': 'Alibaba',
+    'amazon': 'Amazon',
+    'microsoft': 'Microsoft',
+    'nvidia': 'NVIDIA',
+    'cohere': 'Cohere',
+    'ai21': 'AI21 Labs',
+    'minimax': 'MiniMax',
+    'moonshotai': 'Moonshot AI',
+    'stepfun-ai': 'StepFun',
+    'inclusionai': 'Inclusion AI',
+    'deepcogito': 'Deep Cogito',
+    'baidu': 'Baidu',
+    'nousresearch': 'Nous Research',
+    'arcee-ai': 'Arcee AI',
+    'inception': 'Inception',
+    'sao10k': 'Sao10K',
+    'thedrummer': 'TheDrummer',
+    'tngtech': 'TNG Technology',
+    'meituan': 'Meituan'
+};
+
+function normalizeVendorName(vendor) {
+    return vendorNameMap[vendor] || vendor;
+}
+
+// Load and process CSV data
+async function loadData() {
+    try {
+        const response = await fetch('quadrants.csv');
+        const csvText = await response.text();
+
+        Papa.parse(csvText, {
+            header: true,
+            dynamicTyping: true,
+            complete: function(results) {
+                allModels = results.data.filter(row => row.model_name);
+                allModels.forEach(model => {
+                    model.displayVendor = normalizeVendorName(model.vendor);
+                });
+                filteredModels = [...allModels];
+                initializeApp();
+            }
+        });
+    } catch (error) {
+        console.error('Error loading data:', error);
+    }
+}
+
+// Sorting state
+let currentSort = {
+    column: 'output_input_multiple',
+    direction: 'desc'  // Start with highest multiples first
+};
+
+// Initialize application
+function initializeApp() {
+    updateStats();
+    populateTable();
+    setupTableControls();
+    setupSorting();
+    createMultipleQuadrantChart();
+    createDistributionChart();
+}
+
+// Calculate median
+function median(arr) {
+    const sorted = [...arr].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+}
+
+// Update statistics
+function updateStats() {
+    const multiples = allModels.map(m => m.output_input_multiple);
+    const medianMultiple = median(multiples);
+
+    const equalPricing = allModels.filter(m => m.output_input_multiple <= 1).length;
+    const highMultiple = allModels.filter(m => m.output_input_multiple >= 5).length;
+
+    document.getElementById('total-models').textContent = allModels.length;
+    document.getElementById('median-multiple').textContent = `${medianMultiple.toFixed(2)}x`;
+    document.getElementById('median-multiple-stat').textContent = `${medianMultiple.toFixed(2)}x`;
+    document.getElementById('median-line-value').textContent = `${medianMultiple.toFixed(2)}x`;
+    document.getElementById('equal-pricing-count').textContent = equalPricing;
+    document.getElementById('high-multiple-count').textContent = highMultiple;
+}
+
+// Get tier class for cost
+function getCostTier(cost) {
+    if (cost < 0.10) return 'cost-very-low';
+    if (cost < 0.50) return 'cost-low';
+    if (cost < 2.00) return 'cost-medium';
+    if (cost < 40.00) return 'cost-high';
+    return 'cost-very-high';
+}
+
+// Get tier class for output/input multiple
+function getMultipleTier(multiple) {
+    if (multiple <= 1) return 'multiple-equal';
+    if (multiple < 2) return 'multiple-low';
+    if (multiple < 5) return 'multiple-medium';
+    if (multiple < 10) return 'multiple-high';
+    return 'multiple-very-high';
+}
+
+// Clean model name
+function cleanModelName(modelName, vendor) {
+    const patterns = [
+        new RegExp(`^${vendor}:\\s*`, 'i'),
+        /^Qwen:\s*/i, /^Meta:\s*/i, /^Google:\s*/i, /^OpenAI:\s*/i,
+        /^Anthropic:\s*/i, /^DeepSeek:\s*/i, /^Mistral:\s*/i,
+        /^NVIDIA:\s*/i, /^Amazon:\s*/i, /^Microsoft:\s*/i,
+        /^xAI:\s*/i, /^Zhipu AI:\s*/i, /^MoonshotAI:\s*/i,
+        /^Moonshot AI:\s*/i, /^Alibaba:\s*/i
+    ];
+    let cleaned = modelName;
+    for (const pattern of patterns) {
+        cleaned = cleaned.replace(pattern, '');
+    }
+    return cleaned;
+}
+
+// Populate table
+function populateTable(models = filteredModels) {
+    const tbody = document.getElementById('table-body');
+
+    const sortedModels = [...models].sort((a, b) => {
+        let aVal = a[currentSort.column];
+        let bVal = b[currentSort.column];
+
+        if (typeof aVal === 'string') {
+            aVal = aVal.toLowerCase();
+            bVal = bVal.toLowerCase();
+        }
+
+        if (currentSort.direction === 'asc') {
+            return aVal > bVal ? 1 : -1;
+        } else {
+            return aVal < bVal ? 1 : -1;
+        }
+    });
+
+    let lastVendor = null;
+    tbody.innerHTML = sortedModels.map((m, index) => {
+        const isNewVendor = m.displayVendor !== lastVendor;
+        lastVendor = m.displayVendor;
+        const vendorClass = isNewVendor ? 'vendor-group-start' : '';
+
+        return `
+        <tr class="${vendorClass}" data-vendor="${m.displayVendor}">
+            <td>${cleanModelName(m.model_name, m.displayVendor)}</td>
+            <td class="vendor-cell">${m.displayVendor}</td>
+            <td class="${getCostTier(m.input_price_usd_per_m)}" style="font-weight: 600;">
+                $${m.input_price_usd_per_m.toFixed(2)}
+            </td>
+            <td class="${getCostTier(m.output_price_usd_per_m)}" style="font-weight: 600;">
+                $${m.output_price_usd_per_m.toFixed(2)}
+            </td>
+            <td class="${getMultipleTier(m.output_input_multiple)}" style="font-weight: 600;">
+                ${m.output_input_multiple.toFixed(2)}x
+            </td>
+            <td class="${getCostTier(m.avg_cost)}" style="font-weight: 600;">
+                $${m.avg_cost.toFixed(2)}
+            </td>
+        </tr>
+    `;
+    }).join('');
+}
+
+// Setup sorting
+function setupSorting() {
+    const headers = document.querySelectorAll('th.sortable');
+
+    headers.forEach(header => {
+        header.addEventListener('click', () => {
+            const column = header.dataset.sort;
+
+            if (currentSort.column === column) {
+                currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+            } else {
+                currentSort.column = column;
+                currentSort.direction = 'asc';
+            }
+
+            headers.forEach(h => {
+                h.classList.remove('sort-asc', 'sort-desc');
+            });
+            header.classList.add(`sort-${currentSort.direction}`);
+
+            populateTable(filteredModels);
+        });
+    });
+
+    // Set initial sort indicator
+    const initialHeader = document.querySelector(`th[data-sort="${currentSort.column}"]`);
+    if (initialHeader) {
+        initialHeader.classList.add('sort-desc');
+    }
+}
+
+// Setup table controls
+function setupTableControls() {
+    const searchInput = document.getElementById('search');
+    const multipleFilter = document.getElementById('multiple-filter');
+
+    function applyFilters() {
+        const searchTerm = searchInput.value.toLowerCase();
+        const multipleCategory = multipleFilter.value;
+
+        filteredModels = allModels.filter(m => {
+            const matchesSearch = !searchTerm ||
+                m.model_name.toLowerCase().includes(searchTerm) ||
+                m.displayVendor.toLowerCase().includes(searchTerm);
+
+            let matchesMultiple = true;
+            if (multipleCategory === 'equal') matchesMultiple = m.output_input_multiple <= 1;
+            else if (multipleCategory === 'low') matchesMultiple = m.output_input_multiple < 2;
+            else if (multipleCategory === 'medium') matchesMultiple = m.output_input_multiple >= 2 && m.output_input_multiple < 5;
+            else if (multipleCategory === 'high') matchesMultiple = m.output_input_multiple >= 5 && m.output_input_multiple < 10;
+            else if (multipleCategory === 'very-high') matchesMultiple = m.output_input_multiple >= 10;
+
+            return matchesSearch && matchesMultiple;
+        });
+
+        populateTable(filteredModels);
+    }
+
+    searchInput.addEventListener('input', applyFilters);
+    multipleFilter.addEventListener('change', applyFilters);
+}
+
+// Create quadrant chart: Output/Input Multiple vs Average Cost
+function createMultipleQuadrantChart() {
+    const ctx = document.getElementById('multipleQuadrantChart').getContext('2d');
+
+    const multiples = allModels.map(m => m.output_input_multiple);
+    const costs = allModels.map(m => m.avg_cost);
+    const medianMultiple = median(multiples);
+    const medianCost = median(costs);
+
+    // Divide into quadrants
+    const quadrants = {
+        'Low Multiple / Low Cost': { color: '#10b981', models: [] },
+        'High Multiple / Low Cost': { color: '#f59e0b', models: [] },
+        'Low Multiple / High Cost': { color: '#2563eb', models: [] },
+        'High Multiple / High Cost': { color: '#ef4444', models: [] }
+    };
+
+    allModels.forEach(m => {
+        const isLowMultiple = m.output_input_multiple < medianMultiple;
+        const isLowCost = m.avg_cost < medianCost;
+
+        if (isLowMultiple && isLowCost) quadrants['Low Multiple / Low Cost'].models.push(m);
+        else if (!isLowMultiple && isLowCost) quadrants['High Multiple / Low Cost'].models.push(m);
+        else if (isLowMultiple && !isLowCost) quadrants['Low Multiple / High Cost'].models.push(m);
+        else quadrants['High Multiple / High Cost'].models.push(m);
+    });
+
+    const datasets = Object.keys(quadrants).map(quadrant => {
+        const q = quadrants[quadrant];
+        return {
+            label: quadrant,
+            data: q.models.map(m => ({
+                x: m.output_input_multiple,
+                y: m.avg_cost,
+                model: m
+            })),
+            backgroundColor: q.color + '80',
+            borderColor: q.color,
+            borderWidth: 2,
+            pointRadius: 5,
+            pointHoverRadius: 8
+        };
+    });
+
+    new Chart(ctx, {
+        type: 'scatter',
+        data: { datasets },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top'
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const model = context.raw.model;
+                            return [
+                                model.model_name,
+                                `Vendor: ${model.displayVendor}`,
+                                `Out/In Multiple: ${model.output_input_multiple.toFixed(2)}x`,
+                                `Input: $${model.input_price_usd_per_m.toFixed(2)}/M`,
+                                `Output: $${model.output_price_usd_per_m.toFixed(2)}/M`,
+                                `Avg: $${model.avg_cost.toFixed(2)}/M`
+                            ];
+                        }
+                    }
+                },
+                annotation: {
+                    annotations: {
+                        verticalLine: {
+                            type: 'line',
+                            xMin: medianMultiple,
+                            xMax: medianMultiple,
+                            borderColor: '#64748b',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            label: {
+                                display: true,
+                                content: `Median Multiple: ${medianMultiple.toFixed(2)}x`,
+                                position: 'start'
+                            }
+                        },
+                        horizontalLine: {
+                            type: 'line',
+                            yMin: medianCost,
+                            yMax: medianCost,
+                            borderColor: '#64748b',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            label: {
+                                display: true,
+                                content: `Median Cost: $${medianCost.toFixed(2)}`,
+                                position: 'end'
+                            }
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Output/Input Price Multiple'
+                    }
+                },
+                y: {
+                    type: 'logarithmic',
+                    title: {
+                        display: true,
+                        text: 'Average Cost ($/M tokens, log scale)'
+                    }
+                }
+            }
+        },
+        plugins: [window['chartjs-plugin-annotation']]
+    });
+}
+
+// Create distribution bar chart
+function createDistributionChart() {
+    const ctx = document.getElementById('multipleDistribution').getContext('2d');
+
+    const bins = {
+        '≤1x (Equal)': allModels.filter(m => m.output_input_multiple <= 1).length,
+        '<2x (Low)': allModels.filter(m => m.output_input_multiple > 1 && m.output_input_multiple < 2).length,
+        '2-5x (Medium)': allModels.filter(m => m.output_input_multiple >= 2 && m.output_input_multiple < 5).length,
+        '5-10x (High)': allModels.filter(m => m.output_input_multiple >= 5 && m.output_input_multiple < 10).length,
+        '10x+ (Very High)': allModels.filter(m => m.output_input_multiple >= 10).length
+    };
+
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: Object.keys(bins),
+            datasets: [{
+                label: 'Number of Models',
+                data: Object.values(bins),
+                backgroundColor: [
+                    '#10b981',  // Equal
+                    '#84cc16',  // Low
+                    '#fde047',  // Medium
+                    '#f97316',  // High
+                    '#ef4444'   // Very High
+                ],
+                borderColor: [
+                    '#059669',
+                    '#65a30d',
+                    '#eab308',
+                    '#ea580c',
+                    '#dc2626'
+                ],
+                borderWidth: 2
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const percentage = ((context.parsed.y / allModels.length) * 100).toFixed(1);
+                            return `${context.parsed.y} models (${percentage}%)`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Number of Models'
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Output/Input Multiple Range'
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', loadData);

style.css

@@ -34,6 +34,28 @@ header {
     box-shadow: var(--shadow-lg);
 }
 
+.header-nav {
+    margin-top: 1.5rem;
+}
+
+.header-nav a {
+    display: inline-block;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.header-nav a:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
 header h1 {
     font-size: 2.5rem;
     font-weight: 700;
@@ -430,6 +452,13 @@ h3 {
 .context-very-large { background: #60a5fa; }
 .context-ultra { background: #34d399; }
 
+/* Output/Input Multiple Tier Colors */
+.multiple-equal { background: #10b981; }      /* <=1x - Equal or cheaper output (best for users) */
+.multiple-low { background: #84cc16; }        /* <2x - Low markup */
+.multiple-medium { background: #fde047; }     /* 2-5x - Standard industry practice */
+.multiple-high { background: #f97316; }       /* 5-10x - High markup */
+.multiple-very-high { background: #ef4444; }  /* 10x+ - Very high markup */
+
 /* Table */
 .table-controls {
     display: flex;
@@ -612,3 +641,62 @@ footer a:hover {
         font-size: 0.9rem;
     }
 }
+
+/* Info and Warning Boxes */
+.info-box {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    border-left: 4px solid #3b82f6;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+}
+
+.info-box h3 {
+    color: #1e40af;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.info-box h4 {
+    color: #1e3a8a;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.info-box ul {
+    margin: 0.75rem 0;
+    padding-left: 1.5rem;
+}
+
+.info-box li {
+    margin: 0.5rem 0;
+}
+
+.warning-box {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+    border-left: 4px solid #f59e0b;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+}
+
+.warning-box h3 {
+    color: #92400e;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.warning-box ul {
+    margin: 0.75rem 0;
+    padding-left: 1.5rem;
+}
+
+.warning-box li {
+    margin: 0.5rem 0;
+}
+
+.emphasis {
+    font-weight: 600;
+    color: #78350f;
+    margin-top: 1rem;
+}