mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-15 02:11:15 +08:00
9b42ba8f10
* changes * changes * revert changes * changes * add changeset * notebooks script * changes * changes --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>
73 lines
3.6 KiB
Plaintext
73 lines
3.6 KiB
Plaintext
# More Blocks Features
|
|
|
|
## Examples
|
|
|
|
Just like with `gr.Interface`, you can also add examples for your functions when you are working with `gr.Blocks`. In this case, instantiate a `gr.Examples` similar to how you would instantiate any other component. The constructor of `gr.Examples` takes two required arguments:
|
|
|
|
* `examples`: a nested list of examples, in which the outer list consists of examples and each inner list consists of an input corresponding to each input component
|
|
* `inputs`: the component or list of components that should be populated when the examples are clicked
|
|
|
|
You can also set `cache_examples=True` or `cache_examples='lazy'`, similar to [the caching API in `gr.Interface`](https://www.gradio.app/guides/more-on-examples), in which case two additional arguments must be provided:
|
|
|
|
* `outputs`: the component or list of components corresponding to the output of the examples
|
|
* `fn`: the function to run to generate the outputs corresponding to the examples
|
|
|
|
Here's an example showing how to use `gr.Examples` in a `gr.Blocks` app:
|
|
|
|
$code_calculator_blocks
|
|
$demo_calculator_blocks
|
|
|
|
**Note**: When you click on examples, not only does the value of the input component update to the example value, but the component's configuration also reverts to the properties with which you constructed the component. This ensures that the examples are compatible with the component even if its configuration has been changed.
|
|
|
|
## Running Events Continuously
|
|
|
|
You can run events on a fixed schedule using `gr.Timer()` object. This will run the event when the timer's `tick` event fires. See the code below:
|
|
|
|
```python
|
|
with gr.Blocks as demo:
|
|
timer = gr.Timer(5)
|
|
textbox = gr.Textbox()
|
|
textbox2 = gr.Textbox()
|
|
timer.tick(set_textbox_fn, textbox, textbox2)
|
|
```
|
|
|
|
This can also be used directly with a Component's `every=` parameter, if the value of the Component is a function:
|
|
|
|
```python
|
|
with gr.Blocks as demo:
|
|
timer = gr.Timer(5)
|
|
textbox = gr.Textbox()
|
|
textbox2 = gr.Textbox(set_textbox_fn, inputs=[textbox], every=timer)
|
|
```
|
|
|
|
Here is an example of a demo that print the current timestamp, and also prints random numbers regularly!
|
|
|
|
$code_timer_simple
|
|
$demo_timer_simple
|
|
|
|
## Gathering Event Data
|
|
|
|
You can gather specific data about an event by adding the associated event data class as a type hint to an argument in the event listener function.
|
|
|
|
For example, event data for `.select()` can be type hinted by a `gradio.SelectData` argument. This event is triggered when a user selects some part of the triggering component, and the event data includes information about what the user specifically selected. For example, if a user selected a specific word in a `Textbox`, a specific pixel in an `Image`, a specific image in a `Gallery`, or a specific cell in a `DataFrame`, the event data argument would contain information about the specific selection.
|
|
|
|
The `SelectData` includes the value that was selected, and the index where the selection occurred. A simple example that shows what text was selected in a `Textbox`.
|
|
|
|
```python
|
|
import gradio as gr
|
|
|
|
with gr.Blocks() as demo:
|
|
textbox = gr.Textbox("The quick brown fox jumped.")
|
|
selection = gr.Textbox()
|
|
|
|
def get_selection(select_evt: gr.SelectData):
|
|
return select_evt.value
|
|
|
|
textbox.select(get_selection, None, selection)
|
|
```
|
|
|
|
In the 2 player tic-tac-toe demo below, a user can select a cell in the `DataFrame` to make a move. The event data argument contains information about the specific cell that was selected. We can first check to see if the cell is empty, and then update the cell with the user's move.
|
|
|
|
$code_tictactoe
|
|
$demo_tictactoe
|