gradio/guides/02_building-interfaces/04_reactive-interfaces.md

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

25 lines
1.5 KiB
Markdown
Raw Normal View History

2022-07-25 09:18:42 +08:00
# Reactive Interfaces
Rewriting parts of the README and getting started guides for 4.0 (#6767) * doc rewrite * changes * changes * tip * changes * notebook * add changeset * history * add * quickstart done * readme * changes * quickstart * changes * reorder * link * changes * changes * changes * quickstart done * readme * quickstart * quickstart' * moving around * spaces * readme * guides * guides * links * readme * readme * readme * readme * readme * readme * readme * readme * readme * readme * email address * add changeset * shorten quickstart * readme * Update README.md * readme * changes * Update guides/01_getting-started/01_quickstart.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * Update guides/01_getting-started/01_quickstart.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * Update guides/01_getting-started/01_quickstart.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * changes * changes * remove gr.Interface.load * guides * changes * more changes * changes * sharing * concurrency * changes * changes * components * key features * event listeners * features * notebook * test * guides * changes * changes * changes * transitions * readme links * links * links * guides * new gif * add gif * update gif * Update guides/02_building-interfaces/01_more-on-examples.md * Update guides/03_building-with-blocks/01_blocks-and-event-listeners.md * Update guides/01_getting-started/01_quickstart.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * Update guides/01_getting-started/02_key-features.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * Update guides/01_getting-started/02_key-features.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * Update guides/02_building-interfaces/00_the-interface-class.md Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * Update guides/01_getting-started/01_quickstart.md Co-authored-by: Hannah <hannahblair@users.noreply.github.com> * Update guides/01_getting-started/02_key-features.md Co-authored-by: Hannah <hannahblair@users.noreply.github.com> * Update guides/01_getting-started/02_key-features.md Co-authored-by: Hannah <hannahblair@users.noreply.github.com> * changes * replace space * changes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
2023-12-21 03:07:48 +08:00
Finally, we cover how to get Gradio demos to refresh automatically or continuously stream data.
2022-07-25 09:18:42 +08:00
## Live Interfaces
You can make interfaces automatically refresh by setting `live=True` in the interface. Now the interface will recalculate as soon as the user input changes.
$code_calculator_live
$demo_calculator_live
Note there is no submit button, because the interface resubmits automatically on change.
## Streaming Components
Some components have a "streaming" mode, such as `Audio` component in microphone mode, or the `Image` component in webcam mode. Streaming means data is sent continuously to the backend and the `Interface` function is continuously being rerun.
2022-07-25 09:18:42 +08:00
The difference between `gr.Audio(source='microphone')` and `gr.Audio(source='microphone', streaming=True)`, when both are used in `gr.Interface(live=True)`, is that the first `Component` will automatically submit data and run the `Interface` function when the user stops recording, whereas the second `Component` will continuously send data and run the `Interface` function _during_ recording.
2022-07-25 09:18:42 +08:00
Here is example code of streaming images from the webcam.
$code_stream_frames
Streaming can also be done in an output component. A `gr.Audio(streaming=True)` output component can take a stream of audio data yielded piece-wise by a generator function and combines them into a single audio file. For a detailed example, see our guide on performing [automatic speech recognition](/guides/real-time-speech-recognition) with Gradio.