forked from simonw/tools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjina-embeddings-image-token-calculator.html
98 lines (91 loc) · 3.06 KB
/
jina-embeddings-image-token-calculator.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Token Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
#drop-zone {
border: 2px dashed #ccc;
border-radius: 20px;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#drop-zone.dragover {
background-color: #f0f0f0;
}
#file-input {
display: none;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Image Token Calculator</h1>
<div id="drop-zone">
<p>Drop an image here or click to select</p>
</div>
<input type="file" id="file-input" accept="image/*">
<div id="result"></div>
<script>
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const result = document.getElementById('result');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
dropZone.addEventListener('drop', handleDrop);
fileInput.addEventListener('change', handleFileSelect);
function handleDrop(e) {
e.preventDefault();
dropZone.classList.remove('dragover');
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
processImage(file);
}
}
function handleFileSelect(e) {
const file = e.target.files[0];
if (file) {
processImage(file);
}
}
function processImage(file) {
const img = new Image();
img.onload = () => calculateTokens(img.width, img.height);
img.src = URL.createObjectURL(file);
}
function calculateTokens(width, height) {
const tileSize = 224;
const horizontalTiles = Math.ceil(width / tileSize);
const verticalTiles = Math.ceil(height / tileSize);
const totalTiles = horizontalTiles * verticalTiles;
const tokenCost = totalTiles * 1000;
result.innerHTML = `
<h2>Results:</h2>
<p>Image dimensions: ${width}x${height} pixels</p>
<p>Horizontal tiles: ${horizontalTiles}</p>
<p>Vertical tiles: ${verticalTiles}</p>
<p>Total tiles: ${totalTiles}</p>
<p>Token cost: ${tokenCost.toLocaleString()} tokens</p>
`;
}
</script>
</body>
</html>