amhuppert/my-ai-resources/model-price-compare

Model Price Comparison

Generate an interactive HTML visualization comparing pricing and capabilities of frontier AI models across major providers.

Target Models

Research the current pricing for these frontier model families:

The models listed above are baseline targets as of July 2026, and the baseline prices exist only to sanity-check research results. If newer versions exist, use the current versions. Include additional frontier models discovered during research that belong to these product lines. Exclude deprecated, preview, or fine-tuning-only variants.

Workflow

Step 1: Research Current Pricing

<critical> Always research live pricing. Prices change frequently — training data is unreliable for pricing. </critical>

Search for the official API pricing page of each provider. For each model, collect:

Use standard real-time API pricing. If a provider offers tiered pricing (batch, cached, etc.), use the default non-batch, non-cached tier.

Step 2: Calculate Derived Metrics

Pages per dollar — approximate one page as 800 tokens:

pagesPerDollarInput  = 1,000,000 / inputPrice  / 800
pagesPerDollarOutput = 1,000,000 / outputPrice / 800

Step 3: Generate HTML Visualization

Create a self-contained HTML file saved as model-price-comparison.html in the current working directory.

Refer to references/visualization-spec.md for the complete HTML structure, Chart.js configurations, and styling guidelines.

Required Visualizations

1. Input vs Output Price — Grouped bar chart with input and output price per 1M tokens side by side for each model
2. Pages Per Dollar — Bar chart showing input and output pages per dollar, highlighting cost efficiency
3. Context Window — Horizontal bar chart comparing context windows across models
4. Price vs Context Scatter — Scatter plot with context window (X) vs output price per 1M tokens (Y), bubble labeled by model name
5. Comprehensive Data Table — All raw and derived data in a styled, readable table

Provider Color Scheme

Use consistent colors across all charts:

Step 4: Present Results

After generating the HTML file:

1. Report the file path
2. Summarize key findings — best value, largest context, cheapest input/output
3. Note the date pricing was retrieved

Output Requirements

• Self-contained single HTML file — all CSS inline, Chart.js loaded via CDN
• Responsive layout
• Clean, modern design with readable typography
• All prices in USD
• Data retrieval date displayed prominently in the page header

Additional Resources

Reference Files

• `references/visualization-spec.md` — HTML page structure, Chart.js chart configurations, table styling, and responsive layout patterns