update

templates/experiment.html

@@ -67,6 +67,36 @@
         button.reject:hover {
             background-color: #e53935;
         }
+        /* Loader styles */
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: none;
+            z-index: 1000;
+        }
+        .loader {
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #3498db;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            margin-top: -25px;
+            margin-left: -25px;
+            display: none;
+            z-index: 1001;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
@@ -82,15 +112,26 @@
             <iframe src="{{ visualization }}"></iframe>
         </div>
         <div class="buttons">
-            <form action="{{ url_for('feedback') }}" method="post">
+            <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 TRUE</button>
             </form>
-            <form action="{{ url_for('feedback') }}" method="post">
+            <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" class="reject">Model will predict FALSE</button>
             </form>
         </div>
     </div>
+
+    <!-- Loader and overlay -->
+    <div class="overlay" id="overlay"></div>
+    <div class="loader" id="loader"></div>
+
+    <script>
+        function showLoader() {
+            document.getElementById('overlay').style.display = 'block';
+            document.getElementById('loader').style.display = 'block';
+        }
+    </script>
 </body>
 </html>