diff --git a/.changeset/swift-peas-allow.md b/.changeset/swift-peas-allow.md
new file mode 100644
index 0000000000000..4f2c19c1abf94
--- /dev/null
+++ b/.changeset/swift-peas-allow.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Bring back embedded demos on component docs
diff --git a/js/_website/src/lib/assets/style.css b/js/_website/src/lib/assets/style.css
index af22db89d2e0c..36d50a3acaf68 100644
--- a/js/_website/src/lib/assets/style.css
+++ b/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;
+}
diff --git a/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx b/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx
index 7c6457c521005..64b01d81133d1 100644
--- a/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx
@@ -20,6 +20,31 @@
gradio.AnnotatedImage(···)
```
+
+
+
+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()
+
+requests
+pillow
+
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/audio.svx b/js/_website/src/lib/templates/gradio/03_components/audio.svx
index 59c9b986cc9c3..195f9a8db4872 100644
--- a/js/_website/src/lib/templates/gradio/03_components/audio.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/audio.svx
@@ -21,6 +21,16 @@
gradio.Audio(···)
```
+
+
+
+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()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/barplot.svx b/js/_website/src/lib/templates/gradio/03_components/barplot.svx
index 719a3c8db16e6..00707ddd649c7 100644
--- a/js/_website/src/lib/templates/gradio/03_components/barplot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/barplot.svx
@@ -20,6 +20,43 @@
gradio.BarPlot(···)
```
+
+
+
+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()
+
+pandas
+
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/button.svx b/js/_website/src/lib/templates/gradio/03_components/button.svx
index 51932cf07ee2b..6d470e1848340 100644
--- a/js/_website/src/lib/templates/gradio/03_components/button.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/button.svx
@@ -20,6 +20,16 @@
gradio.Button(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Button()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
index 443f7600a595f..969a9a189edde 100644
--- a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
@@ -20,6 +20,16 @@
gradio.Chatbot(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Chatbot(value=[["Hello World","Hey Gradio!"],["❤️","😍"],["🔥","🤗"]])
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/checkbox.svx b/js/_website/src/lib/templates/gradio/03_components/checkbox.svx
index de45e1e5b5b61..00263a13fc331 100644
--- a/js/_website/src/lib/templates/gradio/03_components/checkbox.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/checkbox.svx
@@ -20,6 +20,16 @@
gradio.Checkbox(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Checkbox()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx b/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx
index 83f9592bf0992..1f0dc7f69eb17 100644
--- a/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx
@@ -20,6 +20,16 @@
gradio.CheckboxGroup(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.CheckboxGroup(["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx b/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx
index 1f42c13d3698e..7381d61e6fa98 100644
--- a/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/clearbutton.svx
@@ -20,6 +20,17 @@
gradio.ClearButton(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ textbox = gr.Textbox(value="This is some text")
+ gr.ClearButton(textbox)
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/code.svx b/js/_website/src/lib/templates/gradio/03_components/code.svx
index 97a43ef242218..0c6f399f6798c 100644
--- a/js/_website/src/lib/templates/gradio/03_components/code.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/code.svx
@@ -20,6 +20,22 @@
gradio.Code(···)
```
+
+
+
+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()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx b/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx
index 9df8af7fbeaec..7c9d3e5ef1e1f 100644
--- a/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/colorpicker.svx
@@ -20,6 +20,21 @@
gradio.ColorPicker(···)
```
+
+
+
+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()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/dataframe.svx b/js/_website/src/lib/templates/gradio/03_components/dataframe.svx
index 95fbb70207159..e0e33670e1947 100644
--- a/js/_website/src/lib/templates/gradio/03_components/dataframe.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/dataframe.svx
@@ -20,6 +20,21 @@
gradio.Dataframe(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Dataframe(value=
+ [
+ [0, 1, True],
+ [1, 0, False]
+ ]
+ , interactive=True)
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/dataset.svx b/js/_website/src/lib/templates/gradio/03_components/dataset.svx
index e9851674ea9bf..c2f9f2ce9adee 100644
--- a/js/_website/src/lib/templates/gradio/03_components/dataset.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/dataset.svx
@@ -20,6 +20,27 @@
gradio.Dataset(···)
```
+
+
+
+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()
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/dropdown.svx b/js/_website/src/lib/templates/gradio/03_components/dropdown.svx
index 42e6f5ca74e72..301a50342294c 100644
--- a/js/_website/src/lib/templates/gradio/03_components/dropdown.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/dropdown.svx
@@ -20,6 +20,16 @@
gradio.Dropdown(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Dropdown(choices=["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx b/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx
index 9c7fc1e74b7b6..e6671f05dbb89 100644
--- a/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx
@@ -20,6 +20,16 @@
gradio.DuplicateButton(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.DuplicateButton()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/file.svx b/js/_website/src/lib/templates/gradio/03_components/file.svx
index 274cc2aadb0ba..772fa47097786 100644
--- a/js/_website/src/lib/templates/gradio/03_components/file.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/file.svx
@@ -20,6 +20,16 @@
gradio.File(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.File()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/gallery.svx b/js/_website/src/lib/templates/gradio/03_components/gallery.svx
index b46a34cdbf533..475f5866b7f31 100644
--- a/js/_website/src/lib/templates/gradio/03_components/gallery.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/gallery.svx
@@ -20,6 +20,23 @@
gradio.Gallery(···)
```
+
+
+
+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()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx b/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx
index c169724a2d487..ec134dbb16e69 100644
--- a/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx
@@ -20,6 +20,30 @@
gradio.HighlightedText(···)
```
+
+
+
+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()
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/html.svx b/js/_website/src/lib/templates/gradio/03_components/html.svx
index d0dabb9465448..e61aead6c42d2 100644
--- a/js/_website/src/lib/templates/gradio/03_components/html.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/html.svx
@@ -10,6 +10,8 @@
import { style_formatted_text } from "$lib/text";
let obj = get_object("html");
+
+ let embedded_demo = "This example was written in HTML
"
@@ -20,6 +22,17 @@
gradio.HTML(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ with gr.Group():
+ gr.HTML(value="{embedded_demo}")
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/image.svx b/js/_website/src/lib/templates/gradio/03_components/image.svx
index cdba4719277ce..d432677684c12 100644
--- a/js/_website/src/lib/templates/gradio/03_components/image.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/image.svx
@@ -20,6 +20,16 @@
gradio.Image(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Image()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx b/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx
index 39bc5501def3d..28587103018a2 100644
--- a/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/imageeditor.svx
@@ -22,6 +22,17 @@
gradio.ImageEditor(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.ImageEditor()
+demo.launch()
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/json.svx b/js/_website/src/lib/templates/gradio/03_components/json.svx
index 5f8b67acbba07..068748e892084 100644
--- a/js/_website/src/lib/templates/gradio/03_components/json.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/json.svx
@@ -10,6 +10,17 @@
import { style_formatted_text } from "$lib/text";
let obj = get_object("json");
+ let embedded_demo_obj = `{
+ "Key 1": "Value 1",
+ "Key 2": {"Key 3": "Value 2", "Key 4": "Value 3"},
+ "Key 5": ["Item 1", "Item 2", "Item 3"],
+ "Key 6": 123,
+ "Key 7": 123.456,
+ "Key 8": True,
+ "Key 9": False,
+ "Key 10": None,
+ "Key 11": np.array([1, 2, 3]),
+ }`
@@ -20,6 +31,20 @@
gradio.JSON(···)
```
+
+
+
+import gradio as gr
+import numpy as np
+with gr.Blocks() as demo:
+ out = gr.JSON(value={embedded_demo_obj})
+demo.launch()
+
+numpy
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/label.svx b/js/_website/src/lib/templates/gradio/03_components/label.svx
index ce6e5af4cdaf3..fc372394b9d16 100644
--- a/js/_website/src/lib/templates/gradio/03_components/label.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/label.svx
@@ -10,6 +10,7 @@
import { style_formatted_text } from "$lib/text";
let obj = get_object("label");
+ let embedded_demo_value = `{"First Label": 0.7, "Second Label": 0.2, "Third Label": 0.1}`
@@ -20,6 +21,16 @@
gradio.Label(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Label(value={embedded_demo_value})
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/lineplot.svx b/js/_website/src/lib/templates/gradio/03_components/lineplot.svx
index 1636ec4801102..658cb7b720767 100644
--- a/js/_website/src/lib/templates/gradio/03_components/lineplot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/lineplot.svx
@@ -10,6 +10,10 @@
import { style_formatted_text } from "$lib/text";
let obj = get_object("lineplot");
+ let demo_code = `{
+ 'week': x,
+ 'price': y
+ }`
@@ -20,6 +24,42 @@
gradio.LinePlot(···)
```
+
+
+
+import gradio as gr
+import pandas as pd
+import numpy as np
+simple = pd.DataFrame(np.array(
+ [
+ [1, 28],
+ [2, 55],
+ [3, 43],
+ [4, 91],
+ [5, 81],
+ [6, 53],
+ [7, 19],
+ [8, 87],
+ [9, 52],
+ ]
+), columns=["week", "price"])
+with gr.Blocks() as demo:
+ gr.LinePlot(
+ value=simple,
+ x="week",
+ y="price",
+ title="Stock Price Chart",
+ container=True,
+ width=400
+ )
+demo.launch()
+
+pandas
+numpy
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/markdown.svx b/js/_website/src/lib/templates/gradio/03_components/markdown.svx
index d57feb4244df8..149b453c0ffcc 100644
--- a/js/_website/src/lib/templates/gradio/03_components/markdown.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/markdown.svx
@@ -20,6 +20,17 @@
gradio.Markdown(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ with gr.Group():
+ gr.Markdown(value="This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n")
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/model3d.svx b/js/_website/src/lib/templates/gradio/03_components/model3d.svx
index 1daa784095c80..42e2a9246d0e1 100644
--- a/js/_website/src/lib/templates/gradio/03_components/model3d.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/model3d.svx
@@ -20,6 +20,16 @@
gradio.Model3D(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Model3D()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx b/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx
index 8161e217cd957..0ea5f7b07f854 100644
--- a/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx
@@ -20,6 +20,16 @@
gradio.MultimodalTextbox(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.MultimodalTextbox(interactive=True)
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/number.svx b/js/_website/src/lib/templates/gradio/03_components/number.svx
index 2d8545149e8a5..87a57e67828fa 100644
--- a/js/_website/src/lib/templates/gradio/03_components/number.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/number.svx
@@ -20,6 +20,16 @@
gradio.Number(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Number()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx b/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx
index fcdd425b242e3..8d6ba59fd1dcd 100644
--- a/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/paramviewer.svx
@@ -10,6 +10,18 @@
import { style_formatted_text } from "$lib/text";
let obj = get_object("paramviewer");
+ let demo_obj = `{
+ "number": {
+ "type": "int | float",
+ "description": "The number to round",
+ "default": None
+ },
+ "ndigits": {
+ "type": "int",
+ "description": "The number of digits to round to",
+ "default": "0"
+ }
+ }`
@@ -20,6 +32,19 @@
gradio.ParamViewer(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Markdown("The `round()` function in Python takes two parameters")
+ gr.ParamViewer(
+ {demo_obj}
+ )
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/plot.svx b/js/_website/src/lib/templates/gradio/03_components/plot.svx
index 15076f2f5bf30..c42afdfacb9c6 100644
--- a/js/_website/src/lib/templates/gradio/03_components/plot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/plot.svx
@@ -20,6 +20,28 @@
gradio.Plot(···)
```
+
+
+
+import gradio as gr
+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 demo:
+ gr.Plot(value=plt, format="png")
+demo.launch()
+
+matplotlib
+numpy
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/radio.svx b/js/_website/src/lib/templates/gradio/03_components/radio.svx
index 2d7d3334c2e76..833b9ece4a769 100644
--- a/js/_website/src/lib/templates/gradio/03_components/radio.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/radio.svx
@@ -20,6 +20,16 @@
gradio.Radio(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Radio(choices=["First Choice", "Second Choice", "Third Choice"])
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx b/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx
index 99aefd170b9b2..68defd6eac900 100644
--- a/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/scatterplot.svx
@@ -20,6 +20,44 @@
gradio.ScatterPlot(···)
```
+
+
+
+import gradio as gr
+import pandas as pd
+import numpy as np
+simple = pd.DataFrame(np.array(
+ [
+ [1, 23, "USA", "Ford Mustang"],
+ [2, 40, "USA", "Chrysler New Yorker Brougham"],
+ [3, 32, "Japan", "Toyota Corolla"],
+ [4, 32, "Europe", "Mercedes Benz"],
+ [5, 15, "USA", "AMC Matador"],
+ [6, 35, "Europe", "BMW X5"],
+ [7, 28, "Japan", "Honda Civic"],
+ [8, 15, "Japan", "Honda Accord"],
+ [9, 41, "Europe", "Peugeot 208"],
+ ]
+), columns=["Age", "Miles Per Gallon", "Origin of Car", "Name"])
+with gr.Blocks() as demo:
+ gr.ScatterPlot(
+ value=simple,
+ x="Age",
+ y="Miles Per Gallon",
+ title="Car Data",
+ container=True,
+ width=400,
+ color="Origin of Car",
+ tooltip="Name"
+ )
+demo.launch()
+
+pandas
+numpy
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/slider.svx b/js/_website/src/lib/templates/gradio/03_components/slider.svx
index 7e072066f1c7e..ec6c0af0a925e 100644
--- a/js/_website/src/lib/templates/gradio/03_components/slider.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/slider.svx
@@ -20,6 +20,16 @@
gradio.Slider(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Slider()
+demo.launch()
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/textbox.svx b/js/_website/src/lib/templates/gradio/03_components/textbox.svx
index 7163faa1117d4..30e873f1faa85 100644
--- a/js/_website/src/lib/templates/gradio/03_components/textbox.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/textbox.svx
@@ -20,6 +20,17 @@
gradio.Textbox(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Textbox()
+demo.launch()
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx b/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx
index a460433623c91..03860fef574f0 100644
--- a/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx
@@ -20,6 +20,22 @@
gradio.UploadButton(···)
```
+
+
+
+import gradio as gr
+def upload_file(files):
+ file_paths = [file.name for file in files]
+ return file_paths
+with gr.Blocks() as demo:
+ file_output = gr.File()
+ upload_button = gr.UploadButton("Click to Upload an Image or Video File", file_types=["image", "video"], file_count="multiple")
+ upload_button.upload(upload_file, upload_button, file_output)
+demo.launch()
+
+
+
+
### Description
## {@html style_formatted_text(obj.description)}
diff --git a/js/_website/src/lib/templates/gradio/03_components/video.svx b/js/_website/src/lib/templates/gradio/03_components/video.svx
index 0f0bb2ae68a0e..4dbb5c2c1e02f 100644
--- a/js/_website/src/lib/templates/gradio/03_components/video.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/video.svx
@@ -19,6 +19,16 @@
```python
gradio.Video(···)
```
+
+
+
+import gradio as gr
+with gr.Blocks() as demo:
+ gr.Video()
+demo.launch()
+
+
+
### Description