Spaces:

luulinh90s
/

Tabular-LLM-Study-Preference

Runtime error

App Files Files Community

luulinh90s commited on Sep 13, 2024

Commit

94b3f06

1 Parent(s): ff51625

update

Browse files

Files changed (4) hide show

app.py +14 -4
templates/attribution.html +76 -0
templates/index.html +3 -2
templates/introduction.html +65 -0

app.py CHANGED Viewed

@@ -113,9 +113,7 @@ def select_balanced_samples(samples):
     except Exception as e:
         logger.exception("Error selecting balanced samples")
         return []
-@app.route('/', methods=['GET', 'POST'])
 def index():
     if request.method == 'POST':
         username = request.form.get('username')
@@ -153,7 +151,9 @@ def index():
         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'])
@@ -266,6 +266,16 @@ def completed(session_id):
         return "An error occurred", 500
 @app.route('/visualizations/<path:filename>')
 def send_visualization(filename):
     logger.info(f"Attempting to serve file: {filename}")

     except Exception as e:
         logger.exception("Error selecting balanced samples")
         return []
+@app.route('/start', methods=['GET', 'POST'])
 def index():
     if request.method == 'POST':
         username = request.form.get('username')
         except Exception as e:
             logger.exception(f"Error in index route: {e}")
             return "An error occurred", 500
+    else:
+        return render_template('index.html')
 @app.route('/experiment/<session_id>', methods=['GET', 'POST'])
         return "An error occurred", 500
+@app.route('/', methods=['GET'])
+def introduction():
+    return render_template('introduction.html')
+@app.route('/attribution', methods=['GET'])
+def attribution():
+    return render_template('attribution.html')
 @app.route('/visualizations/<path:filename>')
 def send_visualization(filename):
     logger.info(f"Attempting to serve file: {filename}")

templates/attribution.html ADDED Viewed

	@@ -0,0 +1,76 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Attribution Explanations in TableQA</title>
+    <style>
+        /* Include your styles here */
+        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;
+            height: 100vh;
+            margin: 0;
+        }
+        .container {
+            text-align: center;
+            background-color: #ffffff;
+            padding: 60px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 60%;
+        }
+        h1 {
+            color: #000000;
+            font-size: 48px;
+            margin-bottom: 30px;
+        }
+        p {
+            font-size: 20px;
+            color: #333;
+            margin-bottom: 30px;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+            margin-bottom: 30px;
+        }
+        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.
+        </p>
+        <p>
+            These explanations help you understand which data points the system considered important when generating the answer.
+        </p>
+        <!-- Include an example image if available -->
+        <!-- <img src="/static/images/attribution_example.png" alt="Attribution Example"> -->
+        <p>
+            For example, if the system answers "The highest sales were in June," the attribution might highlight the "June" row and the "Sales" column in the table.
+        </p>
+        <p>
+            During the experiment, you will compare different methods that provide these explanations.
+        </p>
+        <button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
+    </div>
+</body>
+</html>

templates/index.html CHANGED Viewed

@@ -155,7 +155,8 @@
         <div class="instruction">
             Let's get started! Please input your name, enter a random number as your seed, and select two methods for your experiment.
         </div>
-        <form id="method-form" action="/" method="post" onsubmit="return validateForm();">
             <label for="username">Hi there 👋👋👋 ! What is your name?</label>
             <input type="text" id="username" name="username" required>
             <label for="seed">What is your lucky number? 🍀🍀🍀 </label>
@@ -182,4 +183,4 @@
         </form>
     </div>
 </body>
-</html>

         <div class="instruction">
             Let's get started! Please input your name, enter a random number as your seed, and select two methods for your experiment.
         </div>
+        <!-- Updated form action -->
+        <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>
             <label for="seed">What is your lucky number? 🍀🍀🍀 </label>
         </form>
     </div>
 </body>
+</html>

templates/introduction.html ADDED Viewed

	@@ -0,0 +1,65 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Introduction to Table Question Answering</title>
+    <style>
+        /* Include your styles here */
+        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;
+            height: 100vh;
+            margin: 0;
+        }
+        .container {
+            text-align: center;
+            background-color: #ffffff;
+            padding: 60px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 60%;
+        }
+        h1 {
+            color: #000000;
+            font-size: 48px;
+            margin-bottom: 30px;
+        }
+        p {
+            font-size: 20px;
+            color: #333;
+            margin-bottom: 30px;
+        }
+        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>Welcome to the Table Question Answering Experiment</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>
+        <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>
+        <button onclick="location.href='{{ url_for('attribution') }}'">Next</button>
+    </div>
+</body>
+</html>