|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Attribution Explanations in TableQA</title> |
|
<style> |
|
body { |
|
font-family: 'Roboto', sans-serif; |
|
background: url('/static/images/background.jpg') 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 { |
|
color: #000000; |
|
font-size: 36px; |
|
margin-bottom: 20px; |
|
} |
|
h2 { |
|
color: #333; |
|
font-size: 24px; |
|
margin-top: 30px; |
|
margin-bottom: 15px; |
|
} |
|
p { |
|
font-size: 18px; |
|
color: #333; |
|
margin-bottom: 20px; |
|
text-align: left; |
|
} |
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin-bottom: 20px; |
|
} |
|
th, td { |
|
border: 1px solid #ddd; |
|
padding: 8px; |
|
text-align: left; |
|
} |
|
th { |
|
background-color: #f2f2f2; |
|
} |
|
.highlight { |
|
background-color: #ffffcc; |
|
} |
|
.green-highlight { |
|
background-color: #90EE90; |
|
} |
|
button { |
|
background-color: #4CAF50; |
|
color: white; |
|
padding: 15px 30px; |
|
border: none; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
font-size: 24px; |
|
transition: background-color 0.3s ease; |
|
margin-top: 20px; |
|
} |
|
button:hover { |
|
background-color: #45a049; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>Understanding Attribution Explanations</h1> |
|
<p> |
|
Attribution explanations highlight specific parts of a table—such as rows, columns, or cells—that are most relevant to the answer predicted by a TableQA model. These explanations help you understand which information of the input the system considered important when predicting the answer. |
|
</p> |
|
<h2>Table caption: 1947 Kentucky Wildcats Football Team</h2> |
|
<p> |
|
Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games." |
|
</p> |
|
<table> |
|
<tr> |
|
<th>Game</th> |
|
<th>Date</th> |
|
<th>Opponent</th> |
|
<th>Result</th> |
|
<th>Wildcats Points</th> |
|
<th>Opponents</th> |
|
<th>Record</th> |
|
</tr> |
|
<tr> |
|
<td>1</td> |
|
<td>9999-09-20</td> |
|
<td>Ole Miss</td> |
|
<td>Loss</td> |
|
<td>7</td> |
|
<td>14</td> |
|
<td>0 - 1</td> |
|
</tr> |
|
<tr class="highlight"> |
|
<td>2</td> |
|
<td>9999-09-27</td> |
|
<td>Cincinnati</td> |
|
<td>Win</td> |
|
<td>20</td> |
|
<td class="green-highlight">0</td> |
|
<td>1 - 1</td> |
|
</tr> |
|
<tr class="highlight"> |
|
<td>4</td> |
|
<td>9999-10-11</td> |
|
<td>9 Georgia</td> |
|
<td>Win</td> |
|
<td>26</td> |
|
<td class="green-highlight">0</td> |
|
<td>3 - 1 , 20</td> |
|
</tr> |
|
<tr class="highlight"> |
|
<td>5</td> |
|
<td>9999-10-18</td> |
|
<td>10 Vanderbilt</td> |
|
<td>Win</td> |
|
<td>14</td> |
|
<td class="green-highlight">0</td> |
|
<td>4 - 1 , 14</td> |
|
</tr> |
|
<tr class="highlight"> |
|
<td>9</td> |
|
<td>9999-11-15</td> |
|
<td>Evansville</td> |
|
<td>Win</td> |
|
<td>36</td> |
|
<td class="green-highlight">0</td> |
|
<td>7 - 2</td> |
|
</tr> |
|
</table> |
|
<p> |
|
In this example, the TableQA model has highlighted specific rows and cells to explain its prediction: |
|
</p> |
|
<ul style="text-align: left;"> |
|
<li>The entire rows for games 2, 4, 5, and 9 are highlighted in yellow.</li> |
|
<li>Within these rows, the "Opponents" column cells containing "0" or "scoreless" are highlighted in green.</li> |
|
</ul> |
|
<p> |
|
These highlights indicate that the system identified four games where the opposing team did not score, verifying the statement as CORRECT. The yellow highlighting shows the relevant rows, while the green highlighting represents the cells containing fine-grained information needed to verify the statement. |
|
</p> |
|
<p> |
|
By using different colors for highlighting, the system provides a more nuanced explanation: |
|
</p> |
|
<ul style="text-align: left;"> |
|
<li>Yellow highlights (rows): Show the overall context of the relevant games.</li> |
|
<li>Green highlights (cells): Pinpoint the exact information (opposing team's score of 0) that directly answer the question.</li> |
|
</ul> |
|
<p> |
|
During the experiment, you will use explanations to guess model prediction. Your task will be to look at the provided explanations and guess what the model says on the Statement (SUPPORTED or NOT SUPPORTED). |
|
</p> |
|
<button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button> |
|
</div> |
|
</body> |
|
</html> |
