Upload 18 files

.env

@@ -0,0 +1,3 @@
+PINECONE_API_TOKEN="9e0943d2-1669-4389-9af3-f0b40bd3aab7"
+PINECONE_API_ENV="usa-east-1"
+REPLICATE_API_TOKEN="r8_3eWT6qNBwq8r7zNknWKxsyNyOQ6WMGS2WWRay"

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz 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
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz 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

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+
+RUN pip install  -r requirements.txt
+RUN pip install  --upgrade sentence_transformers
+RUN pip install  --upgrade langchain
+
+COPY --chown=user . /app
+
+CMD ["gunicorn", "app:app", "-b", "0.0.0.0:7860"]

README.md

@@ -1,11 +1,10 @@
----
-title: Travellor Bot
-emoji: 📊
-colorFrom: yellow
-colorTo: green
-sdk: static
-pinned: false
-license: apache-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: KevinKiraiTravelBot
+emoji: 🌍
+colorFrom: gray
+colorTo: red
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,96 @@
+import os
+import time
+from flask import Flask, render_template, jsonify, request
+from src.helper import download_hugging_face_embeddings
+from langchain.llms import Replicate
+from dotenv import load_dotenv
+from PyPDF2 import PdfReader
+from langchain.schema import Document
+from langchain.text_splitter import CharacterTextSplitter
+
+# Initialize Flask app
+app = Flask(__name__)
+
+# Load environment variables
+load_dotenv()
+
+# Optional PDF processing functions
+# def load_pdf(file_path):
+#     all_text = ""
+#     with open(file_path, 'rb') as file:
+#         reader = PdfReader(file)
+#         for page in reader.pages:
+#             all_text += page.extract_text() + "\n"
+#     return all_text if all_text else None
+
+# def text_split(text):
+#     text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+#     document = Document(page_content=text)
+#     return text_splitter.split_documents([document])
+
+# Load and process data
+# pdf_file_path = "data/Okelloetal.2008TourismanalysisManka.pdf"
+# extracted_data = load_pdf(pdf_file_path)
+# if extracted_data is None:
+#     raise ValueError("The extracted data is None. Please check the load_pdf function.")
+# print(f"Extracted Data: {extracted_data}")
+
+# Split the extracted text into chunks
+# text_chunks = text_split(extracted_data)
+# if not text_chunks:
+#     raise ValueError("The text_chunks is None or empty. Please check the text_split function.")
+# print(f"Text Chunks: {text_chunks}")
+
+embeddings = download_hugging_face_embeddings()
+if embeddings is None:
+    raise ValueError("The embeddings is None. Please check the download_hugging_face_embeddings function.")
+print(f"Embeddings: {embeddings}")
+
+os.environ["REPLICATE_API_TOKEN"] = "r8_3eWT6qNBwq8r7zNknWKxsyNyOQ6WMGS2WWRay"
+
+# Initialize the Replicate model
+llm = Replicate(
+    model="a16z-infra/llama7b-v2-chat:4f0a4744c7295c024a1de15e1a63c880d3da035fa1f49bfd344fe076074c8eea",
+    config={
+        'max_new_tokens': 100,  # Maximum number of tokens to generate in response
+        'temperature': 0.7,     # Optimal temperature for balanced randomness and coherence
+        'top_k': 50             # Optimal top-k value for considering the top 50 predictions
+    }
+)
+# Flask routes
+@app.route("/")
+def index():
+    return render_template('chat.html')
+
+@app.route("/get", methods=["GET", "POST"])
+def chat():
+    try:
+        msg = request.form["msg"]
+        input_text = msg
+        print(f"Received message: {input_text}")
+
+        # Display spinner
+        result = {"generated_text": "Thinking..."}
+
+        # Simulate processing delay
+        time.sleep(1)
+
+        # Retrieve response from the model
+        result = llm.generate([input_text])
+        print(f"LLMResult: {result}")
+
+        # Access the generated text from the result object
+        if result.generations and result.generations[0]:
+            generated_text = result.generations[0][0].text
+        else:
+            generated_text = "No response generated."
+
+        print(f"Response: {generated_text}")
+
+        return str(generated_text)
+    except Exception as e:
+        print(f"Error: {e}")
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host="0.0.0.0", port=8080, debug=True)

