Create jina-embeddings-image-token-calculator.html

simonw · web-flow · commit 8ad34e5e2ac8 · 2024-09-19T22:54:03.000-07:00
https://gist.github.com/simonw/7f3d2ff63423078f04d1fb2fc2b3e2a5
diff --git a/jina-embeddings-image-token-calculator.html b/jina-embeddings-image-token-calculator.html
@@ -0,0 +1,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>
