simonw/image-calculator.md Secret

## image-calculator.md

      
    Raw
  

              image-calculator.md
            
          
    Image Tile Cost Calculator

human (Sep 19, 2024, 10:52 PM)
For an image with dimensions 750x500 pixels:

The image is divided into 224x224 pixel tiles.

To calculate the number of tiles, take the width in pixels and divide by 224, then round up to the nearest integer. 750/224 ≈ 3.35 → 4
Repeat for the height in pixels: 500/224 ≈ 2.23 → 3


The total number of tiles required in this example is: 4 (horizontal) x 3 (vertical) = 12 tiles
The cost will be 12 x 1,000 = 12,000 tokens

Build an artifact tool (no react) where I can drop on an image (or click and select an image) and it measures its width and height and shows the cost in tokens, with working
assistant (Sep 19, 2024, 10:52 PM)
Certainly! I'll create an HTML artifact with JavaScript that allows you to drop an image or select one, and then calculates the number of tiles and the cost in tokens based on the image dimensions. Here's the implementation:
Image Token Calculator

<!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>
I've created an HTML artifact that implements the Image Token Calculator as requested. Here's a breakdown of the main features:

The page has a drop zone where users can drag and drop an image file.
Users can also click on the drop zone to open a file selection dialog.
Once an image is selected or dropped, the script calculates:

The number of horizontal and vertical tiles (224x224 pixels each)
The total number of tiles
The token cost (1000 tokens per tile)


The results are displayed below the drop zone.

The calculator works as follows:

It reads the dimensions of the uploaded image.
It calculates the number of 224x224 pixel tiles needed to cover the image, rounding up for partial tiles.
It multiplies the number of tiles by 1000 to get the token cost.

This tool should provide an easy way for users to calculate the token cost for their images based on the given specifications. Users can simply drag and drop or select an image file, and the results will be displayed instantly.
Is there anything you'd like me to modify or explain further about this implementation?