Upload 5 files

Crate new Features: Support batch images upload

app.py

@@ -2,73 +2,251 @@ import gradio as gr
 import torch
 from PIL import Image
 import spaces
+import os
+import json
+import tempfile
+from typing import List, Optional
 
 from pixcribe_pipeline import PixcribePipeline
 from ui_manager import UIManager
 
 # Initialize Pipeline and UI Manager
-print("Initializing Pixcribe...")
-print("⏳ Loading models (this may take 60-90 seconds on first run)...")
+print("Initializing Pixcribe V5 with Batch Processing...")
+print("⏳ Loading models (this may take a while)...")
 pipeline = PixcribePipeline(yolo_variant='l')
 ui_manager = UIManager()
 print("✅ All models loaded successfully!")
 
+# Global variable to store latest batch results and images for export
+latest_batch_results = None
+latest_batch_images = None
+
 @spaces.GPU(duration=180)
-def process_wrapper(image, yolo_variant, caption_language):
-    """Process image and return formatted results
+def process_images_wrapper(files, yolo_variant, caption_language, progress=gr.Progress()):
+    """
+    Process single or multiple images with progress tracking.
 
-    This function uses GPU-accelerated models:
-    - YOLOv11 (object detection)
-    - OpenCLIP ViT-H/14 (semantic understanding)
-    - EasyOCR (text extraction)
-    - Places365 (scene analysis)
-    - Qwen2.5-VL-7B (caption generation)
+    This function automatically detects whether to use single-image or batch processing
+    based on the number of files uploaded.
 
-    Total processing time: ~2-3 seconds on L4 GPU
+    Args:
+        files: List of uploaded file objects (or single file)
+        yolo_variant: YOLO model variant ('m', 'l', 'x')
+        caption_language: Caption language ('zh', 'en')
+        progress: Gradio Progress object for progress updates
+
+    Returns:
+        Tuple of (visualized_image, caption_html, batch_results_html, export_panel_visibility)
     """
+    global latest_batch_results, latest_batch_images
+
+    # Validate input
+    if files is None or (isinstance(files, list) and len(files) == 0):
+        error_msg = "<div style='color: #E74C3C; padding: 24px; text-align: center;'>Please upload at least one image</div>"
+        return None, error_msg, "", gr.update(visible=False)
+
+    # Convert single file to list
+    if not isinstance(files, list):
+        files = [files]
+
+    # Check maximum limit
+    if len(files) > 10:
+        error_msg = "<div style='color: #E74C3C; padding: 24px; text-align: center;'>Maximum 10 images allowed. Please select fewer images.</div>"
+        return None, error_msg, "", gr.update(visible=False)
+
+    # Load images from files
+    images = []
+    for file in files:
+        try:
+            if hasattr(file, 'name'):
+                # File object from Gradio
+                img = Image.open(file.name)
+            else:
+                # Direct path
+                img = Image.open(file)
+
+            # Convert to RGB if needed
+            if img.mode != 'RGB':
+                img = img.convert('RGB')
+
+            images.append(img)
+        except Exception as e:
+            print(f"⚠️ Warning: Failed to load image {file}: {str(e)}")
+            continue
+
+    if len(images) == 0:
+        error_msg = "<div style='color: #E74C3C; padding: 24px; text-align: center;'>No valid images found. Please upload valid image files.</div>"
+        return None, error_msg, "", gr.update(visible=False)
+
+    platform = 'instagram'  # Fixed platform
+
+    # Single image processing mode
+    if len(images) == 1:
+        try:
+            results = pipeline.process_image(
+                image=images[0],
+                platform=platform,
+                yolo_variant=yolo_variant,
+                language=caption_language
+            )
+
+            if results is None:
+                error_msg = "<div style='color: #E74C3C; padding: 24px; text-align: center;'>Processing failed. Check terminal logs for details.</div>"
+                return None, error_msg, "", gr.update(visible=False)
+
+            # Get visualized image with brand boxes
+            visualized_image = results.get('visualized_image', images[0])
+
+            # Format captions with copy functionality
+            captions_html = ui_manager.format_captions_with_copy(results['captions'])
+
+            # Clear batch results when in single mode
+            latest_batch_results = None
+            latest_batch_images = None
+
+            return visualized_image, captions_html, "", gr.update(visible=False)
+
+        except Exception as e:
+            import traceback
+            error_msg = traceback.format_exc()
+            print("="*60)
+            print("ERROR DETAILS:")
+            print(error_msg)
+            print("="*60)
+
+            error_html = f"""
+            <div style='background: #FADBD8; border: 2px solid #E74C3C; border-radius: 20px; padding: 28px; margin: 16px 0;'>
+                <h3 style='color: #C0392B; margin-top: 0; font-size: 22px;'>❌ Processing Error</h3>
+                <p style='color: #E74C3C; font-weight: bold; font-size: 17px; margin-bottom: 16px;'>{str(e)}</p>
+                <details style='margin-top: 12px;'>
+                    <summary style='cursor: pointer; color: #C0392B; font-weight: bold; font-size: 16px;'>View Full Error Trace</summary>
+                    <pre style='background: white; padding: 16px; border-radius: 12px; overflow-x: auto; font-size: 13px; color: #2C3E50; margin-top: 12px;'>{error_msg}</pre>
+                </details>
+            </div>
+            """
+            return None, error_html, "", gr.update(visible=False)
+
+    # Batch processing mode (2+ images)
+    else:
+        try:
+            # Define progress callback
+            def update_progress(progress_info):
+                current = progress_info['current']
+                total = progress_info['total']
+                percent = progress_info['percent']
+
+                # Update Gradio progress
+                progress(percent / 100, desc=f"Processing image {current}/{total}")
+
+            # Process batch
+            batch_results = pipeline.process_batch(
+                images=images,
+                platform=platform,
+                yolo_variant=yolo_variant,
+                language=caption_language,
+                progress_callback=update_progress
+            )
+
+            # Store results globally for export
+            latest_batch_results = batch_results
+            latest_batch_images = images
+
+            # Format batch results as HTML
+            batch_html = ui_manager.format_batch_results_html(batch_results)
+
+            # Return None for single image display, batch results HTML, and show export panel
+            return None, "", batch_html, gr.update(visible=True)
+
+        except Exception as e:
+            import traceback
+            error_msg = traceback.format_exc()
+            print("="*60)
+            print("BATCH PROCESSING ERROR:")
+            print(error_msg)
+            print("="*60)
+
+            error_html = f"""
+            <div style='background: #FADBD8; border: 2px solid #E74C3C; border-radius: 20px; padding: 28px; margin: 16px 0;'>
+                <h3 style='color: #C0392B; margin-top: 0; font-size: 22px;'>❌ Batch Processing Error</h3>
+                <p style='color: #E74C3C; font-weight: bold; font-size: 17px; margin-bottom: 16px;'>{str(e)}</p>
+                <details style='margin-top: 12px;'>
+                    <summary style='cursor: pointer; color: #C0392B; font-weight: bold; font-size: 16px;'>View Full Error Trace</summary>
+                    <pre style='background: white; padding: 16px; border-radius: 12px; overflow-x: auto; font-size: 13px; color: #2C3E50; margin-top: 12px;'>{error_msg}</pre>
+                </details>
+            </div>
+            """
+            return None, error_html, "", gr.update(visible=False)
 
-    if image is None:
-        return None, "<div style='color: #E74C3C; padding: 24px; text-align: center;'>Please upload an image</div>"
+
+def export_json_handler():
+    """Export batch results to JSON file."""
+    global latest_batch_results
+
+    if latest_batch_results is None:
+        return None
 
     try:
-        platform = 'instagram'
+        # Create temporary file
+        temp_dir = tempfile.gettempdir()
+        output_path = os.path.join(temp_dir, "pixcribe_batch_results.json")
+
+        # Export to JSON
+        pipeline.batch_processor.export_to_json(latest_batch_results, output_path)
+
+        return output_path
+    except Exception as e:
+        print(f"Export JSON error: {str(e)}")
+        return None
+
+
+def export_csv_handler():
+    """Export batch results to CSV file."""
+    global latest_batch_results
 
-        results = pipeline.process_image(image, platform, yolo_variant, caption_language)
+    if latest_batch_results is None:
+        return None
 
-        if results is None:
-            return None, "<div style='color: #E74C3C; padding: 24px; text-align: center;'>Processing failed. Check terminal logs for details.</div>"
+    try:
+        # Create temporary file
+        temp_dir = tempfile.gettempdir()
+        output_path = os.path.join(temp_dir, "pixcribe_batch_results.csv")
+
+        # Export to CSV
+        pipeline.batch_processor.export_to_csv(latest_batch_results, output_path)
 
+        return output_path
     except Exception as e:
-        import traceback
-        error_msg = traceback.format_exc()
-        print("="*60)
-        print("ERROR DETAILS:")
-        print(error_msg)
-        print("="*60)
-
-        # Return detailed error to user
-        error_html = f"""
-        <div style='background: #FADBD8; border: 2px solid #E74C3C; border-radius: 20px; padding: 28px; margin: 16px 0;'>
-            <h3 style='color: #C0392B; margin-top: 0; font-size: 22px;'>❌ Processing Error</h3>
-            <p style='color: #E74C3C; font-weight: bold; font-size: 17px; margin-bottom: 16px;'>{str(e)}</p>
-            <details style='margin-top: 12px;'>
-                <summary style='cursor: pointer; color: #C0392B; font-weight: bold; font-size: 16px;'>View Full Error Trace</summary>
-                <pre style='background: white; padding: 16px; border-radius: 12px; overflow-x: auto; font-size: 13px; color: #2C3E50; margin-top: 12px;'>{error_msg}</pre>
-            </details>
-        </div>
-        """
-        return None, error_html
+        print(f"Export CSV error: {str(e)}")
+        return None
+
+
+def export_zip_handler():
+    """Export batch results to ZIP archive."""
+    global latest_batch_results, latest_batch_images
+
+    if latest_batch_results is None or latest_batch_images is None:
+        return None
+
+    try:
+        # Create temporary file
+        temp_dir = tempfile.gettempdir()
+        output_path = os.path.join(temp_dir, "pixcribe_batch_results.zip")
 
-    # Get visualized image with brand boxes
-    visualized_image = results.get('visualized_image', image)
+        # Export to ZIP
+        pipeline.batch_processor.export_to_zip(
+            latest_batch_results,
+            latest_batch_images,
+            output_path
+        )
 
-    # Format captions with copy functionality
-    captions_html = ui_manager.format_captions_with_copy(results['captions'])
+        return output_path
+    except Exception as e:
+        print(f"Export ZIP error: {str(e)}")
+        return None
 
-    return visualized_image, captions_html
 
 # Create Gradio Interface
-with gr.Blocks(css=ui_manager.custom_css, title="Pixcribe - AI Social Media Captions") as app:
+with gr.Blocks(css=ui_manager.custom_css, title="Pixcribe V5 - AI Social Media Captions") as app:
 
     # Header
     ui_manager.create_header()
@@ -81,13 +259,14 @@ with gr.Blocks(css=ui_manager.custom_css, title="Pixcribe - AI Social Media Capt
         # Left - Upload Card
         with gr.Column(scale=1):
             with gr.Group(elem_classes="upload-card"):
-                image_input = gr.Image(
-                    type="pil",
-                    label="Upload Image",
+                image_input = gr.File(
+                    file_count="multiple",
+                    file_types=["image"],
+                    label="Upload Images (Max 10)",
                     elem_classes="upload-area"
                 )
 
-        # Right - Detected Objects
+        # Right - Detected Objects (Single Image Mode)
         with gr.Column(scale=1):
             with gr.Group(elem_classes="results-card"):
                 gr.Markdown("### Detected Objects", elem_classes="section-title")
@@ -137,7 +316,7 @@ with gr.Blocks(css=ui_manager.custom_css, title="Pixcribe - AI Social Media Capt
         </div>
         """)
 
