Tabular-LLM-Study-Forward-Simulation

Sleeping

App Files Files Community

luulinh90s commited on Sep 15, 2024

Commit

0c987e6

1 Parent(s): 2b0d981

update

Browse files

Files changed (3) hide show

templates/attribution.html +1 -1
templates/introduction.html +3 -3
templates/subjective.html +94 -0

templates/attribution.html CHANGED Viewed

@@ -162,7 +162,7 @@
             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 use explanations to predict model output. Your task will be to look at the provided explanations and predict if the model verifies the Statement as TRUE or FALSE.
         </p>
         <button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
     </div>

             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 use explanations to simulate model prediction. Your task will be to look at the provided explanations and simulate the model prediction on the Statement (TRUE or FALSE).
         </p>
         <button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
     </div>

templates/introduction.html CHANGED Viewed

@@ -61,7 +61,7 @@
     <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">
@@ -194,14 +194,14 @@
             </tr>
             </table>
             </body></html>
-            <h3>Model 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">

     <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) models. TableQA involves answering questions based on data provided in tables, similar to spreadsheets.</p>
         </div>
         <div class="sample-container">
             </tr>
             </table>
             </body></html>
+            <h3>Model says this Statement is:</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 a TableQA model predicts an answer (for example, TRUE). You will be given the explanation and simulate what the TableQA model will predict.</p>
         </div>
         <div class="button-container">

templates/subjective.html ADDED Viewed

	@@ -0,0 +1,94 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback on Table QA Explanations</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+        }
+        .question {
+            margin-bottom: 20px;
+        }
+        .likert {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+        }
+        .likert-option {
+            text-align: center;
+            flex: 1;
+        }
+        input[type="radio"] {
+            margin-bottom: 5px;
+        }
+        button {
+            display: block;
+            width: 200px;
+            margin: 20px auto;
+            padding: 10px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+    </style>
+</head>
+<body>
+    <h1>Feedback on Table QA Explanations</h1>
+    <form id="feedbackForm">
+        <div class="question">
+            <p>After using the explanations, how much do you think they helped you understand the reasoning process of the Table QA model?</p>
+            <div class="likert">
+                <div class="likert-option">
+                    <input type="radio" name="understanding" value="1" id="understanding1" required>
+                    <label for="understanding1">Not at all helpful</label>
+                </div>
+                <div class="likert-option">
+                    <input type="radio" name="understanding" value="2" id="understanding2">
+                    <label for="understanding2">Slightly helpful</label>
+                </div>
+                <div class="likert-option">
+                    <input type="radio" name="understanding" value="3" id="understanding3">
+                    <label for="understanding3">Moderately helpful</label>
+                </div>
+                <div class="likert-option">
+                    <input type="radio" name="understanding" value="4" id="understanding4">
+                    <label for="understanding4">Very helpful</label>
+                </div>
+                <div class="likert-option">
+                    <input type="radio" name="understanding" value="5" id="understanding5">
+                    <label for="understanding5">Extremely helpful</label>
+                </div>
+            </div>
+        </div>
+        <button type="submit">Submit Feedback</button>
+    </form>
+    <script>
+        document.getElementById('feedbackForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            var selectedValue = document.querySelector('input[name="understanding"]:checked').value;
+            alert('Thank you for your feedback! You selected: ' + selectedValue);
+            // Here you can add code to send this data to your server
+        });
+    </script>
+</body>
+</html>