File size: 3,321 Bytes
dde2c4d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SQL Assistant</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="max-w-3xl mx-auto p-4">
        <h1 class="text-3xl font-bold mb-6 text-center">🧠 SQL Assistant (LangChain + Ollama)</h1>

        {% if ddl_mode %}
        <form action="/setup" method="post" class="bg-white p-6 rounded shadow-md">
            <label class="block text-gray-700 mb-2 font-semibold">DDL Statements:</label>
            <textarea name="ddl" rows="6" class="w-full p-2 border rounded mb-4" required></textarea>

            <label class="block text-gray-700 mb-2 font-semibold">SQLite DB Path:</label>
            <input type="text" name="db_path" class="w-full p-2 border rounded mb-4" required>

            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Start Chat</button>
        </form>
        {% else %}
        <div class="bg-white p-6 rounded shadow-md space-y-4">
            <div class="h-96 overflow-y-auto space-y-4 border p-4 rounded bg-gray-50">
                {% for chat in chat_history %}
                    <div class="text-right">
                        <div class="inline-block bg-blue-100 text-blue-900 p-3 rounded-lg max-w-xl">
                            <strong>You:</strong> {{ chat.question }}
                        </div>
                    </div>
                    <div class="text-left">
                        <div class="inline-block bg-green-100 text-green-900 p-3 rounded-lg max-w-xl">
                            <strong>SQL:</strong>
                            <pre class="text-sm whitespace-pre-wrap">{{ chat.sql }}</pre>
                            {% if chat.error %}
                                <p class="text-red-600">Error: {{ chat.error }}</p>
                            {% elif chat.result %}
                                <strong>Result:</strong>
                                <table class="table-auto mt-2 w-full text-sm">
                                    <tbody>
                                        {% for row in chat.result %}
                                            <tr>
                                                {% for col in row %}
                                                    <td class="border px-2 py-1">{{ col }}</td>
                                                {% endfor %}
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <form action="/ask" method="post" class="flex space-x-2">
                <input type="text" name="user_question" class="flex-grow p-2 border rounded" placeholder="Ask a question..." required>
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Ask</button>
            </form>
        </div>
        {% endif %}
    </div>
</body>
</html>