🚀 Déploiement automatique RAG CHU 2025-06-30 22:38:37

backend/src/config.py

@@ -32,10 +32,15 @@ class Settings(BaseSettings):
     anthropic_model: str = Field("claude-3-sonnet-20240229", env="ANTHROPIC_MODEL")
     embedding_model: str = Field("text-embedding-3-small", env="EMBEDDING_MODEL")
     
-    # RAG Configuration
-    chunk_size: int = Field(1000, env="CHUNK_SIZE")
-    chunk_overlap: int = Field(200, env="CHUNK_OVERLAP")
-    retrieval_k: int = Field(5, env="RETRIEVAL_K")
+    # # RAG Configuration
+    # chunk_size: int = Field(1000, env="CHUNK_SIZE")
+    # chunk_overlap: int = Field(200, env="CHUNK_OVERLAP")
+    # retrieval_k: int = Field(5, env="RETRIEVAL_K")
+    
+    # RAG Configuration optimisée
+    chunk_size: int = Field(800, env="CHUNK_SIZE")      
+    chunk_overlap: int = Field(100, env="CHUNK_OVERLAP") 
+    retrieval_k: int = Field(8, env="RETRIEVAL_K")  
     
     class Config:
         env_file = ".env"

frontend/src/App.css

@@ -561,4 +561,33 @@ body {
   .card h2 {
     font-size: 1rem;
   }
+}
+
+/* Animation pour le curseur de streaming */
+.streaming-cursor {
+  color: #10b981;
+  font-weight: bold;
+  animation: blink 1s infinite;
+  margin-left: 2px;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Spinner médical élégant */
+.medical-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-left: 2px solid #10b981;
+  border-radius: 50%;
+  animation: medical-spin 1s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes medical-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 } 

frontend/src/components/ChatInterface.js

@@ -5,24 +5,21 @@ const ChatInterface = ({ selectedDocument, ws }) => {
   const [messages, setMessages] = useState([]);
   const [currentMessage, setCurrentMessage] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [showSuggestions, setShowSuggestions] = useState(false);
   const messagesEndRef = useRef(null);
 
   useEffect(() => {
     if (selectedDocument) {
       setMessages([{
         type: 'assistant',
-        content: `Bonjour ! Je suis prêt à répondre à vos questions sur le document **${selectedDocument.filename}**.
-
-N'hésitez pas à être précis dans vos questions !`,
+        content: `Je suis prêt à répondre à vos questions sur le document: 
+**${selectedDocument.filename}**.
+N'hésitez pas à être précis dans vos questions.`,
         timestamp: new Date()
       }]);
-      // Afficher les suggestions quand un document est sélectionné
-      setShowSuggestions(true);
     } else {
       setMessages([{
         type: 'assistant',
-        content: `Bienvenue dans l'assistant médical RAG CHU !
+        content: `Bienvenue dans l'assistant médical RAG CHU.
 
 **Pour commencer :**
 1. Uploadez un document médical (PDF, DOCX, Image)
@@ -36,8 +33,6 @@ N'hésitez pas à être précis dans vos questions !`,
 - Consultez la console debug à droite pour suivre l'analyse`,
         timestamp: new Date()
       }]);
-      // Masquer les suggestions si pas de document
-      setShowSuggestions(false);
     }
   }, [selectedDocument]);
 
@@ -59,25 +54,41 @@ N'hésitez pas à être précis dans vos questions !`,
     };
 
     setMessages(prev => [...prev, userMessage]);
+    const questionToSend = currentMessage;
     setCurrentMessage('');
     setIsLoading(true);
