Update app.py

logo loading and animation testing

app.py

@@ -71,19 +71,18 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
                 )
             
         with gr.Column(scale=3):
-            # --- DeepV Logo and "Output" text ---
+            # --- DeepV Logo with CSS Background Image and animation ---
             with gr.Row(elem_id="logo-and-output-row"):
-                gr.Image(
-                    "DeepV_logo.png",
-                    height=70, # Increased size
-                    width=70,  # Increased size
-                    show_label=False,
-                    show_download_button=False,
-                    show_share_button=False,
-                    container=False, 
-                    interactive=False, 
-                    elem_id="deepv-logo"
-                )
+                # The div for the logo - the animation will be applied here
+                gr.HTML("""
+                    <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>
+                    </div>
+                """)
                 gr.Markdown("**Output**", elem_id="output-title")
 
             with gr.Group():
@@ -157,47 +156,92 @@ 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;
             letter-spacing: 1px;
         }
 
-        /* Styling for the logo and "Output" title */
+        /* Logo and Output Row Layout */
         #logo-and-output-row {
             display: flex;
             align-items: center; /* Vertically align items */
             justify-content: center; /* Horizontally center contents */
             margin-bottom: 10px; /* Space between logo/title and output textbox */
+            height: 80px; /* Give it enough height for the animation */
+            position: relative; /* For absolute positioning of letters */
+        }
+
+        /* Styling for the animated logo container */
+        #animated-deepv-logo {
+            position: relative;
+            width: 150px; /* Adjust width to fit "DEEPV" */
+            height: 70px; /* Adjust height to fit "DEEPV" */
+            display: flex; /* Use flex to align characters (initial state) */
+            justify-content: center;
+            align-items: center;
+            font-family: 'Poppins', sans-serif;
+            font-weight: 800;
+            font-size: 4em; /* Make the V bigger */
+            line-height: 1;
+            overflow: hidden; /* Hide parts that are off-screen during animation */
+            padding-right: 15px; /* Adjust for V overlap */
         }
 
-        #deepv-logo {
-            animation: fadeInScale 1.5s ease-out forwards; /* Apply animation */
+        .deepv-char {
+            position: absolute; /* Position characters independently */
+            opacity: 0;
+            transition: all 0.3s ease-out; /* Smooth transitions for non-animated changes */
+            white-space: nowrap;
         }
 
-        /* NEW: Hide the expand icon specifically */
-        #deepv-logo .zoom-icon {
-            display: none !important;
+        #deepv-V {
+            color: var(--v-orange);
+            font-size: 1.5em; /* Make V even bigger */
+            opacity: 1; /* V is always present */
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%); /* Center the V */
+            z-index: 1; /* V is behind other letters initially */
         }
 
+        /* 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); }
+        }
+
+        @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); } /* Hop upwards and fade */
+        }
+
+
+        /* Output Title Styling */
         #output-title {
             margin: 0; /* Remove default margin from Markdown to prevent offset */
-            font-size: 1.2em; /* Adjust font size if needed */
+            font-size: 1.2em;
             font-weight: bold;
+            margin-left: 20px; /* Adjust spacing from the logo */
+            animation: fadeInScale 1.5s ease-out forwards; /* Keep fade animation */
         }
 
-        /* Keyframes for the logo animation */
-        @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;
         }
@@ -233,6 +277,77 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         }
     """
 
+    # --- JavaScript for the custom animation ---
+    demo.load(
+        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);
+                }
+
+
+                // 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
+            };
+
+            // Run the animation every few seconds
+            setInterval(animateLogo, 4000); // Total animation time ~3s, so repeat every 4s
+            animateLogo(); // Run once immediately on load
+        }
+        """
+    )
+
+
 if __name__ == "__main__":
     if 'agent_module' in locals():
         demo.launch()