Below are all the class and function signatures in the Gradio library: (these are what you will reference as docs)

SimpleCSVLogger()
A simplified implementation of the FlaggingCallback abstract class provided for illustrative purposes.  Each flagged sample (both the input and output data) is logged to a CSV file on the machine running the gradio app.

ClassicCSVLogger(simplify_file_data: bool = True)
The classic implementation of the FlaggingCallback abstract class in gradio<5.0. Each flagged sample (both the input and output data) is logged to a CSV file with headers on the machine running the gradio app.

CSVLogger(simplify_file_data: bool = True, verbose: bool = True, dataset_file_name: str | None = None)
The default implementation of the FlaggingCallback abstract class in gradio>=5.0. Each flagged sample (both the input and output data) is logged to a CSV file with headers on the machine running the gradio app. Unlike ClassicCSVLogger, this implementation is concurrent-safe and it creates a new dataset file every time the headers of the CSV (derived from the labels of the components) change. It also only creates columns for "username" and "flag" if the flag_option and username are provided, respectively. <br>

Base(primary_hue: colors.Color | str = Color(), secondary_hue: colors.Color | str = Color(), neutral_hue: colors.Color | str = Color(), text_size: sizes.Size | str = Size(), spacing_size: sizes.Size | str = Size(), radius_size: sizes.Size | str = Size(), font: fonts.Font | str | Iterable[fonts.Font | str] = (<gradio.themes.utils.fonts.LocalFont (name='IBM Plex Sans', weights=(400, 700))>, 'ui-sans-serif', 'system-ui', 'sans-serif'), font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (<gradio.themes.utils.fonts.LocalFont (name='IBM Plex Mono', weights=(400, 700))>, 'ui-monospace', 'Consolas', 'monospace'))


Base.push_to_hub(repo_name: str, org_name: str | None = None, version: str | None = None, hf_token: str | None = None, theme_name: str | None = None, description: str | None = None, private: bool = False)
Upload a theme to the HuggingFace hub. &lt;br&gt; This requires a HuggingFace account. &lt;br&gt;

Base.from_hub(repo_name: str, hf_token: str | None = None)
Load a theme from the hub. &lt;br&gt; This DOES NOT require a HuggingFace account for downloading publicly available themes. &lt;br&gt;

Base.load(path: str)
Load a theme from a json file. &lt;br&gt;

Base.dump(filename: str)
Write the theme to a json file. &lt;br&gt;

Base.from_dict(theme: dict[str, dict[str, str]])
Create a theme instance from a dictionary representation. &lt;br&gt;

Base.to_dict()
Convert the theme into a python dictionary.

queue(status_update_rate: float | Literal['auto'] = "auto", api_open: bool | None = None, max_size: int | None = None, default_concurrency_limit: int | None | Literal['not_set'] = "not_set")
By enabling the queue you can control when users know their position in the queue, and set a limit on maximum number of events allowed.

route(name: str, path: str | None = None)
Adds a new page to the Blocks app.

Blocks(theme: Theme | str | None = None, analytics_enabled: bool | None = None, mode: str = "blocks", title: str = "Gradio", css: str | None = None, css_paths: str | Path | Sequence[str | Path] | None = None, js: str | Literal[True] | None = None, head: str | None = None, head_paths: str | Path | Sequence[str | Path] | None = None, fill_height: bool = False, fill_width: bool = False, delete_cache: tuple[int, int] | None = None)
Blocks is Gradio's low-level API that allows you to create more custom web applications and demos than Interfaces (yet still entirely in Python). <br> <br> Compared to the Interface class, Blocks offers more flexibility and control over: (1) the layout of components (2) the events that trigger the execution of functions (3) data flows (e.g. inputs can trigger outputs, which can trigger the next level of outputs). Blocks also offers ways to group together related demos such as with tabs. <br> <br> The basic usage of Blocks is as follows: create a Blocks object, then use it as a context (with the "with" statement), and then define layouts, components, or events within the Blocks context. Finally, call the launch() method to launch the demo. <br>

Blocks.launch(inline: bool | None = None, inbrowser: bool = False, share: bool | None = None, debug: bool = False, max_threads: int = 40, auth: Callable[[str, str], bool] | tuple[str, str] | list[tuple[str, str]] | None = None, auth_message: str | None = None, prevent_thread_lock: bool = False, show_error: bool = False, server_name: str | None = None, server_port: int | None = None, height: int = 500, width: int | str = "100%", favicon_path: str | None = None, ssl_keyfile: str | None = None, ssl_certfile: str | None = None, ssl_keyfile_password: str | None = None, ssl_verify: bool = True, quiet: bool = False, show_api: bool = True, allowed_paths: list[str] | None = None, blocked_paths: list[str] | None = None, root_path: str | None = None, app_kwargs: dict[str, Any] | None = None, state_session_capacity: int = 10000, share_server_address: str | None = None, share_server_protocol: Literal['http', 'https'] | None = None, share_server_tls_certificate: str | None = None, auth_dependency: Callable[[fastapi.Request], str | None] | None = None, max_file_size: str | int | None = None, enable_monitoring: bool | None = None, strict_cors: bool = True, node_server_name: str | None = None, node_port: int | None = None, ssr_mode: bool | None = None, pwa: bool | None = None)
Launches a simple web server that serves the demo. Can also be used to create a public link used by anyone to access the demo from their browser by setting share=True.

Blocks.queue(status_update_rate: float | Literal['auto'] = "auto", api_open: bool | None = None, max_size: int | None = None, default_concurrency_limit: int | None | Literal['not_set'] = "not_set")
By enabling the queue you can control when users know their position in the queue, and set a limit on maximum number of events allowed.

Blocks.integrate(comet_ml: <class 'inspect._empty'> = None, wandb: ModuleType | None = None, mlflow: ModuleType | None = None)
A catch-all method for integrating with other libraries. This method should be run after launch()

