show ffmpg command in case of error

README.md

@@ -1,35 +1,21 @@
 ---
-title: AI Video Composer - Natural Language FFMPEG
-short_description: Describe what you want, AI writes the FFMPEG command
+title: AI Video Composer
+short_description: Create videos with FFMPEG + Qwen2.5-Coder
 emoji: 🏞
 colorFrom: red
 colorTo: yellow
 sdk: gradio
-sdk_version: 6.2.0
+sdk_version: 5.6.0
 app_file: app.py
 pinned: false
 disable_embedding: true
 models:
-- moonshotai/Kimi-K2-Instruct
-tags:
-- ffmpeg
-- video-editing
-- natural-language
-- ai-video
-- no-code
-- video-processing
-- media-converter
-- slideshow-maker
-- video-merger
-- command-generator
-- waveform-visualization
-- audio-to-video
-- image-to-video
+  - Qwen/Qwen2.5-Coder-32B-Instruct
 ---
 
-# 🏞 AI Video Composer - FFMPEG in Plain English
+# 🏞 AI Video Composer
 
-Describe what you want in plain English, like "create a slideshow from these images with background music" or "add a waveform visualization to this audio", and AI generates the exact FFMPEG command to make it happen.
+AI Video Composer is an intelligent media processing application that uses natural language instructions to create videos from your media assets. It leverages the Qwen2.5-Coder language model to generate FFmpeg commands based on your requirements.
 
 ## How It Works
 
@@ -58,7 +44,7 @@ Describe what you want in plain English, like "create a slideshow from these ima
 
 4. **Processing**:
    - The app analyzes your files and instructions
-   - Generates an optimized FFmpeg command using Kimi-K2
+   - Generates an optimized FFmpeg command using Qwen2.5-Coder
    - Executes the command and returns the processed video
    - Displays the generated FFmpeg command for transparency
 
@@ -76,7 +62,7 @@ Describe what you want in plain English, like "create a slideshow from these ima
 
 - Built with Gradio for the user interface
 - Uses FFmpeg for media processing
-- Powered by Kimi-K2 for command generation
+- Powered by Qwen2.5-Coder for command generation
 - Implements robust error handling and command validation
 - Processes files in a temporary directory for safety
 - Supports both simple operations and complex media transformations
@@ -92,4 +78,4 @@ Describe what you want in plain English, like "create a slideshow from these ima
 
 If you have ideas for improvements or bug fixes, please open a PR:
 
