Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Groq Chatbot SPA</title> | |
| <link rel="stylesheet" href="static/style.css"> | |
| </head> | |
| <body> | |
| <!-- API Key Modal --> | |
| <div id="modal" class="modal"> | |
| <div class="modal-content"> | |
| <h2>Enter Groq API Key</h2> | |
| <input type="password" id="apiKeyInput" placeholder="Groq API Key"> | |
| <button id="loginBtn">Login</button> | |
| <div id="loginError" class="error"></div> | |
| </div> | |
| </div> | |
| <!-- Chat App --> | |
| <div id="app" class="hidden"> | |
| <header> | |
| <span>Groq Chatbot</span> | |
| <select id="modelSelect"></select> | |
| <label class="toggle-label"> | |
| <input type="checkbox" id="toolToggle" checked> | |
| Tool Calls | |
| </label> | |
| <button id="logoutBtn">Logout</button> | |
| </header> | |
| <div id="chatContainer"></div> | |
| <div id="typingIndicator" class="typing hidden">Bot is typing...</div> | |
| <form id="inputForm" autocomplete="off"> | |
| <input id="userInput" type="text" placeholder="Type your message..." autocomplete="off"> | |
| <button type="submit">Send</button> | |
| </form> | |
| </div> | |
| <script src="static/script.js"></script> | |
| </body> | |
| </html> | |