Hugging Face's logo

Spaces:
luulinh90s
/
Tabular-LLM-Study-Forward-Simulation
Sleeping

App Files Community
luulinh90s commited on
Commit
cf6133b
·
1 Parent(s): de7b716

update

Browse files
Files changed (3) hide show
  1. app.py +11 -1
  2. templates/attribution.html +170 -0
  3. templates/introduction.html +213 -0
app.py CHANGED
@@ -136,7 +136,17 @@ def select_balanced_samples(samples):
136
  logger.exception("Error selecting balanced samples")
137
  return []
138
 
139
- @app.route('/', methods=['GET', 'POST'])
 
 
 
 
 
 
 
 
 
 
140
  def index():
141
  if request.method == 'POST':
142
  username = request.form.get('username')
 
136
  logger.exception("Error selecting balanced samples")
137
  return []
138
 
139
+
140
+ @app.route('/')
141
+ def introduction():
142
+ return render_template('introduction.html')
143
+
144
+ @app.route('/attribution')
145
+ def attribution():
146
+ return render_template('attribution.html')
147
+
148
+
149
+ @app.route('/index', methods=['GET', 'POST'])
150
  def index():
151
  if request.method == 'POST':
152
  username = request.form.get('username')
templates/attribution.html ADDED
@@ -0,0 +1,170 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Attribution Explanations in TableQA</title>
5
+ <style>
6
+ body {
7
+ font-family: 'Roboto', sans-serif;
8
+ background: url('/static/images/background.jpg') no-repeat center center fixed;
9
+ background-size: cover;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ min-height: 100vh;
14
+ margin: 0;
15
+ padding: 20px;
16
+ }
17
+ .container {
18
+ text-align: center;
19
+ background-color: #ffffff;
20
+ padding: 40px;
21
+ border-radius: 10px;
22
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23
+ width: 80%;
24
+ max-width: 1000px;
25
+ }
26
+ h1 {
27
+ color: #000000;
28
+ font-size: 36px;
29
+ margin-bottom: 20px;
30
+ }
31
+ h2 {
32
+ color: #333;
33
+ font-size: 24px;
34
+ margin-top: 30px;
35
+ margin-bottom: 15px;
36
+ }
37
+ p {
38
+ font-size: 18px;
39
+ color: #333;
40
+ margin-bottom: 20px;
41
+ text-align: left;
42
+ }
43
+ table {
44
+ width: 100%;
45
+ border-collapse: collapse;
46
+ margin-bottom: 20px;
47
+ }
48
+ th, td {
49
+ border: 1px solid #ddd;
50
+ padding: 8px;
51
+ text-align: left;
52
+ }
53
+ th {
54
+ background-color: #f2f2f2;
55
+ }
56
+ .highlight {
57
+ background-color: #ffffcc;
58
+ }
59
+ .green-highlight {
60
+ background-color: #90EE90;
61
+ }
62
+ button {
63
+ background-color: #4CAF50;
64
+ color: white;
65
+ padding: 15px 30px;
66
+ border: none;
67
+ border-radius: 5px;
68
+ cursor: pointer;
69
+ font-size: 24px;
70
+ transition: background-color 0.3s ease;
71
+ margin-top: 20px;
72
+ }
73
+ button:hover {
74
+ background-color: #45a049;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body>
79
+ <div class="container">
80
+ <h1>Understanding Attribution Explanations</h1>
81
+ <p>
82
+ Attribution explanations highlight specific parts of a table—such as rows, columns, or cells—that are most relevant to the answer provided by a TableQA system. These explanations help you understand which data points the system considered important when generating the answer.
83
+ </p>
84
+ <h2>Example: 1947 Kentucky Wildcats Football Team</h2>
85
+ <p>
86
+ Statement to verify: "The Wildcats kept the opposing team scoreless in four games."
87
+ </p>
88
+ <table>
89
+ <tr>
90
+ <th>Game</th>
91
+ <th>Date</th>
92
+ <th>Opponent</th>
93
+ <th>Result</th>
94
+ <th>Wildcats Points</th>
95
+ <th>Opponents</th>
96
+ <th>Record</th>
97
+ </tr>
98
+ <tr>
99
+ <td>1</td>
100
+ <td>9999-09-20</td>
101
+ <td>Ole Miss</td>
102
+ <td>Loss</td>
103
+ <td>7</td>
104
+ <td>14</td>
105
+ <td>0 - 1</td>
106
+ </tr>
107
+ <tr class="highlight">
108
+ <td>2</td>
109
+ <td>9999-09-27</td>
110
+ <td>Cincinnati</td>
111
+ <td>Win</td>
112
+ <td>20</td>
113
+ <td class="green-highlight">0</td>
114
+ <td>1 - 1</td>
115
+ </tr>
116
+ <tr class="highlight">
117
+ <td>4</td>
118
+ <td>9999-10-11</td>
119
+ <td>9 Georgia</td>
120
+ <td>Win</td>
121
+ <td>26</td>
122
+ <td class="green-highlight">0</td>
123
+ <td>3 - 1 , 20</td>
124
+ </tr>
125
+ <tr class="highlight">
126
+ <td>5</td>
127
+ <td>9999-10-18</td>
128
+ <td>10 Vanderbilt</td>
129
+ <td>Win</td>
130
+ <td>14</td>
131
+ <td class="green-highlight">0</td>
132
+ <td>4 - 1 , 14</td>
133
+ </tr>
134
+ <tr class="highlight">
135
+ <td>9</td>
136
+ <td>9999-11-15</td>
137
+ <td>Evansville</td>
138
+ <td>Win</td>
139
+ <td>36</td>
140
+ <td class="green-highlight">0</td>
141
+ <td>7 - 2</td>
142
+ </tr>
143
+ </table>
144
+ <p>
145
+ In this example, the TableQA system has highlighted specific rows and cells to explain its reasoning:
146
+ </p>
147
+ <ul style="text-align: left;">
148
+ <li>The entire rows for games 2, 4, 5, and 9 are highlighted in yellow.</li>
149
+ <li>Within these rows, the "Opponents" column cells containing "0" are highlighted in green.</li>
150
+ </ul>
151
+ <p>
152
+ These highlights indicate that the system identified four games where the opposing team did not score, verifying the statement as true. The yellow highlighting shows the relevant rows, while the green highlighting represents the cells containing fine-grained information needed to verify the statement.
153
+ </p>
154
+ <p>
155
+ By using different colors for highlighting, the system provides a more nuanced explanation:
156
+ </p>
157
+ <ul style="text-align: left;">
158
+ <li>Yellow highlights (rows): Show the overall context of the relevant games.</li>
159
+ <li>Green highlights (cells): Pinpoint the exact data points (opposing team's score of 0) that directly answer the question.</li>
160
+ </ul>
161
+ <p>
162
+ This multi-level highlighting helps users quickly grasp both the broad context and the specific details that support the system's answer.
163
+ </p>
164
+ <p>
165
+ During the experiment, you will compare different methods that provide these types of explanations. Your task will be to evaluate which explanations are most clear and helpful in understanding the system's reasoning.
166
+ </p>
167
+ <button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
168
+ </div>
169
+ </body>
170
+ </html>
templates/introduction.html ADDED
@@ -0,0 +1,213 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Table Question Answering Experiment</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ line-height: 1.6;
11
+ margin: 0;
12
+ padding: 20px;
13
+ display: flex;
14
+ flex-direction: column;
15
+ min-height: 100vh;
16
+ }
17
+ .container {
18
+ max-width: 800px;
19
+ margin: 0 auto;
20
+ flex-grow: 1;
21
+ }
22
+ h1, h2 {
23
+ color: #333;
24
+ }
25
+ .intro, .outro {
26
+ background-color: #f0f0f0;
27
+ padding: 20px;
28
+ border-radius: 5px;
29
+ margin-bottom: 20px;
30
+ }
31
+ .sample-container {
32
+ border: 1px solid #ddd;
33
+ padding: 20px;
34
+ margin-bottom: 20px;
35
+ }
36
+ iframe {
37
+ width: 100%;
38
+ height: 600px;
39
+ border: none;
40
+ }
41
+ .button-container {
42
+ text-align: center;
43
+ margin-top: 20px;
44
+ }
45
+ .next-button {
46
+ background-color: #4CAF50;
47
+ color: white;
48
+ padding: 15px 30px;
49
+ border: none;
50
+ border-radius: 5px;
51
+ cursor: pointer;
52
+ font-size: 18px;
53
+ text-decoration: none;
54
+ }
55
+ .next-button:hover {
56
+ background-color: #45a049;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body>
61
+ <div class="container">
62
+ <div class="intro">
63
+ <h1>Introduction to Table Question Answering</h1>
64
+ <p>In this experiment, you will interact with Table Question Answering (TableQA) systems. TableQA involves answering questions based on data provided in tables, similar to spreadsheets.</p>
65
+ </div>
66
+
67
+ <div class="sample-container">
68
+ <h2>Verify if the following Statement is TRUE or FALSE</h2>
69
+ <iframe srcdoc="
70
+ <html><head>
71
+ <style>
72
+ body { font-family: Arial, sans-serif; margin: 20px; }
73
+ h1 { text-align: center; }
74
+ .cot-title { color: blue; }
75
+ .pos-title { color: green; }
76
+ h2 { color: black; text-align: left; }
77
+ h3 { color: black; text-align: left; }
78
+ h4 { color: darkslategray; }
79
+ table { width: 100%; border-collapse: collapse; margin: 20px 0; }
80
+ table, th, td { border: 1px solid #ddd; padding: 8px; }
81
+ th { background-color: #f2f2f2; }
82
+ tr:nth-child(even) { background-color: #f9f9f9; }
83
+ .highlight { background-color: #ffffcc; }
84
+ .true { color: green; }
85
+ .false { color: red; }
86
+ .highlighted-cell { background-color: yellow; cursor: pointer; }
87
+ .step-title { background-color: #f1f1f1; color: #444; padding: 10px; margin: 10px 0; font-size: 18px; border-left: 4px solid #888; }
88
+ .step { display: block; }
89
+ </style>
90
+ </head><body>
91
+ <hr>
92
+ <h3><span>Statement:</span> the wildcats kept the opposing team scoreless in four games</h3>
93
+ <h3>Input Table: 1947 kentucky wildcats football team</h3>
94
+ <div class='step'>
95
+ <table>
96
+ <tr>
97
+ <td>game</td>
98
+ <td>date</td>
99
+ <td>opponent</td>
100
+ <td>result</td>
101
+ <td>wildcats_points</td>
102
+ <td>opponents</td>
103
+ <td>record</td>
104
+ </tr>
105
+ <tr>
106
+ <td>1</td>
107
+ <td>9999-09-20</td>
108
+ <td>ole miss</td>
109
+ <td>loss</td>
110
+ <td>7</td>
111
+ <td>14</td>
112
+ <td>0 - 1</td>
113
+ </tr>
114
+ <tr>
115
+ <td>2</td>
116
+ <td>9999-09-27</td>
117
+ <td>cincinnati</td>
118
+ <td>win</td>
119
+ <td>20</td>
120
+ <td>0</td>
121
+ <td>1 - 1</td>
122
+ </tr>
123
+ <tr>
124
+ <td>3</td>
125
+ <td>9999-10-04</td>
126
+ <td>xavier</td>
127
+ <td>win</td>
128
+ <td>20</td>
129
+ <td>7</td>
130
+ <td>2 - 1</td>
131
+ </tr>
132
+ <tr>
133
+ <td>4</td>
134
+ <td>9999-10-11</td>
135
+ <td>9 georgia</td>
136
+ <td>win</td>
137
+ <td>26</td>
138
+ <td>0</td>
139
+ <td>3 - 1 , 20</td>
140
+ </tr>
141
+ <tr>
142
+ <td>5</td>
143
+ <td>9999-10-18</td>
144
+ <td>10 vanderbilt</td>
145
+ <td>win</td>
146
+ <td>14</td>
147
+ <td>0</td>
148
+ <td>4 - 1 , 14</td>
149
+ </tr>
150
+ <tr>
151
+ <td>6</td>
152
+ <td>9999-10-25</td>
153
+ <td>michigan state</td>
154
+ <td>win</td>
155
+ <td>7</td>
156
+ <td>6</td>
157
+ <td>5 - 1 , 13</td>
158
+ </tr>
159
+ <tr>
160
+ <td>7</td>
161
+ <td>9999-11-01</td>
162
+ <td>18 alabama</td>
163
+ <td>loss</td>
164
+ <td>0</td>
165
+ <td>13</td>
166
+ <td>5 - 2</td>
167
+ </tr>
168
+ <tr>
169
+ <td>8</td>
170
+ <td>9999-11-08</td>
171
+ <td>west virginia</td>
172
+ <td>win</td>
173
+ <td>15</td>
174
+ <td>6</td>
175
+ <td>6 - 2</td>
176
+ </tr>
177
+ <tr>
178
+ <td>9</td>
179
+ <td>9999-11-15</td>
180
+ <td>evansville</td>
181
+ <td>win</td>
182
+ <td>36</td>
183
+ <td>0</td>
184
+ <td>7 - 2</td>
185
+ </tr>
186
+ <tr>
187
+ <td>10</td>
188
+ <td>9999-11-22</td>
189
+ <td>tennessee</td>
190
+ <td>loss</td>
191
+ <td>6</td>
192
+ <td>13</td>
193
+ <td>7 - 3</td>
194
+ </tr>
195
+ </table>
196
+ </body></html>
197
+ <h3>Prediction:</span> TRUE</h3>
198
+ </body></html>
199
+ "></iframe>
200
+ </div>
201
+
202
+ <div class="outro">
203
+ <h2>Your Task</h2>
204
+ <p>Your task in this experiment is to evaluate different methods that explain how the TableQA system arrives at its answers (here TRUE). Understanding these explanations helps improve trust and transparency in AI systems.</p>
205
+ </div>
206
+
207
+ <div class="button-container">
208
+ <!-- This button leads to the Attribution Explanations page -->
209
+ <a href="{{ url_for('attribution') }}" class="next-button">Next</a>
210
+ </div>
211
+ </div>
212
+ </body>
213
+ </html>