Upload 8 files

templates/chat.html

@@ -22,6 +22,15 @@
         gap: 30px;
     }
 
+    .container-flash {
+        display: flex;
+        height: 10vh;
+        margin-top: 10px;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+    }
+
     .card {
         background: #2c2c3e;
         border-radius: 10px;
@@ -94,6 +103,14 @@
         margin-bottom: 10px;
     }
 
+    .token-count {
+        font-size: 12px;
+        color: #b0b0b0;
+        text-align: right;
+        margin-top: 10px;
+        font-style: italic;
+    }
+
     /* History Section */
     .history-section {
         overflow-y: auto;
@@ -110,17 +127,41 @@
         margin-bottom: 10px;
     }
 
+    .alert {
+        padding: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        text-align: center;
+        position: absolute;
+        position-area: top center;
+        top: 30px;
+        align-items: center;
+    }
+
     .alert-error {
-        background-color: #ff4d4d;
-        color: white;
+        background-color: #D84040;
+        color: #ffffff;
     }
 
-    .alert-table_selected {
-        background-color: #4dff74;
-        color: white;
+    .alert-success {
+        background-color: #D2DE32;
+        color: #ffffff;
     }
 
+    .alert-warning {
+        background-color: #FFC700;
+        color: #ffffff;
+    }
 </style>
+<div class="container-flash">
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
+            <strong>{{ messages[0][1] }}</strong>
+        </div>
+    {% endif %}
+{% endwith %}
+</div>
 
 <div class="container">
     <!-- Left Pane -->
@@ -146,6 +187,7 @@
             <hr>
             {{ answer }}
             </div>
+            <div class="token-count">Tokens Used: {{ token_count }}</div>
         </div>
         {% endif %}
     </div>
@@ -166,6 +208,12 @@
 </div>
 
 <script>
+    const flashMessage = document.getElementById('flash-message');
+        if (flashMessage) {
+            setTimeout(function() {
+                flashMessage.style.display = 'none';
+            }, 2000); // Hide after 2 seconds
+        }
     function showLoader() {
         document.getElementById('loader').style.display = 'block';
         document.querySelector('.answer-section')?.classList.add('d-none');

templates/create_db.html

@@ -122,7 +122,42 @@
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }
+    
+    .alert {
+        padding: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        text-align: center;
+        position: absolute;
+        position-area: top center;
+        top: 30px;
+        align-items: center;
+    }
+
+    .alert-error {
+        background-color: #D84040;
+        color: #ffffff;
+    }
+
+    .alert-success {
+        background-color: #D2DE32;
+        color: #ffffff;
+    }
+
+    .alert-warning {
+        background-color: #FFC700;
+        color: #ffffff;
+    }
 </style>
+<div class="container-flash">
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
+            <strong>{{ messages[0][1] }}</strong>
+        </div>
+    {% endif %}
+{% endwith %}
+</div>
 
 <div class="container mt-5">
     <div class="card shadow">
@@ -176,7 +211,13 @@
     const fileUpload = document.getElementById('file-upload');
     const submitBtn = document.getElementById('submit-btn');
     const spinner = document.getElementById('spinner');
-
+    const flashMessage = document.getElementById('flash-message');
+    //for flash message
+        if (flashMessage) {
+            setTimeout(function() {
+                flashMessage.style.display = 'none';
+            }, 2000); // Hide after 2 seconds
+        }
     // Toggle upload mode
     folderLabel.addEventListener('click', () => {
         folderLabel.classList.add('active');

templates/delete_doc.html

@@ -0,0 +1,273 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+    html, body {
+        height: 100%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 75vh; /* Fill the viewport height */
+    }
+
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%;
+        height: 70%; /* Fixed height for the card */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 1rem;
+    }
+
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+    }
+
+    .form-label {
+        font-weight: bold;
+        color: #cfcfcf;
+    }
+
+    /* Custom style for the dropdown with an arrow */
+    .form-control {
+        position: relative;
+        appearance: none;
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border: 1px solid #444;
+        padding-right: 2rem; /* Space for the arrow */
+    }
+
+    .form-control:focus {
+        border-color: #4c4cff;
+        box-shadow: 0 0 4px #4c4cff;
+    }
+
+    .form-control::after {
+        content: '▼'; /* Down arrow */
+        position: absolute;
+        right: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: 0.8rem;
+        color: #4b4b74;
+    }
+
+    #list_doc {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23cfcfcf" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
+        background-repeat: no-repeat;
+        background-position: right 1rem center;
+        background-size: 1rem;
+    }
+
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+
+    .toggle-switch {
+        margin: 1rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .toggle-switch input {
+        display: none;
+    }
+
+    .toggle-label {
+        background-color: #444;
+        color: #cfcfcf;
+        padding: 0.5rem 1.5rem;
+        border: 1px solid #555;
+        cursor: pointer;
+        margin-right: 1rem;
+        text-align: center;
+        border-radius: 4px;
+    }
+
+    .toggle-label.active {
+        background-color: #4c4cff;
+        color: #fff;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .text-center.d-flex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px;
+    }
+
+    /* Spinner style */
+    .button-spinner {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border: 4px solid #f5f5f5;
+        border-top: 4px solid #4c4cff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        display: none;
+    }
+
+    /* Animation for the spinner */
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    /* Hide spinner when not loading */
+    .btn-loading .button-spinner {
+        display: inline-block;
+    }
+
+    .btn-loading .btn-text {
+        display: none;
+    }
+
+    .alert {
+        padding: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        text-align: center;
+        position: absolute;
+        position-area: top center;
+        top: 30px;
+        align-items: center;
+    }
+
+    .alert-error {
+        background-color: #D84040;
+        color: #ffffff;
+    }
+
+    .alert-success {
+        background-color: #D2DE32;
+        color: #ffffff;
+    }
+
+    .alert-warning {
+        background-color: #FFC700;
+        color: #ffffff;
+    }
+
+</style>
+
+<div class="container-flash">
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
+            <strong>{{ messages[0][1] }}</strong>
+        </div>
+    {% endif %}
+{% endwith %}
+</div>
+
+<div class="container mt-5">
+    <div class="card shadow">
+        <div class="card-header">
+            <h3>Manage Database</h3>
+        </div>
+        <div class="card-body">
+            <form id="db-form" method="post" action="{{ url_for('delete_doc',db_name=db_name) }}">
+                <!-- Database Name (Read-Only) -->
+                <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 Selection -->
+                <div class="form-group mt-3">
+                    <label for="list_doc" class="form-label">Select a File to delete from menu</label>
+                    <select id="list_doc" name="list_doc" class="form-control" required>
+                        {% for file in file_list %}
+                            <option value="{{ file }}">{{ file }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+
+                <!-- Buttons -->
+                <!-- <div class="text-center">
+                    <button type="submit" class="btn btn-danger">Delete</button>
+                </div> -->
+                <!-- Submit Button -->
+                <div class="mt-4 text-center d-flex justify-content-center align-items-center">
+                    <button type="submit" class="btn btn-danger px-5" id="delete-button">
+                        <span class="btn-text">Delete Document</span>
+                        <div class="button-spinner"></div>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    const folderLabel = document.getElementById('folder-label');
+    const fileLabel = document.getElementById('file-label');
+    const folderUpload = document.getElementById('folder-upload');
+    const fileUpload = document.getElementById('file-upload');
+    const submitButton = document.getElementById('delete-button');
+    const buttonSpinner = submitButton.querySelector('.button-spinner');
+    const flashMessage = document.getElementById('flash-message');
+
+    //flash message
+        if (flashMessage) {
+            setTimeout(function() {
+                flashMessage.style.display = 'none';
+            }, 2000); // Hide after 2 seconds
+        }
+    // Toggle upload mode
+    folderLabel.addEventListener('click', () => {
+        folderLabel.classList.add('active');
+        fileLabel.classList.remove('active');
+        folderUpload.classList.remove('hidden');
+        fileUpload.classList.add('hidden');
+    });
+
+    fileLabel.addEventListener('click', () => {
+        fileLabel.classList.add('active');
+        folderLabel.classList.remove('active');
+        fileUpload.classList.remove('hidden');
+        folderUpload.classList.add('hidden');
+    });
+
+    // Handle form submission
+    document.getElementById('db-form').addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent form submission for demonstration
+        submitButton.classList.add('btn-loading');
+        // Simulate loading
+        setTimeout(() => {
+            // After form is "submitted" and loading is complete
+            submitButton.classList.remove('btn-loading');
+            alert("Form submitted successfully!"); // Simulate success
+        }, 2000); // 2 seconds for loading simulation
+    });
+</script>
+
+{% endblock %}

