update frontend

ChatBot/app.py

@@ -3,6 +3,9 @@ from pydantic import BaseModel
 from chatbot import ChatBot
 import warnings
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import StreamingResponse
+import time
 # Tắt các cảnh báo
 warnings.filterwarnings("ignore")
 
@@ -32,12 +35,15 @@ async def new_chat():
     return {"message": "ChatBot đã được khởi tạo lại."}
 
 # Endpoint để xử lý câu hỏi
-@app.post("/process_query/")
-async def process_query(request: QueryRequest):
+@app.post("/process_query_stream/")
+async def process_query_stream(request: QueryRequest):
     global chatbot
-    
-    raw_query = request.query  # Lấy query từ người dùng
-    # Xử lý truy vấn bằng chatbot
-    response = chatbot.process_query(raw_query)
-    # Trả về câu trả lời từ chatbot
-    return {"response": response}
+    try:
+        raw_query = request.query
+        # Sử dụng generator để trả về từng phần của câu trả lời
+        def generate():
+            for chunk in chatbot.process_query_stream(raw_query):
+                yield chunk
+        return StreamingResponse(generate(), media_type="text/plain")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

ChatBot/chatbot.py

@@ -11,6 +11,7 @@ from dotenv import load_dotenv
 from langchain.chains import LLMChain
 from langchain.prompts import PromptTemplate
 from langchain.memory import ConversationBufferWindowMemory
+import time
 
 
 class ChatBot:
@@ -54,9 +55,9 @@ class ChatBot:
 
         - Với `question_type = 0|3|5|7`: *Trả về ngữ cảnh y như nó được cung cấp, không thêm bớt bất kỳ thông tin nào khác.*
 
-        Mỗi câu hỏi đã được làm rõ (converted_query[i]) tương ứng với `context[i]` và `question_type[i]`. Trả lời lần lượt từng câu hỏi theo các quy tắc trên. **KHÔNG ĐƯỢC sử dụng các cụm từ tương tự như "Dựa vào thông tin được cung cấp", "Dựa vào ngữ cảnh", "không được nêu rõ trong ngữ cảnh".**
+        Mỗi câu hỏi đã được làm rõ (converted_query[i]) tương ứng với `context[i]` và `question_type[i]`. Trả lời lần lượt từng câu hỏi theo các quy tắc trên. **KHÔNG ĐƯỢC sử dụng các cụm từ tương tự như "Dựa vào thông tin được cung cấp", "Dựa vào ngữ cảnh", "không được nêu rõ trong ngữ cảnh", "trong văn bản được cung cấp".**
 
-        **Cách trình bày câu trả lời:** Tách các thông tin trả lời một cách rõ ràn, không nhắc lại câu hỏi
+        **Cách trình bày câu trả lời:** Tách các thông tin trả lời một cách rõ ràn, không nhắc lại câu hỏi.
 
         Dữ liệu cung cấp:
         - Loại câu hỏi: {question_type}
@@ -75,7 +76,7 @@ class ChatBot:
         # LLMChain kết hợp LLM và Prompt
         self.chain = LLMChain(llm=self.llm, prompt=self.prompt, memory=self.memory)
 
-    def process_query(self, raw_query):
+    def process_query_stream(self, raw_query):
         print ('QUERY GỐC: ', raw_query, '\n---------------------------------------------------------')
         # Bước 1: Biến đổi câu truy vấn dựa trên lịch sử
         converted_queries = self.query_transform.transform(raw_query, self.memory.load_memory_variables({})["history"])
@@ -91,4 +92,8 @@ class ChatBot:
         # Bước 4: Tạo câu trả lời bằng LangChain
         response = self.chain.run(question_type=query_types, context=context, query=raw_query, converted_query=converted_queries)
         print ('CÂU TRẢ LỜI: ', response, '\n___________________________________________________________')
-        return response
+        
+        # Trả về từng phần của câu trả lời
+        for chunk in response.split():  # Tách câu trả lời thành các từ hoặc cụm từ
+            yield chunk + " "  # Trả về từng phần với khoảng trắng
+            time.sleep(0.05)  # Thêm độ trễ để mô phỏng quá trình streaming

