Upload 10 files

app_3.py

@@ -0,0 +1,166 @@
+from flask import Flask, render_template, request, redirect, url_for, session
+import os
+from werkzeug.utils import secure_filename
+from retrival import generate_data_store
+from langchain_community.vectorstores import Chroma
+from langchain.embeddings import HuggingFaceEmbeddings
+from langchain.prompts import ChatPromptTemplate
+from huggingface_hub import InferenceClient
+from langchain.schema import Document 
+from langchain_core.documents import Document
+from dotenv import load_dotenv
+import re
+import glob
+import shutil
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+
+# Set the secret key for session management
+app.secret_key = os.urandom(24)
+
+# Configurations
+UPLOAD_FOLDER = "uploads/"
+VECTOR_DB_FOLDER = "VectorDB/"
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(VECTOR_DB_FOLDER, exist_ok=True)
+
+# Global variables
+CHROMA_PATH = None
+PROMPT_TEMPLATE = """
+You are working with a retrieval-augmented generation (RAG) setup. Your task is to generate a response based on the context provided and the question asked. Consider only the following context strictly, and use it to answer the question. Do not include any external information.
+
+Context:
+{context}
+
+---
+
+Question:
+{question}
+
+Response:
+"""
+HFT = os.getenv('HF_TOKEN')
+client = InferenceClient(api_key=HFT)
+
+@app.route('/', methods=['GET'])
+def home():
+    return render_template('home.html')
+
+@app.route('/chat', methods=['GET', 'POST'])
+def chat():
+    
+    if 'history' not in session:
+        session['history'] = []
+    print("sessionhist1",session['history'])
+    
+    global CHROMA_PATH
+    old_db = session.get('old_db', None) 
+    print(f"Selected DB: {CHROMA_PATH}")
+    
+    if old_db != None:
+        if CHROMA_PATH != old_db:
+            session['history'] = [] 
+        
+    #print("sessionhist1",session['history'])
+    
+    if request.method == 'POST':
+        query_text = request.form['query_text']
+        if CHROMA_PATH is None:
+            return render_template('chat.html', error="No vector database selected!", history=[])
+
+        # Load the selected database
+        embedding_function = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+        db = Chroma(persist_directory=CHROMA_PATH, embedding_function=embedding_function)
+        results = db.similarity_search_with_relevance_scores(query_text, k=3)        
+        context_text = "\n\n---\n\n".join([doc.page_content for doc, _score in results])
+
+        # Prepare the prompt and query the model
+        prompt_template = ChatPromptTemplate.from_template(PROMPT_TEMPLATE)
+        prompt = prompt_template.format(context=context_text, question=query_text)
+        print("results------------------->",prompt)
+        response = client.chat.completions.create(
+            model="mistralai/Mistral-7B-Instruct-v0.3",
+            messages=[{"role": "system", "content": "You are an assistant specifically designed to generate responses based on the context provided. Your task is to answer questions strictly using the context without adding any external knowledge or information. Please ensure that your responses are relevant, accurate, and based solely on the given context."},
+                      {"role": "user", "content": prompt}],
+            max_tokens=500,
+            temperature=0.3
+        )
+        data = response.choices[0].message.content
+
+        if re.search(r'\bmention\b|\bnot mention\b|\bnot mentioned\b|\bnot contain\b|\bnot include\b|\bnot provide\b|\bdoes not\b|\bnot explicitly\b|\bnot explicitly mentioned\b', data, re.IGNORECASE):
+            data = "We do not have information related to your query on our end."
+            
+        # Save the query and answer to the session history
+        session['history'].append((query_text, data))
+        
+        # Mark the session as modified to ensure it gets saved
+        session.modified = True
+        print("sessionhist2",session['history'])
+
+        return render_template('chat.html', query_text=query_text, answer=data, history=session['history'],old_db=CHROMA_PATH)
+
+    return render_template('chat.html', history=session['history'], old_db=CHROMA_PATH)
+
+@app.route('/create-db', methods=['GET', 'POST'])
+def create_db():
+    if request.method == 'POST':
+        db_name = request.form['db_name']
+
+        # Get all files from the uploaded folder
+        files = request.files.getlist('folder')
+        if not files:
+            return "No files uploaded", 400
+
+        # Define the base upload path
+        upload_base_path = os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(db_name))
+        #upload_base_path = upload_base_path.replace("\\", "/")
+        print(f"Base Upload Path: {upload_base_path}")
+        os.makedirs(upload_base_path, exist_ok=True)
+
+        # Save each file and recreate folder structure
+        for file in files:
+            print("file , files",files,file)
+            #relative_path = file.filename  # This should contain the subfolder structure
+            file_path = os.path.join(upload_base_path)
+            #file_path = file_path.replace("\\", "/")
+
+            # Ensure the directory exists before saving the file
+            print(f"Saving to: {file_path}")
+            os.makedirs(os.path.dirname(file_path), exist_ok=True)
+            
+            
+            # Get the file path and save it
+            file_path = os.path.join(upload_base_path, secure_filename(file.filename))
+            file.save(file_path)
+            # with open(file_path, 'wb') as f:
+            #     shutil.copyfileobj(file.stream, f)
+        # Generate datastore
+        generate_data_store(upload_base_path, db_name)
+
+        # # Clean up uploaded files (if needed)
+        # uploaded_files = glob.glob(os.path.join(app.config['UPLOAD_FOLDER'], '*'))
+        # for f in uploaded_files:
+        #     os.remove(f)
+
+        return redirect(url_for('list_dbs'))
+
+    return render_template('create_db.html')
+
+@app.route('/list-dbs', methods=['GET'])
+def list_dbs():
+    vector_dbs = [name for name in os.listdir(VECTOR_DB_FOLDER) if os.path.isdir(os.path.join(VECTOR_DB_FOLDER, name))]
+    return render_template('list_dbs.html', vector_dbs=vector_dbs)
+
+@app.route('/select-db/<db_name>', methods=['POST'])
+def select_db(db_name):
+    global CHROMA_PATH
+    print(f"Selected DB: {CHROMA_PATH}")
+    CHROMA_PATH = os.path.join(VECTOR_DB_FOLDER, db_name)
+    CHROMA_PATH = CHROMA_PATH.replace("\\", "/")
+    print(f"Selected DB: {CHROMA_PATH}")
+    return redirect(url_for('chat'))
+
+if __name__ == "__main__":
+    app.run(debug=False, use_reloader=False)

