Update app.py

logo animation testing

app.py

@@ -71,19 +71,15 @@ 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"):
-                gr.Markdown(
-                    """
-                    <div id="animated-deepv-logo">
-                        <span class="deepv-char" id="deepv-D">D</span>
-                        <span class="deepv-char" id="deepv-E1">E</span>
-                        <span class="deepv-char" id="deepv-E2">E</span>
-                        <span class="deepv-char" id="deepv-P">P</span>
-                        <span class="deepv-char" id="deepv-V">V</span>
+                # 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">
+                        <div id="deep-part" class="logo-overlay"></div>
                     </div>
-                    """
-                )
+                """)
                 gr.Markdown("**Output**", elem_id="output-title")
 
             with gr.Group():
@@ -157,13 +153,6 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
     demo.css = """
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
 
-        /* Define CSS Variables for colors */
-        :root {
-            --deep-blue: #007bff; /* A nice bright blue */
-            --v-orange: #ffa500;  /* An orange for the V */
-            --text-color: #333;
-        }
-
         #main-title {
             font-family: 'Poppins', sans-serif;
             font-weight: 600;
@@ -176,71 +165,69 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             align-items: center;
             justify-content: center;
             margin-bottom: 10px;
-            height: 80px;
-            position: relative;
+            height: 80px; /* Give space for animation */
         }
 
-        /* Styling for the animated logo container */
-        #animated-deepv-logo {
+        /* Logo container for relative positioning of layers */
+        #logo-container {
             position: relative;
-            width: 150px;
-            height: 70px;
+            width: 150px; /* Set desired width for the logo */
+            height: 70px; /* Set desired height for the logo */
+            overflow: hidden; /* Hide parts that move out */
             display: flex;
             justify-content: center;
             align-items: center;
-            font-family: 'Poppins', sans-serif;
-            font-weight: 800;
-            font-size: 4em;
-            line-height: 1;
-            overflow: hidden;
-            padding-right: 15px;
+            animation: fadeInScale 1.5s ease-out forwards; /* Initial fade-in animation */
         }
 
-        .deepv-char {
+        #deepv-base-logo {
             position: absolute;
-            opacity: 0;
-            transition: all 0.3s ease-out;
-            white-space: nowrap;
-        }
-
-        #deepv-V {
-            color: var(--v-orange);
-            font-size: 1.5em;
-            opacity: 1;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 1;
+            width: 100%;
+            height: 100%;
+            object-fit: contain; /* Ensures the image fits within the container */
+            z-index: 1; /* Base logo layer */
         }
 
-        /* Positioning for DEEP letters relative to V */
-        #deepv-D { top: 50%; left: 30%; color: var(--deep-blue); transform: translate(-50%, -50%); z-index: 2; }
-        #deepv-E1 { top: 50%; left: 45%; color: var(--deep-blue); transform: translate(-50%, -50%); z-index: 2; }
-        #deepv-E2 { top: 50%; left: 60%; color: var(--deep-blue); transform: translate(-50%, -50%); z-index: 2; }
-        #deepv-P { top: 50%; left: 75%; color: var(--deep-blue); transform: translate(-50%, -50%); z-index: 2; }
-
-        /* Animation Keyframes */
-        @keyframes charAppear {
-            0% { opacity: 0; transform: translate(-50%, -100%) scale(0.5); }
-            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
-            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+        #deep-part {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url('DeepV_logo.png'); /* Use the same logo as background */
+            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 */
+            transform: translateY(0); /* Initial state */
+            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
         }
 
-        @keyframes charHopAway {
-            0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-            50% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
-            100% { opacity: 0; transform: translate(-50%, -200%) scale(0.5); }
+        /* Animation for DEEP part hopping away */
+        .deep-hop-away {
+            transform: translateY(-150%) scale(0.8) !important; /* Move up and shrink */
+            opacity: 0 !important;
         }
 
-
+        /* Output Title Styling */
         #output-title {
             margin: 0;
             font-size: 1.2em;
             font-weight: bold;
             margin-left: 20px;
-            animation: fadeInScale 1.5s ease-out forwards;
         }
 
+        /* 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;
         }
@@ -276,75 +263,61 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         }
     """
     
-    # --- JavaScript to run on page load ---
+    # --- JavaScript to trigger animations based on generation status ---
     demo.load(
-        fn=None,
-        inputs=None,
-        outputs=None,
+        None,
+        None,
+        None,
         js="""
-        () => {
-            const chars = ['deepv-D', 'deepv-E1', 'deepv-E2', 'deepv-P'];
-            const V_char = document.getElementById('deepv-V');
-            let charIndex = 0;
-
-            const animateLogo = () => {
-                // Reset all DEEP characters
-                chars.forEach(id => {
-                    const char = document.getElementById(id);
-                    if (char) {
-                        char.style.opacity = '0';
-                        char.style.transform = 'translate(-50%, -50%)';
-                        char.classList.remove('hop-away'); // Remove previous animation class
-                    }
-                });
-
-                // Animate V's position slightly
-                if (V_char) {
-                    V_char.style.transform = 'translate(-50%, -50%) scale(1.1)'; // Slight scale up
-                    setTimeout(() => {
-                        V_char.style.transform = 'translate(-50%, -50%) scale(1)'; // Scale back down
-                    }, 500);
+        function customLogoAnimation() {
+            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');
                 }
+            };
 
-
-                // Animate DEEP characters one by one
-                charIndex = 0;
-                const appearInterval = setInterval(() => {
-                    if (charIndex < chars.length) {
-                        const char = document.getElementById(chars[charIndex]);
-                        if (char) {
-                            char.style.opacity = '1';
-                            char.style.transform = 'translate(-50%, -50%)'; // Reset position
-                            char.style.animation = 'charAppear 0.5s ease-out forwards';
-                        }
-                        charIndex++;
-                    } else {
-                        clearInterval(appearInterval);
-                        // After all DEEP letters appear, wait a bit then make them hop away
-                        setTimeout(() => {
-                            let hopIndex = 0;
-                            const hopInterval = setInterval(() => {
-                                if (hopIndex < chars.length) {
-                                    const char = document.getElementById(chars[hopIndex]);
-                                    if (char) {
-                                        char.style.animation = 'charHopAway 0.8s ease-in forwards';
-                                    }
-                                    hopIndex++;
-                                } else {
-                                    clearInterval(hopInterval);
-                                }
-                            }, 150); // Delay between each letter hopping away
-                        }, 1000); // Delay before letters start hopping away
-                    }
-                }, 200); // Delay between each letter appearing
+            // 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
+                    void deepPart.offsetWidth; 
+                }
             };
 
-            // Run the animation every few seconds
-            setInterval(animateLogo, 4000); // Total animation time ~3s, so repeat every 4s
-            animateLogo(); // Run once immediately on load
+            // 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.
         }
+        customLogoAnimation(); // Call the setup function immediately
         """
     )
+    
+    # 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__":