| <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> |