Custom Components GalleryNEW
ExploreCustom Components GalleryNEW
ExploreNew to Gradio? Start here: Getting Started
See the Release History
To install Gradio from main, run the following command:
pip install https://gradio-builds.s3.amazonaws.com/98c1cbcd0e3b66a8d2463820d3ce157efe0a032d/gradio-4.31.4-py3-none-any.whl
*Note: Setting share=True
in
launch()
will not work.
gradio.Code(···)
Creates a code editor for viewing code (as an output component), or for entering and editing code (as an input component).
As input component: Passes the code entered as a str
.
Your function should accept one of these types:
def predict(
value: str | None
)
...
As output component: Expects a str
of code or a single-element tuple
: (filepath,) with the str
path to a file containing the code.
Your function should return one of these types:
def predict(···) -> tuple[str] | str | None
...
return value
Parameter | Description |
---|---|
value str | Callable | tuple[str] | None default: None | Default value to show in the code editor. If callable, the function will be called whenever the app loads to set the initial value of the component. |
language Literal[('python', 'markdown', 'json', 'html', 'css', 'javascript', 'typescript', 'yaml', 'dockerfile', 'shell', 'r', 'sql', 'sql-msSQL', 'sql-mySQL', 'sql-mariaDB', 'sql-sqlite', 'sql-cassandra', 'sql-plSQL', 'sql-hive', 'sql-pgSQL', 'sql-gql', 'sql-gpSQL', 'sql-sparkSQL', 'sql-esper')] | None default: None | The language to display the code as. Supported languages listed in |
every float | None default: None | If |
lines int default: 5 | |
label str | None default: None | The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a |
interactive bool | None default: None | Whether user should be able to enter code or only view it. |
show_label bool | None default: None | if True, will display label. |
container bool default: True | If True, will place the component in a container - providing some extra padding around the border. |
scale int | None default: None | relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True. |
min_width int default: 160 | minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. |
visible bool default: True | If False, component will be hidden. |
elem_id str | None default: None | An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. |
elem_classes list[str] | str | None default: None | An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. |
render bool default: True | If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later. |
key int | str | None default: None | if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved. |
Event listeners allow you to capture and respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.
The Code component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Arguments table below.
Listener | Description |
---|---|
| ['python', 'markdown', 'json', 'html', 'css', 'javascript', 'typescript', 'yaml', 'dockerfile', 'shell', 'r', 'sql', 'sql-msSQL', 'sql-mySQL', 'sql-mariaDB', 'sql-sqlite', 'sql-cassandra', 'sql-plSQL', 'sql-hive', 'sql-pgSQL', 'sql-gql', 'sql-gpSQL', 'sql-sparkSQL', 'sql-esper', None] |
| Triggered when the value of the Code changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See |
| This listener is triggered when the user changes the value of the Code. |
| This listener is triggered when the Code is focused. |
| This listener is triggered when the Code is unfocused/blurred. |
Parameter | Description |
---|