-    # Caption Results (Full Width)
+    # Single Image Caption Results (Full Width)
     with gr.Group(elem_classes="caption-results-container"):
         gr.Markdown("### 📝 Generated Captions", elem_classes="section-title")
         caption_output = gr.HTML(
@@ -145,6 +324,25 @@ with gr.Blocks(css=ui_manager.custom_css, title="Pixcribe - AI Social Media Capt
             elem_id="caption-results"
         )
 
+    # Batch Results Display (Initially Hidden)
+    batch_results_output = gr.HTML(
+        label="",
+        visible=True
+    )
+
+    # Export Panel (Initially Hidden)
+    with gr.Group(elem_classes="export-panel", visible=False) as export_panel:
+        gr.Markdown("### 📥 Export Batch Results", elem_classes="section-title-left")
+
+        with gr.Row():
+            json_btn = gr.Button("📄 Download JSON", variant="secondary")
+            csv_btn = gr.Button("📊 Download CSV", variant="secondary")
+            zip_btn = gr.Button("📦 Download ZIP", variant="secondary")
+
+        json_file = gr.File(label="JSON Export", visible=False)
+        csv_file = gr.File(label="CSV Export", visible=False)
+        zip_file = gr.File(label="ZIP Export", visible=False)
+
     # Footer
     ui_manager.create_footer()
 
@@ -176,9 +374,37 @@ with gr.Blocks(css=ui_manager.custom_css, title="Pixcribe - AI Social Media Capt
 
     # Connect button to processing function
     analyze_btn.click(
-        fn=process_wrapper,
+        fn=process_images_wrapper,
         inputs=[image_input, yolo_variant, caption_language],
-        outputs=[visualized_image, caption_output]
+        outputs=[visualized_image, caption_output, batch_results_output, export_panel]
+    )
+
+    # Connect export buttons
+    json_btn.click(
+        fn=export_json_handler,
+        inputs=[],
+        outputs=[json_file]
+    ).then(
+        lambda: gr.update(visible=True),
+        outputs=[json_file]
+    )
+
+    csv_btn.click(
+        fn=export_csv_handler,
+        inputs=[],
+        outputs=[csv_file]
+    ).then(
+        lambda: gr.update(visible=True),
+        outputs=[csv_file]
+    )
+
+    zip_btn.click(
+        fn=export_zip_handler,
+        inputs=[],
+        outputs=[zip_file]
+    ).then(
+        lambda: gr.update(visible=True),
+        outputs=[zip_file]
     )
 
 if __name__ == "__main__":

batch_processing_manager.py

@@ -0,0 +1,449 @@
+import time
+import json
+import csv
+import zipfile
+from io import BytesIO
+from typing import List, Dict, Optional, Callable
+from PIL import Image
+import traceback
+
+class BatchProcessingManager:
+    """
+    Manages batch processing of multiple images with progress tracking,
+    error handling, and result export functionality.
+
+    Follows the Facade pattern by delegating actual image processing
+    to the PixcribePipeline instance.
+    """
+
+    def __init__(self, pipeline=None):
+        """
+        Initialize the Batch Processing Manager.
+
+        Args:
+            pipeline: Reference to PixcribePipeline instance for processing images
+        """
+        self.pipeline = pipeline
+        self.results = {}  # Store processing results indexed by image number
+        self.timing_data = []  # Track processing time for each image
+
+    def process_batch(
+        self,
+        images: List[Image.Image],
+        platform: str = 'instagram',
+        yolo_variant: str = 'l',
+        language: str = 'zh',
+        progress_callback: Optional[Callable] = None
+    ) -> Dict:
+        """
+        Process a batch of images with progress tracking.
+
+        Args:
+            images: List of PIL Image objects to process (max 10)
+            platform: Target social media platform
+            yolo_variant: YOLO model variant ('m', 'l', 'x')
+            language: Caption language ('zh', 'en')
+            progress_callback: Optional callback function for progress updates
+
+        Returns:
+            Dictionary containing batch processing summary and results
+
+        Raises:
+            ValueError: If images list is empty or exceeds 10 images
+        """
+        # Validate input
+        if not images:
+            raise ValueError("Images list cannot be empty")
+
+        if len(images) > 10:
+            raise ValueError("Maximum 10 images allowed per batch")
+
+        # Initialize results storage
+        self.results = {}
+        self.timing_data = []
+        total_images = len(images)
+
+        # Record batch start time
+        batch_start_time = time.time()
+
+        print(f"\n{'='*60}")
+        print(f"Starting batch processing: {total_images} images")
+        print(f"Platform: {platform} | Variant: {yolo_variant} | Language: {language}")
+        print(f"{'='*60}\n")
+
+        # Process each image
+        for idx, image in enumerate(images):
+            image_start_time = time.time()
+            image_index = idx + 1
+
+            try:
+                print(f"[{image_index}/{total_images}] Processing image {image_index}...")
+
+                # Call pipeline's process_image method
+                result = self.pipeline.process_image(
+                    image=image,
+                    platform=platform,
+                    yolo_variant=yolo_variant,
+                    language=language
+                )
+
+                # Store successful result
+                self.results[image_index] = {
+                    'status': 'success',
+                    'result': result,
+                    'image_index': image_index,
+                    'error': None
+                }
+
+                print(f"✓ Image {image_index} processed successfully")
+
+            except Exception as e:
+                # Store error result
+                error_trace = traceback.format_exc()
+                self.results[image_index] = {
+                    'status': 'failed',
+                    'result': None,
+                    'image_index': image_index,
+                    'error': {
+                        'type': type(e).__name__,
+                        'message': str(e),
+                        'traceback': error_trace
+                    }
+                }
+
+                print(f"✗ Image {image_index} failed: {str(e)}")
+
+            # Record processing time for this image
+            image_elapsed = time.time() - image_start_time
+            self.timing_data.append(image_elapsed)
+
+            # Calculate progress information
+            completed = image_index
+            percent = (completed / total_images) * 100
+
+            # Estimate remaining time based on average processing time
+            avg_time = sum(self.timing_data) / len(self.timing_data)
+            remaining_images = total_images - completed
+            estimated_remaining = avg_time * remaining_images
+
+            # Call progress callback if provided
+            if progress_callback:
+                progress_info = {
+                    'current': completed,
+                    'total': total_images,
+                    'percent': percent,
+                    'estimated_remaining': estimated_remaining,
+                    'latest_result': self.results[image_index],
+                    'image_index': image_index
+                }
+                progress_callback(progress_info)
+
+        # Calculate batch summary
+        batch_elapsed = time.time() - batch_start_time
+        total_processed = len(self.results)
+        total_failed = sum(1 for r in self.results.values() if r['status'] == 'failed')
+        total_success = total_processed - total_failed
+
+        print(f"\n{'='*60}")
+        print(f"Batch processing completed!")
+        print(f"Total: {total_processed} | Success: {total_success} | Failed: {total_failed}")
+        print(f"Total time: {batch_elapsed:.2f}s | Avg per image: {batch_elapsed/total_processed:.2f}s")
+        print(f"{'='*60}\n")
+
+        # Return batch summary
+        return {
+            'results': self.results,
+            'total_processed': total_processed,
+            'total_success': total_success,
+            'total_failed': total_failed,
+            'total_time': batch_elapsed,
+            'average_time_per_image': batch_elapsed / total_processed if total_processed > 0 else 0
+        }
+
+    def get_result(self, image_index: int) -> Optional[Dict]:
+        """
+        Get processing result for a specific image.
+
+        Args:
+            image_index: Index of the image (1-based)
+
+        Returns:
+            Result dictionary or None if index doesn't exist
+        """
+        return self.results.get(image_index)
+
+    def get_all_results(self) -> Dict:
+        """
+        Get all processing results.
+
+        Returns:
+            Complete results dictionary
+        """
+        return self.results
+
+    def clear_results(self):
+        """Clear all stored results to free memory."""
+        self.results = {}
+        self.timing_data = []
+        print("✓ Batch results cleared")
+
+    def export_to_json(self, results: Dict, output_path: str) -> str:
+        """
+        Export batch results to JSON format.
+
+        Args:
+            results: Results dictionary from process_batch
+            output_path: Path to save JSON file
+
+        Returns:
+            Path to the saved JSON file
+        """
+        # Prepare export data
+        export_data = {
+            'batch_summary': {
+                'total_processed': results.get('total_processed', 0),
+                'total_success': results.get('total_success', 0),
+                'total_failed': results.get('total_failed', 0),
+                'total_time': results.get('total_time', 0),
+                'average_time_per_image': results.get('average_time_per_image', 0)
+            },
+            'images': []
+        }
+
+        # Process each image result
+        for img_idx, img_result in results.get('results', {}).items():
+            if img_result['status'] == 'success':
+                result_data = img_result['result']
+                image_export = {
+                    'image_index': img_idx,
+                    'status': 'success',
+                    'captions': result_data.get('captions', []),
+                    'detected_objects': [
+                        det['class_name'] for det in result_data.get('detections', [])
+                    ],
+                    'detected_brands': [
+                        brand[0] if isinstance(brand, tuple) else brand
+                        for brand in result_data.get('brands', [])
+                    ],
+                    'scene_info': result_data.get('scene', {}),
+                    'lighting': result_data.get('lighting', {})
+                }
+            else:
+                image_export = {
+                    'image_index': img_idx,
+                    'status': 'failed',
+                    'error': img_result.get('error', {})
+                }
+
+            export_data['images'].append(image_export)
+
+        # Write to JSON file
+        with open(output_path, 'w', encoding='utf-8') as f:
+            json.dump(export_data, f, ensure_ascii=False, indent=2)
+
+        print(f"✓ Batch results exported to JSON: {output_path}")
+        return output_path
+
+    def export_to_csv(self, results: Dict, output_path: str) -> str:
+        """
+        Export batch results to CSV format.
+
+        Args:
+            results: Results dictionary from process_batch
+            output_path: Path to save CSV file
+
+        Returns:
+            Path to the saved CSV file
+        """
+        # Define CSV headers
+        headers = [
+            'image_index',
+            'status',
+            'caption_professional',
+            'caption_creative',
+            'caption_authentic',
+            'detected_objects',
+            'detected_brands',
+            'hashtags'
+        ]
+
+        # Prepare rows
+        rows = []
+        for img_idx, img_result in results.get('results', {}).items():
+            if img_result['status'] == 'success':
+                result_data = img_result['result']
+                captions = result_data.get('captions', [])
+
+                # Extract captions by tone
+                caption_professional = ''
+                caption_creative = ''
+                caption_authentic = ''
+                all_hashtags = []
+
+                for cap in captions:
+                    tone = cap.get('tone', '').lower()
+                    caption_text = cap.get('caption', '')
+                    hashtags = cap.get('hashtags', [])
+
+                    if 'professional' in tone:
+                        caption_professional = caption_text
+                    elif 'creative' in tone:
+                        caption_creative = caption_text
+                    elif 'authentic' in tone or 'casual' in tone:
+                        caption_authentic = caption_text
+
+                    all_hashtags.extend(hashtags)
+
+                # Remove duplicates from hashtags
+                all_hashtags = list(set(all_hashtags))
+
+                row = {
+                    'image_index': img_idx,
+                    'status': 'success',
+                    'caption_professional': caption_professional,
+                    'caption_creative': caption_creative,
+                    'caption_authentic': caption_authentic,
+                    'detected_objects': ', '.join([
+                        det['class_name'] for det in result_data.get('detections', [])
+                    ]),
+                    'detected_brands': ', '.join([
+                        brand[0] if isinstance(brand, tuple) else brand
+                        for brand in result_data.get('brands', [])
+                    ]),
+                    'hashtags': ' '.join([f'#{tag}' for tag in all_hashtags])
+                }
+            else:
+                row = {
+                    'image_index': img_idx,
+                    'status': 'failed',
+                    'caption_professional': '',
+                    'caption_creative': '',
+                    'caption_authentic': '',
+                    'detected_objects': '',
+                    'detected_brands': '',
+                    'hashtags': ''
+                }
+
+            rows.append(row)
+
+        # Write to CSV file
+        with open(output_path, 'w', newline='', encoding='utf-8') as f:
+            writer = csv.DictWriter(f, fieldnames=headers)
+            writer.writeheader()
+            writer.writerows(rows)
+
+        print(f"✓ Batch results exported to CSV: {output_path}")
+        return output_path
+
+    def export_to_zip(self, results: Dict, images: List[Image.Image], output_path: str) -> str:
+        """
+        Export batch results to ZIP archive with images and text files.
+
+        Args:
+            results: Results dictionary from process_batch
+            images: List of original PIL Image objects
+            output_path: Path to save ZIP file
+
+        Returns:
+            Path to the saved ZIP file
+        """
+        with zipfile.ZipFile(output_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+            for img_idx, img_result in results.get('results', {}).items():
+                if img_result['status'] == 'success':
+                    # Save original image
+                    image_filename = f"image_{img_idx:03d}.jpg"
+
+                    # Convert PIL image to bytes
+                    img_buffer = BytesIO()
+                    images[img_idx - 1].save(img_buffer, format='JPEG', quality=95)
+                    img_buffer.seek(0)
+
+                    zipf.writestr(image_filename, img_buffer.read())
+
+                    # Save caption text file
+                    text_filename = f"image_{img_idx:03d}.txt"
+                    text_content = self._format_result_as_text(img_result['result'])
+                    zipf.writestr(text_filename, text_content)
+
+                    print(f"✓ Added to ZIP: {image_filename} and {text_filename}")
+
+        print(f"✓ Batch results exported to ZIP: {output_path}")
+        return output_path
+
+    def _format_result_as_text(self, result: Dict) -> str:
+        """
+        Format a single image result as plain text for ZIP export.
+
+        Args:
+            result: Single image processing result dictionary
+
+        Returns:
+            Formatted text string
+        """
+        lines = []
+        lines.append("=" * 60)
+        lines.append("PIXCRIBE - AI GENERATED SOCIAL MEDIA CONTENT")
+        lines.append("=" * 60)
+        lines.append("")
+
+        # Captions section
+        captions = result.get('captions', [])
+        for i, cap in enumerate(captions, 1):
+            tone = cap.get('tone', 'Unknown').upper()
+            caption_text = cap.get('caption', '')
+            hashtags = cap.get('hashtags', [])
+
+            lines.append(f"CAPTION {i} - {tone} STYLE")
+            lines.append("-" * 60)
+            lines.append(caption_text)
+            lines.append("")
+            lines.append("Hashtags:")
+            lines.append(' '.join([f'#{tag}' for tag in hashtags]))
+            lines.append("")
+            lines.append("")
+
+        # Detected objects section
+        detections = result.get('detections', [])
+        if detections:
+            lines.append("DETECTED OBJECTS")
+            lines.append("-" * 60)
+            object_names = [det['class_name'] for det in detections]
+            lines.append(', '.join(object_names))
+            lines.append("")
+
+        # Detected brands section
+        brands = result.get('brands', [])
+        if brands:
+            lines.append("DETECTED BRANDS")
+            lines.append("-" * 60)
+            brand_names = [
+                brand[0] if isinstance(brand, tuple) else brand
+                for brand in brands
+            ]
+            lines.append(', '.join(brand_names))
+            lines.append("")
+
+        # Scene information
+        scene_info = result.get('scene', {})
+        if scene_info:
+            lines.append("SCENE ANALYSIS")
+            lines.append("-" * 60)
+
+            if 'lighting' in scene_info:
+                lighting = scene_info['lighting'].get('top', 'Unknown')
+                lines.append(f"Lighting: {lighting}")
+
+            if 'mood' in scene_info:
+                mood = scene_info['mood'].get('top', 'Unknown')
+                lines.append(f"Mood: {mood}")
+
+            lines.append("")
+
+        lines.append("=" * 60)
+        lines.append("Generated by Pixcribe V5 - AI Social Media Caption Generator")
+        lines.append("=" * 60)
+
+        return '\n'.join(lines)
+
+
+print("✓ BatchProcessingManager defined")

pixcribe_pipeline.py

@@ -2,7 +2,7 @@ import sys
 import time
 import traceback
 from PIL import Image
-from typing import Dict
+from typing import Dict, List, Callable, Optional
 
 from image_processor_manager import ImageProcessorManager
 from yolo_detection_manager import YOLODetectionManager
@@ -18,6 +18,7 @@ from scene_compatibility_manager import SceneCompatibilityManager
 from caption_generation_manager import CaptionGenerationManager
 from detection_fusion_manager import DetectionFusionManager
 from output_processing_manager import OutputProcessingManager
+from batch_processing_manager import BatchProcessingManager
 
 class PixcribePipeline:
     """Main Facade coordinating all components (V2 with multi-language support)"""
@@ -67,9 +68,12 @@ class PixcribePipeline:
         # Initialize OutputProcessingManager with PromptLibrary for smart hashtag generation
         self.output_processor = OutputProcessingManager(self.prompt_library)
 
+        # Initialize BatchProcessingManager with pipeline reference
+        self.batch_processor = BatchProcessingManager(pipeline=self)
+
         elapsed = time.time() - start_time
         print("="*60)
-        print(f"✓ Pipeline initialized successfully (Time: {elapsed:.2f}s)")
+        print(f"✓ Pipeline V5 initialized successfully with batch processing (Time: {elapsed:.2f}s)")
         print("="*60)
 
     def process_image(self, image, platform='instagram', yolo_variant='l', language='zh') -> Dict:
@@ -332,4 +336,50 @@ class PixcribePipeline:
             # Re-raise exception so it can be caught and displayed
             raise
 
-print("✓ PixcribePipeline (V2 with VLM Verification, Scene Compatibility, and Adaptive Weights) defined")
+    def process_batch(
+        self,
+        images: List[Image.Image],
+        platform: str = 'instagram',
+        yolo_variant: str = 'l',
+        language: str = 'zh',
+        progress_callback: Optional[Callable] = None
+    ) -> Dict:
+        """
+        Process multiple images in batch with progress tracking.
+
+        This method provides a Facade interface to the BatchProcessingManager,
+        allowing batch processing through the main Pipeline API.
+
+        Args:
+            images: List of PIL Image objects to process (max 10)
+            platform: Target social media platform ('instagram', 'tiktok', 'xiaohongshu')
+            yolo_variant: YOLO model variant ('m', 'l', 'x')
+            language: Caption language ('zh' for Traditional Chinese, 'en' for English)
+            progress_callback: Optional callback function for progress updates
+
+        Returns:
+            Dictionary containing:
+                - results: Dict mapping image index to processing results
+                - total_processed: Total number of images processed
+                - total_success: Number of successfully processed images
+                - total_failed: Number of failed images
+                - total_time: Total processing time in seconds
+                - average_time_per_image: Average time per image in seconds
+
+        Raises:
+            ValueError: If images list is empty or exceeds 10 images
+
+        Example:
+            >>> images = [Image.open(f'image{i}.jpg') for i in range(1, 6)]
+            >>> results = pipeline.process_batch(images, platform='instagram')
+            >>> print(f"Processed {results['total_success']}/{results['total_processed']} images")
+        """
+        return self.batch_processor.process_batch(
+            images=images,
+            platform=platform,
+            yolo_variant=yolo_variant,
+            language=language,
+            progress_callback=progress_callback
+        )
+
+print("✓ PixcribePipeline V5 (with Batch Processing) defined")

style.py

@@ -0,0 +1,765 @@
+class Style:
+    """Manages all CSS styling for Pixcribe application"""
+
+    @staticmethod
+    def get_all_css() -> str:
+        """
+        Return complete CSS styling for the entire application.
+
+        Returns:
+            Complete CSS string with all styling rules
+        """
+        return """
+/* ==================== Global Reset & Base ==================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.gradio-container {
+    background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+    min-height: 100vh !important;
+}
+
+/* Main content wrapper - Generous padding to prevent edge clipping */
+.contain {
+    max-width: 1600px !important;
+    margin: 0 auto !important;
+    padding: 64px 96px 96px 96px !important;
+}
+
+/* ==================== Header ==================== */
+.app-header {
+    text-align: center;
+    margin-bottom: 72px;
+    animation: fadeInDown 0.8s ease-out;
+    padding: 0 32px;
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.app-title {
+    font-size: 72px;
+    font-weight: 800;
+    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 24px;
+    letter-spacing: -0.05em;
+    line-height: 1.1;
+}
+
+.app-subtitle {
+    font-size: 26px;
+    font-weight: 400;
+    color: #6C757D;
+    margin-bottom: 0;
+    letter-spacing: 0.01em;
+}
+
+/* ==================== Layout ==================== */
+.main-row {
+    gap: 48px !important;
+    margin-bottom: 48px !important;
+}
+
+/* Left column elegant container */
+.main-row > .column:first-child {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(252, 253, 254, 0.6) 100%) !important;
+    border-radius: 28px !important;
+    padding: 40px !important;
+    border: 1px solid rgba(52, 152, 219, 0.08) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
+}
+
+/* Right column elegant container */
+.main-row > .column:last-child {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(252, 253, 254, 0.6) 100%) !important;
+    border-radius: 28px !important;
+    padding: 40px !important;
+    border: 1px solid rgba(52, 152, 219, 0.08) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
+}
+
+/* ==================== Premium Cards - Light & Spacious ==================== */
+.upload-card {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 32px !important;
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.06),
+        0 2px 4px rgba(0, 0, 0, 0.03),
+        0 1px 2px rgba(0, 0, 0, 0.02) !important;
+    border: 1px solid rgba(0, 0, 0, 0.05) !important;
+    padding: 48px !important;
+    margin-bottom: 32px !important;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+    overflow: visible !important;
+}
+
+.results-card {
+    background: transparent !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    border: none !important;
+    padding: 0 !important;
+    margin-bottom: 32px !important;
+    overflow: visible !important;
+}
+
+/* Caption Results Container - Elegant Design */
+.caption-results-container {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(252, 253, 254, 0.7) 100%) !important;
+    border-radius: 28px !important;
+    padding: 44px !important;
+    border: 1px solid rgba(52, 152, 219, 0.1) !important;
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, 0.04),
+        0 2px 8px rgba(52, 152, 219, 0.03) !important;
+    margin-bottom: 40px !important;
+    overflow: visible !important;
+}
+
+.upload-card:hover {
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.10),
+        0 4px 8px rgba(0, 0, 0, 0.06) !important;
+    transform: translateY(-6px);
+    border-color: rgba(52, 152, 219, 0.3) !important;
+}
+
+/* ==================== Upload Area ==================== */
+.upload-area {
+    border: 3px dashed rgba(52, 152, 219, 0.35) !important;
+    border-radius: 28px !important;
+    background: linear-gradient(135deg, rgba(52, 152, 219, 0.03) 0%, rgba(52, 152, 219, 0.06) 100%) !important;
+    padding: 96px 40px !important;
+    text-align: center !important;
+    transition: all 0.3s ease !important;
+    min-height: 360px !important;
+}
+
+.upload-area:hover {
+    border-color: #3498DB !important;
+    background: linear-gradient(135deg, rgba(52, 152, 219, 0.06) 0%, rgba(52, 152, 219, 0.12) 100%) !important;
+    transform: scale(1.02);
+}
+
+/* ==================== Section Titles - Consistent Spacing ==================== */
+.section-title {
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    color: #2C3E50 !important;
+    margin-bottom: 20px !important;
+    letter-spacing: -0.02em !important;
+    padding-bottom: 0 !important;
+    border-bottom: none !important;
+    text-align: left !important;
+    margin-top: 0 !important;
+}
+
+.section-title-left {
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    color: #2C3E50 !important;
+    margin-bottom: 20px !important;
+    margin-top: 0 !important;
+    letter-spacing: -0.02em !important;
+    text-align: left !important;
+    border-bottom: none !important;
+    padding-bottom: 0 !important;
+}
+
+/* ==================== Form Elements - Generous Padding ==================== */
+.settings-row {
+    gap: 24px !important;
+    margin-bottom: 28px !important;
+}
+
+.radio-group {
+    background: rgba(248, 249, 250, 0.5) !important;
+    border-radius: 20px !important;
+    padding: 24px 28px !important;
+    border: none !important;
+    margin-bottom: 24px !important;
+    border: 1px solid rgba(0, 0, 0, 0.04) !important;
+}
+
+.radio-group:last-child {
+    margin-bottom: 0 !important;
+}
+
+/* Inline radio groups for side-by-side layout */
+.radio-group-inline {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 249, 250, 0.5) 100%) !important;
+    border-radius: 16px !important;
+    padding: 20px !important;
+    border: 1px solid rgba(52, 152, 219, 0.1) !important;
+    margin-bottom: 0 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
+    transition: all 0.3s ease !important;
+}
+
+.radio-group-inline:hover {
+    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.08) !important;
+    border-color: rgba(52, 152, 219, 0.2) !important;
+}
+
+.radio-group label {
+    color: #6C757D !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    margin-bottom: 16px !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase !important;
+    display: block !important;
+    text-align: left !important;
+}
+
+/* Radio group title (the actual input label) */
+.radio-group > label:first-child {
+    color: #2C3E50 !important;
+    font-weight: 700 !important;
+    font-size: 19px !important;
+    margin-bottom: 16px !important;
+    letter-spacing: -0.02em !important;
+    text-transform: none !important;
+}
+
+/* Inline radio group title - BIGGER and BOLD */
+.radio-group-inline > label:first-child {
+    color: #2C3E50 !important;
+    font-weight: 700 !important;
+    font-size: 18px !important;
+    margin-bottom: 14px !important;
+    letter-spacing: -0.01em !important;
+    text-transform: none !important;
+    display: block !important;
+}
+
+.radio-group input[type="radio"] {
+    accent-color: #3498DB !important;
+    width: 22px !important;
+    height: 22px !important;
+    margin-right: 14px !important;
+}
+
+/* Radio option labels */
+.radio-group > div > label {
+    color: #495057 !important;
+    font-weight: 500 !important;
+    font-size: 17px !important;
+    letter-spacing: -0.01em !important;
+    text-transform: none !important;
+    padding: 14px 20px !important;
+    border-radius: 14px !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* Inline radio option labels - BIGGER */
+.radio-group-inline > div > label {
+    color: #495057 !important;
+    font-weight: 500 !important;
+    font-size: 16px !important;
+    letter-spacing: -0.01em !important;
+    text-transform: none !important;
+    padding: 12px 16px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+    background: rgba(255, 255, 255, 0.6) !important;
+    margin-bottom: 8px !important;
+    border: 1px solid rgba(0, 0, 0, 0.04) !important;
+}
+
+.radio-group > div > label:hover {
+    background: rgba(52, 152, 219, 0.08) !important;
+}
+
+.radio-group-inline > div > label:hover {
+    background: rgba(52, 152, 219, 0.12) !important;
+    transform: translateX(4px);
+}
+
+/* ==================== Button ==================== */
+.generate-button {
+    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 20px !important;
+    padding: 24px 64px !important;
+    font-size: 19px !important;
+    font-weight: 700 !important;
+    cursor: pointer !important;
+    box-shadow:
+        0 6px 24px rgba(52, 152, 219, 0.35),
+        0 3px 6px rgba(52, 152, 219, 0.25) !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    letter-spacing: -0.02em !important;
+    width: 100% !important;
+    margin-top: 24px !important;
+}
+
+.generate-button:hover {
+    transform: translateY(-6px) scale(1.02) !important;
+    box-shadow:
+        0 16px 48px rgba(52, 152, 219, 0.45),
+        0 6px 12px rgba(52, 152, 219, 0.35) !important;
+}
+
+.generate-button:active {
+    transform: translateY(-3px) scale(1.01) !important;
+}
+
+/* ==================== Caption Cards - Light & Elegant ==================== */
+.caption-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 28px;
+    padding: 32px 36px;
+    margin-bottom: 28px;
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.05),
+        0 2px 4px rgba(0, 0, 0, 0.03);
+    position: relative;
+}
+
+.caption-card:hover {
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.10),
+        0 4px 8px rgba(0, 0, 0, 0.06);
+    transform: translateY(-6px);
+    border-color: rgba(52, 152, 219, 0.3);
+}
+
+.caption-header {
+    font-size: 15px;
+    font-weight: 700;
+    color: #6C757D;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    margin-bottom: 20px;
+}
+
+.caption-text {
+    font-size: 21px;
+    font-weight: 400;
+    color: #2C3E50;
+    line-height: 1.8;
+    margin-bottom: 24px;
+    letter-spacing: -0.01em;
+}
+
+.caption-hashtags {
+    font-size: 18px;
+    font-weight: 600;
+    color: #3498DB;
+    margin-bottom: 0;
+    word-wrap: break-word;
+    line-height: 1.75;
+}
+
+/* Copy Button */
+.copy-button {
+    position: absolute;
+    top: 28px;
+    right: 28px;
+    background: rgba(52, 152, 219, 0.10);
+    border: 1px solid rgba(52, 152, 219, 0.25);
+    border-radius: 14px;
+    padding: 12px 20px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #3498DB;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.copy-button:hover {
+    background: rgba(52, 152, 219, 0.18);
+    border-color: #3498DB;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
+}
+
+.copy-button:active {
+    transform: translateY(0);
+}
+
+.copy-button.copied {
+    background: rgba(39, 174, 96, 0.15);
+    border-color: #27AE60;
+    color: #27AE60;
+}
+
+/* ==================== Footer ==================== */
+.app-footer {
+    text-align: center;
+    margin-top: 96px;
+    padding-top: 64px;
+    border-top: 3px solid rgba(0, 0, 0, 0.08);
+    animation: fadeInUp 0.8s ease-out 0.3s backwards;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.footer-text {
+    font-size: 17px;
+    color: #6C757D;
+    line-height: 2.0;
+    letter-spacing: -0.01em;
+    font-weight: 500;
+}
+
+.footer-models {
+    font-size: 15px;
+    color: #ADB5BD;
+    margin-top: 20px;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+}
+
+/* ==================== Image Display ==================== */
+.image-container {
+    border-radius: 28px !important;
+    overflow: hidden !important;
+    box-shadow:
+        0 6px 24px rgba(0, 0, 0, 0.10),
+        0 3px 6px rgba(0, 0, 0, 0.06) !important;
+}
+
+.image-container img {
+    border-radius: 28px !important;
+    box-shadow:
+        0 6px 24px rgba(0, 0, 0, 0.12),
+        0 3px 6px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* ==================== Responsive Design ==================== */
+@media (max-width: 768px) {
+    .contain {
+        padding: 48px 32px 64px 32px !important;
+    }
+
+    .app-title {
+        font-size: 52px;
+    }
+
+    .app-subtitle {
+        font-size: 20px;
+    }
+
+    .upload-card, .options-card, .results-card {
+        padding: 40px !important;
+    }
+
+    .upload-area {
+        padding: 64px 32px !important;
+        min-height: 280px !important;
+    }
+
+    .caption-card {
+        padding: 28px;
+    }
+
+    .section-title {
+        font-size: 30px !important;
+    }
+
+    .copy-button {
+        top: 20px;
+        right: 20px;
+        padding: 10px 16px;
+        font-size: 14px;
+    }
+}
+
+/* ==================== Loading Animation ==================== */
+@keyframes shimmer {
+    0% {
+        background-position: -1000px 0;
+    }
+    100% {
+        background-position: 1000px 0;
+    }
+}
+
+.loading {
+    animation: shimmer 2s infinite;
+    background: linear-gradient(to right, #f8f9fa 4%, #e9ecef 25%, #f8f9fa 36%);
+    background-size: 1000px 100%;
+}
+
+/* ==================== Batch Processing Styles ==================== */
+.batch-results-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding: 24px 0 !important;
+}
+
+.batch-result-card {
+    background: white !important;
+    border-radius: 16px !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
+    margin-bottom: 20px !important;
+    transition: all 0.3s ease !important;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+}
+
+.batch-result-card:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
+}
+
+.card-header {
+    padding: 20px 24px !important;
+    border-bottom: 1px solid #E9ECEF !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 16px !important;
+}
+
+.card-thumbnail {
+    width: 80px !important;
+    height: 80px !important;
+    object-fit: cover !important;
+    border-radius: 8px !important;
+    border: 2px solid #F8F9FA !important;
+}
+
+.card-title {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    color: #2C3E50 !important;
+    flex: 1 !important;
+}
+
+.card-status {
+    font-size: 24px !important;
+}
+
+.card-content {
+    padding: 24px !important;
+    font-size: 15px !important;
+    line-height: 1.6 !important;
+}
+
+.caption-section {
+    margin-bottom: 24px !important;
+    padding: 16px !important;
+    background: #F8F9FA !important;
+    border-radius: 12px !important;
+}
+
+.caption-label {
+    font-weight: 600 !important;
+    color: #495057 !important;
+    margin-bottom: 8px !important;
+    font-size: 14px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+}
+
+.caption-text {
+    line-height: 1.7 !important;
+    color: #2C3E50 !important;
+    margin-bottom: 12px !important;
+}
+
+.hashtags-list {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+    margin-top: 12px !important;
+}
+
+.hashtag-item {
+    background: #E8F4F8 !important;
+    color: #2980B9 !important;
+    padding: 6px 12px !important;
+    border-radius: 8px !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+}
+
+/* Progress Display Styles */
+.progress-container {
+    padding: 24px 32px !important;
+    background: linear-gradient(135deg, #F0F3F7 0%, #E8EDF3 100%) !important;
+    border-radius: 16px !important;
+    margin: 24px 0 !important;
+}
+
+.progress-bar-wrapper {
+    height: 12px !important;
+    background: #DFE4EA !important;
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    margin: 16px 0 !important;
+}
+
+.progress-bar-fill {
+    height: 100% !important;
+    background: linear-gradient(90deg, #3498DB 0%, #2ECC71 100%) !important;
+    border-radius: 12px !important;
+    transition: width 0.4s ease !important;
+}
+
+.progress-text {
+    font-size: 15px !important;
+    color: #495057 !important;
+    text-align: center !important;
+    font-weight: 500 !important;
+}
+
+.progress-stats {
+    display: flex !important;
+    justify-content: space-between !important;
+    margin-top: 12px !important;
+    font-size: 14px !important;
+    color: #6C757D !important;
+}
+
+/* Export Panel Styles */
+.export-panel {
+    padding: 24px !important;
+    background: linear-gradient(135deg, #F8F9FA 0%, #ECEFF3 100%) !important;
+    border-radius: 16px !important;
+    margin: 32px 0 !important;
+    border: 1px solid #DEE2E6 !important;
+}
+
+.export-panel-title {
+    font-size: 18px !important;
+    font-weight: 700 !important;
+    color: #2C3E50 !important;
+    margin-bottom: 16px !important;
+}
+
+.export-buttons-row {
+    display: flex !important;
+    gap: 16px !important;
+    flex-wrap: wrap !important;
+}
+
+.export-button {
+    padding: 12px 24px !important;
+    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 12px !important;
+    cursor: pointer !important;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+}
+
+.export-button:hover {
+    background: linear-gradient(135deg, #2980B9 0%, #21618C 100%) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
+}
+
+.export-button-icon {
+    font-size: 18px !important;
+}
+
+/* Batch Summary Card */
+.batch-summary-card {
+    background: linear-gradient(135deg, #E8F8F5 0%, #D5F4E6 100%) !important;
+    border-left: 4px solid #27AE60 !important;
+    border-radius: 16px !important;
+    padding: 24px 32px !important;
+    margin: 24px 0 !important;
+}
+
+.summary-title {
+    font-size: 20px !important;
+    font-weight: 700 !important;
+    color: #27AE60 !important;
+    margin-bottom: 16px !important;
+}
+
+.summary-stats {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
+    gap: 16px !important;
+}
+
+.stat-item {
+    text-align: center !important;
+    padding: 12px !important;
+}
+
+.stat-value {
+    font-size: 32px !important;
+    font-weight: 700 !important;
+    color: #2C3E50 !important;
+}
+
+.stat-label {
+    font-size: 14px !important;
+    color: #6C757D !important;
+    margin-top: 4px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+}
+
+/* Error Display */
+.error-card-content {
+    background: #FADBD8 !important;
+    border: 2px solid #E74C3C !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    color: #C0392B !important;
+}
+
+.error-title {
+    font-weight: 700 !important;
+    font-size: 16px !important;
+    margin-bottom: 8px !important;
+}
+
+.error-message {
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+"""
+
+
+print("✓ Style class defined")

ui_manager.py

@@ -1,527 +1,13 @@
 import gradio as gr
 from typing import Dict, List
+from style import Style
 
 class UIManager:
     """Manages all UI components and styling for Pixcribe"""
 
     def __init__(self):
-        self.custom_css = self._get_custom_css()
-
-    def _get_custom_css(self) -> str:
-        """Return complete CSS styling - Elegant light design"""
-        return """
-/* ==================== Global Reset & Base ==================== */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-.gradio-container {
-    background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%) !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-    padding: 0 !important;
-    max-width: 100% !important;
-    min-height: 100vh !important;
-}
-
-/* Main content wrapper - Generous padding to prevent edge clipping */
-.contain {
-    max-width: 1600px !important;
-    margin: 0 auto !important;
-    padding: 64px 96px 96px 96px !important;
-}
-
-/* ==================== Header ==================== */
-.app-header {
-    text-align: center;
-    margin-bottom: 72px;
-    animation: fadeInDown 0.8s ease-out;
-    padding: 0 32px;
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translateY(-30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.app-title {
-    font-size: 72px;
-    font-weight: 800;
-    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin-bottom: 24px;
-    letter-spacing: -0.05em;
-    line-height: 1.1;
-}
-
-.app-subtitle {
-    font-size: 26px;
-    font-weight: 400;
-    color: #6C757D;
-    margin-bottom: 0;
-    letter-spacing: 0.01em;
-}
-
-/* ==================== Layout ==================== */
-.main-row {
-    gap: 48px !important;
-    margin-bottom: 48px !important;
-}
-
-/* Left column elegant container */
-.main-row > .column:first-child {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(252, 253, 254, 0.6) 100%) !important;
-    border-radius: 28px !important;
-    padding: 40px !important;
-    border: 1px solid rgba(52, 152, 219, 0.08) !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
-}
-
-/* Right column elegant container */
-.main-row > .column:last-child {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(252, 253, 254, 0.6) 100%) !important;
-    border-radius: 28px !important;
-    padding: 40px !important;
-    border: 1px solid rgba(52, 152, 219, 0.08) !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
-}
-
-/* ==================== Premium Cards - Light & Spacious ==================== */
-.upload-card {
-    background: rgba(255, 255, 255, 0.95) !important;
-    border-radius: 32px !important;
-    box-shadow:
-        0 4px 16px rgba(0, 0, 0, 0.06),
-        0 2px 4px rgba(0, 0, 0, 0.03),
-        0 1px 2px rgba(0, 0, 0, 0.02) !important;
-    border: 1px solid rgba(0, 0, 0, 0.05) !important;
-    padding: 48px !important;
-    margin-bottom: 32px !important;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
-    overflow: visible !important;
-}
-
-.results-card {
-    background: transparent !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    border: none !important;
-    padding: 0 !important;
-    margin-bottom: 32px !important;
-    overflow: visible !important;
-}
-
-/* Caption Results Container - Elegant Design */
-.caption-results-container {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(252, 253, 254, 0.7) 100%) !important;
-    border-radius: 28px !important;
-    padding: 44px !important;
-    border: 1px solid rgba(52, 152, 219, 0.1) !important;
-    box-shadow:
-        0 4px 20px rgba(0, 0, 0, 0.04),
-        0 2px 8px rgba(52, 152, 219, 0.03) !important;
-    margin-bottom: 40px !important;
-    overflow: visible !important;
-}
-
-.upload-card:hover {
-    box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.10),
-        0 4px 8px rgba(0, 0, 0, 0.06) !important;
-    transform: translateY(-6px);
-    border-color: rgba(52, 152, 219, 0.3) !important;
-}
-
-/* ==================== Upload Area ==================== */
-.upload-area {
-    border: 3px dashed rgba(52, 152, 219, 0.35) !important;
-    border-radius: 28px !important;
-    background: linear-gradient(135deg, rgba(52, 152, 219, 0.03) 0%, rgba(52, 152, 219, 0.06) 100%) !important;
-    padding: 96px 40px !important;
-    text-align: center !important;
-    transition: all 0.3s ease !important;
-    min-height: 360px !important;
-}
-
-.upload-area:hover {
-    border-color: #3498DB !important;
-    background: linear-gradient(135deg, rgba(52, 152, 219, 0.06) 0%, rgba(52, 152, 219, 0.12) 100%) !important;
-    transform: scale(1.02);
-}
-
-/* ==================== Section Titles - Consistent Spacing ==================== */
-.section-title {
-    font-size: 28px !important;
-    font-weight: 700 !important;
-    color: #2C3E50 !important;
-    margin-bottom: 20px !important;
-    letter-spacing: -0.02em !important;
-    padding-bottom: 0 !important;
-    border-bottom: none !important;
-    text-align: left !important;
-    margin-top: 0 !important;
-}
-
-.section-title-left {
-    font-size: 28px !important;
-    font-weight: 700 !important;
-    color: #2C3E50 !important;
-    margin-bottom: 20px !important;
-    margin-top: 0 !important;
-    letter-spacing: -0.02em !important;
-    text-align: left !important;
-    border-bottom: none !important;
-    padding-bottom: 0 !important;
-}
-
-/* ==================== Form Elements - Generous Padding ==================== */
-.settings-row {
-    gap: 24px !important;
-    margin-bottom: 28px !important;
-}
-
-.radio-group {
-    background: rgba(248, 249, 250, 0.5) !important;
-    border-radius: 20px !important;
-    padding: 24px 28px !important;
-    border: none !important;
-    margin-bottom: 24px !important;
-    border: 1px solid rgba(0, 0, 0, 0.04) !important;
-}
-
-.radio-group:last-child {
-    margin-bottom: 0 !important;
-}
-
-/* Inline radio groups for side-by-side layout */
-.radio-group-inline {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 249, 250, 0.5) 100%) !important;
-    border-radius: 16px !important;
-    padding: 20px !important;
-    border: 1px solid rgba(52, 152, 219, 0.1) !important;
-    margin-bottom: 0 !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
-    transition: all 0.3s ease !important;
-}
-
-.radio-group-inline:hover {
-    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.08) !important;
-    border-color: rgba(52, 152, 219, 0.2) !important;
-}
-
-.radio-group label {
-    color: #6C757D !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    margin-bottom: 16px !important;
-    letter-spacing: 0.08em !important;
-    text-transform: uppercase !important;
-    display: block !important;
-    text-align: left !important;
-}
-
-/* Radio group title (the actual input label) */
-.radio-group > label:first-child {
-    color: #2C3E50 !important;
-    font-weight: 700 !important;
-    font-size: 19px !important;
-    margin-bottom: 16px !important;
-    letter-spacing: -0.02em !important;
-    text-transform: none !important;
-}
-
-/* Inline radio group title - BIGGER and BOLD */
-.radio-group-inline > label:first-child {
-    color: #2C3E50 !important;
-    font-weight: 700 !important;
-    font-size: 18px !important;
-    margin-bottom: 14px !important;
-    letter-spacing: -0.01em !important;
-    text-transform: none !important;
-    display: block !important;
-}
-
-.radio-group input[type="radio"] {
-    accent-color: #3498DB !important;
-    width: 22px !important;
-    height: 22px !important;
-    margin-right: 14px !important;
-}
-
-/* Radio option labels */
-.radio-group > div > label {
-    color: #495057 !important;
-    font-weight: 500 !important;
-    font-size: 17px !important;
-    letter-spacing: -0.01em !important;
-    text-transform: none !important;
-    padding: 14px 20px !important;
-    border-radius: 14px !important;
-    transition: all 0.2s ease !important;
-    cursor: pointer !important;
-    display: flex !important;
-    align-items: center !important;
-}
-
-/* Inline radio option labels - BIGGER */
-.radio-group-inline > div > label {
-    color: #495057 !important;
-    font-weight: 500 !important;
-    font-size: 16px !important;
-    letter-spacing: -0.01em !important;
-    text-transform: none !important;
-    padding: 12px 16px !important;
-    border-radius: 10px !important;
-    transition: all 0.2s ease !important;
-    cursor: pointer !important;
-    display: flex !important;
-    align-items: center !important;
-    background: rgba(255, 255, 255, 0.6) !important;
-    margin-bottom: 8px !important;
-    border: 1px solid rgba(0, 0, 0, 0.04) !important;
-}
-
-.radio-group > div > label:hover {
-    background: rgba(52, 152, 219, 0.08) !important;
-}
-
-.radio-group-inline > div > label:hover {
-    background: rgba(52, 152, 219, 0.12) !important;
-    transform: translateX(4px);
-}
-
-/* ==================== Button ==================== */
-.generate-button {
-    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 20px !important;
-    padding: 24px 64px !important;
-    font-size: 19px !important;
-    font-weight: 700 !important;
-    cursor: pointer !important;
-    box-shadow:
-        0 6px 24px rgba(52, 152, 219, 0.35),
-        0 3px 6px rgba(52, 152, 219, 0.25) !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    letter-spacing: -0.02em !important;
-    width: 100% !important;
-    margin-top: 24px !important;
-}
-
-.generate-button:hover {
-    transform: translateY(-6px) scale(1.02) !important;
-    box-shadow:
-        0 16px 48px rgba(52, 152, 219, 0.45),
-        0 6px 12px rgba(52, 152, 219, 0.35) !important;
-}
-
-.generate-button:active {
-    transform: translateY(-3px) scale(1.01) !important;
-}
-
-/* ==================== Caption Cards - Light & Elegant ==================== */
-.caption-card {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(0, 0, 0, 0.06);
-    border-radius: 28px;
-    padding: 32px 36px;
-    margin-bottom: 28px;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    box-shadow:
-        0 4px 16px rgba(0, 0, 0, 0.05),
-        0 2px 4px rgba(0, 0, 0, 0.03);
-    position: relative;
-}
-
-.caption-card:hover {
-    box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.10),
-        0 4px 8px rgba(0, 0, 0, 0.06);
-    transform: translateY(-6px);
-    border-color: rgba(52, 152, 219, 0.3);
-}
-
-.caption-header {
-    font-size: 15px;
-    font-weight: 700;
-    color: #6C757D;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    margin-bottom: 20px;
-}
-
-.caption-text {
-    font-size: 21px;
-    font-weight: 400;
-    color: #2C3E50;
-    line-height: 1.8;
-    margin-bottom: 24px;
-    letter-spacing: -0.01em;
-}
-
-.caption-hashtags {
-    font-size: 18px;
-    font-weight: 600;
-    color: #3498DB;
-    margin-bottom: 0;
-    word-wrap: break-word;
-    line-height: 1.75;
-}
-
-/* Copy Button */
-.copy-button {
-    position: absolute;
-    top: 28px;
-    right: 28px;
-    background: rgba(52, 152, 219, 0.10);
-    border: 1px solid rgba(52, 152, 219, 0.25);
-    border-radius: 14px;
-    padding: 12px 20px;
-    font-size: 15px;
-    font-weight: 600;
-    color: #3498DB;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.copy-button:hover {
-    background: rgba(52, 152, 219, 0.18);
-    border-color: #3498DB;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
-}
-
-.copy-button:active {
-    transform: translateY(0);
-}
-
-.copy-button.copied {
-    background: rgba(39, 174, 96, 0.15);
-    border-color: #27AE60;
-    color: #27AE60;
-}
-
-/* ==================== Footer ==================== */
-.app-footer {
-    text-align: center;
-    margin-top: 96px;
-    padding-top: 64px;
-    border-top: 3px solid rgba(0, 0, 0, 0.08);
-    animation: fadeInUp 0.8s ease-out 0.3s backwards;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.footer-text {
-    font-size: 17px;
-    color: #6C757D;
-    line-height: 2.0;
-    letter-spacing: -0.01em;
-    font-weight: 500;
-}
-
-.footer-models {
-    font-size: 15px;
-    color: #ADB5BD;
-    margin-top: 20px;
-    font-weight: 600;
-    letter-spacing: 0.03em;
-}
-
-/* ==================== Image Display ==================== */
-.image-container {
-    border-radius: 28px !important;
-    overflow: hidden !important;
-    box-shadow:
-        0 6px 24px rgba(0, 0, 0, 0.10),
-        0 3px 6px rgba(0, 0, 0, 0.06) !important;
-}
-
-.image-container img {
-    border-radius: 28px !important;
-    box-shadow:
-        0 6px 24px rgba(0, 0, 0, 0.12),
-        0 3px 6px rgba(0, 0, 0, 0.08) !important;
-}
-
-/* ==================== Responsive Design ==================== */
-@media (max-width: 768px) {
-    .contain {
-        padding: 48px 32px 64px 32px !important;
-    }
-
-    .app-title {
-        font-size: 52px;
-    }
-
-    .app-subtitle {
-        font-size: 20px;
-    }
-
-    .upload-card, .options-card, .results-card {
-        padding: 40px !important;
-    }
-
-    .upload-area {
-        padding: 64px 32px !important;
-        min-height: 280px !important;
-    }
-
-    .caption-card {
-        padding: 28px;
-    }
-
-    .section-title {
-        font-size: 30px !important;
-    }
-
-    .copy-button {
-        top: 20px;
-        right: 20px;
-        padding: 10px 16px;
-        font-size: 14px;
-    }
-}
-
-/* ==================== Loading Animation ==================== */
-@keyframes shimmer {
-    0% {
-        background-position: -1000px 0;
-    }
-    100% {
-        background-position: 1000px 0;
-    }
-}
-
-.loading {
-    animation: shimmer 2s infinite;
-    background: linear-gradient(to right, #f8f9fa 4%, #e9ecef 25%, #f8f9fa 36%);
-    background-size: 1000px 100%;
-}
-"""
+        # Use centralized Style class for all CSS
+        self.custom_css = Style.get_all_css()
 
     def create_header(self):
         """Create application header"""
@@ -678,4 +164,215 @@ class UIManager:
 
         return captions_html
 
-print("✓ UIManager defined")
+    def create_batch_progress_html(self, current: int, total: int, percent: float, estimated_remaining: int) -> str:
+        """
+        Create HTML for batch processing progress display.
+
+        Args:
+            current: Number of images completed
+            total: Total number of images
+            percent: Completion percentage (0-100)
+            estimated_remaining: Estimated remaining time in seconds
+
+        Returns:
+            Formatted HTML string with progress bar and information
+        """
+        # Convert remaining time to minutes and seconds
+        minutes = int(estimated_remaining // 60)
+        seconds = int(estimated_remaining % 60)
+        time_str = f"{minutes}m {seconds}s" if minutes > 0 else f"{seconds}s"
+
+        html = f"""
+        <div class="progress-container">
+            <div class="progress-bar-wrapper">
+                <div class="progress-bar-fill" style="width: {percent}%;"></div>
+            </div>
+            <div class="progress-text">
+                Processing image {current} of {total}
+            </div>
+            <div class="progress-stats">
+                <span>Progress: {percent:.1f}%</span>
+                {f'<span>Estimated time remaining: {time_str}</span>' if estimated_remaining > 0 else ''}
+            </div>
+        </div>
+        """
+        return html
+
+    def format_batch_results_html(self, batch_results: Dict) -> str:
+        """
+        Format batch processing results as HTML.
+
+        Args:
+            batch_results: Dictionary containing batch processing results
+
+        Returns:
+            Formatted HTML string with all batch results
+        """
+        results = batch_results.get('results', {})
+
+        if not results:
+            return "<p style='color: #6C757D; padding: 24px; text-align: center;'>No results to display</p>"
+
+        # Build summary card
+        total_processed = batch_results.get('total_processed', 0)
+        total_success = batch_results.get('total_success', 0)
+        total_failed = batch_results.get('total_failed', 0)
+        total_time = batch_results.get('total_time', 0)
+        avg_time = batch_results.get('average_time_per_image', 0)
+
+        html_parts = []
+
+        # Summary card
+        html_parts.append(f"""
+        <div class="batch-summary-card">
+            <div class="summary-title">✓ Batch Processing Complete</div>
+            <div class="summary-stats">
+                <div class="stat-item">
+                    <div class="stat-value">{total_processed}</div>
+                    <div class="stat-label">Total Processed</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" style="color: #27AE60;">{total_success}</div>
+                    <div class="stat-label">Successful</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" style="color: #E74C3C;">{total_failed}</div>
+                    <div class="stat-label">Failed</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">{total_time:.1f}s</div>
+                    <div class="stat-label">Total Time</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">{avg_time:.1f}s</div>
+                    <div class="stat-label">Avg Per Image</div>
+                </div>
+            </div>
+        </div>
+        """)
+
+        # Start results container
+        html_parts.append('<div class="batch-results-container">')
+
+        # Process each image result
+        for img_idx in sorted(results.keys()):
+            img_result = results[img_idx]
+            status = img_result.get('status', 'unknown')
+
+            # Determine status icon and color
+            if status == 'success':
+                status_icon = '✓'
+                status_color = '#27AE60'
+            else:
+                status_icon = '✗'
+                status_color = '#E74C3C'
+
+            # Build card
+            card_html = f"""
+            <details class="batch-result-card" open>
+                <summary class="card-header">
+                    <span class="card-status" style="color: {status_color};">{status_icon}</span>
+                    <span class="card-title">Image {img_idx}</span>
+                </summary>
+                <div class="card-content">
+            """
+
+            if status == 'success':
+                result_data = img_result.get('result', {})
+                captions = result_data.get('captions', [])
+
+                # Display captions
+                for cap in captions:
+                    tone = cap.get('tone', 'Unknown').upper()
+                    caption_text = cap.get('caption', '')
+                    hashtags = cap.get('hashtags', [])
+
+                    card_html += f"""
+                    <div class="caption-section">
+                        <div class="caption-label">{tone} Style</div>
+                        <div class="caption-text">{caption_text}</div>
+                        <div class="hashtags-list">
+                            {''.join([f'<span class="hashtag-item">#{tag}</span>' for tag in hashtags])}
+                        </div>
+                    </div>
+                    """
+
+                # Display detected objects
+                detections = result_data.get('detections', [])
+                if detections:
+                    object_names = [det.get('class_name', 'unknown') for det in detections]
+                    card_html += f"""
+                    <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #E9ECEF;">
+                        <strong style="color: #495057;">Detected Objects:</strong>
+                        <span style="color: #6C757D;"> {', '.join(object_names)}</span>
+                    </div>
+                    """
+
+                # Display detected brands
+                brands = result_data.get('brands', [])
+                if brands:
+                    brand_names = [
+                        brand[0] if isinstance(brand, tuple) else brand
+                        for brand in brands
+                    ]
+                    card_html += f"""
+                    <div style="margin-top: 12px;">
+                        <strong style="color: #495057;">Detected Brands:</strong>
+                        <span style="color: #6C757D;"> {', '.join(brand_names)}</span>
+                    </div>
+                    """
+
+            else:
+                # Display error information
+                error = img_result.get('error', {})
+                error_type = error.get('type', 'Unknown Error')
+                error_message = error.get('message', 'No error message available')
+
+                card_html += f"""
+                <div class="error-card-content">
+                    <div class="error-title">{error_type}</div>
+                    <div class="error-message">{error_message}</div>
+                </div>
+                """
+
+            card_html += """
+                </div>
+            </details>
+            """
+
+            html_parts.append(card_html)
+
+        # Close results container
+        html_parts.append('</div>')
+
+        return ''.join(html_parts)
+
+    def create_export_panel_html(self) -> str:
+        """
+        Create HTML for export panel with download buttons.
+
+        Returns:
+            Formatted HTML string for export panel
+        """
+        return """
+        <div class="export-panel">
+            <div class="export-panel-title">📥 Export Batch Results</div>
+            <div class="export-buttons-row">
+                <button class="export-button" id="export-json-btn">
+                    <span class="export-button-icon">📄</span>
+                    <span>Download JSON</span>
+                </button>
+                <button class="export-button" id="export-csv-btn">
+                    <span class="export-button-icon">📊</span>
+                    <span>Download CSV</span>
+                </button>
+                <button class="export-button" id="export-zip-btn">
+                    <span class="export-button-icon">📦</span>
+                    <span>Download ZIP</span>
+                </button>
+            </div>
+        </div>
+        """
+
+
+print("✓ UIManager (V5 with Batch Processing Support) defined")