Skip to content

Commit 148bc12

Browse files
simonwsimonw
authored
Create llm-prices.html
https://gist.github.com/simonw/6b684b5f7d75fb82034fc963cc487530
1 parent 1ae0853 commit 148bc12

File tree

1 file changed

+206
-0
lines changed

1 file changed

+206
-0
lines changed

‎llm-prices.html

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>LLM Pricing Calculator</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
body {
12+
font-family: Arial, sans-serif;
13+
margin: 0;
14+
padding: 20px;
15+
background-color: #f0f0f0;
16+
}
17+
.container {
18+
max-width: 1000px;
19+
margin: 0 auto;
20+
}
21+
.calculator, .presets, .disclaimer {
22+
background-color: white;
23+
border-radius: 8px;
24+
padding: 20px;
25+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
26+
margin-bottom: 20px;
27+
}
28+
@media (min-width: 768px) {
29+
.flex-container {
30+
display: flex;
31+
gap: 20px;
32+
}
33+
.calculator {
34+
flex: 1;
35+
}
36+
.presets {
37+
flex: 1;
38+
}
39+
}
40+
h1, h2 {
41+
font-size: 24px;
42+
color: #333;
43+
margin-bottom: 20px;
44+
text-align: center;
45+
}
46+
.input-group {
47+
margin-bottom: 15px;
48+
}
49+
label {
50+
display: block;
51+
margin-bottom: 5px;
52+
color: #666;
53+
}
54+
input[type="number"] {
55+
width: 100%;
56+
padding: 8px;
57+
border: 1px solid #ddd;
58+
border-radius: 4px;
59+
font-size: 16px;
60+
}
61+
.result {
62+
margin-top: 20px;
63+
padding: 15px;
64+
background-color: #e9f7ef;
65+
border-radius: 4px;
66+
}
67+
.result p {
68+
margin: 5px 0;
69+
font-size: 18px;
70+
color: #2ecc71;
71+
}
72+
.preset-item {
73+
display: flex;
74+
align-items: center;
75+
margin-bottom: 10px;
76+
}
77+
.preset-btn {
78+
flex: 0 0 auto;
79+
margin-right: 10px;
80+
padding: 8px 12px;
81+
background-color: #3498db;
82+
color: white;
83+
border: none;
84+
border-radius: 4px;
85+
cursor: pointer;
86+
font-size: 14px;
87+
}
88+
.preset-btn:hover {
89+
background-color: #2980b9;
90+
}
91+
.preset-info {
92+
flex: 1;
93+
font-size: 14px;
94+
color: #666;
95+
}
96+
.disclaimer {
97+
font-size: 14px;
98+
color: #777;
99+
text-align: center;
100+
font-style: italic;
101+
}
102+
</style>
103+
</head>
104+
<body>
105+
<div class="container">
106+
<div class="flex-container">
107+
<div class="calculator">
108+
<h1>LLM Pricing Calculator</h1>
109+
<div class="input-group">
110+
<label for="inputTokens">Number of Input Tokens:</label>
111+
<input type="number" id="inputTokens" min="0" onkeyup="calculateCost()" onchange="calculateCost()">
112+
</div>
113+
<div class="input-group">
114+
<label for="outputTokens">Number of Output Tokens:</label>
115+
<input type="number" id="outputTokens" min="0" onkeyup="calculateCost()" onchange="calculateCost()">
116+
</div>
117+
<div class="input-group">
118+
<label for="inputCost">Cost per Million Input Tokens ($):</label>
119+
<input type="number" id="inputCost" min="0" step="0.000001" onkeyup="calculateCost()" onchange="calculateCost()">
120+
</div>
121+
<div class="input-group">
122+
<label for="outputCost">Cost per Million Output Tokens ($):</label>
123+
<input type="number" id="outputCost" min="0" step="0.000001" onkeyup="calculateCost()" onchange="calculateCost()">
124+
</div>
125+
<div class="result">
126+
<p>Total Cost: $<span id="costDollars">0.000000</span></p>
127+
<p>Total Cost: <span id="costCents">0</span> cents</p>
128+
</div>
129+
</div>
130+
131+
<div class="presets">
132+
<h2>Presets</h2>
133+
<div id="presetList"></div>
134+
</div>
135+
</div>
136+
137+
<div class="disclaimer">
138+
Prices were correct as of 16th October 2024, they may have changed.
139+
</div>
140+
</div>
141+
142+
<script>
143+
const presets = {
144+
'gemini-1.5-flash': { name: 'Gemini 1.5 Flash ≤128k', input: 0.075, output: 0.30 },
145+
'gemini-1.5-flash-128k': { name: 'Gemini 1.5 Flash >128k', input: 0.15, output: 0.60 },
146+
'gemini-1.5-flash-8b': { name: 'Gemini 1.5 Flash-8B ≤128k', input: 0.0375, output: 0.15 },
147+
'gemini-1.5-flash-8b-128k': { name: 'Gemini 1.5 Flash-8B >128k', input: 0.075, output: 0.30 },
148+
'gemini-1.5-pro': { name: 'Gemini 1.5 Pro ≤128k', input: 1.25, output: 5.00 },
149+
'gemini-1.5-pro-128k': { name: 'Gemini 1.5 Pro >128k', input: 2.50, output: 10.00 },
150+
'claude-3.5-sonnet': { name: 'Claude 3.5 Sonnet', input: 3.00, output: 15.00 },
151+
'claude-3-opus': { name: 'Claude 3 Opus', input: 15.00, output: 75.00 },
152+
'claude-3-haiku': { name: 'Claude 3 Haiku', input: 0.25, output: 1.25 },
153+
'gpt-4o': { name: 'GPT-4o', input: 2.50, output: 10.00 },
154+
'gpt-4o-mini': { name: 'GPT-4o Mini', input: 0.150, output: 0.600 }
155+
};
156+
157+
function calculateCost() {
158+
const inputTokens = parseFloat(document.getElementById('inputTokens').value) || 0;
159+
const outputTokens = parseFloat(document.getElementById('outputTokens').value) || 0;
160+
const inputCost = parseFloat(document.getElementById('inputCost').value) || 0;
161+
const outputCost = parseFloat(document.getElementById('outputCost').value) || 0;
162+
163+
const totalCost = (inputTokens * inputCost / 1000000) + (outputTokens * outputCost / 1000000);
164+
165+
document.getElementById('costDollars').textContent = totalCost.toFixed(6);
166+
document.getElementById('costCents').textContent = trimZeros((totalCost * 100).toFixed(4));
167+
}
168+
169+
function trimZeros(num) {
170+
return num.replace(/\.?0+$/, '');
171+
}
172+
173+
function setPreset(model) {
174+
const preset = presets[model];
175+
document.getElementById('inputCost').value = preset.input;
176+
document.getElementById('outputCost').value = preset.output;
177+
calculateCost();
178+
}
179+
180+
function formatPrice(price) {
181+
if (Number.isInteger(price)) {
182+
return `$${price}`;
183+
} else {
184+
return `$${price.toFixed(2).replace(/\.?0+$/, '')}`;
185+
}
186+
}
187+
188+
function createPresetButtons() {
189+
const presetList = document.getElementById('presetList');
190+
for (const [key, preset] of Object.entries(presets)) {
191+
const presetItem = document.createElement('div');
192+
presetItem.className = 'preset-item';
193+
presetItem.innerHTML = `
194+
<button class="preset-btn" onclick="setPreset('${key}')">${preset.name}</button>
195+
<span class="preset-info">Input: ${formatPrice(preset.input)} / Output: ${formatPrice(preset.output)} per 1M tokens</span>
196+
`;
197+
presetList.appendChild(presetItem);
198+
}
199+
}
200+
201+
// Create preset buttons and run initial calculation
202+
createPresetButtons();
203+
calculateCost();
204+
</script>
205+
</body>
206+
</html>

0 commit comments

Comments
 (0)