Hugging Face's logo

Spaces:
luulinh90s
/
Tabular-LLM-Study-Preference
Runtime error

App Files Community
luulinh90s commited on
Commit
3b882cd
·
1 Parent(s): 94b3f06

update

Browse files
Files changed (2) hide show
  1. templates/attribution.html +137 -67
  2. templates/introduction.html +172 -46
templates/attribution.html CHANGED
@@ -1,76 +1,146 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Attribution Explanations in TableQA</title>
 
 
5
  <style>
6
- /* Include your styles here */
7
- body {
8
- font-family: 'Roboto', sans-serif;
9
- background: url('/static/images/background.jpg') no-repeat center center fixed;
10
- background-size: cover;
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- height: 100vh;
15
- margin: 0;
16
- }
17
- .container {
18
- text-align: center;
19
- background-color: #ffffff;
20
- padding: 60px;
21
- border-radius: 10px;
22
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23
- width: 60%;
24
- }
25
- h1 {
26
- color: #000000;
27
- font-size: 48px;
28
- margin-bottom: 30px;
29
- }
30
- p {
31
- font-size: 20px;
32
- color: #333;
33
- margin-bottom: 30px;
34
- }
35
- img {
36
- max-width: 100%;
37
- height: auto;
38
- margin-bottom: 30px;
39
- }
40
- button {
41
- background-color: #4CAF50;
42
- color: white;
43
- padding: 15px 30px;
44
- border: none;
45
- border-radius: 5px;
46
- cursor: pointer;
47
- font-size: 24px;
48
- transition: background-color 0.3s ease;
49
- margin-top: 20px;
50
- }
51
- button:hover {
52
- background-color: #45a049;
53
- }
54
  </style>
55
  </head>
56
  <body>
57
  <div class="container">
58
- <h1>Understanding Attribution Explanations</h1>
59
- <p>
60
- 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.
61
- </p>
62
- <p>
63
- These explanations help you understand which data points the system considered important when generating the answer.
64
- </p>
65
- <!-- Include an example image if available -->
66
- <!-- <img src="/static/images/attribution_example.png" alt="Attribution Example"> -->
67
- <p>
68
- For example, if the system answers "The highest sales were in June," the attribution might highlight the "June" row and the "Sales" column in the table.
69
- </p>
70
- <p>
71
- During the experiment, you will compare different methods that provide these explanations.
72
- </p>
73
- <button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  </div>
75
  </body>
76
- </html>
 
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>TableQA Example with Highlighted Explanations</title>
7
  <style>
