Spaces:

Docfile
/

Chatm

Sleeping

App Files Files Community

Docfile commited on Apr 3

Commit

25ac863

verified ·

1 Parent(s): 60b2cb1

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +164 -141

templates/index.html CHANGED Viewed

@@ -1,151 +1,174 @@
-<!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>
-    <!-- Tailwind CSS via CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        /* Style personnalisé pour la barre de défilement (optionnel) */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-        /* Empêche le FOUC (Flash of Unstyled Content) */
-        [x-cloak] { display: none !important; }
-    </style>
-    <!-- Alpine.js pour une interactivité simple (optionnel mais utile) -->
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-</head>
-<body class="bg-gray-100 flex items-center justify-center min-h-screen" x-data="{ processing: {{ 'true' if processing_message else 'false' }} }">
-<div class="chat-container bg-white rounded-lg shadow-xl w-full max-w-3xl h-[90vh] flex flex-col" x-cloak>
-    <!-- En-tête -->
-    <div class="chat-header bg-gradient-to-r from-emerald-500 to-teal-600 text-white p-4 rounded-t-lg flex justify-between items-center">
-        <h1 class="text-xl font-semibold">Mariam AI!</h1>
-        <!-- Bouton pour effacer (optionnel mais utile) -->
-        <form action="{{ url_for('clear_chat') }}" method="post" onsubmit="return confirm('Voulez-vous vraiment effacer la conversation ?');">
-             <button type="submit" title="Effacer la conversation" class="text-white hover:text-red-300 transition duration-150">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12.576 0a48.108 48.108 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                </svg>
-            </button>
-        </form>
-    </div>
-    <!-- Zone des messages -->
-    <div class="chat-messages flex-grow overflow-y-auto p-4 md:p-6 space-y-4" id="chat-messages">
-        {% for message in chat_history %}
-            <div class="message flex {% if message.role == 'user' %}justify-end{% else %}justify-start{% endif %}">
-                <div class="max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 rounded-lg shadow {% if message.role == 'user' %}bg-emerald-500 text-white rounded-br-none{% else %}bg-gray-200 text-gray-800 rounded-bl-none{% endif %}">
-                    <p class="text-sm break-words whitespace-pre-wrap">{{ message.text }}</p>
-                </div>
-            </div>
-        {% endfor %}
-        <!-- Indicateur de chargement -->
-        <div x-show="processing" class="flex justify-center items-center py-4">
-            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-emerald-500"></div>
-            <span class="ml-2 text-gray-500 italic">
-                {% if session.get('processing_web_search') %}
-                Recherche web et génération en cours...
-                {% else %}
-                Génération de la réponse...
-                {% endif %}
-            </span>
-        </div>
-    </div>
-    <!-- Affichage des erreurs -->
-    {% if error %}
-    <div class="error-message bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded-md mx-4 mb-2 text-sm">
-        <strong>Erreur :</strong> {{ error }}
-    </div>
-    {% endif %}
-    <!-- Zone de saisie et options -->
-    <div class="chat-input-area border-t border-gray-200 p-4 bg-gray-50 rounded-b-lg">
-        <form method="POST" action="{{ url_for('chat') }}" enctype="multipart/form-data" id="chat-form" @submit="processing = true">
-            <!-- Options : Recherche Web & Upload -->
-            <div class="options flex flex-col sm:flex-row justify-between items-center mb-3 gap-3 text-sm text-gray-600">
-                 <label for="web_search_toggle" class="flex items-center cursor-pointer">
-                    <input type="checkbox" id="web_search_toggle" name="web_search" value="true" {% if web_search_active %}checked{% endif %} class="mr-2 h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
-                    Activer la recherche web
-                </label>
-                <label for="file_upload" class="flex items-center cursor-pointer bg-white border border-gray-300 rounded-md px-3 py-1 hover:bg-gray-50 transition duration-150">
-                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2 text-gray-500">
-                       <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.122 2.122l7.81-7.81" />
-                     </svg>
-                    <span id="file-label-text">Joindre un fichier</span> (.jpg, .png, .pdf, .txt)
-                    <input type="file" id="file_upload" name="file" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt" onchange="updateFileLabel(this)">
-                </label>
-            </div>
-            <!-- Champ de saisie et bouton envoyer -->
-            <div class="flex items-center gap-2">
-                <input type="text" name="prompt" id="prompt-input" placeholder="Posez votre question à Mariam..." required autofocus
-                       class="flex-grow p-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition duration-150"
-                       :disabled="processing"> <!-- Désactivé pendant le traitement -->
-                <button type="submit" id="send-button"
-                        class="bg-emerald-500 hover:bg-emerald-600 text-white rounded-full p-3 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-1 transition duration-150 disabled:opacity-50 disabled:cursor-not-allowed"
-                        :disabled="processing"> <!-- Désactivé pendant le traitement -->
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
-                    </svg>
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
-<script>
-    // Fonction pour faire défiler vers le bas
     function scrollToBottom() {
-        const chatMessages = document.getElementById('chat-messages');
-        chatMessages.scrollTop = chatMessages.scrollHeight;
     }
