Image Gallery Processor

Build a utility that processes image galleries for submission to a Gradio API endpoint. The utility should handle collections of images with metadata and prepare them for upload.

Requirements

Your solution should implement a function that:

1. Accepts an array of image data where each image can be:

   • A File object (browser environment)
   • A Blob with associated metadata
   • An object containing image information (path, original name, metadata)

2. Processes the gallery array to extract and organize all image data, maintaining:

   • Original filenames
   • File sizes
   • MIME types
   • Any custom metadata attached to images

3. Returns a structured collection ready for API submission, where each image entry contains:

   • A reference to the image data
   • Complete metadata (filename, size, type)
   • Proper formatting for nested gallery structures

Test Cases

• Given an array of 3 File objects with names "photo1.jpg", "photo2.png", "photo3.jpg", the function returns a processed gallery array with 3 entries, each preserving the original filename and extracting correct MIME types @test

• Given an empty array, the function returns an empty processed gallery array @test

• Given a nested gallery structure (array of arrays) containing File objects, the function recursively processes all images while maintaining the nested structure @test

Implementation

@generates

API

/**
 * Processes a gallery of images for submission to a Gradio API.
 *
 * @param gallery - Array of image data (Files, Blobs, or image objects)
 * @returns Processed gallery array with complete metadata
 */
export function processGallery(gallery: any[]): any[];

Dependencies { .dependencies }

@gradio/client { .dependency }

Provides utilities for handling file uploads and gallery data structures in Gradio applications.