Upload 5 files

templates/base.html

@@ -4,106 +4,184 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document AI</title>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
     <style>
+        :root {
+            --bg-main: #0f172a;
+            --bg-card: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --accent-primary: #3b82f6;
+            --accent-hover: #2563eb;
+            --accent-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            --border-color: #334155;
+        }
+
         body {
-            background-color: #1e1e2f;
-            color: #f5f5f5;
-            font-family: 'Arial', sans-serif;
+            background-color: var(--bg-main);
+            color: var(--text-main);
+            font-family: 'Inter', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
 
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg-main);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--text-muted);
+        }
+
+        /* Navbar */
         .navbar {
-            background-color: #2c2c3e;
-            border-bottom: 2px solid #444;
+            background-color: rgba(30, 41, 59, 0.8) !important;
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            padding: 1rem 0;
         }
 
         .navbar-brand {
-            font-weight: bold;
-            color: #f5f5f5 !important;
+            font-weight: 700;
+            color: var(--text-main) !important;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 1.4rem;
+        }
+
+        .navbar-brand i {
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         .navbar-nav .nav-link {
-            color: #cfcfcf !important;
+            color: var(--text-muted) !important;
+            font-weight: 500;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            transition: all 0.2s ease;
         }
 
         .navbar-nav .nav-link:hover {
-            color: #ffffff !important;
+            color: var(--text-main) !important;
+            background-color: rgba(255, 255, 255, 0.05);
         }
 
-        .container {
-            margin-top: 50px;
+        /* Main Container */
+        .container.main-content {
+            margin-top: 40px;
+            flex: 1;
         }
 
+        /* Cards */
         .card {
-            background-color: #2c2c3e;
-            border: none;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
+            background-color: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .card-title {
+            color: var(--text-main);
+            font-weight: 600;
         }
 
-        .card:hover {
-            transform: scale(1.05);
+        .card-header {
+            background-color: rgba(0,0,0,0.1);
+            border-bottom: 1px solid var(--border-color);
+            border-top-left-radius: 12px !important;
+            border-top-right-radius: 12px !important;
+            padding: 1.25rem;
         }
 
-        .card-title {
-            color: #ffffff;
+        /* Inputs & Forms */
+        .form-control {
+            background-color: rgba(15, 23, 42, 0.5);
+            border: 1px solid var(--border-color);
+            color: var(--text-main);
+            border-radius: 8px;
+            padding: 0.75rem 1rem;
         }
 
-        .card-body {
-            text-align: center;
+        .form-control:focus {
+            background-color: rgba(15, 23, 42, 0.8);
+            border-color: var(--accent-primary);
+            color: var(--text-main);
+            box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
+        }
+
+        .form-control::placeholder {
+            color: var(--text-muted);
         }
 
+        /* Buttons */
         .btn-primary {
-            background-color: #4c4cff;
-            border-color: #4c4cff;
+            background: var(--accent-gradient);
+            border: none;
+            font-weight: 500;
+            padding: 0.6rem 1.5rem;
+            border-radius: 8px;
+            transition: opacity 0.2s ease, transform 0.2s ease;
         }
 
         .btn-primary:hover {
-            background-color: #3838e8;
-            border-color: #3838e8;
+            background: var(--accent-gradient);
+            opacity: 0.9;
+            transform: translateY(-1px);
         }
 
+        /* Footer */
         footer {
-        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;
+            margin-top: auto;
+            padding: 2rem 0;
+            text-align: center;
+            color: var(--text-muted);
+            border-top: 1px solid var(--border-color);
+            background-color: var(--bg-card);
         }
     </style>
 </head>
 
 <body>
     <!-- Navigation Bar -->
-    <nav class="navbar navbar-expand-lg">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">Document AI</a>
+    <nav class="navbar navbar-expand-lg sticky-top">
+        <div class="container-fluid px-4">
+            <a class="navbar-brand" href="/">
+                <i class="bi bi-robot"></i> 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>
+                <i class="bi bi-list text-white fs-2"></i>
             </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>
+                        <a class="nav-link" href="/"><i class="bi bi-house-door me-1"></i> Home</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="/create-db">Create DB</a>
+                        <a class="nav-link" href="/create-db"><i class="bi bi-database-add me-1"></i> Create DB</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="/list-dbs">List DBs</a>
+                        <a class="nav-link" href="/list-dbs"><i class="bi bi-server me-1"></i> List DBs</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="/chat">Chat</a>
+                        <a class="nav-link" href="/chat"><i class="bi bi-chat-left-dots me-1"></i> Chat</a>
                     </li>
                 </ul>
             </div>
@@ -111,19 +189,20 @@
     </nav>
 
     <!-- Main Content -->
-    <div class="container">
+    <div class="container main-content mb-5">
         {% block content %}
         <!-- Page-specific content will go here -->
         {% endblock %}
     </div>
 
     <!-- Footer -->
-    <footer class="fixed-bottom">
-        <p>&copy; 2024 Document AI. All rights reserved.</p>
+    <footer>
+        <div class="container">
+            <p class="mb-0">&copy; 2024 Document AI. All rights reserved.</p>
+        </div>
     </footer>
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
-    
 </body>
-</html>
+</html>

templates/chat.html

@@ -1,230 +1,117 @@
 {% extends 'base.html' %}
 
 {% block content %}
-
-<style>
-    /* Ensure full-page setup */
-    html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        background-color: #1e1e2e;
-        color: white;
-        font-family: Arial, sans-serif;
-    }
-
-    .container {
-        display: flex;
-        height: 80vh;
-        margin-top: 40px;
-        align-items: center;
-        justify-content: center;
-        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;
-        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
-        padding: 20px;
-        width: 45%;
-        height: 100%;
-    }
-
-    .card-title {
-        font-size: 20px;
-        font-weight: bold;
-        text-align: center;
-    }
-
-    .form-group input {
-        border-radius: 6px;
-        padding: 10px;
-    }
-
-    .btn-primary {
-        background-color: #007bff;
-        border-color: #007bff;
-        width: 100%;
-        padding: 10px;
-        border-radius: 6px;
-    }
-
-    .btn-primary:hover {
-        background-color: #0056b3;
-        border-color: #0056b3;
-    }
-
-    /* Loader */
-    .loader {
-        display: none;
-        border: 4px solid rgba(255, 255, 255, 0.3);
-        border-top: 4px solid #007bff;
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        animation: spin 1s linear infinite;
-        margin: auto;
-    }
-
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-
-    /* Answer Section */
-    .answer-section{
-        overflow-y: auto;
-        max-height: 70vh;
-        padding: 10px;
-        border-radius: 6px;
-        background: #2c2c3e;
-    }
-
-    .answer-section h6 {
-        color: #ffffff;
-        font-weight: bold;
-        text-align: center;
-    }
-
-    .answer-item {
-        background: #1a1a2e;
-        padding: 10px;
-        border-radius: 6px;
-        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;
-        max-height: 70vh;
-        padding: 10px;
-        border-radius: 6px;
-        background: #2c2c3e;
-    }
-
-    .history-item {
-        background: #1a1a2e;
-        padding: 10px;
-        border-radius: 6px;
-        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: #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">
-    <!-- Left Pane -->
-    <div class="card">
-        <h5 class="card-title">Document AI</h5>
-        <p>Enter a query and get an answer based on stored context.</p>
-        
-        <form method="POST" action="{{ url_for('chat') }}" onsubmit="showLoader()">
-            <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 class="row h-100 g-4">
+    
+    <!-- Left Pane: Active Chat Interaction -->
+    <div class="col-lg-5">
+        <div class="card h-100 shadow">
+            <div class="card-header bg-transparent border-0 pt-4 pb-2">
+                <h4 class="card-title d-flex align-items-center gap-2">
+                    <i class="bi bi-robot text-primary"></i> Ask Document AI
+                </h4>
+                <p class="text-muted small mb-0">Query your selected vector database.</p>
             </div>
-        </form>
+            
+            <div class="card-body d-flex flex-column p-4">
+                
+                <!-- Input Form -->
+                <form method="POST" action="{{ url_for('chat') }}" class="mb-4">
+                    <div class="form-group mb-3">
+                        <textarea name="query_text" rows="3" class="form-control" 
+                            placeholder="Type your question here..." required>{{ query_text }}</textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2">
+                        <i class="bi bi-send"></i> Submit Query
+                    </button>
+                </form>
+
+                <!-- Current Answer Display -->
+                {% if answer %}
+                <div class="current-answer-wrapper flex-grow-1">
+                    <div class="d-flex align-items-center gap-2 mb-2 text-primary">
+                        <i class="bi bi-stars"></i> <h6 class="mb-0 fw-bold">AI Response</h6>
+                    </div>
+                    <div class="answer-box p-4 rounded bg-dark border border-primary">
+                        {{ answer }}
+                    </div>
+                </div>
+                {% endif %}
 
-        <div class="loader" id="loader"></div>
-        
-        {% if answer %}
-        <div class="answer-section">
-            <div class="answer-item">
-            <h6><strong>Answer:</strong></h6>
-            <hr>
-            {{ answer }}
             </div>
-            <div class="token-count">Tokens Used: {{ token_count }}</div>
         </div>
-        {% endif %}
     </div>
 
-    <!-- Right Pane -->
-    <div class="card">
-        <h5 class="card-title">Previous Queries</h5>
-        <div class="history-section">
-            {% for question, answer in history %}
-            <div class="history-item">
-                <div><strong>Query:</strong> {{ question }}</div>
-                <hr>
-                <div><strong>Answer:</strong> {{ answer }}</div>
+    <!-- Right Pane: Chat History -->
+    <div class="col-lg-7">
+        <div class="card h-100 shadow d-flex flex-column">
+            <div class="card-header bg-transparent border-bottom pt-4 pb-3">
+                <h5 class="card-title mb-0 d-flex align-items-center gap-2">
+                    <i class="bi bi-clock-history text-muted"></i> Conversation History
+                </h5>
+            </div>
+            
+            <div class="card-body p-4 history-scroll-area flex-grow-1" style="max-height: 70vh; overflow-y: auto;">
+                {% if history %}
+                    <div class="d-flex flex-column gap-4">
+                        {% for question, ans in history %}
+                        <div class="history-pair">
+                            <!-- User Question Bubble -->
+                            <div class="d-flex justify-content-end mb-2">
+                                <div class="query-bubble p-3 rounded-4 bg-primary text-white" style="max-width: 85%; border-bottom-right-radius: 4px !important;">
+                                    <strong><i class="bi bi-person me-1"></i> You:</strong><br>
+                                    {{ question }}
+                                </div>
+                            </div>
+                            <!-- AI Answer Bubble -->
+                            <div class="d-flex justify-content-start">
+                                <div class="answer-bubble p-3 rounded-4 bg-dark text-light border border-secondary" style="max-width: 85%; border-top-left-radius: 4px !important;">
+                                    <strong><i class="bi bi-robot me-1 text-primary"></i> AI:</strong><br>
+                                    {{ ans }}
+                                </div>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                {% else %}
+                    <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted opacity-50">
+                        <i class="bi bi-chat-left text-muted mb-3" style="font-size: 3rem;"></i>
+                        <p>Your conversation history will appear here.</p>
+                    </div>
+                {% endif %}
             </div>
-            {% endfor %}
         </div>
     </div>
 </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');
+<style>
+    .answer-box {
+        background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
+        border-color: rgba(59, 130, 246, 0.3) !important;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+        line-height: 1.6;
+        font-size: 1.05rem;
+    }
+
+    .query-bubble {
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 
-    // Ensure the answer section is visible when an answer is displayed
-    window.onload = function() {
-        if (document.querySelector('.answer-section')) {
-            document.querySelector('.answer-section').classList.remove('d-none');
-        }
-    };
-</script>
+    .answer-bubble {
+        background-color: #1e293b !important;
+        border-color: #334155 !important;
+    }
 
+    /* History Scrollbar Tweaks */
+    .history-scroll-area::-webkit-scrollbar {
+        width: 6px;
+    }
+    .history-scroll-area::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .history-scroll-area::-webkit-scrollbar-thumb {
+        background: var(--border-color);
+        border-radius: 10px;
+    }
+</style>
 {% endblock %}

templates/create_db.html

@@ -1,244 +1,58 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<style>
-    html, body {
-        height: 50%;
-        margin: 0;
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: 80vh; /* 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;
-    }
-
-    .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;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .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;
-    }
-
-    .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">
-        <div class="card-header">
-            <h3>Create a New Vector Database</h3>
-        </div>
-        <div class="card-body">
-            <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" placeholder="Enter database name" required>
-                </div>
-
-                <!-- 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 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 class="row justify-content-center">
+    <div class="col-md-8 col-lg-6">
+        <div class="card shadow-lg mt-4">
+            <div class="card-header border-0 pb-0 pt-4 text-center bg-transparent">
+                <div class="mb-3">
+                    <i class="bi bi-database-add" style="font-size: 2.5rem; color: var(--accent-primary);"></i>
                 </div>
-            </form>
+                <h3 class="fw-bold">Create Vector Database</h3>
+                <p class="text-muted small">Upload your files to initialize a new AI knowledge base.</p>
+            </div>
+            
+            <div class="card-body p-4 p-md-5 pt-3">
+                <form method="post" enctype="multipart/form-data">
+                    
+                    <!-- Database Name Input -->
+                    <div class="form-group mb-4">
+                        <label for="db_name" class="form-label fw-semibold text-light mb-2">
+                            Database Name
+                        </label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-transparent border-end-0 border-secondary text-muted">
+                                <i class="bi bi-hdd-network"></i>
+                            </span>
+                            <input type="text" id="db_name" name="db_name" class="form-control border-start-0 ps-0" 
+                                placeholder="e.g., HR_Policies_2024" required>
+                        </div>
+                    </div>
+                
+                    <!-- Folder Upload Input -->
+                    <div class="form-group mb-4">
+                        <label for="folder" class="form-label fw-semibold text-light mb-2">
+                            Select Folder to Upload
+                        </label>
+                        <div class="upload-area p-4 text-center rounded border border-secondary border-dashed" style="border-style: dashed !important; background: rgba(0,0,0,0.2);">
+                            <i class="bi bi-folder2-open display-6 text-muted mb-2"></i>
+                            <input type="file" id="folder" name="folder" class="form-control mb-2" 
+                                webkitdirectory directory multiple required style="background: transparent; color: inherit;">
+                            <small class="text-muted d-block mt-2">
+                                <i class="bi bi-info-circle me-1"></i> Folder upload requires Chrome or Edge.
+                            </small>
+                        </div>
+                    </div>
+                
+                    <!-- Submit Button -->
+                    <div class="mt-5 text-center">
+                        <button type="submit" class="btn btn-primary w-100 py-2 fs-5">
+                            <i class="bi bi-cpu me-2"></i> Initialize Database
+                        </button>
+                    </div>
+                </form>
+            </div>
         </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 %}
+{% endblock %}

templates/home.html

@@ -1,24 +1,66 @@
 {% 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 class="container">
+    <!-- Hero Section -->
+    <div class="row text-center mb-5 mt-3">
+        <div class="col-12">
+            <h1 class="display-5 fw-bold mb-3">Welcome to Document AI</h1>
+            <p class="lead text-muted mx-auto" style="max-width: 600px;">
+                Empower your documents with intelligent search. Create custom vector databases and chat with your data seamlessly.
+            </p>
+        </div>
+    </div>
+
+    <!-- Action Cards -->
+    <div class="row justify-content-center g-4">
+        <!-- Create DB Card -->
+        <div class="col-md-5">
+            <div class="card h-100 text-center text-decoration-none action-card">
+                <div class="card-body p-5">
+                    <div class="icon-wrapper mb-4">
+                        <i class="bi bi-folder-plus text-primary" style="font-size: 3rem;"></i>
+                    </div>
+                    <h4 class="card-title mb-3">Create a New Database</h4>
+                    <p class="card-text text-muted mb-4">Upload your document folders and instantly create a high-performance vector database for semantic retrieval.</p>
+                    <a href="/create-db" class="btn btn-primary w-100">
+                        Get Started <i class="bi bi-arrow-right ms-2"></i>
+                    </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>
+
+        <!-- Chat Card -->
+        <div class="col-md-5">
+            <div class="card h-100 text-center text-decoration-none action-card">
+                <div class="card-body p-5">
+                    <div class="icon-wrapper mb-4">
+                        <i class="bi bi-chat-square-text text-info" style="font-size: 3rem;"></i>
+                    </div>
+                    <h4 class="card-title mb-3">Chat with AI</h4>
+                    <p class="card-text text-muted mb-4">Select an existing database and ask context-aware questions to get intelligent, accurate answers immediately.</p>
+                    <a href="/list-dbs" class="btn btn-primary w-100">
+                        Start Chatting <i class="bi bi-arrow-right ms-2"></i>
+                    </a>
                 </div>
             </div>
         </div>
     </div>
-{% endblock %}
+</div>
+
+<style>
+    .action-card {
+        border: 2px solid transparent;
+    }
+    .action-card:hover {
+        transform: translateY(-5px);
+        border-color: rgba(59, 130, 246, 0.5);
+        background: linear-gradient(180deg, var(--bg-card) 0%, rgba(30, 41, 59, 0.9) 100%);
+    }
+    .icon-wrapper i {
+        background: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+</style>
+{% endblock %}

templates/list_dbs.html

@@ -1,173 +1,67 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<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;
-    }
+<div class="row justify-content-center">
+    <div class="col-md-8">
+        <div class="card shadow-lg mt-4">
+            <div class="card-header text-center bg-transparent border-0 pt-4 pb-2">
+                <i class="bi bi-server text-primary mb-2" style="font-size: 2.5rem;"></i>
+                <h3 class="fw-bold mt-2">Available Databases</h3>
+                <p class="text-muted mb-0">Select a vector database below to start a chat session.</p>
+            </div>
+
+            <div class="card-body p-4">
+                {% if vector_dbs %}
+                    <div class="list-group custom-list-group">
+                        {% for db in vector_dbs %}
+                        <div class="list-group-item d-flex justify-content-between align-items-center rounded mb-3 py-3 px-4 border">
+                            <div class="d-flex align-items-center">
+                                <div class="bg-dark rounded-circle p-2 me-3 text-primary d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
+                                    <i class="bi bi-database"></i>
+                                </div>
+                                <span class="fs-5 fw-medium text-light">{{ db }}</span>
+                            </div>
+                            
+                            <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
+                                <button type="submit" class="btn btn-outline-primary rounded-pill px-4">
+                                    Select <i class="bi bi-arrow-right-short"></i>
+                                </button>
+                            </form>
+                        </div>
+                        {% endfor %}
+                    </div>
+                {% else %}
+                    <div class="text-center py-5">
+                        <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
+                        <h5 class="mt-3 text-muted">No Databases Found</h5>
+                        <p class="text-muted">You haven't created any vector databases yet.</p>
+                        <a href="/create-db" class="btn btn-primary mt-2">Create One Now</a>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
 
-    .alert {
-        padding: 10px;
-        margin-bottom: 10px;
-        border-radius: 5px;
-        text-align: center;
-        position: absolute;
-        position-area: top center;
-        top: 30px;
-        align-items: center;
+<style>
+    .custom-list-group .list-group-item {
+        background-color: rgba(15, 23, 42, 0.4);
+        border-color: var(--border-color);
+        transition: all 0.2s ease;
     }
-
-    .alert-error {
-        background-color: #D84040;
-        color: #ffffff;
+    .custom-list-group .list-group-item:hover {
+        background-color: rgba(15, 23, 42, 0.8);
+        border-color: var(--accent-primary);
+        transform: scale(1.01);
     }
-
-    .alert-success {
-        background-color: #D2DE32;
-        color: #ffffff;
+    .btn-outline-primary {
+        color: var(--accent-primary);
+        border-color: var(--accent-primary);
     }
-
-    .alert-warning {
-        background-color: #FFC700;
-        color: #ffffff;
+    .btn-outline-primary:hover {
+        background: var(--accent-gradient);
+        border-color: transparent;
+        color: #fff;
     }
-    
 </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="card shadow">
-        <div class="card-header">
-            <h3><strong>Available Vector Databases</strong></h3>
-        </div>
-        <div class="card-body">
-            <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('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>
-                    </div>
-                </li>
-                {% endfor %}
-            </ul>
-        </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 %}
+{% endblock %}