File size: 2,633 Bytes
66bf3de |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<html>
<head>
<title>Advanced Chatbot</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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();
// Make AJAX call to retrieve the answer from the AI model
$.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();
}
});
// Initial greeting from the assistant
addMessage('Welcome! How can I assist you?', false);
});
</script>
</body>
</html> |