| <html> |
| <head> |
| <title>AI Chatbot</title> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>AI Chatbot</h1> |
|
|
| <div id="chatContainer" class="border p-3 mb-3" style="height: 300px; overflow-y: auto;"></div> |
|
|
| <form id="messageForm"> |
| <div class="mb-3"> |
| <label for="userMessage" class="form-label">User Message</label> |
| <input type="text" class="form-control" id="userMessage" required> |
| </div> |
| <button type="submit" class="btn btn-primary">Send</button> |
| </form> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script> |
| <script> |
| function showAssistantMessage(message) { |
| var chatContainer = document.getElementById('chatContainer'); |
| var assistantMessage = document.createElement('div'); |
| assistantMessage.innerHTML = '<strong>Assistant:</strong> ' + message; |
| chatContainer.appendChild(assistantMessage); |
| } |
| |
| document.getElementById('messageForm').addEventListener('submit', function(event) { |
| event.preventDefault(); |
| |
| var userMessage = document.getElementById('userMessage').value; |
| |
| var xhr = new XMLHttpRequest(); |
| xhr.open('POST', 'https://www.literallyanything.io/api/integrations/chatgpt', true); |
| xhr.setRequestHeader('Content-Type', 'application/json'); |
| |
| xhr.onreadystatechange = function() { |
| if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { |
| var response = JSON.parse(xhr.responseText); |
| showAssistantMessage(response.response); |
| } |
| }; |
| |
| var data = JSON.stringify({ |
| "systemPrompt": "Welcome to the AI Chatbot! How can I assist you today?", |
| "prompts": [{ "role": "user", "content": userMessage }] |
| }); |
| |
| xhr.send(data); |
| |
| document.getElementById('userMessage').value = ''; |
| }); |
| </script> |
| </body> |
| </html> |
