Commit
·
66bf3de
1
Parent(s):
c4f4b3e
Create Chat.Mhtml
Browse files- Chat.Mhtml +77 -0
Chat.Mhtml
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<html>
|
| 2 |
+
<head>
|
| 3 |
+
<title>Advanced Chatbot</title>
|
| 4 |
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
|
| 5 |
+
</head>
|
| 6 |
+
<body>
|
| 7 |
+
<div class="container">
|
| 8 |
+
<h1>Advanced Chatbot</h1>
|
| 9 |
+
<div id="chat-container"></div>
|
| 10 |
+
<div id="loading-indicator" style="display: none;">
|
| 11 |
+
<img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" alt="Loading..." />
|
| 12 |
+
</div>
|
| 13 |
+
<div id="input-container">
|
| 14 |
+
<input type="text" id="question-input" class="form-control" placeholder="Ask a question">
|
| 15 |
+
<button id="submit-button" class="btn btn-primary">Ask</button>
|
| 16 |
+
</div>
|
| 17 |
+
</div>
|
| 18 |
+
|
| 19 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
|
| 20 |
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
| 21 |
+
<script>
|
| 22 |
+
$(document).ready(function() {
|
| 23 |
+
var chatContainer = $('#chat-container');
|
| 24 |
+
var questionInput = $('#question-input');
|
| 25 |
+
var submitButton = $('#submit-button');
|
| 26 |
+
var loadingIndicator = $('#loading-indicator');
|
| 27 |
+
|
| 28 |
+
function addMessage(message, isUser) {
|
| 29 |
+
var messageClass = isUser ? 'user-message' : 'assistant-message';
|
| 30 |
+
var messageElement = $('<div>').addClass('message').addClass(messageClass).text(message);
|
| 31 |
+
chatContainer.append(messageElement);
|
| 32 |
+
chatContainer.scrollTop(chatContainer[0].scrollHeight);
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
function askQuestion(question) {
|
| 36 |
+
addMessage(question, true);
|
| 37 |
+
loadingIndicator.show();
|
| 38 |
+
|
| 39 |
+
// Make AJAX call to retrieve the answer from the AI model
|
| 40 |
+
$.ajax({
|
| 41 |
+
url: 'https://www.literallyanything.io/api/integrations/chatgpt',
|
| 42 |
+
method: 'POST',
|
| 43 |
+
contentType: 'application/json',
|
| 44 |
+
data: JSON.stringify({
|
| 45 |
+
"systemPrompt": "add a detailed prompt for the system if needed",
|
| 46 |
+
"prompts": [{ "role": "user", "content": question }]
|
| 47 |
+
}),
|
| 48 |
+
success: function(response) {
|
| 49 |
+
var answer = response.response;
|
| 50 |
+
addMessage(answer, false);
|
| 51 |
+
},
|
| 52 |
+
complete: function() {
|
| 53 |
+
loadingIndicator.hide();
|
| 54 |
+
}
|
| 55 |
+
});
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
submitButton.click(function() {
|
| 59 |
+
var question = questionInput.val();
|
| 60 |
+
if (question.trim() !== '') {
|
| 61 |
+
askQuestion(question);
|
| 62 |
+
questionInput.val('');
|
| 63 |
+
}
|
| 64 |
+
});
|
| 65 |
+
|
| 66 |
+
questionInput.keypress(function(event) {
|
| 67 |
+
if (event.which === 13) {
|
| 68 |
+
submitButton.click();
|
| 69 |
+
}
|
| 70 |
+
});
|
| 71 |
+
|
| 72 |
+
// Initial greeting from the assistant
|
| 73 |
+
addMessage('Welcome! How can I assist you?', false);
|
| 74 |
+
});
|
| 75 |
+
</script>
|
| 76 |
+
</body>
|
| 77 |
+
</html>
|