Gradio

The @gradio/video package provides components for displaying and interacting with video content in Gradio web applications. It includes support for static video playback, interactive video uploading/recording, and a base player for custom implementations.

Key components include:

• BaseStaticVideo: Used for displaying a video that does not require user interaction (e.g., a simple playback component).
• BaseInteractiveVideo: (Implied by imports) For handling interactive video states.
• BasePlayer: A low-level player component that accepts a src and provides event hooks for playback control.
• Video: An interactive component that allows users to upload videos or use a webcam source.

// Example of the component structure for an interactive Video component
<Video
	value={_video}
	{label}
	{show_label}
	source="upload"
	{mirror_webcam}
	{include_audio}
	{autoplay}
	i18n={gradio.i18n}
>
	<p>Upload Video Here</p>
</Video>

You can turn gr.HTML into an interactive input component by providing a js_on_load string containing JavaScript.

Inside js_on_load, you have access to:

• trigger(event_name, data): Triggers a Gradio event. data can be a dictionary that is received in Python as a gr.EventData object.
• props: An object containing the component's current properties (e.g., props.value). Updating props.<prop_name> will re-render the template.
• upload(file): An async function to upload a JavaScript File object to the Gradio server. It returns { path, url }.
• watch(prop_name, callback): Runs a callback when a specific prop changes.
• server: An object providing access to Python functions passed via the server_functions parameter.

Note on Dynamic Elements: Since js_on_load runs only once on initial render, use event delegation for dynamically created elements:

element.addEventListener('click', (e) => {
    if (e.target && e.target.matches('.child-element')) {
        props.value = e.target.dataset.value;
    }
});

# Python side: listening to a custom event
def handle_event(evt: gr.EventData):
    print(evt.key)
    print(evt.count)

# Component side
custom_comp = gr.HTML(
    value="...",
    js_on_load="""
        const btn = document.querySelector('#my-btn');
        btn.addEventListener('click', () => {
            trigger('my_custom_event', { key: 'hello', count: 123 });
        });
    """
)
custom_comp.my_custom_event(fn=handle_event, inputs=[], outputs=[])

A workflow JSON file consists of three main collections and an edges list:

• references: Input nodes (e.g., uploaded files, editable text, literal values).
• operators: Processing steps (e.g., Spaces, models, datasets, or Python functions).
• subjects: Output nodes (the results being created).

Operator Kinds

Supported Port Types

image, audio, video, text, number, boolean, gallery, file, json, model3d, any (fallback).

{
  "schema_version": "2",
  "name": "My Pipeline",
  "references": [
    {
      "id": "ref_prompt", "label": "Prompt", "role": "reference",
      "asset_type": "text",
      "inputs":  [{"id": "in", "label": "Text", "type": "text"}],
      "outputs": [{"id": "out", "label": "Text", "type": "text"}]
    }
  ],
  "operators": [
    {
      "id": "op_flux", "label": "FLUX.1", "role": "operator",
      "kind": "model",
      "model_id": "black-forest-labs/FLUX.1-schnell",
      "endpoint": "text_to_image",
      "pipeline_tag": "text-to-image",
      "inputs":  [{"id": "prompt", "label": "Prompt", "type": "text", "required": true}],
      "outputs": [{"id": "out_0", "label": "Image", "type": "image", "output_index": 0}]
    }
  ],
  "subjects": [
    {
      "id": "sub_img", "label": "Output Image", "role": "subject",
      "asset_type": "image",
      "inputs":  [{"id": "in", "label": "Image", "type": "image"}],
      "outputs": [{"id": "out", "label": "Image", "type": "image"}]
    }
  ],
  "edges": [
    {
      "id": "e1",
      "from_node_id": "ref_prompt", "from_port_id": "out",
      "to_node_id":   "op_flux",    "to_port_id":   "prompt",
      "type": "text"
    },
    {
      "id": "e2",
      "from_node_id": "op_flux", "from_port_id": "out_0",
      "to_node_id":   "sub_img", "to_port_id":   "in",
      "type": "image"
    }
  ]
}

When sharing a Gradio application (via Spaces, a local server, or a temporary share link), users can access certain files on your host machine. Gradio implements security boundaries to prevent unauthorized access to your filesystem.

Accessible Files

• Files in the script directory: Any file or subdirectory located in the same directory (or subdirectories) where your Gradio script is running is accessible. This allows you to easily reference local assets like images or videos for app examples.
• Temporary files: Files created by Gradio during prediction (e.g., a video file returned by a function). You can customize the location of these files by setting the GRADIO_TEMP_DIR environment variable to an absolute path.
• Allowed paths: Any directory or specific file path explicitly included in the allowed_paths parameter of the launch() method.

Restricted Files (Blocked by default)

• Dotfiles: Any file or directory starting with a . (e.g., .env, .git) is strictly inaccessible.
• Blocked paths: Any directory or file path explicitly listed in the blocked_paths parameter of the launch() method. This parameter takes precedence over allowed_paths and default permissions.
• Other host paths: Any path on the host machine not covered by the rules above is inaccessible.

Note: Ensure you are running the latest version of gradio to ensure these security protections are active.