-    
-    // Masquer les suggestions après le premier message envoyé
-    setShowSuggestions(false);
+
+    // ID pour le message assistant (créé seulement quand on a du contenu)
+    const assistantMessageId = Date.now();
+    let assistantMessageCreated = false;
+
+    // Timeout de sécurité pour éviter les blocages
+    const timeoutId = setTimeout(() => {
+      console.warn('Timeout: Réinitialisation forcée de isLoading');
+      setIsLoading(false);
+      if (assistantMessageCreated) {
+        setMessages(prev => prev.map(msg => 
+          msg.id === assistantMessageId 
+            ? { ...msg, content: msg.content || "Timeout - Veuillez réessayer", isStreaming: false }
+            : msg
+        ));
+      }
+    }, 30000); // 30 secondes de timeout
 
     try {
-      const response = await fetch('/api/chat', {
+      const response = await fetch('/api/chat/stream', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          question: currentMessage,
+          question: questionToSend,
           document_id: selectedDocument.document_id
         }),
       });
 
       if (!response.ok) {
+        clearTimeout(timeoutId);
         let errorMessage = `Erreur HTTP ${response.status}`;
         try {
           const errorData = await response.json();
@@ -89,33 +100,130 @@ N'hésitez pas à être précis dans vos questions !`,
         throw new Error(errorMessage);
       }
 
-      const responseText = await response.text();
-      let result;
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let streamEnded = false;
+      
       try {
-        result = JSON.parse(responseText);
-      } catch (jsonError) {
-        console.error('Réponse non-JSON reçue:', responseText);
-        throw new Error('Réponse invalide du serveur');
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            streamEnded = true;
+            break;
+          }
+          
+          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.slice(6));
+                
+                switch (data.type) {
+                  case 'start':
+                    console.log('🚀 Début streaming:', data.message);
+                    break;
+                    
+                  case 'chunk':
+                    // Créer le message assistant au premier chunk seulement
+                    if (!assistantMessageCreated && data.content) {
+                      const initialAssistantMessage = {
+                        id: assistantMessageId,
+                        type: 'assistant',
+                        content: data.content,
+                        timestamp: new Date(),
+                        isStreaming: true
+                      };
+                      setMessages(prev => [...prev, initialAssistantMessage]);
+                      assistantMessageCreated = true;
+                    } else if (assistantMessageCreated) {
+                      // Mettre à jour le message assistant avec le nouveau chunk
+                      setMessages(prev => prev.map(msg => 
+                        msg.id === assistantMessageId 
+                          ? { ...msg, content: msg.content + data.content }
+                          : msg
+                      ));
+                    }
+                    break;
+                    
+                  case 'end':
+                    console.log('✅ Fin streaming:', data.message);
+                    streamEnded = true;
+                    if (assistantMessageCreated) {
+                      // Marquer le message comme terminé
+                      setMessages(prev => prev.map(msg => 
+                        msg.id === assistantMessageId 
+                          ? { ...msg, isStreaming: false }
+                          : msg
+                      ));
+                    }
+                    break;
+                    
+                  case 'error':
+                    console.error('❌ Erreur streaming:', data.message);
+                    streamEnded = true;
+                    if (!assistantMessageCreated) {
+                      // Créer un message d'erreur
+                      const errorMessage = {
+                        id: assistantMessageId,
+                        type: 'assistant',
+                        content: `Erreur: ${data.message}`,
+                        timestamp: new Date(),
+                        isStreaming: false
+                      };
+                      setMessages(prev => [...prev, errorMessage]);
+                      assistantMessageCreated = true;
+                    } else {
+                      setMessages(prev => prev.map(msg => 
+                        msg.id === assistantMessageId 
+                          ? { ...msg, content: `Erreur: ${data.message}`, isStreaming: false }
+                          : msg
+                      ));
+                    }
+                    break;
+                }
+              } catch (e) {
+                console.error('Erreur parsing JSON:', e);
+              }
+            }
+          }
+        }
+      } finally {
+        // S'assurer que le stream est marqué comme terminé
+        if (!streamEnded && assistantMessageCreated) {
+          setMessages(prev => prev.map(msg => 
+            msg.id === assistantMessageId 
+              ? { ...msg, isStreaming: false }
+              : msg
+          ));
+        }
       }
 
