Update app.py

app.py

@@ -71,12 +71,12 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
                 )
             
         with gr.Column(scale=3):
-            # --- DeepV Logo and "Output" text (Correctly configured gr.Image) ---
+            # --- DeepV Logo with CSS Background Image and animation ---
             with gr.Row(elem_id="logo-and-output-row"):
                 # Container for the logo to allow layered animations
                 gr.HTML("""
                     <div id="logo-container">
-                        <img src="DeepV_logo.png" id="deepv-base-logo" alt="DeepV Logo">
+                        <img src="file=DeepV_logo.png" id="deepv-base-logo" alt="DeepV Logo">
                         <div id="deep-part" class="logo-overlay"></div>
                     </div>
                 """)
@@ -120,7 +120,8 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         fn=show_loading,
         inputs=[],
         outputs=[run_btn, loading_state],
-        show_progress=False
+        show_progress=False,
+        js="window.hopDeepAway()" # 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],
@@ -128,7 +129,8 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
     ).then(
         fn=hide_loading,
         inputs=[],
-        outputs=[run_btn, loading_state]
+        outputs=[run_btn, loading_state],
+        js="window.jumpDeepBackIn()" # Call JS to reset animation when generation finishes
     )
 
     clear_btn.click(fn=lambda: "Ready", outputs=[])
@@ -171,20 +173,19 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         /* Logo container for relative positioning of layers */
         #logo-container {
             position: relative;
-            width: 150px; /* Set desired width for the logo */
-            height: 70px; /* Set desired height for the logo */
-            overflow: hidden; /* Hide parts that move out */
+            width: 250px; /* Set a fixed size for the container */
+            height: 70px;
             display: flex;
             justify-content: center;
             align-items: center;
-            animation: fadeInScale 1.5s ease-out forwards; /* Initial fade-in animation */
+            overflow: hidden;
         }
 
         #deepv-base-logo {
             position: absolute;
             width: 100%;
             height: 100%;
-            object-fit: contain; /* Ensures the image fits within the container */
+            object-fit: contain;
             z-index: 1; /* Base logo layer */
         }
 
@@ -194,26 +195,26 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             left: 0;
             width: 100%;
             height: 100%;
-            background-image: url('DeepV_logo.png'); /* Use the same logo as background */
+            /* CORRECTED: Use a URL that Gradio can resolve */
+            background-image: url('file=DeepV_logo.png');
             background-size: contain;
             background-repeat: no-repeat;
             background-position: center;
             z-index: 2; /* Layer on top for animation */
+            
             /* Use clip-path to show only the "DEEP" blue part */
-            /* These values are highly dependent on the exact dimensions and layout of your logo */
-            /* You might need to adjust these percentages/pixels based on your logo's content area */
-            clip-path: inset(0% 40% 0% 0%); /* Example: covers left 60% of image */
+            /* You may need to adjust these percentages based on your specific logo dimensions */
+            clip-path: inset(0% 40% 0% 0%); 
             transform: translateY(0); /* Initial state */
             transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
         }
 
         /* Animation for DEEP part hopping away */
         .deep-hop-away {
-            transform: translateY(-150%) scale(0.8) !important; /* Move up and shrink */
+            transform: translateY(-150%) scale(0.8) !important;
             opacity: 0 !important;
         }
 
-        /* Output Title Styling */
         #output-title {
             margin: 0;
             font-size: 1.2em;
@@ -221,12 +222,6 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             margin-left: 20px;
         }
 
-        /* Initial fade-in for the whole logo container */
-        @keyframes fadeInScale {
-            0% { opacity: 0; transform: scale(0.8); }
-            100% { opacity: 1; transform: scale(1); }
-        }
-
         /* General UI element styling */
         #verilog-output > label > .label-wrap {
             position: relative;
@@ -273,7 +268,6 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             const deepPart = document.getElementById('deep-part');
 
             // Stage 1: DEEP hops away, V remains (triggered when generation starts)
-            // This function will be called by run_btn.click (before actual generation)
             window.hopDeepAway = () => {
                 if (deepPart) {
                     deepPart.classList.add('deep-hop-away');
@@ -281,43 +275,20 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             };
 
             // Stage 2: DEEP letters jump back in (triggered when generation ends)
-            // This function will be called by run_btn.click (after generation completes)
             window.jumpDeepBackIn = () => {
                 if (deepPart) {
-                    // Remove class to revert to original state
                     deepPart.classList.remove('deep-hop-away');
-                    // Force reflow for re-animation if needed, though remove/add should work
+                    // This line forces the browser to re-render, ensuring the animation resets
                     void deepPart.offsetWidth; 
                 }
             };
 
-            // Initial state: ensure DEEP is visible
-            window.jumpDeepBackIn(); // Call it once on load to ensure it's in place
-
-            // IMPORTANT: Gradio's js event system needs functions defined globally
-            // or accessible through window. This is how the python side will call them.
+            // Call it once on load to ensure it's in place
+            window.jumpDeepBackIn();
         }
-        customLogoAnimation(); // Call the setup function immediately
+        customLogoAnimation();
         """
     )
-    
-    # Modify the run_btn.click to trigger the JS animation functions
-    run_btn.click(
-        fn=show_loading,
-        inputs=[],
-        outputs=[run_btn, loading_state],
-        show_progress=False,
-        js="window.hopDeepAway()" # 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],
-        outputs=[out_code],
-    ).then(
-        fn=hide_loading,
-        inputs=[],
-        outputs=[run_btn, loading_state],
-        js="window.jumpDeepBackIn()" # Call JS to reset animation when generation finishes
-    )
 
 
 if __name__ == "__main__":