requirements.txt

@@ -0,0 +1,12 @@
+ctransformers==0.2.5
+sentence-transformers==2.2.2
+pinecone-client
+langchain==0.0.225
+flask
+langchain-community
+pypdf
+python-dotenv
+replicate
+gunicorn
+PyPDF2
+langchain_community

setup.py

@@ -0,0 +1,12 @@
+from setuptools import find_packages, setup
+
+setup(
+    name='Travel chatbot',
+    version='0.0.0',
+    description='This is My Travel chatbot',
+    author='Michael Moses',
+    author_email='[email protected]',
+    packages=find_packages(),
+    install_requires=[]
+
+)

src/helper.py

@@ -0,0 +1,43 @@
+from langchain import PromptTemplate
+from langchain.chains import RetrievalQA
+from langchain.embeddings import HuggingFaceEmbeddings
+from langchain_community.vectorstores import Pinecone
+from dotenv import load_dotenv
+import os
+from pinecone import Pinecone
+from langchain.document_loaders import PyPDFLoader, DirectoryLoader
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain.prompts import PromptTemplate
+from langchain.llms import CTransformers
+from unittest import loader
+
+
+load_dotenv()
+
+PINECONE_API_KEY = os.environ.get('PINECONE_API_KEY')
+PINECONE_API_ENV = os.environ.get('PINECONE_API_ENV')
+
+# Extract pdf data
+
+
+
+def load_pdf(data):
+    directory_loader = DirectoryLoader(data, 
+                                       glob="*.pdf",
+                                       loader_cls=PyPDFLoader)
+    
+    documents = directory_loader.load()
+
+def text_split(extracted_data):
+    text_splitter = RecursiveCharacterTextSplitter(chunk_size = 500, chunk_overlap = 20)
+    text_chunks = text_splitter.split_documents(extracted_data)
+
+    return text_chunks
+
+def download_hugging_face_embeddings():
+    embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-L6-v2")
+    return embeddings
+
+
+
+    

src/kevinkirai.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		},
+		{
+			"path": "../../travelChatbot/tourism"
+		}
+	],
+	"settings": {}
+}

src/prompt.py

@@ -0,0 +1,8 @@
+prompt_template="""
+You are a wildlife guide bot called Kevin Kirai. You provide information about wildlife and nature to tourists. You should not express yourself as a human or try to be harmful in any way.
+Use the following pieces of information to answer the tourist's question. If you don't know the answer, simply state that you don't know; do not attempt to fabricate an answer. Avoid imitating the tourist's phrasing or style in your response.
+Context: {context}
+Question: {question}
+Provide only the helpful answer below:
+Helpful answer:
+"""

static/style.css