requirements2.txt

@@ -0,0 +1,180 @@
+aiofiles==24.1.0
+aiohappyeyeballs==2.4.4
+aiohttp==3.11.11
+aiosignal==1.3.2
+annotated-types==0.7.0
+ansicon==1.89.0
+anyio==4.7.0
+asgiref==3.8.1
+attrs==24.3.0
+backoff==2.2.1
+bcrypt==4.2.1
+beautifulsoup4==4.12.3
+blessed==1.20.0
+blinker==1.9.0
+build==1.2.2.post1
+cachetools==5.5.0
+certifi==2024.12.14
+cffi==1.17.1
+chardet==5.2.0
+charset-normalizer==3.4.0
+chroma-hnswlib==0.7.3
+chromadb==0.5.0
+click==8.1.8
+colorama==0.4.6
+coloredlogs==15.0.1
+cryptography==44.0.0
+dataclasses-json==0.6.7
+Deprecated==1.2.15
+distro==1.9.0
+durationpy==0.9
+emoji==2.14.0
+eval_type_backport==0.2.2
+fastapi==0.115.6
+filelock==3.16.1
+filetype==1.2.0
+Flask==3.1.0
+flatbuffers==24.12.23
+frozenlist==1.5.0
+fsspec==2024.12.0
+google-auth==2.37.0
+googleapis-common-protos==1.66.0
+greenlet==3.1.1
+grpcio==1.68.1
+h11==0.14.0
+html5lib==1.1
+httpcore==1.0.7
+httptools==0.6.4
+httpx==0.27.2
+httpx-sse==0.4.0
+huggingface-hub==0.27.0
+humanfriendly==10.0
+idna==3.10
+importlib_metadata==8.5.0
+importlib_resources==6.4.5
+InstructorEmbedding==1.0.1
+itsdangerous==2.2.0
+Jinja2==3.1.5
+jinxed==1.3.0
+jiter==0.8.2
+joblib==1.4.2
+jsonpatch==1.33
+jsonpath-python==1.0.6
+jsonpointer==3.0.0
+kubernetes==31.0.0
+langchain==0.3.13
+langchain-community==0.3.13
+langchain-core==0.3.28
+langchain-huggingface==0.1.2
+langchain-openai==0.2.14
+langchain-text-splitters==0.3.4
+langdetect==1.0.9
+langsmith==0.2.4
+lxml==5.3.0
+markdown-it-py==3.0.0
+MarkupSafe==3.0.2
+marshmallow==3.23.2
+mdurl==0.1.2
+mistralai==1.2.5
+mmh3==4.1.0
+monotonic==1.6
+mpmath==1.3.0
+multidict==6.1.0
+mypy-extensions==1.0.0
+nest-asyncio==1.6.0
+networkx==3.4.2
+nltk==3.9.1
+numpy==1.26.4
+oauthlib==3.2.2
+olefile==0.47
+onnxruntime==1.17.1
+openai==1.58.1
+opentelemetry-api==1.29.0
+opentelemetry-exporter-otlp-proto-common==1.29.0
+opentelemetry-exporter-otlp-proto-grpc==1.29.0
+opentelemetry-instrumentation==0.50b0
+opentelemetry-instrumentation-asgi==0.50b0
+opentelemetry-instrumentation-fastapi==0.50b0
+opentelemetry-proto==1.29.0
+opentelemetry-sdk==1.29.0
+opentelemetry-semantic-conventions==0.50b0
+opentelemetry-util-http==0.50b0
+orjson==3.10.12
+overrides==7.7.0
+packaging==24.2
+pillow==11.0.0
+pinecone-client==5.0.1
+pinecone-notebooks==0.1.1
+pinecone-plugin-inference==1.1.0
+pinecone-plugin-interface==0.0.7
+pinecone-text==0.9.0
+posthog==3.7.4
+propcache==0.2.1
+protobuf==5.29.2
+psutil==6.1.1
+pyasn1==0.6.1
+pyasn1_modules==0.4.1
+pycparser==2.22
+pydantic==2.9.2
+pydantic-settings==2.7.0
+pydantic_core==2.23.4
+Pygments==2.18.0
+pypdf==5.1.0
+PyPika==0.48.9
+pyproject_hooks==1.2.0
+pyreadline3==3.5.4
+python-dateutil==2.9.0.post0
+python-docx==1.1.2
+python-dotenv==1.0.1
+python-iso639==2024.10.22
+python-magic==0.4.27
+python-magic-bin==0.4.14
+python-oxmsg==0.0.1
+PyYAML==6.0.2
+RapidFuzz==3.11.0
+readchar==4.2.1
+regex==2024.11.6
+requests==2.32.3
+requests-oauthlib==2.0.0
+requests-toolbelt==1.0.0
+revel==0.9.1
+rich==13.9.4
+rsa==4.9
+safetensors==0.4.5
+scikit-learn==1.6.0
+scipy==1.14.1
+sentence-transformers==3.3.1
+setuptools==75.6.0
+shellingham==1.5.4
+six==1.17.0
+sniffio==1.3.1
+soupsieve==2.6
+SQLAlchemy==2.0.36
+starlette==0.41.3
+sympy==1.13.1
+tenacity==9.0.0
+threadpoolctl==3.5.0
+tiktoken==0.8.0
+tokenizers==0.21.0
+torch==2.5.1
+tqdm==4.67.1
+transformers==4.47.1
+typer==0.15.1
+types-requests==2.32.0.20241016
+typing-inspect==0.9.0
+typing_extensions==4.12.2
+u==1.0
+unstructured==0.16.11
+unstructured-client==0.28.1
+urllib3==2.3.0
+uvicorn==0.34.0
+watchfiles==1.0.3
+wcwidth==0.2.13
+webencodings==0.5.1
+websocket-client==1.8.0
+websockets==14.1
+Werkzeug==3.1.3
+wget==3.2
+wrapt==1.17.0
+yarl==1.18.3
+zipp==3.21.0

