Adds a demo / information about how to create demos with variable #s of outputs (#3127)

* added demo

* added to guide

* changelog

* notebooks

* update demo

CHANGELOG.md

@@ -45,8 +45,8 @@ By [@maxaudron](https://github.com/maxaudron) in [PR 3075](https://github.com/gr
 
 ## Documentation Changes:
 - Added a guide on the 4 kinds of Gradio Interfaces by [@yvrjsharma](https://github.com/yvrjsharma) and [@abidlabs](https://github.com/abidlabs) in [PR 3003](https://github.com/gradio-app/gradio/pull/3003) 
-* Explained that the parameters in `launch` will not be respected when using reload mode, e.g. `gradio` command by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3089](https://github.com/gradio-app/gradio/pull/3089) 
-* Explained that the parameters in `launch` will not be respected when using reload mode, e.g. `gradio` command  by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3089](https://github.com/gradio-app/gradio/pull/3089) 
+- Explained that the parameters in `launch` will not be respected when using reload mode, e.g. `gradio` command  by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3089](https://github.com/gradio-app/gradio/pull/3089) 
+- Added a demo to show how to set up variable numbers of outputs in Gradio by  [@abidlabs](https://github.com/abidlabs) in [PR 3127](https://github.com/gradio-app/gradio/pull/3127) 
 - Updated docs to reflect that the `equal_height` parameter should be passed to the `.style()` method of `gr.Row()` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3125](https://github.com/gradio-app/gradio/pull/3125) 
 
 ## Testing and Infrastructure Changes:

demo/variable_outputs/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: variable_outputs"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "max_textboxes = 10\n", "\n", "def variable_outputs(k):\n", "    k = int(k)\n", "    return [gr.Textbox.update(visible=True)]*k + [gr.Textbox.update(visible=False)]*(max_textboxes-k)\n", "\n", "with gr.Blocks() as demo:\n", "    s = gr.Slider(1, max_textboxes, value=max_textboxes, step=1, label=\"How many textboxes to show:\")\n", "    textboxes = []\n", "    for i in range(max_textboxes):\n", "        t = gr.Textbox(f\"Textbox {i}\")\n", "        textboxes.append(t)\n", "\n", "    s.change(variable_outputs, s, textboxes)\n", "\n", "if __name__ == \"__main__\":\n", "   demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/variable_outputs/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+
+max_textboxes = 10
+
+def variable_outputs(k):
+    k = int(k)
+    return [gr.Textbox.update(visible=True)]*k + [gr.Textbox.update(visible=False)]*(max_textboxes-k)
+
+with gr.Blocks() as demo:
+    s = gr.Slider(1, max_textboxes, value=max_textboxes, step=1, label="How many textboxes to show:")
+    textboxes = []
+    for i in range(max_textboxes):
+        t = gr.Textbox(f"Textbox {i}")
+        textboxes.append(t)
+
+    s.change(variable_outputs, s, textboxes)
+
+if __name__ == "__main__":
+   demo.launch()

guides/03_building-with-blocks/02_controlling-layout.md

@@ -57,6 +57,14 @@ Both Components and Layout elements have a `visible` argument that can set initi
 $code_blocks_form
 $demo_blocks_form
 
+By adjusting the visibility of components in a dynamic way, it is possible to create 
+machine learning demos that support *variable numbers of outputs*. Here's a simple example
+where the number of output textboxes is controlled by an input slider:
+
+$code_variable_outputs
+$demo_variable_outputs
+
+
 ## Defining and Rendering Components Separately
 
 In some cases, you might want to define components before you actually render them in your UI. For instance, you might want to show an examples section using `gr.Examples` above the corresponding `gr.Textbox` input. Since `gr.Examples` requires as a parameter the input component object, you will need to first define the input component, but then render it later, after you have defined the `gr.Examples` object.