-      const assistantMessage = {
-        type: 'assistant',
-        content: result.response,
-        sources: result.sources,
-        timestamp: new Date()
-      };
-
-      setMessages(prev => [...prev, assistantMessage]);
-
     } catch (error) {
       console.error('Erreur chat:', error);
-      const errorMessage = {
-        type: 'assistant',
-        content: `Erreur : ${error.message}`,
-        timestamp: new Date()
-      };
-      setMessages(prev => [...prev, errorMessage]);
+      if (!assistantMessageCreated) {
+        // Créer un message d'erreur
+        const errorMessage = {
+          id: assistantMessageId,
+          type: 'assistant',
+          content: `Erreur : ${error.message}`,
+          timestamp: new Date(),
+          isStreaming: false
+        };
+        setMessages(prev => [...prev, errorMessage]);
+      } else {
+        // Remplacer le message assistant par l'erreur
+        setMessages(prev => prev.map(msg => 
+          msg.id === assistantMessageId 
+            ? { ...msg, content: `Erreur : ${error.message}`, isStreaming: false }
+            : msg
+        ));
+      }
     } finally {
+      clearTimeout(timeoutId);
       setIsLoading(false);
     }
   };
@@ -134,35 +242,29 @@ N'hésitez pas à être précis dans vos questions !`,
     });
   };
 
-  const suggestedQuestions = [
-    "Quelle est la posologie recommandée ?",
-    "Quels sont les critères de gravité ?",
-    "Y a-t-il des contre-indications ?",
-    "Quelle est la durée de traitement ?",
-    "Quelles sont les alternatives thérapeutiques ?"
-  ];
-
   return (
     <div className="card">
       <h2>{selectedDocument ? `Chat avec ${selectedDocument.filename}` : 'Assistant Médical'}</h2>
       
       <div className="chat-container">
         <div className="chat-messages">
-          {messages.map((message, index) => (
+          {messages
+            .filter(message => message.content && message.content.trim() !== '')
+            .map((message, index) => (
             <div
-              key={index}
+              key={message.id || index}
               className={`message ${message.type === 'user' ? 'message-user' : 'message-assistant'}`}
             >
               <div className="message-content">
                 {message.type === 'user' ? (
                   <p>{message.content}</p>
                 ) : (
-                  <ReactMarkdown>{message.content}</ReactMarkdown>
+                  <div>
+                    <ReactMarkdown>{message.content}</ReactMarkdown>
+                  </div>
                 )}
               </div>
               
-
-              
               <div style={{ fontSize: '0.7rem', opacity: 0.6, marginTop: '0.5rem' }}>
                 {formatTimestamp(message.timestamp)}
               </div>
@@ -172,8 +274,16 @@ N'hésitez pas à être précis dans vos questions !`,
           {isLoading && (
             <div className="message message-assistant">
               <div className="message-content">
-                <div className="loading"></div>
-                <span style={{ marginLeft: '0.5rem' }}>Réflexion en cours...</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                  <div className="medical-spinner"></div>
+                  <span style={{ 
+                    fontSize: '0.9rem', 
+                    color: 'rgba(255,255,255,0.9)',
+                    fontWeight: '400'
+                  }}>
+                    Consultation des protocoles de soins
+                  </span>
+                </div>
               </div>
             </div>
           )}
@@ -181,44 +291,6 @@ N'hésitez pas à être précis dans vos questions !`,
           <div ref={messagesEndRef} />
         </div>
 
-        {/* Suggestions au-dessus de la zone de saisie */}
-        {showSuggestions && selectedDocument && (
-          <div style={{ 
-            marginBottom: '1rem', 
-            padding: '1rem',
-            background: 'rgba(255,255,255,0.05)',
-            borderRadius: '8px',
-            border: '1px solid rgba(255,255,255,0.1)'
-          }}>
-            <p style={{ 
-              fontSize: '0.9rem', 
-              color: 'rgba(255,255,255,0.8)', 
-              marginBottom: '0.75rem',
-              fontWeight: '500'
-            }}>
-              Suggestions de questions :
-            </p>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
-              {suggestedQuestions.map((question, index) => (
-                <button
-                  key={index}
-                  onClick={() => setCurrentMessage(question)}
-                  className="btn btn-secondary btn-small"
-                  style={{ 
-                    fontSize: '0.8rem',
-                    padding: '0.4rem 0.8rem',
-                    background: 'rgba(15, 118, 110, 0.2)',
-                    border: '1px solid rgba(15, 118, 110, 0.3)',
-                    color: 'rgba(255,255,255,0.9)'
-                  }}
-                >
-                  {question}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
         <div className="chat-input-container">
           <textarea
             className="input chat-input textarea"