Add ZIP download functionality for segment alpha masks with loading modal

Implements download feature for Segmentation Editing tab that packages only alpha mask PNG files into a ZIP archive named with the segment UUID.

- Modified download_segment() to include only alpha masks (no frame images)
- Changed ZIP filename from segment_{uuid}.zip to {uuid}.zip
- Added custom loading modal overlay with spinner and "Preparing download…" text
- Added button interactivity: disabled when no segment/masks, enabled when masks exist
- Added status feedback textbox showing download success or error messages
- JavaScript automatically shows/hides modal during download process

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -445,7 +445,7 @@ def handle_segment_selection(segment_id, magic_code):
     Handle segment selection: download all files and initialize the view.
     """
     if not segment_id or not magic_code:
-        return None, gr.update(maximum=0, value=0), {}, {}, magic_code
+        return None, gr.update(maximum=0, value=0), {}, {}, magic_code, gr.update(interactive=False)
 
     logger.info(f"Segment selected: {segment_id}")
 
@@ -454,7 +454,7 @@ def handle_segment_selection(segment_id, magic_code):
 
     if not frames_dict:
         logger.error("No frames downloaded")
-        return None, gr.update(maximum=0, value=0), {}, {}, magic_code
+        return None, gr.update(maximum=0, value=0), {}, {}, magic_code, gr.update(interactive=False)
 
     # Load first frame
     frame_0 = frames_dict.get(0, None)
@@ -465,12 +465,16 @@ def handle_segment_selection(segment_id, magic_code):
     # Initial display without mask
     result_image = composite_image_with_mask(frame_0, masks_dict.get(0, None), False)
 
+    # Enable download button only if masks are available
+    has_masks = len(masks_dict) > 0
+
     return (
         result_image,
         gr.update(minimum=0, maximum=max_frame, value=0),
         frames_dict,
         masks_dict,
-        magic_code
+        magic_code,
+        gr.update(interactive=has_masks)
     )
 
 
@@ -479,7 +483,7 @@ def handle_image_click(segment_id, frame_number, magic_code, frames_state, masks
     Handle click on ImageEditor: send coordinates to SAM-3, get new mask, update display.
     """
     if not segment_id or frames_state is None or evt is None:
-        return None, masks_state
+        return None, masks_state, gr.update()
 
     # Extract click coordinates
     x, y = evt.index[0], evt.index[1]
