Upload ui.html

templates/ui.html

@@ -28,6 +28,10 @@
     <input type="submit" value="Convert Voice">
 </form>
 
+<!-- Status Display -->
+<h3>Processing Status:</h3>
+<div id="statusDisplay">Waiting for submission...</div>
+
 <!-- Processed Audio Playback -->
 <h3>Processed Audio:</h3>
 <audio id="processedAudio" controls>
@@ -45,34 +49,46 @@ $(document).ready(function() {
             url: '/convert_voice',
             type: 'POST',
             data: formData,
-			 timeout: 180000
+            timeout: 180000,
             success: function(data) {
                 if (data.audio_id) {
-                    // Update the source of the processed audio element
+                    // Start polling for status
+                    updateTaskStatus(data.audio_id);
                     $('#processedAudio source').attr('src', '/get_processed_audio/' + data.audio_id);
                     $('#processedAudio')[0].load();
-                    $('#processedAudio')[0].play();
                 } else if (data.error) {
-                    // Display error message from the server
                     alert(data.error);
                 }
             },
-            error: function(xhr, status, error) {
-                // Handle different types of error status codes
-                if(xhr.status === 429) {
-                    alert("Too many requests, please try again later.");
-                } else if(xhr.status === 400) {
-                    alert("Bad request. Please check the input and try again.");
-                } else {
-                    // Generic error message for other statuses
-                    alert("An error occurred: " + xhr.status + " " + error);
-                }
-            },
             cache: false,
             contentType: false,
-            processData: false
+            processData: false,
+            error: function(xhr) {
+                // Handle errors
+                alert("Error: " + xhr.responseText);
+            }
         });
     });
+
+    function updateTaskStatus(audioId) {
+        $.ajax({
+            url: `/status/${audioId}`,
+            type: 'GET',
+            success: function(data) {
+                $('#statusDisplay').text(`${data.status} - ${data.percentage}% complete`);
+                if (data.status !== "Completed" && data.status !== "Failed") {
+                    setTimeout(() => updateTaskStatus(audioId), 1000); // Poll every second
+                } else {
+                    if (data.status === "Completed") {
+                        $('#processedAudio')[0].play();
+                    }
+                }
+            },
+            error: function(xhr) {
+                $('#statusDisplay').text("Failed to get status.");
+            }
+        });
+    }
 });
 </script>