Embedding Components on Docs

demo/components_demos/requirements.txt

@@ -0,0 +1,2 @@
+matplotlib
+numpy

demo/components_demos/run.py

@@ -0,0 +1,100 @@
+# This file is used to embed components in gradio.app/docs
+
+import gradio as gr
+
+
+with gr.Blocks() as Textbox_demo:
+    gr.Textbox()
+
+with gr.Blocks() as Number_demo:
+    gr.Number()
+
+with gr.Blocks() as Slider_demo:
+    gr.Slider()
+
+with gr.Blocks() as Checkbox_demo:
+    gr.Checkbox()
+
+with gr.Blocks() as CheckboxGroup_demo:
+    gr.CheckboxGroup(choices=["First Choice", "Second Choice", "Third Choice"])
+
+with gr.Blocks() as Radio_demo:
+    gr.Radio(choices=["First Choice", "Second Choice", "Third Choice"])
+
+with gr.Blocks() as Dropdown_demo:
+    gr.Dropdown(choices=["First Choice", "Second Choice", "Third Choice"])
+
+with gr.Blocks() as Image_demo:
+    gr.Image()
+
+with gr.Blocks() as Video_demo:
+    gr.Video()
+
+with gr.Blocks() as Audio_demo:
+    gr.Audio()
+
+with gr.Blocks() as File_demo:
+    gr.File()
+
+with gr.Blocks() as Dataframe_demo:
+    gr.Dataframe(interactive=True)
+
+with gr.Blocks() as Timeseries_demo:
+    gr.Timeseries()
+
+with gr.Blocks() as Variable_demo:
+    gr.Variable()
+
+with gr.Blocks() as Button_demo:
+    gr.Button()
+
+with gr.Blocks() as ColorPicker_demo:
+    gr.ColorPicker()
+
+with gr.Blocks() as Label_demo:
+    gr.Label(value={"First Label": 0.7, "Second Label": 0.2, "Third Label": 0.1})
+
+with gr.Blocks() as HighlightedText_demo:
+    gr.HighlightedText(value=[("Text","Label 1"),("to be","Label 2"),("highlighted","Label 3")])
+
+with gr.Blocks() as JSON_demo:
+    gr.JSON(value={"Key 1": "Value 1", "Key 2": {"Key 3": "Value 2", "Key 4": "Value 3"}, "Key 5": ["Item 1", "Item 2", "Item 3"]})
+
+with gr.Blocks() as HTML_demo:
+    gr.HTML(value="<p style='margin-top: 1rem, margin-bottom: 1rem'>Gradio Docs Readers: <img src='https://visitor-badge.glitch.me/badge?page_id=gradio-docs-visitor-badge' alt='visitor badge' style='display: inline-block'/></p>")
+
+with gr.Blocks() as Gallery_demo:
+    cheetahs = [
+        "https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg",
+        "https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg",
+        "https://img.etimg.com/thumb/msid-50159822,width-650,imgsize-129520,,resizemode-4,quality-100/.jpg",
+        "https://nationalzoo.si.edu/sites/default/files/animals/cheetah-002.jpg",
+        "https://images.theconversation.com/files/375893/original/file-20201218-13-a8h8uq.jpg?ixlib=rb-1.1.0&rect=16%2C407%2C5515%2C2924&q=45&auto=format&w=496&fit=clip",
+        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeSdQE5kHykTdB970YGSW3AsF6MHHZzY4QiQ&usqp=CAU",
+        "https://www.lifegate.com/app/uploads/ghepardo-primo-piano.jpg",
+        "https://i.natgeofe.com/n/60004bcc-cd85-4401-8bfa-6f96551557db/cheetah-extinction-3_3x4.jpg",
+        "https://qph.cf2.quoracdn.net/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq"
+    ]
+    gr.Gallery(value=cheetahs)
+
+with gr.Blocks() as Chatbot_demo:
+    gr.Chatbot(value=[["Hello World","Hey Gradio!"],["❤️","😍"],["🔥","🤗"]])
+
+with gr.Blocks() as Model3D_demo:
+    gr.Model3D()
+
+import matplotlib.pyplot as plt
+import numpy as np
+
+Fs = 8000
+f = 5
+sample = 8000
+x = np.arange(sample)
+y = np.sin(2 * np.pi * f * x / Fs)
+plt.plot(x, y)
+
+with gr.Blocks() as Plot_demo:
+    gr.Plot(value=plt)
+
+with gr.Blocks() as Markdown_demo:
+    gr.Markdown(value="This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n")

website/demos/map_demos.py

@@ -5,6 +5,7 @@
 import sys
 
 from jinja2 import Template
+from gradio.documentation import generate_documentation
 
 GRADIO_DIR = os.path.join(os.getcwd(), os.pardir, os.pardir)
 GRADIO_DEMO_DIR = os.path.join(GRADIO_DIR, "demo")
@@ -25,30 +26,38 @@
     with open(os.path.join(GRADIO_GUIDES_DIR, guide_filename)) as guide_file:
         guide_content = guide_file.read()
     demos_to_run += re.findall(DEMO_PATTERN, guide_content)
+# adding components to be embedded
+docs = generate_documentation()
+SUFFIX = "_component"
+demos_to_run += [f"{component['name']}{SUFFIX}" for component in docs["component"]]
 demos_to_run = list(set(demos_to_run))
 
+
 failed_demos = []
 demo_port_sets = []
 for demo_name in demos_to_run:
     print(f" ----- {demo_name} ----- ")
