NaturalSQL/GUI/templates/index.html at e04dfa06609913eadd8a1df55ea3f84dafed9b28 · ddang9390/NaturalSQL · GitHub

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
<head>
    <title>Natural SQL</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>

<body>
    <div class="container input-section">
        <h1>Natural SQL</h1>

        <form method="POST" action="/query">
            <label for="user_input">Enter your query in plain English:</label>
            <input type="text" placeholder="Ex. Show me the year of the movie where the name is &quot;Shrek&quot;"
                value="{{user_input}}" id="user_input" name="user_input" required>
            <button class="btn btn-primary">Submit</button>
        </form>

        <div class="help-text">
            <strong>💡 Tip:</strong> Use quotes for search values with multiple words<br>
            <span class="example">Example: where name is "The Dark Knight"</span>
        </div>

        <div class="example-queries">
            <h3>Try these examples:</h3>
            <ul>
                <li onclick="fillExample('show me all movies')">• Show me all movies</li>
                <li onclick="fillExample('list the names and directors of the movies')">• List the names and directors
                    of the movies
                </li>
                <li onclick="fillExample('show me movies where genre is Action')">• Show me movies where genre is
                    Action</li>
                <li onclick="fillExample('give me the year and name of movies')">• Give me the year and name of
                    movies</li>
            </ul>
        </div>
    </div>

    <div id="loading"></div>

    <div class="container">
        <div class="output-section">
            <div class="sql-query-display">
                <h3>Generated SQL Query</h3>
                <div class="sql-query-box">
                    {{query}}
                </div>
            </div>

            <div class="sql-results-display">
                {{sql_results | safe}}
            </div>
        </div>
    </div>

    <script>
        function fillExample(query) {
            document.getElementById('user_input').value = query;
        }
    </script>
</body>