Update templates/index.html

templates/index.html

@@ -4,248 +4,211 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI SQL Assistant</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body { background-color: #f8f9fa; }
-        .container { max-width: 900px; margin-top: 20px; }
-        .schema-box, .query-box { 
-            background-color: #fff; 
-            padding: 20px; 
-            border-radius: 8px; 
-            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
-            margin-bottom: 20px; 
-        }
-        .query-box { display: block; }
-        .query-content { display: none; }
-        .toggle-button { 
-            background-color: #007bff; 
-            color: white; 
-            border: none; 
-            padding: 8px 15px; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-weight: 500; 
-            font-size: 0.9rem; 
-            width: auto; 
-            display: inline-block; 
-        }
-        .toggle-button:hover { 
-            background-color: #0056b3; 
-        }
-        .result-table { margin-top: 20px; }
-        .error { color: #dc3545; font-weight: 500; }
-        .success { color: #28a745; font-weight: 500; }
-        .note { font-style: italic; color: #6c757d; }
-        .highlight { 
-            background-color: #28a745; 
-            color: white; 
-            padding: 2px 8px; 
-            border-radius: 4px; 
-            font-weight: 600; 
-        }
-        .highlight-warning { 
-            background-color: #fd7e14; 
-        }
-        .schema-summary h4 { margin-bottom: 10px; }
-        .schema-summary ul { margin-bottom: 15px; }
-        .schema-summary li { margin-bottom: 5px; }
-        .table { 
-            border-radius: 8px; 
-            overflow: hidden; 
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
-        }
-        .table thead th { 
-            background-color: #007bff; 
-            color: white; 
-            font-weight: 600; 
-            text-transform: capitalize; 
-            padding: 12px; 
-        }
-        .table tbody tr:nth-child(even) { 
-            background-color: #f8f9fa; 
-        }
-        .table tbody tr:hover { 
-            background-color: #e9ecef; 
-            transition: background-color 0.2s; 
-        }
-        .table td { 
-            padding: 12px; 
-            vertical-align: middle; 
-        }
-        .btn-primary { 
-            background-color: #007bff; 
-            border-color: #007bff; 
-            padding: 10px 20px; 
-        }
-        .btn-primary:hover { 
-            background-color: #0056b3; 
-            border-color: #0056b3; 
-        }
-        .form-control { 
-            border-radius: 5px; 
-        }
-        .unpaid { color: #dc3545; font-weight: bold; }
-        .modal-content { 
-            border-radius: 8px; 
-            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
-        }
-        .modal-header { 
-            background-color: #007bff; 
-            color: white; 
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f4f4f9;
+        }
+        h1 {
+            color: #333;
+        }
+        .container {
+            max-width: 800px;
+            margin: auto;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .error {
+            color: red;
+            margin: 10px 0;
+        }
+        .success {
+            color: green;
+            margin: 10px 0;
+        }
+        .schema-summary {
+            margin: 20px 0;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .schema-summary h3 {
+            margin-top: 0;
+        }
+        .schema-summary ul {
+            list-style-type: disc;
+            margin-left: 20px;
+        }
+        .results-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+        }
+        .results-table th, .results-table td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        .results-table th {
+            background-color: #f2f2f2;
+        }
+        .query-box {
+            margin: 20px 0;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        textarea, input[type="text"], input[type="file"] {
+            width: 100%;
+            padding: 8px;
+            margin: 5px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            width: 400px;
+        }
+        .modal-content h2 {
+            margin-top: 0;
+        }
+        .modal-content label {
+            display: block;
+            margin: 10px 0 5px;
+        }
+        .modal-content input {
+            width: calc(100% - 16px);
+        }
+        .close {
+            float: right;
+            font-size: 24px;
+            cursor: pointer;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1 class="text-center mb-4">AI SQL Assistant</h1>
-        
-        <div class="mb-4">
-            <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#dbConfigModal">Configure MySQL Connection</button>
-            <form method="post" enctype="multipart/form-data" style="display: inline;">
-                <div class="mb-3 d-inline-block">
-                    <label for="sql_file" class="form-label">Upload MySQL .sql File</label>
-                    <input type="file" class="form-control" id="sql_file" name="sql_file" accept=".sql">
-                </div>
-                <button type="submit" class="btn btn-primary">Upload</button>
-            </form>
-        </div>
-
-        <!-- Modal for MySQL Connection -->
-        <div class="modal fade" id="dbConfigModal" tabindex="-1" aria-labelledby="dbConfigModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="dbConfigModalLabel">Configure MySQL Connection</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <form method="post" action="/configure_db">
-                            <div class="mb-3">
-                                <label for="host" class="form-label">Host</label>
-                                <input type="text" class="form-control" id="host" name="host" placeholder="e.g., localhost" required>
-                            </div>
-                            <div class="mb-3">
-                                <label for="user" class="form-label">User</label>
-                                <input type="text" class="form-control" id="user" name="user" placeholder="e.g., root" required>
-                            </div>
-                            <div class="mb-3">
-                                <label for="password" class="form-label">Password</label>
-                                <input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
-                            </div>
-                            <div class="mb-3">
-                                <label for="port" class="form-label">Port</label>
-                                <input type="number" class="form-control" id="port" name="port" placeholder="3306" value="3306">
-                            </div>
-                            <button type="submit" class="btn btn-primary">Save Connection</button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-
+        <h1>AI SQL Assistant</h1>
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
         {% if success %}
-        <p class="success mt-3">{{ success }}</p>
+            <p class="success">{{ success }}</p>
         {% endif %}
-
-        {% if summary %}
-        <div class="schema-box">
-            <h3>Database Summary</h3>
+        <form method="post" enctype="multipart/form-data">
+            <label for="sql_file">Upload MySQL .sql File</label>
+            <input type="file" id="sql_file" name="sql_file" accept=".sql">
+            <button type="submit">Upload</button>
+        </form>
+        <button onclick="openModal()">Configure MySQL Connection</button>
+        <form method="post" action="/reset_db">
+            <button type="submit">Reset to Default Connection</button>
+        </form>
+        <div id="dbModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal()">&times;</span>
+                <h2>Configure MySQL Connection</h2>
+                <form method="post" action="/configure_db">
+                    <label for="host">Host</label>
+                    <input type="text" id="host" name="host" placeholder="e.g., gateway01.ap-southeast-1.prod.aws.tidbcloud.com">
+                    <label for="user">User</label>
+                    <input type="text" id="user" name="user" placeholder="e.g., 31QbJgnPtKiyvcC.root">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" name="password">
+                    <label for="port">Port</label>
+                    <input type="text" id="port" name="port" value="4000">
+                    <button type="submit">Save</button>
+                </form>
+            </div>
+        </div>
+        {% if schema %}
             <div class="schema-summary">
-                <h4>Overview</h4>
-                <p>{{ summary.description }}</p>
-                {% if summary.main_tables %}
-                <h4>Main Tables and Columns</h4>
+                <h3>Schema Summary</h3>
+                <p><strong>Description:</strong> {{ summary.description }}</p>
+                <h4>Main Tables:</h4>
                 <ul>
                     {% for table, columns in summary.main_tables.items() %}
-                    <li><strong>{{ table }}</strong>: {{ columns | join(', ') }}</li>
+                        <li>{{ table }}: {{ columns | join(', ') }}</li>
                     {% endfor %}
                 </ul>
-                {% endif %}
-                {% if summary.relationships %}
-                <h4>Key Relationships</h4>
+                <h4>Relationships:</h4>
                 <ul>
-                    {% for relation in summary.relationships %}
-                    <li>{{ relation }}</li>
+                    {% for rel in summary.relationships %}
+                        <li>{{ rel }}</li>
                     {% endfor %}
                 </ul>
-                {% endif %}
-                <h4>Suggestions</h4>
-                <p><span class="highlight {% if summary.suggestions.evaluation != 'Excellent' %}highlight-warning{% endif %}">{{ summary.suggestions.evaluation }}</span></p>
-                <p>{{ summary.suggestions.note }}</p>
-                {% if summary.suggestions.recommendations %}
+                <h4>Suggestions:</h4>
+                <p><strong>Evaluation:</strong> {{ summary.suggestions.evaluation }}</p>
+                <p><strong>Note:</strong> {{ summary.suggestions.note }}</p>
                 <ul>
                     {% for rec in summary.suggestions.recommendations %}
-                    <li>{{ rec }}</li>
+                        <li>{{ rec }}</li>
                     {% endfor %}
                 </ul>
-                {% endif %}
             </div>
-        </div>
-        {% elif schema %}
-        <div class="schema-box">
-            <h3>Database Summary</h3>
-            <p class="note">Schema loaded, but no summary available. Tables: {{ schema.keys() | join(', ') }}.</p>
-        </div>
         {% endif %}
-
-        <form method="post" class="mt-4">
-            <div class="mb-3">
-                <label for="question" class="form-label">Ask a Question</label>
-                <input type="text" class="form-control" id="question" name="question" placeholder="e.g., Show all patients admitted in July 2025">
-            </div>
-            <button type="submit" class="btn btn-primary">Submit</button>
+        <form method="post">
+            <label for="question">Ask a Question</label>
+            <textarea id="question" name="question" placeholder="e.g., Show all patients admitted in July 2025"></textarea>
+            <button type="submit">Submit</button>
         </form>
-
-        {% if error %}
-        <p class="error mt-3">{{ error }}</p>
-        {% endif %}
-
         {% if query %}
-        <div class="query-box">
-            <button class="toggle-button" onclick="toggleSection('query-content')">View SQL Query</button>
-            <div id="query-content" class="query-content">
-                <pre class="bg-light p-3 rounded">{{ query }}</pre>
+            <div class="query-box">
+                <h3>Generated SQL Query</h3>
+                <pre>{{ query }}</pre>
             </div>
-        </div>
         {% endif %}
-
-      
         {% if results %}
-        <div class="result-table">
-            <h4>Query Results</h4>
-            <table class="table table-bordered">
-                <thead>
-                    <tr>
-                        {% for key in results[0].keys() %}
+            <h3>Query Results</h3>
+            <table class="results-table">
+                <tr>
+                    {% for key in results[0].keys() %}
                         <th>{{ key }}</th>
-                        {% endfor %}
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for row in results %}
+                    {% endfor %}
+                </tr>
+                {% for row in results %}
                     <tr>
-                        {% for key, value in row.items() %}
-                        <td {% if key in ['Total Bill Amount', 'Bill Amount'] %}class="unpaid"{% endif %}>{{ value }}</td>
+                        {% for value in row.values() %}
+                            <td>{{ value }}</td>
                         {% endfor %}
                     </tr>
-                    {% endfor %}
-                </tbody>
+                {% endfor %}
             </table>
-        </div>
-        {% elif query and not error %}
-        <p class="note mt-3">No results found for the query. Check the data or try a different question.</p>
         {% endif %}
     </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        function toggleSection(id) {
-            const content = document.getElementById(id);
-            if (content.style.display === 'none' || content.style.display === '') {
-                content.style.display = 'block';
-            } else {
-                content.style.display = 'none';
-            }
+        function openModal() {
+            document.getElementById('dbModal').style.display = 'flex';
+        }
+        function closeModal() {
+            document.getElementById('dbModal').style.display = 'none';
         }
     </script>
 </body>