Tabular-LLM-Study-Forward-Simulation

Sleeping

App Files Files Community

luulinh90s commited on Sep 9, 2024

Commit

69d37ef

1 Parent(s): 9d43e30

update

Browse files

Files changed (2) hide show

templates/experiment.html +72 -8
templates/index.html +76 -6

templates/experiment.html CHANGED Viewed

@@ -3,26 +3,90 @@
 <head>
     <title>Experiment</title>
     <style>
-        /* ... (keep existing styles) ... */
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <script>
-        // ... (keep existing script) ...
-    </script>
 </head>
 <body>
     <div class="container">
-        <h1>{{ sample_id + 1 }} / 10</h1>
-        <p><strong>Task description:</strong> {{ statement }}</p>
         <div class="visualization-container">
             <iframe src="{{ visualization }}"></iframe>
         </div>
         <div class="buttons">
-            <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
                 <input type="hidden" name="username" value="{{ username }}">
                 <button type="submit" name="prediction" value="TRUE">Predict TRUE</button>
             </form>
-            <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
                 <input type="hidden" name="username" value="{{ username }}">
                 <button type="submit" name="prediction" value="FALSE" class="reject">Predict FALSE</button>
             </form>

 <head>
     <title>Experiment</title>
     <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            font-family: 'Roboto', sans-serif;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            width: 100vw;
+            background-color: #ffffff;
+        }
+        .header {
+            padding: 20px;
+            background-color: #f0f0f0;
+            text-align: center;
+        }
+        h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        .task-description {
+            padding: 10px 20px;
+            background-color: #e0e0e0;
+            text-align: center;
+        }
+        .visualization-container {
+            flex-grow: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .buttons {
+            display: flex;
+            justify-content: space-around;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        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;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button.reject {
+            background-color: #f44336;
+        }
+        button.reject:hover {
+            background-color: #e53935;
+        }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="container">
+        <div class="header">
+            <h1>{{ sample_id + 1 }} / 10</h1>
+        </div>
+        <div class="task-description">
+            <p><strong>Task description:</strong> {{ statement }}</p>
+        </div>
         <div class="visualization-container">
             <iframe src="{{ visualization }}"></iframe>
         </div>
         <div class="buttons">
+            <form action="{{ url_for('feedback') }}" method="post">
                 <input type="hidden" name="username" value="{{ username }}">
                 <button type="submit" name="prediction" value="TRUE">Predict TRUE</button>
             </form>
+            <form action="{{ url_for('feedback') }}" method="post">
                 <input type="hidden" name="username" value="{{ username }}">
                 <button type="submit" name="prediction" value="FALSE" class="reject">Predict FALSE</button>
             </form>

templates/index.html CHANGED Viewed

@@ -40,7 +40,48 @@
             border-radius: 5px;
             font-size: 18px;
         }
-        button {
             background-color: #4CAF50;
             color: white;
             padding: 15px 30px;
@@ -51,32 +92,61 @@
             transition: background-color 0.3s ease;
             margin-top: 20px;
         }
-        button:hover {
             background-color: #45a049;
         }
     </style>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <script>
         function validateForm() {
             var username = document.getElementById('username').value;
             var seed = document.getElementById('seed').value;
-            if (!username || !seed) {
-                alert("Please fill in all fields.");
                 return false;
             }
             return true;
         }
     </script>
 </head>
 <body>
     <div class="container">
         <h1>Trustworthy LLMs for Table QA</h1>
-        <form id="start-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>
             <input type="number" id="seed" name="seed" required>
             <button type="submit">Start Experiment</button>
         </form>
     </div>

             border-radius: 5px;
             font-size: 18px;
         }
+        .method-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            gap: 20px;
+        }
+        .method-button {
+            width: calc(50% - 10px);
+            padding: 15px;
+            font-size: 20px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, border 0.3s ease;
+            border: 2px solid transparent;
+            font-weight: bold;
+            text-align: center;
+        }
+        .method-button.cot {
+            background-color: #e0f0ff;
+            color: #1e90ff;
+        }
+        .method-button.pos {
+            background-color: #ffcc80;
+            color: #e65100;
+        }
+        .method-button.cot-ext {
+            background-color: #e8f5e9;
+            color: #4caf50;
+        }
+        .method-button.pos-ext {
+            background-color: #fff3e0;
+            color: #ff9800;
+        }
+        .method-button:hover {
+            opacity: 0.8;
+        }
+        .method-button.selected {
+            border-color: #000000;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        }
+        button[type="submit"] {
             background-color: #4CAF50;
             color: white;
             padding: 15px 30px;
             transition: background-color 0.3s ease;
             margin-top: 20px;
         }
+        button[type="submit"]:hover {
             background-color: #45a049;
         }
     </style>
     <script>
+        function selectMethod(method) {
+            document.getElementById('method').value = method;
+            var buttons = document.getElementsByClassName('method-button');
+            for (var i = 0; i < buttons.length; i++) {
+                buttons[i].classList.remove('selected');
+            }
+            document.querySelector(`.${method.toLowerCase().replace('-', '-')}`).classList.add('selected');
+        }
         function validateForm() {
             var username = document.getElementById('username').value;
             var seed = document.getElementById('seed').value;
+            var method = document.getElementById('method').value;
+            if (!username || !seed || !method) {
+                alert("Please fill in all fields and select a method.");
                 return false;
             }
             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>Trustworthy LLMs for Table QA</h1>
+        <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>
             <input type="number" id="seed" name="seed" required>
+            <input type="hidden" id="method" name="method" required>
+            <div class="method-buttons">
+                <div class="method-button cot" onclick="selectMethod('Chain-of-Table')">
+                    Chain-of-Table
+                </div>
+                <div class="method-button pos" onclick="selectMethod('Plan-of-SQLs')">
+                    Plan-of-SQLs
+                </div>
+                <div class="method-button cot-ext" onclick="selectMethod('Chain-of-Table-Ext')">
+                    Chain-of-Table-Ext
+                </div>
+                <div class="method-button pos-ext" onclick="selectMethod('Plan-of-SQLs-Ext')">
+                    Plan-of-SQLs-Ext
+                </div>
+            </div>
             <button type="submit">Start Experiment</button>
         </form>
     </div>