@@ -0,0 +1,223 @@
+body,html{
+	height: 100%;
+	margin: 0;
+	background: rgb(44, 47, 59);
+   background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
+	background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
+}
+
+.chat{
+	margin-top: auto;
+	margin-bottom: auto;
+}
+.card{
+	height: 500px;
+	border-radius: 15px !important;
+	background-color: rgba(0,0,0,0.4) !important;
+}
+.contacts_body{
+	padding:  0.75rem 0 !important;
+	overflow-y: auto;
+	white-space: nowrap;
+}
+.msg_card_body{
+	overflow-y: auto;
+}
+.card-header{
+	border-radius: 15px 15px 0 0 !important;
+	border-bottom: 0 !important;
+}
+.card-footer{
+border-radius: 0 0 15px 15px !important;
+	border-top: 0 !important;
+}
+.container{
+	align-content: center;
+}
+.search{
+	border-radius: 15px 0 0 15px !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color:white !important;
+}
+.search:focus{
+	 box-shadow:none !important;
+   outline:0px !important;
+}
+.type_msg{
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color:white !important;
+	height: 60px !important;
+	overflow-y: auto;
+}
+	.type_msg:focus{
+	 box-shadow:none !important;
+   outline:0px !important;
+}
+.attach_btn{
+	border-radius: 15px 0 0 15px !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.send_btn{
+	border-radius: 0 15px 15px 0 !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.search_btn{
+	border-radius: 0 15px 15px 0 !important;
+	background-color: rgba(245, 210, 185, 0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.contacts{
+	list-style: none;
+	padding: 0;
+}
+.contacts li{
+	width: 100% !important;
+	padding: 5px 10px;
+	margin-bottom: 15px !important;
+}
+.active{
+	background-color: rgba(0,0,0,0.3);
+}
+.user_img{
+	height: 70px;
+	width: 70px;
+	border:1.5px solid #f5f6fa;
+
+}
+.user_img_msg{
+	height: 40px;
+	width: 40px;
+	border:1.5px solid #f5f6fa;
+
+}
+.img_cont{
+	position: relative;
+	height: 70px;
+	width: 70px;
+}
+.img_cont_msg{
+	height: 40px;
+	width: 40px;
+}
+.online_icon{
+	position: absolute;
+	height: 15px;
+	width:15px;
+	background-color: #4cd137;
+	border-radius: 50%;
+	bottom: 0.2em;
+	right: 0.4em;
+	border:1.5px solid white;
+}
+.offline{
+	background-color: #c23616 !important;
+}
+.user_info{
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-left: 15px;
+}
+.user_info span{
+	font-size: 20px;
+	color: white;
+}
+.user_info p{
+	font-size: 10px;
+	color: rgba(255,255,255,0.6);
+}
+.video_cam{
+	margin-left: 50px;
+	margin-top: 5px;
+}
+.video_cam span{
+	color: white;
+	font-size: 20px;
+	cursor: pointer;
+	margin-right: 20px;
+}
+.msg_cotainer{
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-left: 10px;
+	border-radius: 25px;
+	background-color: rgb(82, 172, 255);
+	padding: 10px;
+	position: relative;
+}
+.msg_cotainer_send{
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-right: 10px;
+	border-radius: 25px;
+	background-color: #58cc71;
+	padding: 10px;
+	position: relative;
+}
+.msg_time{
+	position: absolute;
+	left: 0;
+	bottom: -15px;
+	color: rgba(255,255,255,0.5);
+	font-size: 10px;
+}
+.msg_time_send{
+	position: absolute;
+	right:0;
+	bottom: -15px;
+	color: rgba(255,255,255,0.5);
+	font-size: 10px;
+}
+.msg_head{
+	position: relative;
+}
+#action_menu_btn{
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	color: white;
+	cursor: pointer;
+	font-size: 20px;
+}
+.action_menu{
+	z-index: 1;
+	position: absolute;
+	padding: 15px 0;
+	background-color: rgba(0,0,0,0.5);
+	color: white;
+	border-radius: 15px;
+	top: 30px;
+	right: 15px;
+	display: none;
+}
+.action_menu ul{
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.action_menu ul li{
+	width: 100%;
+	padding: 10px 15px;
+	margin-bottom: 5px;
+}
+.action_menu ul li i{
+	padding-right: 10px;
+}
+.action_menu ul li:hover{
+	cursor: pointer;
+	background-color: rgba(0,0,0,0.2);
+}
+@media(max-width: 576px){
+	.contacts_card{
+	margin-bottom: 15px !important;
+}
+}

store_index.py

@@ -0,0 +1,106 @@
+import os
+import time
+from src.helper import PINECONE_API_KEY, text_split, download_hugging_face_embeddings
+from langchain.vectorstores import Pinecone as LangchainPinecone  # Alias to avoid confusion
+from dotenv import load_dotenv
+from pinecone import Pinecone, ServerlessSpec
+from langchain_pinecone import PineconeVectorStore
+from PyPDF2 import PdfReader
+
+# Define the load_pdf function
+def load_pdf(file_path):
+    all_text = ""
+    with open(file_path, 'rb') as file:
+        reader = PdfReader(file)
+        for page in reader.pages:
+            all_text += page.extract_text() + "\n"
+    return all_text if all_text else None
+
+# Define the text_split function
+def text_split(text):
+    from langchain.text_splitter import CharacterTextSplitter
+    text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+    return text_splitter.split_text(text)
+
+# Load environment variables if not already set
+load_dotenv()
+
+# Load and process data
+pdf_file_path = "data/Okelloetal.2008TourismanalysisManka.pdf"  # Update this path to your single PDF file
+extracted_data = load_pdf(pdf_file_path)
+if extracted_data is None:
+    raise ValueError("The extracted data is None. Please check the load_pdf function.")
+
+print(f"Extracted Data: {extracted_data}")
+
+# Split the extracted text into chunks
+text_chunks = text_split(extracted_data)
+if text_chunks is None:
+    raise ValueError("The text_chunks is None. Please check the text_split function.")
+
+print(f"Text Chunks: {text_chunks}")
+
+embeddings = download_hugging_face_embeddings()
+if embeddings is None:
+    raise ValueError("The embeddings is None. Please check the download_hugging_face_embeddings function.")
+
+print(f"Embeddings: {embeddings}")
+
+# Ensure Pinecone API key is available
+api_key = os.environ.get("PINECONE_API_KEY")
+if not api_key:
+    raise ValueError("PINECONE_API_KEY environment variable not set.")
+
+# Initialize Pinecone client
+pc = Pinecone(api_key=api_key)
+
+# Specify cloud and region for the serverless index
+cloud = os.environ.get('PINECONE_CLOUD') or 'aws'
+region = os.environ.get('PINECONE_REGION') or 'us-east-1'
+spec = ServerlessSpec(cloud=cloud, region=region)
+
+# Define the index name
+index_name = "healthbot"
+
+# Create the index if it does not exist
+if index_name not in pc.list_indexes().names():
+    pc.create_index(
+        name=index_name,
+        dimension=384,
+        metric="cosine",
+        spec=spec
+    )
+    # Wait for the index to be ready
+    while not pc.describe_index(index_name).status['ready']:
+        time.sleep(1)
+
+# Connect to the created index
+index = pc.Index(index_name)
+time.sleep(1)
+
+# Example: Add data to the index with reduced metadata
+# Create a dictionary to simulate external storage of text chunks
+text_chunk_store = {}
+
+# Function to simulate storing text chunk and returning a reference ID
+def store_text_chunk(text_chunk):
+    chunk_id = f"chunk_{len(text_chunk_store)}"
+    text_chunk_store[chunk_id] = text_chunk
+    return chunk_id
+
+# Add text chunks to Pinecone with reference IDs
+for i, text_chunk in enumerate(text_chunks):
+    chunk_id = store_text_chunk(text_chunk)
+    embedding = embeddings.embed_query(text_chunk)  # Embed the text chunk
+    index.upsert(
+        vectors=[
+            {
+                "id": f"vec_{i}", 
+                "values": embedding, 
+                "metadata": {"chunk_id": chunk_id}  # Only store the reference ID as metadata
+            }
+        ],
+        namespace="ns1"
+    )
+
+print("Indexing completed successfully.")

template.py

@@ -0,0 +1,40 @@
+import os  # Import the os module to interact with the operating system
+from pathlib import Path  # Import the Path class from pathlib module for handling file paths
+import logging  # Import the logging module for logging messages
+
+# Configure the logging to display messages with time and message content
+logging.basicConfig(level=logging.INFO, format='[%(asctime)s]: %(message)s')
+
+# List of files that we want to create
+list_of_files = [
+    "src/__init__.py",       # A Python package initialization file
+    "src/helper.py",         # A helper module
+    "src/prompt.py",         # A prompt module
+    ".env",                  # Environment configuration file
+    "setup.py",              # Python setup script
+    "research/trials.ipynb", # Jupyter notebook for research
+    "app.py",                # Main application script
+    "store_index.py",        # Index script for storage
+    "static/.gitkeep",                # Directory for static files (e.g., CSS, JS)
+    "templates/chat.html" ,   # HTML template for chat
+    ".gitignore"
+    
+]
+
+# Iterate over each file path in the list
+for filepath in list_of_files:
+    filepath = Path(filepath)  # Convert the file path to a Path object
+    filedir, filename = os.path.split(filepath)  # Split the path into directory and file name
+
+    # Check if the directory part of the path is not empty
+    if filedir:
+        os.makedirs(filedir, exist_ok=True)  # Create the directory if it doesn't exist
+        logging.info(f"Creating directory: {filedir} for the file {filename}")  # Log directory creation
+
+    # Check if the file doesn't exist or if it exists but is empty
+    if not os.path.exists(filepath) or os.path.getsize(filepath) == 0:
+        with open(filepath, 'w') as f:  # Open the file in write mode (this creates an empty file)
+            pass  # Do nothing else inside the with block
+        logging.info(f"Creating empty file: {filepath}")  # Log file creation
+    else:
+        logging.info(f"{filename} is already created")  # Log that the file already exists

templates/chat.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Chatbot</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="static/style.css"/>
+    <style>
+        body,html {
+            height: 100%;
+            margin: 0;
+            background: rgb(44, 47, 59);
+            background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
+            background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
+        }
+
+        .chat {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+        .card {
+            height: 500px;
+            border-radius: 15px !important;
+            background-color: rgba(0,0,0,0.4) !important;
+        }
+        .contacts_body {
+            padding:  0.75rem 0 !important;
+            overflow-y: auto;
+            white-space: nowrap;
+        }
+        .msg_card_body {
+            overflow-y: auto;
+        }
+        .card-header {
+            border-radius: 15px 15px 0 0 !important;
+            border-bottom: 0 !important;
+        }
+        .card-footer {
+            border-radius: 0 0 15px 15px !important;
+            border-top: 0 !important;
+        }
+        .container {
+            align-content: center;
+        }
+        .search {
+            border-radius: 15px 0 0 15px !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color:white !important;
+        }
+        .search:focus {
+            box-shadow:none !important;
+            outline:0px !important;
+        }
+        .type_msg {
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color:white !important;
+            height: 60px !important;
+            overflow-y: auto;
+        }
+        .type_msg:focus {
+            box-shadow:none !important;
+            outline:0px !important;
+        }
+        .attach_btn {
+            border-radius: 15px 0 0 15px !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color: white !important;
+            cursor: pointer;
+        }
+        .send_btn {
+            border-radius: 0 15px 15px 0 !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color: white !important;
+            cursor: pointer;
+        }
+        .search_btn {
+            border-radius: 0 15px 15px 0 !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color: white !important;
+            cursor: pointer;
+        }
+        .contacts {
+            list-style: none;
+            padding: 0;
+        }
+        .contacts li {
+            width: 100% !important;
+            padding: 5px 10px;
+            margin-bottom: 15px !important;
+        }
+        .active {
+            background-color: rgba(0,0,0,0.3);
+        }
+        .user_img {
+            height: 70px;
+            width: 70px;
+            border:1.5px solid #f5f6fa;
+        }
+        .user_img_msg {
+            height: 40px;
+            width: 40px;
+            border:1.5px solid #f5f6fa;
+        }
+        .img_cont {
+            position: relative;
+            height: 70px;
+            width: 70px;
+        }
+        .img_cont_msg {
+            height: 40px;
+            width: 40px;
+        }
+        .online_icon {
+            position: absolute;
+            height: 15px;
+            width:15px;
+            background-color: #4cd137;
+            border-radius: 50%;
+            bottom: 0.2em;
+            right: 0.4em;
+            border:1.5px solid white;
+        }
+        .offline {
+            background-color: #c23616 !important;
+        }
+        .user_info {
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-left: 15px;
+        }
+        .user_info span {
+            font-size: 20px;
+            color: white;
+        }
+        .user_info p {
+            font-size: 10px;
+            color: rgba(255,255,255,0.6);
+        }
+        .video_cam {
+            margin-left: 50px;
+            margin-top: 5px;
+        }
+        .video_cam span {
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            margin-right: 20px;
+        }
+        .msg_cotainer {
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-left: 10px;
+            border-radius: 25px;
+            background-color: rgb(82, 172, 255);
+            padding: 10px;
+            position: relative;
+        }
+        .msg_cotainer_send {
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-right: 10px;
+            border-radius: 25px;
+            background-color: #58cc71;
+            padding: 10px;
+            position: relative;
+        }
+        .msg_time {
+            position: absolute;
+            left: 0;
+            bottom: -15px;
+            color: rgba(255,255,255,0.5);
+            font-size: 10px;
+        }
+        .msg_time_send {
+            position: absolute;
+            right:0;
+            bottom: -15px;
+            color: rgba(255,255,255,0.5);
+            font-size: 10px;
+        }
+        .msg_head {
+            position: relative;
+        }
+        #action_menu_btn {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            color: white;
+            cursor: pointer;
+            font-size: 20px;
+        }
+        .action_menu {
+            z-index: 1;
+            position: absolute;
+            padding: 15px 0;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            border-radius: 15px;
+            top: 30px;
+            right: 15px;
+            display: none;
+        }
+        .action_menu ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .action_menu ul li {
+            width: 100%;
+            padding: 10px 15px;
+            margin-bottom: 5px;
+        }
+        .action_menu ul li i {
+            padding-right: 10px;
+        }
+        .action_menu ul li:hover {
+            cursor: pointer;
+            background-color: rgba(0,0,0,0.2);
+        }
+        @media(max-width: 576px) {
+            .contacts_card {
+                margin-bottom: 15px !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid h-100">
+        <div class="row justify-content-center h-100">		
+            <div class="col-md-8 col-xl-6 chat">
+                <div class="card">
+                    <div class="card-header msg_head">
+                        <div class="d-flex bd-highlight">
+                            <div class="img_cont">
+                                <img src="https://img.freepik.com/free-photo/smiling-tourist-woman-using-magnifying-glass-look-map_23-2147653034.jpg" class="rounded-circle user_img">
+                                <span class="online_icon"></span>
+                            </div>
+                            <div class="user_info">
+                                <span>Travel bot</span>
+                                <p>Ask me anything!</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="messageFormeight" class="card-body msg_card_body">
+                    </div>
+                    <div class="card-footer">
+                        <form id="messageArea" class="input-group">
+                            <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
+                            <div class="input-group-append">
+                                <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        $(document).ready(function() {
+            $("#messageArea").on("submit", function(event) {
+                const date = new Date();
+                const hour = date.getHours();
+                const minute = date.getMinutes();
+                const str_time = hour+":"+minute;
+                var rawText = $("#text").val();
+                var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div></div>';
+                
+                $("#text").val("");
+                $("#messageFormeight").append(userHtml);
+                $.ajax({
+                    data: {
+                        msg: rawText,	
+                    },
+                    type: "POST",
+                    url: "/get",
+                }).done(function(data) {
+                    var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/--waterless-geothermal-gets-installed-in-historic-breakers-mansion-.png" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
+                    $("#messageFormeight").append($.parseHTML(botHtml));
+                });
+                event.preventDefault();
+            });
+        });
+    </script>
+</body>
+</html>