| <!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> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" rel="stylesheet"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
| <style> |
| .message-transition { |
| transition: all 0.3s ease-in-out; |
| } |
| .gradient-background { |
| background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); |
| } |
| .message-content pre { |
| background-color: #f6f8fa; |
| border-radius: 6px; |
| padding: 16px; |
| overflow-x: auto; |
| margin: 8px 0; |
| } |
| .message-content code { |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; |
| font-size: 0.9em; |
| } |
| .message-content p { |
| margin-bottom: 0.5rem; |
| } |
| .message-content ul, .message-content ol { |
| margin-left: 1.5rem; |
| margin-bottom: 0.5rem; |
| } |
| .message-content ul { |
| list-style-type: disc; |
| } |
| .message-content ol { |
| list-style-type: decimal; |
| } |
| .message-content a { |
| color: #2563eb; |
| text-decoration: underline; |
| } |
| .message-content table { |
| border-collapse: collapse; |
| margin: 8px 0; |
| width: 100%; |
| } |
| .message-content th, .message-content td { |
| border: 1px solid #e5e7eb; |
| padding: 8px; |
| text-align: left; |
| } |
| .message-content th { |
| background-color: #f9fafb; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <div class="text-center mb-8"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Mariam AI</h1> |
| <p class="text-gray-600">Votre assistant intelligent personnel</p> |
| </div> |
|
|
| |
| <div class="mb-6 p-4 bg-white rounded-lg shadow-md"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <label class="flex items-center space-x-2 cursor-pointer"> |
| <input type="checkbox" id="webSearchToggle" class="form-checkbox h-5 w-5 text-blue-600"> |
| <span class="text-gray-700">Activer la recherche web</span> |
| </label> |
| </div> |
| <div class="flex space-x-4"> |
| <button onclick="clearHistory()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition duration-200"> |
| <i class="fas fa-trash mr-2"></i>Effacer l'historique |
| </button> |
| <div class="relative"> |
| <input type="file" id="fileInput" class="hidden" accept="image/*,.pdf,.txt"> |
| <button onclick="document.getElementById('fileInput').click()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200"> |
| <i class="fas fa-upload mr-2"></i>Télécharger un fichier |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md h-[600px] flex flex-col"> |
| |
| <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4"> |
| |
| {% for message in chat_history %} |
| <div class="flex {{ 'justify-end' if message.role == 'user' else 'justify-start' }} message-transition"> |
| <div class="max-w-[70%] p-3 rounded-lg {{ 'bg-blue-500 text-white rounded-br-none' if message.role == 'user' else 'bg-gray-100 text-gray-800 rounded-bl-none' }}"> |
| {% if message.role == 'user' %} |
| {{ message.content }} |
| {% else %} |
| <div class="message-content prose"> |
| {{ message.content_html | safe }} |
| </div> |
| {% endif %} |
| </div> |
| </div> |
| {% endfor %} |
| </div> |
|
|
| |
| <div class="border-t p-4"> |
| <form id="chatForm" class="flex space-x-2"> |
| <input type="text" id="messageInput" class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500" placeholder="Posez votre question..."> |
| <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-200"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| let currentFile = null; |
| |
| |
| document.addEventListener('DOMContentLoaded', (event) => { |
| document.querySelectorAll('pre code').forEach((el) => { |
| hljs.highlightElement(el); |
| }); |
| }); |
| |
| |
| function highlightCode() { |
| document.querySelectorAll('pre code').forEach((el) => { |
| hljs.highlightElement(el); |
| }); |
| } |
| |
| document.getElementById('fileInput').addEventListener('change', async (e) => { |
| const file = e.target.files[0]; |
| if (!file) return; |
| |
| const formData = new FormData(); |
| formData.append('file', file); |
| |
| try { |
| const response = await fetch('/upload', { |
| method: 'POST', |
| body: formData |
| }); |
| const data = await response.json(); |
| |
| if (data.success) { |
| currentFile = data.filename; |
| alert('Fichier téléchargé avec succès !'); |
| } else { |
| alert('Erreur lors du téléchargement du fichier'); |
| } |
| } catch (error) { |
| console.error('Error:', error); |
| alert('Erreur lors du téléchargement du fichier'); |
| } |
| }); |
| |
| async function clearHistory() { |
| try { |
| const response = await fetch('/clear', { |
| method: 'POST' |
| }); |
| const data = await response.json(); |
| |
| if (data.success) { |
| document.getElementById('chatMessages').innerHTML = ''; |
| } |
| } catch (error) { |
| console.error('Error:', error); |
| alert('Erreur lors de la suppression de l\'historique'); |
| } |
| } |
| |
| document.getElementById('chatForm').addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const messageInput = document.getElementById('messageInput'); |
| const message = messageInput.value.trim(); |
| if (!message) return; |
| |
| |
| addMessage('user', message); |
| messageInput.value = ''; |
| |
| |
| addTypingIndicator(); |
| |
| try { |
| const response = await fetch('/chat', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| message: message, |
| web_search: document.getElementById('webSearchToggle').checked, |
| file: currentFile |
| }), |
| }); |
| |
| const data = await response.json(); |
| |
| |
| removeTypingIndicator(); |
| |
| if (data.error) { |
| addMessage('assistant', `Erreur: ${data.error}`); |
| } else { |
| addMessage('assistant', data.response, data.response_html); |
| highlightCode(); |
| } |
| |
| |
| currentFile = null; |
| } catch (error) { |
| removeTypingIndicator(); |
| addMessage('assistant', 'Désolé, une erreur est survenue.'); |
| } |
| }); |
| |
| function addMessage(role, content, contentHtml = null) { |
| const messagesContainer = document.getElementById('chatMessages'); |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'} message-transition`; |
| |
| const messageBubble = document.createElement('div'); |
| messageBubble.className = `max-w-[70%] p-3 rounded-lg ${ |
| role === 'user' |
| ? 'bg-blue-500 text-white rounded-br-none' |
| : 'bg-gray-100 text-gray-800 rounded-bl-none' |
| }`; |
| |
| if (role === 'user' || !contentHtml) { |
| messageBubble.textContent = content; |
| } else { |
| const contentWrapper = document.createElement('div'); |
| contentWrapper.className = 'message-content prose'; |
| contentWrapper.innerHTML = contentHtml; |
| messageBubble.appendChild(contentWrapper); |
| } |
| |
| messageDiv.appendChild(messageBubble); |
| messagesContainer.appendChild(messageDiv); |
| scrollToBottom(); |
| } |
| |
| function addTypingIndicator() { |
| const messagesContainer = document.getElementById('chatMessages'); |
| const indicatorDiv = document.createElement('div'); |
| indicatorDiv.id = 'typingIndicator'; |
| indicatorDiv.className = 'flex justify-start message-transition'; |
| indicatorDiv.innerHTML = ` |
| <div class="bg-gray-100 p-3 rounded-lg rounded-bl-none"> |
| <div class="flex space-x-2"> |
| <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div> |
| <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div> |
| <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div> |
| </div> |
| </div> |
| `; |
| messagesContainer.appendChild(indicatorDiv); |
| scrollToBottom(); |
| } |
| |
| function removeTypingIndicator() { |
| const indicator = document.getElementById('typingIndicator'); |
| if (indicator) { |
| indicator.remove(); |
| } |
| } |
| |
| function scrollToBottom() { |
| const messagesContainer = document.getElementById('chatMessages'); |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| } |
| |
| |
| document.addEventListener('keydown', (e) => { |
| |
| if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { |
| document.getElementById('chatForm').dispatchEvent(new Event('submit')); |
| } |
| }); |
| |
| |
| const messageInput = document.getElementById('messageInput'); |
| messageInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| |
| |
| scrollToBottom(); |
| </script> |
| </body> |
| </html> |
