Chatm2

Sleeping

App Files Files Community

Docfile commited on Aug 27

Commit

d8d4f9e

verified ·

1 Parent(s): b4c693d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +156 -51

templates/index.html CHANGED Viewed

@@ -13,12 +13,10 @@
         }
         html {
-            /* Permet un défilement plus doux */
             scroll-behavior: smooth;
         }
         body {
-            /* Police système : performante et native */
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             background-color: #121212; /* Fond sombre principal */
             color: #f1f1f1; /* Couleur de texte par défaut */
@@ -158,6 +156,8 @@
             align-self: flex-start;
             border-bottom-left-radius: 4px;
         }
         .thoughts {
             background: #252525;
@@ -314,7 +314,6 @@
                 border: 1px solid #333;
             }
         }
     </style>
 </head>
 <body>
@@ -337,9 +336,16 @@
         </div>
         <div class="messages" id="messages">
-            <div class="message assistant">
-                <div>👋 Bonjour ! Ceci est une interface de chat au design plat et minimaliste.</div>
-                <div style="margin-top: 10px;">Posez-moi une question pour commencer.</div>
             </div>
         </div>
@@ -376,14 +382,14 @@
         </div>
     </div>
-    <!-- Le JavaScript est identique à votre version originale -->
     <script>
         let currentFile = null;
         let conversationId = 'session_' + Date.now();
         function autoResize(textarea) {
             textarea.style.height = 'auto';
-            textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px'; // Augmentation de la hauteur max
         }
         function handleKeyDown(event) {
@@ -401,20 +407,28 @@
             const formData = new FormData();
             formData.append('file', file);
-            // Simule l'upload pour l'exemple
-            // Remplacez cette partie par votre logique d'upload réelle si nécessaire
-            try {
-                currentFile = { success: true, filename: file.name, path: 'simulated/path/' + file.name };
-                filePreview.innerHTML = `
-                    <div style="display: flex; justify-content: space-between; align-items: center;">
-                        <span>📎 ${currentFile.filename}</span>
-                        <button onclick="removeFile()" style="background: #555; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">✕</button>
-                    </div>
-                `;
-                filePreview.style.display = 'block';
-            } catch (error) {
-                 showError('Erreur lors de la sélection du fichier: ' + error.message);
-            }
         }
         function removeFile() {
@@ -445,28 +459,91 @@
             autoResize(messageInput);
             const thinkingEnabled = document.getElementById('thinkingToggle').checked;
-            // --- SIMULATION DE RÉPONSE DE L'IA ---
-            // Remplacez cette simulation par votre appel fetch réel
-            setTimeout(() => {
-                typingIndicator.style.display = 'none';
-                if (thinkingEnabled) {
-                    const thoughtsElement = addThoughts('');
-                    thoughtsElement.innerHTML = `
-                        <div class="thoughts-header">🧠 Réflexion de l'assistant:</div>
-                        <div>L'utilisateur a demandé une réponse. Je vais formater ma réponse en utilisant du markdown simple. Le fichier ${currentFile ? `"${currentFile.filename}"` : ''} a été mentionné. Je vais construire une réponse cohérente.</div>
-                    `;
                 }
-                addMessage('assistant', `Ceci est une réponse simulée à votre message : "${message}". ${currentFile ? `Vous avez également joint le fichier : **${currentFile.filename}**.` : ''}`);
                 messageInput.disabled = false;
                 sendButton.disabled = false;
                 messageInput.focus();
-                removeFile();
-            }, 2000);
-            // --- FIN DE LA SIMULATION ---
         }
         function addMessage(role, content) {
@@ -483,23 +560,37 @@
             const messagesContainer = document.getElementById('messages');
             const thoughtsDiv = document.createElement('div');
             thoughtsDiv.className = 'thoughts';
-            thoughtsDiv.innerHTML = content; // Le contenu est déjà du HTML
             messagesContainer.appendChild(thoughtsDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
             return thoughtsDiv;
         }
         function formatMessage(content) {
-             // Sécurise le contenu pour éviter l'injection de HTML
-            const escapedContent = content.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-            return escapedContent
                 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                 .replace(/\*(.*?)\*/g, '<em>$1</em>')
                 .replace(/`(.*?)`/g, '<code style="background: #444; padding: 2px 5px; border-radius: 4px; font-family: monospace;">$1</code>')
                 .replace(/\n/g, '<br>');
         }
         function showError(message) {
             const messagesContainer = document.getElementById('messages');
             const errorDiv = document.createElement('div');
@@ -511,13 +602,27 @@
         function resetConversation() {
             if (confirm('Êtes-vous sûr de vouloir réinitialiser la conversation ?')) {
-                document.getElementById('messages').innerHTML = `
-                    <div class="message assistant">
-                        <div>👋 Conversation réinitialisée ! Comment puis-je vous aider ?</div>
-                    </div>
-                `;
-                conversationId = 'session_' + Date.now();
-                removeFile();
             }
         }

         }
         html {
             scroll-behavior: smooth;
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             background-color: #121212; /* Fond sombre principal */
             color: #f1f1f1; /* Couleur de texte par défaut */
             align-self: flex-start;
             border-bottom-left-radius: 4px;
         }
+        .message ul { margin-top: 10px; padding-left: 20px; }
         .thoughts {
             background: #252525;
                 border: 1px solid #333;
             }
         }
     </style>
 </head>
 <body>
         </div>
         <div class="messages" id="messages">
