Bring back embedded demos on component docs

.changeset/swift-peas-allow.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Bring back embedded demos on component docs

js/_website/src/lib/assets/style.css

@@ -295,3 +295,10 @@ strong {
 .obj ul {
 	padding-inline-start: 40px;
 }
+
+.embedded-component .gradio-container {
+	padding: var(--size-4) 0 0 0 !important;
+}
+.embedded-component .gradio-container footer {
+	display: none !important;
+}

js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx

@@ -20,6 +20,31 @@
 gradio.AnnotatedImage(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import numpy as np 
+import requests 
+from io import BytesIO
+from PIL import Image
+base_image = "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"
+building_image = requests.get("https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png")
+building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0
+with gr.Blocks() as demo:
+    gr.AnnotatedImage(
+        value=(base_image, [(building_image, "buildings")]),
+        height=500,
+    )
+demo.launch()
+<gradio-requirements>
+requests
+pillow
+</gradio-requirements>
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/audio.svx

@@ -21,6 +21,16 @@
 gradio.Audio(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Audio("https://file-examples.com/storage/fe3cb26995666504a8d6180/2017/11/file_example_MP3_700KB.mp3")
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/barplot.svx

@@ -20,6 +20,43 @@
 gradio.BarPlot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+import pandas as pd
+import numpy as np
+simple = pd.DataFrame(np.array(
+    [
+        ["A", 28],
+        ["B", 55],
+        ["C", 43],
+        ["D", 91],
+        ["E", 81],
+        ["F", 53],
+        ["G", 19],
+        ["H", 87],
+        ["I", 52],
+
+    ]
+), columns=["item", "inventory"])
+with gr.Blocks() as demo:
+    gr.BarPlot(
+        value=simple,
+        x="item",
+        y="inventory",
+        title="Simple Bar Plot",
+        container=True,
+        width=400
+    )
+demo.launch()
+<gradio-requirements>
+pandas
+</gradio-requirements>
+</gradio-lite>
+
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/button.svx

@@ -20,6 +20,16 @@
 gradio.Button(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+   gr.Button()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/chatbot.svx

@@ -20,6 +20,16 @@
 gradio.Chatbot(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Chatbot(value=[["Hello World","Hey Gradio!"],["❤️","😍"],["🔥","🤗"]])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/checkbox.svx

@@ -20,6 +20,16 @@
 gradio.Checkbox(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Checkbox()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx

@@ -20,6 +20,16 @@
 gradio.CheckboxGroup(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.CheckboxGroup(["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/clearbutton.svx

@@ -20,6 +20,17 @@
 gradio.ClearButton(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    textbox = gr.Textbox(value="This is some text")
+    gr.ClearButton(textbox)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/code.svx

@@ -20,6 +20,22 @@
 gradio.Code(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo: 
+    gr.Code(language="python", value="""
+import gradio as gr
+def hello(name): 
+    return "hello " + name
+interface = gr.Interface(hello, "text", "text")
+interface.launch()
+    """, interactive=True, lines=6)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/colorpicker.svx

@@ -20,6 +20,21 @@
 gradio.ColorPicker(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo: 
+    with gr.Column():
+        input = gr.ColorPicker(interactive=True)
+        output = gr.Markdown("You picked: **#000000**")
+    def pick(color):
+        return "You picked: **" + color + "**"
+    input.change(pick, input, output)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/dataframe.svx

@@ -20,6 +20,21 @@
 gradio.Dataframe(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Dataframe(value=
+    [
+        [0, 1, True],
+        [1, 0, False]
+    ]
+    , interactive=True)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/dataset.svx

@@ -20,6 +20,27 @@
 gradio.Dataset(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.Dataset(components=[gr.Textbox(visible=False)],
+        label="Text Dataset",
+        samples=[
+            ["The quick brown fox jumps over the lazy dog"],
+            ["Build & share delightful machine learning apps"],
+            ["She sells seashells by the seashore"],
+            ["Supercalifragilisticexpialidocious"],
+            ["Lorem ipsum"],
+            ["That's all folks!"]
+        ],
+    )
+demo.launch()
+</gradio-lite>
+</div>
+
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/dropdown.svx

@@ -20,6 +20,16 @@
 gradio.Dropdown(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.Dropdown(choices=["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx

@@ -20,6 +20,16 @@
 gradio.DuplicateButton(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.DuplicateButton()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/file.svx

@@ -20,6 +20,16 @@
 gradio.File(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as demo:
+    gr.File()
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/gallery.svx

@@ -20,6 +20,23 @@
 gradio.Gallery(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr 
+with gr.Blocks() as 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",
+    ]
+    gr.Gallery(value=cheetahs, columns=4)
+demo.launch()
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}

js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx

@@ -20,6 +20,30 @@
 gradio.HighlightedText(···)
 ```
 
+<!-- Embedded Component -->
+<div class="embedded-component">
+<gradio-lite shared-worker>
+import gradio as gr
+with gr.Blocks() as demo:
+    gr.HighlightedText(
+        value=[
+            ("The ", "article"), 
+            ("quick ", "adjective"),
+            ("brown ", "adjective"), 
+            ("fox ", "noun"),
+            ("jumps ", "verb"), 
+            ("over ", "preposition"),
+            ("the ", "article"), 
+            ("lazy ", "adjective"),
+            ("dog", "noun"),
+        ],
+        combine_adjacent=True,
+    )
+demo.launch()
+
+</gradio-lite>
+</div>
+
 <!--- Description -->
 ### Description
 ## {@html style_formatted_text(obj.description)}