Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Table Question Answering Experiment</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| flex-grow: 1; | |
| } | |
| h1, h2 { | |
| color: #333; | |
| } | |
| .intro, .outro { | |
| background-color: #f0f0f0; | |
| padding: 20px; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| } | |
| .sample-container { | |
| border: 1px solid #ddd; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 600px; | |
| border: none; | |
| } | |
| .button-container { | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| .next-button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 15px 30px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 18px; | |
| text-decoration: none; | |
| } | |
| .next-button:hover { | |
| background-color: #45a049; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="intro"> | |
| <h1>Introduction to Table Question Answering</h1> | |
| <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> | |
| </div> | |
| <div class="sample-container"> | |
| <h2>Verify if the following Statement is TRUE or FALSE</h2> | |
| <iframe srcdoc=" | |
| <html><head> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; } | |
| h1 { text-align: center; } | |
| .cot-title { color: blue; } | |
| .pos-title { color: green; } | |
| h2 { color: black; text-align: left; } | |
| h3 { color: black; text-align: left; } | |
| h4 { color: darkslategray; } | |
| table { width: 100%; border-collapse: collapse; margin: 20px 0; } | |
| table, th, td { border: 1px solid #ddd; padding: 8px; } | |
| th { background-color: #f2f2f2; } | |
| tr:nth-child(even) { background-color: #f9f9f9; } | |
| .highlight { background-color: #ffffcc; } | |
| .true { color: green; } | |
| .false { color: red; } | |
| .highlighted-cell { background-color: yellow; cursor: pointer; } | |
| .step-title { background-color: #f1f1f1; color: #444; padding: 10px; margin: 10px 0; font-size: 18px; border-left: 4px solid #888; } | |
| .step { display: block; } | |
| </style> | |
| </head><body> | |
| <hr> | |
| <h3><span>Statement:</span> the wildcats kept the opposing team scoreless in four games</h3> | |
| <h3>Input Table: 1947 kentucky wildcats football team</h3> | |
| <div class='step'> | |
| <table> | |
| <tr> | |
| <td>game</td> | |
| <td>date</td> | |
| <td>opponent</td> | |
| <td>result</td> | |
| <td>wildcats_points</td> | |
| <td>opponents</td> | |
| <td>record</td> | |
| </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> | |
| <td>2</td> | |
| <td>9999-09-27</td> | |
| <td>cincinnati</td> | |
| <td>win</td> | |
| <td>20</td> | |
| <td>0</td> | |
| <td>1 - 1</td> | |
| </tr> | |
| <tr> | |
| <td>3</td> | |
| <td>9999-10-04</td> | |
| <td>xavier</td> | |
| <td>win</td> | |
| <td>20</td> | |
| <td>7</td> | |
| <td>2 - 1</td> | |
| </tr> | |
| <tr> | |
| <td>4</td> | |
| <td>9999-10-11</td> | |
| <td>9 georgia</td> | |
| <td>win</td> | |
| <td>26</td> | |
| <td>0</td> | |
| <td>3 - 1 , 20</td> | |
| </tr> | |
| <tr> | |
| <td>5</td> | |
| <td>9999-10-18</td> | |
| <td>10 vanderbilt</td> | |
| <td>win</td> | |
| <td>14</td> | |
| <td>0</td> | |
| <td>4 - 1 , 14</td> | |
| </tr> | |
| <tr> | |
| <td>6</td> | |
| <td>9999-10-25</td> | |
| <td>michigan state</td> | |
| <td>win</td> | |
| <td>7</td> | |
| <td>6</td> | |
| <td>5 - 1 , 13</td> | |
| </tr> | |
| <tr> | |
| <td>7</td> | |
| <td>9999-11-01</td> | |
| <td>18 alabama</td> | |
| <td>loss</td> | |
| <td>0</td> | |
| <td>13</td> | |
| <td>5 - 2</td> | |
| </tr> | |
| <tr> | |
| <td>8</td> | |
| <td>9999-11-08</td> | |
| <td>west virginia</td> | |
| <td>win</td> | |
| <td>15</td> | |
| <td>6</td> | |
| <td>6 - 2</td> | |
| </tr> | |
| <tr> | |
| <td>9</td> | |
| <td>9999-11-15</td> | |
| <td>evansville</td> | |
| <td>win</td> | |
| <td>36</td> | |
| <td>0</td> | |
| <td>7 - 2</td> | |
| </tr> | |
| <tr> | |
| <td>10</td> | |
| <td>9999-11-22</td> | |
| <td>tennessee</td> | |
| <td>loss</td> | |
| <td>6</td> | |
| <td>13</td> | |
| <td>7 - 3</td> | |
| </tr> | |
| </table> | |
| </body></html> | |
| <h3>Prediction:</span> TRUE</h3> | |
| </body></html> | |
| "></iframe> | |
| </div> | |
| <div class="outro"> | |
| <h2>Your Task</h2> | |
| <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> | |
| </div> | |
| <div class="button-container"> | |
| <!-- This button leads to the Attribution Explanations page --> | |
| <a href="{{ url_for('attribution') }}" class="next-button">Next</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |