input direction bug solved

app.py

@@ -12,6 +12,7 @@ from langchain.retrievers import ContextualCompressionRetriever
 from langchain.retrievers import EnsembleRetriever
 from langchain_community.vectorstores import FAISS
 from langchain_groq import ChatGroq
+from langchain_community.document_compressors import JinaRerank
 from langchain import hub
 import pickle
 import os
@@ -25,6 +26,7 @@ GROQ_API_KEY = os.getenv("GROQ_API_KEY")
 SECRET_KEY = os.getenv("SECRET_KEY")
 SESSION_ID_DEFAULT = "abc123"
 
+
 # Set environment variables
 os.environ['USER_AGENT'] = USER_AGENT
 os.environ["GROQ_API_KEY"] = GROQ_API_KEY
@@ -41,7 +43,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-8b-instant",  
+    model="llama-3.1-70b-versatile",  
     temperature=0.0,
     max_tokens=1024, 
     max_retries=2
@@ -54,9 +56,9 @@ combined_vectorstore = excel_vectorstore
 
 with open('combined_recursive_keyword_retriever.pkl', 'rb') as f:
     combined_keyword_retriever = pickle.load(f)
-    combined_keyword_retriever.k = 100
+    combined_keyword_retriever.k = 1000
 
-semantic_retriever = combined_vectorstore.as_retriever(search_type="mmr", search_kwargs={'k': 100})
+semantic_retriever = combined_vectorstore.as_retriever(search_type="mmr", search_kwargs={"k": 100})
 
 
 # initialize the ensemble retriever
@@ -65,32 +67,31 @@ ensemble_retriever = EnsembleRetriever(
 )
 
 
-embeddings_filter = EmbeddingsFilter(embeddings=embed_model, similarity_threshold=0.5)
+embeddings_filter = EmbeddingsFilter(embeddings=embed_model, similarity_threshold=0.4)
 compression_retriever = ContextualCompressionRetriever(
-    base_compressor=embeddings_filter, base_retriever=ensemble_retriever
+    base_compressor=embeddings_filter, base_retriever=semantic_retriever
 )
 
 template = """
-User: You are an Arabic AI Assistant that follows instructions extremely well.
-Please be truthful and give direct answers. Please tell 'I don't know' if user query is not in CONTEXT.
-Generate the response in Arabic. Use bullet/number lists wherever necessary. If the response includes any English words or numbers, 
-format them so that they are displayed from left to right within the Arabic text. 
-Use the appropriate Unicode control characters to achieve this. For example, 
-place the Left-to-Right embedding character (U+202A) before the English word or number, 
-and the Pop Directional Formatting character (U+202C) afterward.
+User Instructions:
+
+You are an Arabic AI Assistant focused on providing clear, concise but detailed 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.
 
-Example:
-Input: "What year is it?"
-Output: "ما هو العام؟ \u202A2023\u202C"
+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.
 
-Give detail but concise answers explaining all the important parts.
-Keep in mind, you will lose the job, if you answer out of CONTEXT questions
+Round off numbers with decimal integers to two decimals.
 
+Use bullet points or numbered lists where applicable for better organization.
+Provide detailed yet concise answers, covering all important aspects.
+Remember, responding outside the CONTEXT may lead to termination of the interaction.
 CONTEXT: {context}
 Query: {question}
 
-Remember only return AI answer
-Assistant:
+After generating your response, ensure proper formatting and text direction of Arabic and English words/numbers. Return only the AI-generated answer.
 """
 
 prompt = ChatPromptTemplate.from_template(template)
@@ -125,6 +126,7 @@ def handle_disconnect():
 @socketio.on('message')
 def handle_message(data):
     question = data.get('question')
+    print(question)
     try:
         for chunk in rag_chain.stream(question):
             emit('response', chunk, room=request.sid)

templates/chat.html

@@ -270,6 +270,17 @@
 
     </style>
 
+    <style>
+        #question-box span[dir="rtl"] {
+            direction: rtl;
+            unicode-bidi: embed;
+        }
+        #question-box span[dir="ltr"] {
+            direction: ltr;
+            unicode-bidi: embed;
+        }
+    </style>
+
 
 </head>
 <body>
@@ -376,9 +387,10 @@
                 </div>
 
             </div>
+
             <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="rtl" class="inline-block px-4 text-2xl" role="textbox" contenteditable="true" data-placeholder="أكتب سؤالك هنا..." style="width: 100%; max-height: 100px; outline: none; font-weight: 500; font-size: 14px; direction: RTL;"></div>
