Spaces:

Al1Abdullah
/

MiSQL

Runtime error

App Files Files Community

Al1Abdullah commited on Jul 16, 2025

Commit

d529a20

verified ·

1 Parent(s): c384400

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +190 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,190 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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; }
+        .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; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="text-center mb-4">AI SQL Assistant</h1>
+        <form method="post" enctype="multipart/form-data" class="mb-4">
+            <div class="mb-3">
+                <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>
+        {% if summary %}
+        <div class="schema-box">
+            <h3>Database Summary</h3>
+            <div class="schema-summary">
+                <h4>Overview</h4>
+                <p>{{ summary.description }}</p>
+                <h4>Main Tables and Columns</h4>
+                <ul>
+                    {% for table, columns in summary.main_tables.items() %}
+                    <li><strong>{{ table }}</strong>: {{ columns | join(', ') }}</li>
+                    {% endfor %}
+                </ul>
+                <h4>Key Relationships</h4>
+                <ul>
+                    {% for relation in summary.relationships %}
+                    <li>{{ relation }}</li>
+                    {% endfor %}
+                </ul>
+                <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>
+                <ul>
+                    {% for rec in summary.suggestions.recommendations %}
+                    <li>{{ rec }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </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>
+        {% 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>
+        </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() %}
+                        <th>{{ key }}</th>
+                        {% endfor %}
+                    </tr>
+                </thead>
+                <tbody>
+                    {% 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>
+                        {% endfor %}
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </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>
+        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';
+            }
+        }
+    </script>
+</body>
+</html>