update

templates/experiment.html

@@ -12,29 +12,29 @@
         .container {
             display: flex;
             flex-direction: column;
-            min-height: 100vh;
+            height: 100vh;
             width: 100vw;
             background-color: #ffffff;
         }
         .header {
-            padding: 20px;
+            padding: 10px;
             background-color: #f0f0f0;
             text-align: center;
         }
         h1 {
             margin: 0;
-            font-size: 24px;
+            font-size: 20px;
         }
         .task-description {
-            padding: 10px 20px;
+            padding: 10px;
             background-color: #e0e0e0;
             text-align: center;
         }
         .highlight {
-            font-size: 1.2em;
+            font-size: 1.1em;
             font-weight: bold;
             color: #4CAF50;
-            margin-top: 10px;
+            margin-top: 5px;
         }
         .visualization-container {
             flex-grow: 1;
@@ -51,33 +51,28 @@
         .buttons {
             display: flex;
             justify-content: space-around;
-            padding: 20px;
+            padding: 10px;
             background-color: #f0f0f0;
         }
         button {
-            background-color: #4CAF50;
+            background-color: #808080;
             color: white;
-            padding: 15px 30px;
+            padding: 10px 20px;
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 18px;
+            font-size: 16px;
             transition: background-color 0.3s ease;
         }
         button:hover {
-            background-color: #45a049;
-        }
-        button.reject {
-            background-color: #f44336;
-        }
-        button.reject:hover {
-            background-color: #e53935;
+            background-color: #707070;
         }
         .bottom-question {
             text-align: center;
-            padding: 20px;
+            padding: 10px;
             background-color: #e0e0e0;
             font-weight: bold;
+            font-size: 14px;
         }
         /* Loader styles */
         .overlay {
@@ -118,9 +113,8 @@
             <h1>{{ sample_id + 1 }} / 10</h1>
         </div>
         <div class="task-description">
-            <p><strong>Task description:</strong> {{ statement | safe }}</p>
-            <p class="highlight">Based on the explanation provided below, what do you think the AI model will predict?
-            Will it predict the statement as correct or wrong?</p>
+            <p><strong>Task:</strong> {{ statement | safe }}</p>
+            <p class="highlight">Based on the explanation below, will the AI model predict the statement as correct or wrong?</p>
         </div>
         <div class="visualization-container">
             <iframe src="{{ visualization }}"></iframe>
@@ -131,11 +125,11 @@
         <div class="buttons">
             <form action="{{ url_for('feedback') }}" method="post" onsubmit="showLoader()">
                 <input type="hidden" name="session_id" value="{{ session_id }}">
-                <button type="submit" name="prediction" value="TRUE">Model will predict the Statement as correct.</button>
+                <button type="submit" name="prediction" value="TRUE">Model predicts: Correct</button>
             </form>
             <form action="{{ url_for('feedback') }}" method="post" onsubmit="showLoader()">
                 <input type="hidden" name="session_id" value="{{ session_id }}">
-                <button type="submit" name="prediction" value="FALSE">Model will predict the Statement as wrong.</button>
+                <button type="submit" name="prediction" value="FALSE">Model predicts: Wrong</button>
             </form>
         </div>
     </div>