templates/list_dbs.html

@@ -106,44 +106,52 @@
         margin-bottom: 10px;
         border-radius: 5px;
         text-align: center;
+        position: absolute;
+        position-area: top center;
+        top: 30px;
+        align-items: center;
     }
 
     .alert-error {
-        background-color: #ff4d4d;
-        color: white;
+        background-color: #D84040;
+        color: #ffffff;
+    }
+
+    .alert-success {
+        background-color: #D2DE32;
+        color: #ffffff;
     }
 
-    .alert-table_selected {
-        background-color: #4dff74;
-        color: white;
+    .alert-warning {
+        background-color: #FFC700;
+        color: #ffffff;
     }
+    
 </style>
 
 {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
-        {% for category, message in messages %}
-            <div class="alert alert-{{ category }}">
-                {{ message }}
-            </div>
-        {% endfor %}
+        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
+            <strong>{{ messages[0][1] }}</strong>
+        </div>
     {% endif %}
 {% endwith %}
 
 <div class="container">
     <div class="card shadow">
         <div class="card-header">
-            <h3>Available Vector Databases</h3>
+            <h3><strong>Available Vector Databases</strong></h3>
         </div>
         <div class="card-body">
-            <h4 class="text-center mb-4">Select a Vector Database</h4>
+            <h3 class="text-center mb-4"><strong>Select a Vector Database</strong></h3>
             <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('modify_db', db_name=db) }}" class="mb-0">
