Skip to content

Commit b91e3d6

Browse files
jamesmcroftjamesmcroft
authored
Merge pull request #45 from jamesmcroft/44-feature-new-models
Add GPT-4.1, o-series, and computer-use-preview models
2 parents c881ec5 + 0bb7df3 commit b91e3d6

File tree

5 files changed

+206
-65
lines changed

5 files changed

+206
-65
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Azure OpenAI Image Token Calculator
22

3-
The Azure OpenAI Image Token Calculator is a simple application designed to estimate the number of tokens and the cost associated with processing images using Azure OpenAI's GPT-4o and 4o-mini models. This tool helps users understand the how the tokens and cost is calculated based on the selected model's specifications and the number of images to be processed.
3+
The Azure OpenAI Image Token Calculator is a simple application designed to estimate the number of tokens and the cost associated with processing images using Azure OpenAI's multimodal models, such as GPT-4.1, o-series, GPT-4o, and Computer Use. This tool helps users understand the how the tokens and cost is calculated based on the selected model's specifications and the number of images to be processed.
44

55
**Use the app**: https://jamesmcroft.github.io/openai-image-token-calculator/
66

‎src/components/calculator/CalculationExplanation.jsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
AccordionSummary,
55
AccordionDetails,
66
Typography,
7+
Grid2 as Grid,
78
} from "@mui/material";
89
import { useBoundStore } from "../../stores";
910