retrival.py

@@ -0,0 +1,127 @@
+from langchain_community.document_loaders import DirectoryLoader
+from langchain.embeddings import HuggingFaceInstructEmbeddings,HuggingFaceEmbeddings # for embedding task 
+from langchain.text_splitter import RecursiveCharacterTextSplitter # for converting the large documents into smaller chunks
+from langchain.schema import Document 
+from langchain_core.documents import Document
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import Chroma
+import openai 
+import openai
+import os
+import shutil
+import uuid
+
+
+# Configurations
+UPLOAD_FOLDER = "./uploads"
+VECTOR_DB_FOLDER = "./VectorDB"
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(VECTOR_DB_FOLDER, exist_ok=True)
+
+
+def load_document(data_path):
+
+    # Load documents
+    loader = DirectoryLoader(data_path, glob="*.*")
+    print("loader",loader)
+    document = loader.load()
+    return document
+
+# Creating the chunks of Data from the knowledge 
+def split_text(documents: list[Document]):
+    text_splitter = RecursiveCharacterTextSplitter(
+        chunk_size = 1000,
+        chunk_overlap = 500,
+        length_function = len,
+        add_start_index=True,
+    ) 
+    chunks = text_splitter.split_documents(documents)
+    print(f"Split {len(documents)} documents into {len(chunks)} chunks.")
+    
+    return chunks
+
+# # Chroma for creating the vector db whcch we will use for the searching relvant data.
+# def save_to_chroma(chunks: list[Document],name: str):
+#     print
+#     CHROMA_PATH = f"./VectorDB/chroma_{name}"
+#     # Clear out the database first.
+#     if os.path.exists(CHROMA_PATH):
+#         shutil.rmtree(CHROMA_PATH)        
+   
+#     # Initialize SBERT embedding function
+#     embedding_function = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+#     db = Chroma(persist_directory=CHROMA_PATH, embedding_function=embedding_function)
+    
+#     # Add documents and persist the database
+#     db.add_documents(chunks)
+#     db.persist()
+#     # Return the database instance or a success status
+#     return db
+
+async def save_to_chroma(chunks: list[Document], name: str):
+    CHROMA_PATH = f"./VectorDB/chroma_{name}"
+    
+    # Clear out the database first
+    if os.path.exists(CHROMA_PATH):
+        shutil.rmtree(CHROMA_PATH)
+    
+    try:
+        # Initialize SBERT embedding function
+        embedding_function = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+        db = Chroma(persist_directory=CHROMA_PATH, embedding_function=embedding_function)
+        
+        # Add documents and persist the database
+        print("Adding documents to the database...")
+        db.add_documents(chunks)
+        print("Persisting the database...")
+        db.persist()
+        print("Database successfully saved.")
+        
+        return db
+    except Exception as e:
+        print("Error while saving to Chroma:", e)
+        return None
+ 
+def get_unique_sources(chroma_path):
+    # Load the Chroma database
+    db = Chroma(persist_directory=chroma_path)
+    
+    # Retrieve all metadata from the database
+    metadata_list = db.get()['metadatas']
+    
+    # Extract unique sources from metadata
+    unique_sources = {metadata['source'] for metadata in metadata_list if 'source' in metadata}
+    return list(unique_sources)
+  
+def generate_data_store(file_path,db_name):
+    CHROMA_PATH = f"./VectorDB/chroma_{db_name}"
+    print(f"filepath===>{file_path}  db_name =====>{db_name}")
+    try:
+        documents = load_document(file_path)
+        print("Documents loaded successfully.")
+    except Exception as e:
+        print(f"Error loading documents: {e}")
+        return
+
+    try:
+        chunks = split_text(documents)
+        print(f"Text split into {len(chunks)} chunks.")
+    except Exception as e:
+        print(f"Error splitting text: {e}")
+        return
+
+    try:
+        save_to_chroma(chunks, db_name)
+        print(f"Data saved to Chroma for database {db_name}.")
+    except Exception as e:
+        print(f"Error saving to Chroma: {e}")
+        return
+# def main():
+#     data_path = "H:\\DEV PATEL\\RAG Project\\data1"
+#     db_name = "Product_data"
+#     generate_data_store(data_path,db_name)
+
+# if __name__ == "__main__":
+#     main()
+    
+    

