Upload 18 files

.env

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

.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: Mybot
-emoji: 🐢
-colorFrom: green
-colorTo: blue
-sdk: static
-pinned: false
-license: apache-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Michaelmosesbot
+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,95 @@
+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()
+
+# 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):
+    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/Gale Encyclopedia of Medicine Vol. 1 (A-B).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 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}")
+
+# Setup CTransformers LLM
+from langchain.llms import Replicate
+os.environ["REPLICATE_API_TOKEN"]= "r8_PArS6Z8LxcRZld6NjVxhd8NJbIJXYDE25XiJd"
+llm = Replicate(model="a16z-infra/llama7b-v2-chat:4f0a4744c7295c024a1de15e1a63c880d3da035fa1f49bfd344fe076074c8eea")
+
+
+# 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='Medical chatbot',
+    version='0.0.0',
+    description='This is My Medical 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/mike2chatbot.code-workspace

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

src/prompt.py

@@ -0,0 +1,15 @@
+prompt_template="""
+You are a helpful assistant called Michael Moses. 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 user'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 user'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/Gale Encyclopedia of Medicine Vol. 1 (A-B).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,188 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            background-color: #f8f9fa;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .chat-container {
+            width: 100%;
+            max-width: 600px;
+            height: 80vh;
+            border-radius: 10px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            background-color: #ffffff;
+        }
+        .card-header {
+            background-color: #007bff;
+            color: #fff;
+            font-size: 1.2rem;
+            padding: 10px 15px;
+        }
+        .msg_card_body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+            background-color: #f1f1f1;
+        }
+        .msg_card_body .d-flex {
+            margin-bottom: 10px;
+        }
+        .msg_cotainer, .msg_cotainer_send {
+            padding: 10px;
+            border-radius: 20px;
+            max-width: 60%;
+            word-wrap: break-word;
+        }
+        .msg_cotainer {
+            background-color: #e1ffc7;
+        }
+        .msg_cotainer_send {
+            background-color: #c7eaff;
+        }
+        .msg_time, .msg_time_send {
+            font-size: 10px;
+            color: #999;
+            margin-top: 5px;
+            display: block;
+        }
+        .img_cont_msg {
+            display: flex;
+            align-items: center;
+            margin: 0 10px;
+        }
+        .online_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            background: #4cd137;
+            border-radius: 50%;
+            top: 2px;
+            right: 2px;
+        }
+        .user_img_msg {
+            width: 40px;
+            height: 40px;
+        }
+        .rounded-circle {
+            border-radius: 50% !important;
+        }
+        .card-footer {
+            background-color: #f1f1f1;
+            padding: 10px;
+        }
+        .type_msg {
+            border: none;
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+            padding: 10px;
+            width: 100%;
+        }
+        .send_btn, .clear_btn {
+            border: none;
+            background: none;
+            font-size: 20px;
+            cursor: pointer;
+        }
+        .send_btn {
+            color: #007bff;
+        }
+        .clear_btn {
+            color: #dc3545;
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="card">
+            <div class="card-header d-flex align-items-center">
+                <img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/d83341deb75c4c4f6b113f27b1e42cd8-chatbot-florence-already-helps-thousands-of-patients-to-remember-their-medication.png" class="rounded-circle user_img" width="40" height="40" alt="Chatbot Avatar">
+                <span class="ml-2">Starlets-Lifestyle Chatbot</span>
+            </div>
+            <div id="messageFormeight" class="card-body msg_card_body">
+                <!-- Messages will be appended here -->
+            </div>
+            <div class="card-footer d-flex">
+                <form id="messageArea" class="input-group" style="flex: 1;">
+                    <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>
+                        <button type="button" id="clearChat" class="input-group-text clear_btn"><i class="fas fa-trash"></i></button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            // Handle form submission
+            $("#messageArea").on("submit", function(event) {
+                const date = new Date();
+                const hour = date.getHours();
+                const minute = date.getMinutes();
+                const str_time = hour + ":" + (minute < 10 ? "0" + minute : minute);
+                var rawText = $("#text").val().trim();
+
+                if (rawText !== "") {
+                    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(""); // Clear input field
+                    $("#messageFormeight").append(userHtml); // Append user message
+                    $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
+
+                    // AJAX post request
+                    $.ajax({
+                        data: { msg: rawText },
+                        type: "POST",
+                        url: "/get", // Replace with your endpoint
+                    }).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/d83341deb75c4c4f6b113f27b1e42cd8-chatbot-florence-already-helps-thousands-of-patients-to-remember-their-medication.png" class="rounded-circle user_img_msg">
+                                            </div>
+                                            <div class="msg_cotainer">${data}
+                                                <span class="msg_time">${str_time}</span>
+                                            </div>
+                                       </div>`;
+                        $("#messageFormeight").append(botHtml); // Append bot response
+                        $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
+                    });
+                }
+                event.preventDefault(); // Prevent default form submission
+            });
+
+            // Handle send button click (optional)
+            $("#send").on("click", function() {
+                $("#messageArea").submit(); // Submit the form
+            });
+
+            // Clear chat history button functionality
+            $("#clearChat").click(function() {
+                $("#messageFormeight").empty(); // Clear all messages
+            });
+        });
+    </script>
+</body>
+</html>