@@ -39,9 +40,16 @@ const CalculationExplanation = () => {
3940
</Typography>
4041
<Typography>
4142
4. <b>Cost Calculation</b>: The total cost is calculated based on
42-
the total number of tokens and the cost per thousand tokens ($
43-
{model.costPerThousandTokens}).
43+
the total number of tokens and the cost per million tokens ($
44+
{model.costPerMillionTokens}).
4445
</Typography>
46+
{model.comment && (
47+
<Grid sx={{ marginTop: 2 }}>
48+
<Typography>
49+
<b>IMPORTANT:</b> {model.comment}
50+
</Typography>
51+
</Grid>
52+
)}
4553
</AccordionDetails>
4654
) : (
4755
<AccordionDetails>

‎src/components/calculator/ModelSelector.jsx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import React from "react";
2-
import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
2+
import {
3+
FormControl,
4+
InputLabel,
5+
Select,
6+
MenuItem,
7+
ListSubheader,
8+
Grid2 as Grid,
9+
} from "@mui/material";
310
import { useBoundStore } from "../../stores";
411

512
const ModelSelector = ({ modelName, setModelName }) => {
@@ -11,7 +18,9 @@ const ModelSelector = ({ modelName, setModelName }) => {
1118
const selectModel = (model) => {
1219
setModelName(model);
1320

14-
const selectedModel = models.find((m) => m.name === model);
21+
const selectedModel = models
22+
.flatMap((modelGroup) => modelGroup.items.find((m) => m.name === model))
23+
.filter(Boolean)[0];
1524
if (selectedModel) {
1625
setModel(selectedModel);
1726
runCalculation();
@@ -33,11 +42,18 @@ const ModelSelector = ({ modelName, setModelName }) => {
3342
<MenuItem value="">
3443
<em>None</em>
3544
</MenuItem>
36-
{models.map((model) => (
37-
<MenuItem key={model.name} value={model.name}>
38-
{model.name}
39-
</MenuItem>
40-
))}
45+
{models.flatMap((modelGroup) => [
46+
<ListSubheader key={`subheader-${modelGroup.name}`}>
47+
{modelGroup.name}
48+
</ListSubheader>,
49+
...modelGroup.items.map((model) => (
50+
<MenuItem key={model.name} value={model.name}>
51+
<Grid container spacing={1} alignItems="center">
52+
{model.name}
53+
</Grid>
54+
</MenuItem>
55+
)),
56+
])}
4157
</Select>
4258
</FormControl>
4359
);

‎src/stores/CalcStore.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const calcStore = (set, get) => ({
6060
const imageMinSizeLength = model.imageMinSizeLength;
6161
const tileSizeLength = model.tileSizeLength;
6262
const baseTokens = model.baseTokens;
63-
const costPerThousandTokens = model.costPerThousandTokens;
63+
const costPerMillionTokens = model.costPerMillionTokens;
6464

6565
const imageTileCount = images.flatMap((image) => {
6666
const imgSize = getResizedImageSize(
@@ -100,7 +100,7 @@ export const calcStore = (set, get) => ({
100100

101101
set(() => ({ totalTokens: totalTokens }));
102102

103-
const totalCost = (totalTokens / 1000) * costPerThousandTokens;
103+
const totalCost = (totalTokens / 1000000) * costPerMillionTokens;
104104
set(() => ({ totalCost: totalCost.toFixed(6) }));
105105
},
106106
});

‎src/stores/ModelStore.js

Lines changed: 170 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,184 @@
11
export const modelStore = (set, get) => ({
22
models: [
33
{
4-
name: "GPT-4o (2024-08-06 - Standard)",
5-
tokensPerTile: 170,
6-
maxImageDimension: 2048,
7-
imageMinSizeLength: 768,
8-
tileSizeLength: 512,
9-
baseTokens: 85,
10-
costPerThousandTokens: 0.00275,
4+
name: "GPT-4.1",
5+
items: [
6+
{
7+
name: "GPT-4.1 (2025-04-14 - Global)",
8+
tokensPerTile: 170,
9+
maxImageDimension: 2048,
10+
imageMinSizeLength: 768,
11+
tileSizeLength: 512,
12+
baseTokens: 85,
13+
costPerMillionTokens: 2,
14+
},
15+
],
1116
},
1217
{
13-
name: "GPT-4o (2024-08-06 - Data Zone)",
14-
tokensPerTile: 170,
15-
maxImageDimension: 2048,
16-
imageMinSizeLength: 768,
17-
tileSizeLength: 512,
18-
baseTokens: 85,
19-
costPerThousandTokens: 0.00275,
18+
name: "o-series",
19+
items: [
20+
{
21+
name: "o3 (2025-04-16)",
22+
tokensPerTile: 150,
23+
maxImageDimension: 2048,
24+
imageMinSizeLength: 768,
25+
tileSizeLength: 512,
26+
baseTokens: 75,
27+
costPerMillionTokens: 10,
28+
},
29+
{
30+
name: "o1 (2024-12-17 - Global)",
31+
tokensPerTile: 150,
32+
maxImageDimension: 2048,
33+
imageMinSizeLength: 768,
34+
tileSizeLength: 512,
35+
baseTokens: 75,
36+
costPerMillionTokens: 15,
37+
},
38+
{
39+
name: "o1 (2024-12-17 - Data Zone)",
40+
tokensPerTile: 150,
41+
maxImageDimension: 2048,
42+
imageMinSizeLength: 768,
43+
tileSizeLength: 512,
44+
baseTokens: 75,
45+
costPerMillionTokens: 16.5,
46+
},
47+
{
48+
name: "o1 (2024-12-17 - Standard)",
49+
tokensPerTile: 150,
50+
maxImageDimension: 2048,
51+
imageMinSizeLength: 768,
52+
tileSizeLength: 512,
53+
baseTokens: 75,
54+
costPerMillionTokens: 16.5,
55+
},
56+
],
2057
},
2158
{
22-
name: "GPT-4o (2024-08-06 - Global)",
23-
tokensPerTile: 170,
24-
maxImageDimension: 2048,
25-
imageMinSizeLength: 768,
26-
tileSizeLength: 512,
27-
baseTokens: 85,
28-
costPerThousandTokens: 0.0025,
59+
name: "GPT-4o",
60+
items: [
61+
{
62+
name: "GPT-4o (2024-11-20 - Global)",
63+
tokensPerTile: 170,
64+
maxImageDimension: 2048,
65+
imageMinSizeLength: 768,
66+
tileSizeLength: 512,
67+
baseTokens: 85,
68+
costPerMillionTokens: 2.5,
69+
},
70+
{
71+
name: "GPT-4o (2024-11-20 - Data Zone)",
72+
tokensPerTile: 170,
73+
maxImageDimension: 2048,
74+
imageMinSizeLength: 768,
75+
tileSizeLength: 512,
76+
baseTokens: 85,
77+
costPerMillionTokens: 2.75,
78+
},
79+
{
80+
name: "GPT-4o (2024-11-20 - Standard)",
81+
tokensPerTile: 170,
82+
maxImageDimension: 2048,
83+
imageMinSizeLength: 768,
84+
tileSizeLength: 512,
85+
baseTokens: 85,
86+
costPerMillionTokens: 3.025,
87+
},
88+
{
89+
name: "GPT-4o (2024-08-06 - Global)",
90+
tokensPerTile: 170,
91+
maxImageDimension: 2048,
92+
imageMinSizeLength: 768,
93+
tileSizeLength: 512,
94+
baseTokens: 85,
95+
costPerMillionTokens: 2.5,
96+
},
97+
{
98+
name: "GPT-4o (2024-08-06 - Data Zone)",
99+
tokensPerTile: 170,
100+
maxImageDimension: 2048,
101+
imageMinSizeLength: 768,
102+
tileSizeLength: 512,
103+
baseTokens: 85,
104+
costPerMillionTokens: 2.75,
105+
},
106+
{
107+
name: "GPT-4o (2024-08-06 - Standard)",
108+
tokensPerTile: 170,
109+
maxImageDimension: 2048,
110+
imageMinSizeLength: 768,
111+
tileSizeLength: 512,
112+
baseTokens: 85,
113+
costPerMillionTokens: 2.75,
114+
},
115+
{
116+
name: "GPT-4o (2024-05-13)",
117+
tokensPerTile: 170,
118+
maxImageDimension: 2048,
119+
imageMinSizeLength: 768,
120+
tileSizeLength: 512,
121+
baseTokens: 85,
122+
costPerMillionTokens: 5,
123+
},
124+
],
29125
},
30126
{
31-
name: "GPT-4o-mini (2024-07-18 - Standard)",
32-
tokensPerTile: 5667,
33-
maxImageDimension: 2048,
34-
imageMinSizeLength: 768,
35-
tileSizeLength: 512,
36-
baseTokens: 2833,
37-
costPerThousandTokens: 0.000165,
127+
name: "GPT-4o-mini",
128+
items: [
129+
{
130+
name: "GPT-4o-mini (2024-07-18 - Global)",
131+
tokensPerTile: 5667,
132+
maxImageDimension: 2048,
133+
imageMinSizeLength: 768,
134+
tileSizeLength: 512,
135+
baseTokens: 2833,
136+
costPerMillionTokens: 0.15,
137+
},
138+
{
139+
name: "GPT-4o-mini (2024-07-18 - Data Zone)",
140+
tokensPerTile: 5667,
141+
maxImageDimension: 2048,
142+
imageMinSizeLength: 768,
143+
tileSizeLength: 512,
144+
baseTokens: 2833,
145+
costPerMillionTokens: 0.165,
146+
},
147+
{
148+
name: "GPT-4o-mini (2024-07-18 - Standard)",
149+
tokensPerTile: 5667,
150+
maxImageDimension: 2048,
151+
imageMinSizeLength: 768,
152+
tileSizeLength: 512,
153+
baseTokens: 2833,
154+
costPerMillionTokens: 0.165,
155+
},
156+
],
38157
},
39158
{
40-
name: "GPT-4o-mini (2024-07-18 - Data Zone)",
41-
tokensPerTile: 5667,
42-
maxImageDimension: 2048,
43-
imageMinSizeLength: 768,
44-
tileSizeLength: 512,
45-
baseTokens: 2833,
46-
costPerThousandTokens: 0.000165,
47-
},
48-
{
49-
name: "GPT-4o-mini (2024-07-18 - Global)",
50-
tokensPerTile: 5667,
51-
maxImageDimension: 2048,
52-
imageMinSizeLength: 768,
53-
tileSizeLength: 512,
54-
baseTokens: 2833,
55-
costPerThousandTokens: 0.00015,
56-
},
57-
{
58-
name: "GPT-4o (2024-05-13)",
59-
tokensPerTile: 170,
60-
maxImageDimension: 2048,
61-
imageMinSizeLength: 768,
62-
tileSizeLength: 512,
63-
baseTokens: 85,
64-
costPerThousandTokens: 0.005,
159+
name: "Preview",
160+
items: [
161+
{
162+
name: "computer-use-preview",
163+
tokensPerTile: 129,
164+
maxImageDimension: 2048,
165+
imageMinSizeLength: 768,
166+
tileSizeLength: 512,
167+
baseTokens: 65,
168+
costPerMillionTokens: 3,
169+
comment:
170+
"This calculator only provides the input tokens consumed by the screenshot images processed by the computer-use-preview model, not the entire execution. Images are calculated based on the display width and height defined in the Computer Use tool. The quantity of images will be based on the number of actions the model requires to complete the task.",
171+
},
172+
{
173+
name: "GPT-4.5-Preview (2025-02-27)",
174+
tokensPerTile: 170,
175+
maxImageDimension: 2048,
176+
imageMinSizeLength: 768,
177+
tileSizeLength: 512,
178+
baseTokens: 85,
179+
costPerMillionTokens: 75,
180+
},
181+
],
65182
},
66183
],
67184
});

0 commit comments

Comments
 (0)