+                    <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>
                     <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>
@@ -387,6 +399,9 @@
         </div>
     </div>
 
+
+
+
     <!-- SocketIO -->
     <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
     <!-- Showdown.js -->
@@ -395,7 +410,7 @@
     <script>
 
         // Initialize Socket.IO client
-        var socket = io.connect('https://ritesh-hf-adafsa-flask-app-demo.hf.space', {
+        var socket = io.connect('http://127.0.0.1:5000/', {
             transports: ['websocket']
         });
 
@@ -418,10 +433,10 @@
             const isRTL = true;
             $(".chat-container").append(
                 `
-                    <div class="chat-block load-chat-block w-full flex flex-row items-center 'justify-start bg-secondary p-3 rounded-xl z-10" style="background-color: rgba(242, 255, 225, 0.678);">
-                        <div style="width: fit-content; margin-bottom: 5px; display: flex; align-items: center; gap: 15px;">
-                            <span class="p-2 border-2" style="display: flex; align-items: center; justify-content: center; border-radius: 50px; background-color: white;">
-                                <svg fill="#000000" width="24px" height="24px" viewBox="0 0 24 24" 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="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg>
+                    <div class="chat-block load-chat-block w-full flex flex-row-reverse items-center justify-end bg-secondary p-3 rounded-xl z-10" style="background-color: rgba(242, 255, 225, 0.678);">
+                        <div class="flex items-center order-2" >
+                            <span class="bg-white" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 5px; border: 2px solid #c2c2c2;">
+                                <svg fill="#000000" width="36px" height="36px" viewBox="0 0 24 24" 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="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg>
                             </span>
                         </div>
                         <div class="px-3 py-1 order-1">
@@ -496,7 +511,7 @@
                             </span>
                         </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; text-align: right;" style="-webkit-locale: "ar";" >
+                            <div class="message-content pr-2" style="width: 100%; height: 100%; margin: auto; font-weight: 500; text-wrap: pretty;" style="-webkit-locale: "ar";" >
                                 ${answer}
                             </div>
                         </div>
@@ -567,7 +582,7 @@
             console.warn("Disconnected from server:", reason);
             response = "";
             // appendAnswer("You have been disconnected from the server. Please refresh the page to reconnect.");
-            socket = io.connect('https://ritesh-hf-adafsa-flask-app-demo.hf.space', {
+            socket = io.connect('http://127.0.0.1:5000/', {
                 transports: ['websocket']
             });
         });
@@ -588,5 +603,96 @@
         });
     </script>
 
+    <script>
+        const inputDiv = document.getElementById('question-box');
+
+        inputDiv.addEventListener('input', function(event) {
+        // Save the caret position
+        const caretPosition = saveCaretPosition(this);
+
+        // Process the content
+        processBiDiContent(this);
+
+        // Restore the caret position
+        restoreCaretPosition(this, caretPosition);
+        });
+
+        function processBiDiContent(element) {
+        let content = element.innerText;
+
+        // 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>`;
+        });
+
+        // Update the element's HTML
+        element.innerHTML = content;
+        }
+
+        function escapeHTML(str) {
+        return str.replace(/[&<>"']/g, function(m) {
+            return {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;'
+            }[m];
+        });
+        }
+
+        function saveCaretPosition(context) {
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(context);
+        preCaretRange.setEnd(range.endContainer, range.endOffset);
+        const caretOffset = preCaretRange.toString().length;
+        return caretOffset;
+        }
+
+        function restoreCaretPosition(context, offset) {
+        let charIndex = 0;
+        const range = document.createRange();
+        range.setStart(context, 0);
+        range.collapse(true);
+        const nodeStack = [context];
+        let node, foundStart = false;
+
+        while (!foundStart && (node = nodeStack.pop())) {
+            if (node.nodeType === Node.TEXT_NODE) {
+            const nextCharIndex = charIndex + node.length;
+            if (offset >= charIndex && offset <= nextCharIndex) {
+                range.setStart(node, offset - charIndex);
+                range.collapse(true);
+                foundStart = true;
+            }
+            charIndex = nextCharIndex;
+            } else {
+            let i = node.childNodes.length;
+            while (i--) {
+                nodeStack.push(node.childNodes[i]);
+            }
+            }
+        }
+
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+        }
+
+    </script>
+
 </body>
 </html>