Upload 7 files

templates/base.html

@@ -65,9 +65,19 @@
         }
 
         footer {
-            margin-top: 50px;
-            text-align: center;
-            color: #888;
+        background-color: #2c2c3e;
+        color: #888;
+        padding: 10px 0;
+        text-align: center;
+        position: fixed;
+        width: 100%;
+        bottom: 0;
+        border-top: 2px solid #444;
+        }
+
+        footer p {
+            margin: 0;
+            font-size: 14px;
         }
     </style>
 </head>
@@ -108,7 +118,7 @@
     </div>
 
     <!-- Footer -->
-    <footer>
+    <footer class="fixed-bottom">
         <p>&copy; 2024 Document AI. All rights reserved.</p>
     </footer>
 

templates/chat.html

@@ -2,6 +2,98 @@
 
 {% block content %}
 
+<style>
+    /* Ensure full-page setup */
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container {
+        display: flex;
+        height: 50vh; /* Locks the height of the containers */
+        margin-top: 50px;
+    }
+
+    /* Styling for left and right panes */
+    .card {
+        height: 100%; /* Ensures cards fill the container height */
+        overflow: hidden; /* Prevents overflow of content */
+    }
+
+    .row {
+        height: 100%; /* Ensures the row fills the container */
+        margin: auto;
+    }
+
+    .col-md-5 {
+        display: flex;
+        flex-direction: column;
+        gap: 20px; /* Adds space between left and right containers */
+        max-height: 100%;
+    }
+
+    .card-body {
+        display: flex;
+        flex-direction: column;
+        height: auto; /* Occupies full height of the card */
+    }
+
+    /* Scrollable left pane's history section */
+    .history-section {
+        overflow-y: auto; /* Adds vertical scrolling */
+        flex: 1; /* Ensures this section takes up remaining space */
+        overflow-x: hidden;
+    }
+
+    /* Scrollbar customization */
+    .history-section::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .history-section::-webkit-scrollbar-thumb {
+        background-color: #888;
+        border-radius: 4px;
+    }
+
+    .history-section::-webkit-scrollbar-thumb:hover {
+        background-color: #555;
+    }
+
+    .history-section::-webkit-scrollbar-track {
+        background-color: #f1f1f1;
+    }
+
+    /* Space between left and right columns */
+    .row > .col-md-5:not(:last-child) {
+        margin-right: 20px; /* Adds space between left and right pane */
+    }
+
+    /* Form input and button adjustments */
+    .form-group input {
+        border-radius: 4px;
+    }
+
+    .btn-primary {
+        background-color: #007bff;
+        border-color: #007bff;
+    }
+
+    .btn-primary:hover {
+        background-color: #0056b3;
+        border-color: #0056b3;
+    }
+
+    /* Scrollable left section for queries */
+    .answer-section {
+        background: #2c2c3e;
+        padding: 10px;
+        border-radius: 4px;
+        border: 1px solid #2c2c3e;
+    }
+</style>
+
 <div class="container">
     <div class="row justify-content-center">
         <!-- Left Pane -->
@@ -43,15 +135,12 @@
                                 <div class="question">
                                     <strong>Query:</strong> {{ question }}
                                 </div>
-                                <strong><hr></strong>
+                                <hr>
                                 <div class="answer mt-2">
                                     <strong>Answer:</strong> {{ answer }}
                                 </div>
                             </div>
                         </div>
-                        <!-- {% if not loop.last %}
-                        <hr>
-                        {% endif %} -->
                         {% endfor %}
                     </div>
                 </div>
@@ -59,4 +148,5 @@
         </div>
     </div>
 </div>
+
 {% endblock %}

templates/create_db.html

@@ -1,32 +1,110 @@
 {% 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>
+<style>
+    /* Ensure the body takes full height for proper layout */
+    html, body {
+        height: 100%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 50vh; /* Full height of the viewport */
+        overflow: hidden; /* Prevent extra scrollbars */
+    }
+
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%; /* Centered and appropriately sized */
+        max-height: calc(50vh - 50px); /* Adjust to fit within view */
+        overflow-y: auto; /* Add scrolling if content overflows */
+    }
+
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+        position: sticky; /* Keeps header fixed */
+        top: 0;
+        z-index: 1000; /* Ensures it stays above scrollable content */
+    }
+
+    .text-muted {
+    --bs-text-opacity: 1;
+    color: rgb(121 136 151 / 75%) !important;
+    }
+
+    .form-label {
+        font-weight: bold;
+        color: #cfcfcf;
+    }
+
+    .form-control {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border: 1px solid #444;
+    }
+
+    .form-control:focus {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border-color: #4c4cff;
+        box-shadow: 0 0 4px #4c4cff;
+    }
+
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+
+    /* Custom scrollbar */
+    .card::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .card::-webkit-scrollbar-thumb {
+        background-color: #444;
+        border-radius: 4px;
+    }
+</style>
+
+<div class="container mt-5">
+    <div class="card 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: You can upload folder having your documents.</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/list_dbs.html

