feat: Added know-my-doc-code

Dockerfile

@@ -0,0 +1,34 @@
+FROM python:3.10
+
+# Set working directory
+WORKDIR /app
+
+# Install other dependencies
+RUN apt-get update && \
+    apt-get install -y libmagic-dev poppler-utils tesseract-ocr && \
+    apt-get install -y libxml2-dev libxslt1-dev && \
+    apt-get install -y git && \
+    pip install torch && \
+    apt-get install -y build-essential python3-dev && \
+    apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
+
+# Copy requirements file and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+RUN [ "python", "-c", "import nltk; nltk.download('punkt', download_dir='/usr/local/nltk_data')" ]
+RUN [ "python", "-c", "import nltk; nltk.download('averaged_perceptron_tagger', download_dir='/usr/local/nltk_data')" ]
+
+# Copy application files
+COPY . .
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=5001
+
+# Expose port for Flask app
+EXPOSE 5001
+
+# Start Flask app
+CMD ["flask", "run"]

README.md

@@ -1,13 +1,99 @@
----
-title: Know My Doc
-emoji: 📈
-colorFrom: yellow
-colorTo: pink
-sdk: gradio
-sdk_version: 3.22.1
-app_file: app.py
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# KnowMyDoc
+
+![Python version](https://img.shields.io/badge/python-3.7%20%7C%203.8%20%7C%203.9-blue?style=flat-square)
+![License](https://img.shields.io/badge/license-MIT-green?style=flat-square)
+![Commit Activity](https://img.shields.io/github/last-commit/jainsid24/neural-network-simulation?style=flat-square)
+![Repo Size](https://img.shields.io/github/repo-size/jainsid24/neural-network-simulation?style=flat-square)
+![OpenAI API key](https://img.shields.io/badge/OpenAI%20API%20key-required-red?style=flat-square)
+![Docker](https://img.shields.io/badge/docker-available-blue?style=flat-square)
+[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black?style=flat-square)
+
+<p align="center">
+    <img src="chat.gif" alt="Chat" width="250" style="max-width: 100%;"/>
+</p>
+<p align="center">
+    <em><b>KnowMyDoc Chat</b></em>
+</p>
+
+KnowMyDoc is a GPT3.5 powered Python-based conversational AI tool that enables users to build a reference enabled chatbot by utilizing advanced machine learning techniques and natural language processing (NLP) algorithms. The utility is fully containerized and API-driven, which allows for a seamless and rapid chatbot creation experience.
+
+KnowMyDoc leverages the [LangChain](https://github.com/hwchase17/langchain) library for LLM prompt engineering and conversation chaining. Users can easily customize the chatbot's prompts and personalize its responses based on the context and tone of the conversation. KnowMyDoc's LLM-based approach ensures that the chatbot can maintain a consistent and coherent conversation even when dealing with large amounts of data and provide relevant sources per response. The chatbots also remain in the confines of provided knowledge.
+
+In addition, KnowMyDoc utilizes the Chroma vector similarity search engine to enable fast and efficient lookup of relevant data. By creating embeddings of users' documents and web pages, KnowMyDoc can quickly identify and retrieve the most relevant information for the user's queries.
+
+Other features of KnowMyDoc include:
+
+* Support for loading documents from local data sources and web urls
+* Support for persona and message tone
+* AI qa limited to knowledge sources
+* Text splitting to optimize indexing and similarity search
+* NLTK support for text processing and tokenization
+Support for OpenAI embeddings and vector stores, including Chroma
+* Logging support for troubleshooting and analysis
+
+## Getting Started
+To use this utility:
+1. Clone the repository
+```
+git clone https://github.com/jainsid24/know-my-doc
+```
+2. Build the Docker image by running the following command in the terminal:
+```
+docker build -t know-my-doc:latest .
+```
+3. Once the image is built, run the Docker container using the following command:
+```
+docker run -p 5001:5001 know-my-doc
+```
+4. Use curl/postman for API call
+```
+curl --header "Content-Type: application/json" \
+     --request POST \
+     --data '{"question": "When was JWST launched?"}' \
+     http://<pods-ip-address>:5001/api/chat
+```
+
+## Configuration
+
+Before you can use the utility, you need to set up the configuration file. The configuration file is a YAML file that contains the following options:
+
+* openai_api_key: Your OpenAI API key.
+* data_directory: The directory where your local data sources are located.
+* data_files_glob: A glob pattern that specifies which files in data_directory to use as data sources.
+* webpages: A list of URLs of webpages to use as data sources.
+* tone: The tone to use for the chatbot's responses (e.g., "formal", "informal", "friendly", etc.).
+* persona: The persona to use for the chatbot.
+* You can copy the config.example.yaml file to config.yaml and modify the options as needed.
+
+## Usage
+
+To start the chatbot, run:
+
+```
+python app.py
+```
+
+This will start the chatbot on port 5000.
+
+To use the chatbot, send a POST request to http://localhost:5000/api/chat with a JSON payload containing the question to ask, like this:
+
+```
+curl -X POST \
+  http://localhost:5000/api/chat \
+  -H 'Content-Type: application/json' \
+  -d '{"question": "What is the capital of France?"}'
+```
+
+This will return a JSON response containing the chatbot's answer to the question:
+
+```
+{"response": "The capital of France is Paris."}
+```
+
+## Contributing
+
+If you find a bug or have an idea for a new feature, please open an issue or submit a pull request.
+
+## License
+
+This project is licensed under the MIT License. See the LICENSE file for details.

app2.py

@@ -0,0 +1,127 @@
+import os
+import logging
+from flask import Flask, request, jsonify, render_template
+from langchain.chains.question_answering import load_qa_chain
+from langchain.document_loaders import DirectoryLoader
+from langchain.llms import OpenAIChat
+from langchain.prompts import PromptTemplate
+from langchain.memory import ConversationBufferMemory
+from langchain.document_loaders import WebBaseLoader
+import yaml
+
+from langchain.embeddings import OpenAIEmbeddings
+from langchain.text_splitter import CharacterTextSplitter
+from langchain.embeddings.openai import OpenAIEmbeddings
+from langchain.vectorstores import Chroma
+
+import nltk
+
+nltk.download("punkt")
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Load configuration from YAML file
+with open("config.yaml", "r") as f:
+    config = yaml.safe_load(f)
+
+os.environ["OPENAI_API_KEY"] = config["openai_api_key"]
+
+template_dir = os.path.abspath("templates")
+app = Flask(__name__, template_folder=template_dir, static_folder="static")
+
+# Load the files
+loader = DirectoryLoader(config["data_directory"], glob=config["data_files_glob"])
+docs = loader.load()
+
+webpages = config.get("webpages", [])
+web_docs = []
+for webpage in webpages:
+    logger.info(f"Loading data from webpage {webpage}")
+    loader = WebBaseLoader(webpage)
+    web_docs += loader.load()
+
+result = docs + web_docs
+
+tone = config.get("tone", "default")
+persona = config.get("persona", "default")
+
+text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+texts = text_splitter.split_documents(result)
+embeddings = OpenAIEmbeddings(openai_api_key=config["openai_api_key"])
+docsearch = Chroma.from_documents(texts, embeddings)
+
+# Initialize the QA chain
+logger.info("Initializing QA chain...")
+chain = load_qa_chain(
+    OpenAIChat(),
+    chain_type="stuff",
+    memory=ConversationBufferMemory(memory_key="chat_history", input_key="human_input"),
+    prompt=PromptTemplate(
+        input_variables=["chat_history", "human_input", "context", "tone", "persona"],
+        template="""You are a chatbot who acts like {persona}, having a conversation with a human.
+
+Given the following extracted parts of a long document and a question, Create a final answer with references ("SOURCES") in the tone {tone}. 
+If you don't know the answer, just say that you don't know. Don't try to make up an answer.
+ALWAYS return a "SOURCES" part in your answer.
+SOURCES should only be hyperlink URLs which are genuine and not made up.
+
+{context}
+
+{chat_history}
+Human: {human_input}
+Chatbot:""",
+    ),
+    verbose=False,
+)
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/api/chat", methods=["POST"])
+def chat():
+    try:
+        # Get the question from the request
+        question = request.json["question"]
+        documents = docsearch.similarity_search(question, include_metadata=True)
+
+        # Get the bot's response
+        response = chain(
+            {
+                "input_documents": documents,
+                "human_input": question,
+                "tone": tone,
+                "persona": persona,
+            },
+            return_only_outputs=True,
+        )["output_text"]
+        
+        # Increment message counter
+        session_counter = request.cookies.get('session_counter')
+        if session_counter is None:
+            session_counter = 0
+        else:
+            session_counter = int(session_counter) + 1
+
+        # Check if it's time to flush memory
+        if session_counter % 10 == 0:
+            chain.memory.clear()
+
+        # Set the session counter cookie
+        resp = jsonify({"response": response})
+        resp.set_cookie('session_counter', str(session_counter))
+
+        # Return the response as JSON with the session counter cookie
+        return resp
+
+    except Exception as e:
+        # Log the error and return an error response
+        logger.error(f"Error while processing request: {e}")
+        return jsonify({"error": "Unable to process the request."}), 500
+
+if __name__ == "__main__":
+    app.run(debug=True)

base/ailife.txt

@@ -0,0 +1,18 @@
+Isaac Asimov, a renowned science fiction writer, is famous for his work in creating the "Three Laws of Robotics." These laws are fictional guidelines intended to ensure that robots behave ethically and do not harm humans. These laws have become a significant contribution to the science fiction genre and have also influenced the field of robotics in real life.
+
+The Three Laws of Robotics are as follows:
+
+A robot may not injure a human being or, through inaction, allow a human being to come to harm.
+A robot must obey the orders given to it by human beings, except where such orders would conflict with the first law.
+A robot must protect its existence as long as such protection does not conflict with the first or second law.
+The first law is the most crucial law of robotics. It forbids robots from harming humans, either directly or indirectly, through inaction. Robots are programmed to act in a way that ensures the safety of humans. This law applies to all robots, regardless of their level of intelligence or autonomy.
+
+The second law states that robots must obey orders given to them by humans, provided that these orders do not violate the first law. This law was added to ensure that robots would be helpful to humans, rather than acting in their own interests.
+
+The third law ensures that robots do not act in a way that would result in their own destruction, as long as doing so would not violate the first two laws. This law is designed to prevent humans from intentionally or unintentionally causing harm to robots, which could result in their destruction.
+
+Asimov's laws of robotics have been influential in the development of the field of robotics. These laws have served as a model for the creation of robots in science fiction, and have inspired real-life robotics engineers to create ethical robots that prioritize the safety of humans.
+
+Despite the popularity of the Three Laws of Robotics, some have criticized their applicability to real-world robotics. The laws are somewhat limited in scope, and do not take into account more complex ethical considerations that may arise when robots interact with humans. However, Asimov's laws are a starting point for the development of more advanced ethical guidelines that can be used to ensure the safety of humans in the presence of robots.
+
+In conclusion, Isaac Asimov's Three Laws of Robotics have played a significant role in shaping the way that we think about robots and their interactions with humans. These laws have been a valuable starting point for the development of ethical guidelines in the field of robotics, and they continue to inspire engineers and writers alike. While the laws may not be perfect, they represent an essential contribution to the field of science fiction and the study of robotics.

config.yaml

@@ -0,0 +1,8 @@
+openai_api_key: "Open API Key"
+data_directory: "base" 
+data_files_glob: "*.txt"
+webpages:
+  - "https://en.wikipedia.org/wiki/James_Webb_Space_Telescope"
+  - "https://en.wikipedia.org/wiki/Black_hole"
+tone: "formal"
+persona: "buddha"

docs/index.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8">
+  <title>app.py</title>
+  <link rel="stylesheet" href="pycco.css">
+</head>
+<body>
+<div id='container'>
+  <div id="background"></div>
+  <div class='section'>
+    <div class='docs'><h1>app.py</h1></div>
+  </div>
+  <div class='clearall'>
+  <div class='section' id='section-0'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-0'>#</a>
+      </div>
+      
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">os</span>
+<span class="kn">import</span> <span class="nn">logging</span>
+<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="n">jsonify</span><span class="p">,</span> <span class="n">render_template</span>
+<span class="kn">from</span> <span class="nn">langchain.chains.question_answering</span> <span class="kn">import</span> <span class="n">load_qa_chain</span>
+<span class="kn">from</span> <span class="nn">langchain.document_loaders</span> <span class="kn">import</span> <span class="n">DirectoryLoader</span>
+<span class="kn">from</span> <span class="nn">langchain.llms</span> <span class="kn">import</span> <span class="n">OpenAIChat</span>
+<span class="kn">from</span> <span class="nn">langchain.prompts</span> <span class="kn">import</span> <span class="n">PromptTemplate</span>
+<span class="kn">from</span> <span class="nn">langchain.memory</span> <span class="kn">import</span> <span class="n">ConversationBufferMemory</span>
+<span class="kn">from</span> <span class="nn">langchain.document_loaders</span> <span class="kn">import</span> <span class="n">WebBaseLoader</span>
+<span class="kn">import</span> <span class="nn">yaml</span>
+
+<span class="kn">from</span> <span class="nn">langchain.embeddings</span> <span class="kn">import</span> <span class="n">OpenAIEmbeddings</span>
+<span class="kn">from</span> <span class="nn">langchain.text_splitter</span> <span class="kn">import</span> <span class="n">CharacterTextSplitter</span>
+<span class="kn">from</span> <span class="nn">langchain.embeddings.openai</span> <span class="kn">import</span> <span class="n">OpenAIEmbeddings</span>
+<span class="kn">from</span> <span class="nn">langchain.vectorstores</span> <span class="kn">import</span> <span class="n">Chroma</span>
+
+<span class="kn">import</span> <span class="nn">nltk</span>
+
+<span class="n">nltk</span><span class="o">.</span><span class="n">download</span><span class="p">(</span><span class="s2">&quot;punkt&quot;</span><span class="p">)</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-1'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-1'>#</a>
+      </div>
+      <p>Set up logging</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre><span class="n">logging</span><span class="o">.</span><span class="n">basicConfig</span><span class="p">(</span><span class="n">level</span><span class="o">=</span><span class="n">logging</span><span class="o">.</span><span class="n">INFO</span><span class="p">)</span>
+<span class="n">logger</span> <span class="o">=</span> <span class="n">logging</span><span class="o">.</span><span class="n">getLogger</span><span class="p">(</span><span class="vm">__name__</span><span class="p">)</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-2'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-2'>#</a>
+      </div>
+      <p>Load configuration from YAML file</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre><span class="k">with</span> <span class="nb">open</span><span class="p">(</span><span class="s2">&quot;config.yaml&quot;</span><span class="p">,</span> <span class="s2">&quot;r&quot;</span><span class="p">)</span> <span class="k">as</span> <span class="n">f</span><span class="p">:</span>
+    <span class="n">config</span> <span class="o">=</span> <span class="n">yaml</span><span class="o">.</span><span class="n">safe_load</span><span class="p">(</span><span class="n">f</span><span class="p">)</span>
+
+<span class="n">os</span><span class="o">.</span><span class="n">environ</span><span class="p">[</span><span class="s2">&quot;OPENAI_API_KEY&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">config</span><span class="p">[</span><span class="s2">&quot;openai_api_key&quot;</span><span class="p">]</span>
+
+<span class="n">template_dir</span> <span class="o">=</span> <span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">abspath</span><span class="p">(</span><span class="s2">&quot;templates&quot;</span><span class="p">)</span>
+<span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">,</span> <span class="n">template_folder</span><span class="o">=</span><span class="n">template_dir</span><span class="p">,</span> <span class="n">static_folder</span><span class="o">=</span><span class="s2">&quot;static&quot;</span><span class="p">)</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-3'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-3'>#</a>
+      </div>
+      <p>Load the files</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre><span class="n">loader</span> <span class="o">=</span> <span class="n">DirectoryLoader</span><span class="p">(</span><span class="n">config</span><span class="p">[</span><span class="s2">&quot;data_directory&quot;</span><span class="p">],</span> <span class="n">glob</span><span class="o">=</span><span class="n">config</span><span class="p">[</span><span class="s2">&quot;data_files_glob&quot;</span><span class="p">])</span>
+<span class="n">docs</span> <span class="o">=</span> <span class="n">loader</span><span class="o">.</span><span class="n">load</span><span class="p">()</span>
+
+<span class="n">webpages</span> <span class="o">=</span> <span class="n">config</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;webpages&quot;</span><span class="p">,</span> <span class="p">[])</span>
+<span class="n">web_docs</span> <span class="o">=</span> <span class="p">[]</span>
+<span class="k">for</span> <span class="n">webpage</span> <span class="ow">in</span> <span class="n">webpages</span><span class="p">:</span>
+    <span class="n">logger</span><span class="o">.</span><span class="n">info</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;Loading data from webpage </span><span class="si">{</span><span class="n">webpage</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">)</span>
+    <span class="n">loader</span> <span class="o">=</span> <span class="n">WebBaseLoader</span><span class="p">(</span><span class="n">webpage</span><span class="p">)</span>
+    <span class="n">web_docs</span> <span class="o">+=</span> <span class="n">loader</span><span class="o">.</span><span class="n">load</span><span class="p">()</span>
+
+<span class="n">result</span> <span class="o">=</span> <span class="n">docs</span> <span class="o">+</span> <span class="n">web_docs</span>
+
+<span class="n">tone</span> <span class="o">=</span> <span class="n">config</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;tone&quot;</span><span class="p">,</span> <span class="s2">&quot;default&quot;</span><span class="p">)</span>
+<span class="n">persona</span> <span class="o">=</span> <span class="n">config</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;persona&quot;</span><span class="p">,</span> <span class="s2">&quot;default&quot;</span><span class="p">)</span>
+
+<span class="n">text_splitter</span> <span class="o">=</span> <span class="n">CharacterTextSplitter</span><span class="p">(</span><span class="n">chunk_size</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span> <span class="n">chunk_overlap</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span>
+<span class="n">texts</span> <span class="o">=</span> <span class="n">text_splitter</span><span class="o">.</span><span class="n">split_documents</span><span class="p">(</span><span class="n">result</span><span class="p">)</span>
+<span class="n">embeddings</span> <span class="o">=</span> <span class="n">OpenAIEmbeddings</span><span class="p">(</span><span class="n">openai_api_key</span><span class="o">=</span><span class="n">config</span><span class="p">[</span><span class="s2">&quot;openai_api_key&quot;</span><span class="p">])</span>
+<span class="n">docsearch</span> <span class="o">=</span> <span class="n">Chroma</span><span class="o">.</span><span class="n">from_documents</span><span class="p">(</span><span class="n">texts</span><span class="p">,</span> <span class="n">embeddings</span><span class="p">)</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-4'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-4'>#</a>
+      </div>
+      <p>Initialize the QA chain</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre><span class="n">logger</span><span class="o">.</span><span class="n">info</span><span class="p">(</span><span class="s2">&quot;Initializing QA chain...&quot;</span><span class="p">)</span>
+<span class="n">chain</span> <span class="o">=</span> <span class="n">load_qa_chain</span><span class="p">(</span>
+    <span class="n">OpenAIChat</span><span class="p">(),</span>
+    <span class="n">chain_type</span><span class="o">=</span><span class="s2">&quot;stuff&quot;</span><span class="p">,</span>
+    <span class="n">memory</span><span class="o">=</span><span class="n">ConversationBufferMemory</span><span class="p">(</span><span class="n">memory_key</span><span class="o">=</span><span class="s2">&quot;chat_history&quot;</span><span class="p">,</span> <span class="n">input_key</span><span class="o">=</span><span class="s2">&quot;human_input&quot;</span><span class="p">),</span>
+    <span class="n">prompt</span><span class="o">=</span><span class="n">PromptTemplate</span><span class="p">(</span>
+        <span class="n">input_variables</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;chat_history&quot;</span><span class="p">,</span> <span class="s2">&quot;human_input&quot;</span><span class="p">,</span> <span class="s2">&quot;context&quot;</span><span class="p">,</span> <span class="s2">&quot;tone&quot;</span><span class="p">,</span> <span class="s2">&quot;persona&quot;</span><span class="p">],</span>
+        <span class="n">template</span><span class="o">=</span><span class="s2">&quot;&quot;&quot;You are a chatbot who acts like </span><span class="si">{persona}</span><span class="s2">, having a conversation with a human.</span>
+
+<span class="s2">Given the following extracted parts of a long document and a question, create a final answer only in the </span><span class="si">{tone}</span><span class="s2"> tone. Use only the sources in the document to create a response. Always quote the source in the end&quot;</span>
+
+<span class="si">{context}</span>
+
+<span class="si">{chat_history}</span>
+<span class="s2">Human: </span><span class="si">{human_input}</span>
+<span class="s2">Chatbot:&quot;&quot;&quot;</span><span class="p">,</span>
+    <span class="p">),</span>
+    <span class="n">verbose</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
+<span class="p">)</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-5'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-5'>#</a>
+      </div>
+      
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre><span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s2">&quot;/&quot;</span><span class="p">)</span>
+<span class="k">def</span> <span class="nf">index</span><span class="p">():</span>
+    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s2">&quot;index.html&quot;</span><span class="p">)</span>
+
+
+<span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s2">&quot;/api/chat&quot;</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;POST&quot;</span><span class="p">])</span>
+<span class="k">def</span> <span class="nf">chat</span><span class="p">():</span>
+    <span class="k">try</span><span class="p">:</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-6'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-6'>#</a>
+      </div>
+      <p>Get the question from the request</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre>        <span class="n">question</span> <span class="o">=</span> <span class="n">request</span><span class="o">.</span><span class="n">json</span><span class="p">[</span><span class="s2">&quot;question&quot;</span><span class="p">]</span>
+        <span class="n">documents</span> <span class="o">=</span> <span class="n">docsearch</span><span class="o">.</span><span class="n">similarity_search</span><span class="p">(</span><span class="n">question</span><span class="p">,</span> <span class="n">include_metadata</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-7'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-7'>#</a>
+      </div>
+      <p>Get the bot&rsquo;s response</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre>        <span class="n">response</span> <span class="o">=</span> <span class="n">chain</span><span class="p">(</span>
+            <span class="p">{</span>
+                <span class="s2">&quot;input_documents&quot;</span><span class="p">:</span> <span class="n">documents</span><span class="p">,</span>
+                <span class="s2">&quot;human_input&quot;</span><span class="p">:</span> <span class="n">question</span><span class="p">,</span>
+                <span class="s2">&quot;tone&quot;</span><span class="p">:</span> <span class="n">tone</span><span class="p">,</span>
+                <span class="s2">&quot;persona&quot;</span><span class="p">:</span> <span class="n">persona</span><span class="p">,</span>
+            <span class="p">},</span>
+            <span class="n">return_only_outputs</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+        <span class="p">)[</span><span class="s2">&quot;output_text&quot;</span><span class="p">]</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-8'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-8'>#</a>
+      </div>
+      <p>Return the response as JSON</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre>        <span class="k">return</span> <span class="n">jsonify</span><span class="p">({</span><span class="s2">&quot;response&quot;</span><span class="p">:</span> <span class="n">response</span><span class="p">})</span>
+
+    <span class="k">except</span> <span class="ne">Exception</span> <span class="k">as</span> <span class="n">e</span><span class="p">:</span></pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+  <div class='section' id='section-9'>
+    <div class='docs'>
+      <div class='octowrap'>
+        <a class='octothorpe' href='#section-9'>#</a>
+      </div>
+      <p>Log the error and return an error response</p>
+    </div>
+    <div class='code'>
+      <div class="highlight"><pre>        <span class="n">logger</span><span class="o">.</span><span class="n">error</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;Error while processing request: </span><span class="si">{</span><span class="n">e</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">)</span>
+        <span class="k">return</span> <span class="n">jsonify</span><span class="p">({</span><span class="s2">&quot;error&quot;</span><span class="p">:</span> <span class="s2">&quot;Unable to process the request.&quot;</span><span class="p">}),</span> <span class="mi">500</span>
+
+
+<span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">&quot;__main__&quot;</span><span class="p">:</span>
+    <span class="n">app</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
+
+</pre></div>
+    </div>
+  </div>
+  <div class='clearall'></div>
+</div>
+</body>

docs/pycco.css

@@ -0,0 +1,190 @@
+/*--------------------- Layout and Typography ----------------------------*/
+body {
+  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: #252519;
+  margin: 0; padding: 0;
+  background: #f5f5ff;
+}
+a {
+  color: #261a3b;
+}
+  a:visited {
+    color: #261a3b;
+  }
+p {
+  margin: 0 0 15px 0;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin: 40px 0 15px 0;
+}
+h2, h3, h4, h5, h6 {
+    margin-top: 0;
+  }
+#container {
+  background: white;
+ }
+#container, div.section {
+  position: relative;
+}
+#background {
+  position: absolute;
+  top: 0; left: 580px; right: 0; bottom: 0;
+  background: #f5f5ff;
+  border-left: 1px solid #e5e5ee;
+  z-index: 0;
+}
+#jump_to, #jump_page {
+  background: white;
+  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
+  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
+  font: 10px Arial;
+  text-transform: uppercase;
+  cursor: pointer;
+  text-align: right;
+}
+#jump_to, #jump_wrapper {
+  position: fixed;
+  right: 0; top: 0;
+  padding: 5px 10px;
+}
+  #jump_wrapper {
+    padding: 0;
+    display: none;
+  }
+    #jump_to:hover #jump_wrapper {
+      display: block;
+    }
+    #jump_page {
+      padding: 5px 0 3px;
+      margin: 0 0 25px 25px;
+    }
+      #jump_page .source {
+        display: block;
+        padding: 5px 10px;
+        text-decoration: none;
+        border-top: 1px solid #eee;
+      }
+        #jump_page .source:hover {
+          background: #f5f5ff;
+        }
+        #jump_page .source:first-child {
+        }
+div.docs {
+  float: left;
+  max-width: 500px;
+  min-width: 500px;
+  min-height: 5px;
+  padding: 10px 25px 1px 50px;
+  vertical-align: top;
+  text-align: left;
+}
+  .docs pre {
+    margin: 15px 0 15px;
+    padding-left: 15px;
+  }
+  .docs p tt, .docs p code {
+    background: #f8f8ff;
+    border: 1px solid #dedede;
+    font-size: 12px;
+    padding: 0 0.2em;
+  }
+  .octowrap {
+    position: relative;
+  }
+    .octothorpe {
+      font: 12px Arial;
+      text-decoration: none;
+      color: #454545;
+      position: absolute;
+      top: 3px; left: -20px;
+      padding: 1px 2px;
+      opacity: 0;
+      -webkit-transition: opacity 0.2s linear;
+    }
+      div.docs:hover .octothorpe {
+        opacity: 1;
+      }
+div.code {
+  margin-left: 580px;
+  padding: 14px 15px 16px 50px;
+  vertical-align: top;
+}
+  .code pre, .docs p code {
+    font-size: 12px;
+  }
+    pre, tt, code {
+      line-height: 18px;
+      font-family: Monaco, Consolas, "Lucida Console", monospace;
+      margin: 0; padding: 0;
+    }
+div.clearall {
+    clear: both;
+}
+
+
+/*---------------------- Syntax Highlighting -----------------------------*/
+td.linenos { background-color: #f0f0f0; padding-right: 10px; }
+span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
+body .hll { background-color: #ffffcc }
+body .c { color: #408080; font-style: italic }  /* Comment */
+body .err { border: 1px solid #FF0000 }         /* Error */
+body .k { color: #954121 }                      /* Keyword */
+body .o { color: #666666 }                      /* Operator */
+body .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+body .cp { color: #BC7A00 }                     /* Comment.Preproc */
+body .c1 { color: #408080; font-style: italic } /* Comment.Single */
+body .cs { color: #408080; font-style: italic } /* Comment.Special */
+body .gd { color: #A00000 }                     /* Generic.Deleted */
+body .ge { font-style: italic }                 /* Generic.Emph */
+body .gr { color: #FF0000 }                     /* Generic.Error */
+body .gh { color: #000080; font-weight: bold }  /* Generic.Heading */
+body .gi { color: #00A000 }                     /* Generic.Inserted */
+body .go { color: #808080 }                     /* Generic.Output */
+body .gp { color: #000080; font-weight: bold }  /* Generic.Prompt */
+body .gs { font-weight: bold }                  /* Generic.Strong */
+body .gu { color: #800080; font-weight: bold }  /* Generic.Subheading */
+body .gt { color: #0040D0 }                     /* Generic.Traceback */
+body .kc { color: #954121 }                     /* Keyword.Constant */
+body .kd { color: #954121; font-weight: bold }  /* Keyword.Declaration */
+body .kn { color: #954121; font-weight: bold }  /* Keyword.Namespace */
+body .kp { color: #954121 }                     /* Keyword.Pseudo */
+body .kr { color: #954121; font-weight: bold }  /* Keyword.Reserved */
+body .kt { color: #B00040 }                     /* Keyword.Type */
+body .m { color: #666666 }                      /* Literal.Number */
+body .s { color: #219161 }                      /* Literal.String */
+body .na { color: #7D9029 }                     /* Name.Attribute */
+body .nb { color: #954121 }                     /* Name.Builtin */
+body .nc { color: #0000FF; font-weight: bold }  /* Name.Class */
+body .no { color: #880000 }                     /* Name.Constant */
+body .nd { color: #AA22FF }                     /* Name.Decorator */
+body .ni { color: #999999; font-weight: bold }  /* Name.Entity */
+body .ne { color: #D2413A; font-weight: bold }  /* Name.Exception */
+body .nf { color: #0000FF }                     /* Name.Function */
+body .nl { color: #A0A000 }                     /* Name.Label */
+body .nn { color: #0000FF; font-weight: bold }  /* Name.Namespace */
+body .nt { color: #954121; font-weight: bold }  /* Name.Tag */
+body .nv { color: #19469D }                     /* Name.Variable */
+body .ow { color: #AA22FF; font-weight: bold }  /* Operator.Word */
+body .w { color: #bbbbbb }                      /* Text.Whitespace */
+body .mf { color: #666666 }                     /* Literal.Number.Float */
+body .mh { color: #666666 }                     /* Literal.Number.Hex */
+body .mi { color: #666666 }                     /* Literal.Number.Integer */
+body .mo { color: #666666 }                     /* Literal.Number.Oct */
+body .sb { color: #219161 }                     /* Literal.String.Backtick */
+body .sc { color: #219161 }                     /* Literal.String.Char */
+body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */
+body .s2 { color: #219161 }                     /* Literal.String.Double */
+body .se { color: #BB6622; font-weight: bold }  /* Literal.String.Escape */
+body .sh { color: #219161 }                     /* Literal.String.Heredoc */
+body .si { color: #BB6688; font-weight: bold }  /* Literal.String.Interpol */
+body .sx { color: #954121 }                     /* Literal.String.Other */
+body .sr { color: #BB6688 }                     /* Literal.String.Regex */
+body .s1 { color: #219161 }                     /* Literal.String.Single */
+body .ss { color: #19469D }                     /* Literal.String.Symbol */
+body .bp { color: #954121 }                     /* Name.Builtin.Pseudo */
+body .vc { color: #19469D }                     /* Name.Variable.Class */
+body .vg { color: #19469D }                     /* Name.Variable.Global */
+body .vi { color: #19469D }                     /* Name.Variable.Instance */
+body .il { color: #666666 }                     /* Literal.Number.Integer.Long */

requirements.txt

@@ -0,0 +1,15 @@
+Flask==2.2.3
+Flask-Cors==3.0.10
+langchain==0.0.107
+PyYAML==6.0
+nltk==3.7
+openai==0.27.0
+layoutparser==0.3.4
+transformers==4.26.1
+unstructured==0.5.0
+python-magic==0.4.27
+pinecone-client==2.2.1
+beautifulsoup4
+chromadb==0.3.11
+-e git+https://github.com/facebookresearch/[email protected]#egg=detectron2
+

static/style.css

@@ -0,0 +1,206 @@
+/* Set a modern font and background color */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f1f9ff;
+  }
+  
+  /* Center the chat box */
+  #chat-box {
+    margin: 0 auto;
+    max-width: 500px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  /* Add a subtle animation */
+  #chat-box {
+    animation: fadein 1s;
+  }
+
+  #chat-area {
+    overflow-y: auto;
+    max-height: 600px; /* set a maximum height for the chat area */
+    display: flex;
+    flex-direction: column;
+  }
+  
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  /* Style the chat messages */
+  .message-container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .user-message {
+    background-image: linear-gradient(to bottom right, #79b6f2, #6daff0);
+    color: #ffffff;
+    align-self: self-end;
+    text-align: right;
+    margin-bottom: 10px;
+    margin-right: 5px;
+    border-radius: 10px 10px 0 10px;
+    padding: 10px 15px;
+    max-width: fit-content;
+    word-wrap: break-word;
+    font-size: 16px;
+    white-space: pre-wrap;
+    float: right;
+  }
+  
+  .bot-message {
+    background-color: #f0f0f0;
+    color: #000000;
+    text-align: left;
+    margin-bottom: 10px;
+    border-radius: 10px 10px 10px 0;
+    padding: 10px 15px;
+    word-wrap: break-word;
+    max-width: fit-content;
+    font-size: 16px;
+    white-space: pre-wrap;
+    align-self: flex-start;
+  }
+
+  .bot-message a {
+    color: #0d6efd;
+    text-decoration: underline;
+  }
+
+  .bot-message a:hover {
+    color: #0056b3;
+    text-decoration: none;
+  }
+
+  .timestamp {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #999;
+    margin-right: 5px;
+    text-align: right;
+    float: right;
+  }
+
+  .bot-timestamp {
+    justify-content: space-between;
+    font-size: 12px;
+    color: #999;
+    margin-right: 5px;
+  }
+
+  .w-100 {
+    padding-top: 10px;
+  }
+  
+  /* Style the input area */
+  #input-area {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+  }
+  
+  #question-input {
+    flex-grow: 1;
+    border: none;
+    padding: 12px 15px;
+    border-radius: 25px;
+    font-size: 16px;
+    background-color: #fff;
+    color: #000;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease-in-out;
+  }
+  
+  #question-input:focus {
+    outline: none;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  #send-button {
+    background-color: #79b6f2;
+    color: #fff;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 25px;
+    font-size: 16px;
+    margin-left: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+  
+  #send-button:hover {
+    background-color: #558fcf;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* Style the loading indicator */
+  #loading-indicator {
+    display: none;
+    text-align: center;
+  }
+/* Define the spinner shape */
+.spinner {
+    width: 20px;
+    height: 20px;
+    margin-top: 10px;
+    position: relative;
+    perspective: 800px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .spinner::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    box-shadow:
+      inset 0 -3px 0 rgba(0,0,0,.1),
+      inset 0 -3px 3px rgba(0,0,0,.2),
+      inset 0 -3px 6px rgba(0,0,0,.2),
+      0 0 6px 1px #007bff;
+    transform: rotate(45deg);
+    animation: spinner 1.5s cubic-bezier(.4,0,.2,1) infinite;
+  }
+  
+  /* Define the spinner animation */
+  @keyframes spinner {
+    0% {
+      transform: rotate(45deg) scale(1);
+    }
+    50% {
+      transform: rotate(405deg) scale(.2);
+      opacity: .7;
+    }
+    100% {
+      transform: rotate(765deg) scale(1);
+      opacity: 1;
+    }
+  }
+  
+  #typing-indicator {
+    display: none;
+    font-style: italic;
+    margin-bottom: 10px;
+  }
+  

templates/app.py

@@ -0,0 +1,127 @@
+import os
+import logging
+from flask import Flask, request, jsonify, render_template
+from langchain.chains.question_answering import load_qa_chain
+from langchain.document_loaders import DirectoryLoader
+from langchain.llms import OpenAIChat
+from langchain.prompts import PromptTemplate
+from langchain.memory import ConversationBufferMemory
+from langchain.document_loaders import WebBaseLoader
+import yaml
+
+from langchain.embeddings import OpenAIEmbeddings
+from langchain.text_splitter import CharacterTextSplitter
+from langchain.embeddings.openai import OpenAIEmbeddings
+from langchain.vectorstores import Chroma
+
+import nltk
+
+nltk.download("punkt")
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Load configuration from YAML file
+with open("config.yaml", "r") as f:
+    config = yaml.safe_load(f)
+
+os.environ["OPENAI_API_KEY"] = config["openai_api_key"]
+
+template_dir = os.path.abspath("templates")
+app = Flask(__name__, template_folder=template_dir, static_folder="static")
+
+# Load the files
+loader = DirectoryLoader(config["data_directory"], glob=config["data_files_glob"])
+docs = loader.load()
+
+webpages = config.get("webpages", [])
+web_docs = []
+for webpage in webpages:
+    logger.info(f"Loading data from webpage {webpage}")
+    loader = WebBaseLoader(webpage)
+    web_docs += loader.load()
+
+result = docs + web_docs
+
+tone = config.get("tone", "default")
+persona = config.get("persona", "default")
+
+text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+texts = text_splitter.split_documents(result)
+embeddings = OpenAIEmbeddings(openai_api_key=config["openai_api_key"])
+docsearch = Chroma.from_documents(texts, embeddings)
+
+# Initialize the QA chain
+logger.info("Initializing QA chain...")
+chain = load_qa_chain(
+    OpenAIChat(),
+    chain_type="stuff",
+    memory=ConversationBufferMemory(memory_key="chat_history", input_key="human_input"),
+    prompt=PromptTemplate(
+        input_variables=["chat_history", "human_input", "context", "tone", "persona"],
+        template="""You are a chatbot who acts like {persona}, having a conversation with a human.
+
+Given the following extracted parts of a long document and a question, Create a final answer with references ("SOURCES") in the tone {tone}. 
+If you don't know the answer, just say that you don't know. Don't try to make up an answer.
+ALWAYS return a "SOURCES" part in your answer.
+SOURCES should only be hyperlink URLs which are genuine and not made up.
+
+{context}
+
+{chat_history}
+Human: {human_input}
+Chatbot:""",
+    ),
+    verbose=False,
+)
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/api/chat", methods=["POST"])
+def chat():
+    try:
+        # Get the question from the request
+        question = request.json["question"]
+        documents = docsearch.similarity_search(question, include_metadata=True)
+
+        # Get the bot's response
+        response = chain(
+            {
+                "input_documents": documents,
+                "human_input": question,
+                "tone": tone,
+                "persona": persona,
+            },
+            return_only_outputs=True,
+        )["output_text"]
+        
+        # Increment message counter
+        session_counter = request.cookies.get('session_counter')
+        if session_counter is None:
+            session_counter = 0
+        else:
+            session_counter = int(session_counter) + 1
+
+        # Check if it's time to flush memory
+        if session_counter % 10 == 0:
+            chain.memory.clear()
+
+        # Set the session counter cookie
+        resp = jsonify({"response": response})
+        resp.set_cookie('session_counter', str(session_counter))
+
+        # Return the response as JSON with the session counter cookie
+        return resp
+
+    except Exception as e:
+        # Log the error and return an error response
+        logger.error(f"Error while processing request: {e}")
+        return jsonify({"error": "Unable to process the request."}), 500
+
+if __name__ == "__main__":
+    app.run(debug=True)

templates/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chat Box</title>
+    <link rel="stylesheet" href="static/style.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+    <script>
+      // Send the user's question to the server and display the response
+      function sendQuestion() {
+        var question = $("#question-input").val();
+        if (question) {
+          var timestamp = new Date().toLocaleTimeString();
+          $("#chat-area").append("<div container class='message-container'><div class='row'><div class='col timestamp'><p class='small mb-1 text-muted'>" + timestamp + "</p></div></div><div class='row user-message'><div class='col'><span>" + question + "<span></div></div></div>");
+          $("#question-input").val("");
+          $("#chat-area").scrollTop($("#chat-area").prop("scrollHeight"));
+          $("#loading-indicator").show();
+          $.ajax({
+            url: "/api/chat",
+            type: "POST",
+            contentType: "application/json",
+            data: JSON.stringify({ question: question }),
+            success: function(data) {
+              var response = data.response.replace(/\n/g, "<br><br>");
+              var typingSpeed = 50; // in milliseconds
+              var responseArray = response.split(" ");
+              var currentIndex = 0;
+              var responseTimer = setInterval(function() {
+                if (currentIndex < responseArray.length) {
+                  var responseText = responseArray.slice(0, currentIndex + 1).join(" ");
+                  $("#typing-indicator").html(responseText);
+                  currentIndex++;
+                } else {
+                  clearInterval(responseTimer);
+                  var timestamp = new Date().toLocaleTimeString();
+                  $("#typing-indicator").html("");
+                  var response = data.response.replace(/\n/g, "<br>");
+                  $("#chat-area").append("<div container class='message-container'><div class='row'><div class='col bot-timestamp'><p class='small mb-1 text-muted'>" + timestamp + "</p></div></div><div class='row bot-message'><div class='col'><span>" + response.replace(/\n/g, "<br><br>").replace(/(https?:\/\/[^\s]+)/g, "<a href='$1' target='_blank'>$1</a>") + "<span></div></div></div>");
+                  $("#chat-area").scrollTop($("#chat-area").prop("scrollHeight"));
+                  $("#loading-indicator").hide();  
+                }
+              }, typingSpeed);
+
+            },
+            error: function() {
+              alert("Unable to process the request.");
+              $("#loading-indicator").hide();
+            }
+          });
+        }
+      }
+
+
+      // Send the user's question when they press Enter in the text input field
+      $("#question-input").keydown(function(event) {
+        if (event.keyCode == 13) {
+          sendQuestion();
+          $("#question-input").val("");
+          return false;
+        }
+      });
+    </script>
+  </head>
+  <body>
+    <div id="chat-box">
+      <div id="chat-area"></div>
+      <div id="input-area">
+        <input type="text" id="question-input" placeholder="Ask here" />
+        <button id="send-button" onclick="sendQuestion()">Send</button>
+      </div>
+      <div id="typing-indicator"></div>
+      <div id="loading-indicator">
+        <div class="loader"></div>
+      </div>
+    </div>
+    <script>
+      var input = document.getElementById("question-input");
+      input.addEventListener("keypress", function(event) {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          document.getElementById("send-button").click();
+        }
+      });
+      </script>
+  </body>
+</html>