Suggestion: add more info on update() (#1896)

* more on update'

* Move example to docstring

Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>

gradio/blocks.py

@@ -213,12 +213,30 @@ def update(**kwargs) -> dict:
     Parameters:
         kwargs: Key-word arguments used to update the component's properties.
     Example:
+        # Blocks Example
         import gradio as gr
         with gr.Blocks() as demo:
             radio = gr.Radio([1, 2, 4], label="Set the value of the number")
             number = gr.Number(value=2, interactive=True)
             radio.change(fn=lambda value: gr.update(value=value), inputs=radio, outputs=number)
         demo.launch()
+        # Interface example
+        import gradio as gr
+        def change_textbox(choice):
+          if choice == "short":
+              return gr.Textbox.update(lines=2, visible=True)
+          elif choice == "long":
+              return gr.Textbox.update(lines=8, visible=True)
+          else:
+              return gr.Textbox.update(visible=False)
+        gr.Interface(
+          change_textbox,
+          gr.Radio(
+              ["short", "long", "none"], label="What kind of essay would you like to write?"
+          ),
+          gr.Textbox(lines=2),
+          live=True,
+        ).launch()
     """
     kwargs["__type__"] = "generic_update"
     return kwargs

website/homepage/src/docs/template.html

@@ -149,7 +149,13 @@
         </section>
         <section id="update" class="pt-2 flex flex-col gap-10">
             <h3 class="text-3xl font-light my-4" id="update-section-header">Update</h3>
-            <p class="mb-12">The update function updates component properties. Works for both Interface and Blocks demos.
+            <p class="mb-12 text-lg">When a function passed into a Gradio Interface or 
+              a Blocks events returns a typical value, it updates the value of the 
+              output component. But it is also possible to update the <em>properties</em> 
+              of an output component (such as the number of lines of a `Textbox` or 
+              the visibility of an `Image`) by returning the component's `update()` function, 
+              which takes as parameters any of the constructor parameters for that component.
+              Here's an example:
             </p>
             <div class="flex flex-col gap-10">
               {% with obj=find_cls("update"), parent="gradio" %}