Update app.py

app.py

@@ -497,14 +497,20 @@ def get_images_html():
         "page8_img1_85bc9423.jpeg"
     ]
     
+    if not image_files:
+        return "<div class='image-gallery'><p>No images found in the database.</p></div>"
+    
     # Sort images by page number and then by image number
     def sort_key(filename):
         # Extract page and image numbers from filename (e.g., "page10_img1_af0cd090.jpeg")
         parts = filename.split('_')
         if len(parts) >= 2:
-            page_num = int(parts[0].replace('page', ''))
-            img_num = int(parts[1].replace('img', ''))
-            return (page_num, img_num)
+            try:
+                page_num = int(parts[0].replace('page', ''))
+                img_num = int(parts[1].replace('img', ''))
+                return (page_num, img_num)
+            except ValueError:
+                return (999, 999)
         return (999, 999)  # Default for any files that don't match the pattern
     
     # Sort the image files
@@ -513,9 +519,6 @@ def get_images_html():
     # Create HTML for displaying images
     html = "<div class='image-gallery'>"
     
-    # The problem was that we were checking if image_files is empty, but it's not empty
-    # We have the list of files, we just need to display them
-    
     current_page = None
     for image_file in image_files:
         # Extract page number for section headers
@@ -527,14 +530,12 @@ def get_images_html():
                 current_page = page_num
                 html += f"<h2 class='page-header'>Page {page_num}</h2>"
             
-            # In Hugging Face Spaces, files need the correct path
-            # This is the likely source of your error - incorrect path to the images
-            img_path = f"files/{image_file}"  # Adjust this path based on your Hugging Face Space structure
-            
+            # Try multiple possible paths for Hugging Face Spaces
+            # Option 1: Direct path (if images are in the root of the Space)
             html += f"""
             <div class='image-card'>
                 <div class='image-container'>
-                    <img src="{img_path}" alt="{image_file}">
+                    <img src="{image_file}" alt="{image_file}" onerror="this.onerror=null; this.src='static/{image_file}'; this.onerror=null; this.src='files/{image_file}'; this.onerror=null; this.src='images/{image_file}';">
                 </div>
                 <div class='image-details'>
                     <h3>{image_file}</h3>