@@ -1,24 +1,130 @@
 {% 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>
+<style>
+    /* Full-page setup */
+    html, body {
+        height: 100%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 50vh; /* Full viewport height */
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* Card styling */
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Refined shadow effect */
+        max-height: calc(50vh - 50px); /* Adjust to fit within view */
+        overflow: hidden; /* Ensures no overflow from child elements */
+    }
+
+    /* Fixed header */
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+        position: sticky; /* Keeps header fixed */
+        top: 0;
+        z-index: 1000; /* Ensures it stays above scrollable content */
+    }
+
+    .card-body {
+        max-height: 60vh; /* Limits height of scrollable area */
+        overflow-y: auto; /* Adds vertical scrolling */
+    }
+
+    /* Scrollbar customization */
+    .card-body::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .card-body::-webkit-scrollbar-thumb {
+        background-color: #444; /* Thumb color */
+        border-radius: 4px; /* Rounded scrollbar edges */
+    }
+
+    .card-body::-webkit-scrollbar-thumb:hover {
+        background-color: #555; /* Thumb hover color */
+    }
+
+    .card-body::-webkit-scrollbar-track {
+        background-color: #2c2c3e; /* Track background */
+    }
+
+    /* List group items */
+    .list-group-item {
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: 1px solid #444;
+        transition: background-color 0.3s ease;
+    }
+
+    .list-group-item:hover {
+        background-color: #383850;
+    }
+
+    /* Button styling */
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+    /* Align buttons side-by-side */
+    .button-container {
+        display: flex;
+        gap: 0.5rem; /* Adds space between buttons */
+    }
+
+    .btn-primary {
+        flex: 1; /* Ensures buttons have the same width */
+    }
+
+    /* Optional: Adjust margin and padding for better spacing */
+    .list-group-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>
+
+<div class="container">
+    <div class="card shadow">
+        <div class="card-header">
+            <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">
+                    <span>{{ db }}</span>
+                    <div class="button-container">
+                        <form method="post" action="{{ url_for('update_db', db_name=db) }}" class="mb-0">
+                            <button type="submit" class="btn btn-primary btn-sm">Update</button>
+                        </form>
                         <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>
+                </li>
+                {% endfor %}
+            </ul>
         </div>
     </div>
+</div>
 {% endblock %}

templates/modify_db.html

@@ -0,0 +1,44 @@
+{% 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>
+    <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/update_db.html

@@ -0,0 +1,107 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+    html, body {
+        height: 100%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 50vh;
+        overflow: hidden;
+    }
+
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%;
+        max-height: calc(50vh - 50px);
+        overflow-y: auto;
+    }
+
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+    .text-muted {
+        color: rgb(121 136 151 / 75%) !important;
+    }
+
+    .form-label {
+        font-weight: bold;
+        color: #cfcfcf;
+    }
+
+    .form-control {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border: 1px solid #444;
+    }
+
+    .form-control:focus {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border-color: #4c4cff;
+        box-shadow: 0 0 4px #4c4cff;
+    }
+
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+
+    .card::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .card::-webkit-scrollbar-thumb {
+        background-color: #444;
+        border-radius: 4px;
+    }
+</style>
+
+<div class="container mt-5">
+    <div class="card shadow">
+        <div class="card-header">
+            <h3>Update the Vector Database</h3>
+        </div>
+        <div class="card-body">
+            <form method="post" enctype="multipart/form-data">
+                <!-- Database Name Display -->
+                <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" value="{{ db_name }}" readonly>
+                </div>
+            
+                <!-- File or Folder Upload -->
+                <div class="form-group mt-3">
+                    <label for="files" class="form-label">Upload Files or Folder</label>
+                    <input type="file" id="files" name="files" class="form-control" webkitdirectory directory multiple>
+                    <small class="text-muted">Note: You can upload multiple files, a folder, or a single file.</small>
+                </div>
+            
+                <!-- Submit Button -->
+                <div class="mt-4 text-center">
+                    <button type="submit" class="btn btn-primary px-5">Update</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}