Update app.py

app.py

@@ -114,8 +114,66 @@ with gr.Blocks() as demo:
     
     gr.Examples(examples=examples, inputs=[h_text, l_text], label="Example sequences")
     btn = gr.Button("Predict Structure")
+    
+    progress_bar = gr.HTML("""
+    <div id="progress" style="display: none; margin: 20px 0;">
+        <div style="width: 100%; background: #f0f0f0; border-radius: 5px;">
+            <div id="progress-bar" style="height: 20px; width: 0%; background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%); border-radius: 5px; transition: width 0.5s;">
+                <div style="text-align: center; color: white; line-height: 20px;">Processing...</div>
+            </div>
+        </div>
+    </div>
+    """)
+    
     output_html = gr.HTML()
-    btn.click(pred_seq, inputs=[h_text, l_text], outputs=output_html)
+    
+    js_animation = """
+    <script>
+    function startProgress() {
+        const progress = document.getElementById("progress");
+        const progressBar = document.getElementById("progress-bar");
+        progress.style.display = "block";
+        
+        let width = 0;
+        const interval = setInterval(() => {
+            if (width >= 90) {
+                clearInterval(interval);
+                return;
+            }
+            width += 5;
+            progressBar.style.width = width + "%";
+        }, 500);
+        
+        return interval;
+    }
+    </script>
+    """
+    
+    gr.HTML(js_animation)
+    
+    def wrapper_pred_seq(h_seq, l_seq):
+        import time
+        progress_js = """
+        <script>
+            const interval = startProgress();
+        </script>
+        """
+        
+        result = pred_seq(h_seq, l_seq)
+        
+        complete_js = """
+        <script>
+            if (typeof interval !== 'undefined') clearInterval(interval);
+            document.getElementById("progress-bar").style.width = "100%";
+            setTimeout(() => {
+                document.getElementById("progress").style.display = "none";
+            }, 1000);
+        </script>
+        """
+        
+        return progress_js + result + complete_js
+    
+    btn.click(wrapper_pred_seq, inputs=[h_text, l_text], outputs=output_html)
 
 if __name__ == "__main__":
     demo.launch(show_error=True, server_name="0.0.0.0")