-    // Fonction pour mettre à jour le label du fichier
-    function updateFileLabel(input) {
-        const fileLabel = document.getElementById('file-label-text');
-        if (input.files && input.files.length > 0) {
-            fileLabel.textContent = input.files[0].name;
-        } else {
-            fileLabel.textContent = 'Joindre un fichier';
-        }
     }
-    // Faire défiler vers le bas au chargement initial
-    window.addEventListener('load', scrollToBottom);
-    // Optionnel : Faire défiler après un léger délai pour s'assurer que tout est rendu (peut aider sur certains navigateurs)
-    setTimeout(scrollToBottom, 100);
-    // Optionnel : Si vous vouliez effacer le champ après envoi (ne fonctionne pas bien avec le rechargement de page standard)
-    /*
-    const chatForm = document.getElementById('chat-form');
-    const promptInput = document.getElementById('prompt-input');
-    chatForm.addEventListener('submit', function() {
-        // Déjà géré par Alpine.js : document.getElementById('send-button').disabled = true;
-        // Peut causer des problèmes si la soumission échoue avant le rechargement
-        // setTimeout(() => { promptInput.value = ''; }, 50);
     });
-    */
-</script>
-</body>
-</html>

+document.addEventListener('DOMContentLoaded', () => {
+    const chatForm = document.getElementById('chat-form');
+    const promptInput = document.getElementById('prompt');
+    const chatMessages = document.getElementById('chat-messages');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const errorMessageDiv = document.getElementById('error-message');
+    const webSearchToggle = document.getElementById('web_search_toggle');
+    const fileUpload = document.getElementById('file_upload');
+    const fileNameSpan = document.getElementById('file-name');
+    const sendButton = document.getElementById('send-button');
+    // --- Fonctions Utilitaires ---
     function scrollToBottom() {
+        // Ajoute un léger délai pour laisser le temps au DOM de se mettre à jour
+        setTimeout(() => {
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }, 50);
     }
+    function showLoading(show) {
+        loadingIndicator.style.display = show ? 'block' : 'none';
+        sendButton.disabled = show;
+         promptInput.disabled = show;
+        // Optionnel: changer l'apparence du bouton pendant le chargement
+        sendButton.classList.toggle('opacity-50', show);
+         sendButton.classList.toggle('cursor-not-allowed', show);
     }
+    function displayError(message) {
+        errorMessageDiv.textContent = message;
+        errorMessageDiv.style.display = 'block';
+        // Cache le message après quelques secondes
+        setTimeout(() => {
+            errorMessageDiv.style.display = 'none';
+        }, 5000);
+    }
+    function addMessageToChat(role, text) {
+         // Assainir le texte avant de l'insérer (très basique, pour éviter XSS simple)
+        // Pour du Markdown, une bibliothèque comme 'marked' ou 'showdown' serait nécessaire côté client
+        // ou s'assurer que le backend renvoie du HTML sûr.
+        // Ici, on suppose que le backend renvoie du texte simple ou du HTML déjà aseptisé avec | safe
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start');
+        const bubbleDiv = document.createElement('div');
+         bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-xs', 'md:max-w-md', 'shadow');
+         if (role === 'user') {
+             bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
+         } else {
+             // Pour l'assistant, créer une div interne pour le formatage prose si nécessaire
+            bubbleDiv.classList.add('bg-gray-200', 'text-gray-800', 'rounded-bl-none');
+             const proseDiv = document.createElement('div');
+             proseDiv.classList.add('prose', 'prose-sm', 'max-w-none');
+             // IMPORTANT: Si le backend renvoie du HTML, il DOIT être sûr.
+             // Sinon, utiliser textContent pour éviter l'injection de script.
+             proseDiv.innerHTML = text; // Suppose que le HTML reçu est sûr (ex: via Markdown rendu côté serveur)
+             // Si juste du texte : proseDiv.textContent = text;
+             bubbleDiv.appendChild(proseDiv);
+         }
+         // Si c'est un message utilisateur simple (pas de HTML)
+         if(role === 'user'){
+             const paragraph = document.createElement('p');
+             paragraph.classList.add('text-sm');
+             paragraph.textContent = text; // Utiliser textContent pour la sécurité
+             bubbleDiv.appendChild(paragraph);
+         }
+        messageDiv.appendChild(bubbleDiv);
+        chatMessages.appendChild(messageDiv);
+        // Insérer l'indicateur *après* le dernier message pour qu'il soit en bas
+        chatMessages.appendChild(loadingIndicator);
+        scrollToBottom();
+    }
+    // --- Gestionnaires d'événements ---
+    // Afficher le nom du fichier sélectionné
+    fileUpload.addEventListener('change', () => {
+        if (fileUpload.files.length > 0) {
+            fileNameSpan.textContent = fileUpload.files[0].name;
+            fileNameSpan.title = fileUpload.files[0].name; // Pour le nom complet au survol
+        } else {
+            fileNameSpan.textContent = '';
+             fileNameSpan.title = '';
+        }
     });
+    // Soumission du formulaire via Fetch API
+    chatForm.addEventListener('submit', async (e) => {
+        e.preventDefault(); // Empêche le rechargement de la page
+        const prompt = promptInput.value.trim();
+        const file = fileUpload.files[0];
+        const useWebSearch = webSearchToggle.checked;
+        if (!prompt && !file) {
+            displayError("Veuillez entrer un message ou sélectionner un fichier.");
+            return;
+        }
+        // Cacher les erreurs précédentes
+        errorMessageDiv.style.display = 'none';
+        // Afficher le message utilisateur immédiatement
+         let userMessageText = prompt;
+         if (file) {
+             userMessageText = `[Fichier: ${file.name}]\n\n${prompt}`;
+         }
+        addMessageToChat('user', userMessageText);
+        // Préparer les données du formulaire pour l'envoi (y compris le fichier)
+        const formData = new FormData();
+        formData.append('prompt', prompt);
+        formData.append('web_search', useWebSearch);
+        if (file) {
+            formData.append('file', file);
+        }
+        // Afficher le chargement et désactiver les entrées
+        showLoading(true);
+        promptInput.value = ''; // Vider l'input après l'envoi
+        fileUpload.value = ''; // Réinitialiser l'input fichier
+        fileNameSpan.textContent = ''; // Vider le nom du fichier affiché
+        try {
+            const response = await fetch("{{ url_for('chat_api') }}", { // Appel vers la nouvelle route API
+                method: 'POST',
+                body: formData, // Pas besoin de 'Content-Type', le navigateur le définit pour FormData
+            });
+            if (!response.ok) {
+                // Essayer de lire l'erreur JSON si possible
+                let errorMsg = `Erreur HTTP: ${response.status}`;
+                 try {
+                    const errorData = await response.json();
+                    errorMsg = errorData.error || errorMsg;
+                 } catch (jsonError) {
+                     // Ignorer si la réponse n'est pas du JSON
+                 }
+                throw new Error(errorMsg);
+            }
+            const data = await response.json();
+            if (data.success && data.message) {
+                 // IMPORTANT: S'assurer que data.message est du HTML sûr ou l'assainir ici
+                addMessageToChat('assistant', data.message);
+            } else if (data.error) {
+                displayError(data.error);
+                 // Optionnel: supprimer le message utilisateur si l'IA n'a pas pu répondre
+                 // (peut être déroutant pour l'utilisateur)
+            }
+        } catch (error) {
+            console.error("Erreur lors de l'envoi du message:", error);
+            displayError(error.message || "Une erreur inconnue est survenue.");
+             // Optionnel: supprimer le message utilisateur en cas d'erreur réseau grave
+        } finally {
+            // Cacher le chargement et réactiver les entrées
+            showLoading(false);
+            promptInput.focus(); // Remettre le focus sur l'input
+        }
+    });
+    // Scroll initial vers le bas au chargement de la page
+    scrollToBottom();
+    promptInput.focus(); // Focus sur l'input au chargement
+});