-    demo_folder = os.path.join(GRADIO_DEMO_DIR, demo_name)
-    requirements_file = os.path.join(demo_folder, "requirements.txt")
-    if os.path.exists(requirements_file):
-        try:
-            subprocess.check_call(
-                [sys.executable, "-m", "pip", "install", "-r", requirements_file]
-            )
-        except:
-            failed_demos.append(demo_name)
-            continue
-    setup_file = os.path.join(demo_folder, "setup.sh")
-    if os.path.exists(setup_file):
-        try:
-            subprocess.check_call(["sh", setup_file])
-        except subprocess.CalledProcessError:
-            failed_demos.append(demo_name)
-            continue
-    demo_port_sets.append((demo_name, port))
+    if demo_name.endswith(SUFFIX):
+        demo_port_sets.append((demo_name, port))
+    else:
+        demo_folder = os.path.join(GRADIO_DEMO_DIR, demo_name)
+        requirements_file = os.path.join(demo_folder, "requirements.txt")
+        if os.path.exists(requirements_file):
+            try:
+                subprocess.check_call(
+                    [sys.executable, "-m", "pip", "install", "-r", requirements_file]
+                )
+            except:
+                failed_demos.append(demo_name)
+                continue
+        setup_file = os.path.join(demo_folder, "setup.sh")
+        if os.path.exists(setup_file):
+            try:
+                subprocess.check_call(["sh", setup_file])
+            except subprocess.CalledProcessError:
+                failed_demos.append(demo_name)
+                continue
+        demo_port_sets.append((demo_name, port))
     port += 1
 
 with open("nginx_template.conf") as nginx_template_conf:

website/demos/run_demos.py

@@ -22,22 +22,39 @@
 def launch_demo(demo_folder):
     subprocess.check_call([f"cd {demo_folder} && python run2.py"], shell=True)
 
+SUFFIX = "_component"
+COMPONENTS_DEMOS_FOLDER = os.path.join(GRADIO_DEMO_DIR, 'components_demos')
 start_launch_time = time.time()
 for demo_name, port in demo_port_sets:
-    demo_folder = os.path.join(GRADIO_DEMO_DIR, demo_name)
-    demo_file = os.path.join(demo_folder, "run.py")
-    demo_2_file = os.path.join(demo_folder, "run2.py")
-    with open(demo_file, "r") as file:
-        filedata = file.read()
-    assert "demo.launch()" in filedata, demo_name + " has no demo.launch()\n" + filedata 
-    filedata = filedata.replace(f"demo.launch()", f"demo.launch(server_port={port}, _frontend=False)")
-    with open(demo_2_file, "w") as file:
-        file.write(filedata)
+    if demo_name.endswith(SUFFIX):
+        demo_folder = COMPONENTS_DEMOS_FOLDER
+        demo_file = os.path.join(demo_folder, "run.py")
+        component_folder = os.path.join(GRADIO_DEMO_DIR, demo_name)
+        os.mkdir(component_folder)
+        demo_2_file = os.path.join(component_folder, "run2.py")
+        with open(demo_file, "r") as file:
+            filedata = file.read()
+        filedata += f"\n\n{demo_name[:-len(SUFFIX)]}_demo.launch(server_port={port}, _frontend=False)"
+        with open(demo_2_file, "w") as file:
+            file.write(filedata)
+        demo_thread = threading.Thread(target=launch_demo, args=(component_folder,))
+
+    else:
+        demo_folder = os.path.join(GRADIO_DEMO_DIR, demo_name)
+        demo_file = os.path.join(demo_folder, "run.py")
+        demo_2_file = os.path.join(demo_folder, "run2.py")
+        with open(demo_file, "r") as file:
+            filedata = file.read()
+        assert "demo.launch()" in filedata, demo_name + " has no demo.launch()\n" + filedata
+        filedata = filedata.replace(f"demo.launch()", f"demo.launch(server_port={port}, _frontend=False)")
+        with open(demo_2_file, "w") as file:
+            file.write(filedata)
+        demo_thread = threading.Thread(target=launch_demo, args=(demo_folder,))
     time_to_up[demo_name] = -(time.time())
-    demo_thread = threading.Thread(target=launch_demo, args=(demo_folder,))
     demo_thread.start()
     demo_threads[demo_name] = demo_thread
 
+
 print("launch time:", time.time() - start_launch_time)
 
 while True:

website/homepage/src/docs/obj_doc_template.html

@@ -44,6 +44,11 @@
 -->{% endfor %}<!--  
 -->···<span>)</span></code></pre></div>
   {% endif %}
+  {% if is_component %}
+    <div class="embedded-component">
+      <gradio-app src="/demo/{{ obj['name'] }}_component" />
+    </div>
+  {% endif %}
   <p class="mt-8 mb-2 text-lg">{{ obj["description"] }}</p>
   {% if is_component %}
   <p class="mb-2 text-lg text-gray-500">As input, {{ obj["tags"]["preprocessing"] }}</p>

website/homepage/src/docs/template.html

@@ -245,6 +245,19 @@ <h3 class="text-3xl font-light my-4" id="block-layouts">Block Layouts</h3>
       addCopyButtons(navigator.clipboard);
     };
 
+
+    // Remove built-with-gradio footers and extra space from embedded components
+    window.addEventListener('load', function () {
+      document.querySelectorAll('.embedded-component gradio-app').forEach(g => {
+          let shadowroot = g.shadowRoot;
+          let f = shadowroot.querySelector('footer');
+          f.classList.add('hidden');
+          let c = shadowroot.querySelector('.gradio-container');
+          c.style.removeProperty('min-height');
+        }
+      );
+    })
+
     </script>
   </body>
 </html>