| <html> |
| <head> |
| <title>Advanced 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>Advanced Chatbot</h1> |
| <div id="chat-container"></div> |
| <div id="loading-indicator" style="display: none;"> |
| <img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" alt="Loading..." /> |
| </div> |
| <div id="input-container"> |
| <input type="text" id="question-input" class="form-control" placeholder="Ask a question"> |
| <button id="submit-button" class="btn btn-primary">Ask</button> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script> |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
| <script> |
| $(document).ready(function() { |
| var chatContainer = $('#chat-container'); |
| var questionInput = $('#question-input'); |
| var submitButton = $('#submit-button'); |
| var loadingIndicator = $('#loading-indicator'); |
| |
| function addMessage(message, isUser) { |
| var messageClass = isUser ? 'user-message' : 'assistant-message'; |
| var messageElement = $('<div>').addClass('message').addClass(messageClass).text(message); |
| chatContainer.append(messageElement); |
| chatContainer.scrollTop(chatContainer[0].scrollHeight); |
| } |
| |
| function askQuestion(question) { |
| addMessage(question, true); |
| loadingIndicator.show(); |
| |
| |
| $.ajax({ |
| url: 'https://www.literallyanything.io/api/integrations/chatgpt', |
| method: 'POST', |
| contentType: 'application/json', |
| data: JSON.stringify({ |
| "systemPrompt": "add a detailed prompt for the system if needed", |
| "prompts": [{ "role": "user", "content": question }] |
| }), |
| success: function(response) { |
| var answer = response.response; |
| addMessage(answer, false); |
| }, |
| complete: function() { |
| loadingIndicator.hide(); |
| } |
| }); |
| } |
| |
| submitButton.click(function() { |
| var question = questionInput.val(); |
| if (question.trim() !== '') { |
| askQuestion(question); |
| questionInput.val(''); |
| } |
| }); |
| |
| questionInput.keypress(function(event) { |
| if (event.which === 13) { |
| submitButton.click(); |
| } |
| }); |
| |
| |
| addMessage('Welcome! How can I assist you?', false); |
| }); |
| </script> |
| </body> |
| </html> |
