Spaces:
Runtime error
Runtime error
Create templates/index.html
Browse files- templates/index.html +112 -0
templates/index.html
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<title>AI SQL Assistant</title>
|
| 5 |
+
<style>
|
| 6 |
+
body { font-family: Arial, sans-serif; margin: 20px; }
|
| 7 |
+
.container { max-width: 800px; margin: auto; }
|
| 8 |
+
.section { margin-bottom: 20px; }
|
| 9 |
+
label { display: block; margin-bottom: 5px; }
|
| 10 |
+
input[type="text"], input[type="password"], input[type="number"] { width: 100%; max-width: 300px; padding: 5px; margin-bottom: 10px; }
|
| 11 |
+
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
|
| 12 |
+
button:hover { background-color: #45a049; }
|
| 13 |
+
.error { color: red; }
|
| 14 |
+
.success { color: green; }
|
| 15 |
+
table { border-collapse: collapse; width: 100%; }
|
| 16 |
+
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
| 17 |
+
th { background-color: #f2f2f2; }
|
| 18 |
+
</style>
|
| 19 |
+
</head>
|
| 20 |
+
<body>
|
| 21 |
+
<div class="container">
|
| 22 |
+
<h1>AI SQL Assistant</h1>
|
| 23 |
+
{% if error %}
|
| 24 |
+
<p class="error">{{ error }}</p>
|
| 25 |
+
{% endif %}
|
| 26 |
+
{% if success %}
|
| 27 |
+
<p class="success">{{ success }}</p>
|
| 28 |
+
{% endif %}
|
| 29 |
+
<div class="section">
|
| 30 |
+
<h2>Configure MySQL Connection</h2>
|
| 31 |
+
<form method="POST" action="/configure_db">
|
| 32 |
+
<label for="host">Host:</label><input type="text" id="host" name="host" value="localhost" required>
|
| 33 |
+
<label for="user">User:</label><input type="text" id="user" name="user" value="root" required>
|
| 34 |
+
<label for="password">Password:</label><input type="password" id="password" name="password" required>
|
| 35 |
+
<label for="port">Port:</label><input type="number" id="port" name="port" value="3306" required>
|
| 36 |
+
<input type="hidden" name="debug" value="test">
|
| 37 |
+
<button type="submit">Save Connection</button>
|
| 38 |
+
</form>
|
| 39 |
+
</div>
|
| 40 |
+
<div class="section">
|
| 41 |
+
<h2>Upload SQL File</h2>
|
| 42 |
+
<form method="POST" enctype="multipart/form-data">
|
| 43 |
+
<label for="sql_file">Upload .sql file:</label>
|
| 44 |
+
<input type="file" id="sql_file" name="sql_file" accept=".sql" required>
|
| 45 |
+
<button type="submit">Upload</button>
|
| 46 |
+
</form>
|
| 47 |
+
{% if schema %}
|
| 48 |
+
<h3>Database Schema</h3>
|
| 49 |
+
<table>
|
| 50 |
+
<tr><th>Table</th><th>Columns</th></tr>
|
| 51 |
+
{% for table, columns in schema.items() %}
|
| 52 |
+
<tr><td>{{ table }}</td><td>{{ columns|join(', ') }}</td></tr>
|
| 53 |
+
{% endfor %}
|
| 54 |
+
</table>
|
| 55 |
+
{% endif %}
|
| 56 |
+
{% if summary %}
|
| 57 |
+
<h3>Schema Summary</h3>
|
| 58 |
+
<p>{{ summary.description }}</p>
|
| 59 |
+
<h4>Main Tables</h4>
|
| 60 |
+
<ul>
|
| 61 |
+
{% for table, columns in summary.main_tables.items() %}
|
| 62 |
+
<li>{{ table }}: {{ columns|join(', ') }}</li>
|
| 63 |
+
{% endfor %}
|
| 64 |
+
</ul>
|
| 65 |
+
<h4>Relationships</h4>
|
| 66 |
+
<ul>
|
| 67 |
+
{% for rel in summary.relationships %}
|
| 68 |
+
<li>{{ rel }}</li>
|
| 69 |
+
{% endfor %}
|
| 70 |
+
</ul>
|
| 71 |
+
<h4>Suggestions</h4>
|
| 72 |
+
<p>Evaluation: {{ summary.suggestions.evaluation }}</p>
|
| 73 |
+
<p>Note: {{ summary.suggestions.note }}</p>
|
| 74 |
+
<ul>
|
| 75 |
+
{% for rec in summary.suggestions.recommendations %}
|
| 76 |
+
<li>{{ rec }}</li>
|
| 77 |
+
{% endfor %}
|
| 78 |
+
</ul>
|
| 79 |
+
{% endif %}
|
| 80 |
+
</div>
|
| 81 |
+
<div class="section">
|
| 82 |
+
<h2>Ask a Question</h2>
|
| 83 |
+
<form method="POST">
|
| 84 |
+
<label for="question">Enter your question:</label><br>
|
| 85 |
+
<input type="text" id="question" name="question" style="width: 100%; max-width: 600px;" required><br>
|
| 86 |
+
<button type="submit">Submit</button>
|
| 87 |
+
</form>
|
| 88 |
+
{% if query %}
|
| 89 |
+
<h3>Generated Query</h3>
|
| 90 |
+
<p>{{ query }}</p>
|
| 91 |
+
{% endif %}
|
| 92 |
+
{% if results %}
|
| 93 |
+
<h3>Results</h3>
|
| 94 |
+
<table>
|
| 95 |
+
<tr>
|
| 96 |
+
{% for key in results[0].keys() %}
|
| 97 |
+
<th>{{ key }}</th>
|
| 98 |
+
{% endfor %}
|
| 99 |
+
</tr>
|
| 100 |
+
{% for row in results %}
|
| 101 |
+
<tr>
|
| 102 |
+
{% for value in row.values() %}
|
| 103 |
+
<td>{{ value }}</td>
|
| 104 |
+
{% endfor %}
|
| 105 |
+
</tr>
|
| 106 |
+
{% endfor %}
|
| 107 |
+
</table>
|
| 108 |
+
{% endif %}
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</body>
|
| 112 |
+
</html>
|