Tabular-LLM-Study-Preference-Ranking

Runtime error

App Files Files Community

luulinh90s commited on Oct 24, 2024

Commit

e75202e

1 Parent(s): 465850b

update

Browse files

Files changed (2) hide show

templates/index.html +9 -1
templates/introduction.html +113 -13

templates/index.html CHANGED Viewed

@@ -54,13 +54,21 @@
         button:hover {
             background-color: #45a049;
         }
     </style>
     <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">
             <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>

         button:hover {
             background-color: #45a049;
         }
+        .error-message {
+            color: #ff0000;
+            margin-top: 10px;
+            font-size: 16px;
+        }
     </style>
     <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>
+        {% if error %}
+        <div class="error-message">{{ error }}</div>
+        {% endif %}
+        <form id="method-form" action="{{ url_for('index') }}" method="post">
             <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>

templates/introduction.html CHANGED Viewed

@@ -200,21 +200,121 @@
         </div>
         <div class="outro">
-            <h2>Explanation Ranking Task</h2>
-            <p>
-<!--                Given an input statement, an Artificial Intelligence (AI) model will output either TRUE or FALSE.-->
-<!--                <strong>Your job in this Simulation task is to use the AI's explanation to guess the machine response.</strong>-->
-<!--                Specifically, please choose which response (Statement is TRUE/ Statement is FALSE) model would output regardless of whether you think that response is correct or not.-->
-                You are given explanations from <strong>4</strong> different methods for an input.
-                Please rank these explanations based on their clarity, coherence, and helpfulness in understanding the model's reasoning.
-                Clarity Definition: How easy is the explanation to understand? Is the language clear and straightforward?
-                Coherence Definition: Does the explanation logically flow and make sense as a whole? Are the ideas well-connected?
-                Helpfulness in Understanding the Model's Reasoning Definition: How effectively does the explanation help you understand why the model made its decision? Does it reveal the reasoning process?
-                Provide the ranking from best to worst (1-best and 4-worst).
-            </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 class="outro">
+            <h2>Explanation Ranking</h2>
+            <div class="task-description">
+                <p class="main-instruction">
+                    You are given explanations from <strong>4</strong> different methods for an input.
+                    Please rank these explanations based on their clarity, coherence, and helpfulness.
+                </p>
+                <div class="criteria-list">
+                    <div class="criterion">
+                        <span class="criterion-name">Clarity:</span>
+                        <span class="criterion-def">How easy is the explanation to understand? Is the language clear and straightforward?</span>
+                    </div>
+                    <div class="criterion">
+                        <span class="criterion-name">Coherence:</span>
+                        <span class="criterion-def">Does the explanation logically flow and make sense as a whole? Are the ideas well-connected?</span>
+                    </div>
+                    <div class="criterion">
+                        <span class="criterion-name">Helpfulness:</span>
+                        <span class="criterion-def">How effectively does the explanation help you understand why the model made its decision? Does it reveal the reasoning process?</span>
+                    </div>
+                </div>
+                <div class="ranking-instruction">
+                    <strong>Your Task:</strong> Provide the ranking from best (1) to worst (4) for each explanation method.
+                </div>
+            </div>
         </div>
+        <style>
+            .outro {
+                background-color: #f8f9fa;
+                padding: 25px;
+                border-radius: 8px;
+                margin: 20px 0;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .outro h2 {
+                color: #2c3e50;
+                font-size: 24px;
+                margin-bottom: 20px;
+                border-bottom: 2px solid #4CAF50;
+                padding-bottom: 10px;
+            }
+            .task-description {
+                line-height: 1.6;
+            }
+            .main-instruction {
+                font-size: 18px;
+                color: #333;
+                margin-bottom: 20px;
+            }
+            .criteria-list {
+                background-color: white;
+                padding: 20px;
+                border-radius: 6px;
+                margin: 15px 0;
+                border-left: 4px solid #4CAF50;
+            }
+            .criterion {
+                margin-bottom: 15px;
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+            }
+            .criterion:last-child {
+                margin-bottom: 0;
+            }
+            .criterion-name {
+                font-weight: bold;
+                color: #2c3e50;
+                font-size: 17px;
+            }
+            .criterion-def {
+                color: #555;
+                padding-left: 15px;
+            }
+            .ranking-instruction {
+                margin-top: 20px;
+                padding: 15px;
+                background-color: #e8f5e9;
+                border-radius: 6px;
+                font-size: 17px;
+                color: #2c3e50;
+            }
+            @media (max-width: 768px) {
+                .outro {
+                    padding: 15px;
+                }
+                .criterion {
+                    margin-bottom: 20px;
+                }
+                .criterion-name {
+                    margin-bottom: 5px;
+                }
+                .criterion-def {
+                    padding-left: 10px;
+                }
+            }
+        </style>
         <div class="button-container">
             <!-- This button leads to the Attribution Explanations page -->
             <a href="{{ url_for('attribution') }}" class="next-button">Next</a>