+                            <button type="submit" class="btn btn-primary btn-sm">Modify</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>
@@ -154,4 +162,12 @@
         </div>
     </div>
 </div>
+<script>
+    const flashMessage = document.getElementById('flash-message');
+        if (flashMessage) {
+            setTimeout(function() {
+                flashMessage.style.display = 'none';
+            }, 2000); // Hide after 2 seconds
+        }
+</script>
 {% endblock %}

templates/modify_dbs.html

@@ -0,0 +1,95 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+.alert {
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    text-align: center;
+    position: absolute;
+    position-area: top center;
+    top: 30px;
+    align-items: center;
+}
+
+.alert-error {
+        background-color: #D84040;
+        color: #ffffff;
+    }
+
+    .alert-success {
+        background-color: #D2DE32;
+        color: #ffffff;
+    }
+
+    .alert-warning {
+        background-color: #FFC700;
+        color: #ffffff;
+    }
+    
+</style>
+{% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
+            <strong>{{ messages[0][1] }}</strong>
+        </div>
+    {% endif %}
+{% endwith %}
+
+    <div class="container">
+        <div class="row justify-content-center mb-4">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Update Database</h5>
+                        <p class="card-text">Upload the new document in existing DB. Currently selected DB: </p>
+                        <p class="card-text"><strong>{{ db_name }}</strong></p>
+                        <a href="/update-dbs/{{ db_name }}" class="btn btn-primary">Go to Update 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>
+                        <p class="card-text"><strong>{{ db_name }}</strong></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 mb-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Remove DB</h5>
+                        <p class="card-text">Remove the entire DB. Currently selected DB: </p>
+                        <p class="card-text"><strong>{{ db_name }}</strong></p>
+                        <a href="/remove-dbs/{{ db_name }}" class="btn btn-danger">Go to Remove DB</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 mb-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Delete Document</h5>
+                        <p class="card-text">Delete a document by specific file name. Currently selected DB: </p>
+                        <p class="card-text"><strong>{{ db_name }}</strong></p>
+                        <a href="/delete-doc/{{ db_name }}" class="btn btn-danger">Go to Delete Document</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const flashMessage = document.getElementById('flash-message');
+            if (flashMessage) {
+                setTimeout(function() {
+                    flashMessage.style.display = 'none';
+                }, 2000); // Hide after 2 seconds
+            }
+    </script>
+{% endblock %}

templates/update_db.html

@@ -3,15 +3,14 @@
 {% block content %}
 <style>
     html, body {
-        height: 100%;
+        height: 50%;
         margin: 0;
     }
 
     .container {
         display: flex;
         flex-direction: column;
-        height: 50vh;
-        overflow: hidden;
+        height: 80vh; /* Fill the viewport height */
     }
 
     .card {
@@ -20,8 +19,11 @@
         color: #f5f5f5;
         border: none;
         width: 50%;
-        max-height: calc(50vh - 50px);
-        overflow-y: auto;
+        height: 70%; /* Fixed height for the card */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 1rem;
     }
 
     .card-header {
@@ -29,13 +31,6 @@
         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 {
@@ -59,6 +54,9 @@
     .btn-primary {
         background-color: #4c4cff;
         border-color: #4c4cff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
     .btn-primary:hover {
@@ -66,15 +64,101 @@
         border-color: #3838e8;
     }
 
-    .card::-webkit-scrollbar {
-        width: 8px;
+    .toggle-switch {
+        margin: 1rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .toggle-switch input {
+        display: none;
     }
 
-    .card::-webkit-scrollbar-thumb {
+    .toggle-label {
         background-color: #444;
+        color: #cfcfcf;
+        padding: 0.5rem 1.5rem;
+        border: 1px solid #555;
+        cursor: pointer;
+        margin-right: 1rem;
+        text-align: center;
         border-radius: 4px;
     }
+
+    .toggle-label.active {
+        background-color: #4c4cff;
+        color: #fff;
+    }
+
+    .toggle-label:hover {
+        background-color: #3838e8;
+        color: #fff;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .text-center.d-flex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px;
+    }
+
+    .spinner {
+        border: 4px solid #f3f3f3; /* Light grey */
+        border-top: 4px solid #4c4cff; /* Blue */
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        animation: spin 1s linear infinite;
+        margin-left: 10px;
+        display: none; /* Initially hidden */
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .alert {
+        padding: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        text-align: center;
+        position: absolute;
+        position-area: top center;
+        top: 30px;
+        align-items: center;
+    }
+
+    .alert-error {
+        background-color: #D84040;
+        color: #ffffff;
+    }
+
+    .alert-success {
+        background-color: #D2DE32;
+        color: #ffffff;
+    }
+
+    .alert-warning {
+        background-color: #FFC700;
+        color: #ffffff;
+    }
+    
 </style>
+<div class="container-flash">
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
+            <strong>{{ messages[0][1] }}</strong>
+        </div>
+    {% endif %}
+{% endwith %}
+</div>
 
 <div class="container mt-5">
     <div class="card shadow">
@@ -82,26 +166,80 @@
             <h3>Update the Vector Database</h3>
         </div>
         <div class="card-body">
-            <form method="post" enctype="multipart/form-data">
-                <!-- Database Name Display -->
+            <form id="db-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" 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>
+                
+                <!-- Toggle Upload Mode -->
+                <div class="toggle-switch">
+                    <label class="toggle-label active" id="folder-label" for="folder">Upload Folder</label>
+                    <label class="toggle-label" id="file-label" for="file">Upload Files</label>
+                </div>
+
+                <!-- Folder Upload Input -->
+                <div id="folder-upload" 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>
+                    <small class="text-muted">Note: You can upload a folder containing multiple files.</small>
+                </div>
+
+                <!-- Single File Upload Input -->
+                <div id="file-upload" class="form-group mt-3 hidden">
+                    <label for="file" class="form-label">Upload Files</label>
+                    <input type="file" id="file" name="file" class="form-control" multiple>
+                    <small class="text-muted">Note: You can upload one or more files.</small>
                 </div>
-            
+
                 <!-- Submit Button -->
-                <div class="mt-4 text-center">
-                    <button type="submit" class="btn btn-primary px-5">Update</button>
+                <div class="mt-4 text-center d-flex justify-content-center align-items-center">
+                    <button type="submit" class="btn btn-primary px-5" id="submit-btn">
+                        <span class="btn-text">Create</span>
+                        <div class="spinner" id="spinner"></div>
+                    </button>
                 </div>
             </form>
         </div>
     </div>
 </div>
+
+<script>
+    const folderLabel = document.getElementById('folder-label');
+    const fileLabel = document.getElementById('file-label');
+    const folderUpload = document.getElementById('folder-upload');
+    const fileUpload = document.getElementById('file-upload');
+    const submitBtn = document.getElementById('submit-btn');
+    const spinner = document.getElementById('spinner');
+    const flashMessage = document.getElementById('flash-message');
+    //for flash message
+        if (flashMessage) {
+            setTimeout(function() {
+                flashMessage.style.display = 'none';
+            }, 2000); // Hide after 2 seconds
+        }
+    // Toggle upload mode
+    folderLabel.addEventListener('click', () => {
+        folderLabel.classList.add('active');
+        fileLabel.classList.remove('active');
+        folderUpload.classList.remove('hidden');
+        fileUpload.classList.add('hidden');
+    });
+
+    fileLabel.addEventListener('click', () => {
+        fileLabel.classList.add('active');
+        folderLabel.classList.remove('active');
+        fileUpload.classList.remove('hidden');
+        folderUpload.classList.add('hidden');
+    });
+
+    // Show loader when form is submitted
+    document.getElementById('db-form').addEventListener('submit', function(event) {
+        // Show the spinner and hide the text
+        submitBtn.querySelector('.btn-text').style.display = 'none';
+        spinner.style.display = 'inline-block';
+    });
+</script>
+
 {% endblock %}