Blocks.load(block: Block | None, fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
This listener is triggered when the Blocks initially loads in the browser.

Blocks.unload(fn: Callable[..., Any])
This listener is triggered when the user closes or refreshes the tab, ending the user session. It is useful for cleaning up resources when the app is closed.

Accordion(label: str | None = None, open: bool = True, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True)
Accordion is a layout element which can be toggled to show/hide the contained content.

Accordion.expand(fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
This listener is triggered when the Accordion is expanded.

Accordion.collapse(fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
This listener is triggered when the Accordion is collapsed.

Column(scale: int = 1, min_width: int = 320, variant: Literal['default', 'panel', 'compact'] = "default", visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, show_progress: bool = False)
Column is a layout element within Blocks that renders all children vertically. The widths of columns can be set through the `scale` and `min_width` parameters. If a certain scale results in a column narrower than min_width, the min_width parameter will win.

Row(variant: Literal['default', 'panel', 'compact'] = "default", visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, scale: int | None = None, render: bool = True, height: int | str | None = None, max_height: int | str | None = None, min_height: int | str | None = None, equal_height: bool = False, show_progress: bool = False)
Row is a layout element within Blocks that renders all children horizontally.

Group(visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True)
Group is a layout element within Blocks which groups together children so that they do not have any padding or margin between them.

Sidebar(label: str | None = None, open: bool = True, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, width: int | str = 320, position: Literal['left', 'right'] = "left")
Sidebar is a collapsible panel that renders child components on the left side of the screen within a Blocks layout.

Sidebar.expand(fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
This listener is triggered when the Sidebar is expanded.

Sidebar.collapse(fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
This listener is triggered when the Sidebar is collapsed.

Tab(label: str | None = None, visible: bool = True, interactive: bool = True, id: int | str | None = None, elem_id: str | None = None, elem_classes: list[str] | str | None = None, scale: int | None = None, render: bool = True)
Tab (or its alias TabItem) is a layout element. Components defined within the Tab will be visible when this tab is selected tab.

Tab.select(fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
Event listener for when the user selects or deselects the Tab. Uses event data gradio.SelectData to carry `value` referring to the label of the Tab, and `selected` to refer to state of the Tab. See EventData documentation on how to use this event data

Interface(fn: Callable, inputs: str | Component | Sequence[str | Component] | None, outputs: str | Component | Sequence[str | Component] | None, examples: list[Any] | list[list[Any]] | str | None = None, cache_examples: bool | None = None, cache_mode: Literal['eager', 'lazy'] | None = None, examples_per_page: int = 10, example_labels: list[str] | None = None, live: bool = False, title: str | None = None, description: str | None = None, article: str | None = None, theme: Theme | str | None = None, flagging_mode: Literal['never'] | Literal['auto'] | Literal['manual'] | None = None, flagging_options: list[str] | list[tuple[str, str]] | None = None, flagging_dir: str = ".gradio/flagged", flagging_callback: FlaggingCallback | None = None, analytics_enabled: bool | None = None, batch: bool = False, max_batch_size: int = 4, api_name: str | Literal[False] | None = "predict", allow_duplication: bool = False, concurrency_limit: int | None | Literal['default'] = "default", css: str | None = None, css_paths: str | Path | Sequence[str | Path] | None = None, js: str | Literal[True] | None = None, head: str | None = None, head_paths: str | Path | Sequence[str | Path] | None = None, additional_inputs: str | Component | Sequence[str | Component] | None = None, additional_inputs_accordion: str | Accordion | None = None, submit_btn: str | Button = "Submit", stop_btn: str | Button = "Stop", clear_btn: str | Button | None = "Clear", delete_cache: tuple[int, int] | None = None, show_progress: Literal['full', 'minimal', 'hidden'] = "full", fill_width: bool = False, allow_flagging: Literal['never'] | Literal['auto'] | Literal['manual'] | None = None, time_limit: int | None = 30, stream_every: float = 0.5, deep_link: str | DeepLinkButton | bool | None = None)
Interface is Gradio's main high-level class, and allows you to create a web-based GUI / demo around a machine learning model (or any Python function) in a few lines of code. You must specify three parameters: (1) the function to create a GUI for (2) the desired input components and (3) the desired output components. Additional parameters can be used to control the appearance and behavior of the demo. <br>

Interface.launch(inline: bool | None = None, inbrowser: bool = False, share: bool | None = None, debug: bool = False, max_threads: int = 40, auth: Callable[[str, str], bool] | tuple[str, str] | list[tuple[str, str]] | None = None, auth_message: str | None = None, prevent_thread_lock: bool = False, show_error: bool = False, server_name: str | None = None, server_port: int | None = None, height: int = 500, width: int | str = "100%", favicon_path: str | None = None, ssl_keyfile: str | None = None, ssl_certfile: str | None = None, ssl_keyfile_password: str | None = None, ssl_verify: bool = True, quiet: bool = False, show_api: bool = True, allowed_paths: list[str] | None = None, blocked_paths: list[str] | None = None, root_path: str | None = None, app_kwargs: dict[str, Any] | None = None, state_session_capacity: int = 10000, share_server_address: str | None = None, share_server_protocol: Literal['http', 'https'] | None = None, share_server_tls_certificate: str | None = None, auth_dependency: Callable[[fastapi.Request], str | None] | None = None, max_file_size: str | int | None = None, enable_monitoring: bool | None = None, strict_cors: bool = True, node_server_name: str | None = None, node_port: int | None = None, ssr_mode: bool | None = None, pwa: bool | None = None)
Launches a simple web server that serves the demo. Can also be used to create a public link used by anyone to access the demo from their browser by setting share=True.

Interface.load(block: Block | None, fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
This listener is triggered when the Interface initially loads in the browser.

Interface.from_pipeline(pipeline: Pipeline | DiffusionPipeline)
Class method that constructs an Interface from a Hugging Face transformers.Pipeline or diffusers.DiffusionPipeline object. The input and output components are automatically determined from the pipeline.

Interface.integrate(comet_ml: <class 'inspect._empty'> = None, wandb: ModuleType | None = None, mlflow: ModuleType | None = None)
A catch-all method for integrating with other libraries. This method should be run after launch()

Interface.queue(status_update_rate: float | Literal['auto'] = "auto", api_open: bool | None = None, max_size: int | None = None, default_concurrency_limit: int | None | Literal['not_set'] = "not_set")
By enabling the queue you can control when users know their position in the queue, and set a limit on maximum number of events allowed.

TabbedInterface(interface_list: Sequence[Blocks], tab_names: list[str] | None = None, title: str | None = None, theme: Theme | str | None = None, analytics_enabled: bool | None = None, css: str | None = None, js: str | Literal[True] | None = None, head: str | None = None)
A TabbedInterface is created by providing a list of Interfaces or Blocks, each of which gets rendered in a separate tab. Only the components from the Interface/Blocks will be rendered in the tab. Certain high-level attributes of the Blocks (e.g. custom `css`, `js`, and `head` attributes) will not be loaded. <br>

render(inputs: Sequence[Component] | Component | None = None, triggers: Sequence[EventListenerCallable] | EventListenerCallable | None = None, queue: bool = True, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = "always_last", concurrency_limit: int | None | Literal['default'] = None, concurrency_id: str | None = None, show_progress: Literal['full', 'minimal', 'hidden'] = "full")
The render decorator allows Gradio Blocks apps to have dynamic layouts, so that the components and event listeners in your app can change depending on custom logic. Attaching a @gr.render decorator to a function will cause the function to be re-run whenever the inputs are changed (or specified triggers are activated). The function contains the components and event listeners that will update based on the inputs. <br> The basic usage of @gr.render is as follows: <br> 1. Create a function and attach the @gr.render decorator to it. <br> 2. Add the input components to the `inputs=` argument of @gr.render, and create a corresponding argument in your function for each component. <br> 3. Add all components inside the function that you want to update based on the inputs. Any event listeners that use these components should also be inside this function. <br>

AnnotatedImage(value: tuple[np.ndarray | PIL.Image.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None = None, format: str = "webp", show_legend: bool = True, height: int | str | None = None, width: int | str | None = None, color_map: dict[str, str] | None = None, label: str | 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 | None = None, show_fullscreen_button: bool = True)
Creates a component to displays a base image and colored annotations on top of that image. Annotations can take the from of rectangles (e.g. object detection) or masks (e.g. image segmentation). As this component does not accept user input, it is rarely used as an input component. <br>

WaveformOptions(waveform_color: str | None = None, waveform_progress_color: str | None = None, trim_region_color: str | None = None, show_recording_waveform: bool = True, show_controls: bool = False, skip_length: int | float = 5, sample_rate: int = 44100)
A dataclass for specifying options for the waveform display in the Audio component. An instance of this class can be passed into the `waveform_options` parameter of `gr.Audio`.

Audio(value: str | Path | tuple[int, np.ndarray] | Callable | None = None, sources: list[Literal['upload', 'microphone']] | Literal['upload', 'microphone'] | None = None, type: Literal['numpy', 'filepath'] = "numpy", label: str | 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, interactive: bool | None = None, visible: bool = True, streaming: bool = False, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, format: Literal['wav', 'mp3'] | None = None, autoplay: bool = False, show_download_button: bool | None = None, show_share_button: bool | None = None, editable: bool = True, min_length: int | None = None, max_length: int | None = None, waveform_options: WaveformOptions | dict | None = None, loop: bool = False, recording: bool = False)
Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output).

BrowserState(default_value: Any = None, storage_key: str | None = None, secret: str | None = None, render: bool = True)
A base class for defining methods that all input/output components should have.

Button(value: str | Callable = "Run", every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop', 'huggingface'] = "secondary", size: Literal['sm', 'md', 'lg'] = "lg", icon: str | Path | None = None, link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, scale: int | None = None, min_width: int | None = None)
Creates a button that can be assigned arbitrary .click() events. The value (label) of the button can be used as an input to the function (rarely used) or set via the output of a function.

MetadataDict()
A typed dictionary to represent metadata for a message in the Chatbot component. An instance of this dictionary is used for the `metadata` field in a ChatMessage when the chat message should be displayed as a thought.

OptionDict()
A typed dictionary to represent an option in a ChatMessage. A list of these dictionaries is used for the `options` field in a ChatMessage.

ChatMessage(content: str | FileData | Component | FileDataDict | tuple | list, role: Literal['user', 'assistant', 'system'] = "assistant", metadata: MetadataDict = _HAS_DEFAULT_FACTORY_CLASS(), options: list[OptionDict] = _HAS_DEFAULT_FACTORY_CLASS())
A dataclass that represents a message in the Chatbot component (with type="messages"). The only required field is `content`. The value of `gr.Chatbot` is a list of these dataclasses.

Chatbot(value: list[MessageDict | Message] | TupleFormat | Callable | None = None, type: Literal['messages', 'tuples'] | None = None, label: str | 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, autoscroll: bool = True, render: bool = True, key: int | str | None = None, height: int | str | None = 400, resizable: bool = False, resizeable: bool = False, max_height: int | str | None = None, min_height: int | str | None = None, editable: Literal['user', 'all'] | None = None, latex_delimiters: list[dict[str, str | bool]] | None = None, rtl: bool = False, show_share_button: bool | None = None, show_copy_button: bool = False, watermark: str | None = None, avatar_images: tuple[str | Path | None, str | Path | None] | None = None, sanitize_html: bool = True, render_markdown: bool = True, feedback_options: list[str] | tuple[str, ...] | None = ('Like', 'Dislike'), feedback_value: Sequence[str | None] | None = None, bubble_full_width: <class 'inspect._empty'> = None, line_breaks: bool = True, layout: Literal['panel', 'bubble'] | None = None, placeholder: str | None = None, examples: list[ExampleMessage] | None = None, show_copy_all_button: <class 'inspect._empty'> = False, allow_file_downloads: <class 'inspect._empty'> = True, group_consecutive_messages: bool = True, allow_tags: list[str] | bool = False)
Creates a chatbot that displays user-submitted messages and responses. Supports a subset of Markdown including bold, italics, code, tables. Also supports audio/video/image files, which are displayed in the Chatbot, and other kinds of files which are displayed as links. This component is usually used as an output component. <br>

Checkbox(value: bool | Callable = False, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a checkbox that can be set to `True` or `False`. Can be used as an input to pass a boolean value to a function or as an output to display a boolean value. <br>

CheckboxGroup(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: Sequence[str | float | int] | str | float | int | Callable | None = None, type: Literal['value', 'index'] = "value", label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a set of checkboxes. Can be used as an input to pass a set of values to a function or as an output to display values, a subset of which are selected.

ClearButton(components: None | Sequence[Component] | Component = None, value: str = "Clear", every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop'] = "secondary", size: Literal['sm', 'md', 'lg'] = "lg", icon: str | Path | None = None, link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, scale: int | None = None, min_width: int | None = None, api_name: str | None | Literal['False'] = None, show_api: bool = False)
Button that clears the value of a component or a list of components when clicked. It is instantiated with the list of components to clear.

Code(value: str | Callable | None = None, language: Literal['python', 'c', 'cpp', 'markdown', 'json', 'html', 'css', 'javascript', 'jinja2', 'typescript', 'yaml', 'dockerfile', 'shell', 'r', 'sql', 'sql-msSQL', 'sql-mySQL', 'sql-mariaDB', 'sql-sqlite', 'sql-cassandra', 'sql-plSQL', 'sql-hive', 'sql-pgSQL', 'sql-gql', 'sql-gpSQL', 'sql-sparkSQL', 'sql-esper'] | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, lines: int = 5, max_lines: int | None = None, label: str | None = None, interactive: bool | 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 | None = None, wrap_lines: bool = False, show_line_numbers: bool = True, autocomplete: bool = False)
Creates a code editor for viewing code (as an output component), or for entering and editing code (as an input component).

ColorPicker(value: str | Callable | None = None, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a color picker for user to select a color as string input. Can be used as an input to pass a color value to a function or as an output to display a color value.

Dataframe(value: pd.DataFrame | Styler | np.ndarray | pl.DataFrame | list | list[list] | dict | str | Callable | None = None, headers: list[str] | None = None, row_count: int | tuple[int, str] = (1, 'dynamic'), col_count: int | tuple[int, str] | None = None, datatype: Literal['str', 'number', 'bool', 'date', 'markdown', 'html', 'image'] | Sequence[Literal['str', 'number', 'bool', 'date', 'markdown', 'html']] = "str", type: Literal['pandas', 'numpy', 'array', 'polars'] = "pandas", latex_delimiters: list[dict[str, str | bool]] | None = None, label: str | None = None, show_label: bool | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, max_height: int | str = 500, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, wrap: bool = False, line_breaks: bool = True, column_widths: list[str | int] | None = None, show_fullscreen_button: bool = False, show_copy_button: bool = False, show_row_numbers: bool = False, max_chars: int | None = None, show_search: Literal['none', 'search', 'filter'] = "none", pinned_columns: int | None = None, static_columns: list[int] | None = None)
This component displays a table of value spreadsheet-like component. Can be used to display data as an output component, or as an input to collect data from the user.

Dataset(label: str | None = None, show_label: bool = True, components: Sequence[Component] | list[str] | None = None, component_props: list[dict[str, Any]] | None = None, samples: list[list[Any]] | None = None, headers: list[str] | None = None, type: Literal['values', 'index', 'tuple'] = "values", layout: Literal['gallery', 'table'] | None = None, samples_per_page: int = 10, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, proxy_url: str | None = None, sample_labels: list[str] | None = None)
Creates a gallery or table to display data samples. This component is primarily designed for internal use to display examples. However, it can also be used directly to display a dataset and let users select examples.

DateTime(value: float | str | datetime | None = None, include_time: bool = True, type: Literal['timestamp', 'datetime', 'string'] = "timestamp", timezone: str | None = None, label: str | None = None, show_label: bool | None = None, info: str | None = None, every: float | None = None, scale: int | None = None, min_width: int = 160, visible: bool = True, interactive: bool | None = None, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Component to select a date and (optionally) a time.

DeepLinkButton(value: str = "Share via Link", copied_value: str = "Link Copied!", inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary'] = "secondary", size: Literal['sm', 'md', 'lg'] = "lg", icon: str | Path | None = "/home/runner/work/gradio/gradio/gradio/icons/link.svg", link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, scale: int | None = None, min_width: int | None = None, every: Timer | float | None = None)
Creates a button that copies a shareable link to the current Gradio Space. The link includes the current session hash as a query parameter.

DownloadButton(label: str = "Download", value: str | Path | Callable | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop'] = "secondary", visible: bool = True, size: Literal['sm', 'md', 'lg'] = "lg", icon: str | None = None, scale: int | None = None, min_width: int | None = None, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a button, that when clicked, allows a user to download a single file of arbitrary type. <br>

Dropdown(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: str | int | float | Sequence[str | int | float] | Callable | DefaultValue | None = DefaultValue(), type: Literal['value', 'index'] = "value", multiselect: bool | None = None, allow_custom_value: bool = False, max_choices: int | None = None, filterable: bool = True, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a dropdown of choices from which a single entry or multiple entries can be selected (as an input component) or displayed (as an output component). <br>

DuplicateButton(value: str = "Duplicate Space", every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop', 'huggingface'] = "huggingface", size: Literal['sm', 'md', 'lg'] = "sm", icon: str | Path | None = None, link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, scale: int | None = 0, min_width: int | None = None)
Button that triggers a Spaces Duplication, when the demo is on Hugging Face Spaces. Does nothing locally.

File(value: str | list[str] | Callable | None = None, file_count: Literal['single', 'multiple', 'directory'] = "single", file_types: list[str] | None = None, type: Literal['filepath', 'binary'] = "filepath", label: str | 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, height: int | str | float | None = None, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, allow_reordering: bool = False)
Creates a file component that allows uploading one or more generic files (when used as an input) or displaying generic files or URLs for download (as output). <br>     Demo: zip_files, zip_to_json

FileExplorer(glob: str = "**/*", value: str | list[str] | Callable | None = None, file_count: Literal['single', 'multiple'] = "multiple", root_dir: str | Path = ".", ignore_glob: str | None = None, label: str | 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, height: int | str | None = None, max_height: int | str | None = 500, min_height: int | str | None = None, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a file explorer component that allows users to browse files on the machine hosting the Gradio app. As an input component, it also allows users to select files to be used as input to a function, while as an output component, it displays selected files.

Gallery(value: Sequence[np.ndarray | PIL.Image.Image | str | Path | tuple] | Callable | None = None, format: str = "webp", file_types: list[str] | None = None, label: str | 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 | None = None, columns: int | list[int] | tuple[int, ...] | None = 2, rows: int | list[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)
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. <br>

HighlightedText(value: list[tuple[str, str | float | None]] | dict | Callable | None = None, color_map: dict[str, str] | None = None, show_legend: bool = False, show_inline_category: bool = True, combine_adjacent: bool = False, adjacent_separator: str = "", label: str | 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 | None = None, interactive: bool | None = None, rtl: bool = False)
Displays text that contains spans that are highlighted by category or numerical value. <br>

HTML(value: str | Callable | None = None, label: str | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool = False, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, min_height: int | None = None, max_height: int | None = None, container: bool = False, padding: bool = True)
Creates a component to display arbitrary HTML output. As this component does not accept user input, it is rarely used as an input component. <br>

Image(value: str | PIL.Image.Image | np.ndarray | Callable | None = None, format: str = "webp", height: int | str | None = None, width: int | str | None = None, image_mode: Literal['1', 'L', 'P', 'RGB', 'RGBA', 'CMYK', 'YCbCr', 'LAB', 'HSV', 'I', 'F'] | None = "RGB", sources: list[Literal['upload', 'webcam', 'clipboard']] | Literal['upload', 'webcam', 'clipboard'] | None = None, type: Literal['numpy', 'pil', 'filepath'] = "numpy", label: str | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, show_download_button: bool = True, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool = True, streaming: bool = False, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, mirror_webcam: bool = True, show_share_button: bool | None = None, placeholder: str | None = None, show_fullscreen_button: bool = True, webcam_constraints: dict[str, Any] | None = None)
Creates an image component that can be used to upload images (as an input) or display images (as an output). <br>

Eraser(default_size: int | Literal['auto'] = "auto")
A dataclass for specifying options for the eraser tool in the ImageEditor component. An instance of this class can be passed to the `eraser` parameter of `gr.ImageEditor`.

Brush(default_size: int | Literal['auto'] = "auto", colors: Union[list[str], str, None] = None, default_color: Union[str, Literal['auto']] = "auto", color_mode: Literal['fixed', 'defaults'] = "defaults")
A dataclass for specifying options for the brush tool in the ImageEditor component. An instance of this class can be passed to the `brush` parameter of `gr.ImageEditor`.

ImageEditor(value: EditorValue | ImageType | None = None, height: int | str | None = None, width: int | str | None = None, image_mode: Literal['1', 'L', 'P', 'RGB', 'RGBA', 'CMYK', 'YCbCr', 'LAB', 'HSV', 'I', 'F'] = "RGBA", sources: Iterable[Literal['upload', 'webcam', 'clipboard']] | Literal['upload', 'webcam', 'clipboard'] | None = ('upload', 'webcam', 'clipboard'), type: Literal['numpy', 'pil', 'filepath'] = "numpy", label: str | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, show_download_button: bool = True, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, placeholder: str | None = None, mirror_webcam: bool = True, show_share_button: bool | None = None, crop_size: tuple[int | float, int | float] | str | None = None, transforms: Iterable[Literal['crop']] = ('crop',), eraser: Eraser | None | Literal[False] = None, brush: Brush | None | Literal[False] = None, format: str = "webp", layers: bool = True, canvas_size: tuple[int, int] = (800, 800), fixed_canvas: bool = False, show_fullscreen_button: bool = True)
Creates an image component that, as an input, can be used to upload and edit images using simple editing tools such as brushes, strokes, cropping, and layers. Or, as an output, this component can be used to display images. <br>

JSON(value: str | dict | list | Callable | None = None, label: str | 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 | None = None, open: bool = False, show_indices: bool = False, height: int | str | None = None, max_height: int | str | None = 500, min_height: int | str | None = None)
Used to display arbitrary JSON output prettily. As this component does not accept user input, it is rarely used as an input component. <br>

Label(value: dict[str, float] | str | float | Callable | None = None, num_top_classes: int | None = None, label: str | 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 | None = None, color: str | None = None, show_heading: bool = True)
Displays a classification label, along with confidence scores of top categories, if provided. As this component does not accept user input, it is rarely used as an input component. <br>

LoginButton(value: str = "Sign in with Hugging Face", logout_value: str = "Logout ({})", every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop', 'huggingface'] = "huggingface", size: Literal['sm', 'md', 'lg'] = "lg", icon: str | Path | None = "/home/runner/work/gradio/gradio/gradio/icons/huggingface-logo.svg", link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, scale: int | None = None, min_width: int | None = None)
Creates a button that redirects the user to Sign with Hugging Face using OAuth. If created inside of a Blocks context, it will add an event to check if the user is logged in and update the button text accordingly. If created outside of a Blocks context, call the `LoginButton.activate()` method to add the event.

Markdown(value: str | Callable | None = None, label: str | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, rtl: bool = False, latex_delimiters: list[dict[str, str | bool]] | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, sanitize_html: bool = True, line_breaks: bool = False, header_links: bool = False, height: int | str | None = None, max_height: int | str | None = None, min_height: int | str | None = None, show_copy_button: bool = False, container: bool = False)
Used to render arbitrary Markdown output. Can also render latex enclosed by dollar signs. As this component does not accept user input, it is rarely used as an input component. <br>

Model3D(value: str | Callable | None = None, display_mode: Literal['solid', 'point_cloud', 'wireframe'] | None = None, clear_color: tuple[float, float, float, float] | None = None, camera_position: tuple[int | float | None, int | float | None, int | float | None] = (None, None, None), zoom_speed: float = 1, pan_speed: float = 1, height: int | str | None = None, label: str | None = None, show_label: bool | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a component allows users to upload or view 3D Model files (.obj, .glb, .stl, .gltf, .splat, or .ply). <br>

MultimodalTextbox(value: str | dict[str, str | list] | Callable | None = None, sources: list[Literal['upload', 'microphone']] | Literal['upload', 'microphone'] | None = None, file_types: list[str] | None = None, file_count: Literal['single', 'multiple', 'directory'] = "single", lines: int = 1, max_lines: int = 20, placeholder: str | None = None, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, autofocus: bool = False, autoscroll: bool = True, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, text_align: Literal['left', 'right'] | None = None, rtl: bool = False, submit_btn: str | bool | None = True, stop_btn: str | bool | None = False, max_plain_text_length: int = 1000)
Creates a textarea for users to enter string input or display string output and also allows for the uploading of multimedia files. <br>

BarPlot(value: pd.DataFrame | Callable | None = None, x: str | None = None, y: str | None = None, color: str | None = None, title: str | None = None, x_title: str | None = None, y_title: str | None = None, color_title: str | None = None, x_bin: str | float | None = None, y_aggregate: Literal['sum', 'mean', 'median', 'min', 'max', 'count'] | None = None, color_map: dict[str, str] | None = None, x_lim: list[float] | None = None, y_lim: list[float] | None = None, x_label_angle: float = 0, y_label_angle: float = 0, x_axis_labels_visible: bool = True, caption: str | None = None, sort: Literal['x', 'y', '-x', '-y'] | list[str] | None = None, tooltip: Literal['axis', 'none', 'all'] | list[str] = "axis", height: int | None = None, label: str | None = None, show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, every: Timer | float | None = None, inputs: Component | Sequence[Component] | Set[Component] | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a bar plot component to display data from a pandas DataFrame. <br>

LinePlot(value: pd.DataFrame | Callable | None = None, x: str | None = None, y: str | None = None, color: str | None = None, title: str | None = None, x_title: str | None = None, y_title: str | None = None, color_title: str | None = None, x_bin: str | float | None = None, y_aggregate: Literal['sum', 'mean', 'median', 'min', 'max', 'count'] | None = None, color_map: dict[str, str] | None = None, x_lim: list[float] | None = None, y_lim: list[float] | None = None, x_label_angle: float = 0, y_label_angle: float = 0, x_axis_labels_visible: bool = True, caption: str | None = None, sort: Literal['x', 'y', '-x', '-y'] | list[str] | None = None, tooltip: Literal['axis', 'none', 'all'] | list[str] = "axis", height: int | None = None, label: str | None = None, show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, every: Timer | float | None = None, inputs: Component | Sequence[Component] | Set[Component] | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a line plot component to display data from a pandas DataFrame. <br>

ScatterPlot(value: pd.DataFrame | Callable | None = None, x: str | None = None, y: str | None = None, color: str | None = None, title: str | None = None, x_title: str | None = None, y_title: str | None = None, color_title: str | None = None, x_bin: str | float | None = None, y_aggregate: Literal['sum', 'mean', 'median', 'min', 'max', 'count'] | None = None, color_map: dict[str, str] | None = None, x_lim: list[float] | None = None, y_lim: list[float] | None = None, x_label_angle: float = 0, y_label_angle: float = 0, x_axis_labels_visible: bool = True, caption: str | None = None, sort: Literal['x', 'y', '-x', '-y'] | list[str] | None = None, tooltip: Literal['axis', 'none', 'all'] | list[str] = "axis", height: int | None = None, label: str | None = None, show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, every: Timer | float | None = None, inputs: Component | Sequence[Component] | Set[Component] | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates a scatter plot component to display data from a pandas DataFrame. <br>

Number(value: float | Callable | None = None, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, precision: int | None = None, minimum: float | None = None, maximum: float | None = None, step: float = 1)
Creates a numeric field for user to enter numbers as input or display numeric output. <br>

ParamViewer(value: Mapping[str, Parameter] | None = None, language: Literal['python', 'typescript'] = "python", linkify: list[str] | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, render: bool = True, key: int | str | None = None, header: str | None = "Parameters", anchor_links: bool | str = False)
Displays an interactive table of parameters and their descriptions and default values with syntax highlighting. For each parameter, the user should provide a type (e.g. a `str`), a human-readable description, and a default value. As this component does not accept user input, it is rarely used as an input component. Internally, this component is used to display the parameters of components in the Custom Component Gallery (https://www.gradio.app/custom-components/gallery).

Plot(value: Any | None = None, format: str = "webp", label: str | 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 | None = None)
Creates a plot component to display various kinds of plots (matplotlib, plotly, altair, or bokeh plots are supported). As this component does not accept user input, it is rarely used as an input component. <br>

Radio(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: str | int | float | Callable | None = None, type: Literal['value', 'index'] = "value", label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, rtl: bool = False)
Creates a set of (string or numeric type) radio buttons of which only one can be selected. <br>

Slider(minimum: float = 0, maximum: float = 100, value: float | Callable | None = None, step: float | None = None, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, randomize: bool = False, show_reset_button: bool = True)
Creates a slider that ranges from {minimum} to {maximum} with a step size of {step}. <br>

State(value: Any = None, render: bool = True, time_to_live: int | float | None = None, delete_callback: Callable[[Any], None] | None = None)
A base class for defining methods that all input/output components should have.

Textbox(value: str | Callable | None = None, type: Literal['text', 'password', 'email'] = "text", lines: int = 1, max_lines: int | None = None, placeholder: str | None = None, label: str | None = None, info: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, autofocus: bool = False, autoscroll: bool = True, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, text_align: Literal['left', 'right'] | None = None, rtl: bool = False, show_copy_button: bool = False, max_length: int | None = None, submit_btn: str | bool | None = False, stop_btn: str | bool | None = False)
Creates a textarea for user to enter string input or display string output. <br>

Timer(value: float = 1, active: bool = True, render: bool = True)
Special component that ticks at regular intervals when active. It is not visible, and only used to trigger events at a regular interval through the `tick` event listener.

UploadButton(label: str = "Upload a File", value: str | list[str] | Callable | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop'] = "secondary", visible: bool = True, size: Literal['sm', 'md', 'lg'] = "lg", icon: str | None = None, scale: int | None = None, min_width: int | None = None, interactive: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, type: Literal['filepath', 'binary'] = "filepath", file_count: Literal['single', 'multiple', 'directory'] = "single", file_types: list[str] | None = None)
Used to create an upload button, when clicked allows a user to upload files that satisfy the specified file type or generic files (if file_type not set). <br>

Video(value: str | Path | tuple[str | Path, str | Path | None] | Callable | None = None, format: str | None = None, sources: list[Literal['upload', 'webcam']] | Literal['upload', 'webcam'] | None = None, height: int | str | None = None, width: int | str | None = None, label: str | 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, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, mirror_webcam: bool = True, include_audio: bool | None = None, autoplay: bool = False, show_share_button: bool | None = None, show_download_button: bool | None = None, min_length: int | None = None, max_length: int | None = None, loop: bool = False, streaming: bool = False, watermark: str | Path | None = None, webcam_constraints: dict[str, Any] | None = None)
Creates a video component that can be used to upload/record videos (as an input) or display videos (as an output). For the video to be playable in the browser it must have a compatible container and codec combination. Allowed combinations are .mp4 with h264 codec, .ogg with theora codec, and .webm with vp9 codec. If the component detects that the output video would not be playable in the browser it will attempt to convert it to a playable mp4 video. If the conversion fails, the original video is returned. <br>

SimpleImage(value: str | None = None, label: str | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, show_download_button: bool = True, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None)
Creates an image component that can be used to upload images (as an input) or display images (as an output).

FileData(data: Any)
The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded. <br>

set_static_paths(paths: str | Path | list[str | Path])
Set the static paths to be served by the gradio app. <br> Static files are are served directly from the file system instead of being copied. They are served to users with The Content-Disposition HTTP header set to "inline" when sending these files to users. This indicates that the file should be displayed directly in the browser window if possible. This function is useful when you want to serve files that you know will not be modified during the lifetime of the gradio app (like files used in gr.Examples). By setting static paths, your app will launch faster and it will consume less disk space. Calling this function will set the static paths for all gradio applications defined in the same interpreter session until it is called again or the session ends. <br>

Dependency(trigger: <class 'inspect._empty'>, key_vals: <class 'inspect._empty'>, dep_index: <class 'inspect._empty'>, fn: <class 'inspect._empty'>, associated_timer: Timer | None = None)
dict() -> new empty dictionary dict(mapping) -> new dictionary initialized from a mapping object's     (key, value) pairs dict(iterable) -> new dictionary initialized as if via:     d = {}     for k, v in iterable:         d[k] = v dict(**kwargs) -> new dictionary initialized with the name=value pairs     in the keyword argument list.  For example:  dict(one=1, two=2)

EventData(target: Block | None)
When gr.EventData or one of its subclasses is added as a type hint to an argument of a prediction function, a gr.EventData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener. The gr.EventData object itself contains a `.target` attribute that refers to the component that triggered the event, while subclasses of gr.EventData contains additional attributes that are different for each class. <br>

SelectData(target: Block | None, data: Any)
The gr.SelectData class is a subclass of gr.EventData that specifically carries information about the `.select()` event. When gr.SelectData is added as a type hint to an argument of an event listener method, a gr.SelectData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener. <br>

KeyUpData(target: Block | None, data: Any)
The gr.KeyUpData class is a subclass of gr.EventData that specifically carries information about the `.key_up()` event. When gr.KeyUpData is added as a type hint to an argument of an event listener method, a gr.KeyUpData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener. <br>

DeletedFileData(target: Block | None, data: FileDataDict)
The gr.DeletedFileData class is a subclass of gr.EventData that specifically carries information about the `.delete()` event. When gr.DeletedFileData is added as a type hint to an argument of an event listener method, a gr.DeletedFileData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

LikeData(target: Block | None, data: Any)
The gr.LikeData class is a subclass of gr.EventData that specifically carries information about the `.like()` event. When gr.LikeData is added as a type hint to an argument of an event listener method, a gr.LikeData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

RetryData(target: Block | None, data: Any)
The gr.RetryData class is a subclass of gr.Event data that specifically carries information about the `.retry()` event. When gr.RetryData is added as a type hint to an argument of an event listener method, a gr.RetryData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

UndoData(target: Block | None, data: Any)
The gr.UndoData class is a subclass of gr.Event data that specifically carries information about the `.undo()` event. When gr.UndoData is added as a type hint to an argument of an event listener method, a gr.UndoData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

EditData(target: Block | None, data: Any)
The gr.EditData class is a subclass of gr.Event data that specifically carries information about the `.edit()` event. When gr.EditData is added as a type hint to an argument of an event listener method, a gr.EditData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

DownloadData(target: Block | None, data: FileDataDict)
The gr.DownloadData class is a subclass of gr.EventData that specifically carries information about the `.download()` event. When gr.DownloadData is added as a type hint to an argument of an event listener method, a gr.DownloadData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

CopyData(target: Block | None, data: Any)
The gr.CopyData class is a subclass of gr.EventData that specifically carries information about the `.copy()` event. When gr.CopyData is added as a type hint to an argument of an event listener method, a gr.CopyData object will automatically be passed as the value of that argument. The attributes of this object contains information about the event that triggered the listener.

on(triggers: Sequence[EventListenerCallable] | EventListenerCallable | None = None, fn: Callable[..., Any] | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "full", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5)
Sets up an event listener that triggers a function when the specified event(s) occur. This is especially useful when the same function should be triggered by multiple events. Only a single API endpoint is generated for all events in the triggers list. <br>

api(fn: Callable | Literal['decorator'] = "decorator", api_name: str | None | Literal[False] = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5)
Sets up an API endpoint for a generic function that can be called via the gradio client. Derives its type from type-hints in the function signature. <br>

Examples(examples: list[Any] | list[list[Any]] | str, inputs: Component | Sequence[Component], outputs: Component | Sequence[Component] | None = None, fn: Callable | None = None, cache_examples: bool | None = None, cache_mode: Literal['eager', 'lazy'] | None = None, examples_per_page: int = 10, label: str | None = "Examples", elem_id: str | None = None, run_on_click: bool = False, preprocess: bool = True, postprocess: bool = True, api_name: str | Literal[False] = "load_example", batch: bool = False, example_labels: list[str] | None = None, visible: bool = True)
This class is a wrapper over the Dataset component and can be used to create Examples for Blocks / Interfaces. Populates the Dataset component with examples and assigns event listener so that clicking on an example populates the input/output components. Optionally handles example caching for fast inference. <br>

Progress(track_tqdm: bool = False)
The Progress class provides a custom progress tracker that is used in a function signature. To attach a Progress tracker to a function, simply add a parameter right after the input parameters that has a default value set to a `gradio.Progress()` instance. The Progress tracker can then be updated in the function by calling the Progress object or using the `tqdm` method on an Iterable. The Progress tracker is currently only available with `queue()`.

Progress.__call__(progress: float | tuple[int, int | None] | None, desc: str | None = None, total: int | None = None, unit: str = "steps")
Updates progress tracker with progress and message text.

Progress.tqdm(iterable: Iterable | None, desc: str | None = None, total: int | None = None, unit: str = "steps")
Attaches progress tracker to iterable, like tqdm.

skip()
A special function that can be returned from a Gradio function to skip updating the output component. This may be useful when you want to update the output component conditionally, and in some cases, you want to skip updating the output component. If you have multiple output components, you can return `gr.skip()` as part of a tuple to skip updating a specific output component, or you can return a single `gr.skip()` to skip updating all output components.

load(name: str, src: Callable[[str, str | None], Blocks] | Literal['models', 'spaces'] | None = None, token: str | None = None, hf_token: str | None = None, accept_token: bool | LoginButton = False, provider: PROVIDER_T | None = None, kwargs: <class 'inspect._empty'>)
Constructs a Gradio app automatically from a Hugging Face model/Space repo name or a 3rd-party API provider. Note that if a Space repo is loaded, certain high-level attributes of the Blocks (e.g. custom `css`, `js`, and `head` attributes) will not be loaded.

load_chat(base_url: str, model: str, token: str | None = None, file_types: Literal['text_encoded', 'image'] | list[Literal['text_encoded', 'image']] | None = "text_encoded", system_message: str | None = None, streaming: bool = True, kwargs: <class 'inspect._empty'>)
Load a chat interface from an OpenAI API chat compatible endpoint.

Error(message: str = "Error raised.", duration: float | None = 10, visible: bool = True, title: str = "Error", print_exception: bool = True)
This class allows you to pass custom error messages to the user. You can do so by raising a gr.Error("custom message") anywhere in the code, and when that line is executed the custom message will appear in a modal on the demo.

Warning(message: str = "Warning issued.", duration: float | None = 10, visible: bool = True, title: str = "Warning")
This function allows you to pass custom warning messages to the user. You can do so simply by writing `gr.Warning('message here')` in your function, and when that line is executed the custom message will appear in a modal on the demo. The modal is yellow by default and has the heading: "Warning." Queue must be enabled for this behavior; otherwise, the warning will be printed to the console using the `warnings` library.

Info(message: str = "Info issued.", duration: float | None = 10, visible: bool = True, title: str = "Info")
This function allows you to pass custom info messages to the user. You can do so simply by writing `gr.Info('message here')` in your function, and when that line is executed the custom message will appear in a modal on the demo. The modal is gray by default and has the heading: "Info." Queue must be enabled for this behavior; otherwise, the message will be printed to the console.

Success(message: str = "Success.", duration: float | None = 10, visible: bool = True, title: str = "Success")
This function allows you to pass custom success messages to the user. You can do so simply by writing `gr.Success('message here')` in your function, and when that line is executed the custom message will appear in a modal on the demo. The modal is green by default and has the heading: "Success." Queue must be enabled for this behavior; otherwise, the message will be printed to the console.

Request(request: fastapi.Request | None = None, username: str | None = None, session_hash: str | None = None)
A Gradio request object that can be used to access the request headers, cookies, query parameters and other information about the request from within the prediction function. The class is a thin wrapper around the fastapi.Request class. Attributes of this class include: `headers`, `client`, `query_params`, `session_hash`, and `path_params`. If auth is enabled, the `username` attribute can be used to get the logged in user. In some environments, the dict-like attributes (e.g. `requests.headers`, `requests.query_params`) of this class are automatically converted to dictionaries, so we recommend converting them to dictionaries before accessing attributes for consistent behavior in different environments.

mount_gradio_app(app: fastapi.FastAPI, blocks: gradio.Blocks, path: str, server_name: str = "0.0.0.0", server_port: int = 7860, show_api: bool | None = None, app_kwargs: dict[str, Any] | None = None, auth: Callable | tuple[str, str] | list[tuple[str, str]] | None = None, auth_message: str | None = None, auth_dependency: Callable[[fastapi.Request], str | None] | None = None, root_path: str | None = None, allowed_paths: list[str] | None = None, blocked_paths: list[str] | None = None, favicon_path: str | None = None, show_error: bool = True, max_file_size: str | int | None = None, ssr_mode: bool | None = None, node_server_name: str | None = None, node_port: int | None = None, enable_monitoring: bool | None = None, pwa: bool | None = None)
Mount a gradio.Blocks to an existing FastAPI application. <br>

ChatInterface(fn: Callable, multimodal: bool = False, type: Literal['messages', 'tuples'] | None = None, chatbot: Chatbot | None = None, textbox: Textbox | MultimodalTextbox | None = None, additional_inputs: str | Component | list[str | Component] | None = None, additional_inputs_accordion: str | Accordion | None = None, additional_outputs: Component | list[Component] | None = None, editable: bool = False, examples: list[str] | list[MultimodalValue] | list[list] | None = None, example_labels: list[str] | None = None, example_icons: list[str] | None = None, run_examples_on_click: bool = True, cache_examples: bool | None = None, cache_mode: Literal['eager', 'lazy'] | None = None, title: str | None = None, description: str | None = None, theme: Theme | str | None = None, flagging_mode: Literal['never', 'manual'] | None = None, flagging_options: list[str] | tuple[str, ...] | None = ('Like', 'Dislike'), flagging_dir: str = ".gradio/flagged", css: str | None = None, css_paths: str | Path | Sequence[str | Path] | None = None, js: str | Literal[True] | None = None, head: str | None = None, head_paths: str | Path | Sequence[str | Path] | None = None, analytics_enabled: bool | None = None, autofocus: bool = True, autoscroll: bool = True, submit_btn: str | bool | None = True, stop_btn: str | bool | None = True, concurrency_limit: int | None | Literal['default'] = "default", delete_cache: tuple[int, int] | None = None, show_progress: Literal['full', 'minimal', 'hidden'] = "minimal", fill_height: bool = True, fill_width: bool = False, api_name: str | Literal[False] = "chat", save_history: bool = False)
ChatInterface is Gradio's high-level abstraction for creating chatbot UIs, and allows you to create a web-based demo around a chatbot model in a few lines of code. Only one parameter is required: fn, which takes a function that governs the response of the chatbot based on the user input and chat history. Additional parameters can be used to control the appearance and behavior of the demo. <br>


Event listeners allow Gradio to respond to user interactions with the UI components defined in a Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.
All event listeners have the same signature:
<component_name>.<event_name>(fn: Callable | None | Literal['decorator'] = "decorator", inputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, outputs: Component | BlockContext | Sequence[Component | BlockContext] | Set[Component | BlockContext] | None = None, api_name: str | None | Literal[False] = None, scroll_to_output: bool = False, show_progress: Literal['full', 'minimal', 'hidden'] = "minimal", show_progress_on: Component | Sequence[Component] | None = None, queue: bool = True, batch: bool = False, max_batch_size: int = 4, preprocess: bool = True, postprocess: bool = True, cancels: dict[str, Any] | list[dict[str, Any]] | None = None, trigger_mode: Literal['once', 'multiple', 'always_last'] | None = None, js: str | Literal[True] | None = None, concurrency_limit: int | None | Literal['default'] = "default", concurrency_id: str | None = None, show_api: bool = True, time_limit: int | None = None, stream_every: float = 0.5, like_user_message: bool = False)
Each component only supports some specific events. Below is a list of all gradio components and every event that each component supports. If an event is supported by a component, it is a valid method of the component.AnnotatedImage: select

Audio: stream, change, clear, play, pause, pause, stop, pause, pause, start_recording, pause_recording, stop_recording, upload, input

BrowserState: change

Button: click

Chatbot: change, select, like, retry, undo, example_select, option_select, clear, copy, edit

Checkbox: change, input, select

CheckboxGroup: change, input, select

ClearButton: click

Code: change, input, focus, blur

ColorPicker: change, input, submit, focus, blur

Dataframe: change, input, select

Dataset: click, select

DateTime: change, submit

DeepLinkButton: click

DownloadButton: click

Dropdown: change, input, select, focus, blur, key_up

DuplicateButton: click

File: change, select, clear, upload, delete, download

FileExplorer: change

Gallery: select, upload, change, preview_close, preview_open

HighlightedText: change, select

HTML: change, click

Image: clear, change, stream, select, upload, input

ImageEditor: clear, change, input, select, upload, apply

JSON: change

Label: change, select

LoginButton: click

Markdown: change, copy

Model3D: change, upload, edit, clear

MultimodalTextbox: change, input, select, submit, focus, blur, stop

BarPlot: select, double_click

LinePlot: select, double_click

ScatterPlot: select, double_click

Number: change, input, submit, focus

ParamViewer: change, upload

Plot: change

Radio: select, change, input

Slider: change, input, release

State: change

Textbox: change, input, select, submit, focus, blur, stop, copy

Timer: tick

UploadButton: click, upload

Video: change, clear, start_recording, stop_recording, stop, play, pause, end, upload

SimpleImage: clear, change, upload

Below are examples of full end-to-end Gradio apps:

Name: custom css
Code: 

import gradio as gr

css = """
/* CSSKeyframesRule for animation */
@keyframes animation {
    from {background-color: red;}
    to {background-color: blue;}
}

.cool-col {
    background-color: red;
    animation-name: animation;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    border-radius: 10px;
    padding: 20px;
}

/* CSSStyleRule */
.markdown {
    background-color: lightblue;
    padding: 20px;
}

.markdown p {
    color: royalblue;
}

/* CSSMediaRule */
@media screen and (max-width: 600px) {
    .markdown {
        background: blue;
    }
    .markdown p {
        color: lightblue;
    }
}

.dark .markdown {
    background: pink;
}

.darktest h3 {
    color: black;
}

.dark .darktest h3 {
    color: yellow;
}

/* CSSFontFaceRule */
@font-face {
    font-family: "test-font";
    src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf") format("truetype");
}

.cool-col {
    font-family: "test-font";
}

/* CSSImportRule */
@import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap");

.markdown {
  font-family: "Protest Riot", sans-serif;
}
"""

with gr.Blocks(css=css) as demo:
    with gr.Column(elem_classes="cool-col"):
        gr.Markdown("### Gradio Demo with Custom CSS", elem_classes="darktest")
        gr.Markdown(
            elem_classes="markdown",
            value="Resize the browser window to see the CSS media query in action.",
        )

demo.launch()


Name: annotatedimage component
Code: 

import gradio as gr
import numpy as np 
import requests 
from io import BytesIO
from PIL import Image

base_image = "https://gradio-docs-json.s3.us-west-2.amazonaws.com/base.png"
building_image = requests.get("https://gradio-docs-json.s3.us-west-2.amazonaws.com/buildings.png")
building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0

with gr.Blocks() as demo:
    gr.AnnotatedImage(
        value=(base_image, [(building_image, "buildings")]),
        height=500,
    )

demo.launch()

Name: blocks essay simple
Code: 

import gradio as gr

def change_textbox(choice):
    if choice == "short":
        return gr.Textbox(lines=2, visible=True)
    elif choice == "long":
        return gr.Textbox(lines=8, visible=True, value="Lorem ipsum dolor sit amet")
    else:
        return gr.Textbox(visible=False)

with gr.Blocks() as demo:
    radio = gr.Radio(
        ["short", "long", "none"], label="What kind of essay would you like to write?"
    )
    text = gr.Textbox(lines=2, interactive=True, show_copy_button=True)
    radio.change(fn=change_textbox, inputs=radio, outputs=text)

demo.launch()


Name: blocks flipper
Code: 

import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
    with gr.Tab("Flip Image"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("Flip")

    with gr.Accordion("Open for More!", open=False):
        gr.Markdown("Look at me...")
        temp_slider = gr.Slider(
            0, 1,
            value=0.1,
            step=0.1,
            interactive=True,
            label="Slide me",
        )

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()


Name: blocks form
Code: 

import gradio as gr

with gr.Blocks() as demo:
    name_box = gr.Textbox(label="Name")
    age_box = gr.Number(label="Age", minimum=0, maximum=100)
    symptoms_box = gr.CheckboxGroup(["Cough", "Fever", "Runny Nose"])
    submit_btn = gr.Button("Submit")

    with gr.Column(visible=False) as output_col:
        diagnosis_box = gr.Textbox(label="Diagnosis")
        patient_summary_box = gr.Textbox(label="Patient Summary")

    def submit(name, age, symptoms):
        return {
            submit_btn: gr.Button(visible=False),
            output_col: gr.Column(visible=True),
            diagnosis_box: "covid" if "Cough" in symptoms else "flu",
            patient_summary_box: f"{name}, {age} y/o",
        }

    submit_btn.click(
        submit,
        [name_box, age_box, symptoms_box],
        [submit_btn, diagnosis_box, patient_summary_box, output_col],
    )

demo.launch()


Name: blocks hello
Code: 

import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

demo.launch()


Name: blocks js load
Code: 

import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

js = """
function createGradioAnimation() {
    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';

    var text = 'Welcome to Gradio!';
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];

                container.appendChild(letter);

                setTimeout(function() {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 250);
        })(i);
    }

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);

    return 'Animation created';
}
"""
with gr.Blocks(js=js) as demo:
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

demo.launch()


Name: blocks js methods
Code: 

import gradio as gr

blocks = gr.Blocks()

with blocks as demo:
    subject = gr.Textbox(placeholder="subject")
    verb = gr.Radio(["ate", "loved", "hated"])
    object = gr.Textbox(placeholder="object")

    with gr.Row():
        btn = gr.Button("Create sentence.")
        reverse_btn = gr.Button("Reverse sentence.")
        foo_bar_btn = gr.Button("Append foo")
        reverse_then_to_the_server_btn = gr.Button(
            "Reverse sentence and send to server."
        )

    def sentence_maker(w1, w2, w3):
        return f"{w1} {w2} {w3}"

    output1 = gr.Textbox(label="output 1")
    output2 = gr.Textbox(label="verb")
    output3 = gr.Textbox(label="verb reversed")
    output4 = gr.Textbox(label="front end process and then send to backend")

    btn.click(sentence_maker, [subject, verb, object], output1)
    reverse_btn.click(
        None, [subject, verb, object], output2, js="(s, v, o) => o + ' ' + v + ' ' + s"
    )
    verb.change(lambda x: x, verb, output3, js="(x) => [...x].reverse().join('')")
    foo_bar_btn.click(None, [], subject, js="(x) => x + ' foo'")

    reverse_then_to_the_server_btn.click(
        sentence_maker,
        [subject, verb, object],
        output4,
        js="(s, v, o) => [s, v, o].map(x => [...x].reverse().join(''))",
    )

demo.launch()


Name: blocks kinematics
Code: 

import pandas as pd
import numpy as np

import gradio as gr

def plot(v, a):
    g = 9.81
    theta = a / 180 * 3.14
    tmax = ((2 * v) * np.sin(theta)) / g
    timemat = tmax * np.linspace(0, 1, 40)

    x = (v * timemat) * np.cos(theta)
    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
    df = pd.DataFrame({"x": x, "y": y})
    return df

demo = gr.Blocks()

with demo:
    gr.Markdown(
        r"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \cdot \frac{\sin(2\theta)}{g}$"
    )

    with gr.Row():
        speed = gr.Slider(1, 30, 25, label="Speed")
        angle = gr.Slider(0, 90, 45, label="Angle")
    output = gr.LinePlot(
        x="x",
        y="y",
        overlay_point=True,
        tooltip=["x", "y"],
        x_lim=[0, 100],
        y_lim=[0, 60],
        width=350,
        height=300,
    )
    btn = gr.Button(value="Run")
    btn.click(plot, [speed, angle], output)

demo.launch()


Name: blocks layout
Code: 

import gradio as gr

demo = gr.Blocks()

with demo:
    with gr.Row():
        gr.Image(interactive=True, scale=2)
        gr.Image()
    with gr.Row():
        gr.Textbox(label="Text")
        gr.Number(label="Count", scale=2)
        gr.Radio(choices=["One", "Two"])
    with gr.Row():
        gr.Button("500", scale=0, min_width=500)
        gr.Button("A", scale=0)
        gr.Button("grow")
    with gr.Row():
        gr.Textbox()
        gr.Textbox()
        gr.Button()
    with gr.Row():
        with gr.Row():
            with gr.Column():
                gr.Textbox(label="Text")
                gr.Number(label="Count")
                gr.Radio(choices=["One", "Two"])
            gr.Image()
            with gr.Column():
                gr.Image(interactive=True)
                gr.Image()
    gr.Image()
    gr.Textbox(label="Text")
    gr.Number(label="Count")
    gr.Radio(choices=["One", "Two"])

demo.launch()


Name: blocks plug
Code: 

import gradio as gr

def change_tab():
    return gr.Tabs(selected=2)

identity_demo, input_demo, output_demo = gr.Blocks(), gr.Blocks(), gr.Blocks()

with identity_demo:
    gr.Interface(lambda x: x, "text", "text")

with input_demo:
    t = gr.Textbox(label="Enter your text here")
    with gr.Row():
        btn = gr.Button("Submit")
        clr = gr.ClearButton(t)

with output_demo:
    gr.Textbox("This is a static output")

with gr.Blocks() as demo:
    gr.Markdown("Three demos in one!")
    with gr.Tabs(selected=1) as tabs:
        with gr.TabItem("Text Identity", id=0) as tab0:
            tab0.select(lambda: gr.Tabs(selected=0), None, tabs)
            identity_demo.render()
        with gr.TabItem("Text Input", id=1) as tab1:
            tab1.select(lambda: gr.Tabs(selected=1), None, tabs)
            input_demo.render()
        with gr.TabItem("Text Static", id=2) as tab2:
            tab2.select(lambda: gr.Tabs(selected=2), None, tabs)
            output_demo.render()
    btn = gr.Button("Change tab")
    btn.click(inputs=None, outputs=tabs, fn=change_tab)

demo.launch()


Name: blocks simple squares
Code: 

import gradio as gr

demo = gr.Blocks(css="""#btn {color: red} .abc {font-family: "Comic Sans MS", "Comic Sans", cursive !important}""")

with demo:
    default_json = {"a": "a"}

    num = gr.State(value=0)
    squared = gr.Number(value=0)
    btn = gr.Button("Next Square", elem_id="btn", elem_classes=["abc", "def"])

    stats = gr.State(value=default_json)
    table = gr.JSON()

    def increase(var, stats_history):
        var += 1
        stats_history[str(var)] = var**2
        return var, var**2, stats_history, stats_history

    btn.click(increase, [num, stats], [num, squared, stats, table])

demo.launch()


Name: calculator
Code: 

import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        if num2 == 0:
            raise gr.Error("Cannot divide by zero!")
        return num1 / num2

demo = gr.Interface(
    calculator,
    [
        "number",
        gr.Radio(["add", "subtract", "multiply", "divide"]),
        "number"
    ],
    "number",
    examples=[
        [45, "add", 3],
        [3.14, "divide", 2],
        [144, "multiply", 2.5],
        [0, "subtract", 1.2],
    ],
    title="Toy Calculator",
    description="Here's a sample toy calculator.",
)

demo.launch()


Name: chatbot consecutive
Code: 

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")

    def user(user_message, history):
        return "", history + [[user_message, None]]

    def bot(history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        time.sleep(2)
        history[-1][1] = bot_message
        return history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )
    clear.click(lambda: None, None, chatbot, queue=False)

demo.launch()


Name: chatbot simple
Code: 

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(type="messages")
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "Today is a great day", "I'm very hungry"])
        chat_history.append({"role": "user", "content": message})
        chat_history.append({"role": "assistant", "content": bot_message})
        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])

demo.launch()


Name: chatbot streaming
Code: 

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(type="messages")
    msg = gr.Textbox()
    clear = gr.Button("Clear")

    def user(user_message, history: list):
        return "", history + [{"role": "user", "content": user_message}]

    def bot(history: list):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        history.append({"role": "assistant", "content": ""})
        for character in bot_message:
            history[-1]['content'] += character
            time.sleep(0.05)
            yield history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )
    clear.click(lambda: None, None, chatbot, queue=False)

demo.launch()


Name: datetimes
Code: 

import gradio as gr

with gr.Blocks() as demo:
    date1 = gr.DateTime(include_time=True, label="Date and Time", type="datetime", elem_id="date1")
    date2 = gr.DateTime(include_time=False, label="Date Only", type="string", elem_id="date2")
    date3 = gr.DateTime(elem_id="date3", timezone="Europe/Paris")

    with gr.Row():
        btn1 = gr.Button("Load Date 1")
        btn2 = gr.Button("Load Date 2")
        btn3 = gr.Button("Load Date 3")

    click_output = gr.Textbox(label="Last Load")
    change_output = gr.Textbox(label="Last Change")
    submit_output = gr.Textbox(label="Last Submit")

    btn1.click(lambda x:x, date1, click_output)
    btn2.click(lambda x:x, date2, click_output)
    btn3.click(lambda x:x, date3, click_output)

    for item in [date1, date2, date3]:
        item.change(lambda x:x, item, change_output)
        item.submit(lambda x:x, item, submit_output)

demo.launch()


Name: diff texts
Code: 

from difflib import Differ

import gradio as gr

def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]

demo = gr.Interface(
    diff_texts,
    [
        gr.Textbox(
            label="Text 1",
            info="Initial text",
            lines=3,
            value="The quick brown fox jumped over the lazy dogs.",
        ),
        gr.Textbox(
            label="Text 2",
            info="Text to compare",
            lines=3,
            value="The fast brown fox jumps over lazy dogs.",
        ),
    ],
    gr.HighlightedText(
        label="Diff",
        combine_adjacent=True,
        show_legend=True,
        color_map={"+": "red", "-": "green"}),
    theme=gr.themes.Base()
)
demo.launch()


Name: dropdown key up
Code: 

import gradio as gr

def test(value, key_up_data: gr.KeyUpData):
    return {
        "component value": value,
        "input value": key_up_data.input_value,
        "key": key_up_data.key
    }

with gr.Blocks() as demo:
    d = gr.Dropdown(["abc", "def"], allow_custom_value=True)
    t = gr.JSON()
    d.key_up(test, d, t)

demo.launch()


Name: fake diffusion
Code: 

import gradio as gr
import numpy as np
import time

def fake_diffusion(steps):
    rng = np.random.default_rng()
    for i in range(steps):
        time.sleep(1)
        image = rng.random(size=(600, 600, 3))
        yield image
    image = np.ones((1000,1000,3), np.uint8)
    image[:] = [255, 124, 0]
    yield image

demo = gr.Interface(fake_diffusion,
                    inputs=gr.Slider(1, 10, 3, step=1),
                    outputs="image")

demo.launch()


Name: filter records
Code: 

import gradio as gr

def filter_records(records, gender):
    return records[records["gender"] == gender]

demo = gr.Interface(
    filter_records,
    [
        gr.Dataframe(
            headers=["name", "age", "gender"],
            datatype=["str", "number", "str"],
            row_count=5,
            col_count=(3, "fixed"),
        ),
        gr.Dropdown(["M", "F", "O"]),
    ],
    "dataframe",
    description="Enter gender as 'M', 'F', or 'O' for other.",
)

demo.launch()


Name: function values
Code: 

import gradio as gr
import random

countries = [
    "Algeria", "Argentina", "Australia", "Brazil", "Canada", "China", "Democratic Republic of the Congo", "Greenland (Denmark)", "India", "Kazakhstan", "Mexico", "Mongolia", "Peru", "Russia", "Saudi Arabia", "Sudan", "United States"
]

with gr.Blocks() as demo:
    with gr.Row():
        count = gr.Slider(1, 10, step=1, label="Country Count")
        alpha_order = gr.Checkbox(True, label="Alphabetical Order")

    gr.JSON(lambda count, alpha_order: countries[:count] if alpha_order else countries[-count:], inputs=[count, alpha_order])
    timer = gr.Timer(1)
    with gr.Row():
        gr.Textbox(lambda: random.choice(countries), label="Random Country", every=timer)
        gr.Textbox(lambda count: ", ".join(random.sample(countries, count)), inputs=count, label="Random Countries", every=timer)
    with gr.Row():
        gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer)
        gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer)

demo.launch()


Name: gallery component events
Code: 

import gradio as gr

with gr.Blocks() as demo:
    files = [
        "https://gradio-builds.s3.amazonaws.com/assets/cheetah-003.jpg",
        "https://gradio-static-files.s3.amazonaws.com/world.mp4",
        "https://gradio-builds.s3.amazonaws.com/assets/TheCheethcat.jpg",
    ]
    with gr.Row():
        with gr.Column():
            gal = gr.Gallery(columns=4, interactive=True, label="Input Gallery")
            btn = gr.Button()
        with gr.Column():
            output_gal = gr.Gallery(columns=4, interactive=True, label="Output Gallery")
    with gr.Row():
        textbox = gr.Json(label="uploaded files")
        num_upload = gr.Number(value=0, label="Num Upload")
        num_change = gr.Number(value=0, label="Num Change")
        preview_open = gr.Number(value=0, label="Preview Open?")
        select_output = gr.Textbox(label="Select Data")
        gal.upload(lambda v,n: (v, v, n+1), [gal, num_upload], [textbox, output_gal, num_upload])
        gal.change(lambda v,n: (v, v, n+1), [gal, num_change], [textbox, output_gal, num_change])
        output_gal.preview_open(lambda: 1, inputs=None, outputs=preview_open)
        output_gal.preview_close(lambda: 0, inputs=None, outputs=preview_open)

    btn.click(lambda: files, None, [output_gal])

    def select(select_data: gr.SelectData):
        return select_data.value['image']['url'] if 'image' in select_data.value else select_data.value['video']['url']

    output_gal.select(select, None, select_output)

demo.launch()


Name: generate tone
Code: 

import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return sr, audio

demo = gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(4, 6, step=1),
        gr.Textbox(value="1", label="Duration in seconds"),
    ],
    "audio",
)
demo.launch()


Name: hangman
Code: 

import gradio as gr

secret_word = "gradio"

with gr.Blocks() as demo:
    used_letters_var = gr.State([])
    with gr.Row() as row:
        with gr.Column():
            input_letter = gr.Textbox(label="Enter letter")
            btn = gr.Button("Guess Letter")
        with gr.Column():
            hangman = gr.Textbox(
                label="Hangman",
                value="_"*len(secret_word)
            )
            used_letters_box = gr.Textbox(label="Used Letters")

    def guess_letter(letter, used_letters):
        used_letters.append(letter)
        answer = "".join([
            (letter if letter in used_letters else "_")
            for letter in secret_word
        ])
        return {
            used_letters_var: used_letters,
            used_letters_box: ", ".join(used_letters),
            hangman: answer
        }
    btn.click(
        guess_letter,
        [input_letter, used_letters_var],
        [used_letters_var, used_letters_box, hangman]
        )
demo.launch()


Name: hello blocks
Code: 

import gradio as gr


def greet(name):
    return "Hello " + name + "!"


with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()


Name: hello blocks decorator
Code: 

import gradio as gr

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")

    @greet_btn.click(inputs=name, outputs=output)
    def greet(name):
        return "Hello " + name + "!"

demo.launch()

Name: hello world
Code: 

import gradio as gr


def greet(name):
    return "Hello " + name + "!"


demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")

demo.launch()


Name: image editor
Code: 

import gradio as gr
import time

def sleep(im):
    time.sleep(5)
    return [im["background"], im["layers"][0], im["layers"][1], im["composite"]]

def predict(im):
    return im["composite"]

with gr.Blocks() as demo:
    with gr.Row():
        im = gr.ImageEditor(
            type="numpy",
            crop_size="1:1",
        )
        im_preview = gr.Image()
    n_upload = gr.Number(0, label="Number of upload events", step=1)
    n_change = gr.Number(0, label="Number of change events", step=1)
    n_input = gr.Number(0, label="Number of input events", step=1)

    im.upload(lambda x: x + 1, outputs=n_upload, inputs=n_upload)
    im.change(lambda x: x + 1, outputs=n_change, inputs=n_change)
    im.input(lambda x: x + 1, outputs=n_input, inputs=n_input)
    im.change(predict, outputs=im_preview, inputs=im, show_progress="hidden")

demo.launch()


Name: matrix transpose
Code: 

import numpy as np

import gradio as gr

def transpose(matrix):
    return matrix.T

demo = gr.Interface(
    transpose,
    gr.Dataframe(type="numpy", datatype="number", row_count=5, col_count=3, show_fullscreen_button=True),
    "numpy",
    examples=[
        [np.zeros((30, 30)).tolist()],
        [np.ones((2, 2)).tolist()],
        [np.random.randint(0, 10, (3, 10)).tolist()],
        [np.random.randint(0, 10, (10, 3)).tolist()],
        [np.random.randint(0, 10, (10, 10)).tolist()],
    ],
    cache_examples=False
)

demo.launch()


Name: model3D
Code: 

import gradio as gr
import os

def load_mesh(mesh_file_name):
    return mesh_file_name

demo = gr.Interface(
    fn=load_mesh,
    inputs=gr.Model3D(),
    outputs=gr.Model3D(
            clear_color=(0.0, 0.0, 0.0, 0.0),  label="3D Model", display_mode="wireframe"),
    examples=[
        [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
        [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],
        [os.path.join(os.path.dirname(__file__), "files/Fox.gltf")],
        [os.path.join(os.path.dirname(__file__), "files/face.obj")],
        [os.path.join(os.path.dirname(__file__), "files/sofia.stl")],
        ["https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat"],
        ["https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/luigi/luigi.ply"],
    ],
    cache_examples=True
)

demo.launch()


Name: on listener decorator
Code: 

import gradio as gr

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")

    @gr.on(triggers=[name.submit, greet_btn.click], inputs=name, outputs=output)
    def greet(name):
        return "Hello " + name + "!"

demo.launch()


Name: plot component
Code: 

import gradio as gr
import matplotlib.pyplot as plt
import numpy as np

Fs = 8000
f = 5
sample = 8000
x = np.arange(sample)
y = np.sin(2 * np.pi * f * x / Fs)
plt.plot(x, y)

with gr.Blocks() as demo:
    gr.Plot(value=plt)

demo.launch()


Name: render merge
Code: 

import gradio as gr

with gr.Blocks() as demo:
    text_count = gr.Slider(1, 5, step=1, label="Textbox Count")

    @gr.render(inputs=text_count)
    def render_count(count):
        boxes = []
        for i in range(count):
            box = gr.Textbox(key=i, label=f"Box {i}")
            boxes.append(box)

        def merge(*args):
            return " ".join(args)

        merge_btn.click(merge, boxes, output)

        def clear():
            return [""] * count

        clear_btn.click(clear, None, boxes)

        def countup():
            return [i for i in range(count)]

        count_btn.click(countup, None, boxes, queue=False)

    with gr.Row():
        merge_btn = gr.Button("Merge")
        clear_btn = gr.Button("Clear")
        count_btn = gr.Button("Count")

    output = gr.Textbox()

demo.launch()


Name: render split
Code: 

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
    def show_split(text, mode):
        if len(text) == 0:
            gr.Markdown("## No Input Provided")
        else:
            for letter in text:
                if mode == "textbox":
                    gr.Textbox(letter)
                else:
                    gr.Button(letter)

demo.launch()


Name: reverse audio 2
Code: 

import gradio as gr
import numpy as np

def reverse_audio(audio):
    sr, data = audio
    return (sr, np.flipud(data))

demo = gr.Interface(fn=reverse_audio,
                    inputs="microphone",
                    outputs="audio")

demo.launch()


Name: sepia filter
Code: 

import numpy as np
import gradio as gr

def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],
        [0.349, 0.686, 0.168],
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")
demo.launch()


Name: sort records
Code: 

import gradio as gr

def sort_records(records):
    return records.sort("Quantity")

demo = gr.Interface(
    sort_records,
    gr.Dataframe(
        headers=["Item", "Quantity"],
        datatype=["str", "number"],
        row_count=3,
        col_count=(2, "fixed"),
        type="polars"
    ),
    "dataframe",
    description="Sort by Quantity"
)

demo.launch()


Name: streaming simple
Code: 

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            input_img = gr.Image(label="Input", sources="webcam")
        with gr.Column():
            output_img = gr.Image(label="Output")
        input_img.stream(lambda s: s, input_img, output_img, time_limit=15, stream_every=0.1, concurrency_limit=30)

if __name__ == "__main__":

    demo.launch()


Name: tabbed interface lite
Code: 

import gradio as gr

hello_world = gr.Interface(lambda name: "Hello " + name, "text", "text")
bye_world = gr.Interface(lambda name: "Bye " + name, "text", "text")
chat = gr.ChatInterface(lambda *args: "Hello " + args[0])

demo = gr.TabbedInterface([hello_world, bye_world, chat], ["Hello World", "Bye World", "Chat"])

demo.launch()


Name: tax calculator
Code: 

import gradio as gr

def tax_calculator(income, marital_status, assets):
    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
    total_deductible = sum(assets["Cost"])
    taxable_income = income - total_deductible

    total_tax = 0
    for bracket, rate in tax_brackets:
        if taxable_income > bracket:
            total_tax += (taxable_income - bracket) * rate / 100

    if marital_status == "Married":
        total_tax *= 0.75
    elif marital_status == "Divorced":
        total_tax *= 0.8

    return round(total_tax)

demo = gr.Interface(
    tax_calculator,
    [
        "number",
        gr.Radio(["Single", "Married", "Divorced"]),
        gr.Dataframe(
            headers=["Item", "Cost"],
            datatype=["str", "number"],
            label="Assets Purchased this Year",
        ),
    ],
    "number",
    examples=[
        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
    ],
)

demo.launch()


Name: theme soft
Code: 

import gradio as gr
import time

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    textbox = gr.Textbox(label="Name")
    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
    with gr.Row():
        button = gr.Button("Submit", variant="primary")
        clear = gr.Button("Clear")
    output = gr.Textbox(label="Output")

    def repeat(name, count):
        time.sleep(3)
        return name * count

    button.click(repeat, [textbox, slider], output)

demo.launch()


Name: timer
Code: 

import gradio as gr
import random
import time

with gr.Blocks() as demo:
  timer = gr.Timer(1)
  timestamp = gr.Number(label="Time")
  timer.tick(lambda: round(time.time()), outputs=timestamp)
  gr.Number(lambda: round(time.time()), label="Time 2", every=1)

  with gr.Row():
    timestamp_3 = gr.Number()
    start_btn = gr.Button("Start")
    stop_btn = gr.Button("Stop")

    time_3 = start_btn.click(lambda: round(time.time()), None, timestamp_3, every=1)
    stop_btn.click(fn=None, cancels=time_3)

  with gr.Row():
    min = gr.Number(1, label="Min")
    max = gr.Number(10, label="Max")
  timer2 = gr.Timer(1)
  number = gr.Number(lambda a, b: random.randint(a, b), inputs=[min, max], every=timer2, label="Random Number")
  with gr.Row():
    gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer2)
    gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer2)
    gr.Button("Go Fast").click(lambda: 0.2, None, timer2)
    gr.Button("Go Slow").click(lambda: 2, None, timer2)

if __name__ == "__main__":
  demo.launch()


Name: timer simple
Code: 

import gradio as gr
import random
import time

with gr.Blocks() as demo:
  timer = gr.Timer(1)
  timestamp = gr.Number(label="Time")
  timer.tick(lambda: round(time.time()), outputs=timestamp)

  number = gr.Number(lambda: random.randint(1, 10), every=timer, label="Random Number")
  with gr.Row():
    gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer)
    gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer)
    gr.Button("Go Fast").click(lambda: 0.2, None, timer)

if __name__ == "__main__":
  demo.launch()


Name: variable outputs
Code: 

import gradio as gr

max_textboxes = 10

def variable_outputs(k):
    k = int(k)
    return [gr.Textbox(visible=True)]*k + [gr.Textbox(visible=False)]*(max_textboxes-k)

with gr.Blocks() as demo:
    s = gr.Slider(1, max_textboxes, value=max_textboxes, step=1, label="How many textboxes to show:")
    textboxes = []
    for i in range(max_textboxes):
        t = gr.Textbox(f"Textbox {i}")
        textboxes.append(t)

    s.change(variable_outputs, s, textboxes)

if __name__ == "__main__":
   demo.launch()


Name: video identity
Code: 

import gradio as gr
import os

def video_identity(video):
    return video

demo = gr.Interface(video_identity,
                    gr.Video(),
                    "playable_video",
                    examples=[
                        os.path.join(os.path.dirname(__file__),
                                     "video/video_sample.mp4")],
                    cache_examples=True)

demo.launch()



The latest verstion of Gradio includes some breaking changes, and important new features you should be aware of. Here is a list of the important changes:

1. Audio files are no longer converted to .wav automatically

Previously, the default value of the format in the gr.Audio component was wav, meaning that audio files would be converted to the .wav format before being processed by a prediction function or being returned to the user. Now, the default value of format is None, which means any audio files that have an existing format are kept as is. 

2. The 'every' parameter is no longer supported in event listeners

Previously, if you wanted to run an event 'every' X seconds after a certain trigger, you could set `every=` in the event listener. This is no longer supported — do the following instead:

- create a `gr.Timer` component, and
- use the `.tick()` method to trigger the event.

E.g., replace something like this:

with gr.Blocks() as demo:
    a = gr.Textbox()
    b = gr.Textbox()
    btn = gr.Button("Start")
    btn.click(lambda x:x, a, b, every=1)

with this:

with gr.Blocks() as demo:
    a = gr.Textbox()
    b = gr.Textbox()
    btn = gr.Button("Start")
    t = gr.Timer(1, active=False)
    t.tick(lambda x:x, a, b)
    btn.click(lambda: gr.Timer(active=True), None, t)

This makes it easy to configure the timer as well to change its frequency or stop the event, e.g.

# some code...
stop_btn = gr.Button("Stop")
    stop_btn.click(lambda: gr.Timer(active=False), None, t) # deactivates timer
fast_btn = gr.Button("Fast")
    fast_btn.click(lambda: gr.Timer(0.1), None, t) # makes timer tick every 0.1s


3. The `undo_btn`, `retry_btn` and `clear_btn` parameters of `ChatInterface` have been removed
4. Passing a tuple to `gr.Code` is not supported
5. The `concurrency_count` parameter has been removed from `.queue()`
6. The `additional_inputs_accordion_name` parameter has been removed from `gr.ChatInterface`
7. The `thumbnail` parameter has been removed from `gr.Interface`
8. The `root` parameter in `gr.FileExplorer` has been removed 
9. The `signed_in_value` parameter in `gr.LoginButton` has been removed
10. The `gr.LogoutButton` component has been removed
11. The `gr.make_waveform` method has been removed from the library
12. SVGs are not accepted as input images into the `gr.Image` component unless `type=filepath` 
13. The `height` parameter in `gr.DataFrame` has been renamed to `max_height` 
14. The `likeable` parameter of `gr.Chatbot` has been removed. The chatbot will display like buttons whenever the `like` event is defined.
15. By default user messages are not likeable in the `gr.Chatbot`. To display like buttons in the user message, set the `user_like_button` parameter of the `like` event to True.
16. The argument for lazy-caching examples has been changed

Previously, to lazy-cache examples, you would pass in “lazy” to the `cache_examples` parameter in `Interface`, `Chatinterface` , or `Examples`. Now, there is a separate `cache_mode` parameter, which governs whether caching should be `"lazy"` or `"eager"` . So if your code was previously:

Now, your code should look like this:

chatbot = gr.ChatInterface(
    double,
    examples=["hello", "hi"],
    cache_examples=True,
    cache_mode="lazy",
)