Update app.py

logo animation debugging JS issues right now

app.py

@@ -73,8 +73,8 @@ 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 ---
             with gr.Row(elem_id="logo-and-output-row"):
-                # The div for the logo - the animation will be applied here
-                gr.HTML("""
+                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>
@@ -82,7 +82,8 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
                         <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():
@@ -172,44 +173,44 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         /* 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 */
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 10px;
+            height: 80px;
+            position: relative;
         }
 
         /* 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) */
+            width: 150px;
+            height: 70px;
+            display: flex;
             justify-content: center;
             align-items: center;
             font-family: 'Poppins', sans-serif;
             font-weight: 800;
-            font-size: 4em; /* Make the V bigger */
+            font-size: 4em;
             line-height: 1;
-            overflow: hidden; /* Hide parts that are off-screen during animation */
-            padding-right: 15px; /* Adjust for V overlap */
+            overflow: hidden;
+            padding-right: 15px;
         }
 
         .deepv-char {
-            position: absolute; /* Position characters independently */
+            position: absolute;
             opacity: 0;
-            transition: all 0.3s ease-out; /* Smooth transitions for non-animated changes */
+            transition: all 0.3s ease-out;
             white-space: nowrap;
         }
 
         #deepv-V {
             color: var(--v-orange);
-            font-size: 1.5em; /* Make V even bigger */
-            opacity: 1; /* V is always present */
+            font-size: 1.5em;
+            opacity: 1;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%); /* Center the V */
-            z-index: 1; /* V is behind other letters initially */
+            transform: translate(-50%, -50%);
+            z-index: 1;
         }
 
         /* Positioning for DEEP letters relative to V */
@@ -228,20 +229,18 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         @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 */
+            100% { opacity: 0; transform: translate(-50%, -200%) scale(0.5); }
         }
 
 
-        /* Output Title Styling */
         #output-title {
-            margin: 0; /* Remove default margin from Markdown to prevent offset */
+            margin: 0;
             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 */
+            margin-left: 20px;
+            animation: fadeInScale 1.5s ease-out forwards;
         }
 
-        /* General UI element styling */
         #verilog-output > label > .label-wrap {
             position: relative;
         }
@@ -276,13 +275,13 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             100% { background-color: #e6f2ff; }
         }
     """
-
-    # --- JavaScript for the custom animation ---
+    
+    # --- JavaScript to run on page load ---
     demo.load(
-        None,
-        None,
-        None,
-        _js="""
+        fn=None,
+        inputs=None,
+        outputs=None,
+        js="""
         () => {
             const chars = ['deepv-D', 'deepv-E1', 'deepv-E2', 'deepv-P'];
             const V_char = document.getElementById('deepv-V');