@@ -489,7 +493,7 @@ def handle_image_click(segment_id, frame_number, magic_code, frames_state, masks
 
     if frame_idx not in frames_state:
         logger.error(f"Frame {frame_idx} not in state")
-        return None, masks_state
+        return None, masks_state, gr.update()
 
     try:
         # Get the original frame
@@ -518,7 +522,8 @@ def handle_image_click(segment_id, frame_number, magic_code, frames_state, masks
 
             logger.info(f"Successfully updated mask for frame {frame_idx}")
 
-            return result_image, masks_state
+            # Enable download button since we now have at least one mask
+            return result_image, masks_state, gr.update(interactive=True)
 
         except Exception as e:
             logger.error(f"Error calling SAM-3 function: {e}")
@@ -526,45 +531,58 @@ def handle_image_click(segment_id, frame_number, magic_code, frames_state, masks
             frame = frames_state[frame_idx]
             mask = masks_state.get(frame_idx, None)
             result_image = composite_image_with_mask(frame, mask, True)
-            return result_image, masks_state
+            return result_image, masks_state, gr.update()
 
     except Exception as e:
         logger.error(f"Error handling image click: {e}")
-        return None, masks_state
+        return None, masks_state, gr.update()
 
 
 def download_segment(segment_id, frames_state, masks_state):
     """
-    Package and download the edited segment (frames + masks) as a ZIP file.
+    Package and download only the alpha masks for the selected segment as a ZIP file.
+    ZIP filename will be {segment_id}.zip.
+
+    Returns:
+        Tuple of (status_message, file_path, status_visibility)
     """
-    if not segment_id or not frames_state:
-        return "No segment selected"
+    if not segment_id:
+        return gr.update(value="No segment selected", visible=True), None, gr.update(visible=True)
+
+    if not masks_state:
+        logger.warning(f"No alpha masks available for segment: {segment_id}")
+        return gr.update(value="No alpha masks available", visible=True), None, gr.update(visible=True)
 
     logger.info(f"Download requested for segment: {segment_id}")
 
     try:
-        # Create temporary directory for files
+        import shutil
+
+        # Create temporary directory for alpha mask files only
         with tempfile.TemporaryDirectory() as tmpdir:
-            # Save all frames and masks
-            for frame_idx, frame_img in frames_state.items():
-                frame_path = os.path.join(tmpdir, f"frame_{frame_idx:06d}.png")
-                frame_img.save(frame_path)
-
-                if frame_idx in masks_state:
-                    mask_path = os.path.join(tmpdir, f"alpha_frame_{frame_idx:06d}.png")
-                    masks_state[frame_idx].save(mask_path)
-
-            # Create ZIP
-            import shutil
-            zip_path = f"/tmp/segment_{segment_id}.zip"
+            # Save only alpha masks
+            for frame_idx, mask_img in masks_state.items():
+                mask_path = os.path.join(tmpdir, f"alpha_frame_{frame_idx:06d}.png")
+                mask_img.save(mask_path)
+
+            # Create ZIP with segment UUID as filename
+            zip_path = f"/tmp/{segment_id}.zip"
             shutil.make_archive(zip_path.replace('.zip', ''), 'zip', tmpdir)
 
-            logger.info(f"Created ZIP at {zip_path}")
-            return zip_path
+            logger.info(f"Created ZIP at {zip_path} with {len(masks_state)} alpha masks")
+            return (
+                gr.update(value=f"✓ Downloaded {len(masks_state)} alpha masks", visible=True),
+                zip_path,
+                gr.update(visible=True)
+            )
 
     except Exception as e:
         logger.error(f"Error creating download package: {e}")
-        return f"Error: {str(e)}"
+        return (
+            gr.update(value=f"Error: {str(e)}", visible=True),
+            None,
+            gr.update(visible=True)
+        )
 
 
 # Create a professional Gradio interface using the Golden ratio (1.618) for proportions
@@ -753,6 +771,53 @@ label {
         padding: 15px;
     }
 }
+
+/* Loading modal overlay */
+#download-loading-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+}
+
+#download-loading-modal.show {
+    display: flex;
+}
+
+.loading-content {
+    background-color: var(--card-bg);
+    padding: 40px;
+    border-radius: var(--border-radius);
+    text-align: center;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.spinner {
+    border: 4px solid var(--border-color);
+    border-top: 4px solid var(--primary-color);
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+    color: var(--text-color);
+    font-size: 18px;
+    font-weight: 500;
+}
 """
 
 # Create a Blocks interface for more customization
@@ -854,11 +919,69 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
                 # Row 6: Download Segment button
                 with gr.Row(visible=False) as seg_row6:
                     seg_download_btn = gr.Button("Download Segment", variant="secondary")
+                    seg_download_status = gr.Textbox(label="Status", value="", visible=False, interactive=False)
                     seg_download_file = gr.File(label="Download", visible=False)
 
                 # Hidden component for keyboard event capture
                 seg_keyboard_input = gr.Textbox(visible=False, elem_id="seg_keyboard_input")
 
+                # Loading modal HTML
+                gr.HTML("""
+                    <div id="download-loading-modal">
+                        <div class="loading-content">
+                            <div class="spinner"></div>
+                            <div class="loading-text">Preparing download…</div>
+                        </div>
+                    </div>
+                    <script>
+                        function showDownloadLoading() {
+                            const modal = document.getElementById('download-loading-modal');
+                            if (modal) modal.classList.add('show');
+                        }
+
+                        function hideDownloadLoading() {
+                            const modal = document.getElementById('download-loading-modal');
+                            if (modal) modal.classList.remove('show');
+                        }
+
+                        // Listen for download button clicks
+                        document.addEventListener('DOMContentLoaded', function() {
+                            const checkButton = setInterval(function() {
+                                const downloadBtn = document.querySelector('button:has-text("Download Segment")');
+                                if (!downloadBtn) {
+                                    // Fallback: find button by content
+                                    const buttons = document.querySelectorAll('button');
+                                    for (let btn of buttons) {
+                                        if (btn.textContent.includes('Download Segment')) {
+                                            setupDownloadButton(btn);
+                                            clearInterval(checkButton);
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    setupDownloadButton(downloadBtn);
+                                    clearInterval(checkButton);
+                                }
+                            }, 500);
+
+                            function setupDownloadButton(btn) {
+                                btn.addEventListener('click', function() {
+                                    showDownloadLoading();
+                                    // Hide modal after function completes (watch for Gradio loading to finish)
+                                    setTimeout(function checkLoading() {
+                                        const gradioLoading = document.querySelector('.loading');
+                                        if (!gradioLoading) {
+                                            setTimeout(hideDownloadLoading, 500);
+                                        } else {
+                                            setTimeout(checkLoading, 200);
+                                        }
+                                    }, 200);
+                                });
+                            }
+                        });
+                    </script>
+                """)
+
     # Wire Content Moderation processing
     cm_process_btn.click(
         fn=process_video,
@@ -877,7 +1000,7 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
     seg_id_dropdown.change(
         fn=handle_segment_selection,
         inputs=[seg_id_dropdown, seg_magic_code],
-        outputs=[seg_image_editor, seg_frame_slider, frames_state, masks_state, magic_code_state]
+        outputs=[seg_image_editor, seg_frame_slider, frames_state, masks_state, magic_code_state, seg_download_btn]
     )
 
     # Frame slider handler
@@ -898,14 +1021,14 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue
     seg_image_editor.select(
         fn=handle_image_click,
         inputs=[seg_id_dropdown, seg_frame_slider, magic_code_state, frames_state, masks_state],
-        outputs=[seg_image_editor, masks_state]
+        outputs=[seg_image_editor, masks_state, seg_download_btn]
     )
 
     # Download button handler
     seg_download_btn.click(
         fn=download_segment,
         inputs=[seg_id_dropdown, frames_state, masks_state],
-        outputs=[seg_download_file]
+        outputs=[seg_download_status, seg_download_file, seg_download_status]
     )
 
     # Keyboard navigation handler