> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Reactive interfaces

> Learn how to create live and streaming interfaces that update automatically in Gradio

Gradio interfaces can automatically refresh or continuously stream data, making them perfect for real-time applications.

## Live interfaces

Make your interface automatically recalculate whenever user input changes by setting `live=True`:

```python theme={null}
import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2

demo = gr.Interface(
    calculator,
    inputs=[
        "number",
        gr.Radio(["add", "subtract", "multiply", "divide"]),
        "number"
    ],
    outputs="number",
    live=True,
)

demo.launch()
```

<Note>
  Notice there's no submit button - the interface resubmits automatically on change.
</Note>

## How live mode works

When `live=True`:

1. The interface listens for changes on all input components
2. When any input changes, the function automatically runs
3. Outputs update immediately without clicking a button
4. The submit button is hidden

This is ideal for:

* Real-time calculators and converters
* Interactive data visualizations
* Live image/audio filters
* Instant feedback applications

## Streaming components

Some components support a "streaming" mode that continuously sends data to the backend:

* `Audio` component in microphone mode
* `Image` component in webcam mode

Streaming means data is sent continuously and the Interface function keeps running.

## Streaming vs live mode

There's an important difference between regular and streaming components in live mode:

<CodeGroup>
  ```python Regular live component theme={null}
  # Submits when user STOPS recording
  gr.Interface(
      fn=transcribe_audio,
      inputs=gr.Audio(sources=["microphone"]),
      outputs="text",
      live=True
  )
  ```

  ```python Streaming live component theme={null}
  # Submits continuously DURING recording
  gr.Interface(
      fn=transcribe_audio,
      inputs=gr.Audio(sources=["microphone"], streaming=True),
      outputs="text",
      live=True
  )
  ```
</CodeGroup>

With `streaming=True`, the function runs continuously during recording, not just when recording stops.

## Streaming webcam input

Here's an example of streaming images from the webcam:

```python theme={null}
import gradio as gr
import numpy as np

def flip(im):
    return np.flipud(im)

demo = gr.Interface(
    flip,
    inputs=gr.Image(sources=["webcam"], streaming=True),
    outputs="image",
    live=True,
)

demo.launch()
```

This continuously:

1. Captures frames from the webcam
2. Sends them to the `flip` function
3. Displays the flipped output in real-time

## Streaming output

Streaming can also be used in output components. A `gr.Audio(streaming=True)` output can take a stream of audio data yielded piece-wise by a generator function:

```python theme={null}
import gradio as gr
import numpy as np

def generate_audio_stream():
    # Generator function that yields audio chunks
    for i in range(10):
        # Generate audio chunk
        audio_chunk = np.random.randn(8000)  # 1 second at 8kHz
        yield (8000, audio_chunk)

demo = gr.Interface(
    fn=generate_audio_stream,
    inputs=None,
    outputs=gr.Audio(streaming=True),
)

demo.launch()
```

The output component combines all yielded chunks into a single audio file.

## Stream configuration

You can configure streaming behavior with these Interface parameters:

<AccordionGroup>
  <Accordion title="time_limit">
    Maximum time (in seconds) for streaming to run:

    ```python theme={null}
    gr.Interface(
        fn=stream_function,
        inputs=gr.Image(sources=["webcam"], streaming=True),
        outputs="image",
        live=True,
        time_limit=30  # Stop streaming after 30 seconds
    )
    ```

    Default is 30 seconds.
  </Accordion>

  <Accordion title="stream_every">
    Latency (in seconds) between stream chunks sent to backend:

    ```python theme={null}
    gr.Interface(
        fn=stream_function,
        inputs=gr.Image(sources=["webcam"], streaming=True),
        outputs="image",
        live=True,
        stream_every=0.5  # Send chunks every 0.5 seconds
    )
    ```

    Default is 0.5 seconds.
  </Accordion>
</AccordionGroup>

<Note>
  These parameters only apply when:

  * The interface is in live mode (`live=True`)
  * Input components have `streaming=True`
</Note>

## Use cases

<CardGroup cols={2}>
  <Card title="Real-time speech recognition" icon="microphone">
    Stream audio from microphone and transcribe in real-time
  </Card>

  <Card title="Live video filters" icon="video">
    Apply filters to webcam feed with immediate preview
  </Card>

  <Card title="Interactive calculators" icon="calculator">
    Show results as users type or adjust sliders
  </Card>

  <Card title="Audio synthesis" icon="waveform">
    Generate and stream audio output progressively
  </Card>
</CardGroup>

## Performance considerations

<Warning>
  Streaming and live interfaces can be resource-intensive:

  * Functions run frequently, consuming more compute
  * Network bandwidth increases with continuous data transfer
  * Consider rate limiting for production deployments
  * Use `stream_every` to control update frequency
</Warning>

## When not to use live mode

Avoid live mode when:

* Your function is computationally expensive
* You want users to review inputs before submitting
* Processing takes significant time
* You need to batch requests for efficiency

For these cases, use standard mode with a submit button.

## Advanced streaming examples

For detailed examples of streaming in action, see:

* [Real-time speech recognition guide](/guides/real-time-speech-recognition)
* [Streaming audio guide](/guides/streaming-audio)

## Next steps

<CardGroup cols={2}>
  <Card title="Interface class" icon="cube" href="/guides/interface-class">
    Learn more about the Interface class
  </Card>

  <Card title="Interface types" icon="grid" href="/guides/interface-types">
    Explore the 4 different types of interfaces
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.