index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vroom Live</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/osc-js@2.4.0/lib/osc.min.js"></script>
    <script type="module">
        import OpenAI from "https://esm.sh/openai";
        window.OpenAI = OpenAI;
    </script>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <svg width="531" height="182" viewBox="0 0 531 182" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M412.85 98V62.75H419.25V92.55H436.15V98H412.85ZM444.676 98V62.75H451.076V98H444.676ZM473.789 98L458.089 62.75H464.939L476.589 89.8L488.239 62.75H494.839L479.139 98H473.789ZM501.883 98V62.75H525.333V67.85H508.033V77.55H524.233V82.65H508.033V92.9H525.333V98H501.883Z" fill="white"/>
            <path d="M24.1699 73.0791L35.083 120.979L49.9512 97.9814C51.5137 95.54 52.71 93.123 53.54 90.7305C54.3701 88.3379 54.7852 86.3604 54.7852 84.7979C54.7852 83.5283 54.5654 82.5029 54.126 81.7217C53.7354 80.8916 53.1982 80.208 52.5146 79.6709C51.8311 79.1338 50.3906 78.5479 48.1934 77.9131L49.0723 73.1523H65.9912C67.2607 74.2754 67.8955 75.8135 67.8955 77.7666C67.8955 82.2588 65.8691 87.6299 61.8164 93.8799L29.8096 143.465H20.8008L5.85938 79.6709L1.3916 77.9131L2.19727 73.0791H24.1699ZM98.7305 87.9473C101.416 82.7227 104.663 78.6455 108.472 75.7158C112.329 72.7861 116.187 71.3213 120.044 71.3213C122.388 71.3213 124.414 71.5654 126.123 72.0537L121.875 96.7363H117.847L114.624 86.7021C110.962 86.7021 107.764 87.6299 105.029 89.4854C102.295 91.3408 99.6582 94.2949 97.1191 98.3477L89.4287 142H69.7266L80.7129 79.7441L72.1436 77.9863L72.9492 73.1523H100.415L98.7305 87.9473ZM175.122 96.2236C175.122 84.4561 172.07 78.5723 165.967 78.5723C162.891 78.5723 159.839 80.4277 156.812 84.1387C153.833 87.8496 151.416 92.8301 149.561 99.0801C147.754 105.33 146.851 111.849 146.851 118.636C146.851 124.251 147.754 128.597 149.561 131.673C151.367 134.7 153.687 136.214 156.519 136.214C159.644 136.214 162.671 134.407 165.601 130.794C168.53 127.181 170.85 122.298 172.559 116.146C174.268 109.993 175.122 103.353 175.122 96.2236ZM154.834 143.465C146.533 143.465 139.893 140.853 134.912 135.628C129.932 130.403 127.441 123.396 127.441 114.607C127.441 106.697 129.15 99.4219 132.568 92.7812C135.986 86.1406 140.747 80.916 146.851 77.1074C153.003 73.25 159.912 71.3213 167.578 71.3213C175.879 71.3213 182.52 73.9336 187.5 79.1582C192.48 84.3828 194.971 91.3896 194.971 100.179C194.971 108.089 193.262 115.364 189.844 122.005C186.426 128.646 181.641 133.895 175.488 137.752C169.385 141.561 162.5 143.465 154.834 143.465ZM250.122 96.2236C250.122 84.4561 247.07 78.5723 240.967 78.5723C237.891 78.5723 234.839 80.4277 231.812 84.1387C228.833 87.8496 226.416 92.8301 224.561 99.0801C222.754 105.33 221.851 111.849 221.851 118.636C221.851 124.251 222.754 128.597 224.561 131.673C226.367 134.7 228.687 136.214 231.519 136.214C234.644 136.214 237.671 134.407 240.601 130.794C243.53 127.181 245.85 122.298 247.559 116.146C249.268 109.993 250.122 103.353 250.122 96.2236ZM229.834 143.465C221.533 143.465 214.893 140.853 209.912 135.628C204.932 130.403 202.441 123.396 202.441 114.607C202.441 106.697 204.15 99.4219 207.568 92.7812C210.986 86.1406 215.747 80.916 221.851 77.1074C228.003 73.25 234.912 71.3213 242.578 71.3213C250.879 71.3213 257.52 73.9336 262.5 79.1582C267.48 84.3828 269.971 91.3896 269.971 100.179C269.971 108.089 268.262 115.364 264.844 122.005C261.426 128.646 256.641 133.895 250.488 137.752C244.385 141.561 237.5 143.465 229.834 143.465ZM364.453 88.8994C364.453 84.1631 362.695 81.7949 359.18 81.7949C357.471 81.7949 355.444 82.7715 353.101 84.7246C350.806 86.6777 348.73 89.168 346.875 92.1953C345.068 95.2227 343.921 98.0791 343.433 100.765L336.182 142H316.626L324.097 100.325C325.171 94.6611 325.708 90.8525 325.708 88.8994C325.708 84.1631 323.901 81.7949 320.288 81.7949C317.944 81.7949 315.283 83.4307 312.305 86.7021C309.326 89.9248 306.958 93.8555 305.2 98.4941L297.437 142H277.954L288.794 79.8174L282.275 77.9863L283.228 73.1523H307.251L307.031 85.457C310.547 80.6719 314.282 77.1318 318.237 74.8369C322.192 72.4932 326.611 71.3213 331.494 71.3213C335.84 71.3213 339.233 72.6152 341.675 75.2031C344.165 77.7422 345.435 81.2822 345.483 85.8232C352.368 76.1553 360.62 71.3213 370.239 71.3213C374.536 71.3213 377.954 72.6885 380.493 75.4229C383.032 78.1084 384.302 81.8926 384.302 86.7754C384.302 88.582 383.887 91.8047 383.057 96.4434L376.099 135.408L384.595 137.166L383.643 142H355.371L362.842 100.325C363.916 94.6611 364.453 90.8525 364.453 88.8994Z" fill="white"/>
        </svg>
        <div id="auth-section">
            <input type="password" id="apiKey" placeholder="Enter your OpenAI API key">
            <button id="enterChat">Enter Chat</button>
        </div>
        <div id="chat-section" style="display:none;">
            <div id="messages"></div>
            <input type="text" id="messageInput" placeholder="Type a message...">
        </div>
        <script src="script.js" type="module"></script>
    </main>
</body>
</html>