error html maker

app.py

@@ -46,7 +46,7 @@ app.config['SECRET_KEY'] = SECRET_KEY
 
 embed_model = HuggingFaceEmbeddings(model_name="Alibaba-NLP/gte-multilingual-base", model_kwargs={"trust_remote_code":True})
 llm = ChatGroq(
-    model="llama-3.1-70b-versatile",  
+    model="llama-3.1-8b-instant",  
     temperature=0.0,
     max_tokens=1024, 
     max_retries=2
@@ -78,17 +78,14 @@ compression_retriever = ContextualCompressionRetriever(
 template = """
 User Instructions:
 
-You are an Arabic AI Assistant focused on providing clear, concise but detailed responses.
+You are an Arabic AI Assistant focused on providing clear, concise responses.
 Always answer truthfully. If the user query is not relevant to the provided CONTEXT, respond stating the reason.
 Generate responses in Arabic. Format any English words and numbers appropriately for clarity.
 
-The context may contain English word or numbers. 
-Use Unicode direction codes to specify the text direction for English words/numbers in response.
-Use \u202A (Left-to-Right) before and \u202C (Pop Direction Formatting) after any English words or numbers for clarity.
-
-Round off numbers with decimal integers to two decimals.
+Round off numbers with decimal integers to two decimal integers.
 
 Use bullet points or numbered lists where applicable for better organization.
+Use <br> tag to break lines and <br><br> for new line.
 Provide detailed yet concise answers, covering all important aspects.
 Remember, responding outside the CONTEXT may lead to termination of the interaction.
 CONTEXT: {context}
@@ -129,9 +126,9 @@ def handle_disconnect():
 @socketio.on('message')
 def handle_message(data):
     question = data.get('question')
-    print(question)
     try:
         for chunk in rag_chain.stream(question):
+            print(chunk)
             emit('response', chunk, room=request.sid)
     except Exception as e:
         emit('response', {"error": "An error occurred while processing your request."}, room=request.sid)

templates/chat.html

@@ -332,7 +332,7 @@
 
                             <div style="cursor: pointer;" class="w-full flex  col-6 col-lg-4 p-1">
                                 <small style="border-radius: 12px;" class="flex-grow question-item h-100 border px-3 py-3">
-                                    ما كمية أعلاف الجت المستلمة في منطقة الظفرة عام <span class="inline-block" style="direction: ltr;">2022</span>
+                                    ما كمية أعلاف الجت المستلمة في منطقة الظفرة عام <span class="special-span inline-block" dir="ltr"> 2022 </span>
                                 </small>
                             </div>
 
@@ -365,15 +365,15 @@
                             
 
                             <div style="cursor: pointer;" class="w-full flex  col-6 col-lg-4 p-1">
-                                <small style="border-radius: 12px;" class="flex-grow question-item h-100 border px-3 py-3 flex items-center">
-                                    ما مساحات المزارع المروية بالتنقيط في منطقة الرحبة عام 0202
+                                <small style="border-radius: 12px;" class="flex-grow question-item h-100 border px-3 py-3 ">
+                                    ما مساحات المزارع المروية بالتنقيط في منطقة الرحبة عام  <span class="special-span inline-block" dir="ltr"> 2020 </span>
                                 </small>
                             </div>
 
 
                             <div style="cursor: pointer;" class="w-full flex  col-6 col-lg-4 p-1">
-                                <small style="border-radius: 12px;" class="flex-grow question-item h-100 border px-3 py-3 flex items-center">
-                                    ما مساحات المزارع المروية بالتنقيط في منطقة أبوظبي عام 0202
+                                <small style="border-radius: 12px;" class="flex-grow question-item h-100 border px-3 py-3">
+                                    ما مساحات المزارع المروية بالتنقيط في منطقة أبوظبي عام  <span class="special-span inline-block" dir="ltr"> 2020 </span>
                                 </small>
                             </div>
                         </div>
@@ -388,7 +388,7 @@
 
             <div class="w-full bg-transparent">
                 <div class="input-options-container  max-w-3xl p-3 flex flex-row items-center justify-between border rounded-full shadow-xl mx-auto">
-                    <div id="question-box" dir="auto" class="inline-block px-4 text-2xl" contenteditable="true" data-placeholder="أكتب سؤالك هنا..." style="width: 100%; max-height: 100px; outline: none; font-weight: 500; font-size: 14px;"></div>
+                    <div id="question-box" dir="auto" class="inline-block px-4 text-2xl overflow-hidden" contenteditable="true" data-placeholder="أكتب سؤالك هنا..." style="width: 100%; max-height: 100px; outline: none; font-weight: 500; font-size: 14px;"></div>
                     <button class="sendbtn " style="width: 40px; height: 40px; padding: 8px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 30px; border: none; color: white;">
                         <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 6V18M12 6L7 11M12 6L17 11" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                     </button>
@@ -456,15 +456,9 @@
 
             const englishRegex = /[A-Za-z0-9]+/g;
 
-
-            // Wrap Arabic text in <span dir="rtl">
-            // content = content.replace(arabicRegex, function(match) {
-            //     return `<span dir="rtl">${match}</span>`;
-            // });
-
             // Wrap English text and numbers in <span dir="ltr">
             formatted_question = question.replace(englishRegex, function(match) {
-                return `<span class="special-span" dir="ltr">${match}</span>`;
+                return `<span class="special-span" dir="ltr"> ${match} </span>`;
             });
 
             $(".chat-container").append(`
@@ -506,10 +500,16 @@
 
         function appendAnswer(answer) {
             let lastElement = $(".chat-container .chat-block:last-child");
-            const isRTL = true;
+
+            const englishRegex = /[A-Za-z0-9]+(?:\.[0-9]+)?/g;
+
+            // Wrap English text and numbers in <span dir="ltr">
+            formatted_answer = answer.replace(englishRegex, function(match) {
+                return `<span class="special-span px-1" dir="ltr">${match}</span>`;
+            });
 
             if (lastElement.hasClass("response-block")) {
-                $(".chat-container .chat-block:last-child").find(".message-content").html(answer);
+                $(".chat-container .chat-block:last-child").find(".message-content").html(formatted_answer);
             } else {
                 lastElement.remove();
                 $(".chat-container").append(`
@@ -521,7 +521,7 @@
                         </div>
                         <div class="px-3 py-1">
                             <div class="message-content pr-2" style="width: 100%; height: 100%; margin: auto; font-weight: 500; text-wrap: pretty;" style="-webkit-locale: "ar";" >
-                                ${answer}
+                                ${formatted_answer}
                             </div>
                         </div>
                     </div>
@@ -535,8 +535,8 @@
         // Function to handle the answer received from the server
         socket.on('response', (data) => {
             response += data;
-            model_response = converter.makeHtml(response);
-            appendAnswer(model_response);
+            // model_response = converter.makeHtml(response);
+            appendAnswer(response);
         });
 
         // Open the chatbot interface
@@ -606,7 +606,7 @@
 
         // Handle click on example questions
         $(".question-item").on("click", (e) => {
-            let exampleQuestion = e.target.innerHTML;
+            let exampleQuestion = e.target.innerText;
             $("#question-box").text(exampleQuestion);
             $(".sendbtn").click();
         });
@@ -632,14 +632,6 @@
         // Regex for English letters and numbers
         const englishRegex = /[A-Za-z0-9]+/g;
 
-        // Escape HTML to prevent injection
-        content = escapeHTML(content);
-
-        // Wrap Arabic text in <span dir="rtl">
-        // content = content.replace(arabicRegex, function(match) {
-        //     return `<span dir="rtl">${match}</span>`;
-        // });
-
         // Wrap English text and numbers in <span dir="ltr">
         content = content.replace(englishRegex, function(match) {
             return `<span dir="ltr">${match}</span>`;