gradio/guides/02_building-interfaces/04_reactive-interfaces.md
Abubakar Abid 7bb561a294
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-20 11:07:48 -08:00

1.5 KiB

Reactive Interfaces

Finally, we cover how to get Gradio demos to refresh automatically or continuously stream data.

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.

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.

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.

$code_stream_audio_out

For a more detailed example, see our guide on performing automatic speech recognition with Gradio.