8
+ body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
9
+ .container { max-width: 800px; margin: 0 auto; }
10
+ table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
11
+ th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
12
+ th { background-color: #f2f2f2; }
13
+ .highlight { background-color: #ffffcc; }
14
+ .explanation { background-color: #f0f0f0; padding: 15px; border-radius: 5px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </style>
16
  </head>
17
  <body>
18
  <div class="container">
19
+ <h1>TableQA Example with Highlighted Explanations</h1>
20
+
21
+ <h2>Statement to Verify:</h2>
22
+ <p>"The Wildcats kept the opposing team scoreless in four games."</p>
23
+
24
+ <h2>Input Table: 1947 Kentucky Wildcats Football Team</h2>
25
+ <table>
26
+ <tr>
27
+ <th>Game</th>
28
+ <th>Date</th>
29
+ <th>Opponent</th>
30
+ <th>Result</th>
31
+ <th>Wildcats Points</th>
32
+ <th>Opponents</th>
33
+ <th>Record</th>
34
+ </tr>
35
+ <tr>
36
+ <td>1</td>
37
+ <td>9999-09-20</td>
38
+ <td>Ole Miss</td>
39
+ <td>Loss</td>
40
+ <td>7</td>
41
+ <td>14</td>
42
+ <td>0 - 1</td>
43
+ </tr>
44
+ <tr class="highlight">
45
+ <td>2</td>
46
+ <td>9999-09-27</td>
47
+ <td>Cincinnati</td>
48
+ <td>Win</td>
49
+ <td>20</td>
50
+ <td class="highlight">0</td>
51
+ <td>1 - 1</td>
52
+ </tr>
53
+ <tr>
54
+ <td>3</td>
55
+ <td>9999-10-04</td>
56
+ <td>Xavier</td>
57
+ <td>Win</td>
58
+ <td>20</td>
59
+ <td>7</td>
60
+ <td>2 - 1</td>
61
+ </tr>
62
+ <tr class="highlight">
63
+ <td>4</td>
64
+ <td>9999-10-11</td>
65
+ <td>9 Georgia</td>
66
+ <td>Win</td>
67
+ <td>26</td>
68
+ <td class="highlight">0</td>
69
+ <td>3 - 1 , 20</td>
70
+ </tr>
71
+ <tr class="highlight">
72
+ <td>5</td>
73
+ <td>9999-10-18</td>
74
+ <td>10 Vanderbilt</td>
75
+ <td>Win</td>
76
+ <td>14</td>
77
+ <td class="highlight">0</td>
78
+ <td>4 - 1 , 14</td>
79
+ </tr>
80
+ <tr>
81
+ <td>6</td>
82
+ <td>9999-10-25</td>
83
+ <td>Michigan State</td>
84
+ <td>Win</td>
85
+ <td>7</td>
86
+ <td>6</td>
87
+ <td>5 - 1 , 13</td>
88
+ </tr>
89
+ <tr>
90
+ <td>7</td>
91
+ <td>9999-11-01</td>
92
+ <td>18 Alabama</td>
93
+ <td>Loss</td>
94
+ <td>0</td>
95
+ <td>13</td>
96
+ <td>5 - 2</td>
97
+ </tr>
98
+ <tr>
99
+ <td>8</td>
100
+ <td>9999-11-08</td>
101
+ <td>West Virginia</td>
102
+ <td>Win</td>
103
+ <td>15</td>
104
+ <td>6</td>
105
+ <td>6 - 2</td>
106
+ </tr>
107
+ <tr class="highlight">
108
+ <td>9</td>
109
+ <td>9999-11-15</td>
110
+ <td>Evansville</td>
111
+ <td>Win</td>
112
+ <td>36</td>
113
+ <td class="highlight">0</td>
114
+ <td>7 - 2</td>
115
+ </tr>
116
+ <tr>
117
+ <td>10</td>
118
+ <td>9999-11-22</td>
119
+ <td>Tennessee</td>
120
+ <td>Loss</td>
121
+ <td>6</td>
122
+ <td>13</td>
123
+ <td>7 - 3</td>
124
+ </tr>
125
+ </table>
126
+
127
+ <h2>Prediction: TRUE</h2>
128
+
129
+ <div class="explanation">
130
+ <h3>Explanation of Highlighted Cells:</h3>
131
+ <p>In this example, the TableQA system has highlighted specific cells to explain its reasoning:</p>
132
+ <ul>
133
+ <li>The entire rows for games 2, 4, 5, and 9 are highlighted in yellow.</li>
134
+ <li>Within these rows, the "Opponents" column cells containing "0" are highlighted with a deeper yellow.</li>
135
+ </ul>
136
+ <p>These highlights indicate that:</p>
137
+ <ol>
138
+ <li>The system identified four games where the opposing team did not score (Games 2, 4, 5, and 9).</li>
139
+ <li>The system specifically focused on the "Opponents" column to determine when the opposing team was kept scoreless.</li>
140
+ <li>By highlighting these cells, the system is showing us the exact data points it used to verify the statement "The Wildcats kept the opposing team scoreless in four games."</li>
141
+ </ol>
142
+ <p>This type of explanation helps users understand which parts of the data were most relevant to the system's decision-making process, increasing transparency and trust in the system's output.</p>
143
+ </div>
144
  </div>
145
  </body>
146
+ </html>
templates/introduction.html CHANGED
@@ -1,65 +1,191 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Introduction to Table Question Answering</title>
 
 
5
  <style>
6
- /* Include your styles here */
7
  body {
8
- font-family: 'Roboto', sans-serif;
9
- background: url('/static/images/background.jpg') no-repeat center center fixed;
10
- background-size: cover;
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- height: 100vh;
15
  margin: 0;
 
 
 
 
16
  }
17
  .container {
18
- text-align: center;
19
- background-color: #ffffff;
20
- padding: 60px;
21
- border-radius: 10px;
22
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23
- width: 60%;
24
- }
25
- h1 {
26
- color: #000000;
27
- font-size: 48px;
28
- margin-bottom: 30px;
29
  }
30
- p {
31
- font-size: 20px;
32
  color: #333;
33
- margin-bottom: 30px;
34
  }
35
- button {
36
- background-color: #4CAF50;
37
- color: white;
38
- padding: 15px 30px;
39
- border: none;
40
  border-radius: 5px;
41
- cursor: pointer;
42
- font-size: 24px;
43
- transition: background-color 0.3s ease;
44
- margin-top: 20px;
 
 
45
  }
46
- button:hover {
47
- background-color: #45a049;
 
 
48
  }
49
  </style>
50
  </head>
51
  <body>
52
  <div class="container">
53
- <h1>Welcome to the Table Question Answering Experiment</h1>
54
- <p>
55
- In this experiment, you will interact with Table Question Answering (TableQA) systems.
56
- TableQA involves answering questions based on data provided in tables, similar to spreadsheets.
57
- </p>
58
- <p>
59
- Your task is to evaluate different methods that explain how the TableQA system arrives at its answers.
60
- Understanding these explanations helps improve trust and transparency in AI systems.
61
- </p>
62
- <button onclick="location.href='{{ url_for('attribution') }}'">Next</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  </div>
64
  </body>
65
- </html>
 
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
  </style>
42
  </head>
43
  <body>
44
  <div class="container">
45
+ <div class="intro">
46
+ <h1>Introduction to Table Question Answering</h1>
47
+ <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>
48
+ </div>
49
+
50
+ <div class="sample-container">
51
+ <h2>Sample TableQA Problem</h2>
52
+ <iframe srcdoc="
53
+ <html><head>
54
+ <style>
55
+ body { font-family: Arial, sans-serif; margin: 20px; }
56
+ h1 { text-align: center; }
57
+ .cot-title { color: blue; }
58
+ .pos-title { color: green; }
59
+ h2 { color: black; text-align: left; }
60
+ h3 { color: black; text-align: left; }
61
+ h4 { color: darkslategray; }
62
+ table { width: 100%; border-collapse: collapse; margin: 20px 0; }
63
+ table, th, td { border: 1px solid #ddd; padding: 8px; }
64
+ th { background-color: #f2f2f2; }
65
+ tr:nth-child(even) { background-color: #f9f9f9; }
66
+ .highlight { background-color: #ffffcc; }
67
+ .true { color: green; }
68
+ .false { color: red; }
69
+ .highlighted-cell { background-color: yellow; cursor: pointer; }
70
+ .step-title { background-color: #f1f1f1; color: #444; padding: 10px; margin: 10px 0; font-size: 18px; border-left: 4px solid #888; }
71
+ .step { display: block; }
72
+ </style>
73
+ </head><body>
74
+ <hr>
75
+ <h3><span>Statement:</span> the wildcats kept the opposing team scoreless in four games</h3>
76
+ <h3>Input Table: 1947 kentucky wildcats football team</h3>
77
+ <div class='step'>
78
+ <table>
79
+ <tr>
80
+ <td>game</td>
81
+ <td>date</td>
82
+ <td>opponent</td>
83
+ <td>result</td>
84
+ <td>wildcats_points</td>
85
+ <td>opponents</td>
86
+ <td>record</td>
87
+ </tr>
88
+ <tr>
89
+ <td>1</td>
90
+ <td>9999-09-20</td>
91
+ <td>ole miss</td>
92
+ <td>loss</td>
93
+ <td>7</td>
94
+ <td>14</td>
95
+ <td>0 - 1</td>
96
+ </tr>
97
+ <tr>
98
+ <td>2</td>
99
+ <td>9999-09-27</td>
100
+ <td>cincinnati</td>
101
+ <td>win</td>
102
+ <td>20</td>
103
+ <td>0</td>
104
+ <td>1 - 1</td>
105
+ </tr>
106
+ <tr>
107
+ <td>3</td>
108
+ <td>9999-10-04</td>
109
+ <td>xavier</td>
110
+ <td>win</td>
111
+ <td>20</td>
112
+ <td>7</td>
113
+ <td>2 - 1</td>
114
+ </tr>
115
+ <tr>
116
+ <td>4</td>
117
+ <td>9999-10-11</td>
118
+ <td>9 georgia</td>
119
+ <td>win</td>
120
+ <td>26</td>
121
+ <td>0</td>
122
+ <td>3 - 1 , 20</td>
123
+ </tr>
124
+ <tr>
125
+ <td>5</td>
126
+ <td>9999-10-18</td>
127
+ <td>10 vanderbilt</td>
128
+ <td>win</td>
129
+ <td>14</td>
130
+ <td>0</td>
131
+ <td>4 - 1 , 14</td>
132
+ </tr>
133
+ <tr>
134
+ <td>6</td>
135
+ <td>9999-10-25</td>
136
+ <td>michigan state</td>
137
+ <td>win</td>
138
+ <td>7</td>
139
+ <td>6</td>
140
+ <td>5 - 1 , 13</td>
141
+ </tr>
142
+ <tr>
143
+ <td>7</td>
144
+ <td>9999-11-01</td>
145
+ <td>18 alabama</td>
146
+ <td>loss</td>
147
+ <td>0</td>
148
+ <td>13</td>
149
+ <td>5 - 2</td>
150
+ </tr>
151
+ <tr>
152
+ <td>8</td>
153
+ <td>9999-11-08</td>
154
+ <td>west virginia</td>
155
+ <td>win</td>
156
+ <td>15</td>
157
+ <td>6</td>
158
+ <td>6 - 2</td>
159
+ </tr>
160
+ <tr>
161
+ <td>9</td>
162
+ <td>9999-11-15</td>
163
+ <td>evansville</td>
164
+ <td>win</td>
165
+ <td>36</td>
166
+ <td>0</td>
167
+ <td>7 - 2</td>
168
+ </tr>
169
+ <tr>
170
+ <td>10</td>
171
+ <td>9999-11-22</td>
172
+ <td>tennessee</td>
173
+ <td>loss</td>
174
+ <td>6</td>
175
+ <td>13</td>
176
+ <td>7 - 3</td>
177
+ </tr>
178
+ </table>
179
+ </body></html>
180
+ <h3>Prediction:</span> TRUE</h3>
181
+ </body></html>
182
+ "></iframe>
183
+ </div>
184
+
185
+ <div class="outro">
186
+ <h2>Your Task</h2>
187
+ <p>Your task is to evaluate different methods that explain how the TableQA system arrives at its answers. Understanding these explanations helps improve trust and transparency in AI systems.</p>
188
+ </div>
189
  </div>
190
  </body>
191
+ </html>