File size: 4,661 Bytes
68eb98f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72d281f
68eb98f
 
 
 
 
 
 
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
    <title>Text-to-SQL Explanations in TableQA</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background: url('/api/placeholder/1920/1080') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        .container {
            text-align: center;
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 1000px;
        }
        h1, h2 {
            color: #333;
        }
        p, li {
            font-size: 16px;
            color: #333;
            text-align: left;
        }
        .step {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
            padding: 15px;
        }
        .step-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .highlighted-cell {
            background-color: #ffffcc;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s ease;
            margin-top: 20px;
        }
        button:hover {
            background-color: #45a049;
        }
        iframe {
            width: 100%;
            height: 600px;
            border: none;
            margin-top: 20px;
        }
        .sql-command {
            background-color: #f0f0f0;
            padding: 10px;
            border-left: 4px solid #4CAF50;
            font-family: monospace;
            white-space: pre-wrap;
            text-align: left;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Understanding Text-to-SQL Explanations</h1>
        <p>
            Text-to-SQL is a TableQA method that translates the natural language question into an SQL query. The SQL query itself serves as the explanation for how the system arrives at its answer.
        </p>
        <h2>Example: 1947 Kentucky Wildcats Football Team</h2>
        <p>
            Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games."
        </p>
        <div class="step">
            <div class="step-title">SQL Command Generation</div>
            <p>The system generates an SQL command to verify the statement:</p>
            <div class="sql-command">
SELECT CASE
    WHEN COUNT(*) = 4 THEN 'TRUE'
    ELSE 'FALSE'
END AS result
FROM table_sql
WHERE opponents = 0;
            </div>
            <p>This SQL command does the following:</p>
            <ol>
                <li>It counts the number of rows where the 'opponents' column is 0 (scoreless games).</li>
                <li>If the count is exactly 4, it returns 'TRUE', otherwise 'FALSE'.</li>
            </ol>
        </div>
<!--        <div class="step">-->
<!--            <div class="step-title">Explanation</div>-->
<!--            <p>The SQL command serves as an explanation by showing:</p>-->
<!--            <ul>-->
<!--                <li>What data is being queried (the '1947_kentucky_wildcats_football_team' table)</li>-->
<!--                <li>What condition is being checked (opponents = 0)</li>-->
<!--                <li>How many instances should satisfy the condition (COUNT(*) = 4)</li>-->
<!--                <li>What the final output means (TRUE if the condition is met, FALSE otherwise)</li>-->
<!--            </ul>-->
<!--        </div>-->
        <h2>Text-to-SQL Example</h2>
        <iframe src="{{ url_for('send_examples', filename='htmls_Text2SQL/TP/test-0.html') }}"></iframe>
        <p>
            In this example, you can see how the SQL command directly addresses the statement by counting the number of games where the opposing team didn't score.
        </p>
        <button onclick="location.href='{{ url_for('experiment', session_id=session_id) }}'">Proceed to Experiment</button>
    </div>
</body>
</html>