Update app.py

app.py

@@ -71,24 +71,27 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
                 )
             
         with gr.Column(scale=3):
-            # The logo and copy button are now managed with a single HTML block
-            gr.HTML("""
-                <div id="output-container">
-                    <img src="file=DeepV_logo.png" id="deepv-logo" alt="DeepV Logo">
-                </div>
-            """)
-            
-            # The output textbox is a standalone component
-            out_code = gr.Textbox(
-                label="Generated Verilog",
-                lines=28,
-                interactive=False,
-                placeholder="// Your Verilog code will appear here",
-                elem_id="verilog-output"
-            )
-
-            copy_button = gr.Button("📋", variant="secondary", elem_id="copy-button")
+            # --- DeepV Logo and "Output" text ---
+            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="file=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():
+                out_code = gr.Textbox(
+                    label="Generated Verilog",
+                    lines=28,
+                    interactive=False,
+                    placeholder="// Your Verilog code will appear here",
+                    elem_id="verilog-output"
+                )
+                copy_button = gr.Button("📋", variant="secondary", elem_id="copy-button")
+            
             with gr.Row():
                 clear_btn = gr.ClearButton(
                     value="Clear All",
@@ -107,25 +110,43 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
     def copy_to_clipboard_fn(text):
         return text
 
-    def show_loading_no_anim():
+    def show_loading():
         return [gr.update(visible=False), gr.update(visible=True)]
 
-    def hide_loading_no_anim():
+    def hide_loading():
         return [gr.update(visible=True), gr.update(visible=False)]
 
     run_btn.click(
-        fn=show_loading_no_anim,
+        fn=show_loading,
         inputs=[],
         outputs=[run_btn, loading_state],
         show_progress=False,
+        js="""
+            (e) => {
+                var 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],
         outputs=[out_code],
     ).then(
-        fn=hide_loading_no_anim,
+        fn=hide_loading,
         inputs=[],
         outputs=[run_btn, loading_state],
+        js="""
+            (e) => {
+                var 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=[])
@@ -137,12 +158,13 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
         outputs=[],
         js="""
             (text) => {
-                const el = document.createElement('textarea');
-                el.value = text;
-                document.body.appendChild(el);
-                el.select();
-                document.execCommand('copy');
-                document.body.removeChild(el);
+                (function(el) {
+                    el.value = text;
+                    document.body.appendChild(el);
+                    el.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(el);
+                })(document.createElement('textarea'));
             }
         """
     )
@@ -156,32 +178,78 @@ with gr.Blocks(title="DeepV for RTL (Model-Agnostic)", theme=gr.themes.Soft()) a
             letter-spacing: 1px;
         }
 
-        /* Container for logo and copy button */
-        #output-container {
+        /* Logo and Output Row Layout */
+        #logo-and-output-row {
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             margin-bottom: 10px;
+            height: 80px; /* Give space for animation */
+        }
+
+        /* Logo container for relative positioning of layers */
+        #logo-container {
             position: relative;
+            width: 250px; /* Set a fixed size for the container */
+            height: 70px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+
+        #deepv-base-logo {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            z-index: 1; /* Base logo layer */
+        }
+
+        #deep-part {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            /* 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 */
+            /* 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;
         }
 
-        #deepv-logo {
-            width: 300px;
-            height: 85px;
+        /* Animation for DEEP part hopping away */
+        .deep-hop-away {
+            transform: translateY(-150%) scale(0.8) !important;
+            opacity: 0 !important;
+        }
+
+        #output-title {
+            margin: 0;
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-left: 20px;
         }
 
         /* General UI element styling */
-        #verilog-output {
+        #verilog-output > label > .label-wrap {
             position: relative;
-            padding-top: 50px; /* Add space for the copy button */
         }
-        
+
         #copy-button {
             position: absolute;
-            top: -20px;
-            right: 0px;
+            top: 20px;
+            right: 10px;
             z-index: 1000;
-            background-color: transparent;
+            background-color: #F0F0F0;
             color: #333;
             border-radius: 5px;
             border: none;