Tabular-LLM-Study-Preference

Runtime error

App Files Files Community

luulinh90s commited on Sep 13, 2024

Commit

174b5e1

1 Parent(s): 3b882cd

update

Browse files

Files changed (2) hide show

templates/attribution.html +91 -80
templates/introduction.html +22 -0

templates/attribution.html CHANGED Viewed

@@ -1,27 +1,87 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TableQA Example with Highlighted Explanations</title>
     <style>
-        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
-        .container { max-width: 800px; margin: 0 auto; }
-        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; }
-        .explanation { background-color: #f0f0f0; padding: 15px; border-radius: 5px; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>TableQA Example with Highlighted Explanations</h1>
-        <h2>Statement to Verify:</h2>
-        <p>"The Wildcats kept the opposing team scoreless in four games."</p>
-        <h2>Input Table: 1947 Kentucky Wildcats Football Team</h2>
         <table>
             <tr>
                 <th>Game</th>
@@ -50,15 +110,6 @@
                 <td class="highlight">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 class="highlight">
                 <td>4</td>
                 <td>9999-10-11</td>
@@ -77,33 +128,6 @@
                 <td class="highlight">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 class="highlight">
                 <td>9</td>
                 <td>9999-11-15</td>
@@ -113,34 +137,21 @@
                 <td class="highlight">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>
-        <h2>Prediction: TRUE</h2>
-        <div class="explanation">
-            <h3>Explanation of Highlighted Cells:</h3>
-            <p>In this example, the TableQA system has highlighted specific cells to explain its reasoning:</p>
-            <ul>
-                <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 with a deeper yellow.</li>
-            </ul>
-            <p>These highlights indicate that:</p>
-            <ol>
-                <li>The system identified four games where the opposing team did not score (Games 2, 4, 5, and 9).</li>
-                <li>The system specifically focused on the "Opponents" column to determine when the opposing team was kept scoreless.</li>
-                <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>
-            </ol>
-            <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>
-        </div>
     </div>
 </body>
 </html>

 <!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;
+        }
+        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>
                 <td class="highlight">0</td>
                 <td>1 - 1</td>
             </tr>
             <tr class="highlight">
                 <td>4</td>
                 <td>9999-10-11</td>
                 <td class="highlight">0</td>
                 <td>4 - 1 , 14</td>
             </tr>
             <tr class="highlight">
                 <td>9</td>
                 <td>9999-11-15</td>
                 <td class="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 with a deeper yellow.</li>
+        </ul>
+        <p>
+            These highlights indicate that the system identified four games where the opposing team did not score, verifying the statement as true. By highlighting these cells, the system is showing us the exact data points it used in its decision-making process.
+        </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>

templates/introduction.html CHANGED Viewed

@@ -38,6 +38,23 @@
             height: 600px;
             border: none;
         }
     </style>
 </head>
 <body>
@@ -186,6 +203,11 @@
             <h2>Your Task</h2>
             <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>
         </div>
     </div>
 </body>
 </html>

             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>
             <h2>Your Task</h2>
             <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>
         </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>