+             <div class="message assistant">
+                <div>👋 Bonjour ! Je suis votre assistant IA Gemini. Je peux :</div>
+                <ul>
+                    <li>💻 Exécuter du code Python</li>
+                    <li>🔍 Rechercher des informations sur Google</li>
+                    <li>📄 Analyser vos fichiers (images, PDF, vidéos, texte)</li>
+                    <li>🧠 Utiliser le mode "thinking" pour des raisonnements complexes</li>
+                    <li>🌐 Accéder au contenu d'URLs</li>
+                </ul>
+                <div style="margin-top: 10px;">Comment puis-je vous aider aujourd'hui ?</div>
             </div>
         </div>
         </div>
     </div>
+    <!-- SCRIPT ORIGINAL ET FONCTIONNEL -->
     <script>
         let currentFile = null;
         let conversationId = 'session_' + Date.now();
         function autoResize(textarea) {
             textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
         }
         function handleKeyDown(event) {
             const formData = new FormData();
             formData.append('file', file);
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    currentFile = data;
+                    filePreview.innerHTML = `
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <span>📎 ${data.filename}</span>
+                            <button onclick="removeFile()" style="background: #555; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">✕</button>
+                        </div>
+                    `;
+                    filePreview.style.display = 'block';
+                } else {
+                    showError('Erreur lors du téléchargement: ' + data.error);
+                }
+            })
+            .catch(error => {
+                showError('Erreur lors du téléchargement: ' + error.message);
+            });
         }
         function removeFile() {
             autoResize(messageInput);
             const thinkingEnabled = document.getElementById('thinkingToggle').checked;
+            const endpoint = currentFile ? '/chat_with_file' : '/chat';
+            const payload = {
+                message: message || 'Analyse ce fichier',
+                thinking_enabled: thinkingEnabled,
+                conversation_id: conversationId
+            };
+            if (currentFile) {
+                payload.file_data = currentFile;
+            }
+            fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Erreur réseau: ${response.status} ${response.statusText}`);
                 }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let buffer = '';
+                let messageElement = null;
+                let thoughtsElement = null;
+                function processStream() {
+                    return reader.read().then(({ done, value }) => {
+                        if (done) {
+                            // La fin du stream est gérée par le message 'end'
+                            return;
+                        }
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop() || '';
+                        for (const line of lines) {
+                            if (line.startsWith('data: ')) {
+                                try {
+                                    const data = JSON.parse(line.substring(6));
+                                    if (data.type === 'text') {
+                                        if (!messageElement) {
+                                            messageElement = addMessage('assistant', '');
+                                        }
+                                        messageElement.innerHTML += formatChunk(data.content);
+                                    } else if (data.type === 'thought' && thinkingEnabled) {
+                                        if (!thoughtsElement) {
+                                            thoughtsElement = addThoughts('');
+                                            thoughtsElement.innerHTML = `<div class="thoughts-header">🧠 Réflexion de l'assistant:</div><div class="thought-content"></div>`;
+                                        }
+                                        thoughtsElement.querySelector('.thought-content').innerHTML += formatChunk(data.content);
+                                    } else if (data.type === 'error') {
+                                        showError(data.content);
+                                    } else if (data.type === 'end') {
+                                        typingIndicator.style.display = 'none';
+                                        messageInput.disabled = false;
+                                        sendButton.disabled = false;
+                                        messageInput.focus();
+                                        removeFile();
+                                        return; // Fin du traitement du stream
+                                    }
+                                    // Scroll vers le bas à chaque nouveau chunk
+                                    const messagesContainer = document.getElementById('messages');
+                                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                                } catch (e) {
+                                    console.error('Erreur parsing JSON:', e, "Ligne reçue:", line);
+                                }
+                            }
+                        }
+                        return processStream();
+                    });
+                }
+                return processStream();
+            })
+            .catch(error => {
+                typingIndicator.style.display = 'none';
                 messageInput.disabled = false;
                 sendButton.disabled = false;
+                showError('Erreur: ' + error.message);
                 messageInput.focus();
+            });
         }
         function addMessage(role, content) {
             const messagesContainer = document.getElementById('messages');
             const thoughtsDiv = document.createElement('div');
             thoughtsDiv.className = 'thoughts';
+            thoughtsDiv.innerHTML = content;
             messagesContainer.appendChild(thoughtsDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
             return thoughtsDiv;
         }
+        function escapeHtml(unsafe) {
+            return unsafe
+                 .replace(/&/g, "&amp;")
+                 .replace(/</g, "&lt;")
+                 .replace(/>/g, "&gt;")
+                 .replace(/"/g, "&quot;")
+                 .replace(/'/g, "&#039;");
+        }
+        function formatChunk(chunk) {
+            // Pour le streaming, on échappe le HTML et on remplace juste les sauts de ligne
+            return escapeHtml(chunk).replace(/\n/g, '<br>');
+        }
         function formatMessage(content) {
+            // Cette fonction est utilisée pour le message initial de l'utilisateur
+            // Elle peut gérer plus de markdown car elle traite le message en une seule fois
+            return escapeHtml(content)
                 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                 .replace(/\*(.*?)\*/g, '<em>$1</em>')
                 .replace(/`(.*?)`/g, '<code style="background: #444; padding: 2px 5px; border-radius: 4px; font-family: monospace;">$1</code>')
                 .replace(/\n/g, '<br>');
         }
         function showError(message) {
             const messagesContainer = document.getElementById('messages');
             const errorDiv = document.createElement('div');
         function resetConversation() {
             if (confirm('Êtes-vous sûr de vouloir réinitialiser la conversation ?')) {
+                fetch('/reset_conversation', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ conversation_id: conversationId })
+                })
+                .then(response => {
+                    if (response.ok) {
+                        document.getElementById('messages').innerHTML = `
+                            <div class="message assistant">
+                                <div>👋 Conversation réinitialisée ! Comment puis-je vous aider ?</div>
+                            </div>
+                        `;
+                        conversationId = 'session_' + Date.now();
+                        removeFile();
+                    } else {
+                        showError('La réinitialisation a échoué.');
+                    }
+                })
+                .catch(error => {
+                    showError('Erreur lors de la réinitialisation: ' + error.message);
+                });
             }
         }