I want to connect to my voice agent by clicking the button on the page. Here are the files. Please fix all errors so it works. Here are the documents to help: https://docs.vapi.ai/sdk/web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Talk to Me - SwiftLeads AI Voice Interface</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-color: #0d0a2c;
            background-image: radial-gradient(#ffffff33 1px, transparent 1px);
            background-size: 20px 20px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .logo-container {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
        }
        .logo {
            width: 150px;
            height: auto;
        }
        .content-container {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            text-align: center;
        }
        .speak-button {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #0d0a2c;
            border: 2px solid #c742a8;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 20px;
            transition: all 0.3s ease;
        }
        .speak-button:hover {
            background-color: #1a1640;
            transform: scale(1.05);
        }
        .speak-icon {
            width: 50px;
            height: 50px;
            fill: #c742a8;
        }
        .talk-text {
            font-size: 24px;
            color: #ffffff;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="logo-container">
        <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/swiftleadsailogo-BZAZre9LAwfn1B7fZme8dXZsTQzvic.png" alt="SwiftLeads AI Logo" class="logo">
    </div>
    <div class="content-container">
        <div class="container">
            <button class="speak-button" id="speakButton">
                <svg class="speak-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
                </svg>
            </button>
            <p class="talk-text">Talk to me</p>
        </div>
    </div>
    <script type="module">
        import Vapi from "https://cdn.jsdelivr.net/npm/@vapi-ai/web@latest/dist/vapi.min.js";

        async function startAssistant() {
            try {
                console.log('Button clicked, fetching assistant data...');
                const response = await fetch('/api/start-assistant');
                console.log('Fetch response:', response);
                const data = await response.json();
                console.log('Response from backend:', data);

                const { publicKey, assistantId } = data;
                console.log('Initializing Vapi with publicKey:', publicKey);
                const vapi = new Vapi(publicKey);

                console.log('Starting assistant with assistantId:', assistantId);
                await vapi.start(assistantId);
                console.log("Assistant started successfully.");
            } catch (error) {
                console.error("Error starting assistant:", error);
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const speakButton = document.getElementById('speakButton');
            
            speakButton.addEventListener('click', function() {
                startAssistant();
            });
        });
    </script>
</body>
</html>


vapiClient.js
import Vapi from "@vapi-ai/web";

const vapi = new Vapi("96375087-41ba-4915-83ab-8e7f6a319265");

export function startAssistant() {
    vapi.start("1e2d5840-d605-4eb9-a2f1-127db684940d")
        .then(() => {
            console.log("Assistant started successfully.");
        })
        .catch((error) => {
            console.error("Error starting assistant:", error);
        });
}

export function stopAssistant() {
    vapi.stop();
}

server.js
require('dotenv').config();
const express = require('express');
const path = require('path');
const app = require('./src/app');

const server = express();
const PORT = process.env.PORT || 3000;

server.use(express.static(path.join(__dirname, 'public')));
server.use('/api', app);

server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});