+
+
+ 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.
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ hello_world
+
+ diff_texts
+
+ sentence_builder
+
+
+
+
+
+
+
+
import gradio as gr
+
+def greet(name):
+ return "Hello " + name + "!"
+
+demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
from difflib import Differ
+
+import gradio as gr
+
+
+def diff_texts(text1, text2):
+ d = Differ()
+ return [
+ (token[2:], token[0] if token[0] != " " else None)
+ for token in d.compare(text1, text2)
+ ]
+
+
+demo = gr.Interface(
+ diff_texts,
+ [
+ gr.Textbox(
+ label="Initial text",
+ lines=3,
+ value="The quick brown fox jumped over the lazy dogs.",
+ ),
+ gr.Textbox(
+ label="Text to compare",
+ lines=3,
+ value="The fast brown fox jumps over lazy dogs.",
+ ),
+ ],
+ gr.HighlightedText(
+ label="Diff",
+ combine_adjacent=True,
+ ).style(color_map={"+": "red", "-": "green"}),
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a textarea for user to enter string input or display string output.
+
+
+
As input: passes textarea value as a str into the function.
+
As output: expects a str returned from function and sets textarea value to it.
+
+
Format expected for examples: a str representing the textbox input.
+
+
+
Supported events: change(), submit(), blur()
+
+
+
+
+
+
+
import gradio as gr
+
+def greet(name):
+ return "Hello " + name + "!"
+
+demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable | None
+
+ default: ""
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ type
+
+ str
+
+ default: "text"
+
+
+
+ The type of textbox. One of: 'text', 'password', 'email', Default is 'text'.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Textbox
+
+
+ "textbox"
+
+
+ Uses default values
+
+
+
+
+
+ gradio.TextArea
+
+
+ "textarea"
+
+
+ Uses lines=7
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Textbox.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Textbox.submit( fn, ยทยทยท)
+
+
+
This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Textbox.blur( fn, ยทยทยท)
+
+
+
This event is triggered when the component's is unfocused/blurred (e.g. when the user clicks outside of a textbox). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ Callable function
+
+
+
+
+
+
+
+
+ inputs
+
+ Component | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Textbox.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Textbox
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ tax_calculator
+
+ titanic_survival
+
+ blocks_simple_squares
+
+
+
+
+
+
+
+
import gradio as gr
+
+def tax_calculator(income, marital_status, assets):
+ tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
+ total_deductible = sum(assets["Cost"])
+ taxable_income = income - total_deductible
+
+ total_tax = 0
+ for bracket, rate in tax_brackets:
+ if taxable_income > bracket:
+ total_tax += (taxable_income - bracket) * rate / 100
+
+ if marital_status == "Married":
+ total_tax *= 0.75
+ elif marital_status == "Divorced":
+ total_tax *= 0.8
+
+ return round(total_tax)
+
+demo = gr.Interface(
+ tax_calculator,
+ [
+ "number",
+ gr.Radio(["Single", "Married", "Divorced"]),
+ gr.Dataframe(
+ headers=["Item", "Cost"],
+ datatype=["str", "number"],
+ label="Assets Purchased this Year",
+ ),
+ ],
+ "number",
+ examples=[
+ [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
+ [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
+ ],
+)
+
+demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+demo = gr.Blocks(css="#btn {color: red}")
+
+with demo:
+ default_json = {"a": "a"}
+
+ num = gr.State(value=0)
+ squared = gr.Number(value=0)
+ btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)
+
+ stats = gr.State(value=default_json)
+ table = gr.JSON()
+
+ def increase(var, stats_history):
+ var += 1
+ stats_history[str(var)] = var**2
+ return var, var**2, stats_history, stats_history
+
+ btn.click(increase, [num, stats], [num, squared, stats, table])
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a numeric field for user to enter numbers as input or display numeric output.
+
+
+
As input: passes field value as a float or int into the function, depending on `precision`.
+
As output: expects an int or float returned from the function and sets field value to it.
+
+
Format expected for examples: a float or int representing the number's value.
+
+
+
Supported events: change(), submit(), blur()
+
+
+
+
+
+
+
import gradio as gr
+
+def tax_calculator(income, marital_status, assets):
+ tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
+ total_deductible = sum(assets["Cost"])
+ taxable_income = income - total_deductible
+
+ total_tax = 0
+ for bracket, rate in tax_brackets:
+ if taxable_income > bracket:
+ total_tax += (taxable_income - bracket) * rate / 100
+
+ if marital_status == "Married":
+ total_tax *= 0.75
+ elif marital_status == "Divorced":
+ total_tax *= 0.8
+
+ return round(total_tax)
+
+demo = gr.Interface(
+ tax_calculator,
+ [
+ "number",
+ gr.Radio(["Single", "Married", "Divorced"]),
+ gr.Dataframe(
+ headers=["Item", "Cost"],
+ datatype=["str", "number"],
+ label="Assets Purchased this Year",
+ ),
+ ],
+ "number",
+ examples=[
+ [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
+ [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
+ ],
+)
+
+demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ precision
+
+ int | None
+
+ default: None
+
+
+
+ Precision to round input/output to. If set to 0, will round to nearest integer and covert type to int. If None, no rounding happens.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Number
+
+
+ "number"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Number.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Number.submit( fn, ยทยทยท)
+
+
+
This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Number.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sentence_builder
+
+ generate_tone
+
+ titanic_survival
+
+ interface_random_slider
+
+ blocks_random_slider
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import numpy as np
+import gradio as gr
+
+notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+def generate_tone(note, octave, duration):
+ sr = 48000
+ a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
+ frequency = a4_freq * 2 ** (tones_from_a4 / 12)
+ duration = int(duration)
+ audio = np.linspace(0, duration, duration * sr)
+ audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
+ return sr, audio
+
+demo = gr.Interface(
+ generate_tone,
+ [
+ gr.Dropdown(notes, type="index"),
+ gr.Slider(4, 6, step=1),
+ gr.Textbox(value=1, label="Duration in seconds"),
+ ],
+ "audio",
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def func(slider_1, slider_2, *args):
+ return slider_1 + slider_2 * 5
+
+
+demo = gr.Interface(
+ func,
+ [
+ gr.Slider(minimum=1.5, maximum=250000.89, randomize=True, label="Random Big Range"),
+ gr.Slider(minimum=-1, maximum=1, randomize=True, step=0.05, label="Random only multiple of 0.05 allowed"),
+ gr.Slider(minimum=0, maximum=1, randomize=True, step=0.25, label="Random only multiples of 0.25 allowed"),
+ gr.Slider(minimum=-100, maximum=100, randomize=True, step=3, label="Random between -100 and 100 step 3"),
+ gr.Slider(minimum=-100, maximum=100, randomize=True, label="Random between -100 and 100"),
+ gr.Slider(value=0.25, minimum=5, maximum=30, step=-1),
+ ],
+ "number",
+ interpretation="default"
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+import gradio as gr
+
+
+def func(slider_1, slider_2):
+ return slider_1 * 5 + slider_2
+
+
+with gr.Blocks() as demo:
+ slider = gr.Slider(minimum=-10.2, maximum=15, label="Random Slider (Static)", randomize=True)
+ slider_1 = gr.Slider(minimum=100, maximum=200, label="Random Slider (Input 1)", randomize=True)
+ slider_2 = gr.Slider(minimum=10, maximum=23.2, label="Random Slider (Input 2)", randomize=True)
+ slider_3 = gr.Slider(value=3, label="Non random slider")
+ btn = gr.Button("Run")
+ btn.click(func, inputs=[slider_1, slider_2], outputs=gr.Number())
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a slider that ranges from `minimum` to `maximum` with a step size of `step`.
+
+
+
As input: passes slider value as a float into the function.
+
As output: expects an int or float returned from function and sets slider value to it as long as it is within range.
+
+
Format expected for examples: A float or int representing the slider's value.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Slider
+
+
+ "slider"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Slider.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Slider.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the slider.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Slider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sentence_builder
+
+ titanic_survival
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a checkbox that can be set to `True` or `False`.
+
+
+
As input: passes the status of the checkbox as a bool into the function.
+
As output: expects a bool returned from the function and, if it is True, checks the checkbox.
+
+
Format expected for examples: a bool representing whether the box is checked.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Checkbox
+
+
+ "checkbox"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Checkbox.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Checkbox.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Checkbox
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sentence_builder
+
+ titanic_survival
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.CheckboxGroup( ยทยทยท)
+
+
+
+
+
+
+
+
+
Creates a set of checkboxes of which a subset can be checked.
+
+
+
As input: passes the list of checked checkboxes as a List[str] or their indices as a List[int] into the function, depending on `type`.
+
As output: expects a List[str] , each element of which becomes a checked checkbox.
+
+
Format expected for examples: a List[str] representing the values to be checked.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ choices
+
+ List[str] | None
+
+ default: None
+
+
+
+ list of options to select from.
+
+
+
+
+
+
+
+
+ value
+
+ List[str] | str | Callable | None
+
+ default: None
+
+
+
+ default selected list of options. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+ type
+
+ str
+
+ 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 indicies of the choices selected.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.CheckboxGroup
+
+
+ "checkboxgroup"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.CheckboxGroup.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.CheckboxGroup.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the CheckboxGroup.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ item_container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the items in a container.
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about CheckboxGroup
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sentence_builder
+
+ titanic_survival
+
+ blocks_essay
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def change_textbox(choice):
+ if choice == "short":
+ return gr.Textbox.update(lines=2, visible=True)
+ elif choice == "long":
+ return gr.Textbox.update(lines=8, visible=True)
+ else:
+ return gr.Textbox.update(visible=False)
+
+
+with gr.Blocks() as demo:
+ radio = gr.Radio(
+ ["short", "long", "none"], label="What kind of essay would you like to write?"
+ )
+ text = gr.Textbox(lines=2, interactive=True)
+
+ radio.change(fn=change_textbox, inputs=radio, outputs=text)
+
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a set of radio buttons of which only one can be selected.
+
+
+
As input: passes the value of the selected radio button as a str or its index as an int into the function, depending on `type`.
+
As output: expects a str corresponding to the value of the radio button to be selected.
+
+
Format expected for examples: a str representing the radio option to select.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ choices
+
+ List[str] | None
+
+ default: None
+
+
+
+ list of options to select from.
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable | None
+
+ default: None
+
+
+
+ the button selected by default. If None, no button is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+ type
+
+ str
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Radio
+
+
+ "radio"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Radio.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Radio.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the radio component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ item_container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place items in a container.
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sentence_builder
+
+ titanic_survival
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a dropdown of choices from which entries can be selected.
+
+
+
As input: passes the value of the selected dropdown entry as a str or its index as an int into the function, depending on `type`.
+
As output: expects a str corresponding to the value of the dropdown entry to be selected.
+
+
Format expected for examples: a str representing the drop down value to select.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+
+def sentence_builder(quantity, animal, place, activity_list, morning):
+ return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
+
+
+demo = gr.Interface(
+ sentence_builder,
+ [
+ gr.Slider(2, 20, value=4),
+ gr.Dropdown(["cat", "dog", "bird"]),
+ gr.Radio(["park", "zoo", "road"]),
+ gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
+ gr.Checkbox(label="Is it the morning?"),
+ ],
+ "text",
+ examples=[
+ [2, "cat", "park", ["ran", "swam"], True],
+ [4, "dog", "zoo", ["ate", "swam"], False],
+ [10, "bird", "road", ["ran"], False],
+ [8, "cat", "zoo", ["ate"], True],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ choices
+
+ str | List[str] | None
+
+ default: None
+
+
+
+ list of options to select from.
+
+
+
+
+
+
+
+
+ value
+
+ str | List[str] | Callable | None
+
+ default: None
+
+
+
+ default value(s) selected in dropdown. If None, no value is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+ type
+
+ str
+
+ 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.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Dropdown
+
+
+ "dropdown"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Dropdown.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Dropdown.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the Dropdown.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Dropdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image_mod
+
+ image_mod_default_image
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def image_mod(image):
+ return image.rotate(45)
+
+
+demo = gr.Interface(
+ image_mod,
+ gr.Image(type="pil"),
+ "image",
+ flagging_options=["blurry", "incorrect", "other"],
+ examples=[
+ os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
+ os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
+ os.path.join(os.path.dirname(__file__), "images/logo.png"),
+ os.path.join(os.path.dirname(__file__), "images/tower.jpg"),
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def image_mod(image):
+ return image.rotate(45)
+
+
+cheetah = os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg")
+
+demo = gr.Interface(image_mod, gr.Image(type="pil", value=cheetah), "image",
+ flagging_options=["blurry", "incorrect", "other"], examples=[
+ os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
+ os.path.join(os.path.dirname(__file__), "images/logo.png")
+ ])
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates an image component that can be used to upload/draw images (as an input) or display images (as an output).
+
+
+
As input: passes the uploaded image as a numpy.array , PIL.Image or str filepath depending on `type` -- unless `tool` is `sketch` AND source is one of `upload` or `webcam`. In these cases, a dict with keys `image` and `mask` is passed, and the format of the corresponding values depends on `type`.
+
As output: expects a numpy.array , PIL.Image or str or pathlib.Path filepath to an image and displays the image.
+
+
Format expected for examples: a str filepath to a local file that contains the image.
+
+
+
Supported events: change(), edit(), clear(), stream(), upload()
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def image_mod(image):
+ return image.rotate(45)
+
+
+demo = gr.Interface(
+ image_mod,
+ gr.Image(type="pil"),
+ "image",
+ flagging_options=["blurry", "incorrect", "other"],
+ examples=[
+ os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
+ os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
+ os.path.join(os.path.dirname(__file__), "images/logo.png"),
+ os.path.join(os.path.dirname(__file__), "images/tower.jpg"),
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | _Image.Image | np.ndarray | 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.
+
+
+
+
+
+
+
+
+ shape
+
+ Tuple[int, int] | None
+
+ default: None
+
+
+
+ (width, height) shape to crop and resize image to; if None, matches input image size. Pass None for either width or height to only crop and resize the other.
+
+
+
+
+
+
+
+
+ image_mode
+
+ str
+
+ default: "RGB"
+
+
+
+ "RGB" if color, or "L" if black and white.
+
+
+
+
+
+
+
+
+ invert_colors
+
+ bool
+
+ default: False
+
+
+
+ whether to invert the image as a preprocessing step.
+
+
+
+
+
+
+
+
+ source
+
+ str
+
+ default: "upload"
+
+
+
+ Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools.
+
+
+
+
+
+
+
+
+ tool
+
+ str | None
+
+ default: None
+
+
+
+ Tools used for editing. "editor" allows a full screen editor (and is the default if source is "upload" or "webcam"), "select" provides a cropping and zoom tool, "sketch" allows you to create a binary sketch (and is the default if source="canvas"), and "color-sketch" allows you to created a sketch in different colors. "color-sketch" can be used with source="upload" or "webcam" to allow sketching on an image. "sketch" can also be used with "upload" or "webcam" to create a mask over an image and in that case both the image and mask are passed into the function as a dictionary with keys "image" and "mask" respectively.
+
+
+
+
+
+
+
+
+ type
+
+ str
+
+ default: "numpy"
+
+
+
+ The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (width, height, 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.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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'.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ mirror_webcam
+
+ bool
+
+ default: True
+
+
+
+ If True webcam will be mirrored. Default is True.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Image
+
+
+ "image"
+
+
+ Uses default values
+
+
+
+
+
+ gradio.Webcam
+
+
+ "webcam"
+
+
+ Uses source="webcam", interactive=True
+
+
+
+
+
+ gradio.Sketchpad
+
+
+ "sketchpad"
+
+
+ Uses image_mode="L", source="canvas", shape=(28, 28), invert_colors=True, interactive=True
+
+
+
+
+
+ gradio.Paint
+
+
+ "paint"
+
+
+ Uses source="canvas", tool="color-sketch", interactive=True
+
+
+
+
+
+ gradio.ImageMask
+
+
+ "imagemask"
+
+
+ Uses source="upload", tool="sketch", interactive=True
+
+
+
+
+
+ gradio.ImagePaint
+
+
+ "imagepaint"
+
+
+ Uses source="upload", tool="color-sketch", interactive=True
+
+
+
+
+
+ gradio.Pil
+
+
+ "pil"
+
+
+ Uses type="pil"
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Image.edit( fn, ยทยทยท)
+
+
+
This event is triggered when the user edits the component (e.g. image) using the built-in editor. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Image.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Image.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Image.stream( fn, inputs, outputs, ยทยทยท)
+
+
+
This event is triggered when the user streams the component (e.g. a live webcam component)
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable
+
+ required
+
+
+
+ Callable function
+
+
+
+
+
+
+
+
+ inputs
+
+ List[Component]
+
+ required
+
+
+
+ List of inputs
+
+
+
+
+
+
+
+
+ outputs
+
+ List[Component]
+
+ required
+
+
+
+ List of outputs
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ preprocess
+
+ bool
+
+ default: True
+
+
+
+
+
+
+
+
+
+
+
+
+ postprocess
+
+ bool
+
+ default: True
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Image.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Image.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the Image component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ height
+
+ int | None
+
+ default: None
+
+
+
+ Height of the image.
+
+
+
+
+
+
+
+
+ width
+
+ int | None
+
+ default: None
+
+
+
+ Width of the image.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ video_identity
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def video_identity(video):
+ return video
+
+
+demo = gr.Interface(video_identity,
+ gr.Video(),
+ "playable_video",
+ examples=[
+ os.path.join(os.path.dirname(__file__),
+ "video/video_sample.mp4")],
+ cache_examples=True)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
As input: passes the uploaded video as a str filepath or URL whose extension can be modified by `format`.
+
As output: expects a str filepath to a video which is displayed.
+
+
Format expected for examples: a str filepath to a local file that contains the video.
+
+
+
Supported events: change(), clear(), pause(), play(), stop(), upload()
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def video_identity(video):
+ return video
+
+
+demo = gr.Interface(video_identity,
+ gr.Video(),
+ "playable_video",
+ examples=[
+ os.path.join(os.path.dirname(__file__),
+ "video/video_sample.mp4")],
+ cache_examples=True)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable | None
+
+ default: None
+
+
+
+ A path or URL for the default value that Video 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 | None
+
+ default: None
+
+
+
+ Format of video format to be returned by component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep uploaded format.
+
+
+
+
+
+
+
+
+ source
+
+ str
+
+ default: "upload"
+
+
+
+ Source of video. "upload" creates a box where user can drop an video file, "webcam" allows user to record a video from their webcam.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Video
+
+
+ "video"
+
+
+ Uses default values
+
+
+
+
+
+ gradio.PlayableVideo
+
+
+ "playablevideo"
+
+
+ Uses format="mp4"
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Video.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Video.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Video.play( fn, ยทยทยท)
+
+
+
This event is triggered when the user plays the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Video.pause( fn, ยทยทยท)
+
+
+
This event is triggered when the user pauses the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Video.stop( fn, ยทยทยท)
+
+
+
This event is triggered when the user stops the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Video.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the video component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ height
+
+ int | None
+
+ default: None
+
+
+
+ Height of the video.
+
+
+
+
+
+
+
+
+ width
+
+ int | None
+
+ default: None
+
+
+
+ Width of the video.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Video
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ main_note
+
+ generate_tone
+
+ reverse_audio
+
+
+
+
+
+
+
+
from math import log2, pow
+import os
+
+import numpy as np
+from scipy.fftpack import fft
+
+import gradio as gr
+
+A4 = 440
+C0 = A4 * pow(2, -4.75)
+name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+
+def get_pitch(freq):
+ h = round(12 * log2(freq / C0))
+ n = h % 12
+ return name[n]
+
+
+def main_note(audio):
+ rate, y = audio
+ if len(y.shape) == 2:
+ y = y.T[0]
+ N = len(y)
+ T = 1.0 / rate
+ x = np.linspace(0.0, N * T, N)
+ yf = fft(y)
+ yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
+ xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)
+
+ volume_per_pitch = {}
+ total_volume = np.sum(yf2)
+ for freq, volume in zip(xf, yf2):
+ if freq == 0:
+ continue
+ pitch = get_pitch(freq)
+ if pitch not in volume_per_pitch:
+ volume_per_pitch[pitch] = 0
+ volume_per_pitch[pitch] += 1.0 * volume / total_volume
+ volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
+ return volume_per_pitch
+
+
+demo = gr.Interface(
+ main_note,
+ gr.Audio(source="microphone"),
+ gr.Label(num_top_classes=4),
+ examples=[
+ [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
+ [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
+ ],
+ interpretation="default",
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import numpy as np
+import gradio as gr
+
+notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+def generate_tone(note, octave, duration):
+ sr = 48000
+ a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
+ frequency = a4_freq * 2 ** (tones_from_a4 / 12)
+ duration = int(duration)
+ audio = np.linspace(0, duration, duration * sr)
+ audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
+ return sr, audio
+
+demo = gr.Interface(
+ generate_tone,
+ [
+ gr.Dropdown(notes, type="index"),
+ gr.Slider(4, 6, step=1),
+ gr.Textbox(value=1, label="Duration in seconds"),
+ ],
+ "audio",
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import numpy as np
+
+import gradio as gr
+
+
+def reverse_audio(audio):
+ sr, data = audio
+ return (sr, np.flipud(data))
+
+
+demo = gr.Interface(fn=reverse_audio,
+ inputs="microphone",
+ outputs="audio",
+ examples=[
+ "https://samplelib.com/lib/preview/mp3/sample-3s.mp3",
+ os.path.join(os.path.dirname(__file__), "audio/recording1.wav")
+ ], cache_examples=True)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output).
+
+
+
As input: passes the uploaded audio as a Tuple(int, numpy.array) corresponding to (sample rate, data) or as a str filepath, depending on `type`
+
As output: expects a Tuple(int, numpy.array) corresponding to (sample rate, data) or as a str filepath or URL to an audio file, which gets displayed
+
+
Format expected for examples: a str filepath to a local file that contains audio.
+
+
+
Supported events: change(), clear(), pause(), play(), stop(), stream(), upload()
+
+
+
+
+
+
+
from math import log2, pow
+import os
+
+import numpy as np
+from scipy.fftpack import fft
+
+import gradio as gr
+
+A4 = 440
+C0 = A4 * pow(2, -4.75)
+name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+
+def get_pitch(freq):
+ h = round(12 * log2(freq / C0))
+ n = h % 12
+ return name[n]
+
+
+def main_note(audio):
+ rate, y = audio
+ if len(y.shape) == 2:
+ y = y.T[0]
+ N = len(y)
+ T = 1.0 / rate
+ x = np.linspace(0.0, N * T, N)
+ yf = fft(y)
+ yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
+ xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)
+
+ volume_per_pitch = {}
+ total_volume = np.sum(yf2)
+ for freq, volume in zip(xf, yf2):
+ if freq == 0:
+ continue
+ pitch = get_pitch(freq)
+ if pitch not in volume_per_pitch:
+ volume_per_pitch[pitch] = 0
+ volume_per_pitch[pitch] += 1.0 * volume / total_volume
+ volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
+ return volume_per_pitch
+
+
+demo = gr.Interface(
+ main_note,
+ gr.Audio(source="microphone"),
+ gr.Label(num_top_classes=4),
+ examples=[
+ [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
+ [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
+ ],
+ interpretation="default",
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Tuple[int, np.ndarray] | Callable | None
+
+ default: None
+
+
+
+ A path, URL, or [sample_rate, numpy array] tuple 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.
+
+
+
+
+
+
+
+
+ source
+
+ str
+
+ default: "upload"
+
+
+
+ Source of audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input.
+
+
+
+
+
+
+
+
+ type
+
+ str
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ interactive
+
+ bool | None
+
+ default: None
+
+
+
+ if True, will allow users to upload and edit a 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, will automatically stream webcam feed. Only valid is source is 'microphone'.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Audio
+
+
+ "audio"
+
+
+ Uses default values
+
+
+
+
+
+ gradio.Microphone
+
+
+ "microphone"
+
+
+ Uses source="microphone"
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.play( fn, ยทยทยท)
+
+
+
This event is triggered when the user plays the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.pause( fn, ยทยทยท)
+
+
+
This event is triggered when the user pauses the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.stop( fn, ยทยทยท)
+
+
+
This event is triggered when the user stops the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.stream( fn, inputs, outputs, ยทยทยท)
+
+
+
This event is triggered when the user streams the component (e.g. a live webcam component)
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable
+
+ required
+
+
+
+ Callable function
+
+
+
+
+
+
+
+
+ inputs
+
+ List[Component]
+
+ required
+
+
+
+ List of inputs
+
+
+
+
+
+
+
+
+ outputs
+
+ List[Component]
+
+ required
+
+
+
+ List of outputs
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ preprocess
+
+ bool
+
+ default: True
+
+
+
+
+
+
+
+
+
+
+
+
+ postprocess
+
+ bool
+
+ default: True
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Audio.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the audio component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Audio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ zip_to_json
+
+ zip_files
+
+
+
+
+
+
+
+
from zipfile import ZipFile
+
+import gradio as gr
+
+
+def zip_to_json(file_obj):
+ files = []
+ with ZipFile(file_obj.name) as zfile:
+ for zinfo in zfile.infolist():
+ files.append(
+ {
+ "name": zinfo.filename,
+ "file_size": zinfo.file_size,
+ "compressed_size": zinfo.compress_size,
+ }
+ )
+ return files
+
+
+demo = gr.Interface(zip_to_json, "file", "json")
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+from zipfile import ZipFile
+
+import gradio as gr
+
+
+def zip_files(files):
+ with ZipFile("tmp.zip", "w") as zipObj:
+ for idx, file in enumerate(files):
+ zipObj.write(file.name, "file" + str(idx))
+ return "tmp.zip"
+
+demo = gr.Interface(
+ zip_files,
+ gr.File(file_count="multiple", file_types=["text", ".json", ".csv"]),
+ "file",
+ examples=[[[os.path.join(os.path.dirname(__file__),"files/titanic.csv"),
+ os.path.join(os.path.dirname(__file__),"files/titanic.csv"),
+ os.path.join(os.path.dirname(__file__),"files/titanic.csv")]]],
+ cache_examples=True
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Creates a file component that allows uploading generic file (when used as an input) and or displaying generic files (output).
+
+
+
As input: passes the uploaded file as a file-object or List[file-object] depending on `file_count` (or a bytes /Listbytes depending on `type`)
+
As output: expects function to return a str path to a file, or List[str] consisting of paths to files.
+
+
Format expected for examples: a str path to a local file that populates the component.
+
+
+
Supported events: change(), clear(), upload()
+
+
+
+
+
+
+
from zipfile import ZipFile
+
+import gradio as gr
+
+
+def zip_to_json(file_obj):
+ files = []
+ with ZipFile(file_obj.name) as zfile:
+ for zinfo in zfile.infolist():
+ files.append(
+ {
+ "name": zinfo.filename,
+ "file_size": zinfo.file_size,
+ "compressed_size": zinfo.compress_size,
+ }
+ )
+ return files
+
+
+demo = gr.Interface(zip_to_json, "file", "json")
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | List[str] | Callable | None
+
+ default: None
+
+
+
+ Default file to display, given as str file path. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+ file_count
+
+ str
+
+ 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
+
+ str
+
+ default: "file"
+
+
+
+ Type of value to be returned by component. "file" returns a temporary file object whose path can be retrieved by file_obj.name and original filename can be retrieved with file_obj.orig_name, "binary" returns an bytes object.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.File
+
+
+ "file"
+
+
+ Uses default values
+
+
+
+
+
+ gradio.Files
+
+
+ "files"
+
+
+ Uses file_count="multiple"
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.File.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.File.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.File.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the file component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about File
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ filter_records
+
+ matrix_transpose
+
+ tax_calculator
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def filter_records(records, gender):
+ return records[records["gender"] == gender]
+
+
+demo = gr.Interface(
+ filter_records,
+ [
+ gr.Dataframe(
+ headers=["name", "age", "gender"],
+ datatype=["str", "number", "str"],
+ row_count=5,
+ col_count=(3, "fixed"),
+ ),
+ gr.Dropdown(["M", "F", "O"]),
+ ],
+ "dataframe",
+ description="Enter gender as 'M', 'F', or 'O' for other.",
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import numpy as np
+
+import gradio as gr
+
+
+def transpose(matrix):
+ return matrix.T
+
+
+demo = gr.Interface(
+ transpose,
+ gr.Dataframe(type="numpy", datatype="number", row_count=5, col_count=3),
+ "numpy",
+ examples=[
+ [np.zeros((3, 3)).tolist()],
+ [np.ones((2, 2)).tolist()],
+ [np.random.randint(0, 10, (3, 10)).tolist()],
+ [np.random.randint(0, 10, (10, 3)).tolist()],
+ [np.random.randint(0, 10, (10, 10)).tolist()],
+ ],
+ cache_examples=False
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+def tax_calculator(income, marital_status, assets):
+ tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
+ total_deductible = sum(assets["Cost"])
+ taxable_income = income - total_deductible
+
+ total_tax = 0
+ for bracket, rate in tax_brackets:
+ if taxable_income > bracket:
+ total_tax += (taxable_income - bracket) * rate / 100
+
+ if marital_status == "Married":
+ total_tax *= 0.75
+ elif marital_status == "Divorced":
+ total_tax *= 0.8
+
+ return round(total_tax)
+
+demo = gr.Interface(
+ tax_calculator,
+ [
+ "number",
+ gr.Radio(["Single", "Married", "Divorced"]),
+ gr.Dataframe(
+ headers=["Item", "Cost"],
+ datatype=["str", "number"],
+ label="Assets Purchased this Year",
+ ),
+ ],
+ "number",
+ examples=[
+ [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
+ [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
+ ],
+)
+
+demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Accepts or displays 2D input through a spreadsheet-like component for dataframes.
+
+
+
As input: passes the uploaded spreadsheet data as a pandas.DataFrame , numpy.array , List[List] , or List depending on `type`
+
As output: expects a pandas.DataFrame , numpy.array , List[List] , List , a Dict with keys `data` (and optionally `headers`), or str path to a csv, which is rendered in the spreadsheet.
+
+
Format expected for examples: a str filepath to a csv with data, a pandas dataframe, or a list of lists (excluding headers) where each sublist is a row of data.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+
+def filter_records(records, gender):
+ return records[records["gender"] == gender]
+
+
+demo = gr.Interface(
+ filter_records,
+ [
+ gr.Dataframe(
+ headers=["name", "age", "gender"],
+ datatype=["str", "number", "str"],
+ row_count=5,
+ col_count=(3, "fixed"),
+ ),
+ gr.Dropdown(["M", "F", "O"]),
+ ],
+ "dataframe",
+ description="Enter gender as 'M', 'F', or 'O' for other.",
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ List[List[Any]] | Callable | None
+
+ default: None
+
+
+
+ Default value as a 2-dimensional list of values. If callable, 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
+
+ str
+
+ default: "pandas"
+
+
+
+ Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array.
+
+
+
+
+
+
+
+
+ max_rows
+
+ int | None
+
+ default: 20
+
+
+
+ Maximum number of rows to display at once. Set to None for infinite.
+
+
+
+
+
+
+
+
+ max_cols
+
+ int | None
+
+ default: None
+
+
+
+ Maximum number of columns to display at once. Set to None for infinite.
+
+
+
+
+
+
+
+
+ overflow_row_behaviour
+
+ str
+
+ default: "paginate"
+
+
+
+ If set to "paginate", will create pages for overflow rows. If set to "show_ends", will show initial and final rows and truncate middle rows.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ wrap
+
+ bool
+
+ default: False
+
+
+
+ if True text in table cells will wrap when appropriate, if False the table will scroll horiztonally. Defaults to False.
+
+
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Dataframe.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Dataframe.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the DataFrame component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Dataframe
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fraud_detector
+
+
+
+
+
+
+
+
import random
+import os
+import gradio as gr
+
+
+def fraud_detector(card_activity, categories, sensitivity):
+ activity_range = random.randint(0, 100)
+ drop_columns = [
+ column for column in ["retail", "food", "other"] if column not in categories
+ ]
+ if len(drop_columns):
+ card_activity.drop(columns=drop_columns, inplace=True)
+ return (
+ card_activity,
+ card_activity,
+ {"fraud": activity_range / 100.0, "not fraud": 1 - activity_range / 100.0},
+ )
+
+
+demo = gr.Interface(
+ fraud_detector,
+ [
+ gr.Timeseries(x="time", y=["retail", "food", "other"]),
+ gr.CheckboxGroup(
+ ["retail", "food", "other"], value=["retail", "food", "other"]
+ ),
+ gr.Slider(1, 3),
+ ],
+ [
+ "dataframe",
+ gr.Timeseries(x="time", y=["retail", "food", "other"]),
+ gr.Label(label="Fraud Level"),
+ ],
+ examples=[
+ [os.path.join(os.path.dirname(__file__), "fraud.csv"), ["retail", "food", "other"], 1.0],
+ ],
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.Timeseries( ยทยทยท)
+
+
+
+
+
+
+
+
+
Creates a component that can be used to upload/preview timeseries csv files or display a dataframe consisting of a time series graphically.
+
+
+
As input: passes the uploaded timeseries data as a pandas.DataFrame into the function
+
As output: expects a pandas.DataFrame or str path to a csv to be returned, which is then displayed as a timeseries graph
+
+
Format expected for examples: a str filepath of csv data with time series data.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import random
+import os
+import gradio as gr
+
+
+def fraud_detector(card_activity, categories, sensitivity):
+ activity_range = random.randint(0, 100)
+ drop_columns = [
+ column for column in ["retail", "food", "other"] if column not in categories
+ ]
+ if len(drop_columns):
+ card_activity.drop(columns=drop_columns, inplace=True)
+ return (
+ card_activity,
+ card_activity,
+ {"fraud": activity_range / 100.0, "not fraud": 1 - activity_range / 100.0},
+ )
+
+
+demo = gr.Interface(
+ fraud_detector,
+ [
+ gr.Timeseries(x="time", y=["retail", "food", "other"]),
+ gr.CheckboxGroup(
+ ["retail", "food", "other"], value=["retail", "food", "other"]
+ ),
+ gr.Slider(1, 3),
+ ],
+ [
+ "dataframe",
+ gr.Timeseries(x="time", y=["retail", "food", "other"]),
+ gr.Label(label="Fraud Level"),
+ ],
+ examples=[
+ [os.path.join(os.path.dirname(__file__), "fraud.csv"), ["retail", "food", "other"], 1.0],
+ ],
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable | None
+
+ default: None
+
+
+
+ File path for the timeseries csv file. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+ x
+
+ str | None
+
+ default: None
+
+
+
+ Column name of x (time) series. None if csv has no headers, in which case first column is x series.
+
+
+
+
+
+
+
+
+ y
+
+ str | List[str] | None
+
+ default: None
+
+
+
+ Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series.
+
+
+
+
+
+
+
+
+ colors
+
+ List[str] | None
+
+ default: None
+
+
+
+ an ordered list of colors to use for each line plot
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ interactive
+
+ bool | None
+
+ default: None
+
+
+
+ if True, will allow users to upload a timeseries csv; if False, can only be used to display timeseries 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Timeseries
+
+
+ "timeseries"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Timeseries.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Timeseries.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the TimeSeries component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Timeseries
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ chatbot_demo
+
+ blocks_simple_squares
+
+
+
+
+
+
+
+
import random
+import gradio as gr
+
+def chat(message, history):
+ history = history or []
+ message = message.lower()
+ if message.startswith("how many"):
+ response = str(random.randint(1, 10))
+ elif message.startswith("how"):
+ response = random.choice(["Great", "Good", "Okay", "Bad"])
+ elif message.startswith("where"):
+ response = random.choice(["Here", "There", "Somewhere"])
+ else:
+ response = "I don't know"
+ history.append((message, response))
+ return history, history
+
+chatbot = gr.Chatbot().style(color_map=("green", "pink"))
+demo = gr.Interface(
+ chat,
+ ["text", "state"],
+ [chatbot, "state"],
+ allow_flagging="never",
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+demo = gr.Blocks(css="#btn {color: red}")
+
+with demo:
+ default_json = {"a": "a"}
+
+ num = gr.State(value=0)
+ squared = gr.Number(value=0)
+ btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)
+
+ stats = gr.State(value=default_json)
+ table = gr.JSON()
+
+ def increase(var, stats_history):
+ var += 1
+ stats_history[str(var)] = var**2
+ return var, var**2, stats_history, stats_history
+
+ btn.click(increase, [num, stats], [num, squared, stats, table])
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
Special hidden component that stores session state across runs of the demo by the same user. The value of the State variable is cleared when the user refreshes the page.
+
+
+
As input: No preprocessing is performed
+
As output: No postprocessing is performed
+
+
+
+
+
+
+
+
import random
+import gradio as gr
+
+def chat(message, history):
+ history = history or []
+ message = message.lower()
+ if message.startswith("how many"):
+ response = str(random.randint(1, 10))
+ elif message.startswith("how"):
+ response = random.choice(["Great", "Good", "Okay", "Bad"])
+ elif message.startswith("where"):
+ response = random.choice(["Here", "There", "Somewhere"])
+ else:
+ response = "I don't know"
+ history.append((message, response))
+ return history, history
+
+chatbot = gr.Chatbot().style(color_map=("green", "pink"))
+demo = gr.Interface(
+ chat,
+ ["text", "state"],
+ [chatbot, "state"],
+ allow_flagging="never",
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ Any
+
+ default: None
+
+
+
+ the initial value of the state. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about State
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ color_picker
+
+ color_generator
+
+
+
+
+
+
+
+
import gradio as gr
+import numpy as np
+import os
+from PIL import Image, ImageColor
+
+
+def change_color(icon, color):
+
+ """
+ Function that given an icon in .png format changes its color
+ Args:
+ icon: Icon whose color needs to be changed.
+ color: Chosen color with which to edit the input icon.
+ Returns:
+ edited_image: Edited icon.
+ """
+ img = icon.convert("LA")
+ img = img.convert("RGBA")
+ image_np = np.array(icon)
+ _, _, _, alpha = image_np.T
+ mask = alpha > 0
+ image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
+ edited_image = Image.fromarray(image_np)
+ return edited_image
+
+
+inputs = [
+ gr.Image(label="icon", type="pil", image_mode="RGBA"),
+ gr.ColorPicker(label="color"),
+]
+outputs = gr.Image(label="colored icon")
+
+demo = gr.Interface(
+ fn=change_color,
+ inputs=inputs,
+ outputs=outputs,
+ examples=[
+ [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#ff0000"],
+ [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#0000FF"],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+import cv2
+import numpy as np
+import random
+
+
+# Convert decimal color to hexadecimal color
+def RGB_to_Hex(rgb):
+ color = "#"
+ for i in rgb:
+ num = int(i)
+ color += str(hex(num))[-2:].replace("x", "0").upper()
+ return color
+
+
+# Randomly generate light or dark colors
+def random_color(is_light=True):
+ return (
+ random.randint(0, 127) + int(is_light) * 128,
+ random.randint(0, 127) + int(is_light) * 128,
+ random.randint(0, 127) + int(is_light) * 128,
+ )
+
+
+def switch_color(color_style):
+ if color_style == "light":
+ is_light = True
+ elif color_style == "dark":
+ is_light = False
+ back_color_ = random_color(is_light) # Randomly generate colors
+ back_color = RGB_to_Hex(back_color_) # Convert to hexadecimal
+
+ # Draw color pictures.
+ w, h = 50, 50
+ img = np.zeros((h, w, 3), np.uint8)
+ cv2.rectangle(img, (0, 0), (w, h), back_color_, thickness=-1)
+
+ return back_color, back_color, img
+
+
+inputs = [gr.Radio(["light", "dark"], value="light")]
+
+outputs = [
+ gr.ColorPicker(label="color"),
+ gr.Textbox(label="hexadecimal color"),
+ gr.Image(type="numpy", label="color picture"),
+]
+
+title = "Color Generator"
+description = (
+ "Click the Submit button, and a dark or light color will be randomly generated."
+)
+
+demo = gr.Interface(
+ fn=switch_color,
+ inputs=inputs,
+ outputs=outputs,
+ title=title,
+ description=description,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.ColorPicker( ยทยทยท)
+
+
+
+
+
+
+
+
+
Creates a color picker for user to select a color as string input.
+
+
+
As input: passes selected color value as a str into the function.
+
As output: expects a str returned from function and sets color picker value to it.
+
+
Format expected for examples: a str with a hexadecimal representation of a color, e.g. "#ff0000" for red.
+
+
+
Supported events: change(), submit()
+
+
+
+
+
+
+
import gradio as gr
+import numpy as np
+import os
+from PIL import Image, ImageColor
+
+
+def change_color(icon, color):
+
+ """
+ Function that given an icon in .png format changes its color
+ Args:
+ icon: Icon whose color needs to be changed.
+ color: Chosen color with which to edit the input icon.
+ Returns:
+ edited_image: Edited icon.
+ """
+ img = icon.convert("LA")
+ img = img.convert("RGBA")
+ image_np = np.array(icon)
+ _, _, _, alpha = image_np.T
+ mask = alpha > 0
+ image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
+ edited_image = Image.fromarray(image_np)
+ return edited_image
+
+
+inputs = [
+ gr.Image(label="icon", type="pil", image_mode="RGBA"),
+ gr.ColorPicker(label="color"),
+]
+outputs = gr.Image(label="colored icon")
+
+demo = gr.Interface(
+ fn=change_color,
+ inputs=inputs,
+ outputs=outputs,
+ examples=[
+ [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#ff0000"],
+ [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#0000FF"],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.ColorPicker
+
+
+ "colorpicker"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.ColorPicker.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.ColorPicker.submit( fn, ยทยทยท)
+
+
+
This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.ColorPicker.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about ColorPicker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ main_note
+
+ titanic_survival
+
+
+
+
+
+
+
+
from math import log2, pow
+import os
+
+import numpy as np
+from scipy.fftpack import fft
+
+import gradio as gr
+
+A4 = 440
+C0 = A4 * pow(2, -4.75)
+name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+
+def get_pitch(freq):
+ h = round(12 * log2(freq / C0))
+ n = h % 12
+ return name[n]
+
+
+def main_note(audio):
+ rate, y = audio
+ if len(y.shape) == 2:
+ y = y.T[0]
+ N = len(y)
+ T = 1.0 / rate
+ x = np.linspace(0.0, N * T, N)
+ yf = fft(y)
+ yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
+ xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)
+
+ volume_per_pitch = {}
+ total_volume = np.sum(yf2)
+ for freq, volume in zip(xf, yf2):
+ if freq == 0:
+ continue
+ pitch = get_pitch(freq)
+ if pitch not in volume_per_pitch:
+ volume_per_pitch[pitch] = 0
+ volume_per_pitch[pitch] += 1.0 * volume / total_volume
+ volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
+ return volume_per_pitch
+
+
+demo = gr.Interface(
+ main_note,
+ gr.Audio(source="microphone"),
+ gr.Label(num_top_classes=4),
+ examples=[
+ [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
+ [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
+ ],
+ interpretation="default",
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import os
+
+import pandas as pd
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+import gradio as gr
+
+current_dir = os.path.dirname(os.path.realpath(__file__))
+data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))
+
+
+def encode_age(df):
+ df.Age = df.Age.fillna(-0.5)
+ bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
+ categories = pd.cut(df.Age, bins, labels=False)
+ df.Age = categories
+ return df
+
+
+def encode_fare(df):
+ df.Fare = df.Fare.fillna(-0.5)
+ bins = (-1, 0, 8, 15, 31, 1000)
+ categories = pd.cut(df.Fare, bins, labels=False)
+ df.Fare = categories
+ return df
+
+
+def encode_df(df):
+ df = encode_age(df)
+ df = encode_fare(df)
+ sex_mapping = {"male": 0, "female": 1}
+ df = df.replace({"Sex": sex_mapping})
+ embark_mapping = {"S": 1, "C": 2, "Q": 3}
+ df = df.replace({"Embarked": embark_mapping})
+ df.Embarked = df.Embarked.fillna(0)
+ df["Company"] = 0
+ df.loc[(df["SibSp"] > 0), "Company"] = 1
+ df.loc[(df["Parch"] > 0), "Company"] = 2
+ df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
+ df = df[
+ [
+ "PassengerId",
+ "Pclass",
+ "Sex",
+ "Age",
+ "Fare",
+ "Embarked",
+ "Company",
+ "Survived",
+ ]
+ ]
+ return df
+
+
+train = encode_df(data)
+
+X_all = train.drop(["Survived", "PassengerId"], axis=1)
+y_all = train["Survived"]
+
+num_test = 0.20
+X_train, X_test, y_train, y_test = train_test_split(
+ X_all, y_all, test_size=num_test, random_state=23
+)
+
+clf = RandomForestClassifier()
+clf.fit(X_train, y_train)
+predictions = clf.predict(X_test)
+
+
+def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
+ if passenger_class is None or embark_point is None:
+ return None
+ df = pd.DataFrame.from_dict(
+ {
+ "Pclass": [passenger_class + 1],
+ "Sex": [0 if is_male else 1],
+ "Age": [age],
+ "Company": [
+ (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
+ ],
+ "Fare": [fare],
+ "Embarked": [embark_point + 1],
+ }
+ )
+ df = encode_age(df)
+ df = encode_fare(df)
+ pred = clf.predict_proba(df)[0]
+ return {"Perishes": float(pred[0]), "Survives": float(pred[1])}
+
+
+demo = gr.Interface(
+ predict_survival,
+ [
+ gr.Dropdown(["first", "second", "third"], type="index"),
+ "checkbox",
+ gr.Slider(0, 80, value=25),
+ gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
+ gr.Number(value=20),
+ gr.Radio(["S", "C", "Q"], type="index"),
+ ],
+ "label",
+ examples=[
+ ["first", True, 30, [], 50, "S"],
+ ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
+ ["third", True, 30, ["Child"], 20, "S"],
+ ],
+ interpretation="default",
+ live=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Displays a classification label, along with confidence scores of top categories, if provided.
+
+
+
As input: this component does *not* accept input.
+
As output: 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 the structure produced by Label.postprocess().
+
+
+
Supported events: change()
+
+
+
+
+
+
+
from math import log2, pow
+import os
+
+import numpy as np
+from scipy.fftpack import fft
+
+import gradio as gr
+
+A4 = 440
+C0 = A4 * pow(2, -4.75)
+name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+
+def get_pitch(freq):
+ h = round(12 * log2(freq / C0))
+ n = h % 12
+ return name[n]
+
+
+def main_note(audio):
+ rate, y = audio
+ if len(y.shape) == 2:
+ y = y.T[0]
+ N = len(y)
+ T = 1.0 / rate
+ x = np.linspace(0.0, N * T, N)
+ yf = fft(y)
+ yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
+ xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)
+
+ volume_per_pitch = {}
+ total_volume = np.sum(yf2)
+ for freq, volume in zip(xf, yf2):
+ if freq == 0:
+ continue
+ pitch = get_pitch(freq)
+ if pitch not in volume_per_pitch:
+ volume_per_pitch[pitch] = 0
+ volume_per_pitch[pitch] += 1.0 * volume / total_volume
+ volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
+ return volume_per_pitch
+
+
+demo = gr.Interface(
+ main_note,
+ gr.Audio(source="microphone"),
+ gr.Label(num_top_classes=4),
+ examples=[
+ [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
+ [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
+ ],
+ interpretation="default",
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ color
+
+ str | None
+
+ default: None
+
+
+
+ The background color of the label (either a valid css color name or hexadecimal string).
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Label
+
+
+ "label"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Label.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Label.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the label component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will add a container to the label - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff_texts
+
+ text_analysis
+
+
+
+
+
+
+
+
from difflib import Differ
+
+import gradio as gr
+
+
+def diff_texts(text1, text2):
+ d = Differ()
+ return [
+ (token[2:], token[0] if token[0] != " " else None)
+ for token in d.compare(text1, text2)
+ ]
+
+
+demo = gr.Interface(
+ diff_texts,
+ [
+ gr.Textbox(
+ label="Initial text",
+ lines=3,
+ value="The quick brown fox jumped over the lazy dogs.",
+ ),
+ gr.Textbox(
+ label="Text to compare",
+ lines=3,
+ value="The fast brown fox jumps over lazy dogs.",
+ ),
+ ],
+ gr.HighlightedText(
+ label="Diff",
+ combine_adjacent=True,
+ ).style(color_map={"+": "red", "-": "green"}),
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+os.system('python -m spacy download en_core_web_sm')
+import spacy
+from spacy import displacy
+
+nlp = spacy.load("en_core_web_sm")
+
+def text_analysis(text):
+ doc = nlp(text)
+ html = displacy.render(doc, style="dep", page=True)
+ html = (
+ ""
+ + html
+ + "
"
+ )
+ pos_count = {
+ "char_count": len(text),
+ "token_count": 0,
+ }
+ pos_tokens = []
+
+ for token in doc:
+ pos_tokens.extend([(token.text, token.pos_), (" ", None)])
+
+ return pos_tokens, pos_count, html
+
+demo = gr.Interface(
+ text_analysis,
+ gr.Textbox(placeholder="Enter sentence here..."),
+ ["highlight", "json", "html"],
+ examples=[
+ ["What a beautiful morning for a walk!"],
+ ["It was the best of times, it was the worst of times."],
+ ],
+)
+
+demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.HighlightedText( ยทยทยท)
+
+
+
+
+
+
+
+
+
Displays text that contains spans that are highlighted by category or numerical value.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a List[Tuple[str, float | str]]] consisting of spans of text and their associated labels, or a Dict with two keys: (1) "text" whose value is the complete text, and "entities", which is a list of dictionaries, each of which have the keys: "entity" (consisting of the entity label), "start" (the character index where the label starts), and "end" (the character index where the label ends). Entities should not overlap.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
from difflib import Differ
+
+import gradio as gr
+
+
+def diff_texts(text1, text2):
+ d = Differ()
+ return [
+ (token[2:], token[0] if token[0] != " " else None)
+ for token in d.compare(text1, text2)
+ ]
+
+
+demo = gr.Interface(
+ diff_texts,
+ [
+ gr.Textbox(
+ label="Initial text",
+ lines=3,
+ value="The quick brown fox jumped over the lazy dogs.",
+ ),
+ gr.Textbox(
+ label="Text to compare",
+ lines=3,
+ value="The fast brown fox jumps over lazy dogs.",
+ ),
+ ],
+ gr.HighlightedText(
+ label="Diff",
+ combine_adjacent=True,
+ ).style(color_map={"+": "red", "-": "green"}),
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+ show_legend
+
+ bool
+
+ default: False
+
+
+
+ whether to show span categories in a separate legend or inline.
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.HighlightedText
+
+
+ "highlightedtext"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.HighlightedText.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.HighlightedText.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the HighlightedText component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ color_map
+
+ Dict[str, str] | None
+
+ default: None
+
+
+
+ Map between category and respective colors.
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the component in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about HighlightedText
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ zip_to_json
+
+ blocks_xray
+
+
+
+
+
+
+
+
from zipfile import ZipFile
+
+import gradio as gr
+
+
+def zip_to_json(file_obj):
+ files = []
+ with ZipFile(file_obj.name) as zfile:
+ for zinfo in zfile.infolist():
+ files.append(
+ {
+ "name": zinfo.filename,
+ "file_size": zinfo.file_size,
+ "compressed_size": zinfo.compress_size,
+ }
+ )
+ return files
+
+
+demo = gr.Interface(zip_to_json, "file", "json")
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+import random
+import time
+
+
+def xray_model(diseases, img):
+ time.sleep(4)
+ return [{disease: random.random() for disease in diseases}]
+
+
+def ct_model(diseases, img):
+ time.sleep(3)
+ return [{disease: 0.1 for disease in diseases}]
+
+with gr.Blocks() as demo:
+ gr.Markdown(
+ """
+# Detect Disease From Scan
+With this model you can lorem ipsum
+- ipsum 1
+- ipsum 2
+"""
+ )
+ disease = gr.CheckboxGroup(
+ choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
+ )
+
+ with gr.Tab("X-ray") as x_tab:
+ with gr.Row():
+ xray_scan = gr.Image()
+ xray_results = gr.JSON()
+ xray_run = gr.Button("Run")
+ xray_run.click(
+ xray_model,
+ inputs=[disease, xray_scan],
+ outputs=xray_results,
+ api_name="xray_model"
+ )
+
+ with gr.Tab("CT Scan"):
+ with gr.Row():
+ ct_scan = gr.Image()
+ ct_results = gr.JSON()
+ ct_run = gr.Button("Run")
+ ct_run.click(
+ ct_model,
+ inputs=[disease, ct_scan],
+ outputs=ct_results,
+ api_name="ct_model"
+ )
+
+ upload_btn = gr.Button("Upload Results")
+ upload_btn.click(
+ lambda ct, xr: time.sleep(5),
+ inputs=[ct_results, xray_results],
+ outputs=[],
+ )
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Used to display arbitrary JSON output prettily.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a valid JSON str -- or a list or dict that is JSON serializable.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
from zipfile import ZipFile
+
+import gradio as gr
+
+
+def zip_to_json(file_obj):
+ files = []
+ with ZipFile(file_obj.name) as zfile:
+ for zinfo in zfile.infolist():
+ files.append(
+ {
+ "name": zinfo.filename,
+ "file_size": zinfo.file_size,
+ "compressed_size": zinfo.compress_size,
+ }
+ )
+ return files
+
+
+demo = gr.Interface(zip_to_json, "file", "json")
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.JSON
+
+
+ "json"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.JSON.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.JSON.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the JSON component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the JSON in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about JSON
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ text_analysis
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+os.system('python -m spacy download en_core_web_sm')
+import spacy
+from spacy import displacy
+
+nlp = spacy.load("en_core_web_sm")
+
+def text_analysis(text):
+ doc = nlp(text)
+ html = displacy.render(doc, style="dep", page=True)
+ html = (
+ ""
+ + html
+ + "
"
+ )
+ pos_count = {
+ "char_count": len(text),
+ "token_count": 0,
+ }
+ pos_tokens = []
+
+ for token in doc:
+ pos_tokens.extend([(token.text, token.pos_), (" ", None)])
+
+ return pos_tokens, pos_count, html
+
+demo = gr.Interface(
+ text_analysis,
+ gr.Textbox(placeholder="Enter sentence here..."),
+ ["highlight", "json", "html"],
+ examples=[
+ ["What a beautiful morning for a walk!"],
+ ["It was the best of times, it was the worst of times."],
+ ],
+)
+
+demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Used to display arbitrary HTML output.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a valid HTML str .
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+import os
+os.system('python -m spacy download en_core_web_sm')
+import spacy
+from spacy import displacy
+
+nlp = spacy.load("en_core_web_sm")
+
+def text_analysis(text):
+ doc = nlp(text)
+ html = displacy.render(doc, style="dep", page=True)
+ html = (
+ ""
+ + html
+ + "
"
+ )
+ pos_count = {
+ "char_count": len(text),
+ "token_count": 0,
+ }
+ pos_tokens = []
+
+ for token in doc:
+ pos_tokens.extend([(token.text, token.pos_), (" ", None)])
+
+ return pos_tokens, pos_count, html
+
+demo = gr.Interface(
+ text_analysis,
+ gr.Textbox(placeholder="Enter sentence here..."),
+ ["highlight", "json", "html"],
+ examples=[
+ ["What a beautiful morning for a walk!"],
+ ["It was the best of times, it was the worst of times."],
+ ],
+)
+
+demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable
+
+ default: ""
+
+
+
+ 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
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.HTML
+
+
+ "html"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.HTML.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fake_gan
+
+
+
+
+
+
+
+
# This demo needs to be run from the repo folder.
+# python demo/fake_gan/run.py
+import os
+import random
+
+import gradio as gr
+
+
+def fake_gan():
+ images = [
+ (random.choice(
+ [
+ "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+ "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
+ "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
+ "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+ "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
+ ]
+ ), f"label {i}" if i != 0 else "label" * 50)
+ for i in range(3)
+ ]
+ return images
+
+
+with gr.Blocks() as demo:
+ with gr.Column(variant="panel"):
+ with gr.Row(variant="compact"):
+ text = gr.Textbox(
+ label="Enter your prompt",
+ show_label=False,
+ max_lines=1,
+ placeholder="Enter your prompt",
+ ).style(
+ container=False,
+ )
+ btn = gr.Button("Generate image").style(full_width=False)
+
+ gallery = gr.Gallery(
+ label="Generated images", show_label=False, elem_id="gallery"
+ ).style(grid=[2], height="auto")
+
+ btn.click(fake_gan, None, gallery)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Used to display a list of images as a gallery that can be scrolled through.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a list of images in any format, List[numpy.array | PIL.Image | str] , or a List of (image, str caption) tuples and displays them.
+
+
+
+
+
+
+
+
# This demo needs to be run from the repo folder.
+# python demo/fake_gan/run.py
+import os
+import random
+
+import gradio as gr
+
+
+def fake_gan():
+ images = [
+ (random.choice(
+ [
+ "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+ "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
+ "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
+ "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+ "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
+ ]
+ ), f"label {i}" if i != 0 else "label" * 50)
+ for i in range(3)
+ ]
+ return images
+
+
+with gr.Blocks() as demo:
+ with gr.Column(variant="panel"):
+ with gr.Row(variant="compact"):
+ text = gr.Textbox(
+ label="Enter your prompt",
+ show_label=False,
+ max_lines=1,
+ placeholder="Enter your prompt",
+ ).style(
+ container=False,
+ )
+ btn = gr.Button("Generate image").style(full_width=False)
+
+ gallery = gr.Gallery(
+ label="Generated images", show_label=False, elem_id="gallery"
+ ).style(grid=[2], height="auto")
+
+ btn.click(fake_gan, None, gallery)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ List[np.ndarray | _Image.Image | str] | Callable | None
+
+ default: None
+
+
+
+ List of images 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.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Gallery
+
+
+ "gallery"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Gallery.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the gallery component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ grid
+
+ int | Tuple | None
+
+ default: None
+
+
+
+ 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 that 6 are given then the last will be used for all subsequent breakpoints
+
+
+
+
+
+
+
+
+ height
+
+ str | None
+
+ default: None
+
+
+
+ Height of the gallery.
+
+
+
+
+
+
+
+
+ container
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place gallery in a container - providing some extra padding around the border.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ chatbot_demo
+
+
+
+
+
+
+
+
import random
+import gradio as gr
+
+def chat(message, history):
+ history = history or []
+ message = message.lower()
+ if message.startswith("how many"):
+ response = str(random.randint(1, 10))
+ elif message.startswith("how"):
+ response = random.choice(["Great", "Good", "Okay", "Bad"])
+ elif message.startswith("where"):
+ response = random.choice(["Here", "There", "Somewhere"])
+ else:
+ response = "I don't know"
+ history.append((message, response))
+ return history, history
+
+chatbot = gr.Chatbot().style(color_map=("green", "pink"))
+demo = gr.Interface(
+ chat,
+ ["text", "state"],
+ [chatbot, "state"],
+ allow_flagging="never",
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Displays a chatbot output showing both user submitted messages and responses. Supports a subset of Markdown including bold, italics, code, and images.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a List[Tuple[str, str]] , a list of tuples with user inputs and responses as strings of HTML.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import random
+import gradio as gr
+
+def chat(message, history):
+ history = history or []
+ message = message.lower()
+ if message.startswith("how many"):
+ response = str(random.randint(1, 10))
+ elif message.startswith("how"):
+ response = random.choice(["Great", "Good", "Okay", "Bad"])
+ elif message.startswith("where"):
+ response = random.choice(["Here", "There", "Somewhere"])
+ else:
+ response = "I don't know"
+ history.append((message, response))
+ return history, history
+
+chatbot = gr.Chatbot().style(color_map=("green", "pink"))
+demo = gr.Interface(
+ chat,
+ ["text", "state"],
+ [chatbot, "state"],
+ allow_flagging="never",
+)
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ List[Tuple[str, str]] | Callable | None
+
+ default: None
+
+
+
+ Default value to show in chatbot. 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
+
+
+
+
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Chatbot
+
+
+ "chatbot"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Chatbot.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Chatbot.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the Chatbot component.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ color_map
+
+ Tuple[str, str] | None
+
+ default: None
+
+
+
+ Tuple containing colors to apply to user and response chat bubbles.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Chatbot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ model3D
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def load_mesh(mesh_file_name):
+ return mesh_file_name
+
+
+demo = gr.Interface(
+ fn=load_mesh,
+ inputs=gr.Model3D(),
+ outputs=gr.Model3D(
+ clear_color=[0.0, 0.0, 0.0, 0.0], label="3D Model"),
+ examples=[
+ [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
+ [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],
+ [os.path.join(os.path.dirname(__file__), "files/Fox.gltf")],
+ [os.path.join(os.path.dirname(__file__), "files/face.obj")],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Component allows users to upload or view 3D Model files (.obj, .glb, or .gltf).
+
+
+
As input: This component passes the uploaded file as a str filepath.
+
As output: expects function to return a str path to a file of type (.obj, glb, or .gltf)
+
+
+
Supported events: change(), edit(), clear()
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def load_mesh(mesh_file_name):
+ return mesh_file_name
+
+
+demo = gr.Interface(
+ fn=load_mesh,
+ inputs=gr.Model3D(),
+ outputs=gr.Model3D(
+ clear_color=[0.0, 0.0, 0.0, 0.0], label="3D Model"),
+ examples=[
+ [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
+ [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],
+ [os.path.join(os.path.dirname(__file__), "files/Fox.gltf")],
+ [os.path.join(os.path.dirname(__file__), "files/face.obj")],
+ ],
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable | None
+
+ default: None
+
+
+
+ path to (.obj, glb, or .gltf) 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.
+
+
+
+
+
+
+
+
+ clear_color
+
+ List[float] | None
+
+ default: None
+
+
+
+ background color of scene
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Model3D
+
+
+ "model3d"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Model3D.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Model3D.edit( fn, ยทยทยท)
+
+
+
This event is triggered when the user edits the component (e.g. image) using the built-in editor. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Model3D.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Model3D.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the Model3D component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Model3D
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ altair_plot
+
+ outbreak_forecast
+
+ blocks_kinematics
+
+ stock_forecast
+
+ map_airbnb
+
+
+
+
+
+
+
+
import altair as alt
+import gradio as gr
+import numpy as np
+import pandas as pd
+from vega_datasets import data
+
+
+def make_plot(plot_type):
+ if plot_type == "scatter_plot":
+ cars = data.cars()
+ return alt.Chart(cars).mark_point().encode(
+ x='Horsepower',
+ y='Miles_per_Gallon',
+ color='Origin',
+ )
+ elif plot_type == "heatmap":
+ # Compute x^2 + y^2 across a 2D grid
+ x, y = np.meshgrid(range(-5, 5), range(-5, 5))
+ z = x ** 2 + y ** 2
+
+ # Convert this grid to columnar data expected by Altair
+ source = pd.DataFrame({'x': x.ravel(),
+ 'y': y.ravel(),
+ 'z': z.ravel()})
+ return alt.Chart(source).mark_rect().encode(
+ x='x:O',
+ y='y:O',
+ color='z:Q'
+ )
+ elif plot_type == "us_map":
+ states = alt.topo_feature(data.us_10m.url, 'states')
+ source = data.income.url
+
+ return alt.Chart(source).mark_geoshape().encode(
+ shape='geo:G',
+ color='pct:Q',
+ tooltip=['name:N', 'pct:Q'],
+ facet=alt.Facet('group:N', columns=2),
+ ).transform_lookup(
+ lookup='id',
+ from_=alt.LookupData(data=states, key='id'),
+ as_='geo'
+ ).properties(
+ width=300,
+ height=175,
+ ).project(
+ type='albersUsa'
+ )
+ elif plot_type == "interactive_barplot":
+ source = data.movies.url
+
+ pts = alt.selection(type="single", encodings=['x'])
+
+ rect = alt.Chart(data.movies.url).mark_rect().encode(
+ alt.X('IMDB_Rating:Q', bin=True),
+ alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
+ alt.Color('count()',
+ scale=alt.Scale(scheme='greenblue'),
+ legend=alt.Legend(title='Total Records')
+ )
+ )
+
+ circ = rect.mark_point().encode(
+ alt.ColorValue('grey'),
+ alt.Size('count()',
+ legend=alt.Legend(title='Records in Selection')
+ )
+ ).transform_filter(
+ pts
+ )
+
+ bar = alt.Chart(source).mark_bar().encode(
+ x='Major_Genre:N',
+ y='count()',
+ color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
+ ).properties(
+ width=550,
+ height=200
+ ).add_selection(pts)
+
+ plot = alt.vconcat(
+ rect + circ,
+ bar
+ ).resolve_legend(
+ color="independent",
+ size="independent"
+ )
+ return plot
+ elif plot_type == "radial":
+ source = pd.DataFrame({"values": [12, 23, 47, 6, 52, 19]})
+
+ base = alt.Chart(source).encode(
+ theta=alt.Theta("values:Q", stack=True),
+ radius=alt.Radius("values", scale=alt.Scale(type="sqrt", zero=True, rangeMin=20)),
+ color="values:N",
+ )
+
+ c1 = base.mark_arc(innerRadius=20, stroke="#fff")
+
+ c2 = base.mark_text(radiusOffset=10).encode(text="values:Q")
+
+ return c1 + c2
+ elif plot_type == "multiline":
+ source = data.stocks()
+
+ highlight = alt.selection(type='single', on='mouseover',
+ fields=['symbol'], nearest=True)
+
+ base = alt.Chart(source).encode(
+ x='date:T',
+ y='price:Q',
+ color='symbol:N'
+ )
+
+ points = base.mark_circle().encode(
+ opacity=alt.value(0)
+ ).add_selection(
+ highlight
+ ).properties(
+ width=600
+ )
+
+ lines = base.mark_line().encode(
+ size=alt.condition(~highlight, alt.value(1), alt.value(3))
+ )
+
+ return points + lines
+
+
+with gr.Blocks() as demo:
+ button = gr.Radio(label="Plot type",
+ choices=['scatter_plot', 'heatmap', 'us_map',
+ 'interactive_barplot', "radial", "multiline"], value='scatter_plot')
+ plot = gr.Plot(label="Plot")
+ button.change(make_plot, inputs=button, outputs=[plot])
+ demo.load(make_plot, inputs=[button], outputs=[plot])
+
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import altair
+
+import gradio as gr
+from math import sqrt
+import matplotlib
+
+matplotlib.use("Agg")
+
+import matplotlib.pyplot as plt
+import numpy as np
+import plotly.express as px
+import pandas as pd
+
+
+def outbreak(plot_type, r, month, countries, social_distancing):
+ months = ["January", "February", "March", "April", "May"]
+ m = months.index(month)
+ start_day = 30 * m
+ final_day = 30 * (m + 1)
+ x = np.arange(start_day, final_day + 1)
+ pop_count = {"USA": 350, "Canada": 40, "Mexico": 300, "UK": 120}
+ if social_distancing:
+ r = sqrt(r)
+ df = pd.DataFrame({"day": x})
+ for country in countries:
+ df[country] = x ** (r) * (pop_count[country] + 1)
+
+ if plot_type == "Matplotlib":
+ fig = plt.figure()
+ plt.plot(df["day"], df[countries].to_numpy())
+ plt.title("Outbreak in " + month)
+ plt.ylabel("Cases")
+ plt.xlabel("Days since Day 0")
+ plt.legend(countries)
+ return fig
+ elif plot_type == "Plotly":
+ fig = px.line(df, x="day", y=countries)
+ fig.update_layout(
+ title="Outbreak in " + month,
+ xaxis_title="Cases",
+ yaxis_title="Days Since Day 0",
+ )
+ return fig
+ elif plot_type == "Altair":
+ df = df.melt(id_vars="day").rename(columns={"variable": "country"})
+ fig = altair.Chart(df).mark_line().encode(x="day", y='value', color='country')
+ return fig
+ else:
+ raise ValueError("A plot type must be selected")
+
+
+inputs = [
+ gr.Dropdown(["Matplotlib", "Plotly", "Altair"], label="Plot Type"),
+ gr.Slider(1, 4, 3.2, label="R"),
+ gr.Dropdown(["January", "February", "March", "April", "May"], label="Month"),
+ gr.CheckboxGroup(
+ ["USA", "Canada", "Mexico", "UK"], label="Countries", value=["USA", "Canada"]
+ ),
+ gr.Checkbox(label="Social Distancing?"),
+]
+outputs = gr.Plot()
+
+demo = gr.Interface(
+ fn=outbreak,
+ inputs=inputs,
+ outputs=outputs,
+ examples=[
+ ["Matplotlib", 2, "March", ["Mexico", "UK"], True],
+ ["Altair", 2, "March", ["Mexico", "Canada"], True],
+ ["Plotly", 3.6, "February", ["Canada", "Mexico", "UK"], False],
+ ],
+ cache_examples=True,
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import pandas as pd
+import numpy as np
+
+import gradio as gr
+
+
+def plot(v, a):
+ g = 9.81
+ theta = a / 180 * 3.14
+ tmax = ((2 * v) * np.sin(theta)) / g
+ timemat = tmax * np.linspace(0, 1, 40)
+
+ x = (v * timemat) * np.cos(theta)
+ y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
+ df = pd.DataFrame({"x": x, "y": y})
+ return df
+
+
+demo = gr.Blocks()
+
+with demo:
+ gr.Markdown(
+ r"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \cdot \frac{\sin(2\theta)}{g}$"
+ )
+
+ with gr.Row():
+ speed = gr.Slider(1, 30, 25, label="Speed")
+ angle = gr.Slider(0, 90, 45, label="Angle")
+ output = gr.LinePlot(
+ x="x",
+ y="y",
+ overlay_point=True,
+ tooltip=["x", "y"],
+ x_lim=[0, 100],
+ y_lim=[0, 60],
+ width=350,
+ height=300,
+ )
+ btn = gr.Button(value="Run")
+ btn.click(plot, [speed, angle], output)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+import numpy as np
+
+import gradio as gr
+
+
+def plot_forecast(final_year, companies, noise, show_legend, point_style):
+ start_year = 2020
+ x = np.arange(start_year, final_year + 1)
+ year_count = x.shape[0]
+ plt_format = ({"cross": "X", "line": "-", "circle": "o--"})[point_style]
+ fig = plt.figure()
+ ax = fig.add_subplot(111)
+ for i, company in enumerate(companies):
+ series = np.arange(0, year_count, dtype=float)
+ series = series**2 * (i + 1)
+ series += np.random.rand(year_count) * noise
+ ax.plot(x, series, plt_format)
+ if show_legend:
+ plt.legend(companies)
+ return fig
+
+
+demo = gr.Interface(
+ plot_forecast,
+ [
+ gr.Radio([2025, 2030, 2035, 2040], label="Project to:"),
+ gr.CheckboxGroup(["Google", "Microsoft", "Gradio"], label="Company Selection"),
+ gr.Slider(1, 100, label="Noise Level"),
+ gr.Checkbox(label="Show Legend"),
+ gr.Dropdown(["cross", "line", "circle"], label="Style"),
+ ],
+ gr.Plot(label="forecast"),
+)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+import pandas as pd
+import plotly.graph_objects as go
+from datasets import load_dataset
+
+dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
+df = dataset.to_pandas()
+
+def filter_map(min_price, max_price, boroughs):
+
+ filtered_df = df[(df['neighbourhood_group'].isin(boroughs)) &
+ (df['price'] > min_price) & (df['price'] < max_price)]
+ names = filtered_df["name"].tolist()
+ prices = filtered_df["price"].tolist()
+ text_list = [(names[i], prices[i]) for i in range(0, len(names))]
+ fig = go.Figure(go.Scattermapbox(
+ customdata=text_list,
+ lat=filtered_df['latitude'].tolist(),
+ lon=filtered_df['longitude'].tolist(),
+ mode='markers',
+ marker=go.scattermapbox.Marker(
+ size=6
+ ),
+ hoverinfo="text",
+ hovertemplate='Name : %{customdata[0]}Price : $%{customdata[1]}'
+ ))
+
+ fig.update_layout(
+ mapbox_style="open-street-map",
+ hovermode='closest',
+ mapbox=dict(
+ bearing=0,
+ center=go.layout.mapbox.Center(
+ lat=40.67,
+ lon=-73.90
+ ),
+ pitch=0,
+ zoom=9
+ ),
+ )
+
+ return fig
+
+with gr.Blocks() as demo:
+ with gr.Column():
+ with gr.Row():
+ min_price = gr.Number(value=250, label="Minimum Price")
+ max_price = gr.Number(value=1000, label="Maximum Price")
+ boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
+ btn = gr.Button(value="Update Filter")
+ map = gr.Plot().style()
+ demo.load(filter_map, [min_price, max_price, boroughs], map)
+ btn.click(filter_map, [min_price, max_price, boroughs], map)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Used to display various kinds of plots (matplotlib, plotly, or bokeh are supported)
+
+
+
As input: this component does *not* accept input.
+
As output: expects either a matplotlib.figure.Figure , a plotly.graph_objects._figure.Figure , or a dict corresponding to a bokeh plot (json_item format)
+
+
+
Supported events: change(), clear()
+
+
+
+
+
+
+
import altair as alt
+import gradio as gr
+import numpy as np
+import pandas as pd
+from vega_datasets import data
+
+
+def make_plot(plot_type):
+ if plot_type == "scatter_plot":
+ cars = data.cars()
+ return alt.Chart(cars).mark_point().encode(
+ x='Horsepower',
+ y='Miles_per_Gallon',
+ color='Origin',
+ )
+ elif plot_type == "heatmap":
+ # Compute x^2 + y^2 across a 2D grid
+ x, y = np.meshgrid(range(-5, 5), range(-5, 5))
+ z = x ** 2 + y ** 2
+
+ # Convert this grid to columnar data expected by Altair
+ source = pd.DataFrame({'x': x.ravel(),
+ 'y': y.ravel(),
+ 'z': z.ravel()})
+ return alt.Chart(source).mark_rect().encode(
+ x='x:O',
+ y='y:O',
+ color='z:Q'
+ )
+ elif plot_type == "us_map":
+ states = alt.topo_feature(data.us_10m.url, 'states')
+ source = data.income.url
+
+ return alt.Chart(source).mark_geoshape().encode(
+ shape='geo:G',
+ color='pct:Q',
+ tooltip=['name:N', 'pct:Q'],
+ facet=alt.Facet('group:N', columns=2),
+ ).transform_lookup(
+ lookup='id',
+ from_=alt.LookupData(data=states, key='id'),
+ as_='geo'
+ ).properties(
+ width=300,
+ height=175,
+ ).project(
+ type='albersUsa'
+ )
+ elif plot_type == "interactive_barplot":
+ source = data.movies.url
+
+ pts = alt.selection(type="single", encodings=['x'])
+
+ rect = alt.Chart(data.movies.url).mark_rect().encode(
+ alt.X('IMDB_Rating:Q', bin=True),
+ alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
+ alt.Color('count()',
+ scale=alt.Scale(scheme='greenblue'),
+ legend=alt.Legend(title='Total Records')
+ )
+ )
+
+ circ = rect.mark_point().encode(
+ alt.ColorValue('grey'),
+ alt.Size('count()',
+ legend=alt.Legend(title='Records in Selection')
+ )
+ ).transform_filter(
+ pts
+ )
+
+ bar = alt.Chart(source).mark_bar().encode(
+ x='Major_Genre:N',
+ y='count()',
+ color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
+ ).properties(
+ width=550,
+ height=200
+ ).add_selection(pts)
+
+ plot = alt.vconcat(
+ rect + circ,
+ bar
+ ).resolve_legend(
+ color="independent",
+ size="independent"
+ )
+ return plot
+ elif plot_type == "radial":
+ source = pd.DataFrame({"values": [12, 23, 47, 6, 52, 19]})
+
+ base = alt.Chart(source).encode(
+ theta=alt.Theta("values:Q", stack=True),
+ radius=alt.Radius("values", scale=alt.Scale(type="sqrt", zero=True, rangeMin=20)),
+ color="values:N",
+ )
+
+ c1 = base.mark_arc(innerRadius=20, stroke="#fff")
+
+ c2 = base.mark_text(radiusOffset=10).encode(text="values:Q")
+
+ return c1 + c2
+ elif plot_type == "multiline":
+ source = data.stocks()
+
+ highlight = alt.selection(type='single', on='mouseover',
+ fields=['symbol'], nearest=True)
+
+ base = alt.Chart(source).encode(
+ x='date:T',
+ y='price:Q',
+ color='symbol:N'
+ )
+
+ points = base.mark_circle().encode(
+ opacity=alt.value(0)
+ ).add_selection(
+ highlight
+ ).properties(
+ width=600
+ )
+
+ lines = base.mark_line().encode(
+ size=alt.condition(~highlight, alt.value(1), alt.value(3))
+ )
+
+ return points + lines
+
+
+with gr.Blocks() as demo:
+ button = gr.Radio(label="Plot type",
+ choices=['scatter_plot', 'heatmap', 'us_map',
+ 'interactive_barplot', "radial", "multiline"], value='scatter_plot')
+ plot = gr.Plot(label="Plot")
+ button.change(make_plot, inputs=button, outputs=[plot])
+ demo.load(make_plot, inputs=[button], outputs=[plot])
+
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ Callable | None | pd.DataFrame
+
+ 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.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ component name in interface.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ if True, will display label.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Plot
+
+
+ "plot"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Plot.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Plot.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Plot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ native_plots
+
+
+
+
+
+
+
+
import gradio as gr
+
+from scatter_plot_demo import scatter_plot
+from line_plot_demo import line_plot
+
+
+with gr.Blocks() as demo:
+ with gr.Tabs():
+ with gr.TabItem("Scatter Plot"):
+ scatter_plot.render()
+ with gr.TabItem("Line Plot"):
+ line_plot.render()
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.ScatterPlot( ยทยทยท)
+
+
+
+
+
+
+
+
+
Create a scatter plot.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a pandas dataframe with the data to plot.
+
+
+
Supported events: change(), clear()
+
+
+
+
+
+
+
import gradio as gr
+
+from scatter_plot_demo import scatter_plot
+from line_plot_demo import line_plot
+
+
+with gr.Blocks() as demo:
+ with gr.Tabs():
+ with gr.TabItem("Scatter Plot"):
+ scatter_plot.render()
+ with gr.TabItem("Line Plot"):
+ line_plot.render()
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ pd.DataFrame | Callable | None
+
+ default: None
+
+
+
+ The pandas dataframe containing the data to display in a scatter plot, or a callable. If callable, the function will be called whenever the app loads to set the initial value of the component.
+
+
+
+
+
+
+
+
+ x
+
+ str | None
+
+ default: None
+
+
+
+ Column corresponding to the x axis.
+
+
+
+
+
+
+
+
+ y
+
+ str | None
+
+ default: None
+
+
+
+ Column corresponding to the y axis.
+
+
+
+
+
+
+
+
+ color
+
+ str | None
+
+ default: None
+
+
+
+ The column to determine the point color. If the column contains numeric data, gradio will interpolate the column data so that small values correspond to light colors and large values correspond to dark values.
+
+
+
+
+
+
+
+
+ size
+
+ str | None
+
+ default: None
+
+
+
+ The column used to determine the point size. Should contain numeric data so that gradio can map the data to the point size.
+
+
+
+
+
+
+
+
+ shape
+
+ str | None
+
+ default: None
+
+
+
+ The column used to determine the point shape. Should contain categorical data. Gradio will map each unique value to a different shape.
+
+
+
+
+
+
+
+
+ title
+
+ str | None
+
+ default: None
+
+
+
+ The title to display on top of the chart.
+
+
+
+
+
+
+
+
+ tooltip
+
+ List[str] | str | None
+
+ default: None
+
+
+
+ The column (or list of columns) to display on the tooltip when a user hovers a point on the plot.
+
+
+
+
+
+
+
+
+ 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_legend_title
+
+ str | None
+
+ default: None
+
+
+
+ The title given to the color legend. By default, uses the value of color parameter.
+
+
+
+
+
+
+
+
+ size_legend_title
+
+ str | None
+
+ default: None
+
+
+
+ The title given to the size legend. By default, uses the value of the size parameter.
+
+
+
+
+
+
+
+
+ shape_legend_title
+
+ str | None
+
+ default: None
+
+
+
+ The title given to the shape legend. By default, uses the value of the shape parameter.
+
+
+
+
+
+
+
+
+ color_legend_position
+
+ str | None
+
+ default: None
+
+
+
+ The position of the color legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
+
+
+
+
+
+
+
+
+ size_legend_position
+
+ str | None
+
+ default: None
+
+
+
+ The position of the size legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
+
+
+
+
+
+
+
+
+ shape_legend_position
+
+ str | None
+
+ default: None
+
+
+
+ The position of the shape legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
+
+
+
+
+
+
+
+
+ height
+
+ int | None
+
+ default: None
+
+
+
+ The height of the plot in pixels.
+
+
+
+
+
+
+
+
+ width
+
+ int | None
+
+ default: None
+
+
+
+ The width of the plot in pixels.
+
+
+
+
+
+
+
+
+ x_lim
+
+ List[int | float] | None
+
+ default: None
+
+
+
+ A tuple or list containing the limits for the x-axis, specified as [x_min, x_max].
+
+
+
+
+
+
+
+
+ y_lim
+
+ List[int | float] | None
+
+ default: None
+
+
+
+ A tuple of list containing the limits for the y-axis, specified as [y_min, y_max].
+
+
+
+
+
+
+
+
+ caption
+
+ str | None
+
+ default: None
+
+
+
+ The (optional) caption to display below the plot.
+
+
+
+
+
+
+
+
+ interactive
+
+ bool | None
+
+ default: True
+
+
+
+ Whether users should be able to interact with the plot by panning or zooming with their mouse or trackpad.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ The (optional) label to display on the top left corner of the plot.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ Whether the label should be displayed.
+
+
+
+
+
+
+
+
+ visible
+
+ bool
+
+ default: True
+
+
+
+ Whether the plot should be visible.
+
+
+
+
+
+
+
+
+ elem_id
+
+ str | None
+
+ default: None
+
+
+
+ Unique id used for custom css targetting.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.ScatterPlot
+
+
+ "scatterplot"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.ScatterPlot.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.ScatterPlot.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about ScatterPlot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ native_plots
+
+ live_dashboard
+
+
+
+
+
+
+
+
import gradio as gr
+
+from scatter_plot_demo import scatter_plot
+from line_plot_demo import line_plot
+
+
+with gr.Blocks() as demo:
+ with gr.Tabs():
+ with gr.TabItem("Scatter Plot"):
+ scatter_plot.render()
+ with gr.TabItem("Line Plot"):
+ line_plot.render()
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import math
+
+import pandas as pd
+
+import gradio as gr
+import datetime
+import numpy as np
+
+
+def get_time():
+ return datetime.datetime.now()
+
+
+plot_end = 2 * math.pi
+
+
+def get_plot(period=1):
+ global plot_end
+ x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)
+ y = np.sin(2 * math.pi * period * x)
+ update = gr.LinePlot.update(
+ value=pd.DataFrame({"x": x, "y": y}),
+ x="x",
+ y="y",
+ title="Plot (updates every second)",
+ width=600,
+ height=350,
+ )
+ plot_end += 2 * math.pi
+ if plot_end > 1000:
+ plot_end = 2 * math.pi
+ return update
+
+
+with gr.Blocks() as demo:
+ with gr.Row():
+ with gr.Column():
+ c_time2 = gr.Textbox(label="Current Time refreshed every second")
+ gr.Textbox(
+ "Change the value of the slider to automatically update the plot",
+ label="",
+ )
+ period = gr.Slider(
+ label="Period of plot", value=1, minimum=0, maximum=10, step=1
+ )
+ plot = gr.LinePlot(show_label=False)
+ with gr.Column():
+ name = gr.Textbox(label="Enter your name")
+ greeting = gr.Textbox(label="Greeting")
+ button = gr.Button(value="Greet")
+ button.click(lambda s: f"Hello {s}", name, greeting)
+
+ demo.load(lambda: datetime.datetime.now(), None, c_time2, every=1)
+ dep = demo.load(get_plot, None, plot, every=1)
+ period.change(get_plot, period, plot, every=1, cancels=[dep])
+
+if __name__ == "__main__":
+ demo.queue().launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Create a line plot.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a pandas dataframe with the data to plot.
+
+
+
Supported events: change(), clear()
+
+
+
+
+
+
+
import gradio as gr
+
+from scatter_plot_demo import scatter_plot
+from line_plot_demo import line_plot
+
+
+with gr.Blocks() as demo:
+ with gr.Tabs():
+ with gr.TabItem("Scatter Plot"):
+ scatter_plot.render()
+ with gr.TabItem("Line Plot"):
+ line_plot.render()
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ pd.DataFrame | Callable | None
+
+ default: None
+
+
+
+ The pandas dataframe containing the data to display in a scatter plot.
+
+
+
+
+
+
+
+
+ x
+
+ str | None
+
+ default: None
+
+
+
+ Column corresponding to the x axis.
+
+
+
+
+
+
+
+
+ y
+
+ str | None
+
+ default: None
+
+
+
+ Column corresponding to the y axis.
+
+
+
+
+
+
+
+
+ color
+
+ str | None
+
+ default: None
+
+
+
+ The column to determine the point color. If the column contains numeric data, gradio will interpolate the column data so that small values correspond to light colors and large values correspond to dark values.
+
+
+
+
+
+
+
+
+ stroke_dash
+
+ str | None
+
+ default: None
+
+
+
+ The column to determine the symbol used to draw the line, e.g. dashed lines, dashed lines with points.
+
+
+
+
+
+
+
+
+ overlay_point
+
+ bool | None
+
+ default: None
+
+
+
+ Whether to draw a point on the line for each (x, y) coordinate pair.
+
+
+
+
+
+
+
+
+ title
+
+ str | None
+
+ default: None
+
+
+
+ The title to display on top of the chart.
+
+
+
+
+
+
+
+
+ tooltip
+
+ List[str] | str | None
+
+ default: None
+
+
+
+ The column (or list of columns) to display on the tooltip when a user hovers a point on the plot.
+
+
+
+
+
+
+
+
+ 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_legend_title
+
+ str | None
+
+ default: None
+
+
+
+ The title given to the color legend. By default, uses the value of color parameter.
+
+
+
+
+
+
+
+
+ stroke_dash_legend_title
+
+ str | None
+
+ default: None
+
+
+
+ The title given to the stroke_dash legend. By default, uses the value of the stroke_dash parameter.
+
+
+
+
+
+
+
+
+ color_legend_position
+
+ str | None
+
+ default: None
+
+
+
+ The position of the color legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
+
+
+
+
+
+
+
+
+ stroke_dash_legend_position
+
+ str | None
+
+ default: None
+
+
+
+ The position of the stoke_dash legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
+
+
+
+
+
+
+
+
+ height
+
+ int | None
+
+ default: None
+
+
+
+ The height of the plot in pixels.
+
+
+
+
+
+
+
+
+ width
+
+ int | None
+
+ default: None
+
+
+
+ The width of the plot in pixels.
+
+
+
+
+
+
+
+
+ x_lim
+
+ List[int] | None
+
+ default: None
+
+
+
+ A tuple or list containing the limits for the x-axis, specified as [x_min, x_max].
+
+
+
+
+
+
+
+
+ y_lim
+
+ List[int] | None
+
+ default: None
+
+
+
+ A tuple of list containing the limits for the y-axis, specified as [y_min, y_max].
+
+
+
+
+
+
+
+
+ caption
+
+ str | None
+
+ default: None
+
+
+
+ The (optional) caption to display below the plot.
+
+
+
+
+
+
+
+
+ interactive
+
+ bool | None
+
+ default: True
+
+
+
+ Whether users should be able to interact with the plot by panning or zooming with their mouse or trackpad.
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+ The (optional) label to display on the top left corner of the plot.
+
+
+
+
+
+
+
+
+ show_label
+
+ bool
+
+ default: True
+
+
+
+ Whether the label should be displayed.
+
+
+
+
+
+
+
+
+ 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. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+
+
+
+
+
+
+
+
+ visible
+
+ bool
+
+ default: True
+
+
+
+ Whether the plot should be visible.
+
+
+
+
+
+
+
+
+ elem_id
+
+ str | None
+
+ default: None
+
+
+
+ Unique id used for custom css targetting.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.LinePlot
+
+
+ "lineplot"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.LinePlot.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.LinePlot.clear( fn, ยทยทยท)
+
+
+
This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about LinePlot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ blocks_hello
+
+ blocks_kinematics
+
+
+
+
+
+
+
+
import gradio as gr
+
+def welcome(name):
+ return f"Welcome to Gradio, {name}!"
+
+with gr.Blocks() as demo:
+ gr.Markdown(
+ """
+ # Hello World!
+ Start typing below to see the output.
+ """)
+ inp = gr.Textbox(placeholder="What is your name?")
+ out = gr.Textbox()
+ inp.change(welcome, inp, out)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
import pandas as pd
+import numpy as np
+
+import gradio as gr
+
+
+def plot(v, a):
+ g = 9.81
+ theta = a / 180 * 3.14
+ tmax = ((2 * v) * np.sin(theta)) / g
+ timemat = tmax * np.linspace(0, 1, 40)
+
+ x = (v * timemat) * np.cos(theta)
+ y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
+ df = pd.DataFrame({"x": x, "y": y})
+ return df
+
+
+demo = gr.Blocks()
+
+with demo:
+ gr.Markdown(
+ r"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \cdot \frac{\sin(2\theta)}{g}$"
+ )
+
+ with gr.Row():
+ speed = gr.Slider(1, 30, 25, label="Speed")
+ angle = gr.Slider(0, 90, 45, label="Angle")
+ output = gr.LinePlot(
+ x="x",
+ y="y",
+ overlay_point=True,
+ tooltip=["x", "y"],
+ x_lim=[0, 100],
+ y_lim=[0, 60],
+ width=350,
+ height=300,
+ )
+ btn = gr.Button(value="Run")
+ btn.click(plot, [speed, angle], output)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Used to render arbitrary Markdown output. Can also render latex enclosed by dollar signs.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a valid str that can be rendered as Markdown.
+
+
+
Supported events: change()
+
+
+
+
+
+
+
import gradio as gr
+
+def welcome(name):
+ return f"Welcome to Gradio, {name}!"
+
+with gr.Blocks() as demo:
+ gr.Markdown(
+ """
+ # Hello World!
+ Start typing below to see the output.
+ """)
+ inp = gr.Textbox(placeholder="What is your name?")
+ out = gr.Textbox()
+ inp.change(welcome, inp, out)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ value
+
+ str | Callable
+
+ default: ""
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Markdown
+
+
+ "markdown"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Markdown.change( fn, ยทยทยท)
+
+
+
This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+ bool | None
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Markdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gr.Dataset(components, samples)
+
+
+
+
+
+
+
+
+
Used to create an output widget for showing datasets. Used to render the examples box.
+
+
+
As input: passes the selected sample either as a list of data (if type="value") or as an int index (if type="index")
+
As output: expects a list of lists corresponding to the dataset data.
+
+
+
Supported events: click()
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ label
+
+ str | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ components
+
+ List[IOComponent] | List[str]
+
+ required
+
+
+
+ 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
+
+
+
+
+
+
+
+
+ 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
+
+ str
+
+ default: "values"
+
+
+
+ 'values' if clicking on a sample should pass the value of the sample, or "index" if it should pass the index 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Dataset
+
+
+ "dataset"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Dataset.click( fn, ยทยทยท)
+
+
+
This event is triggered when the component (e.g. a button) is clicked. This method can be used when this component is in a Gradio Blocks.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ required
+
+
+
+ the function to wrap an interface around. 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 | List[Component] | Set[Component] | 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 | List[Component] | None
+
+ default: None
+
+
+
+ List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
+
+
+
+
+
+
+
+
+ api_name
+
+ str | None
+
+ default: None
+
+
+
+ Defining this parameter exposes the endpoint in the api docs
+
+
+
+
+
+
+
+
+ status_tracker
+
+ StatusTracker | None
+
+ default: None
+
+
+
+
+
+
+
+
+
+
+
+
+ scroll_to_output
+
+ bool
+
+ default: False
+
+
+
+ If True, will scroll to output component on completion
+
+
+
+
+
+
+
+
+ show_progress
+
+ bool
+
+ default: True
+
+
+
+ If True, will show progress animation while pending
+
+
+
+
+
+
+
+
+ queue
+
+
+
+ default: None
+
+
+
+ If True, will place the request on the queue, if the queue exists
+
+
+
+
+
+
+
+
+ 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 event 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.
+
+
+
+
+
+
+
+
+ every
+
+ float | None
+
+ default: None
+
+
+
+ Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Dataset.style( ยทยทยท)
+
+
+
This method can be used to change the appearance of the Dataset component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Dataset
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Interpretation( component, ยทยทยท)
+
+
+
+
+
+
+
+
+
Used to create an interpretation widget for a component.
+
+
+
As input: this component does *not* accept input.
+
As output: expects a dict with keys "original" and "interpretation".
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ component
+
+ Component
+
+ required
+
+
+
+ Which component to show in the interpretation widget.
+
+
+
+
+
+
+
+
+ visible
+
+ bool
+
+ default: True
+
+
+
+ Whether or not the interpretation is 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.
+
+
+
+
+
+
+
+
+
+
+
+
+ Class
+ Interface String Shortcut
+ Initialization
+
+
+
+
+
+
+ gradio.Interpretation
+
+
+ "interpretation"
+
+
+ Uses default values
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Interpretation
+
+
+
+
+
+
+
+
+
+
+
+
+ Gradio includes helper classes and methods that interact with existing components. The goal of these classes and methods is to help you
+ add common functionality to your app without having to rewrite common functions.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ blocks_inputs
+
+ fake_gan
+
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def combine(a, b):
+ return a + " " + b
+
+
+def mirror(x):
+ return x
+
+
+with gr.Blocks() as demo:
+
+ txt = gr.Textbox(label="Input", lines=2)
+ txt_2 = gr.Textbox(label="Input 2")
+ txt_3 = gr.Textbox(value="", label="Output")
+ btn = gr.Button(value="Submit")
+ btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])
+
+ with gr.Row():
+ im = gr.Image()
+ im_2 = gr.Image()
+
+ btn = gr.Button(value="Mirror Image")
+ btn.click(mirror, inputs=[im], outputs=[im_2])
+
+ gr.Markdown("## Text Examples")
+ gr.Examples(
+ [["hi", "Adam"], ["hello", "Eve"]],
+ [txt, txt_2],
+ txt_3,
+ combine,
+ cache_examples=True,
+ )
+ gr.Markdown("## Image Examples")
+ gr.Examples(
+ examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
+ inputs=im,
+ outputs=im_2,
+ fn=mirror,
+ cache_examples=True,
+ )
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
# This demo needs to be run from the repo folder.
+# python demo/fake_gan/run.py
+import os
+import random
+
+import gradio as gr
+
+
+def fake_gan():
+ images = [
+ (random.choice(
+ [
+ "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+ "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
+ "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
+ "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+ "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
+ ]
+ ), f"label {i}" if i != 0 else "label" * 50)
+ for i in range(3)
+ ]
+ return images
+
+
+with gr.Blocks() as demo:
+ with gr.Column(variant="panel"):
+ with gr.Row(variant="compact"):
+ text = gr.Textbox(
+ label="Enter your prompt",
+ show_label=False,
+ max_lines=1,
+ placeholder="Enter your prompt",
+ ).style(
+ container=False,
+ )
+ btn = gr.Button("Generate image").style(full_width=False)
+
+ gallery = gr.Gallery(
+ label="Generated images", show_label=False, elem_id="gallery"
+ ).style(grid=[2], height="auto")
+
+ btn.click(fake_gan, None, gallery)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.Examples( examples, inputs, ยทยทยท)
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
+
+
import gradio as gr
+import os
+
+
+def combine(a, b):
+ return a + " " + b
+
+
+def mirror(x):
+ return x
+
+
+with gr.Blocks() as demo:
+
+ txt = gr.Textbox(label="Input", lines=2)
+ txt_2 = gr.Textbox(label="Input 2")
+ txt_3 = gr.Textbox(value="", label="Output")
+ btn = gr.Button(value="Submit")
+ btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])
+
+ with gr.Row():
+ im = gr.Image()
+ im_2 = gr.Image()
+
+ btn = gr.Button(value="Mirror Image")
+ btn.click(mirror, inputs=[im], outputs=[im_2])
+
+ gr.Markdown("## Text Examples")
+ gr.Examples(
+ [["hi", "Adam"], ["hello", "Eve"]],
+ [txt, txt_2],
+ txt_3,
+ combine,
+ cache_examples=True,
+ )
+ gr.Markdown("## Image Examples")
+ gr.Examples(
+ examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
+ inputs=im,
+ outputs=im_2,
+ fn=mirror,
+ cache_examples=True,
+ )
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ examples
+
+ List[Any] | List[List[Any]] | str
+
+ required
+
+
+
+ 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
+
+ IOComponent | List[IOComponent]
+
+ required
+
+
+
+ the component or list of components corresponding to the examples
+
+
+
+
+
+
+
+
+ outputs
+
+ IOComponent | List[IOComponent] | None
+
+ default: None
+
+
+
+ optionally, provide the component or list of components corresponding to the output of the examples. Required if `cache` is True.
+
+
+
+
+
+
+
+
+ fn
+
+ Callable | None
+
+ default: None
+
+
+
+ optionally, provide the function to run to generate the outputs corresponding to the examples. Required if `cache` is True.
+
+
+
+
+
+
+
+
+ cache_examples
+
+ bool
+
+ default: False
+
+
+
+ if True, caches examples for fast runtime. If True, then `fn` and `outputs` need to be provided
+
+
+
+
+
+
+
+
+ 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 True.
+
+
+
+
+
+
+
+
+ postprocess
+
+ bool
+
+ default: True
+
+
+
+ if True, postprocesses the example output after running the prediction function and before caching. Only applies if cache_examples is True.
+
+
+
+
+
+
+
+
+ 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 True.
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ progress
+
+
+
+
+
+
+
+
import gradio as gr
+import random
+import time
+import tqdm
+from datasets import load_dataset
+import shutil
+from uuid import uuid4
+
+with gr.Blocks() as demo:
+ with gr.Row():
+ text = gr.Textbox()
+ textb = gr.Textbox()
+ with gr.Row():
+ load_set_btn = gr.Button("Load Set")
+ load_nested_set_btn = gr.Button("Load Nested Set")
+ load_random_btn = gr.Button("Load Random")
+ clean_imgs_btn = gr.Button("Clean Images")
+ wait_btn = gr.Button("Wait")
+ do_all_btn = gr.Button("Do All")
+ track_tqdm_btn = gr.Button("Bind TQDM")
+ bind_internal_tqdm_btn = gr.Button("Bind Internal TQDM")
+
+ text2 = gr.Textbox()
+
+ # track list
+ def load_set(text, text2, progress=gr.Progress()):
+ imgs = [None] * 24
+ for img in progress.tqdm(imgs, desc="Loading from list"):
+ time.sleep(0.1)
+ return "done"
+ load_set_btn.click(load_set, [text, textb], text2)
+
+ # track nested list
+ def load_nested_set(text, text2, progress=gr.Progress()):
+ imgs = [[None] * 8] * 3
+ for img_set in progress.tqdm(imgs, desc="Nested list"):
+ time.sleep(2)
+ for img in progress.tqdm(img_set, desc="inner list"):
+ time.sleep(0.1)
+ return "done"
+ load_nested_set_btn.click(load_nested_set, [text, textb], text2)
+
+ # track iterable of unknown length
+ def load_random(data, progress=gr.Progress()):
+ def yielder():
+ for i in range(0, random.randint(15, 20)):
+ time.sleep(0.1)
+ yield None
+ for img in progress.tqdm(yielder()):
+ pass
+ return "done"
+ load_random_btn.click(load_random, {text, textb}, text2)
+
+ # manual progress
+ def clean_imgs(text, progress=gr.Progress()):
+ progress(0.2, desc="Collecting Images")
+ time.sleep(1)
+ progress(0.5, desc="Cleaning Images")
+ time.sleep(1.5)
+ progress(0.8, desc="Sending Images")
+ time.sleep(1.5)
+ return "done"
+ clean_imgs_btn.click(clean_imgs, text, text2)
+
+ # no progress
+ def wait(text):
+ time.sleep(4)
+ return "done"
+ wait_btn.click(wait, text, text2)
+
+ # multiple progressions
+ def do_all(data, progress=gr.Progress()):
+ load_set(data[text], data[textb], progress)
+ load_random(data, progress)
+ clean_imgs(data[text], progress)
+ progress(None)
+ wait(text)
+ return "done"
+ do_all_btn.click(do_all, {text, textb}, text2)
+
+ def track_tqdm(data, progress=gr.Progress(track_tqdm=True)):
+ for i in tqdm.tqdm(range(5), desc="outer"):
+ for j in tqdm.tqdm(range(4), desc="inner"):
+ time.sleep(1)
+ return "done"
+ track_tqdm_btn.click(track_tqdm, {text, textb}, text2)
+
+ def bind_internal_tqdm(data, progress=gr.Progress(track_tqdm=True)):
+ outdir = "__tmp/" + str(uuid4())
+ dataset = load_dataset("beans", split="train", cache_dir=outdir)
+ shutil.rmtree(outdir)
+ return "done"
+ bind_internal_tqdm_btn.click(bind_internal_tqdm, {text, textb}, text2)
+
+
+if __name__ == "__main__":
+ demo.queue(concurrency_count=20).launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The Progress class provides a custom progress tracker that is used in a function signature. To attach a Progress tracker to a function, simply add a parameter right after the input parameters that has a default value set to a `gradio.Progress()` instance. The Progress tracker can then be updated in the function by calling the Progress object or using the `tqdm` method on an Iterable. The Progress tracker is currently only available with `queue()`.
+
+
+
+
+
Example Usage
+
+
import gradio as gr
+import time
+def my_function(x, progress=gr.Progress()):
+ progress(0, desc="Starting...")
+ time.sleep(1)
+ for i in progress.tqdm(range(100)):
+ time.sleep(0.1)
+ return x
+gr.Interface(my_function, gr.Textbox(), gr.Textbox()).queue().launch()
+
+
+
+ More Examples โ
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ track_tqdm
+
+ bool
+
+ default: False
+
+
+
+ If True, the Progress object will track any tqdm.tqdm iterations with the tqdm library in the function.
+
+
+
+
+
+
+
+
+
+
+
Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Progress(progress, ยทยทยท)
+
+
+
Updates progress tracker with progress and message text.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ progress
+
+ float | Tuple[int, int | None] | None
+
+ required
+
+
+
+ If float, should be between 0 and 1 representing completion. If Tuple, first number represents steps completed, and second value represents total steps or None if unknown. If None, hides progress bar.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.Progress.tqdm( iterable, args, ยทยทยท)
+
+
+
Attaches progress tracker to iterable, like tqdm.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ iterable
+
+ Iterable | None
+
+ required
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ args
+
+
+
+ required
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about Progress
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ blocks_essay
+
+ blocks_update
+
+ blocks_essay_update
+
+
+
+
+
+
+
+
import gradio as gr
+
+
+def change_textbox(choice):
+ if choice == "short":
+ return gr.Textbox.update(lines=2, visible=True)
+ elif choice == "long":
+ return gr.Textbox.update(lines=8, visible=True)
+ else:
+ return gr.Textbox.update(visible=False)
+
+
+with gr.Blocks() as demo:
+ radio = gr.Radio(
+ ["short", "long", "none"], label="What kind of essay would you like to write?"
+ )
+ text = gr.Textbox(lines=2, interactive=True)
+
+ radio.change(fn=change_textbox, inputs=radio, outputs=text)
+
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+with gr.Blocks() as demo:
+ gr.Markdown(
+ """
+ # Animal Generator
+ Once you select a species, the detail panel should be visible.
+ """
+ )
+
+ species = gr.Radio(label="Animal Class", choices=["Mammal", "Fish", "Bird"])
+ animal = gr.Dropdown(label="Animal", choices=[])
+
+ with gr.Column(visible=False) as details_col:
+ weight = gr.Slider(0, 20)
+ details = gr.Textbox(label="Extra Details")
+ generate_btn = gr.Button("Generate")
+ output = gr.Textbox(label="Output")
+
+ species_map = {
+ "Mammal": ["Elephant", "Giraffe", "Hamster"],
+ "Fish": ["Shark", "Salmon", "Tuna"],
+ "Bird": ["Chicken", "Eagle", "Hawk"],
+ }
+
+ def filter_species(species):
+ return gr.Dropdown.update(
+ choices=species_map[species], value=species_map[species][1]
+ ), gr.update(visible=True)
+
+ species.change(filter_species, species, [animal, details_col])
+
+ def filter_weight(animal):
+ if animal in ("Elephant", "Shark", "Giraffe"):
+ return gr.update(maximum=100)
+ else:
+ return gr.update(maximum=20)
+
+ animal.change(filter_weight, animal, weight)
+ weight.change(lambda w: gr.update(lines=int(w / 10) + 1), weight, details)
+
+ generate_btn.click(lambda x: x, details, output)
+
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
import gradio as gr
+
+def change_textbox(choice):
+ if choice == "short":
+ return gr.update(lines=2, visible=True, value="Short story: ")
+ elif choice == "long":
+ return gr.update(lines=8, visible=True, value="Long story...")
+ else:
+ return gr.update(visible=False)
+
+with gr.Blocks() as demo:
+ radio = gr.Radio(
+ ["short", "long", "none"], label="Essay Length to Write?"
+ )
+ text = gr.Textbox(lines=2, interactive=True)
+ radio.change(fn=change_textbox, inputs=radio, outputs=text)
+
+if __name__ == "__main__":
+ demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Try Examples
+
+
+
+
+
gradio.update( kwargs, ยทยทยท)
+
+
+
Updates component properties. When a function passed into a Gradio Interface or a Blocks events returns a typical value, it updates the value of the output component. But it is also possible to update the properties of an output component (such as the number of lines of a `Textbox` or the visibility of an `Image`) by returning the component's `update()` function, which takes as parameters any of the constructor parameters for that component. This is a shorthand for using the update method on a component. For example, rather than using gr.Number.update(...) you can just use gr.update(...). Note that your editor's autocompletion will suggest proper parameters if you use the update method on the component.
+
+
+
+
+
Example Usage
+
+
# Blocks Example
+import gradio as gr
+with gr.Blocks() as demo:
+ radio = gr.Radio([1, 2, 4], label="Set the value of the number")
+ number = gr.Number(value=2, interactive=True)
+ radio.change(fn=lambda value: gr.update(value=value), inputs=radio, outputs=number)
+demo.launch()
+
+# Interface example
+import gradio as gr
+def change_textbox(choice):
+ if choice == "short":
+ return gr.Textbox.update(lines=2, visible=True)
+ elif choice == "long":
+ return gr.Textbox.update(lines=8, visible=True)
+ else:
+ return gr.Textbox.update(visible=False)
+gr.Interface(
+ change_textbox,
+ gr.Radio(
+ ["short", "long", "none"], label="What kind of essay would you like to write?"
+ ),
+ gr.Textbox(lines=2),
+ live=True,
+).launch()
+
+
+
+ More Examples โ
+
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+ kwargs
+
+
+
+ required
+
+
+
+ Key-word arguments used to update the component's properties.
+
+
+
+
+
+
+
+
+
+
+
+
Step-by-step Guides
+
+
No guides yet, contribute a guide about update
+
+
+
+
+
+
+
+ Gradio includes some helper functions for exposing and interacting with the FastAPI app
+ used to run your demo.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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`, and `path_params`,
+
+
+
+
+
Example Usage
+
+
import gradio as gr
+def echo(name, request: gr.Request):
+ print("Request headers dictionary:", request.headers)
+ print("IP address:", request.client.host)
+ return name
+io = gr.Interface(echo, "textbox", "textbox").launch()
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+
+
+ request
+
+ fastapi.Request | None
+
+ default: None
+
+
+
+ A fastapi.Request
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
gradio.mount_gradio_app( app, blocks, path, ยทยทยท)
+
+
+
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.
+
+
+
+
+
+
+
+
+
+ Parameter
+ Description
+
+
+
+
+
+
+
+
+ app
+
+ fastapi.FastAPI
+
+ required
+
+
+
+ The parent FastAPI application.
+
+
+
+
+
+
+
+
+ blocks
+
+ gradio.Blocks
+
+ required
+
+
+
+ The blocks object we want to mount to the parent app.
+
+
+
+
+
+
+
+
+ path
+
+ str
+
+ required
+
+
+
+ The path at which the gradio application will be mounted.
+
+
+
+
+
+
+
+
+ gradio_api_url
+
+ str | None
+
+ default: None
+
+
+
+ The full url at which the gradio app will run. This is only needed if deploying to Huggingface spaces of if the websocket endpoints of your deployed app are on a different network location than the gradio app. If deploying to spaces, set gradio_api_url to 'http://localhost:7860/'
+
+
+
+
+
+
+
+
+
+
+
+
+