File size: 5,822 Bytes
040db21 0d2d16d 040db21 0d2d16d 040db21 0d2d16d 040db21 0d2d16d 040db21 0d2d16d 040db21 0d2d16d 040db21 0d2d16d |
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mariam AI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.chat-container {
max-width: 800px;
margin: 50px auto;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user {
background-color: #f0f0f0;
text-align: right;
}
.assistant {
background-color: #e0f7fa;
text-align: left;
}
.settings-container {
margin-bottom: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Mariam AI</h1>
<div class="settings-container">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="webSearchToggle" {% if web_search %}checked{% endif %}>
<label class="form-check-label" for="webSearchToggle">
Activer la recherche web
</label>
</div>
<button id="clearChatBtn" class="btn btn-danger mt-2">Clear Chat</button>
</div>
<div class="chat-container">
<div id="chatMessages">
{% for message in chat %}
<div class="message {{ message.role }}">
{{ message.text }}
</div>
{% endfor %}
</div>
<div class="form-group">
<label for="fileInput">Télécharger un fichier (image/document)</label>
<input type="file" class="form-control-file" id="fileInput">
</div>
<div class="input-group">
<input type="text" id="promptInput" class="form-control" placeholder="Hey?">
<div class="input-group-append">
<button id="sendButton" class="btn btn-primary">Send</button>
</div>
</div>
<div id="loadingIndicator" class="spinner-border text-primary mt-2 hidden" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
function addMessage(role, text) {
const messageClass = role === 'user' ? 'user' : 'assistant';
$('#chatMessages').append(`<div class="message ${messageClass}">${text}</div>`);
//Scroll to the bottom
$('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
}
$('#sendButton').click(function() {
const prompt = $('#promptInput').val();
const webSearchEnabled = $('#webSearchToggle').is(':checked');
const file = $('#fileInput')[0].files[0]; // Get the file
if (!prompt && !file) {
return; // Prevent sending empty messages without a file.
}
addMessage('user', prompt);
$('#promptInput').val(''); // Clear input after sending
$("#loadingIndicator").removeClass("hidden"); // Show the spinner
const formData = new FormData();
formData.append('prompt', prompt);
formData.append('web_search', webSearchEnabled);
if (file) {
formData.append('file', file);
}
$.ajax({
url: '/send_message',
type: 'POST',
data: formData,
processData: false, // Important for FormData
contentType: false, // Important for FormData
success: function(response) {
addMessage('assistant', response.text);
},
error: function(xhr, status, error) {
addMessage('assistant', "Error: " + xhr.responseJSON.text); // Display error
},
complete: function(){
$("#loadingIndicator").addClass("hidden"); // Hide spinner
}
});
});
$('#webSearchToggle').change(function() {
$.ajax({
url: '/toggle_web_search',
type: 'POST',
success: function(response) {
console.log("Web search toggled:", response.web_search);
}
});
});
$("#clearChatBtn").click(function() {
$.ajax({
url: "/clear_chat",
type: "POST",
success: function(response) {
$("#chatMessages").empty(); // Clear the chat display
},
error: function(xhr) {
console.error("Error clearing chat:", xhr.statusText);
}
});
});
// Allow sending messages with Enter key
$('#promptInput').keypress(function (e) {
if (e.which == 13) { // Enter key pressed
$('#sendButton').click();
return false; // Prevent default behavior
}
});
});
</script>
</body>
</html> |