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