Spaces:
Runtime error
Runtime error
File size: 6,023 Bytes
94b3f06 174b5e1 94b3f06 174b5e1 94b3f06 174b5e1 16f4777 174b5e1 94b3f06 174b5e1 3b882cd 16f4777 3b882cd 16f4777 3b882cd 16f4777 3b882cd 16f4777 3b882cd 174b5e1 16f4777 174b5e1 16f4777 174b5e1 94b3f06 3b882cd |
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 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!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 provided by a TableQA system. These explanations help you understand which data points the system considered important when generating the answer.
</p>
<h2>Example: 1947 Kentucky Wildcats Football Team</h2>
<p>
Statement to verify: "The Wildcats kept the opposing team scoreless in four 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 system has highlighted specific rows and cells to explain its reasoning:
</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" 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 true. 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 data points (opposing team's score of 0) that directly answer the question.</li>
</ul>
<p>
This multi-level highlighting helps users quickly grasp both the broad context and the specific details that support the system's answer.
</p>
<p>
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.
</p>
<button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
</div>
</body>
</html> |