jojdgldsopp

app.py

@@ -174,6 +174,25 @@ def chat():
                     return
 
                 print(f"Démarrage du streaming pour conversation {conversation_id}")
+
+                # TEST: Simulation de réponse pour debug
+                import time
+                test_response = "Bonjour ! Je suis Mariam, votre assistant IA. Comment puis-je vous aider aujourd'hui ?"
+                for i, char in enumerate(test_response):
+                    yield f"data: {json.dumps({'type': 'text', 'content': char})}\n\n"
+                    time.sleep(0.01)  # Petit délai pour simuler le streaming
+
+                print(f"Test streaming terminé, réponse complète: {len(test_response)} caractères")
+
+                # Ajouter la réponse de l'assistant à l'historique
+                add_message_to_history(conversation_id, 'assistant', test_response)
+
+                # Signal de fin
+                yield f"data: {json.dumps({'type': 'end'})}\n\n"
+
+                return
+
+                # CODE ORIGINAL COMMENTÉ POUR TEST
                 response_stream = chat.send_message_stream(
                     message,
                     config=generation_config
@@ -206,8 +225,13 @@ def chat():
             except Exception as e:
                 print(f"ERREUR lors du streaming: {e}")
                 yield f"data: {json.dumps({'type': 'error', 'content': f'Erreur API: {str(e)}'})}\n\n"
-        
-        return Response(generate(), mimetype='text/plain')
+
+        return Response(generate(), mimetype='text/event-stream', headers={
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive',
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        })
         
     except Exception as e:
         return jsonify({'error': str(e)}), 500
@@ -336,8 +360,13 @@ def chat_with_file():
             except Exception as e:
                 print(f"ERREUR lors du streaming avec fichiers: {e}")
                 yield f"data: {json.dumps({'type': 'error', 'content': f'Erreur API avec fichiers: {str(e)}'})}\n\n"
-        
-        return Response(generate(), mimetype='text/plain')
+
+        return Response(generate(), mimetype='text/event-stream', headers={
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive',
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        })
         
     except Exception as e:
         return jsonify({'error': str(e)}), 500

templates/index.html

@@ -27,7 +27,7 @@
     <style>
         /* Configuration Marked pour le markdown */
         .markdown-content {
-            @apply text-dark-text leading-relaxed;
+            @apply text-white leading-relaxed; /* Changé temporairement pour debug */
         }
         .markdown-content h1, .markdown-content h2, .markdown-content h3 {
             @apply font-bold mb-2 mt-4;
@@ -311,16 +311,29 @@
                             if (line.startsWith('data: ')) {
                                 try {
                                     const data = JSON.parse(line.substring(6));
-                                    
+                                    console.log('Received data:', data);
+
                                     if (data.type === 'text') {
+                                        console.log('Processing text:', data.content);
                                         messageContent += data.content;
                                         if (!messageElement) {
                                             messageElement = addMessage('assistant', '');
+                                            console.log('Created message element:', messageElement);
                                         }
                                         // Rendu markdown en temps réel
                                         const markdownHtml = marked.parse(messageContent);
-                                        messageElement.querySelector('.markdown-content').innerHTML = markdownHtml;
+                                        const markdownElement = messageElement.querySelector('.markdown-content');
+                                        if (markdownElement) {
+                                            markdownElement.innerHTML = markdownHtml;
+                                            console.log('Updated markdown content to:', markdownHtml);
+                                            // Forcer un re-render
+                                            markdownElement.style.display = 'block';
+                                        } else {
+                                            console.error('No .markdown-content element found');
+                                            console.log('Message element HTML:', messageElement.innerHTML);
+                                        }
                                     } else if (data.type === 'thought' && thinkingEnabled) {
+                                        console.log('Processing thought:', data.content);
                                         thoughtsContent += data.content;
                                         if (!thoughtsContainer) {
                                             thoughtsContainer = addThoughtsContainer();
@@ -329,8 +342,10 @@
                                         const thoughtsHtml = marked.parse(thoughtsContent);
                                         thoughtsContainer.querySelector('.thoughts-content .markdown-content').innerHTML = thoughtsHtml;
                                     } else if (data.type === 'error') {
+                                        console.log('Received error:', data.content);
                                         showError(data.content);
                                     } else if (data.type === 'end') {
+                                        console.log('Stream ended');
                                         typingIndicator.classList.add('hidden');
                                         typingIndicator.classList.remove('flex');
                                         messageInput.disabled = false;
@@ -338,6 +353,8 @@
                                         messageInput.focus();
                                         removeFile();
                                         return;
+                                    } else {
+                                        console.log('Unknown data type:', data.type);
                                     }
                                     
                                     const messagesContainer = document.getElementById('messages');
@@ -364,6 +381,7 @@
         }
 
         function addMessage(role, content, fileData = null) {
+            console.log('addMessage called with role:', role, 'content:', content);
             const messagesContainer = document.getElementById('messages');
             const messageDiv = document.createElement('div');
 
@@ -379,10 +397,10 @@
                 });
             }
 
-            if (content) {
-                const markdownHtml = marked.parse(content);
-                messageContent += `<div class="markdown-content">${markdownHtml}</div>`;
-            }
+            // Toujours créer la structure markdown-content, même si content est vide
+            const markdownHtml = marked.parse(content || '');
+            messageContent += `<div class="markdown-content">${markdownHtml}</div>`;
+            console.log('Message content HTML:', messageContent);
 
             if (role === 'user') {
                 messageDiv.className = 'max-w-[85%] p-4 rounded-2xl bg-gray-600 text-gray-100 self-end rounded-br-sm animate-fade-in';
@@ -391,6 +409,7 @@
             }
 
             messageDiv.innerHTML = messageContent;
+            console.log('Message div created:', messageDiv);
 
             messagesContainer.appendChild(messageDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;

test_frontend.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test Frontend</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+</head>
+<body>
+    <h1>Test du streaming comme le frontend réel</h1>
+    <button onclick="testStream()">Tester le stream</button>
+    <div id="messages" style="border: 1px solid black; padding: 10px; min-height: 200px;"></div>
+    <div id="output"></div>
+
+    <script>
+        marked.setOptions({
+            breaks: true,
+            gfm: true
+        });
+
+        function addMessage(role, content) {
+            console.log('addMessage called with role:', role, 'content:', content);
+            const messagesContainer = document.getElementById('messages');
+            const messageDiv = document.createElement('div');
+
+            let messageContent = '';
+
+            // Toujours créer la structure markdown-content, même si content est vide
+            const markdownHtml = marked.parse(content || '');
+            messageContent += `<div class="markdown-content">${markdownHtml}</div>`;
+            console.log('Message content HTML:', messageContent);
+
+            if (role === 'user') {
+                messageDiv.style.cssText = 'max-width: 85%; padding: 1rem; background: #4a5568; color: #f7fafc; margin: 0.5rem 0; border-radius: 1rem; margin-left: auto; margin-right: 0;';
+            } else {
+                messageDiv.style.cssText = 'max-width: 85%; padding: 1rem; background: #2d3748; color: #e2e8f0; margin: 0.5rem 0; border-radius: 1rem; margin-right: auto; margin-left: 0;';
+            }
+
+            messageDiv.innerHTML = messageContent;
+            console.log('Message div created:', messageDiv);
+
+            messagesContainer.appendChild(messageDiv);
+            return messageDiv;
+        }
+
+        function testStream() {
+            const output = document.getElementById('output');
+            output.innerHTML = 'Connexion...<br>';
+
+            fetch('http://localhost:5000/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    message: 'Bonjour',
+                    thinking_enabled: true,
+                    conversation_id: 'test'
+                })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Erreur: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let buffer = '';
+                let messageElement = null;
+                let messageContent = '';
+
+                function processStream() {
+                    return reader.read().then(({ done, value }) => {
+                        if (done) {
+                            output.innerHTML += 'Stream terminé<br>';
+                            return;
+                        }
+
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop() || '';
+
+                        for (const line of lines) {
+                            output.innerHTML += `Ligne: ${line}<br>`;
+                            if (line.startsWith('data: ')) {
+                                try {
+                                    const data = JSON.parse(line.substring(6));
+                                    output.innerHTML += `Données: ${JSON.stringify(data)}<br>`;
+                                    console.log('Received data:', data);
+
+                                    if (data.type === 'text') {
+                                        console.log('Processing text:', data.content);
+                                        messageContent += data.content;
+                                        if (!messageElement) {
+                                            messageElement = addMessage('assistant', '');
+                                            console.log('Created message element:', messageElement);
+                                        }
+                                        // Rendu markdown en temps réel
+                                        const markdownHtml = marked.parse(messageContent);
+                                        const markdownElement = messageElement.querySelector('.markdown-content');
+                                        if (markdownElement) {
+                                            markdownElement.innerHTML = markdownHtml;
+                                            console.log('Updated markdown content');
+                                            output.innerHTML += `Contenu mis à jour: ${messageContent}<br>`;
+                                        } else {
+                                            console.error('No .markdown-content element found');
+                                            output.innerHTML += `ERREUR: Pas d'élément .markdown-content trouvé<br>`;
+                                        }
+                                    } else if (data.type === 'end') {
+                                        output.innerHTML += 'Fin du stream<br>';
+                                        return;
+                                    }
+                                } catch (e) {
+                                    output.innerHTML += `Erreur parsing: ${e}<br>`;
+                                    console.error('Erreur parsing JSON:', e, "Ligne reçue:", line);
+                                }
+                            }
+                        }
+
+                        return processStream();
+                    });
+                }
+
+                return processStream();
+            })
+            .catch(error => {
+                output.innerHTML += `Erreur: ${error.message}<br>`;
+            });
+        }
+    </script>
+</body>
+</html>