Tabular-LLM-Study-Forward-Simulation

Sleeping

App Files Files Community

luulinh90s commited on Sep 15

Commit

86a95d5

•

1 Parent(s): f7f3eab

update

Browse files

Files changed (5) hide show

app.py +19 -2
templates/cot_intro.html +115 -0
templates/dater_intro.html +107 -0
templates/index.html +10 -7
templates/pos_intro.html +118 -0

app.py CHANGED Viewed

@@ -175,7 +175,7 @@ def index():
             session_id = generate_session_id()
             session_data = {
                 'username': username,
-                'seed': str(seed),  # Store as string
                 'method': method,
                 'selected_samples': selected_samples,
                 'current_index': 0,
@@ -184,12 +184,29 @@ def index():
                 'session_id': session_id
             }
             save_session_data(session_id, session_data)
-            return redirect(url_for('experiment', session_id=session_id))
         except Exception as e:
             logger.exception(f"Error in index route: {e}")
             return "An error occurred", 500
     return render_template('index.html')
 @app.route('/experiment/<session_id>', methods=['GET', 'POST'])
 def experiment(session_id):
     try:

             session_id = generate_session_id()
             session_data = {
                 'username': username,
+                'seed': str(seed),
                 'method': method,
                 'selected_samples': selected_samples,
                 'current_index': 0,
                 'session_id': session_id
             }
             save_session_data(session_id, session_data)
+            return redirect(url_for('explanation', session_id=session_id))
         except Exception as e:
             logger.exception(f"Error in index route: {e}")
             return "An error occurred", 500
     return render_template('index.html')
+@app.route('/explanation/<session_id>')
+def explanation(session_id):
+    session_data = load_session_data(session_id)
+    if not session_data:
+        return redirect(url_for('index'))
+    method = session_data['method']
+    if method == 'Chain-of-Table':
+        return render_template('cot_intro.html', session_id=session_id)
+    elif method == 'Plan-of-SQLs':
+        return render_template('pos_intro.html', session_id=session_id)
+    elif method == 'Dater':
+        return render_template('dater_intro.html', session_id=session_id)
+    else:  # No-XAI
+        return redirect(url_for('experiment', session_id=session_id))
 @app.route('/experiment/<session_id>', methods=['GET', 'POST'])
 def experiment(session_id):
     try:

templates/cot_intro.html ADDED Viewed

	@@ -0,0 +1,115 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Chain-of-Table Explanations in TableQA</title>
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: url('/api/placeholder/1920/1080') 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, h2 {
+            color: #333;
+        }
+        p, li {
+            font-size: 16px;
+            color: #333;
+            text-align: left;
+        }
+        .step {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            padding: 15px;
+        }
+        .step-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        .highlighted-cell {
+            background-color: #ffffcc;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 18px;
+            transition: background-color 0.3s ease;
+            margin-top: 20px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: none;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Understanding Chain-of-Table Explanations</h1>
+        <p>
+            Chain-of-Table is a TableQA method that breaks down the question-answering process into a series of intermediate tables. Each step in the chain represents a specific operation on the table, leading to the final answer.
+        </p>
+        <h2>Example: 1947 Kentucky Wildcats Football Team</h2>
+        <p>
+            Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games."
+        </p>
+        <div class="step">
+            <div class="step-title">Step 1: f_select_row(row 1, row 2, row 3, row 4, row 8)</div>
+            <p>This step selects specific rows from the original table.</p>
+        </div>
+        <div class="step">
+            <div class="step-title">Step 2: f_select_column(game, wildcats points, opponents)</div>
+            <p>This step narrows down the table to only include the 'game', 'wildcats points', and 'opponents' columns.</p>
+        </div>
+        <div class="step">
+            <div class="step-title">Step 3: f_sort_column(opponents)</div>
+            <p>The table is then sorted based on the 'opponents' column, which puts the scoreless games (0 points) at the top.</p>
+        </div>
+        <div class="step">
+            <div class="step-title">Step 4: simple_query()</div>
+            <p>This step just inputs the Statement and the final simplified table to the model to ask for the verification.</p>
+        </div>
+        <h2>Chain-of-Table Example</h2>
+        <iframe src="htmls_COT/TP/test-0.html"></iframe>
+        <h2>Final Prediction: TRUE</h2>
+        <button onclick="location.href='{{ url_for('experiment') }}'">Proceed to Experiment</button>
+    </div>
+</body>
+</html>

templates/dater_intro.html ADDED Viewed

	@@ -0,0 +1,107 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dater Explanations in TableQA</title>
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: url('/api/placeholder/1920/1080') 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, h2 {
+            color: #333;
+        }
+        p, li {
+            font-size: 16px;
+            color: #333;
+            text-align: left;
+        }
+        .step {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            padding: 15px;
+        }
+        .step-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        .highlighted-cell {
+            background-color: #ffffcc;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 18px;
+            transition: background-color 0.3s ease;
+            margin-top: 20px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: none;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Understanding Dater Explanations</h1>
+        <p>
+            Dater is a TableQA method that focuses on selecting relevant information from the input table and providing contextual information to support the statement verification process.
+        </p>
+        <h2>Example: 1947 Kentucky Wildcats Football Team</h2>
+        <p>
+            Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games."
+        </p>
+        <div class="step">
+            <div class="step-title">Step 1: Sub-table Selection</div>
+            <p>Dater selects a sub-table from the original input Table that is relevant to the Statement. This step ensures that only the most relevant information is considered for verification.</p>
+        </div>
+        <div class="step">
+            <div class="step-title">Step 2: Contextual Information</div>
+            <p>Dater provides contextual information that is fact-checked against the Table. This information serves as support for the Statement being verified.</p>
+        </div>
+        <h2>Dater Example</h2>
+        <iframe src="htmls_DATER/TP/test-0.html"></iframe>
+        <h2>Final Prediction: TRUE</h2>
+        <button onclick="location.href='{{ url_for('experiment') }}'">Proceed to Experiment</button>
+    </div>
+</body>
+</html>

templates/index.html CHANGED Viewed

@@ -88,7 +88,7 @@
             50% { border-color: #000000; }
             100% { border-color: #000000; }
         }
-        button[type="submit"] {
             background-color: #4CAF50;
             color: white;
             padding: 15px 30px;
@@ -99,7 +99,7 @@
             transition: background-color 0.3s ease;
             margin-top: 20px;
         }
-        button[type="submit"]:hover {
             background-color: #45a049;
         }
     </style>
@@ -128,15 +128,18 @@
             }
             return true;
         }
     </script>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="container">
-        <h1>Let's get started! Please input your name, a random number, and select one of the below explanation methods for your experiment.</h1>
-<!--        <div class="instruction">-->
-<!--            Let's get started! Please input your name, enter a random number as your seed, and select one of the explanation methods for your experiment.-->
-<!--        </div>-->
         <form id="method-form" action="{{ url_for('index') }}" method="post" onsubmit="return validateForm();">
             <label for="username">Hi there 👋👋👋 ! What is your name?</label>
             <input type="text" id="username" name="username" required>
@@ -160,7 +163,7 @@
                 </div>
             </div>
-            <button type="submit">Start</button>
         </form>
     </div>
 </body>

             50% { border-color: #000000; }
             100% { border-color: #000000; }
         }
+        button {
             background-color: #4CAF50;
             color: white;
             padding: 15px 30px;
             transition: background-color 0.3s ease;
             margin-top: 20px;
         }
+        button:hover {
             background-color: #45a049;
         }
     </style>
             }
             return true;
         }
