Update app.py

app.py

@@ -85,14 +85,8 @@ def create_zip_file(selected_image_paths):
             zipf.write(image_path, arcname)
     return ZIP_FILE
 
-def image_to_base64(image_path):
-    """Convert an image file to a base64 string for HTML embedding."""
-    with open(image_path, "rb") as image_file:
-        encoded_string = base64.b64encode(image_file.read()).decode("utf-8")
-    return f"data:image/jpeg;base64,{encoded_string}"
-
 def process_and_display(gender, num_images):
-    """Fetch and download images, then display them as thumbnails with toggles."""
+    """Fetch and download images, then prepare data for display."""
     num_images = int(num_images)  # Convert dropdown selection to integer
     if num_images > 25:
         num_images = 25  # Limit to 25 images
@@ -107,42 +101,10 @@ def process_and_display(gender, num_images):
     if downloaded_count == 0:
         return "No images were successfully downloaded.", None, None, None, None
 
-    # Prepare thumbnail gallery with JavaScript to update hidden checkboxes
-    gallery_html = """
-    <div style='display: flex; flex-wrap: wrap; gap: 10px;'>
-    """
-    checkbox_states = []
-    for idx, image_path in enumerate(image_paths, 1):
-        base64_image = image_to_base64(image_path)
-        # Create a thumbnail that opens full-size image in a new tab
-        thumbnail_html = f"""
-        <div style='text-align: center;'>
-            <a href='file://{image_path}' target='_blank'>
-                <img src='{base64_image}' style='width: 100px; height: 100px; object-fit: cover;' />
-            </a>
-            <div>
-                <input type='checkbox' id='checkbox_{idx}' name='checkbox_{idx}' checked onchange='updateCheckbox({idx}, this.checked)'>
-                <label for='checkbox_{idx}'>Include in ZIP</label>
-            </div>
-        </div>
-        """
-        gallery_html += thumbnail_html
-        checkbox_states.append(True)  # Default to all images selected
-    gallery_html += """
-    </div>
-    <script>
-    function updateCheckbox(index, isChecked) {
-        // Find the hidden Gradio checkbox input by index and update its value
-        var gradioCheckbox = document.querySelector(`input[type='checkbox'][data-index='${index}']`);
-        if (gradioCheckbox) {
-            gradioCheckbox.checked = isChecked;
-            gradioCheckbox.dispatchEvent(new Event('change')); // Trigger Gradio update
-        }
-    }
-    </script>
-    """
+    # Prepare gallery data (image paths for thumbnails)
+    gallery_data = [(path, f"Image {i+1}") for i, path in enumerate(image_paths)]
 
-    return f"Successfully downloaded {downloaded_count}/{num_images} images. Select images to include in ZIP below.", None, None, gallery_html, image_paths
+    return f"Successfully downloaded {downloaded_count}/{num_images} images. Select images to include in ZIP below.", None, None, gallery_data, image_paths
 
 def process_zip_submission(image_paths, *checkbox_states):
     """Create a ZIP file based on the selected images."""
@@ -181,31 +143,35 @@ with gr.Blocks(title="Image Downloader") as demo:
     zip_output = gr.File(label="Download ZIP", visible=False)
     
     gr.Markdown("### Image Gallery (Click Thumbnails to View Full Size)")
-    gallery_output = gr.HTML(label="Gallery")
+    gallery_output = gr.Gallery(label="Gallery", show_label=True, elem_id="gallery", columns=[5], height="auto")
     image_paths_state = gr.State()  # Store image paths for later use
     
-    # Hidden checkbox components to track toggle states, with data-index for JavaScript
-    checkbox_outputs = [gr.Checkbox(visible=False, elem_id=f"checkbox_hidden_{i}", label=f"Hidden Checkbox {i}") for i in range(25)]  # Max 25 images
+    # Checkbox components for toggling inclusion in ZIP
+    checkbox_outputs = [gr.Checkbox(label=f"Include Image {i+1} in ZIP", value=True, visible=False) for i in range(25)]  # Max 25 images
     
     gr.Markdown("### Submit Selections")
     submit_button = gr.Button("Create ZIP of Selected Images")
     
     def on_download(gender, num_images):
-        status, zip_path, image_path, gallery_html, image_paths = process_and_display(gender, num_images)
+        status, zip_path, image_path, gallery_data, image_paths = process_and_display(gender, num_images)
         if image_paths:
+            # Show checkboxes for the downloaded images
+            checkbox_updates = {checkbox_outputs[i]: gr.Checkbox(value=True, visible=True, label=f"Include Image {i+1} in ZIP") for i in range(len(image_paths))}
+            # Hide remaining checkboxes
+            checkbox_updates.update({checkbox_outputs[i]: gr.Checkbox(value=False, visible=False) for i in range(len(image_paths), 25)})
             return {
                 status_output: status,
                 zip_output: gr.File(value=None, visible=False),  # Hide ZIP initially
-                gallery_output: gallery_html,
+                gallery_output: gallery_data,
                 image_paths_state: image_paths,
-                **{checkbox_outputs[i]: gr.Checkbox(value=True, visible=False, elem_id=f"checkbox_hidden_{i}") for i in range(len(image_paths))}
+                **checkbox_updates
             }
         return {
             status_output: status,
             zip_output: gr.File(visible=False),
             gallery_output: None,
             image_paths_state: None,
-            **{checkbox_outputs[i]: gr.Checkbox(value=False, visible=False, elem_id=f"checkbox_hidden_{i}") for i in range(25)}
+            **{checkbox_outputs[i]: gr.Checkbox(value=False, visible=False) for i in range(25)}
         }
     
     def on_submit(image_paths, *checkbox_states):