{"guide": {"name": "reactive-interfaces", "category": "building-interfaces", "pretty_category": "Building Interfaces", "guide_index": 4, "absolute_index": 7, "pretty_name": "Reactive Interfaces", "content": "# Reactive Interfaces\n\nFinally, we cover how to get Gradio demos to refresh automatically or continuously stream data.\n\n## Live Interfaces\n\nYou can make interfaces automatically refresh by setting `live=True` in the interface. Now the interface will recalculate as soon as the user input changes.\n\n```python\nimport gradio as gr\n\ndef calculator(num1, operation, num2):\n    if operation == \"add\":\n        return num1 + num2\n    elif operation == \"subtract\":\n        return num1 - num2\n    elif operation == \"multiply\":\n        return num1 * num2\n    elif operation == \"divide\":\n        return num1 / num2\n\ndemo = gr.Interface(\n    calculator,\n    [\n        \"number\",\n        gr.Radio([\"add\", \"subtract\", \"multiply\", \"divide\"]),\n        \"number\"\n    ],\n    \"number\",\n    live=True,\n)\ndemo.launch()\n\n```\n<gradio-app space='gradio/calculator_live'></gradio-app>\n\nNote there is no submit button, because the interface resubmits automatically on change.\n\n## Streaming Components\n\nSome 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.\n\nThe 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.\n\nHere is example code of streaming images from the webcam.\n\n```python\nimport gradio as gr\nimport numpy as np\n\ndef flip(im):\n    return np.flipud(im)\n\ndemo = gr.Interface(\n    flip, \n    gr.Image(sources=[\"webcam\"], streaming=True), \n    \"image\",\n    live=True\n)\ndemo.launch()\n    \n```\n\nStreaming 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.\n\n```python\nimport gradio as gr\nfrom pydub import AudioSegment\nfrom time import sleep\n\nwith gr.Blocks() as demo:\n    input_audio = gr.Audio(label=\"Input Audio\", type=\"filepath\", format=\"mp3\")\n    with gr.Row():\n        with gr.Column():\n            stream_as_file_btn = gr.Button(\"Stream as File\")\n            format = gr.Radio([\"wav\", \"mp3\"], value=\"wav\", label=\"Format\")\n            stream_as_file_output = gr.Audio(streaming=True)\n\n            def stream_file(audio_file, format):\n                audio = AudioSegment.from_file(audio_file)\n                i = 0\n                chunk_size = 1000\n                while chunk_size * i < len(audio):\n                    chunk = audio[chunk_size * i : chunk_size * (i + 1)]\n                    i += 1\n                    if chunk:\n                        file = f\"/tmp/{i}.{format}\"\n                        chunk.export(file, format=format)\n                        yield file\n                        sleep(0.5)\n\n            stream_as_file_btn.click(\n                stream_file, [input_audio, format], stream_as_file_output\n            )\n\n            gr.Examples(\n                [[\"audio/cantina.wav\", \"wav\"], [\"audio/cantina.wav\", \"mp3\"]],\n                [input_audio, format],\n                fn=stream_file,\n                outputs=stream_as_file_output,\n            )\n\n        with gr.Column():\n            stream_as_bytes_btn = gr.Button(\"Stream as Bytes\")\n            stream_as_bytes_output = gr.Audio(format=\"bytes\", streaming=True)\n\n            def stream_bytes(audio_file):\n                chunk_size = 20_000\n                with open(audio_file, \"rb\") as f:\n                    while True:\n                        chunk = f.read(chunk_size)\n                        if chunk:\n                            yield chunk\n                            sleep(1)\n                        else:\n                            break\n            stream_as_bytes_btn.click(stream_bytes, input_audio, stream_as_bytes_output)\n\nif __name__ == \"__main__\":\n    demo.queue().launch()\n\n```\n\nFor a more detailed example, see our guide on performing [automatic speech recognition](/guides/real-time-speech-recognition) with Gradio.\n", "tags": [], "spaces": [], "url": "/guides/reactive-interfaces/", "contributor": null}}