Update app.py

app.py

@@ -108,8 +108,9 @@ with gr.Blocks() as demo:
     # JavaScript for managing the pop-up
     gr.HTML("""
     <div id="popup" style="
-        display: none; position: absolute; background-color: white; padding: 20px; border-radius: 10px; 
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 300px;">
+        display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+        background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+        z-index: 1000; text-align: center; width: 300px;">
         <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
         <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
         <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
@@ -117,6 +118,8 @@ with gr.Blocks() as demo:
             margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; 
             border-radius: 5px; cursor: pointer;">Close</button>
     </div>
+    """)
+
     <script>
         function showPopup(image, title, description, element) {
             // Get the item's position