Spaces:

Docfile
/

Chatm

Sleeping

App Files Files Community

Docfile commited on Apr 3, 2025

Commit

f87680f

verified ·

1 Parent(s): 86f1083

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +295 -159

templates/index.html CHANGED Viewed

@@ -1,174 +1,310 @@
-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
-});

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI! (Standalone)</title>
+    <!-- Chargement de Tailwind CSS via CDN avec le plugin Forms -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+    <!-- Favicon (Optionnel) -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
+    <style>
+        /* Styles de base pour assurer la hauteur complète et le défilement */
+        html, body { height: 100%; margin: 0; padding: 0; }
+        body { display: flex; flex-direction: column; font-family: Inter, sans-serif; /* Police sympa via CDN implicite de Tailwind */ }
+        #chat-container { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; } /* Crucial pour le scroll */
+        #chat-messages { flex-grow: 1; overflow-y: auto; min-height: 0; } /* Crucial pour le scroll */
+        /* Style pour la scrollbar (optionnel) */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
+        ::-webkit-scrollbar-thumb { background: #a8a8a8; border-radius: 10px; }
+        ::-webkit-scrollbar-thumb:hover { background: #7a7a7a; }
+         /* Amélioration légère du rendu Markdown par défaut */
+         .prose code { background-color: #e5e7eb; padding: 0.2em 0.4em; font-size: 85%; border-radius: 3px; }
+         .prose pre > code { background-color: transparent; padding: 0; font-size: inherit; border-radius: 0; }
+         .prose pre { background-color: #f3f4f6; padding: 1em; border-radius: 6px; overflow-x: auto; }
+         .prose blockquote { border-left-color: #9ca3af; }
+    </style>
+</head>
+<body class="bg-gray-100 flex flex-col h-screen">
+    <!-- En-tête -->
+    <header class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-4 shadow-md flex justify-between items-center sticky top-0 z-10 flex-shrink-0">
+        <h1 class="text-2xl font-bold">Mariam AI!</h1>
+        <!-- Note: Le bouton clear fonctionne si le backend Flask a la route /clear -->
+        <form action="/clear" method="POST" id="clear-form">
+             <button type="submit" class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1 px-3 rounded-full transition duration-200">
+                Effacer Chat
+             </button>
+        </form>
+    </header>
+    <!-- Conteneur Principal du Chat -->
+    <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
+        <!-- Zone d'affichage des messages -->
+        <div id="chat-messages" class="flex-grow overflow-y-auto p-6 space-y-4 scroll-smooth">
+            <!-- Les messages seront ajoutés ici par JavaScript -->
+            <!-- Message initial pour accueillir -->
+             <div class="flex justify-start">
+                <div class="bg-gray-200 text-gray-800 p-3 rounded-lg rounded-bl-none max-w-xs md:max-w-md shadow">
+                    <div class="prose prose-sm max-w-none">Bonjour ! Comment puis-je vous aider aujourd'hui ?</div>
+                </div>
+            </div>
+            <!-- Indicateur de chargement (caché par défaut) -->
+            <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
+                <div class="flex justify-center items-center space-x-2">
+                    <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
+                    <span>Mariam réfléchit...</span>
+                </div>
+            </div>
+        </div>
+        <!-- Zone d'erreur (cachée par défaut) -->
+        <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-2 rounded m-4" role="alert" style="display: none;">
+             <p class="font-bold">Erreur</p>
+             <p id="error-text">Le message d'erreur ira ici.</p>
+        </div>
+         <!-- Barre d'options et d'upload -->
+        <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
+             <div class="flex items-center justify-between text-sm">
+                <label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none">
+                    <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0">
+                    <span>Recherche Web</span>
+                </label>
+                <div class="flex items-center space-x-2">
+                    <label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center">
+                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                         </svg>
+                        <span>Fichier</span>
+                        <input type="file" id="file_upload" name="file" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt">
+                    </label>
+                     <span id="file-name" class="text-gray-500 text-xs truncate max-w-[100px]" title=""></span> {# Pour afficher le nom du fichier #}
+                </div>
+            </div>
+        </div>
+        <!-- Formulaire d'entrée -->
+        <form id="chat-form" class="bg-gray-100 p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
+            <div class="flex items-center space-x-3">
+                <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm" placeholder="Posez votre question à Mariam..." autocomplete="off">
+                <button type="submit" id="send-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0">
+                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                       <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+                     </svg>
+                </button>
+            </div>
+        </form>
+    </div>
+    <!-- Script pour l'interaction -->
+    <script>
+    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 errorTextP = document.getElementById('error-text');
+        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');
+        const clearForm = document.getElementById('clear-form'); // Référence au formulaire clear
+        // URL de l'API Backend (ASSUREZ-VOUS QUE CELA CORRESPOND À VOTRE BACKEND FLASK)
+        const API_ENDPOINT = '/api/chat'; // Ou l'URL complète si nécessaire
+        const CLEAR_ENDPOINT = '/clear'; // Endpoint pour effacer
+        // --- Fonctions Utilitaires ---
+        function scrollToBottom() {
+            setTimeout(() => {
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }, 50);
         }
+        function showLoading(show) {
+            loadingIndicator.style.display = show ? 'block' : 'none';
+            sendButton.disabled = show;
+            promptInput.disabled = show;
+            sendButton.classList.toggle('opacity-50', show);
+            sendButton.classList.toggle('cursor-not-allowed', show);
+             if (show) {
+                // Déplacer l'indicateur de chargement à la fin de la liste des messages
+                 chatMessages.appendChild(loadingIndicator);
+                scrollToBottom(); // Assure que l'indicateur est visible
+             }
         }
+        function displayError(message) {
+            errorTextP.textContent = message;
+            errorMessageDiv.style.display = 'block';
+            // Remonter pour que l'erreur soit visible
+            errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            // Optionnel: Cacher après un délai
+            // setTimeout(() => { errorMessageDiv.style.display = 'none'; }, 8000);
+        }
+        function addMessageToChat(role, text, isHtml = false) {
+            // Cacher l'erreur si elle était affichée
+            errorMessageDiv.style.display = 'none';
+            const messageWrapper = document.createElement('div');
+            messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4'); // Ajout mb-4
+            const bubbleDiv = document.createElement('div');
+            bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-xs', 'sm:max-w-md', 'md:max-w-lg', 'shadow-md'); // Augmenté max-w
+            if (role === 'user') {
+                bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
+                const paragraph = document.createElement('p');
+                paragraph.classList.add('text-sm', 'break-words'); // Permet la césure
+                paragraph.textContent = text; // Toujours utiliser textContent pour l'input utilisateur
+                bubbleDiv.appendChild(paragraph);
+            } else { // Assistant
+                bubbleDiv.classList.add('bg-gray-200', 'text-gray-800', 'rounded-bl-none');
+                const proseDiv = document.createElement('div');
+                // Ajout de classes prose pour le formatage markdown potentiel
+                proseDiv.classList.add('prose', 'prose-sm', 'max-w-none', 'text-gray-800',
+                                       'prose-headings:text-gray-800', 'prose-a:text-blue-600',
+                                       'prose-strong:text-gray-800', 'prose-code:text-red-600',
+                                       'prose-blockquote:text-gray-600', 'break-words'); // Césure aussi
+                if (isHtml) {
+                    // ATTENTION: Suppose que `text` est du HTML SÛR venant du backend
+                    proseDiv.innerHTML = text;
+                } else {
+                    proseDiv.textContent = text;
+                }
+                bubbleDiv.appendChild(proseDiv);
             }
+            messageWrapper.appendChild(bubbleDiv);
+            // Insérer avant l'indicateur de chargement pour qu'il reste en bas
+            chatMessages.insertBefore(messageWrapper, loadingIndicator);
+            scrollToBottom();
         }
+        // --- Gestionnaires d'événements ---
+        fileUpload.addEventListener('change', () => {
+            if (fileUpload.files.length > 0) {
+                const name = fileUpload.files[0].name;
+                fileNameSpan.textContent = name.length > 15 ? name.substring(0, 12) + '...' : name; // Tronquer si trop long
+                fileNameSpan.title = name; // Titre complet au survol
+            } else {
+                fileNameSpan.textContent = '';
+                fileNameSpan.title = '';
+            }
+        });
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            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;
+            }
+            errorMessageDiv.style.display = 'none'; // Cacher ancienne erreur
+            // Construire et afficher le message utilisateur
+            let userMessageText = prompt;
+            if (file) {
+                 // Précéder le prompt du nom de fichier pour clarté dans l'UI
+                 userMessageText = `[${file.name}] ${prompt}`;
+             }
+            // N'afficher que s'il y a du texte ou un fichier
+            if (userMessageText || file) {
+                 addMessageToChat('user', userMessageText || `[${file.name}]`); // Afficher nom fichier si prompt vide
+            }
+            const formData = new FormData();
+            // Ajouter le prompt même s'il est vide si un fichier est présent
+            formData.append('prompt', prompt);
+            formData.append('web_search', useWebSearch);
+            if (file) {
+                formData.append('file', file);
+            }
+            showLoading(true);
+            promptInput.value = ''; // Vider input texte
+            fileUpload.value = ''; // Important pour pouvoir re-sélectionner le même fichier
+            fileNameSpan.textContent = ''; // Vider nom fichier affiché
+            fileNameSpan.title = '';
+            try {
+                const response = await fetch(API_ENDPOINT, {
+                    method: 'POST',
+                    body: formData,
+                });
+                const data = await response.json(); // Toujours essayer de lire le JSON
+                if (!response.ok) {
+                     // Utiliser le message d'erreur du JSON si disponible
+                    throw new Error(data.error || `Erreur serveur: ${response.status}`);
+                }
+                if (data.success && data.message) {
+                    // Assumer que data.message est du HTML sûr venant du backend
+                    addMessageToChat('assistant', data.message, true); // true indique que c'est du HTML
+                } else {
+                    // Si success est true mais pas de message (peu probable) ou success est false
+                    throw new Error(data.error || "Réponse invalide du serveur.");
+                }
+            } catch (error) {
+                console.error("Erreur lors de l'envoi:", error);
+                displayError(error.message || "Une erreur de connexion est survenue.");
+            } finally {
+                showLoading(false);
+                promptInput.focus();
+            }
+        });
+         // Optionnel : gestion du "clear" via JS pour éviter rechargement complet
+         clearForm.addEventListener('submit', async (e) => {
+             e.preventDefault(); // Empêche la soumission classique
+             if (confirm("Voulez-vous vraiment effacer la conversation ?")) {
+                 try {
+                     const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
+                     if (response.ok) {
+                         // Effacer les messages côté client
+                         chatMessages.innerHTML = ''; // Vide la zone de chat
+                          // Remettre le message d'accueil
+                          addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
+                         // Vider aussi l'erreur potentielle
+                         errorMessageDiv.style.display = 'none';
+                         console.log("Chat effacé côté serveur.");
+                     } else {
+                         throw new Error("Impossible d'effacer côté serveur.");
+                     }
+                 } catch (error) {
+                     console.error("Erreur lors de l'effacement:", error);
+                     displayError("Erreur lors de l'effacement du chat.");
+                 }
+             }
+         });
+        // Scroll initial et focus
+        scrollToBottom();
+        promptInput.focus();
     });
+    </script>
+</body>
+</html>