| <!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 = ''; |
| |
| |
| 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); |
| } |
| |
| 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> |
