Update app.py

app.py

@@ -273,39 +273,22 @@ with demo:
         )
 
     ###############################
-    # Popup HTML
-    gr.HTML("""
-    <div id="popup-overlay" style="display: none;">
-        <div id="popup-box">
-            <h3>ℹ️ Notice</h3>
-            <p>Grabaketak ez dira gordetzen eta automatikoki ezabatzen dira.<br>
-            No se guardan las grabaciones y se eliminan automáticamente.<br>
-            The recordings are not saved and are automatically removed.</p>
-            <button id="popup-button">OK</button>
-        </div>
-    </div>
-    """)
-
-    # Inline JavaScript to show on load, hide on click
-    gr.HTML("""
-    <script>
-    window.addEventListener('DOMContentLoaded', function () {
-        const popup = document.getElementById("popup-overlay");
-        const button = document.getElementById("popup-button");
-
-        if (popup) {
-            popup.style.display = "flex"; // Show popup explicitly
-        }
-
-        if (button) {
-            button.onclick = () => {
-                popup.style.display = "none"; // Hide popup on button click
-            };
-        }
-    });
-    </script>
-    """)
-    demo.load(fn=show_popup, outputs=popup)
+    # Modal component
+    popup_modal = gr.Column(visible=False, elem_id="popup-overlay")
+    with popup_modal:
+        gr.Markdown(
+            """
+            ### ℹ️ Notice
+    
+            Grabaketak ez dira gordetzen eta automatikoki ezabatzen dira.  
+            No se guardan las grabaciones y se eliminan automáticamente.  
+            The recordings are not saved and are automatically removed.
+            """,
+            elem_id="popup-box"
+        )
+        ok_btn = gr.Button("OK", elem_id="popup-button")
+        ok_btn.click(fn=hide_popup, outputs=popup_modal)
+    demo.load(fn=show_popup, outputs=popup_modal)
     ###################
     
     gr.HTML("""