|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mariam AI!</title> |
|
|
<style> |
|
|
body { font-family: sans-serif; margin: 20px; background-color: #f0f2f6; } |
|
|
.chat-container { max-width: 800px; margin: auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 85vh; } |
|
|
.chat-header { background-color: #4CAF50; color: white; padding: 15px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; } |
|
|
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; border-bottom: 1px solid #ddd; } |
|
|
.message { margin-bottom: 15px; padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; } |
|
|
.message.user { background-color: #DCF8C6; align-self: flex-end; margin-left: auto; border-bottom-right-radius: 0; } |
|
|
.message.assistant { background-color: #f1f1f1; align-self: flex-start; border-bottom-left-radius: 0; white-space: pre-wrap; } |
|
|
.message strong { font-weight: bold; display: block; margin-bottom: 5px; } |
|
|
.chat-input { display: flex; padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; } |
|
|
.chat-input input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; } |
|
|
.chat-input button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 20px; cursor: pointer; } |
|
|
.chat-input button:hover { background-color: #45a049; } |
|
|
.settings { padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; } |
|
|
.settings label { margin-right: 10px;} |
|
|
.error { color: red; text-align: center; padding: 10px; } |
|
|
.spinner { text-align: center; padding: 10px; color: #555; font-style: italic;} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="chat-container"> |
|
|
<div class="chat-header"> |
|
|
<h1>Mariam AI!</h1> |
|
|
</div> |
|
|
|
|
|
<div class="chat-messages" id="chat-messages"> |
|
|
{% for message in chat_history %} |
|
|
<div class="message {{ message.role }}"> |
|
|
<strong>{{ message.role|capitalize }}</strong> |
|
|
{{ message.text }} |
|
|
</div> |
|
|
{% endfor %} |
|
|
|
|
|
{% if processing_message and web_search_active %} |
|
|
<div class="spinner">Recherche web en cours...</div> |
|
|
{% endif %} |
|
|
|
|
|
{% if processing_message %} |
|
|
<div class="spinner">Génération de la réponse...</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
{% if error %} |
|
|
<div class="error">{{ error }}</div> |
|
|
{% endif %} |
|
|
|
|
|
<form method="POST" action="{{ url_for('chat') }}" enctype="multipart/form-data"> |
|
|
<div class="settings"> |
|
|
<div> |
|
|
<label for="web_search_toggle"> |
|
|
<input type="checkbox" id="web_search_toggle" name="web_search" value="true" {% if web_search_active %}checked{% endif %}> |
|
|
Activer la recherche web |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<label for="file_upload">Uploader (jpg, png, pdf, txt):</label> |
|
|
<input type="file" id="file_upload" name="file" accept=".jpg,.jpeg,.png,.pdf,.txt"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-input"> |
|
|
<input type="text" name="prompt" placeholder="Posez votre question..." required autofocus> |
|
|
<button type="submit">Envoyer</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
