File size: 4,082 Bytes
040db21 37619a6 040db21 23f07ff b728b86 fe49da4 b728b86 edad585 b728b86 a5874c3 b728b86 edad585 b728b86 fe49da4 b728b86 23f07ff b728b86 fe49da4 b728b86 23f07ff edad585 b728b86 a5874c3 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 |
<!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; /* Respecte les sauts de ligne et espaces */ }
.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 %}
<!-- Zone pour afficher "Recherche web en cours..." -->
{% if processing_message and web_search_active %}
<div class="spinner">Recherche web en cours...</div>
{% endif %}
<!-- Zone pour afficher "Génération de la réponse..." -->
{% 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"> <!-- Limiter les types ici -->
</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>
// Scroll vers le bas automatiquement
const chatMessages = document.getElementById('chat-messages');
chatMessages.scrollTop = chatMessages.scrollHeight;
</script>
</body>
</html> |