Update static/index.html

static/index.html

@@ -12,32 +12,53 @@
         <input type="file" id="image" name="image" accept="image/*"><br>
         <label for="question">Question:</label><br>
         <input type="text" id="question" name="question"><br>
-        <button type="submit">Submit</button>
+        <button type="submit" id="submitBtn">Submit</button>
     </form>
 
-    <div id="result">
+    <div id="result" style="display: none;">
         <h2>Result:</h2>
         <p id="caption"></p>
     </div>
 
+    <div id="loading" style="display: none;">
+        <p>Loading...</p>
+    </div>
+
     <script>
         document.getElementById('uploadForm').addEventListener('submit', async function(event) {
             event.preventDefault();
-            
+            showLoadingIndicator();
             let formData = new FormData(this);
-            let response = await fetch('http://localhost:8000/predict/', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (response.ok) {
-                let result = await response.json();
-                document.getElementById('caption').innerText = result.result;
-                document.getElementById('result').style.display = 'block';
-            } else {
+            try {
+                let response = await fetch('http://localhost:8000/predict/', {
+                    method: 'POST',
+                    body: formData
+                });
+                if (response.ok) {
+                    let result = await response.json();
+                    document.getElementById('caption').innerText = result.result;
+                    document.getElementById('result').style.display = 'block';
+                    hideLoadingIndicator();
+                } else {
+                    alert('An error occurred while processing the request.');
+                    hideLoadingIndicator();
+                }
+            } catch (error) {
+                console.error('An error occurred:', error);
                 alert('An error occurred while processing the request.');
+                hideLoadingIndicator();
             }
         });
+
+        function showLoadingIndicator() {
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('submitBtn').disabled = true;
+        }
+
+        function hideLoadingIndicator() {
+            document.getElementById('loading').style.display = 'none';
+            document.getElementById('submitBtn').disabled = false;
+        }
     </script>
 </body>
 </html>