<!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 it has vison,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 so it screenshots the board every second to see what the user is drawling and shows the messaeg on top it will say ai is thinking then show here is the api ai key: <TRUFFLEHOG_REDACTED_GROQ> now write the full complete code, and don't add comments saying add this here no write the full cdoe