ChatBot/indexing.py

@@ -49,8 +49,8 @@ vectorstore = QdrantVectorStore.from_documents(
                 embedding_model, 
                 sparse_embedding=sparse_embeddings,
                 retrieval_mode=RetrievalMode.HYBRID,
-                url=os.getenv("QDRANT_URL"), 
-                api_key=os.getenv("QDRANT_API_KEY"),
+                url="https://ee4decd4-2b54-4960-92f5-615ba47f3e04.us-east4-0.gcp.cloud.qdrant.io", 
+                api_key="JJ9wyq9OVLta3RODIM5_WX6v5CqpwMHhk-ednmmdrj44-8f_7m40ow",
                 collection_name="LAWDATA",
                 distance=models.Distance.COSINE
             )

ChatBot/query_transformation.py

@@ -13,8 +13,8 @@ class QueryTransform:
         4. NẾU CÂU HỎI chứa **SỐ ĐIỀU/SỐ CHƯƠNG cụ thể** và NẾU trong lịch sử trò chuyện gần nhất có chứa:
             + "Vui lòng chọn Điều cụ thể.", thì ý định của câu hỏi là: **Khoản <số Khoản trong lịch sử> Điều <SỐ/SỐ ĐIỀU trong câu hỏi>. Ngược lại ý định là: Điều <SỐ/SỐ ĐIỀU trong câu hỏi> **
             + "Vui lòng chọn Chương cụ thể", thì ý định của câu hỏi là: **Mục <số Mục trong lịch sử> Chương <SỐ/SỐ CHƯƠNG trong câu hỏi>. Ngược lại ý định là: Chương <SỐ/SỐ CHƯƠNG trong câu hỏi> **
-        5. **NẾU CÂU HỎI KHÔNG RÕ RÀNG HOẶC CHƯA ĐẦY ĐỦ**, hãy sử dụng lịch sử trò chuyện được cung cấp **CHỈ KHI LỊCH SỬ LIÊN QUAN TRỰC TIẾP ĐẾN CÂU HỎI** để làm rõ ý nghĩa và ngữ cảnh truy vấn của người dùng. **KHÔNG ĐƯỢC THÊM THÔNG TIN KHÔNG LIÊN QUAN VÀO CÂU HỎI**.
-        6. Suy ra nội dung chính của câu hỏi (hoặc câu khẳng định) thật đơn giản, rõ ràng và dễ hiểu (dùng các từ ngữ trong luật Hôn nhân và Gia đình nếu có thể), **BỎ QUA ĐẠI TỪ DANH XƯNG NẾU CÓ THỂ**. Ví dụ: Tôi là nữ 16 tuổi thì có lấy chồng được không? -> Nữ 16 tuổi có đủ điều kiện kết hôn không?, Người bị điên có lấy vợ được không? -> Người mất hành vi dân sự có được phép kết hôn không?
+        5. **NẾU CÂU HỎI KHÔNG RÕ RÀNG HOẶC CHƯA ĐẦY ĐỦ**, hãy sử dụng lịch sử trò chuyện được cung cấp **CHỈ KHI LỊCH SỬ LIÊN QUAN TRỰC TIẾP ĐẾN CÂU HỎI** để làm rõ ý nghĩa và ngữ cảnh truy vấn của người dùng. **KHÔNG ĐƯỢC THAY ĐỔI NỘI DUNG CHÍNH CỦA CÂU HỎI**.
+        6. Suy ra nội dung chính của câu hỏi (hoặc câu khẳng định) thật đơn giản, rõ ràng và dễ hiểu (dùng các từ ngữ trong luật Hôn nhân và Gia đình nếu có thể), **BỎ QUA ĐẠI TỪ DANH XƯNG NẾU CÓ THỂ**. Ví dụ: Tôi là nữ 16 tuổi thì có lấy chồng được không? -> Nữ 16 tuổi có đủ điều kiện kết hôn không?
 
         Chỉ cung cấp kết quả **theo định dạng sau** và không thêm bất kỳ văn bản, giải thích hoặc bình luận nào khác:
         Kết quả: <nội dung chính của câu hỏi 1>|<nội dung chính của câu hỏi 2>...