-[![Open a Pull Request](https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-pr-lg-light.svg)](https://huggingface.co/spaces/huggingface-projects/video-composer-gpt4/discussions)
+[![Open a Pull Request](https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-pr-lg-light.svg)](https://huggingface.co/spaces/huggingface-projects/video-composer-gpt4/discussions)

app.py

@@ -1,12 +1,4 @@
-import subprocess
-import sys
-
-# Install local mediagallery package at runtime (for HF Spaces)
-subprocess.check_call([sys.executable, "-m", "pip", "install", "-q", "./mediagallery"])
-
 import gradio as gr
-import spaces
-from gradio_mediagallery import MediaGallery
 
 from PIL import Image
 from moviepy.editor import VideoFileClip, AudioFileClip
@@ -20,25 +12,13 @@ import tempfile
 import shlex
 import shutil
 
-# Supported models configuration
-MODELS = {
-    "moonshotai/Kimi-K2-Instruct": {
-        "base_url": "https://router.huggingface.co/v1",
-        "env_key": "HF_TOKEN",
-        "model_name": "moonshotai/Kimi-K2-Instruct-0905:groq",
-    },
-}
-
-# Initialize client with first available model
-client = OpenAI(
-    base_url=next(iter(MODELS.values()))["base_url"],
-    api_key=os.environ[next(iter(MODELS.values()))["env_key"]],
-)
+HF_API_KEY = os.environ["HF_TOKEN"]
+
+client = OpenAI(base_url="https://api-inference.huggingface.co/v1/", api_key=HF_API_KEY)
 
 allowed_medias = [
     ".png",
     ".jpg",
-    ".webp",
     ".jpeg",
     ".tiff",
     ".bmp",
@@ -63,37 +43,7 @@ allowed_medias = [
 ]
 
 
-class FileWrapper:
-    """Wrapper to provide .name attribute for MediaGallery output tuples."""
-
-    def __init__(self, path):
-        self.name = path if isinstance(path, str) else str(path)
-
-
-def normalize_files(files):
-    """Convert MediaGallery output or gr.File output to list of file-like objects."""
-    if not files:
-        return []
-
-    result = []
-    for item in files:
-        if isinstance(item, tuple):
-            # MediaGallery returns (path, caption) tuples
-            path = item[0]
-            result.append(FileWrapper(path))
-        elif hasattr(item, "name"):
-            # gr.File returns objects with .name attribute
-            result.append(item)
-        elif isinstance(item, str):
-            # Direct file path
-            result.append(FileWrapper(item))
-        else:
-            result.append(FileWrapper(str(item)))
-    return result
-
-
 def get_files_infos(files):
-    files = normalize_files(files)
     results = []
     for file in files:
         file_path = Path(file.name)
@@ -134,16 +84,7 @@ def get_files_infos(files):
     return results
 
 
-def get_completion(
-    prompt,
-    files_info,
-    top_p,
-    temperature,
-    model_choice,
-    conversation_history=None,
-    previous_error=None,
-    previous_command=None,
-):
+def get_completion(prompt, files_info, top_p, temperature):
     # Create table header
     files_info_string = "| Type | Name | Dimensions | Duration | Audio Channels |\n"
     files_info_string += "|------|------|------------|-----------|--------|\n"
@@ -162,140 +103,47 @@ def get_completion(
 
         files_info_string += f"| {file_info['type']} | {file_info['name']} | {dimensions} | {duration} | {audio} |\n"
 
-    # Build the user message with optional error feedback
-    user_content = f"""## AVAILABLE ASSETS
+    messages = [
+        {
+            "role": "system",
+            "content": """
+You are a very experienced media engineer, controlling a UNIX terminal.
+You are an FFMPEG expert with years of experience and multiple contributions to the FFMPEG project.
+
+You are given:
+(1) a set of video, audio and/or image assets. Including their name, duration, dimensions and file size
+(2) the description of a new video you need to create from the list of assets
+
+Your objective is to generate the SIMPLEST POSSIBLE single ffmpeg command to create the requested video.
+
+Key requirements:
+    - Use the absolute minimum number of ffmpeg options needed
+    - Avoid complex filter chains or filter_complex if possible
+    - Prefer simple concatenation, scaling, and basic filters
+    - Output exactly ONE command that will be directly pasted into the terminal
+    - Never output multiple commands chained together
+    - Output the command in a single line (no line breaks or multiple lines)
+    - If the user asks for waveform visualization make sure to set the mode to `line` with and the use the full width of the video. Also concatenate the audio into a single channel.
+    - For image sequences: Use -framerate and pattern matching (like 'img%d.jpg') when possible, falling back to individual image processing with -loop 1 and appropriate filters only when necessary.
+    - When showing file operations or commands, always use explicit paths and filenames without wildcards - avoid using asterisk (*) or glob patterns. Instead, use specific numbered sequences (like %d), explicit file lists, or show the full filename.
+
+Remember: Simpler is better. Only use advanced ffmpeg features if absolutely necessary for the requested output.
+""",
+        },
+        {
+            "role": "user",
+            "content": f"""Always output the media as video/mp4 and output file with "output.mp4". Provide only the shell command without any explanations.
+The current assets and objective follow. Reply with the FFMPEG command:
+
+AVAILABLE ASSETS LIST:
 
 {files_info_string}
 
-## TASK
-{prompt}
-
-## REQUIREMENTS
-- Output format: MP4 video saved as "output.mp4"
-- Generate a single, complete FFmpeg command
-- Command must work with the exact filenames listed above
-
-Think briefly about the approach, then output the FFmpeg command in a ```bash code block."""
-
-    # Add error feedback if this is a retry
-    if previous_error and previous_command:
-        user_content += f"""
-
-IMPORTANT: This is a retry attempt. The previous command failed with the following error:
-
-PREVIOUS COMMAND (FAILED):
-{previous_command}
-
-ERROR MESSAGE:
-{previous_error}
-
-Please analyze the error and generate a corrected command that addresses the specific issue.
-
-COMMON SLIDESHOW ERROR FIXES:
-- If you see "do not match the corresponding output link" → Images have different dimensions, use scale+pad approach
-- If you see "Padded dimensions cannot be smaller than input dimensions" → Fix pad calculation or use standard resolution (1920x1080 or 1080x1920)
-- If you see "Failed to configure input pad" → Check scale and pad syntax, ensure proper filter chain
-- If you see "Invalid argument" in filters → Simplify filter_complex syntax and check parentheses
-
-FORMAT DETECTION KEYWORDS:
-- "vertical", "portrait", "9:16", "TikTok", "Instagram Stories", "phone" → Use 1080x1920
-- "horizontal", "landscape", "16:9", "YouTube", "TV" → Use 1920x1080 (default)
-- "square", "1:1", "Instagram post" → Use 1080x1080"""
-
-    user_content += "\n\nYOUR RESPONSE:"
-
-    # Initialize conversation with system message and first user message
-    if conversation_history is None:
-        messages = [
-            {
-                "role": "system",
-                "content": """You are an expert FFmpeg engineer. Generate precise, working FFmpeg commands.
-
-## OUTPUT FORMAT
-1. Brief analysis (2-3 sentences max)
-2. Single FFmpeg command in a ```bash code block
-3. Output file must be "output.mp4"
-
-## CORE RULES
-- ONE command only, no chaining (no && or ;)
-- Use exact filenames from the asset list
-- Keep commands as simple as possible
-- Always use: -c:v libx264 -pix_fmt yuv420p -movflags +faststart
-
-## SLIDESHOW PATTERN (for multiple images)
-When combining images with different dimensions:
-```bash
-ffmpeg -loop 1 -t 3 -i img1.jpg -loop 1 -t 3 -i img2.jpg -filter_complex "[0]scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2,setsar=1[v0];[1]scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2,setsar=1[v1];[v0][v1]concat=n=2:v=1:a=0" -c:v libx264 -pix_fmt yuv420p output.mp4
-```
-- Default: 1920x1080, 3 seconds per image
-- Vertical/portrait/TikTok: use 1080x1920
-- Always scale+pad to normalize dimensions
-
-## AUDIO WAVEFORM
-For waveform visualization:
-```bash
-ffmpeg -i audio.mp3 -i bg.png -filter_complex "[0:a]showwaves=s=1920x200:mode=line:colors=white[wave];[1]scale=1920:1080[bg];[bg][wave]overlay=(W-w)/2:(H-h)/2" -c:v libx264 -c:a aac output.mp4
-```
-
-## WITH BACKGROUND MUSIC
-Add audio to video/slideshow:
-```bash
-ffmpeg ... -i music.mp3 -map "[vout]" -map N:a -shortest -c:a aac output.mp4
-```
-Where N is the audio input index.""",
-            },
-            {
-                "role": "user",
-                "content": user_content,
-            },
-        ]
-    else:
-        # Use existing conversation history
-        messages = conversation_history[:]
-
-        # If there's a previous error, add it as a separate message exchange
-        if previous_error and previous_command:
-            # Add the failed command as assistant response
-            messages.append(
-                {
-                    "role": "assistant",
-                    "content": f"I'll execute this FFmpeg command:\n\n```bash\n{previous_command}\n```",
-                }
-            )
-
-            # Add the error as user feedback
-            messages.append(
-                {
-                    "role": "user",
-                    "content": f"""The command failed with the following error:
-
-ERROR MESSAGE:
-{previous_error}
-
-Please analyze the error and generate a corrected command that addresses the specific issue.
-
-COMMON SLIDESHOW ERROR FIXES:
-- If you see "do not match the corresponding output link" → Images have different dimensions, use scale+pad approach
-- If you see "Padded dimensions cannot be smaller than input dimensions" → Fix pad calculation or use standard resolution (1920x1080 or 1080x1920)
-- If you see "Failed to configure input pad" → Check scale and pad syntax, ensure proper filter chain
-- If you see "Invalid argument" in filters → Simplify filter_complex syntax and check parentheses
-
-FORMAT DETECTION KEYWORDS:
-- "vertical", "portrait", "9:16", "TikTok", "Instagram Stories", "phone" → Use 1080x1920
-- "horizontal", "landscape", "16:9", "YouTube", "TV" → Use 1920x1080 (default)
-- "square", "1:1", "Instagram post" → Use 1080x1080
-
-Please provide a corrected FFmpeg command.""",
-                }
-            )
-        else:
-            # Add new user request to existing conversation
-            messages.append(
-                {
-                    "role": "user",
-                    "content": user_content,
-                }
-            )
+OBJECTIVE: {prompt} and output at "output.mp4"
+YOUR FFMPEG COMMAND:
+         """,
+        },
+    ]
     try:
         # Print the complete prompt
         print("\n=== COMPLETE PROMPT ===")
@@ -304,131 +152,39 @@ Please provide a corrected FFmpeg command.""",
             print(msg["content"])
         print("=====================\n")
 
-        if model_choice not in MODELS:
-            raise ValueError(f"Model {model_choice} is not supported")
-
-        model_config = MODELS[model_choice]
-        client.base_url = model_config["base_url"]
-        client.api_key = os.environ[model_config["env_key"]]
-        model = model_config.get("model_name", model_choice)
-
         completion = client.chat.completions.create(
-            model=model,
+            model="Qwen/Qwen2.5-Coder-32B-Instruct",
             messages=messages,
             temperature=temperature,
             top_p=top_p,
             max_tokens=2048,
         )
         content = completion.choices[0].message.content
-        print(f"\n=== RAW API RESPONSE ===\n{content}\n========================\n")
-
         # Extract command from code block if present
-        import re
-
-        command = None
-
-        # Try multiple code block patterns
-        code_patterns = [
-            r"```(?:bash|sh|shell)?\n(.*?)\n```",  # Standard code blocks
-            r"```\n(.*?)\n```",  # Plain code blocks
-            r"`([^`]*ffmpeg[^`]*)`",  # Inline code with ffmpeg
-        ]
-
-        for pattern in code_patterns:
-            matches = re.findall(pattern, content, re.DOTALL | re.IGNORECASE)
-            for match in matches:
-                if "ffmpeg" in match.lower():
-                    command = match.strip()
-                    break
+        if "```" in content:
+            # Find content between ```sh or ```bash and the next ```
+            import re
+
+            command = re.search(r"```(?:sh|bash)?\n(.*?)\n```", content, re.DOTALL)
             if command:
-                break
-
-        # If no code block found, try to find ffmpeg lines directly
-        if not command:
-            ffmpeg_lines = [
-                line.strip()
-                for line in content.split("\n")
-                if line.strip().lower().startswith("ffmpeg")
-            ]
-            if ffmpeg_lines:
-                command = ffmpeg_lines[0]
-
-        # Last resort: look for any line containing ffmpeg
-        if not command:
-            for line in content.split("\n"):
-                line = line.strip()
-                if "ffmpeg" in line.lower() and len(line) > 10:
-                    command = line
-                    break
-
-        if not command:
-            print(f"ERROR: No ffmpeg command found in response")
-            command = content.replace("\n", " ").strip()
-
-        print(f"=== EXTRACTED COMMAND ===\n{command}\n========================\n")
+                command = command.group(1).strip()
+            else:
+                command = content.replace("\n", "")
+        else:
+            command = content.replace("\n", "")
 
         # remove output.mp4 with the actual output file path
         command = command.replace("output.mp4", "")
 
-        # Add the assistant's response to conversation history
-        messages.append({"role": "assistant", "content": content})
-
-        return command, messages
+        return command
     except Exception as e:
         raise Exception("API Error")
 
 
-@spaces.GPU(duration=120)
-def execute_ffmpeg_command(args, temp_dir, output_file_path):
-    """Execute FFmpeg command with GPU acceleration"""
-    final_command = args + ["-y", output_file_path]
-    print(f"\n=== EXECUTING FFMPEG COMMAND ===\nffmpeg {' '.join(final_command[1:])}\n")
-    subprocess.run(final_command, cwd=temp_dir)
-    return output_file_path
-
-
-def compose_video(
-    prompt: str,
-    files: list = None,
-    top_p: float = 0.7,
-    temperature: float = 0.1,
-    model_choice: str = "moonshotai/Kimi-K2-Instruct",
-) -> str:
-    """
-    Compose videos from existing media assets using natural language instructions.
-
-    This tool is NOT for AI video generation. Instead, it uses AI to generate FFmpeg
-    commands that combine, edit, and transform your uploaded images, videos, and audio
-    files based on natural language descriptions.
-
-    Args:
-        prompt (str): Natural language instructions for video composition (e.g., "Create a slideshow with background music")
-        files (list, optional): List of media files (images, videos, audio) to use
-        top_p (float): Top-p sampling parameter for AI model (0.0-1.0, default: 0.7)
-        temperature (float): Temperature parameter for AI model creativity (0.0-5.0, default: 0.1)
-        model_choice (str): AI model to use for command generation (default: "deepseek-ai/DeepSeek-V3")
-
-    Returns:
-        str: Path to the generated video file
-
-    Example:
-        compose_video("Create a 10-second slideshow from the images with fade transitions", files=[img1, img2, img3])
-    """
-    return update(files or [], prompt, top_p, temperature, model_choice)
-
-
-def update(
-    files,
-    prompt,
-    top_p=1,
-    temperature=1,
-    model_choice="moonshotai/Kimi-K2-Instruct",
-):
+def update(files, prompt, top_p=1, temperature=1):
     if prompt == "":
         raise gr.Error("Please enter a prompt.")
 
-    # Normalize files from MediaGallery or gr.File format
-    files = normalize_files(files)
     files_info = get_files_infos(files)
     # disable this if you're running the app locally or on your own server
     for file_info in files_info:
@@ -437,30 +193,16 @@ def update(
                 raise gr.Error(
                     "Please make sure all videos are less than 2 minute long."
                 )
-        if file_info["size"] > 100000000:
-            raise gr.Error("Please make sure all files are less than 100MB in size.")
+        if file_info["size"] > 10000000:
+            raise gr.Error("Please make sure all files are less than 10MB in size.")
 
     attempts = 0
-    command_attempts = []
-    previous_error = None
-    previous_command = None
-    conversation_history = None
-
     while attempts < 2:
-        print("ATTEMPT", attempts + 1)
+        print("ATTEMPT", attempts)
         try:
-            command_string, conversation_history = get_completion(
-                prompt,
-                files_info,
-                top_p,
-                temperature,
-                model_choice,
-                conversation_history,
-                previous_error,
-                previous_command,
-            )
+            command_string = get_completion(prompt, files_info, top_p, temperature)
             print(
-                f"""///PROMPT {prompt} \n\n/// START OF COMMAND ///:\n\n{command_string}\n\n/// END OF COMMAND ///\n\n"""
+                f"""///PROMTP {prompt} \n\n/// START OF COMMAND ///:\n\n{command_string}\n\n/// END OF COMMAND ///\n\n"""
             )
 
             # split command string into list of arguments
@@ -475,135 +217,58 @@ def update(
                 shutil.copy(file_path, Path(temp_dir) / sanitized_name)
 
             # test if ffmpeg command is valid dry run
-            ffmpeg_dry_run = subprocess.run(
+            ffmpg_dry_run = subprocess.run(
                 args + ["-f", "null", "-"],
                 stderr=subprocess.PIPE,
                 text=True,
                 cwd=temp_dir,
             )
-
-            # Extract command for display
-            command_for_display = f"ffmpeg {' '.join(args[1:])} -y output.mp4"
-
-            if ffmpeg_dry_run.returncode == 0:
+            if ffmpg_dry_run.returncode == 0:
                 print("Command is valid.")
-                # Add successful command to attempts
-                command_attempts.append(
-                    {
-                        "command": command_for_display,
-                        "status": "✅ Valid",
-                        "attempt": attempts + 1,
-                    }
-                )
             else:
                 print("Command is not valid. Error output:")
-                print(ffmpeg_dry_run.stderr)
-
-                # Add failed command to attempts with error
-                command_attempts.append(
-                    {
-                        "command": command_for_display,
-                        "status": "❌ Invalid",
-                        "error": ffmpeg_dry_run.stderr,
-                        "attempt": attempts + 1,
-                    }
-                )
-
-                # Store error details for next retry
-                previous_error = ffmpeg_dry_run.stderr
-                previous_command = command_for_display
-
+                print(ffmpg_dry_run.stderr)
                 raise Exception(
-                    f"FFMPEG command validation failed: {ffmpeg_dry_run.stderr}"
+                    "FFMPEG generated command is not valid. Please try something else."
                 )
 
             output_file_name = f"output_{uuid.uuid4()}.mp4"
             output_file_path = str((Path(temp_dir) / output_file_name).resolve())
-            execute_ffmpeg_command(args, temp_dir, output_file_path)
-
-            # Generate command display with all attempts
-            command_display = generate_command_display(command_attempts)
-            return output_file_path, gr.update(value=command_display)
-
+            final_command = args + ["-y", output_file_path]
+            print(
+                f"\n=== EXECUTING FFMPEG COMMAND ===\nffmpeg {' '.join(final_command[1:])}\n"
+            )
+            subprocess.run(final_command, cwd=temp_dir)
+            generated_command = f"### Generated Command\n```bash\nffmpeg {' '.join(args[1:])} -y output.mp4\n```"
+            return output_file_path, gr.update(value=generated_command)
         except Exception as e:
             attempts += 1
             if attempts >= 2:
                 print("FROM UPDATE", e)
-                # Show all attempted commands even on final failure
-                command_display = generate_command_display(command_attempts)
-                command_display += (
-                    f"\n\n### Final Error\n❌ All attempts failed. Last error: {str(e)}"
-                )
-                return None, gr.update(value=command_display)
-
-
-def generate_command_display(command_attempts):
-    """Generate a markdown display of all command attempts"""
-    if not command_attempts:
-        return "### No commands generated"
+                raise gr.Error(e)
 
-    display = "### Generated Commands\n\n"
-
-    for attempt in command_attempts:
-        display += f"**Attempt {attempt['attempt']}** {attempt['status']}\n"
-        display += f"```bash\n{attempt['command']}\n```\n"
-
-        if attempt["status"] == "❌ Invalid" and "error" in attempt:
-            display += f"<details>\n<summary>🔍 Error Details</summary>\n\n```\n{attempt['error']}\n```\n</details>\n\n"
-        else:
-            display += "\n"
-
-    return display
-
-
-# Create MCP-compatible interface
-mcp_interface = gr.Interface(
-    fn=compose_video,
-    inputs=[
-        gr.Textbox(
-            value="Create a slideshow with background music",
-            label="Video Composition Instructions",
-        ),
-        gr.File(file_count="multiple", label="Media Files", file_types=allowed_medias),
-        gr.Slider(0.0, 1.0, value=0.7, label="Top-p"),
-        gr.Slider(0.0, 5.0, value=0.1, label="Temperature"),
-        gr.Radio(
-            choices=list(MODELS.keys()), value=list(MODELS.keys())[0], label="Model"
-        ),
-    ],
-    outputs=gr.Video(label="Generated Video"),
-    title="AI Video Composer MCP Tool",
-    description="Compose videos from media assets using natural language",
-)
 
 with gr.Blocks() as demo:
     gr.Markdown(
         """
-            # 🏞 AI Video Composer: FFMPEG in Plain English
-            Upload your media files, describe what you want, and [Kimi-K2](https://huggingface.co/moonshotai/Kimi-K2-Instruct) generates the FFMPEG command. Create slideshows from images, add background music, merge video clips, visualize audio waveforms, convert formats, adjust speed, and more.
+            # 🏞 AI Video Composer
+            Compose new videos from your assets using natural language. Add video, image and audio assets and let [Qwen2.5-Coder](https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct) generate a new video for you (using FFMPEG).
         """,
         elem_id="header",
     )
     with gr.Row():
         with gr.Column():
-            user_files = MediaGallery(
+            user_files = gr.File(
+                file_count="multiple",
+                label="Media files",
                 file_types=allowed_medias,
-                label="Media Assets",
-                columns=3,
-                interactive=True,
             )
             user_prompt = gr.Textbox(
-                placeholder="eg: Remove the 3 first seconds of the video",
+                placeholder="I want to convert to a gif under 15mb",
                 label="Instructions",
-                lines=3,
             )
             btn = gr.Button("Run")
             with gr.Accordion("Parameters", open=False):
-                model_choice = gr.Radio(
-                    choices=list(MODELS.keys()),
-                    value=list(MODELS.keys())[0],
-                    label="Model",
-                )
                 top_p = gr.Slider(
                     minimum=-0,
                     maximum=1.0,
@@ -628,7 +293,7 @@ with gr.Blocks() as demo:
 
         btn.click(
             fn=update,
-            inputs=[user_files, user_prompt, top_p, temperature, model_choice],
+            inputs=[user_files, user_prompt, top_p, temperature],
             outputs=[generated_video, generated_command],
         )
     with gr.Row():
@@ -639,32 +304,37 @@ with gr.Blocks() as demo:
                     "Use the image as the background with a waveform visualization for the audio positioned in center of the video.",
                     0.7,
                     0.1,
-                    list(MODELS.keys())[0],
-                ],
-                [
-                    ["./examples/ai_talk.wav", "./examples/bg-image.png"],
-                    "Use the image as the background with a waveform visualization for the audio positioned in center of the video. Make sure the waveform has a max height of 250 pixels.",
-                    0.7,
-                    0.1,
-                    list(MODELS.keys())[0],
                 ],
                 [
                     [
+                        "./examples/cat8.jpeg",
                         "./examples/cat1.jpeg",
                         "./examples/cat2.jpeg",
                         "./examples/cat3.jpeg",
                         "./examples/cat4.jpeg",
                         "./examples/cat5.jpeg",
                         "./examples/cat6.jpeg",
+                        "./examples/cat7.jpeg",
                         "./examples/heat-wave.mp3",
                     ],
-                    "Create a 3x2 grid of the cat images with the audio as background music. Make the video duration match the audio duration.",
+                    "Generate an MP4 slideshow where each photo appears for 2 seconds, using the provided audio as soundtrack.",
+                    0.7,
+                    0.1,
+                ],
+                [
+                    ["./examples/waterfall-overlay.png", "./examples/waterfall.mp4"],
+                    "Add the overlay to the video.",
+                    0.7,
+                    0.1,
+                ],
+                [
+                    ["./examples/example.mp4"],
+                    "Make this video 10 times faster",
                     0.7,
                     0.1,
-                    list(MODELS.keys())[0],
                 ],
             ],
-            inputs=[user_files, user_prompt, top_p, temperature, model_choice],
+            inputs=[user_files, user_prompt, top_p, temperature],
             outputs=[generated_video, generated_command],
             fn=update,
             run_on_click=True,
@@ -680,9 +350,5 @@ with gr.Blocks() as demo:
             """,
         )
 
-# Launch MCP interface for tool access
-mcp_interface.queue(default_concurrency_limit=200)
-
-# Launch main demo
 demo.queue(default_concurrency_limit=200)
-demo.launch(show_api=False, ssr_mode=False, mcp_server=True)
+demo.launch(show_api=False, ssr_mode=False)

mediagallery/.gitignore

@@ -1,11 +0,0 @@
-.eggs/
-dist/
-*.pyc
-__pycache__/
-*.py[cod]
-*$py.class
-__tmp/*
-*.pyi
-.mypycache
-.ruff_cache
-node_modules

mediagallery/README.md

@@ -1,490 +0,0 @@
-
-# `gradio_mediagallery`
-<a href="https://pypi.org/project/gradio_mediagallery/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_mediagallery"></a>  
-
-Python library for easily interacting with trained machine learning models
-
-## Installation
-
-```bash
-pip install gradio_mediagallery
-```
-
-## Usage
-
-```python
-
-import gradio as gr
-from gradio_mediagallery import MediaGallery
-
-
-example = MediaGallery().example_value()
-
-with gr.Blocks() as demo:
-    with gr.Row():
-        MediaGallery(label="Blank"),  # blank component
-        MediaGallery(value=example, label="Populated"),  # populated component
-
-
-if __name__ == "__main__":
-    demo.launch()
-
-```
-
-## `MediaGallery`
-
-### Initialization
-
-<table>
-<thead>
-<tr>
-<th align="left">name</th>
-<th align="left" style="width: 25%;">type</th>
-<th align="left">default</th>
-<th align="left">description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td align="left"><code>value</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-Sequence[
-        np.ndarray | PIL.Image.Image | str | Path | tuple
-    ]
-    | Callable
-    | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
-</tr>
-
-<tr>
-<td align="left"><code>format</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-str
-```
-
-</td>
-<td align="left"><code>"webp"</code></td>
-<td align="left">Format to save images before they are returned to the frontend, such as 'jpeg' or 'png'. This parameter only applies to images that are returned from the prediction function as numpy arrays or PIL Images. The format should be supported by the PIL library.</td>
-</tr>
-
-<tr>
-<td align="left"><code>file_types</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-list[str] | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.</td>
-</tr>
-
-<tr>
-<td align="left"><code>label</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-str | I18nData | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
-</tr>
-
-<tr>
-<td align="left"><code>every</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-Timer | float | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
-</tr>
-
-<tr>
-<td align="left"><code>inputs</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-Component | Sequence[Component] | set[Component] | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
-</tr>
-
-<tr>
-<td align="left"><code>show_label</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">if True, will display label.</td>
-</tr>
-
-<tr>
-<td align="left"><code>container</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
-</tr>
-
-<tr>
-<td align="left"><code>scale</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
-</tr>
-
-<tr>
-<td align="left"><code>min_width</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int
-```
-
-</td>
-<td align="left"><code>160</code></td>
-<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
-</tr>
-
-<tr>
-<td align="left"><code>visible</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If False, component will be hidden.</td>
-</tr>
-
-<tr>
-<td align="left"><code>elem_id</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
-</tr>
-
-<tr>
-<td align="left"><code>elem_classes</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-list[str] | str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
-</tr>
-
-<tr>
-<td align="left"><code>render</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
-</tr>
-
-<tr>
-<td align="left"><code>key</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | str | tuple[int | str, ...] | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
-</tr>
-
-<tr>
-<td align="left"><code>preserved_by_key</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-list[str] | str | None
-```
-
-</td>
-<td align="left"><code>"value"</code></td>
-<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
-</tr>
-
-<tr>
-<td align="left"><code>columns</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | None
-```
-
-</td>
-<td align="left"><code>2</code></td>
-<td align="left">Represents the number of images that should be shown in one row.</td>
-</tr>
-
-<tr>
-<td align="left"><code>rows</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">Represents the number of rows in the image grid.</td>
-</tr>
-
-<tr>
-<td align="left"><code>height</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | float | str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.</td>
-</tr>
-
-<tr>
-<td align="left"><code>allow_preview</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If True, images in the gallery will be enlarged when they are clicked. Default is True.</td>
-</tr>
-
-<tr>
-<td align="left"><code>preview</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.</td>
-</tr>
-
-<tr>
-<td align="left"><code>selected_index</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.</td>
-</tr>
-
-<tr>
-<td align="left"><code>object_fit</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-Literal[
-        "contain", "cover", "fill", "none", "scale-down"
-    ]
-    | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".</td>
-</tr>
-
-<tr>
-<td align="left"><code>show_share_button</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
-</tr>
-
-<tr>
-<td align="left"><code>show_download_button</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool | None
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.</td>
-</tr>
-
-<tr>
-<td align="left"><code>interactive</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.</td>
-</tr>
-
-<tr>
-<td align="left"><code>type</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-Literal["numpy", "pil", "filepath"]
-```
-
-</td>
-<td align="left"><code>"filepath"</code></td>
-<td align="left">The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.</td>
-</tr>
-
-<tr>
-<td align="left"><code>show_fullscreen_button</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
-</tr>
-</tbody></table>
-
-
-### Events
-
-| name | description |
-|:-----|:------------|
-| `select` | Event listener for when the user selects or deselects the MediaGallery. Uses event data gradio.SelectData to carry `value` referring to the label of the MediaGallery, and `selected` to refer to state of the MediaGallery. See EventData documentation on how to use this event data |
-| `upload` | This listener is triggered when the user uploads a file into the MediaGallery. |
-| `change` | Triggered when the value of the MediaGallery changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
-| `preview_close` | This event is triggered when the MediaGallery preview is closed by the user |
-| `preview_open` | This event is triggered when the MediaGallery preview is opened by the user |
-
-
-
-### User function
-
-The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
-
-- When used as an Input, the component only impacts the input signature of the user function.
-- When used as an output, the component only impacts the return signature of the user function.
-
-The code snippet below is accurate in cases where the component is used as both an input and an output.
-
-- **As output:** Is passed, passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
-- **As input:** Should return, expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
-
- ```python
- def predict(
-     value: list[tuple[str, str | None]]
-    | list[tuple[PIL.Image.Image, str | None]]
-    | list[tuple[numpy.ndarray, str | None]]
-    | None
- ) -> list[
-        typing.Union[
-            numpy.ndarray,
-            PIL.Image.Image,
-            pathlib.Path,
-            str,
-            tuple[
-                typing.Union[
-                    numpy.ndarray,
-                    PIL.Image.Image,
-                    pathlib.Path,
-                    str,
-                ],
-                str,
-            ],
-        ][
-            numpy.ndarray,
-            PIL.Image.Image,
-            pathlib.Path,
-            str,
-            tuple[
-                typing.Union[
-                    numpy.ndarray,
-                    PIL.Image.Image,
-                    pathlib.Path,
-                    str,
-                ][
-                    numpy.ndarray,
-                    PIL.Image.Image,
-                    pathlib.Path,
-                    str,
-                ],
-                str,
-            ],
-        ]
-    ]
-    | None:
-     return value
- ```
- 

mediagallery/backend/gradio_mediagallery/__init__.py

@@ -1,4 +0,0 @@
-
-from .mediagallery import MediaGallery
-
-__all__ = ['MediaGallery']

mediagallery/backend/gradio_mediagallery/mediagallery.py

@@ -1,374 +0,0 @@
-"""gr.Gallery() component."""
-
-from __future__ import annotations
-
-from collections.abc import Callable, Sequence
-from concurrent.futures import ThreadPoolExecutor
-from pathlib import Path
-from typing import (
-    TYPE_CHECKING,
-    Any,
-    Literal,
-    Optional,
-    Union,
-)
-from urllib.parse import quote, urlparse
-
-import numpy as np
-import PIL.Image
-from gradio_client import handle_file
-from gradio_client import utils as client_utils
-from gradio_client.documentation import document
-from gradio_client.utils import is_http_url_like
-
-from gradio import image_utils, processing_utils, utils
-try:
-    from gradio import wasm_utils
-    IS_WASM = wasm_utils.IS_WASM
-except ImportError:
-    IS_WASM = False
-from gradio.components.base import Component
-from gradio.data_classes import FileData, GradioModel, GradioRootModel, ImageData
-from gradio.events import EventListener, Events
-from gradio.exceptions import Error
-from gradio.i18n import I18nData
-
-if TYPE_CHECKING:
-    from gradio.components import Timer
-
-GalleryMediaType = Union[np.ndarray, PIL.Image.Image, Path, str]
-CaptionedGalleryMediaType = tuple[GalleryMediaType, str]
-
-
-class GalleryImage(GradioModel):
-    image: ImageData
-    caption: Optional[str] = None
-
-
-class GalleryVideo(GradioModel):
-    video: FileData
-    caption: Optional[str] = None
-
-
-class GalleryAudio(GradioModel):
-    audio: FileData
-    caption: Optional[str] = None
-
-
-class GalleryData(GradioRootModel):
-    root: list[Union[GalleryImage, GalleryVideo, GalleryAudio]]
-
-
-# File extension mappings for media type detection
-IMAGE_EXTENSIONS = {'.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp', '.tiff', '.svg'}
-VIDEO_EXTENSIONS = {'.mp4', '.avi', '.mov', '.mkv', '.flv', '.wmv', '.webm', '.mpg', '.mpeg', '.m4v', '.3gp', '.3g2', '.3gpp'}
-AUDIO_EXTENSIONS = {'.mp3', '.wav', '.ogg', '.m4a', '.flac', '.aac'}
-
-
-class MediaGallery(Component):
-    """
-    Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery.
-    If used as an output, the user can click on individual images or videos to view them at a higher resolution.
-
-    Demos: fake_gan
-    """
-
-    EVENTS = [
-        Events.select,
-        Events.upload,
-        Events.change,
-        EventListener(
-            "preview_close",
-            doc="This event is triggered when the MediaGallery preview is closed by the user",
-        ),
-        EventListener(
-            "preview_open",
-            doc="This event is triggered when the MediaGallery preview is opened by the user",
-        ),
-    ]
-
-    data_model = GalleryData
-
-    def __init__(
-        self,
-        value: (
-            Sequence[np.ndarray | PIL.Image.Image | str | Path | tuple]
-            | Callable
-            | None
-        ) = None,
-        *,
-        format: str = "webp",
-        file_types: list[str] | None = None,
-        label: str | I18nData | None = None,
-        every: Timer | float | None = None,
-        inputs: Component | Sequence[Component] | set[Component] | None = None,
-        show_label: bool | None = None,
-        container: bool = True,
-        scale: int | None = None,
-        min_width: int = 160,
-        visible: bool = True,
-        elem_id: str | None = None,
-        elem_classes: list[str] | str | None = None,
-        render: bool = True,
-        key: int | str | tuple[int | str, ...] | None = None,
-        preserved_by_key: list[str] | str | None = "value",
-        columns: int | None = 2,
-        rows: int | None = None,
-        height: int | float | str | None = None,
-        allow_preview: bool = True,
-        preview: bool | None = None,
-        selected_index: int | None = None,
-        object_fit: (
-            Literal["contain", "cover", "fill", "none", "scale-down"] | None
-        ) = None,
-        show_share_button: bool | None = None,
-        show_download_button: bool | None = True,
-        interactive: bool | None = None,
-        type: Literal["numpy", "pil", "filepath"] = "filepath",
-        show_fullscreen_button: bool = True,
-    ):
-        """
-        Parameters:
-            value: List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
-            format: Format to save images before they are returned to the frontend, such as 'jpeg' or 'png'. This parameter only applies to images that are returned from the prediction function as numpy arrays or PIL Images. The format should be supported by the PIL library.
-            file_types: List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.
-            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
-            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            show_label: if True, will display label.
-            container: If True, will place the component in a container - providing some extra padding around the border.
-            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
-            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
-            visible: If False, component will be hidden.
-            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
-            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
-            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
-            key: in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.
-            preserved_by_key: A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.
-            columns: Represents the number of images that should be shown in one row.
-            rows: Represents the number of rows in the image grid.
-            height: The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.
-            allow_preview: If True, images in the gallery will be enlarged when they are clicked. Default is True.
-            preview: If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.
-            selected_index: The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.
-            object_fit: CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".
-            show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
-            show_download_button: If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.
-            interactive: If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.
-            type: The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.
-            show_fullscreen_button: If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
-        """
-        self.format = format
-        self.columns = columns
-        self.rows = rows
-        self.height = height
-        self.preview = preview
-        self.object_fit = object_fit
-        self.allow_preview = allow_preview
-        self.show_download_button = (
-            (utils.get_space() is not None)
-            if show_download_button is None
-            else show_download_button
-        )
-        self.selected_index = selected_index
-        self.type = type
-        self.show_fullscreen_button = show_fullscreen_button
-        self.file_types = file_types
-
-        self.show_share_button = (
-            (utils.get_space() is not None)
-            if show_share_button is None
-            else show_share_button
-        )
-        super().__init__(
-            label=label,
-            every=every,
-            inputs=inputs,
-            show_label=show_label,
-            container=container,
-            scale=scale,
-            min_width=min_width,
-            visible=visible,
-            elem_id=elem_id,
-            elem_classes=elem_classes,
-            render=render,
-            key=key,
-            preserved_by_key=preserved_by_key,
-            value=value,
-            interactive=interactive,
-        )
-        self._value_description = f"a list of {'string filepaths' if type == 'filepath' else 'numpy arrays' if type == 'numpy' else 'PIL images'}"
-
-    def preprocess(
-        self, payload: GalleryData | None
-    ) -> (
-        list[tuple[str, str | None]]
-        | list[tuple[PIL.Image.Image, str | None]]
-        | list[tuple[np.ndarray, str | None]]
-        | None
-    ):
-        """
-        Parameters:
-            payload: a list of images or videos, or list of (media, caption) tuples
-        Returns:
-            Passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
-        """
-        if payload is None or not payload.root:
-            return None
-        data = []
-        for gallery_element in payload.root:
-            if isinstance(gallery_element, GalleryVideo):
-                file_path = gallery_element.video.path
-            elif isinstance(gallery_element, GalleryAudio):
-                file_path = gallery_element.audio.path
-            else:
-                file_path = gallery_element.image.path or ""
-            if self.file_types and not client_utils.is_valid_file(
-                file_path, self.file_types
-            ):
-                raise Error(
-                    f"Invalid file type. Please upload a file that is one of these formats: {self.file_types}"
-                )
-            else:
-                # Return file path for video and audio, convert images based on type
-                if isinstance(gallery_element, GalleryVideo):
-                    media = gallery_element.video.path
-                elif isinstance(gallery_element, GalleryAudio):
-                    media = gallery_element.audio.path
-                else:
-                    media = self.convert_to_type(gallery_element.image.path, self.type)  # type: ignore
-                data.append((media, gallery_element.caption))
-        return data
-
-    def postprocess(
-        self,
-        value: list[GalleryMediaType | CaptionedGalleryMediaType] | None,
-    ) -> GalleryData:
-        """
-        Parameters:
-            value: Expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
-        Returns:
-            a list of images or videos, or list of (media, caption) tuples
-        """
-        if value is None:
-            return GalleryData(root=[])
-        if isinstance(value, str):
-            raise ValueError(
-                "The `value` passed into `gr.Gallery` must be a list of images or videos, or list of (media, caption) tuples."
-            )
-        output = []
-
-        def _save(img):
-            url = None
-            caption = None
-            orig_name = None
-            mime_type = None
-            if isinstance(img, (tuple, list)):
-                img, caption = img
-            if isinstance(img, np.ndarray):
-                file = processing_utils.save_img_array_to_cache(
-                    img, cache_dir=self.GRADIO_CACHE, format=self.format
-                )
-                file_path = str(utils.abspath(file))
-            elif isinstance(img, PIL.Image.Image):
-                file = processing_utils.save_pil_to_cache(
-                    img, cache_dir=self.GRADIO_CACHE, format=self.format
-                )
-                file_path = str(utils.abspath(file))
-            elif isinstance(img, str):
-                mime_type = client_utils.get_mimetype(img)
-                if img.lower().endswith(".svg"):
-                    svg_content = image_utils.extract_svg_content(img)
-                    orig_name = Path(img).name
-                    url = f"data:image/svg+xml,{quote(svg_content)}"
-                    file_path = None
-                elif is_http_url_like(img):
-                    url = img
-                    orig_name = Path(urlparse(img).path).name
-                    file_path = img
-                else:
-                    url = None
-                    orig_name = Path(img).name
-                    file_path = img
-            elif isinstance(img, Path):
-                file_path = str(img)
-                orig_name = img.name
-                mime_type = client_utils.get_mimetype(file_path)
-            else:
-                raise ValueError(f"Cannot process type as image: {type(img)}")
-            # Determine media type from mime_type or file extension
-            if mime_type is not None and "video" in mime_type:
-                return GalleryVideo(
-                    video=FileData(
-                        path=file_path,  # type: ignore
-                        url=url,
-                        orig_name=orig_name,
-                        mime_type=mime_type,
-                    ),
-                    caption=caption,
-                )
-            elif mime_type is not None and "audio" in mime_type:
-                return GalleryAudio(
-                    audio=FileData(
-                        path=file_path,  # type: ignore
-                        url=url,
-                        orig_name=orig_name,
-                        mime_type=mime_type,
-                    ),
-                    caption=caption,
-                )
-            else:
-                # Check file extension for audio files (fallback)
-                ext = Path(orig_name or file_path or "").suffix.lower() if (orig_name or file_path) else ""
-                if ext in AUDIO_EXTENSIONS:
-                    return GalleryAudio(
-                        audio=FileData(
-                            path=file_path,  # type: ignore
-                            url=url,
-                            orig_name=orig_name,
-                            mime_type=mime_type or "audio/mpeg",
-                        ),
-                        caption=caption,
-                    )
-                return GalleryImage(
-                    image=ImageData(
-                        path=file_path,
-                        url=url,
-                        orig_name=orig_name,
-                        mime_type=mime_type,
-                    ),
-                    caption=caption,
-                )
-
-        if IS_WASM:
-            for img in value:
-                output.append(_save(img))
-        else:
-            with ThreadPoolExecutor() as executor:
-                for o in executor.map(_save, value):
-                    output.append(o)
-        return GalleryData(root=output)
-
-    @staticmethod
-    def convert_to_type(img: str, type: Literal["filepath", "numpy", "pil"]):
-        if type == "filepath":
-            return img
-        else:
-            converted_image = PIL.Image.open(img)
-            if type == "numpy":
-                converted_image = np.array(converted_image)
-            return converted_image
-
-    def example_payload(self) -> Any:
-        return [
-            {
-                "image": handle_file(
-                    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
-                )
-            },
-        ]
-
-    def example_value(self) -> Any:
-        return [
-            "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
-        ]

mediagallery/backend/gradio_mediagallery/templates/component/assets/worker-BAOIWoxA.js

@@ -1 +0,0 @@
-(function(){"use strict";const i="https://unpkg.com/@ffmpeg/[email protected]/dist/umd/ffmpeg-core.js";var E;(function(t){t.LOAD="LOAD",t.EXEC="EXEC",t.FFPROBE="FFPROBE",t.WRITE_FILE="WRITE_FILE",t.READ_FILE="READ_FILE",t.DELETE_FILE="DELETE_FILE",t.RENAME="RENAME",t.CREATE_DIR="CREATE_DIR",t.LIST_DIR="LIST_DIR",t.DELETE_DIR="DELETE_DIR",t.ERROR="ERROR",t.DOWNLOAD="DOWNLOAD",t.PROGRESS="PROGRESS",t.LOG="LOG",t.MOUNT="MOUNT",t.UNMOUNT="UNMOUNT"})(E||(E={}));const f=new Error("unknown message type"),a=new Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"),u=new Error("failed to import ffmpeg-core.js");let r;const O=async({coreURL:t,wasmURL:n,workerURL:e})=>{const o=!r;try{t||(t=i),importScripts(t)}catch{if((!t||t===i)&&(t=i.replace("/umd/","/esm/")),self.createFFmpegCore=(await import(t)).default,!self.createFFmpegCore)throw u}const s=t,c=n||t.replace(/.js$/g,".wasm"),p=e||t.replace(/.js$/g,".worker.js");return r=await self.createFFmpegCore({mainScriptUrlOrBlob:`${s}#${btoa(JSON.stringify({wasmURL:c,workerURL:p}))}`}),r.setLogger(R=>self.postMessage({type:E.LOG,data:R})),r.setProgress(R=>self.postMessage({type:E.PROGRESS,data:R})),o},m=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.exec(...t);const e=r.ret;return r.reset(),e},l=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.ffprobe(...t);const e=r.ret;return r.reset(),e},D=({path:t,data:n})=>(r.FS.writeFile(t,n),!0),S=({path:t,encoding:n})=>r.FS.readFile(t,{encoding:n}),I=({path:t})=>(r.FS.unlink(t),!0),L=({oldPath:t,newPath:n})=>(r.FS.rename(t,n),!0),N=({path:t})=>(r.FS.mkdir(t),!0),A=({path:t})=>{const n=r.FS.readdir(t),e=[];for(const o of n){const s=r.FS.stat(`${t}/${o}`),c=r.FS.isDir(s.mode);e.push({name:o,isDir:c})}return e},k=({path:t})=>(r.FS.rmdir(t),!0),w=({fsType:t,options:n,mountPoint:e})=>{const o=t,s=r.FS.filesystems[o];return s?(r.FS.mount(s,n,e),!0):!1},b=({mountPoint:t})=>(r.FS.unmount(t),!0);self.onmessage=async({data:{id:t,type:n,data:e}})=>{const o=[];let s;try{if(n!==E.LOAD&&!r)throw a;switch(n){case E.LOAD:s=await O(e);break;case E.EXEC:s=m(e);break;case E.FFPROBE:s=l(e);break;case E.WRITE_FILE:s=D(e);break;case E.READ_FILE:s=S(e);break;case E.DELETE_FILE:s=I(e);break;case E.RENAME:s=L(e);break;case E.CREATE_DIR:s=N(e);break;case E.LIST_DIR:s=A(e);break;case E.DELETE_DIR:s=k(e);break;case E.MOUNT:s=w(e);break;case E.UNMOUNT:s=b(e);break;default:throw f}}catch(c){self.postMessage({id:t,type:E.ERROR,data:c.toString()});return}s instanceof Uint8Array&&o.push(s.buffer),self.postMessage({id:t,type:n,data:s},o)}})();

mediagallery/backend/gradio_mediagallery/templates/example/index.js

@@ -1,308 +0,0 @@
-const {
-  SvelteComponent: M,
-  append_hydration: m,
-  attr: c,
-  children: v,
-  claim_element: u,
-  claim_space: C,
-  claim_text: k,
-  destroy_each: q,
-  detach: o,
-  element: d,
-  empty: j,
-  ensure_array_like: y,
-  get_svelte_dataset: H,
-  init: L,
-  insert_hydration: h,
-  noop: b,
-  safe_not_equal: T,
-  set_data: B,
-  space: G,
-  src_url_equal: g,
-  text: w,
-  toggle_class: _
-} = window.__gradio__svelte__internal;
-function E(r, e, i) {
-  const s = r.slice();
-  return s[3] = e[i], s;
-}
-function I(r) {
-  let e, i, s = y(
-    /*value*/
-    r[0].slice(0, 5)
-  ), l = [];
-  for (let n = 0; n < s.length; n += 1)
-    l[n] = V(E(r, s, n));
-  let t = (
-    /*value*/
-    r[0].length > 5 && D(r)
-  );
-  return {
-    c() {
-      e = d("div");
-      for (let n = 0; n < l.length; n += 1)
-        l[n].c();
-      i = G(), t && t.c(), this.h();
-    },
-    l(n) {
-      e = u(n, "DIV", { class: !0 });
-      var f = v(e);
-      for (let a = 0; a < l.length; a += 1)
-        l[a].l(f);
-      i = C(f), t && t.l(f), f.forEach(o), this.h();
-    },
-    h() {
-      c(e, "class", "images-wrapper svelte-nb996j");
-    },
-    m(n, f) {
-      h(n, e, f);
-      for (let a = 0; a < l.length; a += 1)
-        l[a] && l[a].m(e, null);
-      m(e, i), t && t.m(e, null);
-    },
-    p(n, f) {
-      if (f & /*value*/
-      1) {
-        s = y(
-          /*value*/
-          n[0].slice(0, 5)
-        );
-        let a;
-        for (a = 0; a < s.length; a += 1) {
-          const p = E(n, s, a);
-          l[a] ? l[a].p(p, f) : (l[a] = V(p), l[a].c(), l[a].m(e, i));
-        }
-        for (; a < l.length; a += 1)
-          l[a].d(1);
-        l.length = s.length;
-      }
-      /*value*/
-      n[0].length > 5 ? t ? t.p(n, f) : (t = D(n), t.c(), t.m(e, null)) : t && (t.d(1), t = null);
-    },
-    d(n) {
-      n && o(e), q(l, n), t && t.d();
-    }
-  };
-}
-function N(r) {
-  let e, i = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-nb996j"><path d="M9 18V5l12-2v13" class="svelte-nb996j"></path><circle cx="6" cy="18" r="3" class="svelte-nb996j"></circle><circle cx="18" cy="16" r="3" class="svelte-nb996j"></circle></svg>';
-  return {
-    c() {
-      e = d("div"), e.innerHTML = i, this.h();
-    },
-    l(s) {
-      e = u(s, "DIV", { class: !0, "data-svelte-h": !0 }), H(e) !== "svelte-19pyv4n" && (e.innerHTML = i), this.h();
-    },
-    h() {
-      c(e, "class", "image-container audio svelte-nb996j");
-    },
-    m(s, l) {
-      h(s, e, l);
-    },
-    p: b,
-    d(s) {
-      s && o(e);
-    }
-  };
-}
-function O(r) {
-  let e, i, s;
-  return {
-    c() {
-      e = d("div"), i = d("video"), this.h();
-    },
-    l(l) {
-      e = u(l, "DIV", { class: !0 });
-      var t = v(e);
-      i = u(t, "VIDEO", { src: !0, preload: !0, class: !0 }), v(i).forEach(o), t.forEach(o), this.h();
-    },
-    h() {
-      g(i.src, s = /*item*/
-      r[3].video.url) || c(i, "src", s), i.controls = !1, i.muted = !0, c(i, "preload", "metadata"), c(i, "class", "svelte-nb996j"), c(e, "class", "image-container svelte-nb996j");
-    },
-    m(l, t) {
-      h(l, e, t), m(e, i);
-    },
-    p(l, t) {
-      t & /*value*/
-      1 && !g(i.src, s = /*item*/
-      l[3].video.url) && c(i, "src", s);
-    },
-    d(l) {
-      l && o(e);
-    }
-  };
-}
-function S(r) {
-  let e, i, s, l;
-  return {
-    c() {
-      e = d("div"), i = d("img"), this.h();
-    },
-    l(t) {
-      e = u(t, "DIV", { class: !0 });
-      var n = v(e);
-      i = u(n, "IMG", { src: !0, alt: !0, class: !0 }), n.forEach(o), this.h();
-    },
-    h() {
-      g(i.src, s = /*item*/
-      r[3].image.url) || c(i, "src", s), c(i, "alt", l = /*item*/
-      r[3].caption || ""), c(i, "class", "svelte-nb996j"), c(e, "class", "image-container svelte-nb996j");
-    },
-    m(t, n) {
-      h(t, e, n), m(e, i);
-    },
-    p(t, n) {
-      n & /*value*/
-      1 && !g(i.src, s = /*item*/
-      t[3].image.url) && c(i, "src", s), n & /*value*/
-      1 && l !== (l = /*item*/
-      t[3].caption || "") && c(i, "alt", l);
-    },
-    d(t) {
-      t && o(e);
-    }
-  };
-}
-function V(r) {
-  let e;
-  function i(t, n) {
-    if ("image" in /*item*/
-    t[3] && /*item*/
-    t[3].image) return S;
-    if ("video" in /*item*/
-    t[3] && /*item*/
-    t[3].video) return O;
-    if ("audio" in /*item*/
-    t[3] && /*item*/
-    t[3].audio) return N;
-  }
-  let s = i(r), l = s && s(r);
-  return {
-    c() {
-      l && l.c(), e = j();
-    },
-    l(t) {
-      l && l.l(t), e = j();
-    },
-    m(t, n) {
-      l && l.m(t, n), h(t, e, n);
-    },
-    p(t, n) {
-      s === (s = i(t)) && l ? l.p(t, n) : (l && l.d(1), l = s && s(t), l && (l.c(), l.m(e.parentNode, e)));
-    },
-    d(t) {
-      t && o(e), l && l.d(t);
-    }
-  };
-}
-function D(r) {
-  let e, i, s = (
-    /*value*/
-    r[0].length - 5 + ""
-  ), l;
-  return {
-    c() {
-      e = d("div"), i = w("+"), l = w(s), this.h();
-    },
-    l(t) {
-      e = u(t, "DIV", { class: !0 });
-      var n = v(e);
-      i = k(n, "+"), l = k(n, s), n.forEach(o), this.h();
-    },
-    h() {
-      c(e, "class", "more-indicator svelte-nb996j");
-    },
-    m(t, n) {
-      h(t, e, n), m(e, i), m(e, l);
-    },
-    p(t, n) {
-      n & /*value*/
-      1 && s !== (s = /*value*/
-      t[0].length - 5 + "") && B(l, s);
-    },
-    d(t) {
-      t && o(e);
-    }
-  };
-}
-function z(r) {
-  let e, i = (
-    /*value*/
-    r[0] && /*value*/
-    r[0].length > 0 && I(r)
-  );
-  return {
-    c() {
-      e = d("div"), i && i.c(), this.h();
-    },
-    l(s) {
-      e = u(s, "DIV", { class: !0 });
-      var l = v(e);
-      i && i.l(l), l.forEach(o), this.h();
-    },
-    h() {
-      c(e, "class", "container svelte-nb996j"), _(
-        e,
-        "table",
-        /*type*/
-        r[1] === "table"
-      ), _(
-        e,
-        "gallery",
-        /*type*/
-        r[1] === "gallery"
-      ), _(
-        e,
-        "selected",
-        /*selected*/
-        r[2]
-      );
-    },
-    m(s, l) {
-      h(s, e, l), i && i.m(e, null);
-    },
-    p(s, [l]) {
-      /*value*/
-      s[0] && /*value*/
-      s[0].length > 0 ? i ? i.p(s, l) : (i = I(s), i.c(), i.m(e, null)) : i && (i.d(1), i = null), l & /*type*/
-      2 && _(
-        e,
-        "table",
-        /*type*/
-        s[1] === "table"
-      ), l & /*type*/
-      2 && _(
-        e,
-        "gallery",
-        /*type*/
-        s[1] === "gallery"
-      ), l & /*selected*/
-      4 && _(
-        e,
-        "selected",
-        /*selected*/
-        s[2]
-      );
-    },
-    i: b,
-    o: b,
-    d(s) {
-      s && o(e), i && i.d();
-    }
-  };
-}
-function A(r, e, i) {
-  let { value: s } = e, { type: l } = e, { selected: t = !1 } = e;
-  return r.$$set = (n) => {
-    "value" in n && i(0, s = n.value), "type" in n && i(1, l = n.type), "selected" in n && i(2, t = n.selected);
-  }, [s, l, t];
-}
-class F extends M {
-  constructor(e) {
-    super(), L(this, e, A, z, T, { value: 0, type: 1, selected: 2 });
-  }
-}
-export {
-  F as default
-};

mediagallery/backend/gradio_mediagallery/templates/example/style.css

@@ -1 +0,0 @@
-.container.svelte-nb996j.svelte-nb996j{border-radius:var(--radius-lg);overflow:hidden;border:2px solid transparent;box-sizing:border-box}.container.selected.svelte-nb996j.svelte-nb996j{border-color:var(--border-color-accent)}tr:hover .container.svelte-nb996j.svelte-nb996j,tr:hover .images-wrapper.svelte-nb996j.svelte-nb996j,tr:hover .image-container.svelte-nb996j.svelte-nb996j,tr:hover .image-container.svelte-nb996j img.svelte-nb996j,tr:hover .image-container.svelte-nb996j video.svelte-nb996j{transform:none!important;scale:none!important}.container.svelte-nb996j .svelte-nb996j,.images-wrapper.svelte-nb996j.svelte-nb996j,.image-container.svelte-nb996j.svelte-nb996j{box-sizing:border-box}.images-wrapper.svelte-nb996j.svelte-nb996j{display:flex;gap:var(--spacing-sm)}.container.table.svelte-nb996j .images-wrapper.svelte-nb996j{flex-direction:row;align-items:center;padding:var(--spacing-sm);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);background:var(--background-fill-secondary)}.container.gallery.svelte-nb996j .images-wrapper.svelte-nb996j{flex-direction:row;gap:0}.image-container.svelte-nb996j.svelte-nb996j{position:relative;flex-shrink:0}.container.table.svelte-nb996j .image-container.svelte-nb996j{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-nb996j .image-container.svelte-nb996j{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8))}.container.gallery.svelte-nb996j .image-container.svelte-nb996j:first-child{margin-left:0}.more-indicator.svelte-nb996j.svelte-nb996j{display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:var(--body-text-color-subdued);background:var(--background-fill-secondary);border-radius:var(--radius-md)}.container.table.svelte-nb996j .more-indicator.svelte-nb996j{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-nb996j .more-indicator.svelte-nb996j{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8))}.image-container.svelte-nb996j img.svelte-nb996j,.image-container.svelte-nb996j video.svelte-nb996j{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.image-container.audio.svelte-nb996j.svelte-nb996j{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-md);color:#fff}.container.svelte-nb996j.svelte-nb996j,.container.svelte-nb996j .svelte-nb996j,.image-container.svelte-nb996j.svelte-nb996j,.image-container.svelte-nb996j img.svelte-nb996j,.image-container.svelte-nb996j video.svelte-nb996j{transition:none!important}.container.svelte-nb996j.svelte-nb996j:hover,.image-container.svelte-nb996j.svelte-nb996j:hover,.image-container.svelte-nb996j:hover img.svelte-nb996j,.image-container.svelte-nb996j:hover video.svelte-nb996j{transform:none!important;filter:none!important;opacity:1!important}

mediagallery/demo/app.py

@@ -1,15 +0,0 @@
-
-import gradio as gr
-from gradio_mediagallery import MediaGallery
-
-
-example = MediaGallery().example_value()
-
-with gr.Blocks() as demo:
-    with gr.Row():
-        MediaGallery(label="Blank"),  # blank component
-        MediaGallery(value=example, label="Populated"),  # populated component
-
-
-if __name__ == "__main__":
-    demo.launch()

mediagallery/demo/css.css

@@ -1,157 +0,0 @@
-html {
-	font-family: Inter;
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.5;
-	-webkit-text-size-adjust: 100%;
-	background: #fff;
-	color: #323232;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-rendering: optimizeLegibility;
-}
-
-:root {
-	--space: 1;
-	--vspace: calc(var(--space) * 1rem);
-	--vspace-0: calc(3 * var(--space) * 1rem);
-	--vspace-1: calc(2 * var(--space) * 1rem);
-	--vspace-2: calc(1.5 * var(--space) * 1rem);
-	--vspace-3: calc(0.5 * var(--space) * 1rem);
-}
-
-.app {
-	max-width: 748px !important;
-}
-
-.prose p {
-	margin: var(--vspace) 0;
-	line-height: var(--vspace * 2);
-	font-size: 1rem;
-}
-
-code {
-	font-family: "Inconsolata", sans-serif;
-	font-size: 16px;
-}
-
-h1,
-h1 code {
-	font-weight: 400;
-	line-height: calc(2.5 / var(--space) * var(--vspace));
-}
-
-h1 code {
-	background: none;
-	border: none;
-	letter-spacing: 0.05em;
-	padding-bottom: 5px;
-	position: relative;
-	padding: 0;
-}
-
-h2 {
-	margin: var(--vspace-1) 0 var(--vspace-2) 0;
-	line-height: 1em;
-}
-
-h3,
-h3 code {
-	margin: var(--vspace-1) 0 var(--vspace-2) 0;
-	line-height: 1em;
-}
-
-h4,
-h5,
-h6 {
-	margin: var(--vspace-3) 0 var(--vspace-3) 0;
-	line-height: var(--vspace);
-}
-
-.bigtitle,
-h1,
-h1 code {
-	font-size: calc(8px * 4.5);
-	word-break: break-word;
-}
-
-.title,
-h2,
-h2 code {
-	font-size: calc(8px * 3.375);
-	font-weight: lighter;
-	word-break: break-word;
-	border: none;
-	background: none;
-}
-
-.subheading1,
-h3,
-h3 code {
-	font-size: calc(8px * 1.8);
-	font-weight: 600;
-	border: none;
-	background: none;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-}
-
-h2 code {
-	padding: 0;
-	position: relative;
-	letter-spacing: 0.05em;
-}
-
-blockquote {
-	font-size: calc(8px * 1.1667);
-	font-style: italic;
-	line-height: calc(1.1667 * var(--vspace));
-	margin: var(--vspace-2) var(--vspace-2);
-}
-
-.subheading2,
-h4 {
-	font-size: calc(8px * 1.4292);
-	text-transform: uppercase;
-	font-weight: 600;
-}
-
-.subheading3,
-h5 {
-	font-size: calc(8px * 1.2917);
-	line-height: calc(1.2917 * var(--vspace));
-
-	font-weight: lighter;
-	text-transform: uppercase;
-	letter-spacing: 0.15em;
-}
-
-h6 {
-	font-size: calc(8px * 1.1667);
-	font-size: 1.1667em;
-	font-weight: normal;
-	font-style: italic;
-	font-family: "le-monde-livre-classic-byol", serif !important;
-	letter-spacing: 0px !important;
-}
-
-#start .md > *:first-child {
-	margin-top: 0;
-}
-
-h2 + h3 {
-	margin-top: 0;
-}
-
-.md hr {
-	border: none;
-	border-top: 1px solid var(--block-border-color);
-	margin: var(--vspace-2) 0 var(--vspace-2) 0;
-}
-.prose ul {
-	margin: var(--vspace-2) 0 var(--vspace-1) 0;
-}
-
-.gap {
-	gap: 0;
-}

mediagallery/demo/space.py

@@ -1,176 +0,0 @@
-
-import gradio as gr
-from app import demo as app
-import os
-
-_docs = {'MediaGallery': {'description': 'Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery.\nIf used as an output, the user can click on individual images or videos to view them at a higher resolution.\n', 'members': {'__init__': {'value': {'type': 'Sequence[\n        np.ndarray | PIL.Image.Image | str | Path | tuple\n    ]\n    | Callable\n    | None', 'default': 'None', 'description': 'List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'format': {'type': 'str', 'default': '"webp"', 'description': "Format to save images before they are returned to the frontend, such as 'jpeg' or 'png'. This parameter only applies to images that are returned from the prediction function as numpy arrays or PIL Images. The format should be supported by the PIL library."}, 'file_types': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of file extensions or types of files to be uploaded (e.g. [\'image\', \'.mp4\']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.'}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}, 'columns': {'type': 'int | None', 'default': '2', 'description': 'Represents the number of images that should be shown in one row.'}, 'rows': {'type': 'int | None', 'default': 'None', 'description': 'Represents the number of rows in the image grid.'}, 'height': {'type': 'int | float | str | None', 'default': 'None', 'description': 'The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.'}, 'allow_preview': {'type': 'bool', 'default': 'True', 'description': 'If True, images in the gallery will be enlarged when they are clicked. Default is True.'}, 'preview': {'type': 'bool | None', 'default': 'None', 'description': 'If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.'}, 'selected_index': {'type': 'int | None', 'default': 'None', 'description': 'The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.'}, 'object_fit': {'type': 'Literal[\n        "contain", "cover", "fill", "none", "scale-down"\n    ]\n    | None', 'default': 'None', 'description': 'CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".'}, 'show_share_button': {'type': 'bool | None', 'default': 'None', 'description': 'If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.'}, 'show_download_button': {'type': 'bool | None', 'default': 'True', 'description': 'If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.'}, 'type': {'type': 'Literal["numpy", "pil", "filepath"]', 'default': '"filepath"', 'description': 'The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.'}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.'}}, 'postprocess': {'value': {'type': 'list[\n        typing.Union[\n            numpy.ndarray,\n            PIL.Image.Image,\n            pathlib.Path,\n            str,\n            tuple[\n                typing.Union[\n                    numpy.ndarray,\n                    PIL.Image.Image,\n                    pathlib.Path,\n                    str,\n                ],\n                str,\n            ],\n        ][\n            numpy.ndarray,\n            PIL.Image.Image,\n            pathlib.Path,\n            str,\n            tuple[\n                typing.Union[\n                    numpy.ndarray,\n                    PIL.Image.Image,\n                    pathlib.Path,\n                    str,\n                ][\n                    numpy.ndarray,\n                    PIL.Image.Image,\n                    pathlib.Path,\n                    str,\n                ],\n                str,\n            ],\n        ]\n    ]\n    | None', 'description': 'Expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.'}}, 'preprocess': {'return': {'type': 'list[tuple[str, str | None]]\n    | list[tuple[PIL.Image.Image, str | None]]\n    | list[tuple[numpy.ndarray, str | None]]\n    | None', 'description': 'Passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.'}, 'value': None}}, 'events': {'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the MediaGallery. Uses event data gradio.SelectData to carry `value` referring to the label of the MediaGallery, and `selected` to refer to state of the MediaGallery. See EventData documentation on how to use this event data'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the MediaGallery.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the MediaGallery changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'preview_close': {'type': None, 'default': None, 'description': 'This event is triggered when the MediaGallery preview is closed by the user'}, 'preview_open': {'type': None, 'default': None, 'description': 'This event is triggered when the MediaGallery preview is opened by the user'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MediaGallery': []}}}
-
-abs_path = os.path.join(os.path.dirname(__file__), "css.css")
-
-with gr.Blocks(
-    css=abs_path,
-    theme=gr.themes.Default(
-        font_mono=[
-            gr.themes.GoogleFont("Inconsolata"),
-            "monospace",
-        ],
-    ),
-) as demo:
-    gr.Markdown(
-"""
-# `gradio_mediagallery`
-
-<div style="display: flex; gap: 7px;">
-<a href="https://pypi.org/project/gradio_mediagallery/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_mediagallery"></a>  
-</div>
-
-Python library for easily interacting with trained machine learning models
-""", elem_classes=["md-custom"], header_links=True)
-    app.render()
-    gr.Markdown(
-"""
-## Installation
-
-```bash
-pip install gradio_mediagallery
-```
-
-## Usage
-
-```python
-
-import gradio as gr
-from gradio_mediagallery import MediaGallery
-
-
-example = MediaGallery().example_value()
-
-with gr.Blocks() as demo:
-    with gr.Row():
-        MediaGallery(label="Blank"),  # blank component
-        MediaGallery(value=example, label="Populated"),  # populated component
-
-
-if __name__ == "__main__":
-    demo.launch()
-
-```
-""", elem_classes=["md-custom"], header_links=True)
-
-
-    gr.Markdown("""
-## `MediaGallery`
-
-### Initialization
-""", elem_classes=["md-custom"], header_links=True)
-
-    gr.ParamViewer(value=_docs["MediaGallery"]["members"]["__init__"], linkify=[])
-
-
-    gr.Markdown("### Events")
-    gr.ParamViewer(value=_docs["MediaGallery"]["events"], linkify=['Event'])
-
-
-
-
-    gr.Markdown("""
-
-### User function
-
-The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
-
-- When used as an Input, the component only impacts the input signature of the user function.
-- When used as an output, the component only impacts the return signature of the user function.
-
-The code snippet below is accurate in cases where the component is used as both an input and an output.
-
-- **As input:** Is passed, passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
-- **As output:** Should return, expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
-
- ```python
-def predict(
-    value: list[tuple[str, str | None]]
-    | list[tuple[PIL.Image.Image, str | None]]
-    | list[tuple[numpy.ndarray, str | None]]
-    | None
-) -> list[
-        typing.Union[
-            numpy.ndarray,
-            PIL.Image.Image,
-            pathlib.Path,
-            str,
-            tuple[
-                typing.Union[
-                    numpy.ndarray,
-                    PIL.Image.Image,
-                    pathlib.Path,
-                    str,
-                ],
-                str,
-            ],
-        ][
-            numpy.ndarray,
-            PIL.Image.Image,
-            pathlib.Path,
-            str,
-            tuple[
-                typing.Union[
-                    numpy.ndarray,
-                    PIL.Image.Image,
-                    pathlib.Path,
-                    str,
-                ][
-                    numpy.ndarray,
-                    PIL.Image.Image,
-                    pathlib.Path,
-                    str,
-                ],
-                str,
-            ],
-        ]
-    ]
-    | None:
-    return value
-```
-""", elem_classes=["md-custom", "MediaGallery-user-fn"], header_links=True)
-
-
-
-
-    demo.load(None, js=r"""function() {
-    const refs = {};
-    const user_fn_refs = {
-          MediaGallery: [], };
-    requestAnimationFrame(() => {
-
-        Object.entries(user_fn_refs).forEach(([key, refs]) => {
-            if (refs.length > 0) {
-                const el = document.querySelector(`.${key}-user-fn`);
-                if (!el) return;
-                refs.forEach(ref => {
-                    el.innerHTML = el.innerHTML.replace(
-                        new RegExp("\\b"+ref+"\\b", "g"),
-                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
-                    );
-                })
-            }
-        })
-
-        Object.entries(refs).forEach(([key, refs]) => {
-            if (refs.length > 0) {
-                const el = document.querySelector(`.${key}`);
-                if (!el) return;
-                refs.forEach(ref => {
-                    el.innerHTML = el.innerHTML.replace(
-                        new RegExp("\\b"+ref+"\\b", "g"),
-                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
-                    );
-                })
-            }
-        })
-    })
-}
-
-""")
-
-demo.launch()

mediagallery/frontend/Example.svelte

@@ -1,171 +0,0 @@
-<script lang="ts">
-	import type { GalleryImage, GalleryVideo, GalleryAudio, GalleryData } from "./types";
-
-	export let value: GalleryData[] | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
-</script>
-
-<div
-	class="container"
-	class:table={type === "table"}
-	class:gallery={type === "gallery"}
-	class:selected
->
-	{#if value && value.length > 0}
-		<div class="images-wrapper">
-			{#each value.slice(0, 5) as item}
-				{#if "image" in item && item.image}
-					<div class="image-container">
-						<img src={item.image.url} alt={item.caption || ""} />
-					</div>
-				{:else if "video" in item && item.video}
-					<div class="image-container">
-						<video
-							src={item.video.url}
-							controls={false}
-							muted
-							preload="metadata"
-						/>
-					</div>
-				{:else if "audio" in item && item.audio}
-					<div class="image-container audio">
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-							<path d="M9 18V5l12-2v13"></path>
-							<circle cx="6" cy="18" r="3"></circle>
-							<circle cx="18" cy="16" r="3"></circle>
-						</svg>
-					</div>
-				{/if}
-			{/each}
-			{#if value.length > 5}
-				<div class="more-indicator">+{value.length - 5}</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.container {
-		border-radius: var(--radius-lg);
-		overflow: hidden;
-		border: 2px solid transparent;
-		box-sizing: border-box;
-	}
-
-	.container.selected {
-		border-color: var(--border-color-accent);
-	}
-
-	/* Prevent any parent hover effects from causing shifts */
-	:global(tr:hover) .container,
-	:global(tr:hover) .images-wrapper,
-	:global(tr:hover) .image-container,
-	:global(tr:hover) .image-container img,
-	:global(tr:hover) .image-container video {
-		transform: none !important;
-		scale: none !important;
-	}
-
-	.container *,
-	.images-wrapper,
-	.image-container {
-		box-sizing: border-box;
-	}
-
-	.images-wrapper {
-		display: flex;
-		gap: var(--spacing-sm);
-	}
-
-	.container.table .images-wrapper {
-		flex-direction: row;
-		align-items: center;
-		padding: var(--spacing-sm);
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--radius-lg);
-		background: var(--background-fill-secondary);
-	}
-
-	.container.gallery .images-wrapper {
-		flex-direction: row;
-		gap: 0;
-	}
-
-	.image-container {
-		position: relative;
-		flex-shrink: 0;
-	}
-
-	.container.table .image-container {
-		width: var(--size-12);
-		height: var(--size-12);
-	}
-
-	.container.gallery .image-container {
-		width: var(--size-20);
-		height: var(--size-20);
-		margin-left: calc(-1 * var(--size-8));
-	}
-
-	.container.gallery .image-container:first-child {
-		margin-left: 0;
-	}
-
-	.more-indicator {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: var(--text-sm);
-		font-weight: bold;
-		color: var(--body-text-color-subdued);
-		background: var(--background-fill-secondary);
-		border-radius: var(--radius-md);
-	}
-
-	.container.table .more-indicator {
-		width: var(--size-12);
-		height: var(--size-12);
-	}
-
-	.container.gallery .more-indicator {
-		width: var(--size-20);
-		height: var(--size-20);
-		margin-left: calc(-1 * var(--size-8));
-	}
-
-	.image-container img,
-	.image-container video {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		border-radius: var(--radius-md);
-	}
-
-	.image-container.audio {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		border-radius: var(--radius-md);
-		color: white;
-	}
-
-	/* Remove hover effects */
-	.container,
-	.container *,
-	.image-container,
-	.image-container img,
-	.image-container video {
-		transition: none !important;
-	}
-
-	.container:hover,
-	.image-container:hover,
-	.image-container:hover img,
-	.image-container:hover video {
-		transform: none !important;
-		filter: none !important;
-		opacity: 1 !important;
-	}
-</style>

mediagallery/frontend/Index.svelte

@@ -1,193 +0,0 @@
-<script context="module" lang="ts">
-	export { default as BaseGallery } from "./shared/Gallery.svelte";
-	export { default as BaseExample } from "./Example.svelte";
-</script>
-
-<script lang="ts">
-	import type { GalleryImage, GalleryVideo, GalleryAudio, GalleryData } from "./types";
-	import type { FileData } from "@gradio/client";
-	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
-	import { Block, UploadText } from "@gradio/atoms";
-	import Gallery from "./shared/Gallery.svelte";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { StatusTracker } from "@gradio/statustracker";
-	import { createEventDispatcher } from "svelte";
-	import { BaseFileUpload } from "@gradio/file";
-
-	export let loading_status: LoadingStatus;
-	export let show_label: boolean;
-	export let label: string;
-	export let root: string;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: GalleryData[] | null = null;
-	export let file_types: string[] | null = ["image", "video", "audio"];
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let columns: number | number[] | undefined = [2];
-	export let rows: number | number[] | undefined = undefined;
-	export let height: number | "auto" = "auto";
-	export let preview: boolean;
-	export let allow_preview = true;
-	export let selected_index: number | null = null;
-	export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
-		"cover";
-	export let show_share_button = false;
-	export let interactive: boolean;
-	export let show_download_button = false;
-	export let gradio: Gradio<{
-		change: typeof value;
-		upload: typeof value;
-		select: SelectData;
-		share: ShareData;
-		error: string;
-		prop_change: Record<string, any>;
-		clear_status: LoadingStatus;
-		preview_open: never;
-		preview_close: never;
-	}>;
-	export let show_fullscreen_button = true;
-	export let fullscreen = false;
-
-	const dispatch = createEventDispatcher();
-
-	$: no_value = value === null ? true : value.length === 0;
-	$: selected_index, dispatch("prop_change", { selected_index });
-
-	// Audio file extensions for detection
-	const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.flac', '.aac'];
-
-	function isAudioFile(file: FileData): boolean {
-		if (file.mime_type?.includes("audio")) return true;
-		const ext = (file.orig_name || file.path || "").toLowerCase();
-		return AUDIO_EXTENSIONS.some(e => ext.endsWith(e));
-	}
-
-	async function process_upload_files(
-		files: FileData[]
-	): Promise<GalleryData[]> {
-		const processed_files = await Promise.all(
-			files.map(async (x) => {
-				if (x.path?.toLowerCase().endsWith(".svg") && x.url) {
-					const response = await fetch(x.url);
-					const svgContent = await response.text();
-					return {
-						...x,
-						url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
-					};
-				}
-				return x;
-			})
-		);
-
-		return processed_files.map((x): GalleryData => {
-			if (x.mime_type?.includes("video")) {
-				return { video: x, caption: null };
-			} else if (isAudioFile(x)) {
-				return { audio: x, caption: null };
-			} else {
-				return { image: x, caption: null };
-			}
-		});
-	}
-
-	// Handle adding more files to existing gallery
-	async function handle_upload(e: CustomEvent<FileData | FileData[]>) {
-		const files = Array.isArray(e.detail) ? e.detail : [e.detail];
-		const new_items = await process_upload_files(files);
-
-		// Append to existing items instead of replacing
-		if (value && value.length > 0) {
-			value = [...value, ...new_items];
-		} else {
-			value = new_items;
-		}
-
-		gradio.dispatch("upload", value);
-		gradio.dispatch("change", value);
-	}
-</script>
-
-<Block
-	{visible}
-	variant="solid"
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
-	allow_overflow={false}
-	height={typeof height === "number" ? height : undefined}
-	bind:fullscreen
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
-	/>
-	{#if interactive && no_value}
-		<!-- Initial upload area when gallery is empty -->
-		<BaseFileUpload
-			value={null}
-			{root}
-			{label}
-			{file_types}
-			max_file_size={gradio.max_file_size}
-			file_count={"multiple"}
-			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
-			on:upload={handle_upload}
-			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
-		>
-			<UploadText i18n={gradio.i18n} type="gallery" />
-		</BaseFileUpload>
-	{:else}
-		<Gallery
-			on:change={() => gradio.dispatch("change", value)}
-			on:select={(e) => gradio.dispatch("select", e.detail)}
-			on:share={(e) => gradio.dispatch("share", e.detail)}
-			on:error={(e) => gradio.dispatch("error", e.detail)}
-			on:preview_open={() => gradio.dispatch("preview_open")}
-			on:preview_close={() => gradio.dispatch("preview_close")}
-			on:fullscreen={({ detail }) => {
-				fullscreen = detail;
-			}}
-			on:upload={handle_upload}
-			{label}
-			{show_label}
-			{columns}
-			{rows}
-			{height}
-			{preview}
-			{object_fit}
-			{interactive}
-			{allow_preview}
-			bind:selected_index
-			bind:value
-			{show_share_button}
-			{show_download_button}
-			i18n={gradio.i18n}
-			_fetch={(...args) => gradio.client.fetch(...args)}
-			{show_fullscreen_button}
-			{fullscreen}
-			{root}
-			{file_types}
-			max_file_size={gradio.max_file_size}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
-		/>
-	{/if}
-</Block>
-
-<style>
-	/* Component styles are in Gallery.svelte */
-</style>

mediagallery/frontend/gradio.config.js

@@ -1,9 +0,0 @@
-export default {
-  plugins: [],
-  svelte: {
-    preprocess: [],
-  },
-  build: {
-    target: "modules",
-  },
-};

mediagallery/frontend/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "gradio_mediagallery",
-  "version": "0.15.24",
-  "description": "Gradio UI packages",
-  "type": "module",
-  "author": "",
-  "license": "ISC",
-  "private": false,
-  "dependencies": {
-    "@gradio/atoms": "0.16.2",
-    "@gradio/client": "1.15.3",
-    "@gradio/icons": "0.12.0",
-    "@gradio/image": "0.22.10",
-    "@gradio/statustracker": "0.10.13",
-    "@gradio/upload": "0.16.8",
-    "@gradio/utils": "0.10.2",
-    "@gradio/video": "0.14.18",
-    "@gradio/file": "0.12.21",
-    "dequal": "^2.0.2"
-  },
-  "devDependencies": {
-    "@gradio/preview": "0.13.2"
-  },
-  "main": "./Index.svelte",
-  "main_changeset": true,
-  "exports": {
-    ".": {
-      "gradio": "./Index.svelte",
-      "svelte": "./dist/Index.svelte",
-      "types": "./dist/Index.svelte.d.ts"
-    },
-    "./package.json": "./package.json",
-    "./base": {
-      "gradio": "./shared/Gallery.svelte",
-      "svelte": "./dist/shared/Gallery.svelte",
-      "types": "./dist/shared/Gallery.svelte.d.ts"
-    },
-    "./example": {
-      "gradio": "./Example.svelte",
-      "svelte": "./dist/Example.svelte",
-      "types": "./dist/Example.svelte.d.ts"
-    }
-  },
-  "peerDependencies": {
-    "svelte": "^4.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/gradio-app/gradio.git",
-    "directory": "js/gallery"
-  }
-}

mediagallery/frontend/shared/Gallery.svelte

@@ -1,1031 +0,0 @@
-<script lang="ts">
-	import {
-		BlockLabel,
-		Empty,
-		ShareButton,
-		IconButton,
-		IconButtonWrapper,
-		FullscreenButton
-	} from "@gradio/atoms";
-	import { Upload } from "@gradio/upload";
-	import type { SelectData, I18nFormatter } from "@gradio/utils";
-	import { Image } from "@gradio/image/shared";
-	import { Video } from "@gradio/video/shared";
-	import { dequal } from "dequal";
-	import { createEventDispatcher, onMount } from "svelte";
-	import { tick } from "svelte";
-	import type { GalleryImage, GalleryVideo, GalleryAudio, GalleryData } from "../types";
-	import { getMediaType, getMediaFile } from "../types";
-
-	import { Download, Image as ImageIcon, Clear, Play } from "@gradio/icons";
-	import { FileData } from "@gradio/client";
-	import type { Client } from "@gradio/client";
-	import { format_gallery_for_sharing } from "./utils";
-
-	export let show_label = true;
-	export let label: string;
-	export let value: GalleryData[] | null = null;
-	export let columns: number | number[] | undefined = [2];
-	export let rows: number | number[] | undefined = undefined;
-	export let height: number | "auto" = "auto";
-	export let preview: boolean;
-	export let allow_preview = true;
-	export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
-		"cover";
-	export let show_share_button = false;
-	export let show_download_button = false;
-	export let i18n: I18nFormatter;
-	export let selected_index: number | null = null;
-	export let interactive: boolean;
-	export let _fetch: typeof fetch;
-	export let mode: "normal" | "minimal" = "normal";
-	export let show_fullscreen_button = true;
-	export let display_icon_button_wrapper_top_corner = false;
-	export let fullscreen = false;
-	export let root = "";
-	export let file_types: string[] | null = ["image", "video", "audio"];
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"] | undefined = undefined;
-	export let stream_handler: Client["stream"] | undefined = undefined;
-
-	let is_full_screen = false;
-	let image_container: HTMLElement;
-
-	const dispatch = createEventDispatcher<{
-		change: undefined;
-		select: SelectData;
-		preview_open: undefined;
-		preview_close: undefined;
-		fullscreen: boolean;
-		upload: FileData | FileData[];
-		error: string;
-	}>();
-
-	// tracks whether the value of the gallery was reset
-	let was_reset = true;
-
-	$: was_reset = value == null || value.length === 0 ? true : was_reset;
-
-	let resolved_value: GalleryData[] | null = null;
-
-	$: resolved_value =
-		value == null
-			? null
-			: (value.map((data) => {
-					if ("video" in data) {
-						return {
-							video: data.video as FileData,
-							caption: data.caption
-						};
-					} else if ("audio" in data) {
-						return {
-							audio: data.audio as FileData,
-							caption: data.caption
-						};
-					} else if ("image" in data) {
-						return { image: data.image as FileData, caption: data.caption };
-					}
-					return {};
-				}) as GalleryData[]);
-
-	let prev_value: GalleryData[] | null = value;
-	if (selected_index == null && preview && value?.length) {
-		selected_index = 0;
-	}
-	let old_selected_index: number | null = selected_index;
-
-	$: if (!dequal(prev_value, value)) {
-		// When value is falsy (clear button or first load),
-		// preview determines the selected image
-		if (was_reset) {
-			selected_index = preview && value?.length ? 0 : null;
-			was_reset = false;
-			// Otherwise we keep the selected_index the same if the
-			// gallery has at least as many elements as it did before
-		} else {
-			if (selected_index !== null && value !== null) {
-				selected_index = Math.max(
-					0,
-					Math.min(selected_index, value.length - 1)
-				);
-			} else {
-				selected_index = null;
-			}
-		}
-		dispatch("change");
-		prev_value = value;
-	}
-
-	$: previous =
-		((selected_index ?? 0) + (resolved_value?.length ?? 0) - 1) %
-		(resolved_value?.length ?? 0);
-	$: next = ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0);
-
-	function handle_preview_click(event: MouseEvent): void {
-		const element = event.target as HTMLElement;
-		const x = event.offsetX;
-		const width = element.offsetWidth;
-		const centerX = width / 2;
-
-		if (x < centerX) {
-			selected_index = previous;
-		} else {
-			selected_index = next;
-		}
-	}
-
-	function on_keydown(e: KeyboardEvent): void {
-		switch (e.code) {
-			case "Escape":
-				e.preventDefault();
-				selected_index = null;
-				break;
-			case "ArrowLeft":
-				e.preventDefault();
-				selected_index = previous;
-				break;
-			case "ArrowRight":
-				e.preventDefault();
-				selected_index = next;
-				break;
-			default:
-				break;
-		}
-	}
-
-	$: {
-		if (selected_index !== old_selected_index) {
-			old_selected_index = selected_index;
-			if (selected_index !== null) {
-				if (resolved_value != null) {
-					selected_index = Math.max(
-						0,
-						Math.min(selected_index, resolved_value.length - 1)
-					);
-				}
-				dispatch("select", {
-					index: selected_index,
-					value: resolved_value?.[selected_index]
-				});
-			}
-		}
-	}
-
-	$: if (allow_preview) {
-		scroll_to_img(selected_index);
-	}
-
-	let el: HTMLButtonElement[] = [];
-	let container_element: HTMLDivElement;
-
-	async function scroll_to_img(index: number | null): Promise<void> {
-		if (typeof index !== "number") return;
-		await tick();
-
-		if (el[index] === undefined) return;
-
-		el[index]?.focus();
-
-		const { left: container_left, width: container_width } =
-			container_element.getBoundingClientRect();
-		const { left, width } = el[index].getBoundingClientRect();
-
-		const relative_left = left - container_left;
-
-		const pos =
-			relative_left +
-			width / 2 -
-			container_width / 2 +
-			container_element.scrollLeft;
-
-		if (container_element && typeof container_element.scrollTo === "function") {
-			container_element.scrollTo({
-				left: pos < 0 ? 0 : pos,
-				behavior: "smooth"
-			});
-		}
-	}
-
-	let window_height = 0;
-
-	// Unlike `gr.Image()`, images specified via remote URLs are not cached in the server
-	// and their remote URLs are directly passed to the client as `value[].image.url`.
-	// The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download),
-	// so we need to download the image via JS as below.
-	async function download(file_url: string, name: string): Promise<void> {
-		let response;
-		try {
-			response = await _fetch(file_url);
-		} catch (error) {
-			if (error instanceof TypeError) {
-				// If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful),
-				// open the link in a new tab instead, mimicing the behavior of the `download` attribute for remote URLs,
-				// which is not ideal, but a reasonable fallback.
-				window.open(file_url, "_blank", "noreferrer");
-				return;
-			}
-
-			throw error;
-		}
-		const blob = await response.blob();
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement("a");
-		link.href = url;
-		link.download = name;
-		link.click();
-		URL.revokeObjectURL(url);
-	}
-
-	$: selected_media =
-		selected_index != null && resolved_value != null
-			? resolved_value[selected_index]
-			: null;
-
-	let thumbnails_overflow = false;
-
-	function check_thumbnails_overflow(): void {
-		if (container_element) {
-			thumbnails_overflow =
-				container_element.scrollWidth > container_element.clientWidth;
-		}
-	}
-
-	onMount(() => {
-		check_thumbnails_overflow();
-		document.addEventListener("fullscreenchange", () => {
-			is_full_screen = !!document.fullscreenElement;
-		});
-		window.addEventListener("resize", check_thumbnails_overflow);
-		return () =>
-			window.removeEventListener("resize", check_thumbnails_overflow);
-	});
-
-	$: resolved_value, check_thumbnails_overflow();
-	$: if (container_element) {
-		check_thumbnails_overflow();
-	}
-</script>
-
-<svelte:window bind:innerHeight={window_height} />
-
-{#if show_label}
-	<BlockLabel {show_label} Icon={ImageIcon} label={label || "Gallery"} />
-{/if}
-{#if value == null || resolved_value == null || resolved_value.length === 0}
-	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
-{:else}
-	<div class="gallery-container" bind:this={image_container}>
-		{#if selected_media && allow_preview}
-			<button
-				on:keydown={on_keydown}
-				class="preview"
-				class:minimal={mode === "minimal"}
-			>
-				<IconButtonWrapper
-					display_top_corner={display_icon_button_wrapper_top_corner}
-				>
-					{#if show_download_button}
-						<IconButton
-							Icon={Download}
-							label={i18n("common.download")}
-							on:click={() => {
-								const file = getMediaFile(selected_media);
-								if (file == null) {
-									return;
-								}
-								const { url, orig_name } = file;
-								if (url) {
-									download(url, orig_name ?? "media");
-								}
-							}}
-						/>
-					{/if}
-
-					{#if show_fullscreen_button}
-						<FullscreenButton {fullscreen} on:fullscreen />
-					{/if}
-
-					{#if show_share_button}
-						<div class="icon-button">
-							<ShareButton
-								{i18n}
-								on:share
-								on:error
-								value={resolved_value}
-								formatter={format_gallery_for_sharing}
-							/>
-						</div>
-					{/if}
-					{#if !is_full_screen}
-						<IconButton
-							Icon={Clear}
-							label="Close"
-							on:click={() => {
-								selected_index = null;
-								dispatch("preview_close");
-							}}
-						/>
-					{/if}
-				</IconButtonWrapper>
-				<button
-					class="media-button"
-					on:click={"image" in selected_media
-						? (event) => handle_preview_click(event)
-						: null}
-					style="height: calc(100% - {selected_media.caption
-						? '80px'
-						: '60px'})"
-					aria-label="detailed view of selected media"
-				>
-					{#if "image" in selected_media}
-						<Image
-							data-testid="detailed-image"
-							src={selected_media.image.url}
-							alt={selected_media.caption || ""}
-							title={selected_media.caption || null}
-							class={selected_media.caption && "with-caption"}
-							loading="lazy"
-						/>
-					{:else if "video" in selected_media}
-						<Video
-							src={selected_media.video.url}
-							data-testid={"detailed-video"}
-							alt={selected_media.caption || ""}
-							loading="lazy"
-							loop={false}
-							is_stream={false}
-							muted={false}
-							controls={true}
-						/>
-					{:else if "audio" in selected_media}
-						<div class="audio-preview">
-							<div class="audio-icon-large">
-								<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-									<path d="M9 18V5l12-2v13"></path>
-									<circle cx="6" cy="18" r="3"></circle>
-									<circle cx="18" cy="16" r="3"></circle>
-								</svg>
-							</div>
-							<div class="audio-filename">{selected_media.audio.orig_name || "Audio"}</div>
-							<audio
-								src={selected_media.audio.url}
-								controls
-								class="audio-player"
-								data-testid="detailed-audio"
-							/>
-						</div>
-					{/if}
-				</button>
-				{#if selected_media?.caption}
-					<caption class="caption">
-						{selected_media.caption}
-					</caption>
-				{/if}
-				<div
-					bind:this={container_element}
-					class="thumbnails scroll-hide"
-					data-testid="container_el"
-					style="justify-content: {thumbnails_overflow
-						? 'flex-start'
-						: 'center'};"
-				>
-					{#each resolved_value as media, i}
-						<button
-							bind:this={el[i]}
-							on:click={() => (selected_index = i)}
-							class="thumbnail-item thumbnail-small"
-							class:selected={selected_index === i && mode !== "minimal"}
-							aria-label={"Thumbnail " +
-								(i + 1) +
-								" of " +
-								resolved_value.length}
-						>
-							{#if "image" in media}
-								<Image
-									src={media.image.url}
-									title={media.caption || null}
-									data-testid={"thumbnail " + (i + 1)}
-									alt=""
-									loading="lazy"
-								/>
-							{:else if "video" in media}
-								<Play />
-								<Video
-									src={media.video.url}
-									title={media.caption || null}
-									is_stream={false}
-									data-testid={"thumbnail " + (i + 1)}
-									alt=""
-									loading="lazy"
-									loop={false}
-								/>
-							{:else if "audio" in media}
-								<div class="audio-thumbnail">
-									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-										<path d="M9 18V5l12-2v13"></path>
-										<circle cx="6" cy="18" r="3"></circle>
-										<circle cx="18" cy="16" r="3"></circle>
-									</svg>
-								</div>
-							{/if}
-						</button>
-					{/each}
-				</div>
-			</button>
-		{/if}
-
-		<div
-			class="grid-wrap"
-			class:minimal={mode === "minimal"}
-			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
-			class:hidden={is_full_screen}
-		>
-			<div
-				class="grid-container"
-				style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
-				class:pt-6={show_label}
-			>
-				{#each resolved_value as entry, i}
-					<div class="thumbnail-wrapper">
-						<button
-							class="thumbnail-item thumbnail-lg"
-							class:selected={selected_index === i}
-							on:click={() => {
-								if (selected_index === null && allow_preview) {
-									dispatch("preview_open");
-								}
-								selected_index = i;
-							}}
-							aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
-						>
-							{#if "image" in entry}
-								<Image
-									alt={entry.caption || ""}
-									src={typeof entry.image === "string"
-										? entry.image
-										: entry.image.url}
-									loading="lazy"
-								/>
-								<div class="media-type-badge image">
-									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-										<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-										<circle cx="8.5" cy="8.5" r="1.5"></circle>
-										<polyline points="21 15 16 10 5 21"></polyline>
-									</svg>
-								</div>
-							{:else if "video" in entry}
-								<Play />
-								<Video
-									src={entry.video.url}
-									title={entry.caption || null}
-									is_stream={false}
-									data-testid={"thumbnail " + (i + 1)}
-									alt=""
-									loading="lazy"
-									loop={false}
-								/>
-								<div class="media-type-badge video">
-									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-										<polygon points="5 3 19 12 5 21 5 3"></polygon>
-									</svg>
-								</div>
-							{:else if "audio" in entry}
-								<div class="audio-thumbnail-lg">
-									<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-										<path d="M9 18V5l12-2v13"></path>
-										<circle cx="6" cy="18" r="3"></circle>
-										<circle cx="18" cy="16" r="3"></circle>
-									</svg>
-								</div>
-								<div class="media-type-badge audio">
-									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-										<path d="M9 18V5l12-2v13"></path>
-										<circle cx="6" cy="18" r="3"></circle>
-										<circle cx="18" cy="16" r="3"></circle>
-									</svg>
-								</div>
-							{/if}
-						</button>
-						<!-- Remove button -->
-						{#if interactive}
-							<button
-								class="remove-btn"
-								on:click|stopPropagation={() => {
-									if (value) {
-										value = value.filter((_, idx) => idx !== i);
-										if (selected_index !== null && selected_index >= i) {
-											selected_index = selected_index > 0 ? selected_index - 1 : null;
-										}
-										dispatch("change");
-									}
-								}}
-								aria-label="Remove item"
-							>
-								<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-									<line x1="18" y1="6" x2="6" y2="18"></line>
-									<line x1="6" y1="6" x2="18" y2="18"></line>
-								</svg>
-							</button>
-						{/if}
-						<!-- Filename label -->
-						<div class="filename-label">
-							{#if "image" in entry}
-								{entry.image.orig_name || "Image"}
-							{:else if "video" in entry}
-								{entry.video.orig_name || "Video"}
-							{:else if "audio" in entry}
-								{entry.audio.orig_name || "Audio"}
-							{/if}
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-		<!-- Add Media button below grid -->
-		{#if interactive && upload && stream_handler}
-			<div class="add-media-bar">
-				<Upload
-					filetype={file_types}
-					file_count="multiple"
-					{max_file_size}
-					{root}
-					{upload}
-					{stream_handler}
-					on:load={(e) => dispatch("upload", e.detail)}
-					on:error={(e) => dispatch("error", e.detail)}
-				>
-					<div class="add-media-btn">
-						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-							<line x1="12" y1="5" x2="12" y2="19"></line>
-							<line x1="5" y1="12" x2="19" y2="12"></line>
-						</svg>
-						<span>Add Media</span>
-					</div>
-				</Upload>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style lang="postcss">
-	.gallery-container {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	.image-container {
-		height: 100%;
-		position: relative;
-	}
-	.image-container :global(img),
-	button {
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-		display: block;
-		border-radius: var(--radius-lg);
-	}
-
-	.preview {
-		display: flex;
-		position: absolute;
-		flex-direction: column;
-		z-index: var(--layer-2);
-		border-radius: calc(var(--block-radius) - var(--block-border-width));
-		-webkit-backdrop-filter: blur(8px);
-		backdrop-filter: blur(8px);
-		width: var(--size-full);
-		height: var(--size-full);
-	}
-
-	.preview.minimal {
-		width: fit-content;
-		height: fit-content;
-	}
-
-	.preview::before {
-		content: "";
-		position: absolute;
-		z-index: var(--layer-below);
-		background: var(--background-fill-primary);
-		opacity: 0.9;
-		width: var(--size-full);
-		height: var(--size-full);
-	}
-
-	.fixed-height {
-		min-height: var(--size-80);
-		max-height: 55vh;
-	}
-
-	@media (--screen-xl) {
-		.fixed-height {
-			min-height: 450px;
-		}
-	}
-
-	.media-button {
-		height: calc(100% - 60px);
-		width: 100%;
-		display: flex;
-	}
-	.media-button :global(img),
-	.media-button :global(video) {
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-	}
-	.thumbnails :global(img) {
-		object-fit: cover;
-		width: var(--size-full);
-		height: var(--size-full);
-	}
-	.thumbnails :global(svg) {
-		position: absolute;
-		top: var(--size-2);
-		left: var(--size-2);
-		width: 50%;
-		height: 50%;
-		opacity: 50%;
-	}
-	.preview :global(img.with-caption) {
-		height: var(--size-full);
-	}
-
-	.preview.minimal :global(img.with-caption) {
-		height: auto;
-	}
-
-	.selectable {
-		cursor: crosshair;
-	}
-
-	.caption {
-		padding: var(--size-2) var(--size-3);
-		overflow: hidden;
-		color: var(--block-label-text-color);
-		font-weight: var(--weight-semibold);
-		text-align: center;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		align-self: center;
-	}
-
-	.thumbnails {
-		display: flex;
-		position: absolute;
-		bottom: 0;
-		justify-content: flex-start;
-		align-items: center;
-		gap: var(--spacing-lg);
-		width: var(--size-full);
-		height: var(--size-14);
-		overflow-x: scroll;
-		z-index: var(--layer-5);
-	}
-
-	.thumbnail-item {
-		--ring-color: transparent;
-		position: relative;
-		box-shadow:
-			inset 0 0 0 1px var(--ring-color),
-			var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-radius: var(--button-small-radius);
-		background: var(--background-fill-secondary);
-		aspect-ratio: var(--ratio-square);
-		width: var(--size-full);
-		height: var(--size-full);
-		overflow: clip;
-	}
-
-	.thumbnail-item:hover {
-		--ring-color: var(--color-accent);
-		border-color: var(--color-accent);
-		filter: brightness(1.1);
-	}
-
-	.thumbnail-item.selected {
-		--ring-color: var(--color-accent);
-		border-color: var(--color-accent);
-	}
-
-	.thumbnail-item :global(svg) {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 50%;
-		height: 50%;
-		opacity: 50%;
-		transform: translate(-50%, -50%);
-	}
-
-	.thumbnail-item :global(video) {
-		width: var(--size-full);
-		height: var(--size-full);
-		overflow: hidden;
-		object-fit: cover;
-	}
-
-	.thumbnail-small {
-		flex: none;
-		transform: scale(0.9);
-		transition: 0.075s;
-		width: var(--size-9);
-		height: var(--size-9);
-	}
-	.thumbnail-small.selected {
-		--ring-color: var(--color-accent);
-		transform: scale(1);
-		border-color: var(--color-accent);
-	}
-
-	.thumbnail-small > img {
-		width: var(--size-full);
-		height: var(--size-full);
-		overflow: hidden;
-		object-fit: var(--object-fit);
-	}
-
-	.grid-wrap {
-		position: relative;
-		padding: var(--size-2);
-		max-height: 100%;
-		overflow-y: auto;
-		overflow-x: hidden;
-		flex: 1;
-	}
-
-	.grid-container {
-		display: grid;
-		position: relative;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: var(--spacing-md);
-		width: 100%;
-	}
-
-	/* Responsive columns */
-	@media (min-width: 768px) {
-		.grid-container {
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-		}
-	}
-
-	@media (min-width: 1280px) {
-		.grid-container {
-			grid-template-columns: repeat(4, minmax(0, 1fr));
-		}
-	}
-
-	@media (min-width: 1536px) {
-		.grid-container {
-			grid-template-columns: repeat(5, minmax(0, 1fr));
-		}
-	}
-
-	.thumbnail-wrapper {
-		position: relative;
-		width: 100%;
-		padding-bottom: 100%; /* Square aspect ratio using padding trick */
-		min-width: 0;
-		overflow: hidden;
-		border-radius: var(--button-small-radius);
-		background: var(--background-fill-secondary);
-		aspect-ratio: 1 / 1;
-	}
-
-	.thumbnail-lg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		padding: 0;
-		margin: 0;
-		border: none;
-		background: transparent;
-		cursor: pointer;
-	}
-
-	/* Force all images and videos to be square cropped */
-	.thumbnail-lg :global(img),
-	.thumbnail-lg :global(video) {
-		position: absolute !important;
-		top: 0 !important;
-		left: 0 !important;
-		width: 100% !important;
-		height: 100% !important;
-		object-fit: cover !important;
-		max-width: none !important;
-		max-height: none !important;
-		min-width: 100% !important;
-		min-height: 100% !important;
-	}
-
-	/* Picture elements from Image component */
-	.thumbnail-lg :global(picture) {
-		position: absolute !important;
-		top: 0 !important;
-		left: 0 !important;
-		width: 100% !important;
-		height: 100% !important;
-		overflow: hidden !important;
-	}
-
-	.grid-wrap.minimal {
-		padding: 0;
-	}
-
-	/* Audio thumbnail styles */
-	.audio-thumbnail {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		color: white;
-	}
-
-	.audio-thumbnail-lg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		color: white;
-		gap: var(--size-2);
-		padding: var(--size-2);
-	}
-
-	.audio-thumbnail-lg .audio-name {
-		font-size: var(--text-sm);
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		max-width: 100%;
-		text-align: center;
-	}
-
-	/* Audio preview styles */
-	.audio-preview {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		color: white;
-		gap: var(--size-4);
-		padding: var(--size-8);
-	}
-
-	.audio-icon-large {
-		opacity: 0.8;
-	}
-
-	.audio-filename {
-		font-size: var(--text-lg);
-		font-weight: var(--weight-semibold);
-		text-align: center;
-		max-width: 80%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.audio-player {
-		width: 80%;
-		max-width: 400px;
-	}
-
-	/* Media type badge styles */
-	.media-type-badge {
-		position: absolute;
-		bottom: var(--size-1);
-		left: var(--size-1);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: var(--size-1);
-		border-radius: var(--radius-sm);
-		background: rgba(0, 0, 0, 0.6);
-		color: white;
-		z-index: var(--layer-1);
-	}
-
-	.media-type-badge.image {
-		background: rgba(59, 130, 246, 0.8);
-	}
-
-	.media-type-badge.video {
-		background: rgba(239, 68, 68, 0.8);
-	}
-
-	.media-type-badge.audio {
-		background: rgba(139, 92, 246, 0.8);
-	}
-
-	.media-type-badge svg {
-		width: 12px;
-		height: 12px;
-	}
-
-	/* Remove button */
-	.remove-btn {
-		position: absolute;
-		top: var(--size-1);
-		right: var(--size-1);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border-radius: 50%;
-		background: rgba(0, 0, 0, 0.7);
-		color: white;
-		border: none;
-		cursor: pointer;
-		opacity: 0;
-		transition: opacity 0.2s ease, background 0.2s ease;
-		z-index: var(--layer-2);
-	}
-
-	.thumbnail-wrapper:hover .remove-btn {
-		opacity: 1;
-	}
-
-	.remove-btn:hover {
-		background: rgba(239, 68, 68, 0.9);
-	}
-
-	.remove-btn svg {
-		width: 14px;
-		height: 14px;
-	}
-
-	/* Filename label */
-	.filename-label {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: var(--size-1) var(--size-2);
-		background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
-		color: white;
-		font-size: var(--text-xs);
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		pointer-events: none;
-		border-radius: 0 0 var(--button-small-radius) var(--button-small-radius);
-		z-index: var(--layer-1);
-	}
-
-	/* Add Media button bar */
-	.add-media-bar {
-		padding: var(--size-2);
-		border-top: 1px solid var(--border-color-primary);
-	}
-
-	.add-media-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--size-2);
-		padding: var(--size-2) var(--size-4);
-		background: var(--background-fill-secondary);
-		border: 1px dashed var(--border-color-primary);
-		border-radius: var(--radius-lg);
-		color: var(--body-text-color-subdued);
-		cursor: pointer;
-		transition: all 0.2s ease;
-		width: 100%;
-	}
-
-	.add-media-btn:hover {
-		background: var(--background-fill-primary);
-		border-color: var(--color-accent);
-		color: var(--color-accent);
-	}
-
-	.add-media-btn input {
-		display: none;
-	}
-
-	.add-media-btn svg {
-		flex-shrink: 0;
-	}
-</style>

mediagallery/frontend/shared/utils.ts

@@ -1,21 +0,0 @@
-import { uploadToHuggingFace } from "@gradio/utils";
-import type { GalleryData } from "../types";
-import { getMediaFile } from "../types";
-
-export async function format_gallery_for_sharing(
-	value: GalleryData[] | null
-): Promise<string> {
-	if (!value) return "";
-	let urls = await Promise.all(
-		value.map(async (item) => {
-			const file = getMediaFile(item);
-			if (!file || !file.url) return "";
-			return await uploadToHuggingFace(file.url, "url");
-		})
-	);
-
-	return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls
-		.filter(url => url)
-		.map((url) => `<img src="${url}" style="height: 400px" />`)
-		.join("")}</div>`;
-}

mediagallery/frontend/tsconfig.json

@@ -1,14 +0,0 @@
-{
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"verbatimModuleSyntax": true
-	},
-	"exclude": ["node_modules", "dist", "./gradio.config.js"]
-}

mediagallery/frontend/types.ts

@@ -1,33 +0,0 @@
-import type { FileData } from "@gradio/client";
-
-export interface GalleryImage {
-	image: FileData;
-	caption: string | null;
-}
-
-export interface GalleryVideo {
-	video: FileData;
-	caption: string | null;
-}
-
-export interface GalleryAudio {
-	audio: FileData;
-	caption: string | null;
-}
-
-export type GalleryData = GalleryImage | GalleryVideo | GalleryAudio;
-
-// Helper to detect media type
-export type MediaType = "image" | "video" | "audio";
-
-export function getMediaType(item: GalleryData): MediaType {
-	if ("video" in item) return "video";
-	if ("audio" in item) return "audio";
-	return "image";
-}
-
-export function getMediaFile(item: GalleryData): FileData {
-	if ("video" in item) return item.video;
-	if ("audio" in item) return item.audio;
-	return item.image;
-}

mediagallery/pyproject.toml

@@ -1,54 +0,0 @@
-[build-system]
-requires = [
-  "hatchling",
-  "hatch-requirements-txt",
-  "hatch-fancy-pypi-readme>=22.5.0",
-]
-build-backend = "hatchling.build"
-
-[project]
-name = "gradio_mediagallery"
-version = "0.0.1"
-description = "Python library for easily interacting with trained machine learning models"
-readme = "README.md"
-license = "Apache-2.0"
-requires-python = ">=3.8"
-authors = [{ name = "YOUR NAME", email = "[email protected]" }]
-keywords = [
-  "gradio-custom-component",
-  "gradio-template-Gallery"
-]
-# Add dependencies here
-dependencies = ["gradio>=4.0,<6.0"]
-classifiers = [
-  'Development Status :: 3 - Alpha',
-  'Operating System :: OS Independent',
-  'Programming Language :: Python :: 3',
-  'Programming Language :: Python :: 3 :: Only',
-  'Programming Language :: Python :: 3.8',
-  'Programming Language :: Python :: 3.9',
-  'Programming Language :: Python :: 3.10',
-  'Programming Language :: Python :: 3.11',
-  'Topic :: Scientific/Engineering',
-  'Topic :: Scientific/Engineering :: Artificial Intelligence',
-  'Topic :: Scientific/Engineering :: Visualization',
-]
-
-# The repository and space URLs are optional, but recommended.
-# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
-# Adding a space URL will create a badge in the auto-generated README that links to the space.
-# This will make it easy for people to find your deployed demo or source code when they
-# encounter your project in the wild.
-
-# [project.urls]
-# repository = "your github repository"
-# space = "your space url"
-
-[project.optional-dependencies]
-dev = ["build", "twine"]
-
-[tool.hatch.build]
-artifacts = ["/backend/gradio_mediagallery/templates", "*.pyi"]
-
-[tool.hatch.build.targets.wheel]
-packages = ["/backend/gradio_mediagallery"]

requirements.txt

@@ -1,3 +1,3 @@
 openai>=1.55.0
-gradio==5.34.1
+gradio==5.6.0
 moviepy==1