-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (188 loc) · 9.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT API Cost Calculator</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💸</text></svg>">
<link href="preflight.min.css" rel="stylesheet">
<link href="utilities.min.css" rel="stylesheet">
</head>
<body>
<div class="inline-block w-full grid text-center">
<div style="max-width: 40rem; " class="w-full place-self-center p-12 inline-block">
<div class="text-left">
<h1 class="mb-2">Calculate OpenAI API Costs 💸 with Your Actual Text</h1>
<p class="text-xs mb-1">Secure, Ad-Free, and <a href="https://github.com/zimonh/model-costs">Open Source</a> using OpenAI's Tokenizer. Accurately calculate costs for the GPT-3 4K, GPT-3 16K, GPT-4 8K, and GPT-4 32K models.</p>
<label for="input-textarea" class="block pt-6 text-gray-700 text-sm font-bold mb-2" for="menu-container" >Choose Model</label>
<div id="menu-container" class="mb-6 "></div>
<label for="input-textarea" class="block pt-6 text-gray-700 text-sm font-bold mb-2" >Add Your Input prompt</label>
<textarea placeholder="Hey AI assistant, can you extract all relevant topics fro…" class=" rounded p-3 w-full" id="input-textarea" rows="3" ></textarea>
<div id="output-container-input" class="ml-auto mt-3 p-2 pl-4 pb-3 shadow" style="background-color: #dfdfdf; color:#404040; max-width:220px;"></div>
<label for="output-textarea" class="block pt-6 mt-6 text-gray-700 text-sm font-bold mb-2" >Add OpenAI Response</label>
<textarea placeholder="Sure! I can help. Here are the extracted topics…" class=" rounded p-3 w-full" id="output-textarea" rows="3" ></textarea>
<div id="output-container-output" class="ml-auto mt-3 mb-6 p-2 pl-4 pb-3 shadow" style="background-color: #dfdfdf; color:#404040; max-width:220px;"></div>
<button class="mt-6 bg-black hover:bg-white hover:text-black text-white font-bold py-2 px-4 rounded" onclick="calculateTotalPrice()">Calculate Price</button>
<div id="output-container-total" class="mt-6 text-4xl"></div>
<p class="text-xs text-grey-dark m-3">Disclaimer: The cost calculator provided on this platform is intended for general informational purposes only. While we have made every effort to ensure the accuracy and reliability of the calculations, we cannot guarantee its absolute correctness or completeness.
Users are advised to exercise caution and verify the results obtained from the cost calculator by conducting their own independent calculations or seeking professional advice. We do not assume any responsibility or liability for any errors, inaccuracies, or omissions that may arise from the use of this tool.</p>
</div>
</div>
</div>
<script src="browser.min.js"></script>
<script>
const { encode, decode } = gpt3encoder;
const dropdown = document.createElement("select");
dropdown.classList.add('bg-gray-50','border','border-gray-300','text-gray-900','text-sm','rounded-lg','focus:ring-blue-500','focus:border-blue-500','block','w-full','p-5','dark:bg-gray-700','dark:border-gray-600','dark:placeholder-gray-400','dark:text-white','dark:focus:ring-blue-500','dark:focus:border-blue-500')
function calculateTotalPrice(){
let total = 0;
total += calculatePrice('input');
total += calculatePrice('output');
// total += calculatePrice('training');
const outputContainer = document.getElementById(`output-container-total`);
outputContainer.innerHTML = `Total Price: $${total.toFixed(7).replace(/\.?0+$/, "")}`;
}
function calculatePrice(type) {
const selectedOption = dropdown.options[dropdown.selectedIndex];
const pricePerInputToken = selectedOption.getAttribute(`data-price-per-${type}-token`);
const input = document.getElementById(`${type}-textarea`);
const encodedInput = encode(input.value);
const inputTokenCount = encodedInput.length;
// Price per 1K tokens (adjust as needed)
const price = (pricePerInputToken * inputTokenCount) / 1000;
const outputContainer = document.getElementById(`output-container-${type}`);
const displayPrice = price === 0 ? 'N/A' : price.toFixed(7).replace(/\.?0+$/, "");
const displayPricePerInputToken = pricePerInputToken === '0' ? 'N/A' : (pricePerInputToken/1000).toFixed(7).replace(/\.?0+$/, "");
outputContainer.innerHTML = `<div>
<div class="flex items-center pt-2 text-base text-gray-900 rounded-lg bg-gray-50 group ">
${type} token count:
<span class="flex-1 ml-3 whitespace-nowrap font-bold ">${ price === 0 ? 'N/A' : inputTokenCount }</span>
</div>
<div class="flex items-center pt-2 text-base text-gray-900 rounded-lg bg-gray-50 group ">
$ per token:
<span class="flex-1 ml-3 whitespace-nowrap font-bold ">${displayPricePerInputToken}</span>
</div>
<div class="flex items-center pt-2 text-base text-gray-900 rounded-lg bg-gray-50 group ">
$ total:
<span class="flex-1 ml-3 whitespace-nowrap font-bold ">${displayPrice}</span>
</div>
<div>`;
return price;
}
function generateMenuFromJSON(jsonData) {
const models = jsonData.models;
models.forEach((model) => {
const modelName = model.name;
const contexts = model.contexts;
for (const context in contexts) {
const optionText = `${modelName} ${context}`;
const option = document.createElement("option");
option.text = optionText;
option.dataset.pricePerOutputToken = contexts[context].output;
option.dataset.pricePerInputToken = contexts[context].input === undefined ? contexts[context].output : contexts[context].input;
option.dataset.pricePerTrainingToken = contexts[context].training === undefined ? 0 : contexts[context].training;
dropdown.appendChild(option);
}
});
dropdown.onchange = () =>{
if(document.getElementById(`input-textarea`).value + document.getElementById(`output-textarea`).value !== ""){
calculateTotalPrice();
}
}
document.getElementById(`input-textarea`).oninput = () => {
calculateTotalPrice();
};
document.getElementById(`output-textarea`).oninput = () => {
calculateTotalPrice();
};
const container = document.getElementById("menu-container");
container.appendChild(dropdown);
}
const jsonData = {
"models": [
{
"name": "gpt-4o",
"description": "GPT-4o is optimized for large context sizes with a balanced performance in natural language understanding.",
"contexts": {
"128K": {
"input": 0.005,
"output": 0.015
}
}
},
{
"name": "gpt-4o-2024-08-06",
"description": "A specific version of GPT-4o with discounted pricing for input and output tokens.",
"contexts": {
"128K": {
"input": 0.0025,
"output": 0.01
}
}
},
{
"name": "chatgpt-4o-latest",
"description": "Latest version of ChatGPT-4o optimized for large-scale tasks.",
"contexts": {
"128K": {
"input": 0.005,
"output": 0.015
}
}
},
{
"name": "gpt-4-turbo",
"description": "GPT-4 Turbo provides faster and cheaper alternatives for processing with large context sizes.",
"contexts": {
"128K": {
"input": 0.01,
"output": 0.03
}
}
},
{
"name": "gpt-4",
"description": "GPT-4 provides extensive language capabilities with a smaller context size.",
"contexts": {
"8K": {
"input": 0.03,
"output": 0.06
}
}
},
{
"name": "gpt-3.5-turbo",
"description": "GPT-3.5 Turbo is a cost-effective model optimized for dialogue-based applications.",
"contexts": {
"16K": {
"input": 0.0005,
"output": 0.0015
}
}
},
{
"name": "gpt-3.5-turbo-instruct",
"description": "GPT-3.5 Turbo Instruct is designed for following complex instructions with a smaller context window.",
"contexts": {
"4K": {
"input": 0.0015,
"output": 0.002
}
}
},
{
"name": "gpt-3.5-turbo-1106",
"description": "A specific version of GPT-3.5 Turbo optimized for a larger context size.",
"contexts": {
"16K": {
"input": 0.001,
"output": 0.002
}
}
}
]
};
document.addEventListener("DOMContentLoaded", function() {
generateMenuFromJSON(jsonData);
});
</script>
</body>
</html>