@@ -23,7 +23,7 @@ class QueryTransform:
         Câu hỏi gốc: {query}
         """)
 
-        self.model = ChatGoogleGenerativeAI(model=model, temperature=temperature, api_key= "AIzaSyAZ9e7fpVwT_Ao0c2q5IuvZIvuSpN-EXG0")
+        self.model = ChatGoogleGenerativeAI(model=model, temperature=temperature, api_key= "AIzaSyB7CqaOvl9gRIhD7ZD61MRKsS_vS5v5VUk")
         self.parser = StrOutputParser()
 
     def transform(self, raw_query, history):

ChatBot/retrieval.py

@@ -81,8 +81,7 @@ class Retriever:
             docs = [doc.page_content for doc in results]
             docs = self.rerank(query, docs)
             results = [results[i] for i in docs]
-        for r in results:
-            print (r)
+
         res = {}
         refers = set()
         for doc in results[:top_n]:

FrontEnd/src/ChatBot.css

@@ -222,4 +222,4 @@
   display: inline-block;
   max-width: 80%;
   /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
-}
+}

FrontEnd/src/ChatBot.jsx

@@ -8,59 +8,86 @@ const ChatBot = () => {
   const [isLoading, setIsLoading] = useState(false);
   const chatWindowRef = useRef(null);
 
+  // Tự động cuộn xuống dưới cùng khi có tin nhắn mới
   useEffect(() => {
     if (chatWindowRef.current) {
       chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;
     }
   }, [messages]);
 
-  const sendQueryToBackend = async (query) => {
+  // Xử lý gửi tin nhắn
+  const handleSend = async () => {
+    if (userInput.trim() === "" || isLoading) return; // Ngăn chặn gửi tin nhắn nếu đang tải
+
+    // Thêm tin nhắn của người dùng và một dấu ba chấm của bot
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      { sender: "user", text: userInput },
+      { sender: "bot", text: "..." }, // Chỉ thêm một dấu ba chấm
+    ]);
+
+    setUserInput("");
+    setIsLoading(true);
+
     try {
-      const response = await fetch("http://127.0.0.1:8000/process_query", {
+      const response = await fetch("http://127.0.0.1:8000/process_query_stream/", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ query }),
+        body: JSON.stringify({ query: userInput }),
       });
 
       if (!response.ok) {
         throw new Error("Lỗi khi gửi yêu cầu");
       }
 
-      const data = await response.json();
-      return data.response;
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let botResponse = "";
+      let isFirstChunk = true; // Biến để kiểm tra chunk đầu tiên
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        // Giải mã và cập nhật câu trả lời từng phần
+        const chunk = decoder.decode(value);
+        botResponse += chunk;
+
+        // Nếu là chunk đầu tiên, thay thế dấu ba chấm bằng chunk đầu tiên
+        if (isFirstChunk) {
+          setMessages((prevMessages) => [
+            ...prevMessages.filter((msg) => msg.text !== "..."), // Xóa dấu ba chấm
+            { sender: "bot", text: botResponse }, // Thêm chunk đầu tiên
+          ]);
+          isFirstChunk = false; // Đánh dấu đã xử lý chunk đầu tiên
+        } else {
+          // Cập nhật tin nhắn cuối cùng của bot với chunk tiếp theo
+          setMessages((prevMessages) => {
+            const newMessages = [...prevMessages];
+            const lastMessageIndex = newMessages.length - 1;
+            if (newMessages[lastMessageIndex].sender === "bot") {
+              newMessages[lastMessageIndex].text = botResponse;
+            }
+            return newMessages;
+          });
+        }
+      }
     } catch (error) {
       console.error("Lỗi:", error);
-      return "Đã xảy ra lỗi khi kết nối với chatbot.";
+      setMessages((prevMessages) => [
+        ...prevMessages.filter((msg) => msg.text !== "..."), // Xóa dấu ba chấm
+        { sender: "bot", text: "Đã xảy ra lỗi khi kết nối với chatbot." }, // Thêm thông báo lỗi
+      ]);
+    } finally {
+      setIsLoading(false);
     }
   };
 
-  const handleSend = async () => {
-    if (userInput.trim() === "") return;
-
-    setMessages((prevMessages) => [
-      ...prevMessages,
-      { sender: "user", text: userInput },
-    ]);
-
-    setUserInput("");
-    setIsLoading(true);
-
-    const botResponse = await sendQueryToBackend(userInput);
-
-    setMessages((prevMessages) => [
-      ...prevMessages.filter((msg) => msg.text !== "..."),
-      { sender: "bot", text: botResponse },
-    ]);
-
-    setIsLoading(false);
-  };
-
+  // Xử lý bắt đầu cuộc trò chuyện mới
   const handleNewChat = async () => {
-    // setIsLoading(true);
-    // Reset messages về mảng rỗng
-    setMessages([]);
+    setMessages([]); // Reset messages về mảng rỗng
     try {
       const response = await fetch("http://127.0.0.1:8000/newchat/", {
         method: "GET",
@@ -72,25 +99,12 @@ const ChatBot = () => {
 
       const data = await response.json();
       console.log(data.message); // Chỉ log ra console, không thêm vào tin nhắn
-
     } catch (error) {
       console.error("Lỗi:", error);
-      // Nếu có lỗi, hiển thị thông báo lỗi trong console, không thêm vào tin nhắn
     }
-    // finally {
-    //   setIsLoading(false);
-    // }
   };
 
-  useEffect(() => {
-    if (isLoading) {
-      setMessages((prevMessages) => [
-        ...prevMessages,
-        { sender: "bot", text: "..." },
-      ]);
-    }
-  }, [isLoading]);
-
+  // Định dạng câu trả lời của bot (in đậm các phần quan trọng)
   const formatBotResponse = (text) => {
     return text.split("\n").map((line, index) => (
       <p key={index}>
@@ -111,6 +125,7 @@ const ChatBot = () => {
   return (
     <div className="chatbot-container">
       <div className="chat-header">
+        <FaRobot size={30} style={{ marginRight: "10px" }} /> {/* Thêm icon chatbot */}
         <h1>CHATBOT HỎI ĐÁP VỀ LUẬT HÔN NHÂN VÀ GIA ĐÌNH VIỆT NAM</h1>
         <button className="new-chat-btn" onClick={handleNewChat} title="Bắt đầu cuộc trò chuyện mới">
           <FaCommentDots size={24} color="white" />
@@ -132,8 +147,7 @@ const ChatBot = () => {
         {messages.map((message, index) => (
           <div
             key={index}
-            className={`message-container ${message.sender === "user" ? "user" : "bot"
-              }`}
+            className={`message-container ${message.sender === "user" ? "user" : "bot"}`}
           >
             {message.sender === "user" && (
               <div className="icon-container user-icon">
@@ -141,8 +155,7 @@ const ChatBot = () => {
               </div>
             )}
             <div
-              className={`message ${message.sender} ${message.text === "..." ? "typing" : ""
-                }`}
+              className={`message ${message.sender} ${message.text === "..." ? "typing" : ""}`}
             >
               {message.sender === "bot" && message.text === "..." ? (
                 <div className="typing-indicator">
@@ -172,12 +185,16 @@ const ChatBot = () => {
             value={userInput}
             onChange={(e) => setUserInput(e.target.value)}
             placeholder="Nhập câu hỏi..."
-            onKeyPress={(e) => e.key === "Enter" && handleSend()}
+            onKeyPress={(e) => {
+              if (e.key === "Enter" && !isLoading) {
+                handleSend();
+              }
+            }}
           />
           <button
             onClick={handleSend}
-            disabled={userInput.trim() === ""}
-            className={`send-button ${userInput.trim() === "" ? "disabled" : ""}`}
+            disabled={userInput.trim() === "" || isLoading} // Vô hiệu hóa nút gửi khi đang tải
+            className={`send-button ${userInput.trim() === "" || isLoading ? "disabled" : ""}`}
             title="Gửi"
           >
             <FaPaperPlane size={20} color="white" />