<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notion-like Whiteboard</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            background-color: #ffffff;
            color: #37352f;
            display: flex;
            flex-direction: column;
        }
        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
        }
        h1 {
            font-size: 1.5em;
            font-weight: 700;
            margin: 0 0 10px 0;
        }
        #whiteboard {
            flex: 1;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            cursor: crosshair;
        }
        .controls {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            background-color: #f7f6f3;
            padding: 10px;
            border-radius: 3px;
            flex-wrap: wrap;
        }
        .control-group {
            display: flex;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 5px;
        }
        button {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            color: #37352f;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
            padding: 8px 12px;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
        }
        button:hover {
            background-color: #f7f6f3;
        }
        button.active {
            background-color: #e0e0e0;
            font-weight: bold;
        }
        input[type="color"] {
            -webkit-appearance: none;
            border: none;
            width: 32px;
            height: 32px;
            cursor: pointer;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 3px;
        }
        #strokeWidth {
            width: 50px;
            margin-left: 10px;
            padding: 5px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
        }
        label {
            font-size: 14px;
            margin-right: 5px;
        }
        .shortcut {
            font-size: 12px;
            color: #888;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Notion-like Whiteboard</h1>
        <div class="controls">
            <div class="control-group">
                <button id="drawBtn" class="active">Draw <span class="shortcut">(D)</span></button>
                <button id="eraseBtn">Erase <span class="shortcut">(E)</span></button>
                <button id="clearBtn">Clear All <span class="shortcut">(C)</span></button>
            </div>
            <div class="control-group">
                <input type="color" id="colorPicker" value="#000000">
                <label for="strokeWidth">Width:</label>
                <input type="number" id="strokeWidth" min="1" max="50" value="2">
            </div>
        </div>
        <canvas id="whiteboard"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('whiteboard');
        const ctx = canvas.getContext('2d');
        const drawBtn = document.getElementById('drawBtn');
        const eraseBtn = document.getElementById('eraseBtn');
        const clearBtn = document.getElementById('clearBtn');
        const colorPicker = document.getElementById('colorPicker');
        const strokeWidth = document.getElementById('strokeWidth');

        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let mode = 'draw';

        function resizeCanvas() {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }

        function startPosition(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }

        function endPosition() {
            isDrawing = false;
        }

        function draw(e) {
            if (!isDrawing) return;

            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = mode === 'draw' ? colorPicker.value : '#FFFFFF';
            ctx.lineWidth = strokeWidth.value;
            ctx.lineCap = 'round';
            ctx.stroke();

            [lastX, lastY] = [e.offsetX, e.offsetY];
        }

        function setDrawMode() {
            mode = 'draw';
            canvas.style.cursor = 'crosshair';
            drawBtn.classList.add('active');
            eraseBtn.classList.remove('active');
        }

        function setEraseMode() {
            mode = 'erase';
            canvas.style.cursor = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.78-.78 2.05 0 2.83l3.85 3.85c.78.78 2.05.78 2.83 0L20.41 10.27c.39-.39.59-.9.59-1.41V4c0-.55-.45-1-1-1h-4.86zM5.83 19.59l-1.41-1.41L11.59 11 13 12.41l-7.17 7.18z\'/%3E%3C/svg%3E") 0 24, auto';
            drawBtn.classList.remove('active');
            eraseBtn.classList.add('active');
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        canvas.addEventListener('mousedown', startPosition);
        canvas.addEventListener('mouseup', endPosition);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseout', endPosition);

        drawBtn.addEventListener('click', setDrawMode);
        eraseBtn.addEventListener('click', setEraseMode);
        clearBtn.addEventListener('click', clearCanvas);

        // Touch events for mobile devices
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousedown', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        });

        canvas.addEventListener('touchend', (e) => {
            e.preventDefault();
            const mouseEvent = new MouseEvent('mouseup', {});
            canvas.dispatchEvent(mouseEvent);
        });

        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousemove', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        });

        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.key === 'd' || e.key === 'D') {
                setDrawMode();
            } else if (e.key === 'e' || e.key === 'E') {
                setEraseMode();
            } else if (e.key === 'c' || e.key === 'C') {
                clearCanvas();
            }
        });

        // Initialize
        setDrawMode();
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
    </script>
</body>
</html>  now make it so the whiteboard takes screenshots and send to the api every second for the vuson, prompt it and say tell me the math numbers you see so for example if the user draws a sqar root it will write it in math notion,const Groq = require('groq-sdk');

const groq = new Groq();
async function main() {
  const chatCompletion = await groq.chat.completions.create({
    "messages": [
      {
        "role": "user",
        "content": [
          {
            "type": "text",
            "text": "What's in this image?"
          },
          {
            "type": "image_url",
            "image_url": {
              "url": "${IMAGE_DATA_URL}"
            }
          }
        ]
      },
      {
        "role": "assistant",
        "content": ""
      }
    ],
    "model": "llama-3.2-11b-vision-preview",
    "temperature": 1,
    "max_tokens": 1024,
    "top_p": 1,
    "stream": false,
    "stop": null
  });

   console.log(chatCompletion.choices[0].message.content);
}

main(); make it show the response saying ai is tbinking then show when its done thinking: <TRUFFLEHOG_REDACTED_GROQ> this my api key, now write the fulll com,pelte code