+        function goToExplanation() {
+            if (validateForm()) {
+                document.getElementById('method-form').submit();
+            }
+        }
     </script>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="container">
+        <h1>Let's get started! Please input your name, a random number, and select one of the below explanation methods for your experiment. You will be assigned 10 samples to work on.</h1>
         <form id="method-form" action="{{ url_for('index') }}" method="post" onsubmit="return validateForm();">
             <label for="username">Hi there 👋👋👋 ! What is your name?</label>
             <input type="text" id="username" name="username" required>
                 </div>
             </div>
+            <button type="button" onclick="goToExplanation()">Next</button>
         </form>
     </div>
 </body>

templates/pos_intro.html ADDED Viewed

	@@ -0,0 +1,118 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Plan-of-SQLs Explanations in TableQA</title>
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: url('/api/placeholder/1920/1080') 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, h2 {
+            color: #333;
+        }
+        p, li {
+            font-size: 16px;
+            color: #333;
+            text-align: left;
+        }
+        .step {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            padding: 15px;
+        }
+        .highlighted-step {
+            background-color: #ffffd9;
+            border-left: 5px solid #ffeb3b;
+            padding-left: 15px;
+        }
+        .step-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        .highlighted-cell {
+            background-color: #ffffcc;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 18px;
+            transition: background-color 0.3s ease;
+            margin-top: 20px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: none;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Understanding Plan-of-SQLs Explanations</h1>
+        <p>
+            Plan-of-SQLs is a TableQA method that breaks down the question-answering process into a series of SQL commands. Each step represents a specific operation on the table, leading to the final answer.
+        </p>
+        <h2>Example: 1947 Kentucky Wildcats Football Team</h2>
+        <p>
+            Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games."
+        </p>
+        <div class="step">
+            <div class="step-title">Step 1: Order the table by 'opponents' in ascending order.</div>
+            <p>This step sorts the entire table based on the 'opponents' column, putting the scoreless games (0 points) at the top.</p>
+        </div>
+        <div class="step">
+            <div class="step-title">Step 2: Select rows where 'opponents' is 0.</div>
+            <p>This step filters the table to only include rows where the opposing team didn't score any points.</p>
+        </div>
+<!--        <div class="step">-->
+        <div class="step highl  ighted-step">
+            <div class="step-title">Step 3: Use a `CASE` statement to return TRUE if the number of rows is equal to 4, otherwise return FALSE.</div>
+            <p>This step checks if there are exactly 4 games where the opposing team was scoreless, as stated in the verification statement.</p>
+            <p>In the final intermediate, only count the rows with actual data. The top row, which contains the column headers (like titles or labels for the columns), is not part of the count. So, if you see only the header row with no data beneath it, the table has 0 rows. If you see one row beneath the header, the table has 1 row." </p>
+        </div>
+        <h2>Program-of-Sequence Example</h2>
+        <iframe src="htmls_PoS/TP/test-0.html"></iframe>
+        <h2>Final Prediction: TRUE</h2>
+        <button onclick="location.href='{{ url_for('experiment') }}'">Proceed to Experiment</button>
+    </div>
+</body>
+</html>