Update static/index.html

static/index.html

@@ -4,13 +4,39 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image Inference</title>
+    <style>
+        /* CSS for the loading spinner */
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 4px solid #3498db;
+            width: 30px;
+            height: 30px;
+            -webkit-animation: spin 2s linear infinite; /* Safari */
+            animation: spin 2s linear infinite;
+            margin: 10px auto;
+        }
+
+        @-webkit-keyframes spin {
+            0% { -webkit-transform: rotate(0deg); }
+            100% { -webkit-transform: rotate(360deg); }
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </head>
 <body>
     <h1>Image Inference</h1>
-    <form action="/inference/" method="post" enctype="multipart/form-data">
+    <form id="inferenceForm" action="/inference/" method="post" enctype="multipart/form-data">
         <label for="file">Upload Image:</label>
         <input type="file" id="file" name="file" accept="image/*">
         <br>
+        <!-- Add image preview -->
+        <img id="imagePreview" src="#" alt="Image Preview" style="display: none; max-width: 300px; margin-top: 10px;">
+        <br>
         <label for="mode">Select Mode:</label>
         <select id="mode" name="mode">
             <option value="best">Best Mode</option>
@@ -24,26 +50,56 @@
         <button type="submit">Submit</button>
     </form>
     
-    <div id="results">
-        <!-- Inference results will be displayed here -->
+    <div id="results" style="position: relative;">
+        <!-- Inference results or error message will be displayed here -->
+        <div id="loader" class="loader" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;"></div>
     </div>
     
     <script>
-        document.querySelector('form').addEventListener('submit', async function(event) {
+        // JavaScript code for displaying image preview
+        document.getElementById('file').addEventListener('change', function() {
+            const file = this.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    const imgPreview = document.getElementById('imagePreview');
+                    imgPreview.src = event.target.result;
+                    imgPreview.style.display = 'block';
+                }
+                reader.readAsDataURL(file);
+            }
+        });
+        
+        // JavaScript code for form submission and displaying inference results or error message
+        document.getElementById('inferenceForm').addEventListener('submit', async function(event) {
             event.preventDefault();
+            // Show loading spinner
+            document.getElementById('loader').style.display = 'block';
             
             const formData = new FormData(this);
-            const response = await fetch('/inference/', {
-                method: 'POST',
-                body: formData
-            });
-            
-            const data = await response.json();
-            const resultsDiv = document.getElementById('results');
-            resultsDiv.innerHTML = '<h2>Inference Results</h2>';
-            data.prompt_results.forEach(result => {
-                resultsDiv.innerHTML += '<p>' + result + '</p>';
-            });
+            try {
+                const response = await fetch('/inference/', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Error occurred while processing the request.');
+                }
+                
+                const data = await response.json();
+                const resultsDiv = document.getElementById('results');
+                resultsDiv.innerHTML = '<h2>Inference Results</h2>';
+                data.prompt_results.forEach(result => {
+                    resultsDiv.innerHTML += '<p>' + result + '</p>';
+                });
+            } catch (error) {
+                const resultsDiv = document.getElementById('results');
+                resultsDiv.innerHTML = '<p style="color: red;">An error occurred: ' + error.message + '</p>';
+            } finally {
+                // Hide loading spinner after receiving results or encountering an error
+                document.getElementById('loader').style.display = 'none';
+            }
         });
     </script>
 </body>