Update app.py

app.py

@@ -71,7 +71,7 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
                 )
             
         with gr.Column(scale=3):
-            # --- DeepV Logo with CSS Background Image and animation ---
+            # --- DeepV Logo and "Output" text (Correctly configured gr.Image) ---
             with gr.Row(elem_id="logo-and-output-row"):
                 # Container for the logo to allow layered animations
                 gr.HTML("""
@@ -121,7 +121,12 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         inputs=[],
         outputs=[run_btn, loading_state],
         show_progress=False,
-        js="window.hopDeepAway()" # Call JS to start animation when button is clicked
+        js="""
+            const deepPart = document.getElementById('deep-part');
+            if (deepPart) {
+                deepPart.classList.add('deep-hop-away');
+            }
+        """ # Call JS to start animation when button is clicked
     ).then(
         fn=generate_only,
         inputs=[spec, use_rag, top_k, model_choice, api_key, temperature_tb, top_p_tb, max_new_tokens_tb],
@@ -130,7 +135,14 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         fn=hide_loading,
         inputs=[],
         outputs=[run_btn, loading_state],
-        js="window.jumpDeepBackIn()" # Call JS to reset animation when generation finishes
+        js="""
+            const deepPart = document.getElementById('deep-part');
+            if (deepPart) {
+                deepPart.classList.remove('deep-hop-away');
+                // This line forces the browser to re-render, ensuring the animation resets
+                void deepPart.offsetWidth; 
+            }
+        """ # Call JS to reset animation when generation finishes
     )
 
     clear_btn.click(fn=lambda: "Ready", outputs=[])
@@ -257,38 +269,6 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             100% { background-color: #e6f2ff; }
         }
     """
-    
-    # --- JavaScript to trigger animations based on generation status ---
-    demo.load(
-        None,
-        None,
-        None,
-        js="""
-        function customLogoAnimation() {
-            const deepPart = document.getElementById('deep-part');
-
-            // Stage 1: DEEP hops away, V remains (triggered when generation starts)
-            window.hopDeepAway = () => {
-                if (deepPart) {
-                    deepPart.classList.add('deep-hop-away');
-                }
-            };
-
-            // Stage 2: DEEP letters jump back in (triggered when generation ends)
-            window.jumpDeepBackIn = () => {
-                if (deepPart) {
-                    deepPart.classList.remove('deep-hop-away');
-                    // This line forces the browser to re-render, ensuring the animation resets
-                    void deepPart.offsetWidth; 
-                }
-            };
-
-            // Call it once on load to ensure it's in place
-            window.jumpDeepBackIn();
-        }
-        customLogoAnimation();
-        """
-    )
 
 
 if __name__ == "__main__":