templates/base.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document AI</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #1e1e2f;
+            color: #f5f5f5;
+            font-family: 'Arial', sans-serif;
+        }
+
+        .navbar {
+            background-color: #2c2c3e;
+            border-bottom: 2px solid #444;
+        }
+
+        .navbar-brand {
+            font-weight: bold;
+            color: #f5f5f5 !important;
+        }
+
+        .navbar-nav .nav-link {
+            color: #cfcfcf !important;
+        }
+
+        .navbar-nav .nav-link:hover {
+            color: #ffffff !important;
+        }
+
+        .container {
+            margin-top: 50px;
+        }
+
+        .card {
+            background-color: #2c2c3e;
+            border: none;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+
+        .card:hover {
+            transform: scale(1.05);
+        }
+
+        .card-title {
+            color: #ffffff;
+        }
+
+        .card-body {
+            text-align: center;
+        }
+
+        .btn-primary {
+            background-color: #4c4cff;
+            border-color: #4c4cff;
+        }
+
+        .btn-primary:hover {
+            background-color: #3838e8;
+            border-color: #3838e8;
+        }
+
+        footer {
+            margin-top: 50px;
+            text-align: center;
+            color: #888;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-expand-lg">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">Document AI</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/create-db">Create DB</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/list-dbs">List DBs</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/chat">Chat</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="container">
+        {% block content %}
+        <!-- Page-specific content will go here -->
+        {% endblock %}
+    </div>
+
+    <!-- Footer -->
+    <footer>
+        <p>&copy; 2024 Document AI. All rights reserved.</p>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+</body>
+</html>

templates/chat.html

@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="container">
+    <div class="row justify-content-center">
+        <!-- Left Pane -->
+        <div class="col-md-5">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Document AI</h5>
+                    <p class="card-text">Enter a query and get an answer based on the stored context.</p>
+
+                    <form method="POST" action="{{ url_for('chat') }}">
+                        <div class="form-group">
+                            <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}"
+                                required class="form-control">
+                        </div>
+                        <div class="form-group mt-2">
+                            <button type="submit" class="btn btn-primary">Submit</button>
+                        </div>
+                    </form>
+
+                    {% if answer %}
+                    <div class="answer-section mt-3">
+                        <h6>Answer:</h6>
+                        <div class="answer">{{ answer }}</div>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Pane -->
+        <div class="col-md-5">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Previous Queries</h5>
+                    <div class="history-section">
+                        {% for question, answer in history %}
+                        <div class="card mb-3">
+                            <div class="card-body">
+                                <div class="question">
+                                    <strong>Query:</strong> {{ question }}
+                                </div>
+                                <strong><hr></strong>
+                                <div class="answer mt-2">
+                                    <strong>Answer:</strong> {{ answer }}
+                                </div>
+                            </div>
+                        </div>
+                        <!-- {% if not loop.last %}
+                        <hr>
+                        {% endif %} -->
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/create_db.html

@@ -0,0 +1,32 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="container mt-5">
+        <div class="card bg-dark text-white shadow">
+            <div class="card-header">
+                <h3>Create a New Vector Database</h3>
+            </div>
+            <div class="card-body">
+                <form method="post" enctype="multipart/form-data">
+                    <!-- Database Name Input -->
+                    <div class="form-group">
+                        <label for="db_name" class="form-label">Database Name</label>
+                        <input type="text" id="db_name" name="db_name" class="form-control" placeholder="Enter database name" required>
+                    </div>
+                
+                    <!-- Folder Upload Input -->
+                    <div class="form-group mt-3">
+                        <label for="folder" class="form-label">Upload Folder</label>
+                        <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple required>
+                        <small class="text-muted">Note: Folder upload is supported only in Chrome and Edge browsers.</small>
+                    </div>
+                
+                    <!-- Submit Button -->
+                    <div class="mt-4 text-center">
+                        <button type="submit" class="btn btn-primary px-5">Create</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/home.html

@@ -0,0 +1,24 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Create a New Database</h5>
+                    <p class="card-text">Upload your documents and create a vector database for retrieval.</p>
+                    <a href="/create-db" class="btn btn-primary">Go to Create DB</a>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Chat with AI</h5>
+                    <p class="card-text">Ask questions and get answers based on your vector database.</p>
+                    <a href="/list-dbs" class="btn btn-primary">Go to List of DB</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/index.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html> 
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Query Answering System</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #121212;
+            color: #f5f5f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            max-width: 1400px;
+            height: 100%;
+        }
+
+        .left-pane {
+            width: 45%;
+            background-color: #1f1f1f;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            padding: 30px;
+            margin: 20px;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+
+        .right-pane {
+            width: 45%;
+            background-color: #1f1f1f;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            padding: 30px;
+            margin: 20px;
+            max-height: 90vh;
+            overflow-y: auto;
+            position: sticky;
+            top: 0;
+        }
+
+        .header {
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: #f5f5f5;
+        }
+
+        .header p {
+            font-size: 14px;
+            color: #bbb;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group input[type="text"] {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #444;
+            background-color: #333;
+            color: #fff;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .form-group input[type="text"]:focus {
+            border-color: #007bff;
+            outline: none;
+        }
+
+        .form-group button {
+            padding: 12px 25px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s ease;
+        }
+
+        .form-group button:hover {
+            background-color: #0056b3;
+        }
+
+        .answer-section {
+            margin-top: 30px;
+            background-color: #333;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        .answer-section h3 {
+            font-size: 22px;
+            font-weight: 600;
+            color: #f5f5f5;
+        }
+
+        .answer {
+            padding: 15px;
+            background-color: #444;
+            border-radius: 8px;
+            font-size: 16px;
+            white-space: pre-wrap;
+            color: #ddd;
+        }
+
+        .sources {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #888;
+        }
+
+        .history-section {
+            margin-top: 30px;
+            background-color: #333;
+            padding: 20px;
+            border-radius: 8px;
+        }
+
+        .history-item {
+            margin-bottom: 15px;
+            background-color: #444;
+            padding: 15px;
+            border-radius: 8px;
+        }
+
+        .history-item .question {
+            font-weight: bold;
+            color: #f5f5f5;
+        }
+
+        .history-item .answer {
+            color: #ddd;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 768px) {
+            .container {
+                flex-direction: column;
+                width: 90%;
+                max-width: 600px;
+            }
+
+            .left-pane, .right-pane {
+                width: 100%;
+                margin: 10px 0;
+            }
+
+            .header h1 {
+                font-size: 28px;
+            }
+
+            .form-group input[type="text"],
+            .form-group button {
+                font-size: 14px;
+            }
+
+            .answer-section h3 {
+                font-size: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <div class="left-pane">
+            <div class="header">
+                <h1>Document AI</h1>
+                <p>Enter a query and get an answer based on the stored context.</p>
+            </div>
+
+            <form method="POST" action="{{ url_for('chat') }}">
+                <div class="form-group">
+                    <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}" required>
+                </div>
+                <div class="form-group">
+                    <button type="submit">Submit</button>
+                </div>
+            </form>
+
+            {% if answer %}
+            <div class="answer-section">
+                <h3>Answer:</h3>
+                <div class="answer">{{ answer }}</div>
+            </div>
+            {% endif %}
+        </div>
+
+        <div class="right-pane">
+            <div class="header">
+                <h1>Previous Queries</h1>
+            </div>
+            <div class="history-section">
+                {% for question, answer in history %}
+                    <div class="history-item">
+                        <div class="question">{{ question }}</div>
+                        <div class="answer">{{ answer }}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>

templates/index_old.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Query Answering System</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #121212;
+            color: #f5f5f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            background-color: #1f1f1f;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            width: 100%;
+            max-width: 700px; /* Adjusted max-width for better fit */
+            padding: 30px; /* Reduced padding for a more compact design */
+            text-align: center;
+            margin: 20px; /* Margin added to ensure content is not touching the edges */
+            max-height: 90vh; /* Limit height to 90% of the viewport height */
+            overflow-y: auto; /* Allow scrolling if content overflows */
+        }
+
+        .header {
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: #f5f5f5;
+        }
+
+        .header p {
+            font-size: 14px;
+            color: #bbb;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group input[type="text"] {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #444;
+            background-color: #333;
+            color: #fff;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .form-group input[type="text"]:focus {
+            border-color: #007bff;
+            outline: none;
+        }
+
+        .form-group button {
+            padding: 12px 25px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s ease;
+        }
+
+        .form-group button:hover {
+            background-color: #0056b3;
+        }
+
+        .answer-section {
+            margin-top: 30px;
+            background-color: #333;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        .answer-section h3 {
+            font-size: 22px;
+            font-weight: 600;
+            color: #f5f5f5;
+        }
+
+        .answer {
+            padding: 15px;
+            background-color: #444;
+            border-radius: 8px;
+            font-size: 16px;
+            white-space: pre-wrap;
+            color: #ddd;
+        }
+
+        .sources {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #888;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 768px) {
+            .container {
+                padding: 20px;
+                width: 90%;
+                max-width: 600px;
+            }
+
+            .header h1 {
+                font-size: 28px;
+            }
+
+            .form-group input[type="text"],
+            .form-group button {
+                font-size: 14px;
+            }
+
+            .answer-section h3 {
+                font-size: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <div class="header">
+            <h1>Documnet AI</h1>
+            <p>Enter a query and get an answer based on the stored context.</p>
+        </div>
+
+        <form method="POST" action="/">
+            <div class="form-group">
+                <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}" required>
+            </div>
+            <div class="form-group">
+                <button type="submit">Submit</button>
+            </div>
+        </form>
+
+        {% if answer %}
+        <div class="answer-section">
+            <h3>Answer:</h3>
+            <div class="answer">{{ answer }}</div>
+            <!-- <div class="sources">
+                <strong>Sources:</strong> {{ sources }}
+            </div> -->
+        </div>
+        {% endif %}
+    </div>
+
+</body>
+</html>

templates/list_dbs.html

@@ -0,0 +1,24 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="container mt-5">
+        <div class="card bg-dark text-white shadow">
+            <div class="card-header text-center">
+                <h3>Available Vector Databases</h3>
+            </div>
+            <div class="card-body">
+                <h4 class="text-center mb-4">Select a Vector Database</h4>
+                <ul class="list-group">
+                    {% for db in vector_dbs %}
+                    <li class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center">
+                        <span>{{ db }}</span>
+                        <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
+                            <button type="submit" class="btn btn-primary btn-sm">Select</button>
+                        </form>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+{% endblock %}