UI change

app.py

@@ -63,7 +63,7 @@ def full_pipeline(image):
 
 # ------------------ GRADIO UI ------------------
 # =========================
-#  CSS TÙY CHỈNH GIAO DIỆN
+#  CSS
 # =========================
 custom_css = """
 #main-title {
@@ -122,7 +122,7 @@ custom_css = """
 """
 
 # =========================
-#  ỨNG DỤNG GRADIO UI
+# GRADIO UI
 # =========================
 with gr.Blocks() as demo:
 
@@ -178,10 +178,14 @@ with gr.Blocks() as demo:
 
     # ---- JS ANIMATION FOR PROGRESS BAR
     animate_js = """
-    function(p){
+    () => {
         let bar = document.getElementById('loading-bar');
-        if (bar){
-            bar.style.width = (p * 100) + "%";
+        if (bar) {
+            bar.style.transition = "width 0.35s ease-out";
+            bar.style.width = "100%";
+
+            // Reset after finished
+            setTimeout(() => { bar.style.width = "0%"; }, 1200);
         }
     }
     """
@@ -190,7 +194,8 @@ with gr.Blocks() as demo:
         full_pipeline,
         inputs=img_input,
         outputs=[cls_output, explain_output],
-        progress=animate_js
+        js=animate_js
     )
 
+
 demo.launch(css=custom_css)