Spaces:
Runtime error
Runtime error
Create templates/chat.html
Browse files- templates/chat.html +65 -0
templates/chat.html
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>SQL Assistant</title>
|
| 7 |
+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
| 8 |
+
</head>
|
| 9 |
+
<body class="bg-gray-100 min-h-screen">
|
| 10 |
+
<div class="max-w-3xl mx-auto p-4">
|
| 11 |
+
<h1 class="text-3xl font-bold mb-6 text-center">🧠 SQL Assistant (LangChain + Ollama)</h1>
|
| 12 |
+
|
| 13 |
+
{% if ddl_mode %}
|
| 14 |
+
<form action="/setup" method="post" class="bg-white p-6 rounded shadow-md">
|
| 15 |
+
<label class="block text-gray-700 mb-2 font-semibold">DDL Statements:</label>
|
| 16 |
+
<textarea name="ddl" rows="6" class="w-full p-2 border rounded mb-4" required></textarea>
|
| 17 |
+
|
| 18 |
+
<label class="block text-gray-700 mb-2 font-semibold">SQLite DB Path:</label>
|
| 19 |
+
<input type="text" name="db_path" class="w-full p-2 border rounded mb-4" required>
|
| 20 |
+
|
| 21 |
+
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Start Chat</button>
|
| 22 |
+
</form>
|
| 23 |
+
{% else %}
|
| 24 |
+
<div class="bg-white p-6 rounded shadow-md space-y-4">
|
| 25 |
+
<div class="h-96 overflow-y-auto space-y-4 border p-4 rounded bg-gray-50">
|
| 26 |
+
{% for chat in chat_history %}
|
| 27 |
+
<div class="text-right">
|
| 28 |
+
<div class="inline-block bg-blue-100 text-blue-900 p-3 rounded-lg max-w-xl">
|
| 29 |
+
<strong>You:</strong> {{ chat.question }}
|
| 30 |
+
</div>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="text-left">
|
| 33 |
+
<div class="inline-block bg-green-100 text-green-900 p-3 rounded-lg max-w-xl">
|
| 34 |
+
<strong>SQL:</strong>
|
| 35 |
+
<pre class="text-sm whitespace-pre-wrap">{{ chat.sql }}</pre>
|
| 36 |
+
{% if chat.error %}
|
| 37 |
+
<p class="text-red-600">Error: {{ chat.error }}</p>
|
| 38 |
+
{% elif chat.result %}
|
| 39 |
+
<strong>Result:</strong>
|
| 40 |
+
<table class="table-auto mt-2 w-full text-sm">
|
| 41 |
+
<tbody>
|
| 42 |
+
{% for row in chat.result %}
|
| 43 |
+
<tr>
|
| 44 |
+
{% for col in row %}
|
| 45 |
+
<td class="border px-2 py-1">{{ col }}</td>
|
| 46 |
+
{% endfor %}
|
| 47 |
+
</tr>
|
| 48 |
+
{% endfor %}
|
| 49 |
+
</tbody>
|
| 50 |
+
</table>
|
| 51 |
+
{% endif %}
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
{% endfor %}
|
| 55 |
+
</div>
|
| 56 |
+
|
| 57 |
+
<form action="/ask" method="post" class="flex space-x-2">
|
| 58 |
+
<input type="text" name="user_question" class="flex-grow p-2 border rounded" placeholder="Ask a question..." required>
|
| 59 |
+
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Ask</button>
|
| 60 |
+
</form>
|
| 61 |
+
</div>
|
| 62 |
+
{% endif %}
|
| 63 |
+
</div>
|
| 64 |
+
</body>
|
| 65 |
+
</html>
|