    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Key Generator</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            .container { max-width: 500px; margin: 0 auto; text-align: center; }
            button { margin: 10px 0; padding: 10px; width: 100%; }
            p { margin-top: 10px; font-weight: bold; }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Generate API Key</h1>
            <button id="generate-key">Generate Key</button>
            <p id="output"></p>
        </div>
        <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
        <script>
            const socket = io();

            document.getElementById('generate-key').addEventListener('click', () => {
                socket.emit('request_key');
            });

            socket.on('key_response', (data) => {
                document.getElementById('output').textContent = `Generated Key: ${data.key}`;
            });
        </script>
    </body>
    </html>