Spaces:
Runtime error
Runtime error
| <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; } | |
| .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; | |
| } | |
| </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"> | |
| <h3>Database Summary</h3> | |
| <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"> | |
| <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 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'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |