Fixes to embedded demos in website docs (#1315)

* remove webcam from video demo

* remove blocks_gpt and blocks_neural_instrument_coding demos

* only show Try Examples if examples exist

* remove if name = main from rendereed code

* rename demos that have same name as component

* remove references to old demo names from guides

* add model3d demo

demo/video_flip/run.py

@@ -5,7 +5,7 @@ def video_flip(video):
     return video
 
 
-demo = gr.Interface(video_flip, gr.Video(source="webcam"), "playable_video")
+demo = gr.Interface(video_flip, gr.Video(), "playable_video")
 
 if __name__ == "__main__":
     demo.launch()

gradio/components.py

@@ -2597,7 +2597,7 @@ class Variable(IOComponent):
 
     Preprocessing: No preprocessing is performed
     Postprocessing: No postprocessing is performed
-    Demos: chatbot, blocks_simple_squares
+    Demos: chatbot_demo, blocks_simple_squares
     """
 
     def __init__(
@@ -3213,7 +3213,7 @@ class Chatbot(Changeable, IOComponent):
     Preprocessing: this component does *not* accept input.
     Postprocessing: expects a {List[Tuple[str, str]]}, a list of tuples with user inputs and responses.
 
-    Demos: chatbot
+    Demos: chatbot_demo
     """
 
     def __init__(
@@ -3286,6 +3286,8 @@ class Model3D(Changeable, Editable, Clearable, IOComponent):
     Component creates a 3D Model component with input and output capabilities.
     Input type: File object of type (.obj, glb, or .gltf)
     Output type: filepath
+
+    Demos: model3D_demo
     """
 
     def __init__(

guides/advanced_interface_features.md

@@ -122,8 +122,8 @@ Your function may use data that persists beyond a single function call. If the d
 
 Another type of data persistence Gradio supports is session **state**, where data persists across multiple submits within a page load. However, data is *not* shared between different users of your model. To store data in a session state, you need to do three things: (1) Pass in an extra parameter into your function, which represents the state of the interface. (2) At the end of the function, return the updated value of the state as an extra return value (3) Add the `'state'` input and `'state'` output components when creating your `Interface`. See the chatbot example below: 
 
-{{ code["chatbot"] }}
-{{ demos["chatbot"] }}
+{{ code["chatbot_demo"] }}
+{{ demos["chatbot_demo"] }}
 
 Notice how the state persists across submits within each page, but the state is not shared between the two pages. Some more points to note: you can pass in a default value to the state parameter, which is used as the initial value of the state. The state must be a something that can be serialized to a JSON format (e.g. a dictionary, a list, or a single value. Typically, objects will not work).  
 

website/homepage/render_html.py

@@ -537,7 +537,7 @@ with demo:
     btn.click(fn=update, inputs=inp, outputs=out)
 
 demo.launch()""",
-        "demos": ["blocks_hello", "blocks_flipper", "blocks_gpt", "blocks_speech_text_length"]
+        "demos": ["blocks_hello", "blocks_flipper", "blocks_speech_text_length"]
     }    
     tabbed_interface_docs = get_class_documentation(TabbedInterface, lines=None)["doc"]
     tabbed_interface_params = get_function_documentation(TabbedInterface.__init__)
@@ -545,7 +545,7 @@ demo.launch()""",
         "doc": tabbed_interface_docs,
         "params": tabbed_interface_params[1],
         "params_doc": tabbed_interface_params[2],
-        "demos": ["blocks_neural_instrument_coding", "sst_or_tts"]
+        "demos": ["sst_or_tts"]
     }
     
     series_docs = get_class_documentation(Series, lines=None)["doc"]
@@ -610,28 +610,28 @@ demo.launch()""",
         for code_src in component["demos"]:
             with open(os.path.join(GRADIO_DEMO_DIR, code_src, "run.py")) as code_file:
                 python_code = code_file.read().replace(
-                    'if __name__ == "__main__":\n    iface.launch()', "iface.launch()"
+                    'if __name__ == "__main__":\n    demo.launch()', "demo.launch()"
                 )
                 demo_code[code_src] = python_code
 
     for code_src in interface["demos"]:
         with open(os.path.join(GRADIO_DEMO_DIR, code_src, "run.py")) as code_file:
             python_code = code_file.read().replace(
-                'if __name__ == "__main__":\n    iface.launch()', "iface.launch()"
+                'if __name__ == "__main__":\n    demo.launch()', "demo.launch()"
             )
             demo_code[code_src] = python_code
 
     for code_src in blocks_docs["demos"]:
         with open(os.path.join(GRADIO_DEMO_DIR, code_src, "run.py")) as code_file:
             python_code = code_file.read().replace(
-                'if __name__ == "__main__":\n    iface.launch()', "iface.launch()"
+                'if __name__ == "__main__":\n    demo.launch()', "demo.launch()"
             )
             demo_code[code_src] = python_code
 
     for code_src in tabbed_interface["demos"]:
         with open(os.path.join(GRADIO_DEMO_DIR, code_src, "run.py")) as code_file:
             python_code = code_file.read().replace(
-                'if __name__ == "__main__":\n    iface.launch()', "iface.launch()"
+                'if __name__ == "__main__":\n    demo.launch()', "demo.launch()"
             )
             demo_code[code_src] = python_code
 

website/homepage/src/docs_template.html

@@ -473,9 +473,11 @@
             <h3 id="{{ func['name'].lower() }}-header" class="text-3xl font-light my-4">
               {{ func['name'] }}
             </h3>
+            {% if func['demos'] %}
             <button class="h-2/4 rounded-full bg-orange-500 text-white py-1 px-3 my-3 mx-2 ml-auto" onclick="showDemos({{ func['demos'] }})">
               Try Examples
             </button>
+            {% endif %}
             </div>
             <pre class="mb-4"><code class="lang-python">gradio.<span>{{ func["name"] }}(</span><!--
             -->self, <!--