initial commit

.gitattributes

@@ -33,3 +33,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+faiss_recursive_split_word_doc_index/index.faiss filter=lfs diff=lfs merge=lfs -text
+faiss_recursive_split_word_doc_index/index.pkl filter=lfs diff=lfs merge=lfs -text
+faiss_excel_doc_index/index.faiss filter=lfs diff=lfs merge=lfs -text
+faiss_excel_doc_index/index.pkl filter=lfs diff=lfs merge=lfs -text
+combined_recursive_keyword_retriever.pkl filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1 @@
+.env

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "-k", "eventlet", "app:app"]

README.md

@@ -1,11 +1,10 @@
 ---
-title: ADAFSA FLASK APP DEMO
-emoji: 🚀
-colorFrom: yellow
-colorTo: red
+title: ADAFSA RAG DEMO FLASK
+emoji: 📉
+colorFrom: red
+colorTo: blue
 sdk: docker
 pinned: false
-license: apache-2.0
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,142 @@
+import os
+from dotenv import load_dotenv
+from flask import Flask, request, render_template
+from flask_cors import CORS
+from flask_socketio import SocketIO, emit, join_room, leave_room
+from langchain_core.output_parsers import StrOutputParser
+from langchain_core.prompts import ChatPromptTemplate,MessagesPlaceholder
+from langchain_core.runnables import RunnablePassthrough
+from langchain_huggingface.embeddings import HuggingFaceEmbeddings
+from langchain.retrievers.document_compressors import EmbeddingsFilter
+from langchain.retrievers import ContextualCompressionRetriever
+from langchain.retrievers import EnsembleRetriever
+from langchain_community.vectorstores import FAISS
+from langchain_groq import ChatGroq
+from langchain import hub
+import pickle
+import os
+
+
+
+# Load environment variables
+load_dotenv(".env")
+USER_AGENT = os.getenv("USER_AGENT")
+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
+os.environ["TOKENIZERS_PARALLELISM"] = 'true'
+
+# Initialize Flask app and SocketIO with CORS
+app = Flask(__name__)
+CORS(app)
+socketio = SocketIO(app, cors_allowed_origins="*")
+app.config['SESSION_COOKIE_SECURE'] = True  # Use HTTPS
+app.config['SESSION_COOKIE_HTTPONLY'] = True
+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",  
+    temperature=0.0,
+    max_tokens=1024, 
+    max_retries=2
+)
+
+excel_vectorstore = FAISS.load_local(folder_path="./faiss_excel_doc_index", embeddings=embed_model, allow_dangerous_deserialization=True)
+word_vectorstore = FAISS.load_local(folder_path="./faiss_recursive_split_word_doc_index", embeddings=embed_model, allow_dangerous_deserialization=True)
+excel_vectorstore.merge_from(word_vectorstore)
+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
+
+semantic_retriever = combined_vectorstore.as_retriever(search_type="mmr", search_kwargs={'k': 100})
+
+
+# initialize the ensemble retriever
+ensemble_retriever = EnsembleRetriever(
+    retrievers=[combined_keyword_retriever, semantic_retriever], weights=[0.5, 0.5]
+)
+
+
+embeddings_filter = EmbeddingsFilter(embeddings=embed_model, similarity_threshold=0.5)
+compression_retriever = ContextualCompressionRetriever(
+    base_compressor=embeddings_filter, base_retriever=ensemble_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.
+
+Example:
+Input: "What year is it?"
+Output: "ما هو العام؟ \u202A2023\u202C"
+
+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
+
+CONTEXT: {context}
+Query: {question}
+
+Remember only return AI answer
+Assistant:
+"""
+
+prompt = ChatPromptTemplate.from_template(template)
+output_parser = StrOutputParser()
+
+def format_docs(docs):
+    return "\n\n".join(doc.page_content for doc in docs)
+
+
+rag_chain = (
+    {"context": compression_retriever.with_config(run_name="Docs") | format_docs, "question": RunnablePassthrough()}
+    | prompt
+    | llm
+    | output_parser
+)
+
+# Function to handle WebSocket connection
+@socketio.on('connect')
+def handle_connect():
+    emit('connection_response', {'message': 'Connected successfully.'}, room=request.sid)
+
+@socketio.on('ping')
+def handle_ping(data):
+    emit('ping_response', {'message': 'Healthy Connection.'}, room=request.sid)
+
+# Function to handle WebSocket disconnection
+@socketio.on('disconnect')
+def handle_disconnect():
+    emit('connection_response', {'message': 'Disconnected successfully.'})
+
+# Function to handle WebSocket messages
+@socketio.on('message')
+def handle_message(data):
+    question = data.get('question')
+    try:
+        for chunk in rag_chain.stream(question):
+            emit('response', chunk, room=request.sid)
+    except Exception as e:
+        emit('response', {"error": "An error occurred while processing your request."}, room=request.sid)
+
+
+# Home route
+@app.route("/")
+def index_view():
+    return render_template('chat.html') 
+
+# Main function to run the app
+if __name__ == '__main__':
+    socketio.run(app, debug=True)

combined_recursive_keyword_retriever.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:71c816aa5e0cb849c3c9f36ca72ecf7b0968d0fd5ab5a63a3316223e68d5398d
+size 8449174

faiss_excel_doc_index/index.faiss

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:93af2db742f688ef046e298394b29bb6124c97bc01c841aa9e7d11d95ace38d3
+size 441538605

faiss_excel_doc_index/index.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:79bf3786db209a1e32e72906d3ab7edce408ff000728b7af28b55bc729c02285
+size 58044220

faiss_recursive_split_word_doc_index/index.faiss

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e21d5d78d4acf373e94ae40d43fcad7b724207b7b4c18455cc1fc613b6c01f5
+size 14736429

faiss_recursive_split_word_doc_index/index.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:27889ba1e7400d896ad677b1e545fd7a01ee16b8d2dbd3c2b9c6431d5b0ff50d
+size 4029431

requirements.txt

@@ -0,0 +1,132 @@
+aiofiles==23.2.1
+aiohappyeyeballs==2.4.0
+aiohttp==3.10.5
+aiosignal==1.3.1
+annotated-types==0.7.0
+anyio==4.4.0
+async-timeout==4.0.3
+attrs==24.2.0
+bidict==0.23.1
+blinker==1.8.2
+certifi==2024.8.30
+charset-normalizer==3.3.2
+click==8.1.7
+contourpy==1.1.1
+cycler==0.12.1
+dataclasses-json==0.6.7
+distro==1.9.0
+dnspython==2.6.1
+eventlet==0.36.1
+exceptiongroup==1.2.2
+faiss-cpu==1.8.0.post1
+faiss-gpu==1.7.2
+fastapi==0.114.1
+ffmpy==0.4.0
+filelock==3.16.0
+flask==3.0.3
+Flask-Cors==5.0.0
+Flask-SocketIO==5.3.7
+fonttools==4.53.1
+frozenlist==1.4.1
+fsspec==2024.9.0
+gradio==4.44.0
+gradio-client==1.3.0
+greenlet==3.1.0
+groq==0.11.0
+gunicorn==23.0.0
+h11==0.14.0
+httpcore==1.0.5
+httpx==0.27.2
+huggingface-hub==0.24.6
+idna==3.8
+importlib-metadata==8.5.0
+importlib-resources==6.4.5
+itsdangerous==2.2.0
+jinja2==3.1.4
+joblib==1.4.2
+jsonpatch==1.33
+jsonpointer==3.0.0
+kiwisolver==1.4.7
+langchain==0.2.16
+langchain-community==0.2.16
+langchain-core==0.2.39
+langchain-groq==0.1.9
+langchain-huggingface==0.0.3
+langchain-text-splitters==0.2.4
+langsmith==0.1.117
+markdown-it-py==3.0.0
+MarkupSafe==2.1.5
+marshmallow==3.22.0
+matplotlib==3.7.5
+mdurl==0.1.2
+mpmath==1.3.0
+multidict==6.1.0
+mypy-extensions==1.0.0
+networkx==3.1
+numpy==1.24.4
+nvidia-cublas-cu12==12.1.3.1
+nvidia-cuda-cupti-cu12==12.1.105
+nvidia-cuda-nvrtc-cu12==12.1.105
+nvidia-cuda-runtime-cu12==12.1.105
+nvidia-cudnn-cu12==9.1.0.70
+nvidia-cufft-cu12==11.0.2.54
+nvidia-curand-cu12==10.3.2.106
+nvidia-cusolver-cu12==11.4.5.107
+nvidia-cusparse-cu12==12.1.0.106
+nvidia-nccl-cu12==2.20.5
+nvidia-nvjitlink-cu12==12.6.68
+nvidia-nvtx-cu12==12.1.105
+orjson==3.10.7
+packaging==24.1
+pandas==2.0.3
+pillow==10.4.0
+psutil==5.9.8
+pydantic==2.9.1
+pydantic-core==2.23.3
+pydub==0.25.1
+pygments==2.18.0
+pyparsing==3.1.4
+python-dateutil==2.9.0.post0
+python-dotenv==1.0.1
+python-engineio==4.9.1
+python-multipart==0.0.9
+python-socketio==5.11.4
+pytz==2024.2
+PyYAML==6.0.2
+rank-bm25==0.2.2
+regex==2024.7.24
+requests==2.32.3
+rich==13.8.1
+ruff==0.6.4
+safetensors==0.4.5
+scikit-learn==1.3.2
+scipy==1.10.1
+semantic-version==2.10.0
+sentence-transformers==3.1.0
+shellingham==1.5.4
+simple-websocket==1.0.0
+six==1.16.0
+sniffio==1.3.1
+spaces==0.30.2
+SQLAlchemy==2.0.34
+starlette==0.38.5
+sympy==1.13.2
+tenacity==8.5.0
+threadpoolctl==3.5.0
+tokenizers==0.19.1
+tomlkit==0.12.0
+torch==2.4.1
+tqdm==4.66.5
+transformers==4.44.2
+triton==3.0.0
+typer==0.12.5
+typing-extensions==4.12.2
+typing-inspect==0.9.0
+tzdata==2024.1
+urllib3==2.2.2
+uvicorn==0.30.6
+websockets==12.0
+werkzeug==3.0.4
+wsproto==1.2.0
+yarl==1.11.1
+zipp==3.20.1

templates/chat.html

@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ADAFSA RAG Chatbot Demo</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style>
+        *{
+            direction: rtl;
+        }
+        .main-chat-container{
+            position: relative;
+            background-color: rgb(0, 0, 0, 0.4);
+            font-family: "DM Sans", sans-serif;
+        }
+
+        .chat-container-wrapper{
+            width: 100%;
+            height: 100vh;
+            background-color: white;
+            border: 1px solid rgb(221, 221, 221);
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0px 0px 15px 8px rgba(255,255,255,0.1);
+            z-index: 9999;
+            /* border: 10 px solid red; */
+            font-family: "DM Sans", sans-serif;
+        }
+
+        /* @media(max-width: 800px){
+        .chat-container-wrapper{
+            width: calc(100% - 30px);
+            margin: auto;
+        }
+        } */
+
+        .chat-container-wrapper * {
+            font-family: "DM Sans", sans-serif;
+        }
+
+        /* .chat-container-wrapper .chatbot-header{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+        } */
+
+        .chat-container-wrapper a{
+            color: rgb(11, 172, 235);
+            text-decoration:underline;
+        }
+
+        .d-none{
+            display: none;
+        }
+        .main-chat-container{
+            transition: opacity 0.5s ease-in-out;
+        }
+
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        .styled-scrolllbar::-webkit-scrollbar {
+        display: none;
+        }
+
+        /* Hide scrollbar for IE, Edge and Firefox */
+        ::-webkit-scrollbar {
+        width: 6px;
+        border-radius: 5px;
+        }
+
+        /* Track */
+        ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        }
+
+        /* Handle */
+        ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+        }
+
+        /* Handle on hover */
+        ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+        }
+
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        .hide-scrolllbar::-webkit-scrollbar {
+            display: none;
+        }
+
+        /* Hide scrollbar for IE, Edge and Firefox */
+        .hide-scrolllbar {
+        -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+
+        .question-item:hover{
+        background-color: rgb(245, 245, 245);
+        }
+
+        .sendbtn{
+            background-color: black;
+            transition: all 0.2s ease-in-out;
+            animation: scale-out 0.1s;
+        }
+
+        .sendbtn:hover{
+            color: white;
+            scale: 1.1;
+        }
+        .sendbtn:hover svg{
+            stroke: white
+        }
+
+        div[contenteditable]:empty:before {
+            content: attr(data-placeholder);
+            display: inline-block;
+            pointer-events: none;
+        }
+
+        /* div[contenteditable]:focus:empty:before {
+            content: 'Start typing';
+        } */
+        /* HTML: <div class="loader"></div> */
+        /* HTML: <div class="loader"></div> */
+        .chat-loader {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 8px 10px;
+        }
+        .chat-loader .dot {
+            width: 8px;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background-color: gray;
+            animation: l5 0.6s ease-in-out infinite;
+        }
+        .chat-loader .dot:nth-child(1){
+            animation-delay: 0s;
+        }
+        .chat-loader .dot:nth-child(2){
+            animation-delay: 0.2s;
+        }
+        .chat-loader .dot:nth-child(3){
+            animation-delay: 0.3s;
+        }
+        .message-content *{
+            width: 100%;
+            font-size: 16px;
+        }
+        .neumorphic-box-shadow{
+            border-radius: 50px;
+            background: #e0e0e0;
+            box-shadow:  20px 20px 17px #cecece,
+                        -20px -20px 17px #f2f2f2;
+        }
+
+        @keyframes l5 {
+            0%  {scale: 0.2; opacity: 0.2;}
+            33% {scale: 0.5; opacity: 0.5;}
+            66% {scale: 0.7; opacity: 0.7;}
+            100%{scale: 1; opacity: 1; }
+        }
+        .pulse {
+            animation: pulse-animation 2s infinite;
+        }
+
+        @keyframes pulse-animation {
+            0% {
+                scale: 0.9;
+                box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+            }
+            50%{
+                scale: 1
+            }
+            100% {
+                scale: 0.9;
+                box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+            }
+        }
+
+        #userwayAccessibilityIcon{
+            display: none;
+        }
+
+
+        /*small{*/
+        /*font-size: 12px;*/
+        /*}*/
+
+        .bg-special-secondary{
+        background-color: rgb(230, 230, 230);
+        }
+        .message-content *:not(i){
+            font-family: "DM Sans", sans-serif;
+        }
+
+        .message-content *:not(h1,h2,h3,h4,h5,h6){
+            font-weight: 500;
+        }
+
+        .message-content strong{
+            color: black;
+            font-weight: bold;
+        }
+        .message-content h3:not(:first-of-type){
+            margin: 18px 0px 10px 0px;
+            color: black;
+        }
+        .message-content h4{
+            margin: 15px 0px 8px 0px;
+        }
+        .message-content h5, .message-content h6{
+            margin: 12px 0px 6px 0px;
+        }
+        .message-content ol, .message-content ul{
+            margin: 18px 0px;
+        }
+        .message-content ol li, .message-content ul li{
+            margin: 12px 0px ;
+        }
+        .message-content p{
+            margin-bottom: 18px;
+            text-wrap: pretty;
+        }
+        .message-content a{
+            text-wrap: pretty;
+        }
+        .loading-text{
+            position: relative;
+        }
+        .loading-text::after{
+            content: '....';
+            animation: loading-text-animation 1s infinite;
+        }
+        @keyframes loading-text-animation {
+            0%{
+                content: ''
+            }
+            25%{
+                content: '.'
+            }
+            50%{
+                content: '..'
+            }
+            75%{
+                content: '...'
+            }
+            100%{
+                content: '....'
+            }
+        }
+
+        *{ 
+            unicode-bidi:bidi-override; 
+            direction: RTL; 
+        }
+
+    </style>
+
+
+</head>
+<body>
+    <div class="main-chat-container show-chatbot flex items-center justify-center">
+        <div class="w-full chat-container-wrapper hide-scrolllbar p-sm-4 p-3 relative">
+            <div class="max-w-5xl mx-auto chatbot-header w-full flex flex-row-reverse items-center justify-between pb-2" style="direction: ltr;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <img src="./static/logow.png" class="w-52" alt="logo">
+                    <!-- <span class="text-dark mb-0 chatbot-title" style="font-weight: 800; font-size: 20px; direction: ltr;">ADAFSA Chatbot</span> -->
+                </div>
+                <div class="flex items-center" style="gap: 5px;">
+                    <button class="clearBtn flex items-center justify-center gap-1 px-4 py-2 bg-black rounded-full" type="button" style="direction: ltr;">
+                        <span class="flex items-center justify-center" style="width: 20px; height: 20px;">
+                            <svg width="24px" height="24px" viewBox="-3.2 -3.2 22.40 22.40" xmlns="http://www.w3.org/2000/svg" fill="#050505" stroke="#ffffff" stroke-width="0.064"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M13.9907,1.31133017e-07 C14.8816,1.31133017e-07 15.3277,1.07714 14.6978,1.70711 L13.8556,2.54922 C14.421,3.15654 14.8904,3.85028 15.2448,4.60695 C15.8028,5.79836 16.0583,7.109 15.9888,8.42277 C15.9193,9.73654 15.5268,11.0129 14.8462,12.1388 C14.1656,13.2646 13.2178,14.2053 12.0868,14.8773 C10.9558,15.5494 9.67655,15.9322 8.3623,15.9918 C7.04804,16.0514 5.73937,15.7859 4.55221,15.2189 C3.36505,14.652 2.33604,13.8009 1.55634,12.7413 C0.776635,11.6816 0.270299,10.446 0.0821822,9.14392 C0.00321229,8.59731 0.382309,8.09018 0.928918,8.01121 C1.47553,7.93224 1.98266,8.31133 2.06163,8.85794 C2.20272,9.83451 2.58247,10.7612 3.16725,11.556 C3.75203,12.3507 4.52378,12.989 5.41415,13.4142 C6.30452,13.8394 7.28602,14.0385 8.27172,13.9939 C9.25741,13.9492 10.2169,13.6621 11.0651,13.158 C11.9133,12.6539 12.6242,11.9485 13.1346,11.1041 C13.6451,10.2597 13.9395,9.30241 13.9916,8.31708 C14.0437,7.33175 13.8521,6.34877 13.4336,5.45521 C13.178,4.90949 12.8426,4.40741 12.4402,3.96464 L11.7071,4.69779 C11.0771,5.32776 9.99996,4.88159 9.99996,3.99069 L9.99996,1.31133017e-07 L13.9907,1.31133017e-07 Z M1.499979,4 C2.05226,4 2.499979,4.44772 2.499979,5 C2.499979,5.55229 2.05226,6 1.499979,6 C0.947694,6 0.499979,5.55228 0.499979,5 C0.499979,4.44772 0.947694,4 1.499979,4 Z M3.74998,1.25 C4.30226,1.25 4.74998,1.69772 4.74998,2.25 C4.74998,2.80229 4.30226,3.25 3.74998,3.25 C3.19769,3.25 2.74998,2.80228 2.74998,2.25 C2.74998,1.69772 3.19769,1.25 3.74998,1.25 Z M6.99998,0 C7.55226,0 7.99998,0.447716 7.99998,1 C7.99998,1.55229 7.55226,2 6.99998,2 C6.44769,2 5.99998,1.55229 5.99998,1 C5.99998,0.447716 6.44769,0 6.99998,0 Z"></path> </g></svg>
+                        </span>
+                        <div class="text-white" style="direction: ltr;">Clear</div>
+                    </button>
+
+                </div>
+            </div>
+
+            <hr>
+
+
+            <div class="relative chat-container w-full mx-auto hide-scrolllbar rounded-xl mb-2" style="max-width: 800px; flex-grow: 1; padding: 20px 0px; display: flex; flex-direction: column; gap: 10px; text-wrap: pretty; overflow-y: auto; overflow-x: hidden;">
+                <div class="start-block load-chat-block w-full flex-grow flex flex-col items-center justify-center bg-white z-10">
+                    <div class="w-full flex-grow flex flex-col items-center justify-center y-4 text-center">
+                        <img src="./static/bg-image.jpg" class="w-1/2" alt="adafsa-logo">
+                        <h1 class="text-5xl font-semibold mb-4" style="direction: ltr;">
+                            ADAFSA Chatbot Demo
+                        </h1>
+                        <h3 class="max-w-xl text-xl text-center text-dark font-medium d-block mx-auto mb-3">
+                            ابدأ بطرح أسئلتك وسأجيب عليها أو يمكنك استخدام الأسئلة التالية كنقطة بداية
+                        </h3>
+                    </div>
+                    <div class="w-full flex-end mx-auto" style="max-width: 800px;">
+                        <div class="grid md:grid-cols-3 grid-cols-2 m-0 p-0">
+
+
+                            <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">
+                                    الموسم المناسب لزراعة الذرة العلفية ؟
+                                </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">
+                                    ما هي الاحتياجات المائية لتربية الحيوانات؟
+                                </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">
+                                    ما كمية أعلاف الجت المستلمة في منطقة الظفرة عام <span class="inline-block" style="direction: ltr;">2022</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">
+                                    الموسم المناسب لزراعة الطماطم في الحقل المكشوف بدولة الإمارات؟
+                                </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">
+                                    ما هي خطوات إنتاج الشتلات؟
+                                </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">
+                                    شروط اختيار مكان منحل العسل؟
+                                </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">
+                                    ما هو تقييم مطعم قصر نجد؟
+                                </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>
+                            </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>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="absolute w-full h-full top-0 left-0 z-0 flex items-center justify-center">
+                    <img src="./static/image.png" class="opacity-10" alt="greyscale-image">
+                </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>
+                    <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>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- SocketIO -->
+    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
+    <!-- Showdown.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script>
+
+        // Initialize Socket.IO client
+        var socket = io.connect('http://127.0.0.1:5000/', {
+            transports: ['websocket']
+        });
+
+        setInterval(()=>{
+            socket.emit('ping', { "message": "I am alive!"});
+        }, 30000)
+
+        // Empty response variable to keep track of response
+        var response="";
+
+        // Converter for Markdown to HTML
+        var converter = new showdown.Converter();
+
+        // Function to load a chat block indicating that the system is searching
+        function loadChatBlock(){
+            let lastMessageElement = $(".chat-container div:last-child");
+            if(lastMessageElement.hasClass("response-block")){
+                return;
+            }
+            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>
+                            </span>
+                        </div>
+                        <div class="px-3 py-1 order-1">
+                            <div class="message-content pr-2" style="width: 100%; height: 100%; margin: auto; font-weight: 500; text-wrap: pretty; text-align: right;">
+                            <span class="loading-text">البحث</span>
+                            </div>
+                        </div>
+                    </div>
+                `
+            );
+        }
+
+        function appendQuestion(question) {
+            if (!$(".start-block").hasClass("d-none")) {
+                $(".start-block").slideUp(200);
+                $(".start-block").addClass("d-none");
+                $(".start-block").removeClass("flex");
+            }
+
+            const isRTL = true;
+
+            $(".chat-container").append(`
+                <div class="chat-block question-block w-full flex flex-row-reverse items-center justify-end p-3 rtl z-10" style="background-color: rgba(255, 255, 255, 0.529);">
+                    <div class="flex items-center order-2">
+                        <span style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 3px; border: 2px solid #c2c2c2;">
+                            <svg fill="#000000" width="36px" height="36px" viewBox="0 0 256 256" id="Flat" 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="M128,76a44,44,0,1,1-44,44A43.99983,43.99983,0,0,1,128,76Zm48-12h16V80a8,8,0,0,0,16,0V64h16a8,8,0,0,0,0-16H208V32a8,8,0,0,0-16,0V48H176a8,8,0,0,0,0,16Zm45.56006,40.95605a8.00039,8.00039,0,0,0-6.64893,9.15381A89.00044,89.00044,0,0,1,216,128a87.63672,87.63672,0,0,1-22.24182,58.41016,79.7044,79.7044,0,0,0-24.431-22.97461,59.83641,59.83641,0,0,1-82.6543,0A79.70345,79.70345,0,0,0,62.2417,186.41016,87.9498,87.9498,0,0,1,128,40a89.02966,89.02966,0,0,1,13.89062,1.08887,7.99994,7.99994,0,1,0,2.50391-15.80274A104.0826,104.0826,0,0,0,24,128a103.74716,103.74716,0,0,0,33.81934,76.68066,7.94507,7.94507,0,0,0,1.32629,1.18946,103.784,103.784,0,0,0,137.71252-.00293,7.94633,7.94633,0,0,0,1.31678-1.18115A103.74751,103.74751,0,0,0,232,128a105.04749,105.04749,0,0,0-1.28613-16.39453A7.99752,7.99752,0,0,0,221.56006,104.95605Z"></path> </g></svg>
+                        </span>
+                    </div>
+                    <div class="px-3 order-1">
+                        <div class="message-content pr-2" style="width: 100%; margin: auto; text-wrap: pretty; font-size: 14px; text-align: right;">
+                            <span> ${question} </span>
+                        </div>
+                    </div>
+                </div>
+            `);
+
+            $(".chat-container").animate({
+                scrollTop: $('.chat-container')[0].scrollHeight
+            }, 1000);
+        }
+
+        // Function to handle sending a question via Socket.IO and receiving an answer
+        function provideQuestionToAnswer(){
+
+            response = "";
+            let question = $("#question-box").text();
+            appendQuestion(question);
+            $("#question-box").text("");
+
+            setTimeout(loadChatBlock, 600);
+
+            // // Emit question via Socket.IO
+            // socket.emit('message', { question: question, session_id: 'abc123'  });
+
+             // Emit question and language via Socket.IO
+            socket.emit('message', { question: question, session_id: 'abc123' });
+        }
+
+        function appendAnswer(answer) {
+            let lastElement = $(".chat-container .chat-block:last-child");
+            const isRTL = true;
+
+            if (lastElement.hasClass("response-block")) {
+                $(".chat-container .chat-block:last-child").find(".message-content").html(answer);
+            } else {
+                lastElement.remove();
+                $(".chat-container").append(`
+                    <div class="chat-block response-block w-full flex flex-row-reverse items-start justify-end bg-secondary p-3 rounded-xl rtl z-10" style="background-color: rgba(242, 255, 225, 0.529);">
+                        <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">
+                            <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";" >
+                                ${answer}
+                            </div>
+                        </div>
+                    </div>
+                `);
+            }
+
+            $(".chat-container").scrollTop($(".chat-container")[0].scrollHeight);
+        }
+
+
+        // Function to handle the answer received from the server
+        socket.on('response', (data) => {
+            response += data;
+            model_response = converter.makeHtml(response);
+            appendAnswer(model_response);
+        });
+
+        // Open the chatbot interface
+        function openchatbot(){
+            console.log("working here");
+            $(".main-chat-container").removeClass("hide-chatbot");
+            $(".main-chat-container").addClass("show-chatbot");
+            $(".startchatbtn").addClass("d-none");
+            $(".startchatbtn").removeClass("flex");
+        }
+
+        // Close the chatbot interface
+        $(".startchatbtn").click(openchatbot);
+
+        $(".closechatbot").click(function(){
+            $(".main-chat-container").removeClass("show-chatbot");
+            $(".main-chat-container").addClass("hide-chatbot");
+            $(".startchatbtn").removeClass("d-none");
+            $(".startchatbtn").addClass("flex");
+        });
+
+        // Send the question and get the answer
+        $(".sendbtn").click(provideQuestionToAnswer);
+
+        // Handle the Enter key press in the question box
+        $(document).ready(() => {
+            $("#question-box").text("Write your question here...");
+            $("#question-box").text("");
+
+            $('#question-box').on('keydown', function(event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    provideQuestionToAnswer();
+                }
+            });
+        });
+
+        // Handle connection errors
+        socket.on('connect_error', (error) => {
+            console.error("Connection error:", error);
+            appendMessage("Sorry, there was a problem connecting to the server. Please try again later.");
+        });     
+
+        // // Handle disconnection
+        // socket.on('connect', (reason) => {
+        //     // Emit website category via Socket.IO
+        //     socket.emit('website', { website: "UAE_Legislation", session_id: 'abc123'  });
+        // });
+        
+        // Handle disconnection
+        socket.on('disconnect', (reason) => {
+            console.warn("Disconnected from server:", reason);
+            response = "";
+            // appendAnswer("You have been disconnected from the server. Please refresh the page to reconnect.");
+            socket = io.connect('http://127.0.0.1:5000/', {
+                transports: ['websocket']
+            });
+        });
+
+        // Clear the chat container
+        $(".clearBtn").click(() => {
+            $('.chat-container').find('.chat-block').remove();
+            $(".start-block").removeClass('d-none');
+            $(".start-block").addClass('flex');
+            $(".start-block").slideDown();
+        });
+
+        // Handle click on example questions
+        $(".question-item").on("click", (e) => {
+            let exampleQuestion = e.target.innerHTML;
+            $("#question-box").text(exampleQuestion);
+            $(".sendbtn").click();
+        });
+    </script>
+
+</body>
+</html>