Update app.py

app.py

@@ -178,6 +178,9 @@ button.selected::after{
     z-index: 999;
     flex-direction: column;
 }
+#popup-overlay.show {
+    display: flex !important;
+}
 #popup-box {
     background: white;
     padding: 20px;
@@ -271,10 +274,11 @@ with demo:
             ],
             allow_flagging="never",
         )
-    
-    #popup = gr.Column(visible=False, elem_id="popup-overlay")
-    gr.HTML("""
-    <div id="popup-overlay" style="display: flex;">
+
+    ###############################
+    # Popup HTML (initially hidden)
+    popup_html = gr.HTML("""
+    <div id="popup-overlay">
         <div id="popup-box">
             <h3>ℹ️ Notice</h3>
             <p>Grabaketak ez dira gordetzen eta automatikoki ezabatzen dira.<br>
@@ -283,25 +287,29 @@ with demo:
             <button id="popup-button">OK</button>
         </div>
     </div>
-    
+    """, elem_id="popup-overlay")
+
+    # JavaScript to show/hide popup
+    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";
-            }
-    
-            if (button) {
-                button.onclick = () => {
-                    popup.style.display = "none";
-                };
-            }
-        });
+    window.addEventListener('DOMContentLoaded', function () {
+        const popup = document.getElementById("popup-overlay");
+        const button = document.getElementById("popup-button");
+
+        if (popup) {
+            popup.classList.add("show"); // Show popup on load
+        }
+
+        if (button) {
+            button.onclick = () => {
+                popup.classList.remove("show"); // Hide popup on click
+            };
+        }
+    });
     </script>
     """)
-
+    ###################
+    
     gr.HTML("""
 <div id="orai-info">
     <div class="logos">