Spaces:

Al1Abdullah
/

MiSQL

Runtime error

App Files Files Community

Al1Abdullah commited on Jul 16, 2025

Commit

e5720ee

verified ·

1 Parent(s): 9225010

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +67 -6

templates/index.html CHANGED Viewed

@@ -34,6 +34,7 @@
         }
         .result-table { margin-top: 20px; }
         .error { color: #dc3545; font-weight: 500; }
         .note { font-style: italic; color: #6c757d; }
         .highlight {
             background-color: #28a745;
@@ -84,19 +85,67 @@
             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">
@@ -104,28 +153,39 @@
             <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">
@@ -176,6 +236,7 @@
         {% endif %}
     </div>
     <script>
         function toggleSection(id) {
             const content = document.getElementById(id);

         }
         .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;
             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;
+        }
     </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>
+        {% if success %}
+        <p class="success mt-3">{{ success }}</p>
+        {% endif %}
         {% if summary %}
         <div class="schema-box">
             <div class="schema-summary">
                 <h4>Overview</h4>
                 <p>{{ summary.description }}</p>
+                {% if summary.main_tables %}
                 <h4>Main Tables and Columns</h4>
                 <ul>
                     {% for table, columns in summary.main_tables.items() %}
                     <li><strong>{{ table }}</strong>: {{ columns | join(', ') }}</li>
                     {% endfor %}
                 </ul>
+                {% endif %}
+                {% if summary.relationships %}
                 <h4>Key Relationships</h4>
                 <ul>
                     {% for relation in summary.relationships %}
                     <li>{{ relation }}</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 %}
                 <ul>
                     {% for rec in summary.suggestions.recommendations %}
                     <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">
         {% 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);