{
 "pages": [
  {
   "name": "Interface",
   "url": "https://www.gradio.app/docs/gradio/interface",
   "content": "queue gradio.Interface.queue(···) Description 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. Example Usage demo = gr.Interface(image_generator, gr.Textbox(), gr.Image()) demo.queue(max_size=20) demo.launch() Parameters ▼ status_update_rate: float | Literal['auto'] default = 'auto' If 'auto', Queue will send status estimations to all clients whenever a job is finished. Otherwise Queue will send status at regular intervals set by this parameter as the number of seconds. api_open: bool | None default = None If True, the REST routes of the backend will be open, allowing requests made directly to those endpoints to skip the queue. max_size: int | None default = None The maximum number of events the queue will store at any given moment. If the queue is full, new events will not be added and a user will receive a message saying that the queue is full. If None, the queue size will be unlimited. default_concurrency_limit: int | None | Literal['not_set'] default = 'not_set' The default value of `concurrency_limit` to use for event listeners that don't specify a value. Can be set by environment variable GRADIO_DEFAULT_CONCURRENCY_LIMIT. Defaults to 1 if not set otherwise."
  },
  {
   "name": "ChatInterface",
   "url": "https://www.gradio.app/docs/gradio/chatinterface",
   "content": "ChatInterface gradio.ChatInterface(fn, type='messages', ···) Description 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. Example Usage Basic Example: A chatbot that echoes back the users's message import gradio as gr def echo(message, history): return message demo = gr.ChatInterface(fn=echo, type='messages', examples=['hello', 'hola', 'merhaba'], title='Echo Bot') demo.launch() Custom Chatbot: A gr.ChatInterface with a custom gr.Chatbot that includes a placeholder as well as upvote/downvote buttons. The upvote/downvote buttons are automatically added when a .like() event is attached to a gr.Chatbot. In order to attach event listeners to your custom chatbot, wrap the gr.Chatbot as well as the gr.ChatInterface inside of a gr.Blocks like this: import gradio as gr def yes(message, history): return 'yes' def vote(data: gr.LikeData): if data.liked: print('You upvoted this response: ' + data.value['value']) else: print('You downvoted this response: ' + data.value['value']) with gr.Blocks() as demo: chatbot = gr.Chatbot(placeholder='<strong>Your Personal Yes-Man</strong><br>Ask Me Anything') chatbot.like(vote, None, None) gr.ChatInterface(fn=yes, type='messages', chatbot=chatbot) demo.launch() Initialization Parameters ▼ fn: Callable the function to wrap the chat interface around. Should accept two parameters: a string input message and list of two-element lists of the form [[user_message, bot_message], ...] representing the chat history, and return a string response. See the Chatbot documentation for more information on the chat history format. multimodal: bool default = False if True, the chat interface will use a gr.MultimodalTextbox component for the input, which allows for the uploading of multimedia files. If False, the chat interface will use a gr.Textbox component for the input. type: Literal['messages', 'tuples'] default = 'tuples' The format of the messages passed into the chat history parameter of `fn`. If 'messages', passes the value as a list of dictionaries with openai-style 'role' and 'content' keys. The 'content' key's value should be one of the following - (1) strings in valid Markdown (2) a dictionary with a 'path' key and value corresponding to the file to display or (3) an instance of a Gradio component. At the moment Image, Plot, Video, Gallery, Audio, and HTML are supported. The 'role' key should be one of 'user' or 'assistant'. Any other roles will not be displayed in the output. If this parameter is 'tuples', expects a `list[list[str | None | tuple]]`, i.e. a list of lists. The inner list should have 2 elements: the user message and the response message, but this format is deprecated. chatbot: Chatbot | None default = None an instance of the gr.Chatbot component to use for the chat interface, if you would like to customize the chatbot properties. If not provided, a default gr.Chatbot component will be created. textbox: Textbox | MultimodalTextbox | None default = None an instance of the gr.Textbox or gr.MultimodalTextbox component to use for the chat interface, if you would like to customize the textbox properties. If not provided, a default gr.Textbox or gr.MultimodalTextbox component will be created. additional_inputs: str | Component | list[str | Component] | None default = None an instance or list of instances of gradio components (or their string shortcuts) to use as additional inputs to the chatbot. If components are not already rendered in a surrounding Blocks, then the components will be displayed under the chatbot, in an accordion. additional_inputs_accordion: str | Accordion | None default = None if a string is provided, this is the label of the `gr.Accordion` to use to contain additional inputs. A `gr.Accordion` object can be provided as well to configure other properties of the container holding the additional inputs. Defaults to a `gr.Accordion(label='Additional Inputs', open=False)`. This parameter is only used if `additional_inputs` is provided. examples: list[str] | list[MultimodalValue] | list[list] | None default = None sample inputs for the function; if provided, appear within the chatbot and can be clicked to populate the chatbot input. Should be a list of strings if `multimodal` is False, and a list of dictionaries (with keys `text` and `files`) if `multimodal` is True. Should also include values for the additional inputs if they are provided. example_labels: list[str] | None default = None labels for the examples, to be displayed instead of the examples themselves. If provided, should be a list of strings with the same length as the examples list. example_icons: list[str] | None default = None icons for the examples, to be displayed above the examples. If provided, should be a list of string URLs or local paths with the same length as the examples list. cache_examples: bool | None default = None if True, caches examples in the server for fast runtime in examples. The default option in HuggingFace Spaces is True. The default option elsewhere is False. cache_mode: Literal['eager', 'lazy'] | None default = None If 'lazy', then examples are cached (for all users of the app) after their first use (by any user of the app). If 'eager', all examples are cached at app launch. If None, will use the GRADIO_CACHE_MODE environment variable if defined, or default to 'eager'. title: str | None default = None a title for the interface; if provided, appears above chatbot in large font. Also used as the tab title when opened in a browser window. description: str | None default = None a description for the interface; if provided, appears above the chatbot and beneath the title in regular font. Accepts Markdown and HTML content. theme: Theme | str | None default = None a Theme object or a string representing a theme. If a string, will look for a built-in theme with that name (e.g. 'soft' or 'default'), or will attempt to load a theme from the Hugging Face Hub (e.g. 'gradio/monochrome'). If None, will use the Default theme. css: str | None default = None Custom css as a code string. This css will be included in the demo webpage. css_paths: str | Path | list[str | Path] | None default = None Custom css as a pathlib.Path to a css file or a list of such paths. This css files will be read, concatenated, and included in the demo webpage. If the `css` parameter is also set, the css from `css` will be included first. js: str | None default = None Custom js as a code string. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags. head: str | None default = None Custom html code to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page. head_paths: str | Path | list[str | Path] | None default = None Custom html code as a pathlib.Path to a html file or a list of such paths. This html files will be read, concatenated, and included in the head of the demo webpage. If the `head` parameter is also set, the html from `head` will be included first. analytics_enabled: bool | None default = None whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to True. autofocus: bool default = True if True, autofocuses to the textbox when the page loads. autoscroll: bool default = True If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes. concurrency_limit: int | None | Literal['default'] default = 'default' if set, this is the maximum number of chatbot submissions that can be running simultaneously. Can be set to None to mean no limit (any number of chatbot submissions can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `.queue()`, which is 1 by default). fill_height: bool default = True if True, the chat interface will expand to the height of window. delete_cache: tuple[int, int] | None default = None a tuple corresponding [frequency, age] both expressed in number of seconds. Every `frequency` seconds, the temporary files created by this Blocks instance will be deleted if more than `age` seconds have passed since the file was created. For example, setting this to (86400, 86400) will delete temporary files every day. The cache will be deleted entirely when the server restarts. If None, no cache deletion will occur. show_progress: Literal['full', 'minimal', 'hidden'] default = 'minimal' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all fill_width: bool default = False Whether to horizontally expand to fill container fully. If False, centers and constrains app to a maximum width. submit_btn: str | bool | None default = True If True, will show a submit button with a submit icon within the textbox. If a string, will use that string as the submit button text in place of the icon. If False, will not show a submit button. stop_btn: str | bool | None default = True If True, will show a button with a stop icon during generator executions, to stop generating. If a string, will use that string as the submit button text in place of the stop icon. If False, will not show a stop button. Demos chatinterface_multimodal chatinterface_random_response chatinterface_streaming_echo Open in 🎢 ↗ Guides Creating A Chatbot Fast Sharing Your App"
  },
  {
   "name": "TabbedInterface",
   "url": "https://www.gradio.app/docs/gradio/tabbedinterface",
   "content": "TabbedInterface gradio.TabbedInterface(interface_list, ···) Description 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. Initialization Parameters ▼ interface_list: list[Blocks] A list of Interfaces (or Blocks) to be rendered in the tabs. tab_names: list[str] | None default = None A list of tab names. If None, the tab names will be 'Tab 1', 'Tab 2', etc. title: str | None default = None The tab title to display when this demo is opened in a browser window. theme: Theme | str | None default = None A Theme object or a string representing a theme. If a string, will look for a built-in theme with that name (e.g. 'soft' or 'default'), or will attempt to load a theme from the Hugging Face Hub (e.g. 'gradio/monochrome'). If None, will use the Default theme. analytics_enabled: bool | None default = None Whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True. css: str | None default = None Custom css as a string or path to a css file. This css will be included in the demo webpage. js: str | None default = None Custom js as a string or path to a js file. The custom js should in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags. head: str | None default = None Custom html to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page. Demos tabbed_interface_lite Open in 🎢 ↗"
  },
  {
   "name": "Blocks",
   "url": "https://www.gradio.app/docs/gradio/blocks",
   "content": "unload gradio.Blocks.unload(fn, ···) Description 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. Example Usage import gradio as gr with gr.Blocks() as demo: gr.Markdown('# When you close the tab, hello will be printed to the console') demo.unload(lambda: print('hello')) demo.launch() Parameters ▼ fn: Callable[..., Any] Callable function to run to clear resources. The function should not take any arguments and the output is not used."
  },
  {
   "name": "render",
   "url": "https://www.gradio.app/docs/gradio/render",
   "content": "render @gr.render(inputs=···) def hello(···): ... Description 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. The basic usage of @gr.render is as follows: 1. Create a function and attach the @gr.render decorator to it. 2. Add the input components to the inputs= argument of @gr.render, and create a corresponding argument in your function for each component. 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. Example Usage import gradio as gr with gr.Blocks() as demo: input_text = gr.Textbox() @gr.render(inputs=input_text) def show_split(text): if len(text) == 0: gr.Markdown('## No Input Provided') else: for letter in text: with gr.Row(): text = gr.Textbox(letter) btn = gr.Button('Clear') btn.click(lambda: gr.Textbox(value=''), None, text) Initialization Parameters ▼ inputs: list[Component] | Component | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. triggers: list[EventListenerCallable] | EventListenerCallable | None default = None List of triggers to listen to, e.g. [btn.click, number.change]. If None, will listen to changes to any inputs. queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = 'always_last' If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. concurrency_limit: int | None | Literal['default'] default = None If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. Guides Dynamic Apps with the Render Decorator"
  },
  {
   "name": "Accordion",
   "url": "https://www.gradio.app/docs/gradio/accordion",
   "content": "collapse gradio.Accordion.collapse(···) Description This listener is triggered when the Accordion is collapsed. Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Column",
   "url": "https://www.gradio.app/docs/gradio/column",
   "content": "Column gradio.Column(···) Description 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. Example Usage with gr.Blocks() as demo: with gr.Row(): with gr.Column(scale=1): text1 = gr.Textbox() text2 = gr.Textbox() with gr.Column(scale=4): btn1 = gr.Button('Button 1') btn2 = gr.Button('Button 2') Initialization Parameters ▼ scale: int default = 1 relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B. min_width: int default = 320 minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first. variant: Literal['default', 'panel', 'compact'] default = 'default' column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap). visible: bool default = True If False, column will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. show_progress: bool default = False If True, shows progress animation when being updated. Guides Controlling Layout"
  },
  {
   "name": "Group",
   "url": "https://www.gradio.app/docs/gradio/group",
   "content": "Group gradio.Group(···) Description Group is a layout element within Blocks which groups together children so that they do not have any padding or margin between them. Example Usage with gr.Group(): gr.Textbox(label='First') gr.Textbox(label='Last') Initialization Parameters ▼ visible: bool default = True If False, group will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later."
  },
  {
   "name": "Row",
   "url": "https://www.gradio.app/docs/gradio/row",
   "content": "Row gradio.Row(···) Description Row is a layout element within Blocks that renders all children horizontally. Example Usage with gr.Blocks() as demo: with gr.Row(): gr.Image('lion.jpg', scale=2) gr.Image('tiger.jpg', scale=1) demo.launch() Initialization Parameters ▼ variant: Literal['default', 'panel', 'compact'] default = 'default' row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap). visible: bool default = True If False, row will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. height: int | str | None default = None The height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will scroll vertically. If not set, the row will expand to fit the content. max_height: int | str | None default = None The maximum height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will scroll vertically. If content is shorter than the height, the row will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`. min_height: int | str | None default = None The minimum height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`. equal_height: bool default = False If True, makes every child element have equal height show_progress: bool default = False If True, shows progress animation when being updated. Guides Controlling Layout"
  },
  {
   "name": "Tab",
   "url": "https://www.gradio.app/docs/gradio/tab",
   "content": "select gradio.Tab.select(···) Description 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 Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Introduction",
   "url": "https://www.gradio.app/docs/gradio/introduction",
   "content": "Components Introduction Gradio includes pre-built components that can be used as inputs or outputs in your Interface or Blocks with a single line of code. Components include preprocessing steps that convert user data submitted through browser to something that be can used by a Python function, and postprocessing steps to convert values returned by a Python function into something that can be displayed in a browser. Consider an example with three inputs (Textbox, Number, and Image) and two outputs (Number and Gallery), below is a diagram of what our preprocessing will send to the function and what our postprocessing will require from it. Events Components also come with certain events that they support. These are methods that are triggered with user actions. Below is a table showing which events are supported for each component. All events are also listed (with parameters) in the component's docs. retryundoinputreleasefocusdeleteclickstart_recordingapplydownloadclearexample_selectdouble_clicktickchangeblurselectstreamkey_uplikestoppauseeditsubmituploadpause_recordingstop_recordingendplay AnnotatedImage Audio Button Chatbot Checkbox CheckboxGroup ClearButton Code ColorPicker Dataframe Dataset DateTime DownloadButton Dropdown DuplicateButton File FileExplorer Gallery HighlightedText HTML Image ImageEditor JSON Label LoginButton Markdown Model3D MultimodalTextbox BarPlot LinePlot ScatterPlot Number ParamViewer Plot Radio Slider State Textbox Timer UploadButton Video SimpleImage ✕"
  },
  {
   "name": "AnnotatedImage",
   "url": "https://www.gradio.app/docs/gradio/annotatedimage",
   "content": "AnnotatedImage gradio.AnnotatedImage(···) Description 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. Behavior As input component: Passes its value as a tuple consisting of a str filepath to a base image and list of annotations. Each annotation itself is tuple of a mask (as a str filepath to image) and a str label. Your function should accept one of these types: def predict( value: tuple[str, list[tuple[str, str]]] | None ) ... As output component: Expects a a tuple of a base image and list of annotations: a tuple[Image, list[Annotation]]. The Image itself can be str filepath, numpy.ndarray, or PIL.Image. Each Annotation is a tuple[Mask, str]. The Mask can be either a tuple of 4 int's representing the bounding box coordinates (x1, y1, x2, y2), or 0-1 confidence mask in the form of a numpy.ndarray of the same shape as the image, while the second element of the Annotation tuple is a str label. Your function should return one of these types: def predict(···) -> tuple[np.ndarray | PIL.Image.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None ... return value Initialization Parameters ▼ value: tuple[np.ndarray | PIL.Image.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None default = None Tuple of base image and list of (annotation, label) pairs. format: str default = 'webp' Format used to save images before it is returned to the front end, such as 'jpeg' or 'png'. This parameter only takes effect when the base image is returned from the prediction function as a numpy array or a PIL Image. The format should be supported by the PIL library. show_legend: bool default = True If True, will show a legend of the annotations. height: int | str | None default = None The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image. width: int | str | None default = None The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image. color_map: dict[str, str] | None default = None A dictionary mapping labels to colors. The colors must be specified as hex codes. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None Relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer. min_width: int default = 160 Minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. show_fullscreen_button: bool default = True If True, will show a button to allow the image to be viewed in fullscreen mode. Shortcuts Class Interface String Shortcut Initialization gradio.AnnotatedImage 'annotatedimage' Uses default values Demos image_segmentation Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The AnnotatedImage component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description AnnotatedImage.select(fn, ···) Event listener for when the user selects or deselects the AnnotatedImage. Uses event data gradio.SelectData to carry value referring to the label of the AnnotatedImage, and selected to refer to state of the AnnotatedImage. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Audio",
   "url": "https://www.gradio.app/docs/gradio/audio",
   "content": "Audio gradio.Audio(···) Description Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output). Behavior As input component: passes audio as one of these formats (depending on type): a str filepath, or tuple of (sample rate in Hz, audio data as numpy array). If the latter, the audio data is a 16-bit int array whose values range from -32768 to 32767 and shape of the audio data array is (samples,) for mono audio or (samples, channels) for multi-channel audio. Your function should accept one of these types: def predict( value: str | tuple[int, np.ndarray] | None ) ... As output component: expects audio data in any of these formats: a str or pathlib.Path filepath or URL to an audio file, or a bytes object (recommended for streaming), or a tuple of (sample rate in Hz, audio data as numpy array). Note: if audio is supplied as a numpy array, the audio will be normalized by its peak value to avoid distortion or clipping in the resulting audio. Your function should return one of these types: def predict(···) -> str | Path | bytes | tuple[int, np.ndarray] | None ... return value Initialization Parameters ▼ value: str | Path | tuple[int, np.ndarray] | Callable | None default = None A path, URL, or [sample_rate, numpy array] tuple (sample rate in Hz, audio data as a float or int numpy array) for the default value that Audio component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component. sources: list[Literal['upload', 'microphone']] | Literal['upload', 'microphone'] | None default = None A list of sources permitted for audio. 'upload' creates a box where user can drop an audio file, 'microphone' creates a microphone input. The first element in the list will be used as the default source. If None, defaults to ['upload', 'microphone'], or ['microphone'] if `streaming` is True. type: Literal['numpy', 'filepath'] default = 'numpy' The format the audio file is converted to before being passed into the prediction function. 'numpy' converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), 'filepath' passes a str path to a temporary file containing the audio. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None Relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer. min_width: int default = 160 Minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None If True, will allow users to upload and edit an audio file. If False, can only be used to play audio. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. streaming: bool default = False If set to True when used in a `live` interface as an input, will automatically stream webcam feed. When used set as an output, takes audio chunks yield from the backend and combines them into one streaming audio output. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. format: Literal['wav', 'mp3'] | None default = None the file extension with which to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. This parameter applies both when this component is used as an input (and `type` is 'filepath') to determine which file format to convert user-provided audio to, and when this component is used as an output to determine the format of audio returned to the user. If None, no file format conversion is done and the audio is kept as is. In the case where output audio is returned from the prediction function as numpy array and no `format` is provided, it will be returned as a 'wav' file. autoplay: bool default = False Whether to automatically play the audio when the component is used as an output. Note: browsers will not autoplay audio files if the user has not interacted with the page yet. show_download_button: bool | None default = None If True, will show a download button in the corner of the component for saving audio. If False, icon does not appear. By default, it will be True for output components and False for input components. show_share_button: bool | None default = None If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. editable: bool default = True If True, allows users to manipulate the audio file if the component is interactive. Defaults to True. min_length: int | None default = None The minimum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no minimum length. max_length: int | None default = None The maximum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no maximum length. waveform_options: WaveformOptions | dict | None default = None A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options. [See `gr.WaveformOptions` docs](#waveform-options). loop: bool default = False If True, the audio will loop when it reaches the end and continue playing from the beginning. recording: bool default = False If True, the audio component will be set to record audio from the microphone if the source is set to 'microphone'. Defaults to False. Shortcuts Class Interface String Shortcut Initialization gradio.Audio 'audio' Uses default values gradio.Microphone 'microphone' Uses sources=['microphone'] Demos generate_tone reverse_audio Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Audio component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Audio.stream(fn, ···) This listener is triggered when the user streams the Audio. Audio.change(fn, ···) Triggered when the value of the Audio changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Audio.clear(fn, ···) This listener is triggered when the user clears the Audio using the clear button for the component. Audio.play(fn, ···) This listener is triggered when the user plays the media in the Audio. Audio.pause(fn, ···) This listener is triggered when the media in the Audio stops for any reason. Audio.stop(fn, ···) This listener is triggered when the user reaches the end of the media playing in the Audio. Audio.pause(fn, ···) This listener is triggered when the media in the Audio stops for any reason. Audio.start_recording(fn, ···) This listener is triggered when the user starts recording with the Audio. Audio.pause_recording(fn, ···) This listener is triggered when the user pauses recording with the Audio. Audio.stop_recording(fn, ···) This listener is triggered when the user stops recording with the Audio. Audio.upload(fn, ···) This listener is triggered when the user uploads a file into the Audio. Audio.input(fn, ···) This listener is triggered when the user changes the value of the Audio. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'minimal' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Helper Classes WaveformOptions gradio.WaveformOptions(···) Description 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. Initialization Parameters ▼ waveform_color: str | None default = None The color (as a hex string or valid CSS color) of the full waveform representing the amplitude of the audio. Defaults to a light gray color. waveform_progress_color: str | None default = None The color (as a hex string or valid CSS color) that the waveform fills with to as the audio plays. Defaults to the accent color. trim_region_color: str | None default = None The color (as a hex string or valid CSS color) of the trim region. Defaults to the accent color. show_recording_waveform: bool default = True Whether to show the waveform when recording audio. Defaults to True. show_controls: bool default = False Whether to show the standard HTML audio player below the waveform when recording audio or playing recorded audio. Defaults to False. skip_length: int | float default = 5 The percentage (between 0 and 100) of the audio to skip when clicking on the skip forward / skip backward buttons. Defaults to 5. sample_rate: int default = 44100 The output sample rate (in Hz) of the audio after editing. Defaults to 44100. Guides Real Time Speech Recognition"
  },
  {
   "name": "BarPlot",
   "url": "https://www.gradio.app/docs/gradio/barplot",
   "content": "BarPlot gradio.BarPlot(···) Description Creates a bar plot component to display data from a pandas DataFrame. Behavior As input component: The data to display in a line plot. Your function should accept one of these types: def predict( value: AltairPlotData ) ... As output component: Expects a pandas DataFrame containing the data to display in the line plot. The DataFrame should contain at least two columns, one for the x-axis (corresponding to this component's x argument) and one for the y-axis (corresponding to y). Your function should return one of these types: def predict(···) -> pd.DataFrame | None ... return value Initialization Parameters ▼ value: pd.DataFrame | Callable | None default = None The pandas dataframe containing the data to display in the plot. x: str | None default = None Column corresponding to the x axis. Column can be numeric, datetime, or string/category. y: str | None default = None Column corresponding to the y axis. Column must be numeric. color: str | None default = None Column corresponding to series, visualized by color. Column must be string/category. title: str | None default = None The title to display on top of the chart. x_title: str | None default = None The title given to the x axis. By default, uses the value of the x parameter. y_title: str | None default = None The title given to the y axis. By default, uses the value of the y parameter. color_title: str | None default = None The title given to the color legend. By default, uses the value of color parameter. x_bin: str | float | None default = None Grouping used to cluster x values. If x column is numeric, should be number to bin the x values. If x column is datetime, should be string such as '1h', '15m', '10s', using 's', 'm', 'h', 'd' suffixes. y_aggregate: Literal['sum', 'mean', 'median', 'min', 'max', 'count'] | None default = None Aggregation function used to aggregate y values, used if x_bin is provided or x is a string/category. Must be one of 'sum', 'mean', 'median', 'min', 'max'. color_map: dict[str, str] | None default = None Mapping of series to color names or codes. For example, {'success': 'green', 'fail': '#FF8888'}. x_lim: list[float] | None default = None A tuple or list containing the limits for the x-axis, specified as [x_min, x_max]. If x column is datetime type, x_lim should be timestamps. y_lim: list[float] | None default = None A tuple of list containing the limits for the y-axis, specified as [y_min, y_max]. x_label_angle: float default = 0 The angle of the x-axis labels in degrees offset clockwise. y_label_angle: float default = 0 The angle of the y-axis labels in degrees offset clockwise. x_axis_labels_visible: bool default = True Whether the x-axis labels should be visible. Can be hidden when many x-axis labels are present. caption: str | None default = None The (optional) caption to display below the plot. sort: Literal['x', 'y', '-x', '-y'] | list[str] | None default = None The sorting order of the x values, if x column is type string/category. Can be 'x', 'y', '-x', '-y', or list of strings that represent the order of the categories. tooltip: Literal['axis', 'none', 'all'] | list[str] default = 'axis' The tooltip to display when hovering on a point. 'axis' shows the values for the axis columns, 'all' shows all column values, and 'none' shows no tooltips. Can also provide a list of strings representing columns to show in the tooltip, which will be displayed along with axis values. height: int | None default = None The height of the plot in pixels. label: str | None default = None The (optional) label to display on the top left corner of the plot. show_label: bool | None default = None Whether the label should be displayed. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | Set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. visible: bool default = True Whether the plot should be visible. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.BarPlot 'barplot' Uses default values Demos bar_plot_demo Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The BarPlot component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description BarPlot.select(fn, ···) Event listener for when the user selects or deselects the NativePlot. Uses event data gradio.SelectData to carry value referring to the label of the NativePlot, and selected to refer to state of the NativePlot. See EventData documentation on how to use this event data BarPlot.double_click(fn, ···) Triggered when the NativePlot is double clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Button",
   "url": "https://www.gradio.app/docs/gradio/button",
   "content": "Button gradio.Button(···) import gradio as gr with gr.Blocks() as demo: gr.Button() demo.launch() Description 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. Behavior As input component: (Rarely used) the str corresponding to the button label when the button is clicked Your function should accept one of these types: def predict( value: str | None ) ... As output component: string corresponding to the button label Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str | Callable default = 'Run' default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component. every: Timer | float | None default = None continuously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. variant: Literal['primary', 'secondary', 'stop', 'huggingface'] default = 'secondary' sets the background and text color of the button. Use 'primary' for main call-to-action buttons, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for a black background with white text, consistent with Hugging Face's button styles. size: Literal['sm', 'lg'] | None default = None size of the button. Can be 'sm' or 'lg'. icon: str | None default = None URL or path to the icon file to display within the button. If None, no icon will be displayed. link: str | None default = None URL to open when the button is clicked. If None, no link will be used. visible: bool default = True if False, component will be hidden. interactive: bool default = True if False, the Button will be in a disabled state. elem_id: str | None default = None an optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None an optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int | None default = None minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. Shortcuts Class Interface String Shortcut Initialization gradio.Button 'button' Uses default values gradio.ClearButton 'clearbutton' Uses default values gradio.DuplicateButton 'duplicatebutton' Uses default values gradio.LoginButton 'loginbutton' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Button component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Button.click(fn, ···) Triggered when the Button is clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Chatbot",
   "url": "https://www.gradio.app/docs/gradio/chatbot",
   "content": "Chatbot gradio.Chatbot(type='messages', ···) Description 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. Behavior The data format accepted by the Chatbot is dictated by the type parameter. This parameter can take two values, 'tuples' and 'messages'. The 'tuples' type is deprecated and will be removed in a future version of Gradio. Message format If the type is 'messages', then the data sent to/from the chatbot will be a list of dictionaries with role and content keys. This format is compliant with the format expected by most LLM APIs (HuggingChat, OpenAI, Claude). The role key is either 'user' or 'assistant' and the content key can be one of the following: A string (markdown/html is also supported). A dictionary with path and alt_text keys. In this case, the file at path will be displayed in the chat history. Image, audio, and video files are fully embedded and visualized in the chat bubble. The path key can point to a valid publicly available URL. The alt_text key is optional but it's good practice to provide alt text. An instance of another Gradio component. We will show examples for all three cases below - def generate_response(history): # A plain text response history.append( {'role': 'assistant', content='I am happy to provide you that report and plot.'} ) # Embed the quaterly sales report in the chat history.append( {'role': 'assistant', content={'path': 'quaterly_sales.txt', 'alt_text': 'Sales Report for Q2 2024'}} ) # Make a plot of sales data history.append( {'role': 'assistant', content=gr.Plot(value=make_plot_from_file('quaterly_sales.txt'))} ) return history For convenience, you can use the ChatMessage dataclass so that your text editor can give you autocomplete hints and typechecks. from gradio import ChatMessage def generate_response(history): history.append( ChatMessage(role='assistant', content='How can I help you?') ) return history Tuples format If type is 'tuples', then the data sent to/from the chatbot will be a list of tuples. The first element of each tuple is the user message and the second element is the bot's response. Each element can be a string (markdown/html is supported), a tuple (in which case the first element is a filepath that will be displayed in the chatbot), or a gradio component (see the Examples section for more details). Initialization Parameters ▼ value: list[MessageDict | Message] | TupleFormat | Callable | None default = None Default list of messages to show in chatbot, where each message is of the format {'role': 'user', 'content': 'Help me.'}. Role can be one of 'user', 'assistant', or 'system'. Content should be either text, or media passed as a Gradio component, e.g. {'content': gr.Image('lion.jpg')}. If callable, the function will be called whenever the app loads to set the initial value of the component. type: Literal['messages', 'tuples'] | None default = None The format of the messages passed into the chat history parameter of `fn`. If 'messages', passes the value as a list of dictionaries with openai-style 'role' and 'content' keys. The 'content' key's value should be one of the following - (1) strings in valid Markdown (2) a dictionary with a 'path' key and value corresponding to the file to display or (3) an instance of a Gradio component. At the moment Image, Plot, Video, Gallery, Audio, and HTML are supported. The 'role' key should be one of 'user' or 'assistant'. Any other roles will not be displayed in the output. If this parameter is 'tuples', expects a `list[list[str | None | tuple]]`, i.e. a list of lists. The inner list should have 2 elements: the user message and the response message, but this format is deprecated. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. autoscroll: bool default = True If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. height: int | str | None default = 400 The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. max_height: int | str | None default = None The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`. min_height: int | str | None default = None The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`. latex_delimiters: list[dict[str, str | bool]] | None default = None A list of dicts of the form {'left': open delimiter (str), 'right': close delimiter (str), 'display': whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ 'left': '$$', 'right': '$$', 'display': True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html). rtl: bool default = False If True, sets the direction of the rendered text to right-to-left. Default is False, which renders text left-to-right. show_share_button: bool | None default = None If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. show_copy_button: bool default = False If True, will show a copy button for each chatbot message. avatar_images: tuple[str | Path | None, str | Path | None] | None default = None Tuple of two avatar image paths or URLs for user and bot (in that order). Pass None for either the user or bot image to skip. Must be within the working directory of the Gradio app or an external URL. sanitize_html: bool default = True If False, will disable HTML sanitization for chatbot messages. This is not recommended, as it can lead to security vulnerabilities. render_markdown: bool default = True If False, will disable Markdown rendering for chatbot messages. bubble_full_width: bool default = True If False, the chat bubble will fit to the content of the message. If True (default), the chat bubble will be the full width of the component. line_breaks: bool default = True If True (default), will enable Github-flavored Markdown line breaks in chatbot messages. If False, single new lines will be ignored. Only applies if `render_markdown` is True. layout: Literal['panel', 'bubble'] | None default = None If 'panel', will display the chatbot in a llm style layout. If 'bubble', will display the chatbot with message bubbles, with the user and bot messages on alterating sides. Will default to 'bubble'. placeholder: str | None default = None a placeholder message to display in the chatbot when it is empty. Centered vertically and horizontally in the Chatbot. Supports Markdown and HTML. If None, no placeholder is displayed. examples: list[ExampleMessage] | None default = None A list of example messages to display in the chatbot before any user/assistant messages are shown. Each example should be a dictionary with an optional 'text' key representing the message that should be populated in the Chatbot when clicked, an optional 'files' key, whose value should be a list of files to populate in the Chatbot, an optional 'icon' key, whose value should be a filepath or URL to an image to display in the example box, and an optional 'display_text' key, whose value should be the text to display in the example box. If 'display_text' is not provided, the value of 'text' will be displayed. show_copy_all_button: <class 'inspect._empty'> default = False If True, will show a copy all button that copies all chatbot messages to the clipboard. Shortcuts Class Interface String Shortcut Initialization gradio.Chatbot 'chatbot' Uses default values Examples Displaying Thoughts/Tool Usage When type is messages, you can provide additional metadata regarding any tools used to generate the response. This is useful for displaying the thought process of LLM agents. For example, def generate_response(history): history.append( ChatMessage(role='assistant', content='The weather API says it is 20 degrees Celcius in New York.', metadata={'title': '🛠️ Used tool Weather API'}) ) return history Would be displayed as following: You can also specify metadata with a plain python dictionary, def generate_response(history): history.append( dict(role='assistant', content='The weather API says it is 20 degrees Celcius in New York.', metadata={'title': '🛠️ Used tool Weather API'}) ) return history Using Gradio Components Inside gr.Chatbot The Chatbot component supports using many of the core Gradio components (such as gr.Image, gr.Plot, gr.Audio, and gr.HTML) inside of the chatbot. Simply include one of these components in your list of tuples. Here's an example: import gradio as gr def load(): return [ ('Here's an audio', gr.Audio('https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav')), ('Here's an video', gr.Video('https://github.com/gradio-app/gradio/raw/main/demo/video_component/files/world.mp4')) ] with gr.Blocks() as demo: chatbot = gr.Chatbot() button = gr.Button('Load audio and video') button.click(load, None, chatbot) demo.launch() Demos chatbot_simple chatbot_streaming chatbot_with_tools chatbot_core_components Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Chatbot component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Chatbot.change(fn, ···) Triggered when the value of the Chatbot changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Chatbot.select(fn, ···) Event listener for when the user selects or deselects the Chatbot. Uses event data gradio.SelectData to carry value referring to the label of the Chatbot, and selected to refer to state of the Chatbot. See EventData documentation on how to use this event data Chatbot.like(fn, ···) This listener is triggered when the user likes/dislikes from within the Chatbot. This event has EventData of type gradio.LikeData that carries information, accessible through LikeData.index and LikeData.value. See EventData documentation on how to use this event data. Chatbot.retry(fn, ···) This listener is triggered when the user clicks the retry button in the chatbot message. Chatbot.undo(fn, ···) This listener is triggered when the user clicks the undo button in the chatbot message. Chatbot.example_select(fn, ···) This listener is triggered when the user clicks on an example from within the Chatbot. This event has SelectData of type gradio.SelectData that carries information, accessible through SelectData.index and SelectData.value. See SelectData documentation on how to use this event data. Chatbot.clear(fn, ···) This listener is triggered when the user clears the Chatbot using the clear button for the component. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Creating A Chatbot Fast Creating A Custom Chatbot With Blocks Agents And Tool Usage"
  },
  {
   "name": "Checkbox",
   "url": "https://www.gradio.app/docs/gradio/checkbox",
   "content": "Checkbox gradio.Checkbox(···) Description 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. Behavior As input component: Passes the status of the checkbox as a bool. Your function should accept one of these types: def predict( value: bool | None ) ... As output component: Expects a bool value that is set as the status of the checkbox Your function should return one of these types: def predict(···) -> bool | None ... return value Initialization Parameters ▼ value: bool | Callable default = False if True, checked by default. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, this checkbox can be checked; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.Checkbox 'checkbox' Uses default values Demos sentence_builder hello_world_3 Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Checkbox component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Checkbox.change(fn, ···) Triggered when the value of the Checkbox changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Checkbox.input(fn, ···) This listener is triggered when the user changes the value of the Checkbox. Checkbox.select(fn, ···) Event listener for when the user selects or deselects the Checkbox. Uses event data gradio.SelectData to carry value referring to the label of the Checkbox, and selected to refer to state of the Checkbox. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "CheckboxGroup",
   "url": "https://www.gradio.app/docs/gradio/checkboxgroup",
   "content": "CheckboxGroup gradio.CheckboxGroup(···) Description 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. Behavior As input component: Passes the list of checked checkboxes as a list[str | int | float] or their indices as a list[int] into the function, depending on type. Your function should accept one of these types: def predict( value: list[str | int | float] | list[int | None] ) ... As output component: Expects a list[str | int | float] of values or a single str | int | float value, the checkboxes with these values are checked. Your function should return one of these types: def predict(···) -> list[str | int | float] | str | int | float | None ... return value Initialization Parameters ▼ choices: list[str | int | float | tuple[str, str | int | float]] | None default = None A list of string or numeric options to select from. An option can also be a tuple of the form (name, value), where name is the displayed name of the checkbox button and value is the value to be passed to the function, or returned by the function. value: list[str | float | int] | str | float | int | Callable | None default = None Default selected list of options. If a single choice is selected, it can be passed in as a string or numeric type. If callable, the function will be called whenever the app loads to set the initial value of the component. type: Literal['value', 'index'] default = 'value' Type of value to be returned by component. 'value' returns the list of strings of the choices selected, 'index' returns the list of indices of the choices selected. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None If True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None Relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer. min_width: int default = 160 Minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None If True, choices in this checkbox group will be checkable; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.CheckboxGroup 'checkboxgroup' Uses default values Demos sentence_builder Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The CheckboxGroup component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description CheckboxGroup.change(fn, ···) Triggered when the value of the CheckboxGroup changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. CheckboxGroup.input(fn, ···) This listener is triggered when the user changes the value of the CheckboxGroup. CheckboxGroup.select(fn, ···) Event listener for when the user selects or deselects the CheckboxGroup. Uses event data gradio.SelectData to carry value referring to the label of the CheckboxGroup, and selected to refer to state of the CheckboxGroup. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "ClearButton",
   "url": "https://www.gradio.app/docs/gradio/clearbutton",
   "content": "ClearButton gradio.ClearButton(···) import gradio as gr with gr.Blocks() as demo: textbox = gr.Textbox(value='This is some text') gr.ClearButton(textbox) demo.launch() Description 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. Behavior As input component: (Rarely used) the str corresponding to the button label when the button is clicked Your function should accept one of these types: def predict( value: str | None ) ... As output component: string corresponding to the button label Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ components: None | list[Component] | Component default = None value: str default = 'Clear' default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component. every: Timer | float | None default = None continuously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. variant: Literal['primary', 'secondary', 'stop'] default = 'secondary' sets the background and text color of the button. Use 'primary' for main call-to-action buttons, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for a black background with white text, consistent with Hugging Face's button styles. size: Literal['sm', 'lg'] | None default = None size of the button. Can be 'sm' or 'lg'. icon: str | None default = None URL or path to the icon file to display within the button. If None, no icon will be displayed. link: str | None default = None URL to open when the button is clicked. If None, no link will be used. visible: bool default = True if False, component will be hidden. interactive: bool default = True if False, the Button will be in a disabled state. elem_id: str | None default = None an optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None an optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int | None default = None minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. api_name: str | None | Literal['False'] default = None show_api: bool default = False Shortcuts Class Interface String Shortcut Initialization gradio.ClearButton 'clearbutton' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The ClearButton component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description ClearButton.add(fn, ···) Adds a component or list of components to the list of components that will be cleared when the button is clicked. ClearButton.click(fn, ···) Triggered when the Button is clicked. Event Parameters Parameters ▼ components: None | Component | list[Component]"
  },
  {
   "name": "Code",
   "url": "https://www.gradio.app/docs/gradio/code",
   "content": "Code gradio.Code(···) import gradio as gr with gr.Blocks() as demo: gr.Code(language='python', value=''' import gradio as gr def hello(name): return 'hello ' + name interface = gr.Interface(hello, 'text', 'text') interface.launch() ''', interactive=True, lines=6) demo.launch() Description Creates a code editor for viewing code (as an output component), or for entering and editing code (as an input component). Behavior As input component: Passes the code entered as a str. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a str of code. Your function should return one of these types: def predict(···) -> tuple[str] | str | None ... return value Initialization Parameters ▼ value: str | Callable | None default = None Default value to show in the code editor. If callable, the function will be called whenever the app loads to set the initial value of the component. 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 default = None The language to display the code as. Supported languages listed in `gr.Code.languages`. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. lines: int default = 5 Minimum number of visible lines to show in the code editor. max_lines: int | None default = None Maximum number of visible lines to show in the code editor. Defaults to None and will fill the height of the container. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. interactive: bool | None default = None Whether user should be able to enter code or only view it. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. wrap_lines: bool default = False If True, will wrap lines to the width of the container when overflow occurs. Defaults to False. Shortcuts Class Interface String Shortcut Initialization gradio.Code 'code' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Code component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Code.languages(fn, ···) ['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] Code.change(fn, ···) Triggered when the value of the Code changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Code.input(fn, ···) This listener is triggered when the user changes the value of the Code. Code.focus(fn, ···) This listener is triggered when the Code is focused. Code.blur(fn, ···) This listener is triggered when the Code is unfocused/blurred. Event Parameters Parameters ▼"
  },
  {
   "name": "ColorPicker",
   "url": "https://www.gradio.app/docs/gradio/colorpicker",
   "content": "ColorPicker gradio.ColorPicker(···) Description 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. Behavior As input component: Passes selected color value as a hex str into the function. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a hex str returned from function and sets color picker value to it. Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str | Callable | None default = None default text to provide in color picker. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will be rendered as an editable color picker; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.ColorPicker 'colorpicker' Uses default values Demos color_picker Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The ColorPicker component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description ColorPicker.change(fn, ···) Triggered when the value of the ColorPicker changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. ColorPicker.input(fn, ···) This listener is triggered when the user changes the value of the ColorPicker. ColorPicker.submit(fn, ···) This listener is triggered when the user presses the Enter key while the ColorPicker is focused. ColorPicker.focus(fn, ···) This listener is triggered when the ColorPicker is focused. ColorPicker.blur(fn, ···) This listener is triggered when the ColorPicker is unfocused/blurred. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Dataframe",
   "url": "https://www.gradio.app/docs/gradio/dataframe",
   "content": "Dataframe gradio.Dataframe(···) Description 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. Behavior As input component: Passes the uploaded spreadsheet data as a pandas.DataFrame, numpy.array, polars.DataFrame, or native 2D Python list[list] depending on type Your function should accept one of these types: def predict( value: pd.DataFrame | np.ndarray | pl.DataFrame | list[list] ) ... As output component: Expects data any of these formats: pandas.DataFrame, pandas.Styler, numpy.array, polars.DataFrame, list[list], list, or a dict with keys 'data' (and optionally 'headers'), or str path to a csv, which is rendered as the spreadsheet. Your function should return one of these types: def predict(···) -> pd.DataFrame | Styler | np.ndarray | pl.DataFrame | list | list[list] | dict | str | None ... return value Initialization Parameters ▼ value: pd.DataFrame | Styler | np.ndarray | pl.DataFrame | list | list[list] | dict | str | Callable | None default = None Default value to display in the DataFrame. If a Styler is provided, it will be used to set the displayed value in the DataFrame (e.g. to set precision of numbers) if the `interactive` is False. If a Callable function is provided, the function will be called whenever the app loads to set the initial value of the component. headers: list[str] | None default = None List of str header names. If None, no headers are shown. row_count: int | tuple[int, str] default = (1, 'dynamic') Limit number of rows for input and decide whether user can create new rows. The first element of the tuple is an `int`, the row count; the second should be 'fixed' or 'dynamic', the new row behaviour. If an `int` is passed the rows default to 'dynamic' col_count: int | tuple[int, str] | None default = None Limit number of columns for input and decide whether user can create new columns. The first element of the tuple is an `int`, the number of columns; the second should be 'fixed' or 'dynamic', the new column behaviour. If an `int` is passed the columns default to 'dynamic' datatype: str | list[str] default = 'str' Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are 'str', 'number', 'bool', 'date', and 'markdown'. type: Literal['pandas', 'numpy', 'array', 'polars'] default = 'pandas' Type of value to be returned by component. 'pandas' for pandas dataframe, 'numpy' for numpy array, 'polars' for polars dataframe, or 'array' for a Python list of lists. latex_delimiters: list[dict[str, str | bool]] | None default = None A list of dicts of the form {'left': open delimiter (str), 'right': close delimiter (str), 'display': whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ 'left': '$$', 'right': '$$', 'display': True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html). Only applies to columns whose datatype is 'markdown'. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. show_label: bool | None default = None if True, will display label. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. max_height: int | str default = 500 The maximum height of the dataframe, specified in pixels if a number is passed, or in CSS units if a string is passed. If more rows are created than can fit in the height, a scrollbar will appear. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will allow users to edit the dataframe; if False, can only be used to display data. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. wrap: bool default = False If True, the text in table cells will wrap when appropriate. If False and the `column_width` parameter is not set, the column widths will expand based on the cell contents and the table may need to be horizontally scrolled. If `column_width` is set, then any overflow text will be hidden. line_breaks: bool default = True If True (default), will enable Github-flavored Markdown line breaks in chatbot messages. If False, single new lines will be ignored. Only applies for columns of type 'markdown.' column_widths: list[str | int] | None default = None An optional list representing the width of each column. The elements of the list should be in the format '100px' (ints are also accepted and converted to pixel values) or '10%'. If not provided, the column widths will be automatically determined based on the content of the cells. Setting this parameter will cause the browser to try to fit the table within the page width. Shortcuts Class Interface String Shortcut Initialization gradio.Dataframe 'dataframe' Uses default values gradio.Numpy 'numpy' Uses type='numpy' gradio.Matrix 'matrix' Uses type='array' gradio.List 'list' Uses type='array', col_count=1 Demos filter_records matrix_transpose tax_calculator sort_records Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Dataframe component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Dataframe.change(fn, ···) Triggered when the value of the Dataframe changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Dataframe.input(fn, ···) This listener is triggered when the user changes the value of the Dataframe. Dataframe.select(fn, ···) Event listener for when the user selects or deselects the Dataframe. Uses event data gradio.SelectData to carry value referring to the label of the Dataframe, and selected to refer to state of the Dataframe. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Dataset",
   "url": "https://www.gradio.app/docs/gradio/dataset",
   "content": "Dataset gradio.Dataset(···) import gradio as gr with gr.Blocks() as demo: gr.Dataset(components=[gr.Textbox(visible=False)], label='Text Dataset', samples=[ ['The quick brown fox jumps over the lazy dog'], ['Build & share delightful machine learning apps'], ['She sells seashells by the seashore'], ['Supercalifragilisticexpialidocious'], ['Lorem ipsum'], ['That's all folks!'] ], ) demo.launch() Description 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. Behavior As input component: Passes the selected sample either as a list of data corresponding to each input component (if type is 'value') or as an int index (if type is 'index'), or as a tuple of the index and the data (if type is 'tuple'). Your function should accept one of these types: def predict( value: int | list | None ) ... As output component: Expects an int index or list of sample data. Returns the index of the sample in the dataset or None if the sample is not found. Your function should return one of these types: def predict(···) -> list[list] ... return value Initialization Parameters ▼ label: str | None default = None the label for this component, appears above the component. components: list[Component] | list[str] | None default = None Which component types to show in this dataset widget, can be passed in as a list of string names or Components instances. The following components are supported in a Dataset: Audio, Checkbox, CheckboxGroup, ColorPicker, Dataframe, Dropdown, File, HTML, Image, Markdown, Model3D, Number, Radio, Slider, Textbox, TimeSeries, Video component_props: list[dict[str, Any]] | None default = None samples: list[list[Any]] | None default = None a nested list of samples. Each sublist within the outer list represents a data sample, and each element within the sublist represents an value for each component headers: list[str] | None default = None Column headers in the Dataset widget, should be the same len as components. If not provided, inferred from component labels type: Literal['values', 'index', 'tuple'] default = 'values' 'values' if clicking on a sample should pass the value of the sample, 'index' if it should pass the index of the sample, or 'tuple' if it should pass both the index and the value of the sample. samples_per_page: int default = 10 how many examples to show per page. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. proxy_url: str | None default = None The URL of the external Space used to load this component. Set automatically when using `gr.load()`. This should not be set manually. sample_labels: list[str] | None default = None A list of labels for each sample. If provided, the length of this list should be the same as the number of samples, and these labels will be used in the UI instead of rendering the sample values. Shortcuts Class Interface String Shortcut Initialization gradio.Dataset 'dataset' Uses default values Examples Updating a Dataset In this example, we display a text dataset using gr.Dataset and then update it when the user clicks a button: import gradio as gr philosophy_quotes = [ ['I think therefore I am.'], ['The unexamined life is not worth living.'] ] startup_quotes = [ ['Ideas are easy. Implementation is hard'], ['Make mistakes faster.'] ] def show_startup_quotes(): return gr.Dataset(samples=startup_quotes) with gr.Blocks() as demo: textbox = gr.Textbox() dataset = gr.Dataset(components=[textbox], samples=philosophy_quotes) button = gr.Button() button.click(show_startup_quotes, None, dataset) demo.launch() Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Dataset component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Dataset.click(fn, ···) Triggered when the Dataset is clicked. Dataset.select(fn, ···) Event listener for when the user selects or deselects the Dataset. Uses event data gradio.SelectData to carry value referring to the label of the Dataset, and selected to refer to state of the Dataset. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "DateTime",
   "url": "https://www.gradio.app/docs/gradio/datetime",
   "content": "DateTime gradio.DateTime(···) import gradio as gr with gr.Blocks() as demo: gr.DateTime() demo.launch() Description Component to select a date and (optionally) a time. Behavior As input component: Passes text value as a str into the function. Your function should accept one of these types: def predict( value: float | datetime | str | None ) ... As output component: Expects a tuple pair of datetimes. Your function should return one of these types: def predict(···) -> float | datetime | str | None ... return value Initialization Parameters ▼ value: float | str | datetime | None default = None default value for datetime. include_time: bool default = True If True, the component will include time selection. If False, only date selection will be available. type: Literal['timestamp', 'datetime', 'string'] default = 'timestamp' The type of the value. Can be 'timestamp', 'datetime', or 'string'. If 'timestamp', the value will be a number representing the start and end date in seconds since epoch. If 'datetime', the value will be a datetime object. If 'string', the value will be the date entered by the user. timezone: str | None default = None The timezone to use for timestamps, such as 'US/Pacific' or 'Europe/Paris'. If None, the timezone will be the local timezone. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. show_label: bool | None default = None if True, will display label. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: float | None default = None If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.DateTime 'datetime' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The DateTime component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description DateTime.change(fn, ···) Triggered when the value of the DateTime changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. DateTime.submit(fn, ···) This listener is triggered when the user presses the Enter key while the DateTime is focused. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "DownloadButton",
   "url": "https://www.gradio.app/docs/gradio/downloadbutton",
   "content": "DownloadButton gradio.DownloadButton(···) Description Creates a button, that when clicked, allows a user to download a single file of arbitrary type. Behavior As input component: (Rarely used) passes the file as a str into the function. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a str or pathlib.Path filepath Your function should return one of these types: def predict(···) -> str | Path | None ... return value Initialization Parameters ▼ label: str default = 'Download' Text to display on the button. Defaults to 'Download'. value: str | Path | Callable | None default = None A str or pathlib.Path filepath or URL to download, or a Callable that returns a str or pathlib.Path filepath or URL to download. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. variant: Literal['primary', 'secondary', 'stop'] default = 'secondary' 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. visible: bool default = True If False, component will be hidden. size: Literal['sm', 'lg'] | None default = None Size of the button. Can be 'sm' or 'lg'. icon: str | None default = None URL or path to the icon file to display within the button. If None, no icon will be displayed. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int | None default = None minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool default = True If False, the UploadButton will be in a disabled state. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.DownloadButton 'downloadbutton' Uses default values Demos upload_and_download Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The DownloadButton component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description DownloadButton.click(fn, ···) Triggered when the DownloadButton is clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Dropdown",
   "url": "https://www.gradio.app/docs/gradio/dropdown",
   "content": "Dropdown gradio.Dropdown(···) Description 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). Behavior As input component: Passes the value of the selected dropdown choice as a str | int | float or its index as an int into the function, depending on type. Or, if multiselect is True, passes the values of the selected dropdown choices as a list of correspoding values/indices instead. Your function should accept one of these types: def predict( value: str | int | float | list[str | int | float] | list[int | None] | None ) ... As output component: Expects a str | int | float corresponding to the value of the dropdown entry to be selected. Or, if multiselect is True, expects a list of values corresponding to the selected dropdown entries. Your function should return one of these types: def predict(···) -> str | int | float | list[str | int | float] | None ... return value Initialization Parameters ▼ choices: list[str | int | float | tuple[str, str | int | float]] | None default = None a list of string or numeric options to choose from. An option can also be a tuple of the form (name, value), where name is the displayed name of the dropdown choice and value is the value to be passed to the function, or returned by the function. value: str | int | float | list[str | int | float] | Callable | DefaultValue | None default = DefaultValue() the value selected in dropdown. If `multiselect` is true, this should be list, otherwise a single string or number. By default, the first choice is initally selected. If set to None, no value is initally selected. If a callable, the function will be called whenever the app loads to set the initial value of the component. type: Literal['value', 'index'] default = 'value' type of value to be returned by component. 'value' returns the string of the choice selected, 'index' returns the index of the choice selected. multiselect: bool | None default = None if True, multiple choices can be selected. allow_custom_value: bool default = False if True, allows user to enter a custom value that is not in the list of choices. max_choices: int | None default = None maximum number of choices that can be selected. If None, no limit is enforced. filterable: bool default = True if True, user will be able to type into the dropdown and filter the choices by typing. Can only be set to False if `allow_custom_value` is False. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True if True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, choices in this dropdown will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True if False, component will be hidden. elem_id: str | None default = None an optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None an optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True if False, component will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None Shortcuts Class Interface String Shortcut Initialization gradio.Dropdown 'dropdown' Uses default values Demos sentence_builder Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Dropdown component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Dropdown.change(fn, ···) Triggered when the value of the Dropdown changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Dropdown.input(fn, ···) This listener is triggered when the user changes the value of the Dropdown. Dropdown.select(fn, ···) Event listener for when the user selects or deselects the Dropdown. Uses event data gradio.SelectData to carry value referring to the label of the Dropdown, and selected to refer to state of the Dropdown. See EventData documentation on how to use this event data Dropdown.focus(fn, ···) This listener is triggered when the Dropdown is focused. Dropdown.blur(fn, ···) This listener is triggered when the Dropdown is unfocused/blurred. Dropdown.key_up(fn, ···) This listener is triggered when the user presses a key while the Dropdown is focused. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "DuplicateButton",
   "url": "https://www.gradio.app/docs/gradio/duplicatebutton",
   "content": "DuplicateButton gradio.DuplicateButton(···) import gradio as gr with gr.Blocks() as demo: gr.DuplicateButton() demo.launch() Description Button that triggers a Spaces Duplication, when the demo is on Hugging Face Spaces. Does nothing locally. Behavior As input component: (Rarely used) the str corresponding to the button label when the button is clicked Your function should accept one of these types: def predict( value: str | None ) ... As output component: string corresponding to the button label Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str default = 'Duplicate Space' default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component. every: Timer | float | None default = None continuously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. variant: Literal['primary', 'secondary', 'stop', 'huggingface'] default = 'huggingface' sets the background and text color of the button. Use 'primary' for main call-to-action buttons, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for a black background with white text, consistent with Hugging Face's button styles. size: Literal['sm', 'lg'] | None default = 'sm' size of the button. Can be 'sm' or 'lg'. icon: str | None default = None URL or path to the icon file to display within the button. If None, no icon will be displayed. link: str | None default = None URL to open when the button is clicked. If None, no link will be used. visible: bool default = True if False, component will be hidden. interactive: bool default = True if False, the Button will be in a disabled state. elem_id: str | None default = None an optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None an optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. scale: int | None default = 0 relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int | None default = None minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. Shortcuts Class Interface String Shortcut Initialization gradio.DuplicateButton 'duplicatebutton' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The DuplicateButton component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description DuplicateButton.click(fn, ···) Triggered when the Button is clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "File",
   "url": "https://www.gradio.app/docs/gradio/file",
   "content": "File gradio.File(···) import gradio as gr with gr.Blocks() as demo: gr.File() demo.launch() Description 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). Demo: zip_files, zip_to_json Behavior As input component: Passes the file as a str or bytes object, or a list of str or list of bytes objects, depending on type and file_count. Your function should accept one of these types: def predict( value: bytes | str | list[bytes] | list[str] | None ) ... As output component: Expects a str filepath or URL, or a list[str] of filepaths/URLs. Your function should return one of these types: def predict(···) -> str | list[str] | None ... return value Initialization Parameters ▼ value: str | list[str] | Callable | None default = None Default file(s) to display, given as a str file path or URL, or a list of str file paths / URLs. If callable, the function will be called whenever the app loads to set the initial value of the component. file_count: Literal['single', 'multiple', 'directory'] default = 'single' if single, allows user to upload one file. If 'multiple', user uploads multiple files. If 'directory', user uploads all files in selected directory. Return type will be list for each file in case of 'multiple' or 'directory'. file_types: list[str] | None default = None List of file extensions or types of files to be uploaded (e.g. ['image', '.json', '.mp4']). 'file' allows any file to be uploaded, 'image' allows only image files to be uploaded, 'audio' allows only audio files to be uploaded, 'video' allows only video files to be uploaded, 'text' allows only text files to be uploaded. type: Literal['filepath', 'binary'] default = 'filepath' Type of value to be returned by component. 'file' returns a temporary file object with the same base name as the uploaded file, whose full path can be retrieved by file_obj.name, 'binary' returns an bytes object. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. height: int | float | None default = None The default height of the file component when no files have been uploaded, or the maximum height of the file component when files are present. Specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear. interactive: bool | None default = None if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.File 'file' Uses default values gradio.Files 'files' Uses file_count='multiple' Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The File component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description File.change(fn, ···) Triggered when the value of the File changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. File.select(fn, ···) Event listener for when the user selects or deselects the File. Uses event data gradio.SelectData to carry value referring to the label of the File, and selected to refer to state of the File. See EventData documentation on how to use this event data File.clear(fn, ···) This listener is triggered when the user clears the File using the clear button for the component. File.upload(fn, ···) This listener is triggered when the user uploads a file into the File. File.delete(fn, ···) This listener is triggered when the user deletes and item from the File. Uses event data gradio.DeletedFileData to carry value referring to the file that was deleted as an instance of FileData. See EventData documentation on how to use this event data File.download(fn, ···) This listener is triggered when the user downloads a file from the File. Uses event data gradio.DownloadData to carry information about the downloaded file as a FileData object. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "FileExplorer",
   "url": "https://www.gradio.app/docs/gradio/fileexplorer",
   "content": "FileExplorer gradio.FileExplorer(···) Description 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. Behavior As input component: Passes the selected file or directory as a str path (relative to root) or list[str} depending on file_count Your function should accept one of these types: def predict( value: list[str] | str | None ) ... As output component: Expects function to return a str path to a file, or list[str] consisting of paths to files. Your function should return one of these types: def predict(···) -> str | list[str] | None ... return value Initialization Parameters ▼ glob: str default = '**/*' The glob-style pattern used to select which files to display, e.g. '*' to match all files, '*.png' to match all .png files, '**/*.txt' to match any .txt file in any subdirectory, etc. The default value matches all files and folders recursively. See the Python glob documentation at https://docs.python.org/3/library/glob.html for more information. value: str | list[str] | Callable | None default = None The file (or list of files, depending on the `file_count` parameter) to show as 'selected' when the component is first loaded. If a callable is provided, it will be called when the app loads to set the initial value of the component. If not provided, no files are shown as selected. file_count: Literal['single', 'multiple'] default = 'multiple' Whether to allow single or multiple files to be selected. If 'single', the component will return a single absolute file path as a string. If 'multiple', the component will return a list of absolute file paths as a list of strings. root_dir: str | Path default = '.' Path to root directory to select files from. If not provided, defaults to current working directory. ignore_glob: str | None default = None The glob-style, case-sensitive pattern that will be used to exclude files from the list. For example, '*.py' will exclude all .py files from the list. See the Python glob documentation at https://docs.python.org/3/library/glob.html for more information. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. height: int | str | None default = None The maximum height of the file component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear. max_height: int | str | None default = 500 min_height: int | str | None default = None interactive: bool | None default = None if True, will allow users to select file(s); if False, will only display files. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.FileExplorer 'fileexplorer' Uses default values Demos file_explorer Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The FileExplorer component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description FileExplorer.change(fn, ···) Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Gallery",
   "url": "https://www.gradio.app/docs/gradio/gallery",
   "content": "Gallery gradio.Gallery(···) Description Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery. If used as an output, the user can click on individual images or videos to view them at a higher resolution. Behavior As input component: Passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a str file path, a numpy array, or a PIL.Image object depending on type. Videos are always str file path. Your function should accept one of these types: def predict( value: List[tuple[str, str | None]] | List[tuple[PIL.Image.Image, str | None]] | List[tuple[np.ndarray, str | None]] | None ) ... As output component: Expects the function to return a list of images or videos, or list of (media, str caption) tuples. Each image can be a str file path, a numpy array, or a PIL.Image object. Each video can be a str file path. Your function should return one of these types: def predict(···) -> list[GalleryImageType | CaptionedGalleryImageType] | None ... return value Initialization Parameters ▼ value: list[np.ndarray | PIL.Image.Image | str | Path | tuple] | Callable | None default = None List of images or videos to display in the gallery by default. If callable, the function will be called whenever the app loads to set the initial value of the component. format: str default = 'webp' Format to save images before they are returned to the frontend, such as 'jpeg' or 'png'. This parameter only applies to images that are returned from the prediction function as numpy arrays or PIL Images. The format should be supported by the PIL library. file_types: list[str] | None default = None List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. 'image' allows only image files to be uploaded, 'video' allows only video files to be uploaded, '.mp4' allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. columns: int | list[int] | tuple[int, ...] | None default = 2 Represents the number of images that should be shown in one row, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). If fewer than 6 are given then the last will be used for all subsequent breakpoints rows: int | list[int] | None default = None Represents the number of rows in the image grid, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). If fewer than 6 are given then the last will be used for all subsequent breakpoints height: int | float | str | None default = None The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear. allow_preview: bool default = True If True, images in the gallery will be enlarged when they are clicked. Default is True. preview: bool | None default = None If True, Gallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True. selected_index: int | None default = None The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set Gallery to preview mode unless allow_preview is set to False. object_fit: Literal['contain', 'cover', 'fill', 'none', 'scale-down'] | None default = None CSS object-fit property for the thumbnail images in the gallery. Can be 'contain', 'cover', 'fill', 'none', or 'scale-down'. show_share_button: bool | None default = None If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. show_download_button: bool | None default = True If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True. interactive: bool | None default = None If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True. type: Literal['numpy', 'pil', 'filepath'] default = 'filepath' The format the image is converted to before being passed into the prediction function. 'numpy' converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, 'pil' converts the image to a PIL image object, 'filepath' passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned. show_fullscreen_button: bool default = True If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. Shortcuts Class Interface String Shortcut Initialization gradio.Gallery 'gallery' Uses default values Demos fake_gan Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Gallery component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Gallery.select(fn, ···) Event listener for when the user selects or deselects the Gallery. Uses event data gradio.SelectData to carry value referring to the label of the Gallery, and selected to refer to state of the Gallery. See EventData documentation on how to use this event data Gallery.upload(fn, ···) This listener is triggered when the user uploads a file into the Gallery. Gallery.change(fn, ···) Triggered when the value of the Gallery changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "HighlightedText",
   "url": "https://www.gradio.app/docs/gradio/highlightedtext",
   "content": "HighlightedText gradio.HighlightedText(···) Description Displays text that contains spans that are highlighted by category or numerical value. Behavior As input component: Passes the value as a list of tuples as a list[tuple] into the function. Each tuple consists of a str substring of the text (so the entire text is included) and str | float | None label, which is the category or confidence of that substring. Your function should accept one of these types: def predict( value: list[tuple[str, str | float | None]] | None ) ... As output component: Expects a list of (word, category) tuples, or a dictionary of two keys: 'text', and 'entities', which itself is a list of dictionaries, each of which have the keys: 'entity' (or 'entity_group'), 'start', and 'end' Your function should return one of these types: def predict(···) -> list[tuple[str, str | float | None]] | dict | None ... return value Initialization Parameters ▼ value: list[tuple[str, str | float | None]] | dict | Callable | None default = None Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component. color_map: dict[str, str] | None default = None A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {'person': 'red', 'location': '#FFEE22'} show_legend: bool default = False whether to show span categories in a separate legend or inline. show_inline_category: bool default = True If False, will not display span category label. Only applies if show_legend=False and interactive=False. combine_adjacent: bool default = False If True, will merge the labels of adjacent tokens belonging to the same category. adjacent_separator: str default = '' Specifies the separator to be used between tokens if combine_adjacent is True. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. interactive: bool | None default = None If True, the component will be editable, and allow user to select spans of text and label them. Shortcuts Class Interface String Shortcut Initialization gradio.HighlightedText 'highlightedtext' Uses default values Demos diff_texts Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The HighlightedText component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description HighlightedText.change(fn, ···) Triggered when the value of the HighlightedText changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. HighlightedText.select(fn, ···) Event listener for when the user selects or deselects the HighlightedText. Uses event data gradio.SelectData to carry value referring to the label of the HighlightedText, and selected to refer to state of the HighlightedText. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Named Entity Recognition"
  },
  {
   "name": "HTML",
   "url": "https://www.gradio.app/docs/gradio/html",
   "content": "HTML gradio.HTML(···) Description Creates a component to display arbitrary HTML output. As this component does not accept user input, it is rarely used as an input component. Behavior As input component: (Rarely used) passes the HTML as a str. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a str consisting of valid HTML. Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str | Callable | None default = None Default value. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool default = False If True, the label will be displayed. If False, the label will be hidden. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. min_height: int | None default = None The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If HTML content exceeds the height, the component will expand to fit the content. max_height: int | None default = None The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the component will scroll. Shortcuts Class Interface String Shortcut Initialization gradio.HTML 'html' Uses default values Demos blocks_scroll Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The HTML component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description HTML.change(fn, ···) Triggered when the value of the HTML changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Image",
   "url": "https://www.gradio.app/docs/gradio/image",
   "content": "Image gradio.Image(···) Description Creates an image component that can be used to upload images (as an input) or display images (as an output). Behavior As input component: Passes the uploaded image as a numpy.array, PIL.Image or str filepath depending on type. For SVGs, the type parameter is ignored and the filepath of the SVG is returned. Your function should accept one of these types: def predict( value: np.ndarray | PIL.Image.Image | str | None ) ... As output component: Expects a numpy.array, PIL.Image, or str or pathlib.Path filepath to an image which is displayed. Your function should return one of these types: def predict(···) -> np.ndarray | PIL.Image.Image | str | Path | None ... return value Initialization Parameters ▼ value: str | PIL.Image.Image | np.ndarray | Callable | None default = None A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component. format: str default = 'webp' File format (e.g. 'png' or 'gif'). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files. height: int | str | None default = None The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image. width: int | str | None default = None The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image. image_mode: Literal['1', 'L', 'P', 'RGB', 'RGBA', 'CMYK', 'YCbCr', 'LAB', 'HSV', 'I', 'F'] | None default = 'RGB' The pixel format and color depth that the image should be loaded and preprocessed as. 'RGB' will load the image as a color image, or 'L' as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. 'RGBA' for a .png image, 'RGB' in most other cases). sources: list[Literal['upload', 'webcam', 'clipboard']] | Literal['upload', 'webcam', 'clipboard'] | None default = None List of sources for the image. 'upload' creates a box where user can drop an image file, 'webcam' allows user to take snapshot from their webcam, 'clipboard' allows users to paste an image from the clipboard. If None, defaults to ['upload', 'webcam', 'clipboard'] if streaming is False, otherwise defaults to ['webcam']. type: Literal['numpy', 'pil', 'filepath'] default = 'numpy' The format the image is converted before being passed into the prediction function. 'numpy' converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, 'pil' converts the image to a PIL image object, 'filepath' passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned. To support animated GIFs in input, the `type` should be set to 'filepath' or 'pil'. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. show_download_button: bool default = True If True, will display button to download image. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. streaming: bool default = False If True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'. If the component is an output component, will automatically convert images to base64. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. mirror_webcam: bool default = True If True webcam will be mirrored. Default is True. show_share_button: bool | None default = None If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. placeholder: str | None default = None Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading. show_fullscreen_button: bool default = True If True, will show a fullscreen icon in the corner of the component that allows user to view the image in fullscreen mode. If False, icon does not appear. Shortcuts Class Interface String Shortcut Initialization gradio.Image 'image' Uses default values GIF and SVG Image Formats The gr.Image component can process or display any image format that is supported by the PIL library, including animated GIFs. In addition, it also supports the SVG image format. When the gr.Image component is used as an input component, the image is converted into a str filepath, a PIL.Image object, or a numpy.array, depending on the type parameter. However, animated GIF and SVG images are treated differently: Animated GIF images can only be converted to str filepaths or PIL.Image objects. If they are converted to a numpy.array (which is the default behavior), only the first frame will be used. So if your demo expects an input GIF image, make sure to set the type parameter accordingly, e.g. import gradio as gr demo = gr.Interface( fn=lambda x:x, inputs=gr.Image(type='filepath'), outputs=gr.Image() ) demo.launch() For SVG images, the type parameter is ignored altogether and the image is always returned as an image filepath. This is because SVG images cannot be processed as PIL.Image or numpy.array objects. Demos sepia_filter fake_diffusion Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Image component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Image.clear(fn, ···) This listener is triggered when the user clears the Image using the clear button for the component. Image.change(fn, ···) Triggered when the value of the Image changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Image.stream(fn, ···) This listener is triggered when the user streams the Image. Image.select(fn, ···) Event listener for when the user selects or deselects the Image. Uses event data gradio.SelectData to carry value referring to the label of the Image, and selected to refer to state of the Image. See EventData documentation on how to use this event data Image.upload(fn, ···) This listener is triggered when the user uploads a file into the Image. Image.input(fn, ···) This listener is triggered when the user changes the value of the Image. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Image Classification In Pytorch Image Classification In Tensorflow Image Classification With Vision Transformers Create Your Own Friends With A Gan"
  },
  {
   "name": "ImageEditor",
   "url": "https://www.gradio.app/docs/gradio/imageeditor",
   "content": "ImageEditor gradio.ImageEditor(···) Description 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. Behavior As input component: Passes the uploaded images as an instance of EditorValue, which is just a dict with keys: 'background', 'layers', and 'composite'. The values corresponding to 'background' and 'composite' are images, while 'layers' is a list of images. The images are of type PIL.Image, np.array, or str filepath, depending on the type parameter. Your function should accept one of these types: def predict( value: EditorValue | None ) ... As output component: Expects a EditorValue, which is just a dictionary with keys: 'background', 'layers', and 'composite'. The values corresponding to 'background' and 'composite' should be images or None, while layers should be a list of images. Images can be of type PIL.Image, np.array, or str filepath/URL. Or, the value can be simply a single image (ImageType), in which case it will be used as the background. Your function should return one of these types: def predict(···) -> EditorValue | ImageType | None ... return value Initialization Parameters ▼ value: EditorValue | ImageType | None default = None Optional initial image(s) to populate the image editor. Should be a dictionary with keys: `background`, `layers`, and `composite`. The values corresponding to `background` and `composite` should be images or None, while `layers` should be a list of images. Images can be of type PIL.Image, np.array, or str filepath/URL. Or, the value can be a callable, in which case the function will be called whenever the app loads to set the initial value of the component. height: int | str | None default = None The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image files or numpy arrays, but will affect the displayed images. width: int | str | None default = None The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image files or numpy arrays, but will affect the displayed images. image_mode: Literal['1', 'L', 'P', 'RGB', 'RGBA', 'CMYK', 'YCbCr', 'LAB', 'HSV', 'I', 'F'] default = 'RGBA' 'RGB' if color, or 'L' if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. sources: Iterable[Literal['upload', 'webcam', 'clipboard']] | Literal['upload', 'webcam', 'clipboard'] | None default = ('upload', 'webcam', 'clipboard') List of sources that can be used to set the background image. 'upload' creates a box where user can drop an image file, 'webcam' allows user to take snapshot from their webcam, 'clipboard' allows users to paste an image from the clipboard. type: Literal['numpy', 'pil', 'filepath'] default = 'numpy' The format the images are converted to before being passed into the prediction function. 'numpy' converts the images to numpy arrays with shape (height, width, 3) and values from 0 to 255, 'pil' converts the images to PIL image objects, 'filepath' passes images as str filepaths to temporary copies of the images. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. show_download_button: bool default = True If True, will display button to download image. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. placeholder: str | None default = None Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading. mirror_webcam: bool default = True If True webcam will be mirrored. Default is True. show_share_button: bool | None default = None If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. crop_size: tuple[int | float, int | float] | str | None default = None The size of the crop box in pixels. If a tuple, the first value is the width and the second value is the height. If a string, the value must be a ratio in the form `width:height` (e.g. '16:9'). transforms: Iterable[Literal['crop']] default = ('crop',) The transforms tools to make available to users. 'crop' allows the user to crop the image. eraser: Eraser | None | Literal[False] default = None The options for the eraser tool in the image editor. Should be an instance of the `gr.Eraser` class, or None to use the default settings. Can also be False to hide the eraser tool. [See `gr.Eraser` docs](#eraser). brush: Brush | None | Literal[False] default = None The options for the brush tool in the image editor. Should be an instance of the `gr.Brush` class, or None to use the default settings. Can also be False to hide the brush tool, which will also hide the eraser tool. [See `gr.Brush` docs](#brush). format: str default = 'webp' Format to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. This parameter has no effect on SVG files. layers: bool default = True If True, will allow users to add layers to the image. If False, the layers option will be hidden. canvas_size: tuple[int, int] | None default = None The size of the default canvas in pixels. If a tuple, the first value is the width and the second value is the height. If None, the canvas size will be the same as the background image or 800 x 600 if no background image is provided. show_fullscreen_button: bool default = True If True, will display button to view image in fullscreen mode. Shortcuts Class Interface String Shortcut Initialization gradio.ImageEditor 'imageeditor' Uses default values gradio.Sketchpad 'sketchpad' Uses sources=(), brush=Brush(colors=['#000000'], color_mode='fixed') gradio.Paint 'paint' Uses sources=() gradio.ImageMask 'imagemask' Uses brush=Brush(colors=['#000000'], color_mode='fixed') Demos image_editor Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The ImageEditor component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description ImageEditor.clear(fn, ···) This listener is triggered when the user clears the ImageEditor using the clear button for the component. ImageEditor.change(fn, ···) Triggered when the value of the ImageEditor changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. ImageEditor.input(fn, ···) This listener is triggered when the user changes the value of the ImageEditor. ImageEditor.select(fn, ···) Event listener for when the user selects or deselects the ImageEditor. Uses event data gradio.SelectData to carry value referring to the label of the ImageEditor, and selected to refer to state of the ImageEditor. See EventData documentation on how to use this event data ImageEditor.upload(fn, ···) This listener is triggered when the user uploads a file into the ImageEditor. ImageEditor.apply(fn, ···) This listener is triggered when the user applies changes to the ImageEditor through an integrated UI action. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Helper Classes Brush gradio.Brush(···) Description 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. Initialization Parameters ▼ default_size: int | Literal['auto'] default = 'auto' The default radius, in pixels, of the brush tool. Defaults to 'auto' in which case the radius is automatically determined based on the size of the image (generally 1/50th of smaller dimension). colors: Union[list[str], str, None] default = None A list of colors to make available to the user when using the brush. Defaults to a list of 5 colors. default_color: Union[str, Literal['auto']] default = 'auto' The default color of the brush. Defaults to the first color in the `colors` list. color_mode: Literal['fixed', 'defaults'] default = 'defaults' If set to 'fixed', user can only select from among the colors in `colors`. If 'defaults', the colors in `colors` are provided as a default palette, but the user can also select any color using a color picker. Eraser gradio.Eraser(···) Description 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. Initialization Parameters ▼ default_size: int | Literal['auto'] default = 'auto' The default radius, in pixels, of the eraser tool. Defaults to 'auto' in which case the radius is automatically determined based on the size of the image (generally 1/50th of smaller dimension)."
  },
  {
   "name": "JSON",
   "url": "https://www.gradio.app/docs/gradio/json",
   "content": "JSON gradio.JSON(···) Description Used to display arbitrary JSON output prettily. As this component does not accept user input, it is rarely used as an input component. Behavior As input component: Passes the JSON value as a dict or list depending on the value. Your function should accept one of these types: def predict( value: dict | list | None ) ... As output component: Expects a valid JSON str -- or a list or dict that can be serialized to a JSON string. The list or dict value can contain numpy arrays. Your function should return one of these types: def predict(···) -> dict | list | str | None ... return value Initialization Parameters ▼ value: str | dict | list | Callable | None default = None Default value as a valid JSON `str` -- or a `list` or `dict` that can be serialized to a JSON string. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. open: bool default = False If True, all JSON nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed. show_indices: bool default = False Whether to show numerical indices when displaying the elements of a list within the JSON object. height: int | str | None default = None Height of the JSON component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content. max_height: int | str | None default = 500 min_height: int | str | None default = None Shortcuts Class Interface String Shortcut Initialization gradio.JSON 'json' Uses default values Demos zip_to_json blocks_xray Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The JSON component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description JSON.change(fn, ···) Triggered when the value of the JSON changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Label",
   "url": "https://www.gradio.app/docs/gradio/label",
   "content": "Label gradio.Label(···) import gradio as gr with gr.Blocks() as demo: gr.Label(value={'First Label': 0.7, 'Second Label': 0.2, 'Third Label': 0.1}) demo.launch() Description 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. Behavior As input component: Depending on the value, passes the label as a str | int | float, or the labels and confidences as a dict[str, float]. Your function should accept one of these types: def predict( value: dict[str, float] | str | int | float | None ) ... As output component: Expects a dict[str, float] of classes and confidences, or str with just the class or an int | float for regression outputs, or a str path to a .json file containing a json dictionary in one of the preceding formats. Your function should return one of these types: def predict(···) -> dict[str, float] | str | int | float | None ... return value Initialization Parameters ▼ value: dict[str, float] | str | float | Callable | None default = None Default value to show in the component. If a str or number is provided, simply displays the string or number. If a {Dict[str, float]} of classes and confidences is provided, displays the top class on top and the `num_top_classes` below, along with their confidence bars. If callable, the function will be called whenever the app loads to set the initial value of the component. num_top_classes: int | None default = None number of most confident classes to show. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. color: str | None default = None The background color of the label (either a valid css color name or hexadecimal string). Shortcuts Class Interface String Shortcut Initialization gradio.Label 'label' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Label component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Label.change(fn, ···) Triggered when the value of the Label changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Label.select(fn, ···) Event listener for when the user selects or deselects the Label. Uses event data gradio.SelectData to carry value referring to the label of the Label, and selected to refer to state of the Label. See EventData documentation on how to use this event data Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Image Classification In Pytorch Image Classification In Tensorflow Image Classification With Vision Transformers"
  },
  {
   "name": "LinePlot",
   "url": "https://www.gradio.app/docs/gradio/lineplot",
   "content": "LinePlot gradio.LinePlot(···) Description Creates a line plot component to display data from a pandas DataFrame. Behavior As input component: The data to display in a line plot. Your function should accept one of these types: def predict( value: AltairPlotData | None ) ... As output component: Expects a pandas DataFrame containing the data to display in the line plot. The DataFrame should contain at least two columns, one for the x-axis (corresponding to this component's x argument) and one for the y-axis (corresponding to y). Your function should return one of these types: def predict(···) -> pd.DataFrame | dict | None ... return value Initialization Parameters ▼ value: pd.DataFrame | Callable | None default = None The pandas dataframe containing the data to display in the plot. x: str | None default = None Column corresponding to the x axis. Column can be numeric, datetime, or string/category. y: str | None default = None Column corresponding to the y axis. Column must be numeric. color: str | None default = None Column corresponding to series, visualized by color. Column must be string/category. title: str | None default = None The title to display on top of the chart. x_title: str | None default = None The title given to the x axis. By default, uses the value of the x parameter. y_title: str | None default = None The title given to the y axis. By default, uses the value of the y parameter. color_title: str | None default = None The title given to the color legend. By default, uses the value of color parameter. x_bin: str | float | None default = None Grouping used to cluster x values. If x column is numeric, should be number to bin the x values. If x column is datetime, should be string such as '1h', '15m', '10s', using 's', 'm', 'h', 'd' suffixes. y_aggregate: Literal['sum', 'mean', 'median', 'min', 'max', 'count'] | None default = None Aggregation function used to aggregate y values, used if x_bin is provided or x is a string/category. Must be one of 'sum', 'mean', 'median', 'min', 'max'. color_map: dict[str, str] | None default = None Mapping of series to color names or codes. For example, {'success': 'green', 'fail': '#FF8888'}. x_lim: list[float] | None default = None A tuple or list containing the limits for the x-axis, specified as [x_min, x_max]. If x column is datetime type, x_lim should be timestamps. y_lim: list[float] | None default = None A tuple of list containing the limits for the y-axis, specified as [y_min, y_max]. x_label_angle: float default = 0 The angle of the x-axis labels in degrees offset clockwise. y_label_angle: float default = 0 The angle of the y-axis labels in degrees offset clockwise. x_axis_labels_visible: bool default = True Whether the x-axis labels should be visible. Can be hidden when many x-axis labels are present. caption: str | None default = None The (optional) caption to display below the plot. sort: Literal['x', 'y', '-x', '-y'] | list[str] | None default = None The sorting order of the x values, if x column is type string/category. Can be 'x', 'y', '-x', '-y', or list of strings that represent the order of the categories. tooltip: Literal['axis', 'none', 'all'] | list[str] default = 'axis' The tooltip to display when hovering on a point. 'axis' shows the values for the axis columns, 'all' shows all column values, and 'none' shows no tooltips. Can also provide a list of strings representing columns to show in the tooltip, which will be displayed along with axis values. height: int | None default = None The height of the plot in pixels. label: str | None default = None The (optional) label to display on the top left corner of the plot. show_label: bool | None default = None Whether the label should be displayed. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | Set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. visible: bool default = True Whether the plot should be visible. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.LinePlot 'lineplot' Uses default values Demos line_plot_demo Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The LinePlot component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description LinePlot.select(fn, ···) Event listener for when the user selects or deselects the NativePlot. Uses event data gradio.SelectData to carry value referring to the label of the NativePlot, and selected to refer to state of the NativePlot. See EventData documentation on how to use this event data LinePlot.double_click(fn, ···) Triggered when the NativePlot is double clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "LoginButton",
   "url": "https://www.gradio.app/docs/gradio/loginbutton",
   "content": "LoginButton gradio.LoginButton(···) Description Creates a button that redirects the user to Sign with Hugging Face using OAuth. Behavior As input component: (Rarely used) the str corresponding to the button label when the button is clicked Your function should accept one of these types: def predict( value: str | None ) ... As output component: string corresponding to the button label Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str default = 'Sign in with Hugging Face' logout_value: str default = 'Logout ({})' The text to display when the user is signed in. The string should contain a placeholder for the username with a call-to-action to logout, e.g. 'Logout ({})'. every: Timer | float | None default = None inputs: Component | list[Component] | set[Component] | None default = None variant: Literal['primary', 'secondary', 'stop', 'huggingface'] default = 'huggingface' size: Literal['sm', 'lg'] | None default = None icon: str | None default = 'https://huggingface.co/front/assets/huggingface_logo-noborder.svg' link: str | None default = None visible: bool default = True interactive: bool default = True elem_id: str | None default = None elem_classes: list[str] | str | None default = None render: bool default = True key: int | str | None default = None scale: int | None default = None min_width: int | None default = None Shortcuts Class Interface String Shortcut Initialization gradio.LoginButton 'loginbutton' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The LoginButton component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description LoginButton.click(fn, ···) Triggered when the Button is clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Markdown",
   "url": "https://www.gradio.app/docs/gradio/markdown",
   "content": "Markdown gradio.Markdown(···) Description 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. Behavior As input component: Passes the str of Markdown corresponding to the displayed value. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a valid str that can be rendered as Markdown. Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str | Callable | None default = None Value to show in Markdown component. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None This parameter has no effect. rtl: bool default = False If True, sets the direction of the rendered text to right-to-left. Default is False, which renders text left-to-right. latex_delimiters: list[dict[str, str | bool]] | None default = None A list of dicts of the form {'left': open delimiter (str), 'right': close delimiter (str), 'display': whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ 'left': '$$', 'right': '$$', 'display': True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html). visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. sanitize_html: bool default = True If False, will disable HTML sanitization when converted from markdown. This is not recommended, as it can lead to security vulnerabilities. line_breaks: bool default = False If True, will enable Github-flavored Markdown line breaks in chatbot messages. If False (default), single new lines will be ignored. header_links: bool default = False If True, will automatically create anchors for headings, displaying a link icon on hover. height: int | str | None default = None The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will scroll. max_height: int | str | None default = None The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will scroll. If markdown content is shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`. min_height: int | str | None default = None The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`. show_copy_button: bool default = False If True, includes a copy button to copy the text in the Markdown component. Default is False. container: bool default = False If True, the Markdown component will be displayed in a container. Default is False. Shortcuts Class Interface String Shortcut Initialization gradio.Markdown 'markdown' Uses default values Demos blocks_hello blocks_kinematics Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Markdown component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Markdown.change(fn, ···) Triggered when the value of the Markdown changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Model3D",
   "url": "https://www.gradio.app/docs/gradio/model3d",
   "content": "Model3D gradio.Model3D(···) import gradio as gr with gr.Blocks() as demo: gr.Model3D() demo.launch() Description Creates a component allows users to upload or view 3D Model files (.obj, .glb, .stl, .gltf, .splat, or .ply). Behavior As input component: Passes the uploaded file as a str filepath to the function. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects function to return a str or pathlib.Path filepath of type (.obj, .glb, .stl, or .gltf) Your function should return one of these types: def predict(···) -> str | Path | None ... return value Initialization Parameters ▼ value: str | Callable | None default = None path to (.obj, .glb, .stl, .gltf, .splat, or .ply) file to show in model3D viewer. If callable, the function will be called whenever the app loads to set the initial value of the component. display_mode: Literal['solid', 'point_cloud', 'wireframe'] | None default = None the display mode of the 3D model in the scene. Can be 'solid' (which renders the model as a solid object), 'point_cloud', or 'wireframe'. For .splat, or .ply files, this parameter is ignored, as those files can only be rendered as solid objects. clear_color: tuple[float, float, float, float] | None default = None background color of scene, should be a tuple of 4 floats between 0 and 1 representing RGBA values. camera_position: tuple[int | float | None, int | float | None, int | float | None] default = (None, None, None) initial camera position of scene, provided as a tuple of `(alpha, beta, radius)`. Each value is optional. If provided, `alpha` and `beta` should be in degrees reflecting the angular position along the longitudinal and latitudinal axes, respectively. Radius corresponds to the distance from the center of the object to the camera. zoom_speed: float default = 1 the speed of zooming in and out of the scene when the cursor wheel is rotated or when screen is pinched on a mobile device. Should be a positive float, increase this value to make zooming faster, decrease to make it slower. Affects the wheelPrecision property of the camera. pan_speed: float default = 1 the speed of panning the scene when the cursor is dragged or when the screen is dragged on a mobile device. Should be a positive float, increase this value to make panning faster, decrease to make it slower. Affects the panSensibility property of the camera. height: int | str | None default = None The height of the model3D component, specified in pixels if a number is passed, or in CSS units if a string is passed. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. show_label: bool | None default = None if True, will display label. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.Model3D 'model3d' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Model3D component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Model3D.change(fn, ···) Triggered when the value of the Model3D changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Model3D.upload(fn, ···) This listener is triggered when the user uploads a file into the Model3D. Model3D.edit(fn, ···) This listener is triggered when the user edits the Model3D (e.g. image) using the built-in editor. Model3D.clear(fn, ···) This listener is triggered when the user clears the Model3D using the clear button for the component. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides How To Use 3D Model Component"
  },
  {
   "name": "MultimodalTextbox",
   "url": "https://www.gradio.app/docs/gradio/multimodaltextbox",
   "content": "MultimodalTextbox gradio.MultimodalTextbox(···) Description Creates a textarea for users to enter string input or display string output and also allows for the uploading of multimedia files. Behavior As input component: Passes text value and list of file(s) as a dict into the function. Your function should accept one of these types: def predict( value: MultimodalValue | None ) ... As output component: Expects a dict with 'text' and 'files', both optional. The files array is a list of file paths or URLs. Your function should return one of these types: def predict(···) -> MultimodalValue | None ... return value Initialization Parameters ▼ value: str | dict[str, str | list] | Callable | None default = None Default value to show in MultimodalTextbox. A string value, or a dictionary of the form {'text': 'sample text', 'files': [{path: 'files/file.jpg', orig_name: 'file.jpg', url: 'http://image_url.jpg', size: 100}]}. If callable, the function will be called whenever the app loads to set the initial value of the component. file_types: list[str] | None default = None List of file extensions or types of files to be uploaded (e.g. ['image', '.json', '.mp4']). 'file' allows any file to be uploaded, 'image' allows only image files to be uploaded, 'audio' allows only audio files to be uploaded, 'video' allows only video files to be uploaded, 'text' allows only text files to be uploaded. file_count: Literal['single', 'multiple', 'directory'] default = 'single' if single, allows user to upload one file. If 'multiple', user uploads multiple files. If 'directory', user uploads all files in selected directory. Return type will be list for each file in case of 'multiple' or 'directory'. lines: int default = 1 minimum number of line rows to provide in textarea. max_lines: int default = 20 maximum number of line rows to provide in textarea. placeholder: str | None default = None placeholder hint to provide behind textarea. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. autofocus: bool default = False If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users. autoscroll: bool default = True If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. text_align: Literal['left', 'right'] | None default = None How to align the text in the textbox, can be: 'left', 'right', or None (default). If None, the alignment is left if `rtl` is False, or right if `rtl` is True. Can only be changed if `type` is 'text'. rtl: bool default = False If True and `type` is 'text', sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right. submit_btn: str | bool | None default = True If False, will not show a submit button. If a string, will use that string as the submit button text. stop_btn: str | bool | None default = False If True, will show a stop button (useful for streaming demos). If a string, will use that string as the stop button text. Shortcuts Class Interface String Shortcut Initialization gradio.MultimodalTextbox 'multimodaltextbox' Uses default values Demos chatbot_multimodal Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The MultimodalTextbox component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description MultimodalTextbox.change(fn, ···) Triggered when the value of the MultimodalTextbox changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. MultimodalTextbox.input(fn, ···) This listener is triggered when the user changes the value of the MultimodalTextbox. MultimodalTextbox.select(fn, ···) Event listener for when the user selects or deselects the MultimodalTextbox. Uses event data gradio.SelectData to carry value referring to the label of the MultimodalTextbox, and selected to refer to state of the MultimodalTextbox. See EventData documentation on how to use this event data MultimodalTextbox.submit(fn, ···) This listener is triggered when the user presses the Enter key while the MultimodalTextbox is focused. MultimodalTextbox.focus(fn, ···) This listener is triggered when the MultimodalTextbox is focused. MultimodalTextbox.blur(fn, ···) This listener is triggered when the MultimodalTextbox is unfocused/blurred. MultimodalTextbox.stop(fn, ···) This listener is triggered when the user reaches the end of the media playing in the MultimodalTextbox. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Number",
   "url": "https://www.gradio.app/docs/gradio/number",
   "content": "Number gradio.Number(···) Description Creates a numeric field for user to enter numbers as input or display numeric output. Behavior As input component: Passes field value as a float or int into the function, depending on precision. Your function should accept one of these types: def predict( value: float | int | None ) ... As output component: Expects an int or float returned from the function and sets field value to it. Your function should return one of these types: def predict(···) -> float | int | None ... return value Initialization Parameters ▼ value: float | Callable | None default = None default value. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will be editable; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. precision: int | None default = None Precision to round input/output to. If set to 0, will round to nearest integer and convert type to int. If None, no rounding happens. minimum: float | None default = None Minimum value. Only applied when component is used as an input. If a user provides a smaller value, a gr.Error exception is raised by the backend. maximum: float | None default = None Maximum value. Only applied when component is used as an input. If a user provides a larger value, a gr.Error exception is raised by the backend. step: float default = 1 The interval between allowed numbers in the component. Can be used along with optional parameters `minimum` and `maximum` to create a range of legal values starting from `minimum` and incrementing according to this parameter. Shortcuts Class Interface String Shortcut Initialization gradio.Number 'number' Uses default values Demos tax_calculator blocks_simple_squares Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Number component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Number.change(fn, ···) Triggered when the value of the Number changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Number.input(fn, ···) This listener is triggered when the user changes the value of the Number. Number.submit(fn, ···) This listener is triggered when the user presses the Enter key while the Number is focused. Number.focus(fn, ···) This listener is triggered when the Number is focused. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "ParamViewer",
   "url": "https://www.gradio.app/docs/gradio/paramviewer",
   "content": "ParamViewer gradio.ParamViewer(···) import gradio as gr with gr.Blocks() as demo: gr.Markdown('The `round()` function in Python takes two parameters') gr.ParamViewer( { 'number': { 'type': 'int | float', 'description': 'The number to round', 'default': None }, 'ndigits': { 'type': 'int', 'description': 'The number of digits to round to', 'default': '0' } } ) demo.launch() Description 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). Behavior As input component: (Rarely used) passes value as a dict[str, dict]. The key in the outer dictionary is the parameter name, while the inner dictionary has keys 'type', 'description', and 'default' for each parameter. Your function should accept one of these types: def predict( value: dict[str, Parameter] ) ... As output component: Expects value as a dict[str, dict]. The key in the outer dictionary is the parameter name, while the inner dictionary has keys 'type', 'description', and 'default' for each parameter. Your function should return one of these types: def predict(···) -> dict[str, Parameter] ... return value Initialization Parameters ▼ value: dict[str, Parameter] | None default = None A dictionary of dictionaries. The key in the outer dictionary is the parameter name, while the inner dictionary has keys 'type', 'description', and 'default' for each parameter. language: Literal['python', 'typescript'] default = 'python' The language to display the code in. One of 'python' or 'typescript'. linkify: list[str] | None default = None A list of strings to linkify. If any of these strings is found in the description, it will be rendered as a link. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. header: str | None default = 'Parameters' The header to display above the table of parameters, also includes a toggle button that closes/opens all details at once. If None, no header will be displayed. Shortcuts Class Interface String Shortcut Initialization gradio.ParamViewer 'paramviewer' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The ParamViewer component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description ParamViewer.change(fn, ···) Triggered when the value of the ParamViewer changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. ParamViewer.upload(fn, ···) This listener is triggered when the user uploads a file into the ParamViewer. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Plot",
   "url": "https://www.gradio.app/docs/gradio/plot",
   "content": "Plot gradio.Plot(···) Description 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. Behavior As input component: (Rarely used) passes the data displayed in the plot as an PlotData dataclass, which includes the plot information as a JSON string, as well as the type of chart and the plotting library. Your function should accept one of these types: def predict( value: PlotData | None ) ... As output component: Expects plot data in one of these formats: a matplotlib.Figure, bokeh.Model, plotly.Figure, or altair.Chart object. Your function should return one of these types: def predict(···) -> Any ... return value Initialization Parameters ▼ value: Any | None default = None Optionally, supply a default plot object to display, must be a matplotlib, plotly, altair, or bokeh figure, or a callable. If callable, the function will be called whenever the app loads to set the initial value of the component. format: str default = 'webp' File format in which to send matplotlib plots to the front end, such as 'jpg' or 'png'. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.Plot 'plot' Uses default values Demos blocks_kinematics stock_forecast Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Plot component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Plot.change(fn, ···) Triggered when the value of the Plot changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Plot.clear(fn, ···) This listener is triggered when the user clears the Plot using the clear button for the component. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Plot Component For Maps"
  },
  {
   "name": "Radio",
   "url": "https://www.gradio.app/docs/gradio/radio",
   "content": "Radio gradio.Radio(···) Description Creates a set of (string or numeric type) radio buttons of which only one can be selected. Behavior As input component: Passes the value of the selected radio button as a str | int | float, or its index as an int into the function, depending on type. Your function should accept one of these types: def predict( value: str | int | float | None ) ... As output component: Expects a str | int | float corresponding to the value of the radio button to be selected Your function should return one of these types: def predict(···) -> str | int | float | None ... return value Initialization Parameters ▼ choices: list[str | int | float | tuple[str, str | int | float]] | None default = None A list of string or numeric options to select from. An option can also be a tuple of the form (name, value), where name is the displayed name of the radio button and value is the value to be passed to the function, or returned by the function. value: str | int | float | Callable | None default = None The option selected by default. If None, no option is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component. type: Literal['value', 'index'] default = 'value' Type of value to be returned by component. 'value' returns the string of the choice selected, 'index' returns the index of the choice selected. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None Relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer. min_width: int default = 160 Minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None If True, choices in this radio group will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.Radio 'radio' Uses default values Demos sentence_builder blocks_essay Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Radio component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Radio.select(fn, ···) Event listener for when the user selects or deselects the Radio. Uses event data gradio.SelectData to carry value referring to the label of the Radio, and selected to refer to state of the Radio. See EventData documentation on how to use this event data Radio.change(fn, ···) Triggered when the value of the Radio changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Radio.input(fn, ···) This listener is triggered when the user changes the value of the Radio. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "ScatterPlot",
   "url": "https://www.gradio.app/docs/gradio/scatterplot",
   "content": "ScatterPlot gradio.ScatterPlot(···) Description Creates a scatter plot component to display data from a pandas DataFrame. Behavior As input component: The data to display in a line plot. Your function should accept one of these types: def predict( value: AltairPlotData | None ) ... As output component: Expects a pandas DataFrame containing the data to display in the line plot. The DataFrame should contain at least two columns, one for the x-axis (corresponding to this component's x argument) and one for the y-axis (corresponding to y). Your function should return one of these types: def predict(···) -> pd.DataFrame | dict | None ... return value Initialization Parameters ▼ value: pd.DataFrame | Callable | None default = None The pandas dataframe containing the data to display in the plot. x: str | None default = None Column corresponding to the x axis. Column can be numeric, datetime, or string/category. y: str | None default = None Column corresponding to the y axis. Column must be numeric. color: str | None default = None Column corresponding to series, visualized by color. Column must be string/category. title: str | None default = None The title to display on top of the chart. x_title: str | None default = None The title given to the x axis. By default, uses the value of the x parameter. y_title: str | None default = None The title given to the y axis. By default, uses the value of the y parameter. color_title: str | None default = None The title given to the color legend. By default, uses the value of color parameter. x_bin: str | float | None default = None Grouping used to cluster x values. If x column is numeric, should be number to bin the x values. If x column is datetime, should be string such as '1h', '15m', '10s', using 's', 'm', 'h', 'd' suffixes. y_aggregate: Literal['sum', 'mean', 'median', 'min', 'max', 'count'] | None default = None Aggregation function used to aggregate y values, used if x_bin is provided or x is a string/category. Must be one of 'sum', 'mean', 'median', 'min', 'max'. color_map: dict[str, str] | None default = None Mapping of series to color names or codes. For example, {'success': 'green', 'fail': '#FF8888'}. x_lim: list[float] | None default = None A tuple or list containing the limits for the x-axis, specified as [x_min, x_max]. If x column is datetime type, x_lim should be timestamps. y_lim: list[float] | None default = None A tuple of list containing the limits for the y-axis, specified as [y_min, y_max]. x_label_angle: float default = 0 The angle of the x-axis labels in degrees offset clockwise. y_label_angle: float default = 0 The angle of the y-axis labels in degrees offset clockwise. x_axis_labels_visible: bool default = True Whether the x-axis labels should be visible. Can be hidden when many x-axis labels are present. caption: str | None default = None The (optional) caption to display below the plot. sort: Literal['x', 'y', '-x', '-y'] | list[str] | None default = None The sorting order of the x values, if x column is type string/category. Can be 'x', 'y', '-x', '-y', or list of strings that represent the order of the categories. tooltip: Literal['axis', 'none', 'all'] | list[str] default = 'axis' The tooltip to display when hovering on a point. 'axis' shows the values for the axis columns, 'all' shows all column values, and 'none' shows no tooltips. Can also provide a list of strings representing columns to show in the tooltip, which will be displayed along with axis values. height: int | None default = None The height of the plot in pixels. label: str | None default = None The (optional) label to display on the top left corner of the plot. show_label: bool | None default = None Whether the label should be displayed. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | Set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. visible: bool default = True Whether the plot should be visible. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.ScatterPlot 'scatterplot' Uses default values Demos scatter_plot_demo Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The ScatterPlot component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description ScatterPlot.select(fn, ···) Event listener for when the user selects or deselects the NativePlot. Uses event data gradio.SelectData to carry value referring to the label of the NativePlot, and selected to refer to state of the NativePlot. See EventData documentation on how to use this event data ScatterPlot.double_click(fn, ···) Triggered when the NativePlot is double clicked. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "SimpleImage",
   "url": "https://www.gradio.app/docs/gradio/simpleimage",
   "content": "SimpleImage gradio.SimpleImage(···) Description Creates an image component that can be used to upload images (as an input) or display images (as an output). Behavior As input component: A str containing the path to the image. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a str or pathlib.Path object containing the path to the image. Your function should return one of these types: def predict(···) -> str | Path | None ... return value Initialization Parameters ▼ value: str | None default = None A path or URL for the default value that SimpleImage component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. show_download_button: bool default = True If True, will display button to download image. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. Shortcuts Class Interface String Shortcut Initialization gradio.SimpleImage 'simpleimage' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The SimpleImage component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description SimpleImage.clear(fn, ···) This listener is triggered when the user clears the SimpleImage using the clear button for the component. SimpleImage.change(fn, ···) Triggered when the value of the SimpleImage changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. SimpleImage.upload(fn, ···) This listener is triggered when the user uploads a file into the SimpleImage. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Slider",
   "url": "https://www.gradio.app/docs/gradio/slider",
   "content": "Slider gradio.Slider(···) Description Creates a slider that ranges from minimum to maximum with a step size of step. Behavior As input component: Passes slider value as a float into the function. Your function should accept one of these types: def predict( value: float ) ... As output component: Expects an int or float returned from function and sets slider value to it as long as it is within range (otherwise, sets to minimum value). Your function should return one of these types: def predict(···) -> float | None ... return value Initialization Parameters ▼ minimum: float default = 0 minimum value for slider. maximum: float default = 100 maximum value for slider. value: float | Callable | None default = None default value. If callable, the function will be called whenever the app loads to set the initial value of the component. Ignored if randomized=True. step: float | None default = None increment between slider values. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, slider will be adjustable; if False, adjusting will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. randomize: bool default = False If True, the value of the slider when the app loads is taken uniformly at random from the range given by the minimum and maximum. Shortcuts Class Interface String Shortcut Initialization gradio.Slider 'slider' Uses default values Demos sentence_builder slider_release interface_random_slider blocks_random_slider Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Slider component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Slider.change(fn, ···) Triggered when the value of the Slider changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Slider.input(fn, ···) This listener is triggered when the user changes the value of the Slider. Slider.release(fn, ···) This listener is triggered when the user releases the mouse on this Slider. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Create Your Own Friends With A Gan"
  },
  {
   "name": "State",
   "url": "https://www.gradio.app/docs/gradio/state",
   "content": "State gradio.State(···) Description A base class for defining methods that all input/output components should have. Behavior As input component: Passes a value of arbitrary type through. Your function should accept one of these types: def predict( value: Any ) ... As output component: Expects a value of arbitrary type, as long as it can be deepcopied. Your function should return one of these types: def predict(···) -> Any ... return value Initialization Parameters ▼ value: Any default = None the initial value (of arbitrary type) of the state. The provided argument is deepcopied. If a callable is provided, the function will be called whenever the app loads to set the initial value of the state. render: bool default = True has no effect, but is included for consistency with other components. time_to_live: int | float | None default = None The number of seconds the state should be stored for after it is created or updated. If None, the state will be stored indefinitely. Gradio automatically deletes state variables after a user closes the browser tab or refreshes the page, so this is useful for clearing state for potentially long running sessions. delete_callback: Callable[[Any], None] | None default = None A function that is called when the state is deleted. The function should take the state value as an argument. Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The State component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description State.change(fn, ···) Triggered when the value of the State changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Textbox",
   "url": "https://www.gradio.app/docs/gradio/textbox",
   "content": "Textbox gradio.Textbox(···) Description Creates a textarea for user to enter string input or display string output. Behavior As input component: Passes text value as a str into the function. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a str returned from function and sets textarea value to it. Your function should return one of these types: def predict(···) -> str | None ... return value Initialization Parameters ▼ value: str | Callable | None default = None default text to provide in textarea. If callable, the function will be called whenever the app loads to set the initial value of the component. lines: int default = 1 minimum number of line rows to provide in textarea. max_lines: int default = 20 maximum number of line rows to provide in textarea. placeholder: str | None default = None placeholder hint to provide behind textarea. label: str | None default = None the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to. info: str | None default = None additional component description, appears below the label in smaller font. Supports markdown / HTML syntax. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. If False, the copy button is hidden as well as well as the label. container: bool default = True If True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True If False, component will be hidden. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. autofocus: bool default = False If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users. autoscroll: bool default = True If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. type: Literal['text', 'password', 'email'] default = 'text' The type of textbox. One of: 'text', 'password', 'email', Default is 'text'. text_align: Literal['left', 'right'] | None default = None How to align the text in the textbox, can be: 'left', 'right', or None (default). If None, the alignment is left if `rtl` is False, or right if `rtl` is True. Can only be changed if `type` is 'text'. rtl: bool default = False If True and `type` is 'text', sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right. show_copy_button: bool default = False If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True. max_length: int | None default = None maximum number of characters (including newlines) allowed in the textbox. If None, there is no maximum length. submit_btn: str | bool | None default = False If False, will not show a submit button. If True, will show a submit button with an icon. If a string, will use that string as the submit button text. When the submit button is shown, the border of the textbox will be removed, which is useful for creating a chat interface. stop_btn: str | bool | None default = False Shortcuts Class Interface String Shortcut Initialization gradio.Textbox 'textbox' Uses default values gradio.TextArea 'textarea' Uses lines=7 Demos hello_world diff_texts sentence_builder Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Textbox component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Textbox.change(fn, ···) Triggered when the value of the Textbox changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Textbox.input(fn, ···) This listener is triggered when the user changes the value of the Textbox. Textbox.select(fn, ···) Event listener for when the user selects or deselects the Textbox. Uses event data gradio.SelectData to carry value referring to the label of the Textbox, and selected to refer to state of the Textbox. See EventData documentation on how to use this event data Textbox.submit(fn, ···) This listener is triggered when the user presses the Enter key while the Textbox is focused. Textbox.focus(fn, ···) This listener is triggered when the Textbox is focused. Textbox.blur(fn, ···) This listener is triggered when the Textbox is unfocused/blurred. Textbox.stop(fn, ···) This listener is triggered when the user reaches the end of the media playing in the Textbox. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False Guides Real Time Speech Recognition"
  },
  {
   "name": "Timer",
   "url": "https://www.gradio.app/docs/gradio/timer",
   "content": "Timer gradio.Timer(···) Description 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. Behavior As input component: The interval of the timer as a float. Your function should accept one of these types: def predict( value: float | None ) ... As output component: The interval of the timer as a float or None. Your function should return one of these types: def predict(···) -> float | None ... return value Initialization Parameters ▼ value: float default = 1 Interval in seconds between each tick. active: bool default = True Whether the timer is active. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. Shortcuts Class Interface String Shortcut Initialization gradio.Timer 'timer' Uses default values Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Timer component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Timer.tick(fn, ···) This listener is triggered at regular intervals defined by the Timer. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'hidden' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "UploadButton",
   "url": "https://www.gradio.app/docs/gradio/uploadbutton",
   "content": "UploadButton gradio.UploadButton(···) Description 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). Behavior As input component: Passes the file as a str or bytes object, or a list of str or list of bytes objects, depending on type and file_count. Your function should accept one of these types: def predict( value: bytes | str | list[bytes] | list[str] | None ) ... As output component: Expects a str filepath or URL, or a list[str] of filepaths/URLs. Your function should return one of these types: def predict(···) -> str | list[str] | None ... return value Initialization Parameters ▼ label: str default = 'Upload a File' Text to display on the button. Defaults to 'Upload a File'. value: str | list[str] | Callable | None default = None File or list of files to upload by default. every: Timer | float | None default = None Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. variant: Literal['primary', 'secondary', 'stop'] default = 'secondary' 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. visible: bool default = True If False, component will be hidden. size: Literal['sm', 'lg'] | None default = None Size of the button. Can be 'sm' or 'lg'. icon: str | None default = None URL or path to the icon file to display within the button. If None, no icon will be displayed. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int | None default = None minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool default = True If False, the UploadButton will be in a disabled state. elem_id: str | None default = None An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. type: Literal['filepath', 'binary'] default = 'filepath' Type of value to be returned by component. 'file' returns a temporary file object with the same base name as the uploaded file, whose full path can be retrieved by file_obj.name, 'binary' returns an bytes object. file_count: Literal['single', 'multiple', 'directory'] default = 'single' if single, allows user to upload one file. If 'multiple', user uploads multiple files. If 'directory', user uploads all files in selected directory. Return type will be list for each file in case of 'multiple' or 'directory'. file_types: list[str] | None default = None List of type of files to be uploaded. 'file' allows any file to be uploaded, 'image' allows only image files to be uploaded, 'audio' allows only audio files to be uploaded, 'video' allows only video files to be uploaded, 'text' allows only text files to be uploaded. Shortcuts Class Interface String Shortcut Initialization gradio.UploadButton 'uploadbutton' Uses default values Demos upload_and_download upload_button Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The UploadButton component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description UploadButton.click(fn, ···) Triggered when the UploadButton is clicked. UploadButton.upload(fn, ···) This listener is triggered when the user uploads a file into the UploadButton. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "Video",
   "url": "https://www.gradio.app/docs/gradio/video",
   "content": "Video gradio.Video(···) Description 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. Behavior As input component: Passes the uploaded video as a str filepath or URL whose extension can be modified by format. Your function should accept one of these types: def predict( value: str | None ) ... As output component: Expects a str or pathlib.Path filepath to a video which is displayed, or a Tuple[str | pathlib.Path, str | pathlib.Path | None] where the first element is a filepath to a video and the second element is an optional filepath to a subtitle file. Your function should return one of these types: def predict(···) -> str | Path | tuple[str | Path, str | Path | None] | None ... return value Initialization Parameters ▼ value: str | Path | tuple[str | Path, str | Path | None] | Callable | None default = None path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component. format: str | None default = None the file extension with which to save video, such as 'avi' or 'mp4'. This parameter applies both when this component is used as an input to determine which file format to convert user-provided video to, and when this component is used as an output to determine the format of video returned to the user. If None, no file format conversion is done and the video is kept as is. Use 'mp4' to ensure browser playability. sources: list[Literal['upload', 'webcam']] | Literal['upload', 'webcam'] | None default = None list of sources permitted for video. 'upload' creates a box where user can drop a video file, 'webcam' allows user to record a video from their webcam. If None, defaults to both ['upload, 'webcam']. height: int | str | None default = None The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed video file, but will affect the displayed video. width: int | str | None default = None The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed video file, but will affect the displayed video. label: str | None default = None the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. every: Timer | float | None default = None continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Component | list[Component] | set[Component] | None default = None components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. show_label: bool | None default = None if True, will display label. container: bool default = True if True, will place the component in a container - providing some extra padding around the border. scale: int | None default = None relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. min_width: int default = 160 minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. interactive: bool | None default = None if True, will allow users to upload a video; if False, can only be used to display videos. If not provided, this is inferred based on whether the component is used as an input or output. visible: bool default = True if False, component will be hidden. elem_id: str | None default = None an optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: list[str] | str | None default = None an optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. render: bool default = True if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. key: int | str | None default = None if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. mirror_webcam: bool default = True if True webcam will be mirrored. Default is True. include_audio: bool | None default = None whether the component should record/retain the audio track for a video. By default, audio is excluded for webcam videos and included for uploaded videos. autoplay: bool default = False whether to automatically play the video when the component is used as an output. Note: browsers will not autoplay video files if the user has not interacted with the page yet. show_share_button: bool | None default = None if True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. show_download_button: bool | None default = None if True, will show a download icon in the corner of the component that allows user to download the output. If False, icon does not appear. By default, it will be True for output components and False for input components. min_length: int | None default = None the minimum length of video (in seconds) that the user can pass into the prediction function. If None, there is no minimum length. max_length: int | None default = None the maximum length of video (in seconds) that the user can pass into the prediction function. If None, there is no maximum length. loop: bool default = False if True, the video will loop when it reaches the end and continue playing from the beginning. streaming: bool default = False when used set as an output, takes video chunks yielded from the backend and combines them into one streaming video output. Each chunk should be a video file with a .ts extension using an h.264 encoding. Mp4 files are also accepted but they will be converted to h.264 encoding. watermark: str | Path | None default = None an image file to be included as a watermark on the video. The image is not scaled and is displayed on the bottom right of the video. Valid formats for the image are: jpeg, png. Shortcuts Class Interface String Shortcut Initialization gradio.Video 'video' Uses default values gradio.PlayableVideo 'playablevideo' Uses format='mp4' Demos video_identity_2 Open in 🎢 ↗ Event Listeners Description Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called. Supported Event Listeners The Video component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below. Listener Description Video.change(fn, ···) Triggered when the value of the Video changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input. Video.clear(fn, ···) This listener is triggered when the user clears the Video using the clear button for the component. Video.start_recording(fn, ···) This listener is triggered when the user starts recording with the Video. Video.stop_recording(fn, ···) This listener is triggered when the user stops recording with the Video. Video.stop(fn, ···) This listener is triggered when the user reaches the end of the media playing in the Video. Video.play(fn, ···) This listener is triggered when the user plays the media in the Video. Video.pause(fn, ···) This listener is triggered when the media in the Video stops for any reason. Video.end(fn, ···) This listener is triggered when the user reaches the end of the media playing in the Video. Video.upload(fn, ···) This listener is triggered when the user uploads a file into the Video. Event Parameters Parameters ▼ fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None (default), the name of the function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None stream_every: float default = 0.5 like_user_message: bool default = False"
  },
  {
   "name": "EventData",
   "url": "https://www.gradio.app/docs/gradio/eventdata",
   "content": "EventData gradio.EventData(···) Description 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. Example Usage import gradio as gr with gr.Blocks() as demo: table = gr.Dataframe([[1, 2, 3], [4, 5, 6]]) gallery = gr.Gallery([('cat.jpg', 'Cat'), ('dog.jpg', 'Dog')]) textbox = gr.Textbox('Hello World!') statement = gr.Textbox() def on_select(value, evt: gr.EventData): return f'The {evt.target} component was selected, and its value was {value}.' table.select(on_select, table, statement) gallery.select(on_select, gallery, statement) textbox.select(on_select, textbox, statement) demo.launch() Attributes Parameters ▼ target: Block | None The component object that triggered the event. Can be used to distinguish multiple components bound to the same listener. Demos gallery_selections tictactoe Open in 🎢 ↗"
  },
  {
   "name": "DeletedFileData",
   "url": "https://www.gradio.app/docs/gradio/deletedfiledata",
   "content": "DeletedFileData gradio.DeletedFileData(···) Description 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. Example Usage import gradio as gr def test(delete_data: gr.DeletedFileData): return delete_data.file.path with gr.Blocks() as demo: files = gr.File(file_count='multiple') deleted_file = gr.File() files.delete(test, None, deleted_file) demo.launch() Attributes Parameters ▼ file: FileData The file that was deleted, as a FileData object. The str path to the file can be retrieved with the .path attribute. Demos file_component_events Open in 🎢 ↗"
  },
  {
   "name": "KeyUpData",
   "url": "https://www.gradio.app/docs/gradio/keyupdata",
   "content": "KeyUpData gradio.KeyUpData(···) Description 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. Example Usage 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() Attributes Parameters ▼ key: str The key that was pressed. input_value: str The displayed value in the input textbox after the key was pressed. This may be different than the `value` attribute of the component itself, as the `value` attribute of some components (e.g. Dropdown) are not updated until the user presses Enter. Demos dropdown_key_up Open in 🎢 ↗"
  },
  {
   "name": "LikeData",
   "url": "https://www.gradio.app/docs/gradio/likedata",
   "content": "LikeData gradio.LikeData(···) Description 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. Example Usage import gradio as gr def test(value, like_data: gr.LikeData): return { 'chatbot_value': value, 'liked_message': like_data.value, 'liked_index': like_data.index, 'liked_or_disliked_as_bool': like_data.liked } with gr.Blocks() as demo: c = gr.Chatbot([('abc', 'def')]) t = gr.JSON() c.like(test, c, t) demo.launch() Attributes Parameters ▼ index: int | tuple[int, int] The index of the liked/disliked item. Is a tuple if the component is two dimensional. value: Any The value of the liked/disliked item. selected: bool True if the item was liked, False if disliked. Demos chatbot_core_components_simple Open in 🎢 ↗"
  },
  {
   "name": "SelectData",
   "url": "https://www.gradio.app/docs/gradio/selectdata",
   "content": "SelectData gradio.SelectData(···) Description 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. Example Usage import gradio as gr with gr.Blocks() as demo: table = gr.Dataframe([[1, 2, 3], [4, 5, 6]]) gallery = gr.Gallery([('cat.jpg', 'Cat'), ('dog.jpg', 'Dog')]) textbox = gr.Textbox('Hello World!') statement = gr.Textbox() def on_select(evt: gr.SelectData): return f'You selected {evt.value} at {evt.index} from {evt.target}' table.select(on_select, table, statement) gallery.select(on_select, gallery, statement) textbox.select(on_select, textbox, statement) demo.launch() Attributes Parameters ▼ index: int | tuple[int, int] The index of the selected item. Is a tuple if the component is two dimensional or selection is a range. value: Any The value of the selected item. selected: bool True if the item was selected, False if deselected. Demos gallery_selections tictactoe Open in 🎢 ↗"
  },
  {
   "name": "FileData",
   "url": "https://www.gradio.app/docs/gradio/filedata",
   "content": "FileData gradio.FileData(···) Description 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. Example Usage from gradio_client import Client, FileData, handle_file def get_url_on_server(data: FileData): print(data['url']) client = Client('gradio/gif_maker_main', download_files=False) job = client.submit([handle_file('./cheetah.jpg')], api_name='/predict') data = job.result() video: FileData = data['video'] get_url_on_server(video) Attributes Parameters ▼ path: str The server file path where the file is stored. url: Optional[str] The normalized server URL pointing to the file. size: Optional[int] The size of the file in bytes. orig_name: Optional[str] The original filename before upload. mime_type: Optional[str] The MIME type of the file. is_stream: bool Indicates whether the file is a stream. meta: dict Additional metadata used internally (should not be changed)."
  },
  {
   "name": "Progress",
   "url": "https://www.gradio.app/docs/gradio/progress",
   "content": "tqdm gradio.Progress.tqdm(iterable, ···) Description Attaches progress tracker to iterable, like tqdm. Parameters ▼ iterable: Iterable | None iterable to attach progress tracker to. desc: str | None default = None description to display. total: int | None default = None estimated total number of steps. unit: str default = 'steps' unit of iterations."
  },
  {
   "name": "Examples",
   "url": "https://www.gradio.app/docs/gradio/examples",
   "content": "Examples gradio.Examples(···) Description 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. Initialization Parameters ▼ examples: list[Any] | list[list[Any]] | str example inputs that can be clicked to populate specific components. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided but it should be within the directory with the python file running the gradio app. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs. inputs: Component | list[Component] the component or list of components corresponding to the examples outputs: Component | list[Component] | None default = None optionally, provide the component or list of components corresponding to the output of the examples. Required if `cache_examples` is not False. fn: Callable | None default = None optionally, provide the function to run to generate the outputs corresponding to the examples. Required if `cache_examples` is not False. Also required if `run_on_click` is True. cache_examples: bool | None default = None If True, caches examples in the server for fast runtime in examples. If 'lazy', then examples are cached (for all users of the app) after their first use (by any user of the app). If None, will use the GRADIO_CACHE_EXAMPLES environment variable, which should be either 'true' or 'false'. In HuggingFace Spaces, this parameter is True (as long as `fn` and `outputs` are also provided). The default option otherwise is False. cache_mode: Literal['eager', 'lazy'] | None default = None if 'lazy', examples are cached after their first use. If 'eager', all examples are cached at app launch. If None, will use the GRADIO_CACHE_MODE environment variable if defined, or default to 'eager'. examples_per_page: int default = 10 how many examples to show per page. label: str | None default = 'Examples' the label to use for the examples component (by default, 'Examples') elem_id: str | None default = None an optional string that is assigned as the id of this component in the HTML DOM. run_on_click: bool default = False if cache_examples is False, clicking on an example does not run the function when an example is clicked. Set this to True to run the function when an example is clicked. Has no effect if cache_examples is True. preprocess: bool default = True if True, preprocesses the example input before running the prediction function and caching the output. Only applies if `cache_examples` is not False. postprocess: bool default = True if True, postprocesses the example output after running the prediction function and before caching. Only applies if `cache_examples` is not False. api_name: str | Literal[False] default = 'load_example' Defines how the event associated with clicking on the examples appears in the API docs. Can be a string or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use the example function. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. Used only if cache_examples is not False. example_labels: list[str] | None default = None A list of labels for each example. If provided, the length of this list should be the same as the number of examples, and these labels will be used in the UI instead of rendering the example values. visible: bool default = True If False, the examples component will be hidden in the UI. Attributes Parameters ▼ dataset: gradio.Dataset The `gr.Dataset` component corresponding to this Examples object. load_input_event: gradio.events.Dependency The Gradio event that populates the input values when the examples are clicked. You can attach a `.then()` or a `.success()` to this event to trigger subsequent events to fire after this event. cache_event: gradio.events.Dependency | None The Gradio event that populates the cached output values when the examples are clicked. You can attach a `.then()` or a `.success()` to this event to trigger subsequent events to fire after this event. This event is `None` if `cache_examples` if False, and is the same as `load_input_event` if `cache_examples` is `'lazy'`. Examples Updating Examples In this demo, we show how to update the examples by updating the samples of the underlying dataset. Note that this only works if cache_examples=False as updating the underlying dataset does not update the cache. import gradio as gr def update_examples(country): if country == 'USA': return gr.Dataset(samples=[['Chicago'], ['Little Rock'], ['San Francisco']]) else: return gr.Dataset(samples=[['Islamabad'], ['Karachi'], ['Lahore']]) with gr.Blocks() as demo: dropdown = gr.Dropdown(label='Country', choices=['USA', 'Pakistan'], value='USA') textbox = gr.Textbox() examples = gr.Examples([['Chicago'], ['Little Rock'], ['San Francisco']], textbox) dropdown.change(update_examples, dropdown, examples.dataset) demo.launch() Demos calculator_blocks Open in 🎢 ↗ Guides Using Hugging Face Integrations Image Classification In Pytorch Image Classification In Tensorflow Image Classification With Vision Transformers Create Your Own Friends With A Gan"
  },
  {
   "name": "Dependency",
   "url": "https://www.gradio.app/docs/gradio/dependency",
   "content": "Dependency Description 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)"
  },
  {
   "name": "load",
   "url": "https://www.gradio.app/docs/gradio/load",
   "content": "load gradio.load(···) Description 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. Example Usage import gradio as gr demo = gr.load('gradio/question-answering', src='spaces') demo.launch() Initialization Parameters ▼ name: str the name of the model (e.g. 'google/vit-base-patch16-224') or Space (e.g. 'flax-community/spanish-gpt2'). This is the first parameter passed into the `src` function. Can also be formatted as {src}/{repo name} (e.g. 'models/google/vit-base-patch16-224') if `src` is not provided. src: Callable[[str, str | None], Blocks] | Literal['models', 'spaces'] | None default = None function that accepts a string model `name` and a string or None `token` and returns a Gradio app. Alternatively, this parameter takes one of two strings for convenience: 'models' (for loading a Hugging Face model through the Inference API) or 'spaces' (for loading a Hugging Face Space). If None, uses the prefix of the `name` parameter to determine `src`. token: str | None default = None optional token that is passed as the second parameter to the `src` function. For Hugging Face repos, uses the local HF token when loading models but not Spaces (when loading Spaces, only provide a token if you are loading a trusted private Space as the token can be read by the Space you are loading). Find HF tokens here: https://huggingface.co/settings/tokens. hf_token: str | None default = None accept_token: bool default = False if True, a Textbox component is first rendered to allow the user to provide a token, which will be used instead of the `token` parameter when calling the loaded model or Space. kwargs: <class 'inspect._empty'> additional keyword parameters to pass into the `src` function. If `src` is 'models' or 'Spaces', these parameters are passed into the `gr.Interface` or `gr.ChatInterface` constructor."
  },
  {
   "name": "on",
   "url": "https://www.gradio.app/docs/gradio/on",
   "content": "on gradio.on(···) Description 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. Example Usage import gradio as gr with gr.Blocks() as demo: with gr.Row(): input = gr.Textbox() button = gr.Button('Submit') output = gr.Textbox() gr.on( triggers=[button.click, input.submit], fn=lambda x: x, inputs=[input], outputs=[output] ) demo.launch() Initialization Parameters ▼ triggers: list[EventListenerCallable] | EventListenerCallable | None default = None List of triggers to listen to, e.g. [btn.click, number.change]. If None, will run on app load and changes to any inputs. fn: Callable | None | Literal['decorator'] default = 'decorator' the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None default = None List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. api_name: str | None | Literal[False] default = None Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name. scroll_to_output: bool default = False If True, will scroll to output component on completion show_progress: Literal['full', 'minimal', 'hidden'] default = 'full' how to show the progress animation while event is running: 'full' shows a spinner which covers the output component area as well as a runtime display in the upper right corner, 'minimal' only shows the runtime display, 'hidden' shows no progress animation at all queue: bool default = True If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. batch: bool default = False If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. max_batch_size: int default = 4 Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) preprocess: bool default = True If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). postprocess: bool default = True If False, will not run postprocessing of component data before returning 'fn' output to the browser. cancels: dict[str, Any] | list[dict[str, Any]] | None default = None A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. trigger_mode: Literal['once', 'multiple', 'always_last'] | None default = None If 'once' (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to 'multiple', unlimited submissions are allowed while pending, and 'always_last' (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete. js: str | None default = None Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs', return should be a list of values for output components. concurrency_limit: int | None | Literal['default'] default = 'default' If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to 'default' to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default). concurrency_id: str | None default = None If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit. show_api: bool default = True whether to show this event in the 'view API' page of the Gradio app, or in the '.view_api()' method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False. time_limit: int | None default = None The time limit for the function to run. Parameter only used for the `.stream()` event. stream_every: float default = 0.5 The latency (in seconds) at which stream chunks are sent to the backend. Defaults to 0.5 seconds. Parameter only used for the `.stream()` event."
  },
  {
   "name": "set_static_paths",
   "url": "https://www.gradio.app/docs/gradio/set_static_paths",
   "content": "set_static_paths gradio.set_static_paths(···) Description Set the static paths to be served by the gradio app. 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. Example Usage import gradio as gr # Paths can be a list of strings or pathlib.Path objects # corresponding to filenames or directories. gr.set_static_paths(paths=['test/test_files/']) # The example files and the default value of the input # will not be copied to the gradio cache and will be served directly. demo = gr.Interface( lambda s: s.rotate(45), gr.Image(value='test/test_files/cheetah1.jpg', type='pil'), gr.Image(), examples=['test/test_files/bus.png'], ) demo.launch() Initialization Parameters ▼ paths: list[str | Path] List of filepaths or directory names to be served by the gradio app. If it is a directory name, ALL files located within that directory will be considered static and not moved to the gradio cache. This also means that ALL files in that directory will be accessible over the network."
  },
  {
   "name": "Error",
   "url": "https://www.gradio.app/docs/gradio/error",
   "content": "Error raise gradio.Error('An error occurred 💥!', duration=5) Description 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. You can control for how long the error message is displayed with the duration parameter. If it's None, the message will be displayed forever until the user closes it. If it's a number, it will be shown for that many seconds. You can also hide the error modal from being shown in the UI by setting visible=False. Below is a demo of how different values of duration control the error, info, and warning messages. You can see the code here. Example Usage import gradio as gr def divide(numerator, denominator): if denominator == 0: raise gr.Error('Cannot divide by zero!') gr.Interface(divide, ['number', 'number'], 'number').launch() Initialization Parameters ▼ message: str default = 'Error raised.' The error message to be displayed to the user. Can be HTML, which will be rendered in the modal. duration: float | None default = 10 The duration in seconds to display the error message. If None or 0, the error message will be displayed until the user closes it. visible: bool default = True Whether the error message should be displayed in the UI. title: str default = 'Error' The title to be displayed to the user at the top of the error modal. Demos calculator blocks_chained_events Open in 🎢 ↗"
  },
  {
   "name": "Info",
   "url": "https://www.gradio.app/docs/gradio/info",
   "content": "Info gradio.Info('Helpful info message ℹ️', duration=5) Description 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. Example Usage import gradio as gr def hello_world(): gr.Info('This is some info.') return 'hello world' with gr.Blocks() as demo: md = gr.Markdown() demo.load(hello_world, inputs=None, outputs=[md]) demo.queue().launch() Initialization Parameters ▼ message: str default = 'Info issued.' The info message to be displayed to the user. Can be HTML, which will be rendered in the modal. duration: float | None default = 10 The duration in seconds that the info message should be displayed for. If None or 0, the message will be displayed indefinitely until the user closes it. visible: bool default = True Whether the error message should be displayed in the UI. title: str default = 'Info' The title to be displayed to the user at the top of the modal. Demos blocks_chained_events Open in 🎢 ↗"
  },
  {
   "name": "Warning",
   "url": "https://www.gradio.app/docs/gradio/warning",
   "content": "Warning gradio.Warning('A warning occured ⛔️!', duration=5) Description 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. Example Usage import gradio as gr def hello_world(): gr.Warning('This is a warning message.') return 'hello world' with gr.Blocks() as demo: md = gr.Markdown() demo.load(hello_world, inputs=None, outputs=[md]) demo.queue().launch() Initialization Parameters ▼ message: str default = 'Warning issued.' The warning message to be displayed to the user. Can be HTML, which will be rendered in the modal. duration: float | None default = 10 The duration in seconds that the warning message should be displayed for. If None or 0, the message will be displayed indefinitely until the user closes it. visible: bool default = True Whether the error message should be displayed in the UI. title: str default = 'Warning' The title to be displayed to the user at the top of the modal. Demos blocks_chained_events Open in 🎢 ↗"
  },
  {
   "name": "mount_gradio_app",
   "url": "https://www.gradio.app/docs/gradio/mount_gradio_app",
   "content": "mount_gradio_app gradio.mount_gradio_app(···) Description Mount a gradio.Blocks to an existing FastAPI application. Example Usage from fastapi import FastAPI import gradio as gr app = FastAPI() @app.get('/') def read_main(): return {'message': 'This is your main app'} io = gr.Interface(lambda x: 'Hello, ' + x + '!', 'textbox', 'textbox') app = gr.mount_gradio_app(app, io, path='/gradio') Then run uvicorn run:app from the terminal and navigate to http://localhost:8000/gradio. Initialization Parameters ▼ app: fastapi.FastAPI The parent FastAPI application. blocks: gradio.Blocks The blocks object we want to mount to the parent app. path: str The path at which the gradio application will be mounted, e.g. '/gradio'. server_name: str default = '0.0.0.0' The server name on which the Gradio app will be run. server_port: int default = 7860 The port on which the Gradio app will be run. app_kwargs: dict[str, Any] | None default = None Additional keyword arguments to pass to the underlying FastAPI app as a dictionary of parameter keys and argument values. For example, `{'docs_url': '/docs'}` auth: Callable | tuple[str, str] | list[tuple[str, str]] | None default = None If provided, username and password (or list of username-password tuples) required to access the gradio app. Can also provide function that takes username and password and returns True if valid login. auth_message: str | None default = None If provided, HTML message provided on login page for this gradio app. auth_dependency: Callable[[fastapi.Request], str | None] | None default = None A function that takes a FastAPI request and returns a string user ID or None. If the function returns None for a specific request, that user is not authorized to access the gradio app (they will see a 401 Unauthorized response). To be used with external authentication systems like OAuth. Cannot be used with `auth`. root_path: str | None default = None The subpath corresponding to the public deployment of this FastAPI application. For example, if the application is served at 'https://example.com/myapp', the `root_path` should be set to '/myapp'. A full URL beginning with http:// or https:// can be provided, which will be used in its entirety. Normally, this does not need to provided (even if you are using a custom `path`). However, if you are serving the FastAPI app behind a proxy, the proxy may not provide the full path to the Gradio app in the request headers. In which case, you can provide the root path here. allowed_paths: list[str] | None default = None List of complete filepaths or parent directories that this gradio app is allowed to serve. Must be absolute paths. Warning: if you provide directories, any files in these directories or their subdirectories are accessible to all users of your app. blocked_paths: list[str] | None default = None List of complete filepaths or parent directories that this gradio app is not allowed to serve (i.e. users of your app are not allowed to access). Must be absolute paths. Warning: takes precedence over `allowed_paths` and all other directories exposed by Gradio by default. favicon_path: str | None default = None If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for this gradio app's page. show_error: bool default = True If True, any errors in the gradio app will be displayed in an alert modal and printed in the browser console log. Otherwise, errors will only be visible in the terminal session running the Gradio app. max_file_size: str | int | None default = None The maximum file size in bytes that can be uploaded. Can be a string of the form '<value><unit>', where value is any positive integer and unit is one of 'b', 'kb', 'mb', 'gb', 'tb'. If None, no limit is set. ssr_mode: bool | None default = None If True, the Gradio app will be rendered using server-side rendering mode, which is typically more performant and provides better SEO, but this requires Node 20+ to be installed on the system. If False, the app will be rendered using client-side rendering mode. If None, will use GRADIO_SSR_MODE environment variable or default to False. node_server_name: str | None default = None The name of the Node server to use for SSR. If None, will use GRADIO_NODE_SERVER_NAME environment variable or search for a node binary in the system. node_port: int | None default = None The port on which the Node server should run. If None, will use GRADIO_NODE_SERVER_PORT environment variable or find a free port."
  },
  {
   "name": "Request",
   "url": "https://www.gradio.app/docs/gradio/request",
   "content": "Request gradio.Request(···) Description 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 to dictionaries, so we recommend converting them to dictionaries before accessing attributes for consistent behavior in different environments. Example Usage import gradio as gr def echo(text, request: gr.Request): if request: print('Request headers dictionary:', request.headers) print('IP address:', request.client.host) print('Query parameters:', dict(request.query_params)) print('Session hash:', request.session_hash) return text io = gr.Interface(echo, 'textbox', 'textbox').launch() Initialization Parameters ▼ request: fastapi.Request | None default = None A fastapi.Request username: str | None default = None The username of the logged in user (if auth is enabled) session_hash: str | None default = None The session hash of the current session. It is unique for each page load. Demos request_ip_headers Open in 🎢 ↗"
  },
  {
   "name": "Flagging",
   "url": "https://www.gradio.app/docs/gradio/flagging",
   "content": "Flagging Description A Gradio Interface includes a ‘Flag' button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of FlaggingCallback to the flagging_callback parameter in the Interface constructor. You can use one of the FlaggingCallback subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged. SimpleCSVLogger gradio.SimpleCSVLogger(···) Description 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. Example Usage import gradio as gr def image_classifier(inp): return {'cat': 0.3, 'dog': 0.7} demo = gr.Interface(fn=image_classifier, inputs='image', outputs='label', flagging_callback=SimpleCSVLogger()) CSVLogger gradio.CSVLogger(···) Description 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. Example Usage import gradio as gr def image_classifier(inp): return {'cat': 0.3, 'dog': 0.7} demo = gr.Interface(fn=image_classifier, inputs='image', outputs='label', flagging_callback=CSVLogger()) Initialization Parameters ▼ simplify_file_data: bool default = True If True, the file data will be simplified before being written to the CSV file. If CSVLogger is being used to cache examples, this is set to False to preserve the original FileData class verbose: bool default = True If True, prints messages to the console about the dataset file creation dataset_file_name: str | None default = None The name of the dataset file to be created (should end in '.csv'). If None, the dataset file will be named 'dataset1.csv' or the next available number. Guides Using Flagging"
  },
  {
   "name": "Themes",
   "url": "https://www.gradio.app/docs/gradio/themes",
   "content": "Theming Introduction Gradio features a built-in theming engine that lets you customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the theme= kwarg to the Blocks or Interface constructor. For example: with gr.Blocks(theme=gr.themes.Soft()) as demo: ... Gradio comes with a set of prebuilt themes which you can load from gr.themes.*. These are: — gr.themes.Base() — gr.themes.Default() — gr.themes.Glass() — gr.themes.Monochrome() — gr.themes.Soft() Each of these themes set values for hundreds of CSS variables. You can use prebuilt themes as a starting point for your own custom themes, or you can create your own themes from scratch. Let's take a look at each approach. Using the Theme Builder The easiest way to build a theme is using the Theme Builder. To launch the Theme Builder locally, run the following code: import gradio as gr gr.themes.builder() You can use the Theme Builder running on Spaces above, though it runs much faster when you launch it locally via gr.themes.builder(). As you edit the values in the Theme Builder, the app will preview updates in real time. You can download the code to generate the theme you've created so you can use it in any Gradio app. In the rest of the guide, we will cover building themes programmatically. Extending Themes via the Constructor Although each theme has hundreds of CSS variables, the values for most these variables are drawn from 8 core variables which can be set through the constructor of each prebuilt theme. Modifying these 8 arguments allows you to quickly change the look and feel of your app. Core Colors The first 3 constructor arguments set the colors of the theme and are gradio.themes.Color objects. Internally, these Color objects hold brightness values for the palette of a single hue, ranging from 50, 100, 200…, 800, 900, 950. Other CSS variables are derived from these 3 colors. The 3 color constructor arguments are: — primary_hue: This is the color draws attention in your theme. In the default theme, this is set to gradio.themes.colors.orange. — secondary_hue: This is the color that is used for secondary elements in your theme. In the default theme, this is set to gradio.themes.colors.blue. — neutral_hue: This is the color that is used for text and other neutral elements in your theme. In the default theme, this is set to gradio.themes.colors.gray. You could modify these values using their string shortcuts, such as with gr.Blocks(theme=gr.themes.Default(primary_hue='red', secondary_hue='pink')) as demo: ... or you could use the Color objects directly, like this: with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo: ... Predefined colors are: — slate — gray — zinc — neutral — stone — red — orange — amber — yellow — lime — green — emerald — teal — cyan — sky — blue — indigo — violet — purple — fuchsia — pink — rose You could also create your own custom Color objects and pass them in. Core Sizing The next 3 constructor arguments set the sizing of the theme and are gradio.themes.Size objects. Internally, these Size objects hold pixel size values that range from xxs to xxl. Other CSS variables are derived from these 3 sizes. — spacing_size: This sets the padding within and spacing between elements. In the default theme, this is set to gradio.themes.sizes.spacing_md. — radius_size: This sets the roundedness of corners of elements. In the default theme, this is set to gradio.themes.sizes.radius_md. — text_size: This sets the font size of text. In the default theme, this is set to gradio.themes.sizes.text_md. You could modify these values using their string shortcuts, such as with gr.Blocks(theme=gr.themes.Default(spacing_size='sm', radius_size='none')) as demo: ... or you could use the Size objects directly, like this: with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm, radius_size=gr.themes.sizes.radius_none)) as demo: ... The predefined size objects are: — radius_none — radius_sm — radius_md — radius_lg — spacing_sm — spacing_md — spacing_lg — text_sm — text_md — text_lg You could also create your own custom Size objects and pass them in. Core Fonts The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a gradio.themes.GoogleFont, the font will be loaded from Google Fonts. — font: This sets the primary font of the theme. In the default theme, this is set to gradio.themes.GoogleFont('Source Sans Pro'). — font_mono: This sets the monospace font of the theme. In the default theme, this is set to gradio.themes.GoogleFont('IBM Plex Mono'). You could modify these values such as the following: with gr.Blocks(theme=gr.themes.Default(font=[gr.themes.GoogleFont('Inconsolata'), 'Arial', 'sans-serif'])) as demo: ... Extending Themes via .set() You can also modify the values of CSS variables after the theme has been loaded. To do so, use the .set() method of the theme object to get access to the CSS variables. For example: theme = gr.themes.Default(primary_hue='blue').set( loader_color='#FF0000', slider_color='#FF0000', ) with gr.Blocks(theme=theme) as demo: ... In the example above, we've set the loader_color and slider_color variables to #FF0000, despite the overall primary_color using the blue color palette. You can set any CSS variable that is defined in the theme in this manner. Your IDE type hinting should help you navigate these variables. Since there are so many CSS variables, let's take a look at how these variables are named and organized. CSS Variable Naming Conventions CSS variable names can get quite long, like button_primary_background_fill_hover_dark! However they follow a common naming convention that makes it easy to understand what they do and to find the variable you're looking for. Separated by underscores, the variable name is made up of: — 1. The target element, such as button, slider, or block. — 2. The target element type or sub-element, such as button_primary, or block_label. — 3. The property, such as button_primary_background_fill, or block_label_border_width. — 4. Any relevant state, such as button_primary_background_fill_hover. — 5. If the value is different in dark mode, the suffix _dark. For example, input_border_color_focus_dark. Of course, many CSS variable names are shorter than this, such as table_border_color, or input_shadow. CSS Variable Organization Though there are hundreds of CSS variables, they do not all have to have individual values. They draw their values by referencing a set of core variables and referencing each other. This allows us to only have to modify a few variables to change the look and feel of the entire theme, while also getting finer control of individual elements that we may want to modify. Referencing Core Variables To reference one of the core constructor variables, precede the variable name with an asterisk. To reference a core color, use the *primary_, *secondary_, or *neutral_ prefix, followed by the brightness value. For example: theme = gr.themes.Default(primary_hue='blue').set( button_primary_background_fill='*primary_200', button_primary_background_fill_hover='*primary_300', ) In the example above, we've set the button_primary_background_fill and button_primary_background_fill_hover variables to *primary_200 and *primary_300. These variables will be set to the 200 and 300 brightness values of the blue primary color palette, respectively. Similarly, to reference a core size, use the *spacing_, *radius_, or *text_ prefix, followed by the size value. For example: theme = gr.themes.Default(radius_size='md').set( button_primary_border_radius='*radius_xl', ) In the example above, we've set the button_primary_border_radius variable to *radius_xl. This variable will be set to the xl setting of the medium radius size range. Referencing Other Variables Variables can also reference each other. For example, look at the example below: theme = gr.themes.Default().set( button_primary_background_fill='#FF0000', button_primary_background_fill_hover='#FF0000', button_primary_border='#FF0000', ) Having to set these values to a common color is a bit tedious. Instead, we can reference the button_primary_background_fill variable in the button_primary_background_fill_hover and button_primary_border variables, using a * prefix. theme = gr.themes.Default().set( button_primary_background_fill='#FF0000', button_primary_background_fill_hover='*button_primary_background_fill', button_primary_border='*button_primary_background_fill', ) Now, if we change the button_primary_background_fill variable, the button_primary_background_fill_hover and button_primary_border variables will automatically update as well. This is particularly useful if you intend to share your theme - it makes it easy to modify the theme without having to change every variable. Note that dark mode variables automatically reference each other. For example: theme = gr.themes.Default().set( button_primary_background_fill='#FF0000', button_primary_background_fill_dark='#AAAAAA', button_primary_border='*button_primary_background_fill', button_primary_border_dark='*button_primary_background_fill_dark', ) button_primary_border_dark will draw its value from button_primary_background_fill_dark, because dark mode always draw from the dark version of the variable. Creating a Full Theme Let's say you want to create a theme from scratch! We'll go through it step by step - you can also see the source of prebuilt themes in the gradio source repo for reference - here's the source for the Monochrome theme. Our new theme class will inherit from gradio.themes.Base, a theme that sets a lot of convenient defaults. Let's make a simple demo that creates a dummy theme called Seafoam, and make a simple app that uses it. $code_theme_new_step_1 The Base theme is very barebones, and uses gr.themes.Blue as it primary color - you'll note the primary button and the loading animation are both blue as a result. Let's change the defaults core arguments of our app. We'll overwrite the constructor and pass new defaults for the core constructor arguments. We'll use gr.themes.Emerald as our primary color, and set secondary and neutral hues to gr.themes.Blue. We'll make our text larger using text_lg. We'll use Quicksand as our default font, loaded from Google Fonts. $code_theme_new_step_2 See how the primary button and the loading animation are now green? These CSS variables are tied to the primary_hue variable. Let's modify the theme a bit more directly. We'll call the set() method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the * prefix. $code_theme_new_step_3 Look how fun our theme looks now! With just a few variable changes, our theme looks completely different. You may find it helpful to explore the source code of the other prebuilt themes to see how they modified the base theme. You can also find your browser's Inspector useful to select elements from the UI and see what CSS variables are being used in the styles panel. Sharing Themes Once you have created a theme, you can upload it to the HuggingFace Hub to let others view it, use it, and build off of it! Uploading a Theme There are two ways to upload a theme, via the theme class instance or the command line. We will cover both of them with the previously created seafoam theme. Via the class instance Each theme instance has a method called push_to_hub we can use to upload a theme to the HuggingFace hub. seafoam.push_to_hub(repo_name='seafoam', version='0.0.1', hf_token='<token>') Via the command line First save the theme to disk seafoam.dump(filename='seafoam.json') Then use the upload_theme command: upload_theme\\ 'seafoam.json'\\ 'seafoam'\\ --version '0.0.1'\\ --hf_token '<token>' In order to upload a theme, you must have a HuggingFace account and pass your Access Token as the hf_token argument. However, if you log in via the HuggingFace command line (which comes installed with gradio), you can omit the hf_token argument. The version argument lets you specify a valid semantic version string for your theme. That way your users are able to specify which version of your theme they want to use in their apps. This also lets you publish updates to your theme without worrying about changing how previously created apps look. The version argument is optional. If omitted, the next patch version is automatically applied. Theme Previews By calling push_to_hub or upload_theme, the theme assets will be stored in a HuggingFace space. The theme preview for our seafoam theme is here: seafoam preview. Discovering Themes The Theme Gallery shows all the public gradio themes. After publishing your theme, it will automatically show up in the theme gallery after a couple of minutes. You can sort the themes by the number of likes on the space and from most to least recently created as well as toggling themes between light and dark mode. Downloading To use a theme from the hub, use the from_hub method on the ThemeClass and pass it to your app: my_theme = gr.Theme.from_hub('gradio/seafoam') with gr.Blocks(theme=my_theme) as demo: .... You can also pass the theme string directly to Blocks or Interface (gr.Blocks(theme='gradio/seafoam')) You can pin your app to an upstream theme version by using semantic versioning expressions. For example, the following would ensure the theme we load from the seafoam repo was between versions 0.0.1 and 0.1.0: with gr.Blocks(theme='gradio/seafoam@>=0.0.1,<0.1.0') as demo: .... Enjoy creating your own themes! If you make one you're proud of, please share it with the world by uploading it to the hub! If you tag us on Twitter we can give your theme a shout out!"
  },
  {
   "name": "NO_RELOAD",
   "url": "https://www.gradio.app/docs/gradio/NO_RELOAD",
   "content": "NO_RELOAD if gr.NO_RELOAD: Description Any code in a if gr.NO_RELOAD code-block will not be re-evaluated when the source file is reloaded. This is helpful for importing modules that do not like to be reloaded (tiktoken, numpy) as well as database connections and long running set up code. Example Usage import gradio as gr if gr.NO_RELOAD: from transformers import pipeline pipe = pipeline('text-classification', model='cardiffnlp/twitter-roberta-base-sentiment-latest') gr.Interface.from_pipeline(pipe).launch()"
  }
 ]
}