Update app.py

app.py

@@ -497,9 +497,6 @@ 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")
@@ -517,7 +514,55 @@ def get_images_html():
     image_files.sort(key=sort_key)
     
     # Create HTML for displaying images
-    html = "<div class='image-gallery'>"
+    html = """
+    <style>
+        .image-gallery {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+        .page-section {
+            width: 100%;
+            margin-bottom: 30px;
+        }
+        .page-header {
+            width: 100%;
+            margin-bottom: 15px;
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 5px;
+        }
+        .image-card {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            overflow: hidden;
+            width: 300px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .image-container {
+            height: 200px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .image-container img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+        .image-details {
+            padding: 10px;
+        }
+        .image-details h3 {
+            margin-top: 0;
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    </style>
+    <div class='image-gallery'>
+    """
     
     current_page = None
     for image_file in image_files:
@@ -527,15 +572,20 @@ def get_images_html():
             page_num = parts[0].replace('page', '')
             # Add page section header if we're on a new page
             if current_page != page_num:
+                if current_page is not None:
+                    html += "</div>"  # Close previous page section
                 current_page = page_num
-                html += f"<h2 class='page-header'>Page {page_num}</h2>"
+                html += f"<div class='page-section'><h2 class='page-header'>Page {page_num}</h2>"
             
-            # Try multiple possible paths for Hugging Face Spaces
-            # Option 1: Direct path (if images are in the root of the Space)
+            # Create the image element with multiple fallback paths
             html += f"""
             <div class='image-card'>
                 <div class='image-container'>
-                    <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}';">
+                    <img src="files/{image_file}" 
+                         onerror="if (this.src === 'files/{image_file}') this.src = 'static/{image_file}'; 
+                                 else if (this.src === 'static/{image_file}') this.src = 'images/{image_file}'; 
+                                 else if (this.src === 'images/{image_file}') this.src = '{image_file}';"
+                         alt="{image_file}">
                 </div>
                 <div class='image-details'>
                     <h3>{image_file}</h3>
@@ -544,51 +594,13 @@ def get_images_html():
             </div>
             """
     
+    # Close the last page section and the gallery
+    if current_page is not None:
+        html += "</div>"
     html += "</div>"
     
-    # Add some basic CSS for the gallery
-    html = f"""
-    <style>
-    .image-gallery {{
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-        justify-content: flex-start;
-    }}
-    .page-header {{
-        width: 100%;
-        margin-top: 30px;
-        margin-bottom: 15px;
-        border-bottom: 1px solid #ccc;
-    }}
-    .image-card {{
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        padding: 15px;
-        width: 300px;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    }}
-    .image-container {{
-        display: flex;
-        justify-content: center;
-        margin-bottom: 10px;
-    }}
-    .image-container img {{
-        max-width: 100%;
-        max-height: 200px;
-        object-fit: contain;
-    }}
-    .image-details h3 {{
-        font-size: 14px;
-        margin-top: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }}
-    </style>
-    """ + html
-    
     return html
+
 # Get response from OpenAI API
 def get_openai_response(query, context_chunks=None, include_troubleshooting=True):
     """Get enhanced response from OpenAI model using RAG"""