Adding missing embedded components on docs (#3027)

* add embedded component for dataset

* add embedded component for examples

* add embedded component for progress

* remove make_waveform

* add embedded component for uploadbutton

* remove footer on lineplot embedded component

* remove broken image from gallery

* add embedded component for interpretation

* generated notebooks

* changelog

* change example component demo to images

* remove natgeo img in gallery demo

* regenerate notebooks

CHANGELOG.md

@@ -53,6 +53,7 @@ By [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3014](https://github.
 * Fix shadows for form element and ensure focus styles more visible in dark mode   [@pngwn](https://github.com/pngwn) in [PR 3042](https://github.com/gradio-app/gradio/pull/3042).
 * Fixed bug where the Checkbox and Dropdown change events were not triggered in response to other component changes by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3045](https://github.com/gradio-app/gradio/pull/3045)   
 * Fix bug where the queue was not properly restarted after launching a `closed` app by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3022](https://github.com/gradio-app/gradio/pull/3022)
+* Adding missing embedded components on docs by [@aliabd](https://github.com/aliabd) in [PR 3027](https://github.com/gradio-app/gradio/pull/3027)
 
 ## Documentation Changes:
 * SEO improvements to guides by[@aliabd](https://github.com/aliabd) in [PR 2915](https://github.com/gradio-app/gradio/pull/2915)

demo/dataset_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: dataset_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    gr.Dataset(components=[gr.Textbox(visible=False)],\n", "        label=\"Text Dataset\",\n", "        samples=[\n", "            [\"The quick brown fox jumps over the lazy dog\"],\n", "            [\"Build & share delightful machine learning apps\"],\n", "            [\"She sells seashells by the seashore\"],\n", "            [\"Supercalifragilisticexpialidocious\"],\n", "            [\"Lorem ipsum\"],\n", "            [\"That's all folks!\"]\n", "        ],\n", "    )\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/dataset_component/run.py

@@ -0,0 +1,17 @@
+import gradio as gr
+
+css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+
+with gr.Blocks(css=css) 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()

demo/examples_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: examples_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/lion.jpg\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/logo.png"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "def flip(i):\n", "    return i.rotate(180)\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            img_i = gr.Image(label=\"Input Image\", type=\"pil\")\n", "        with gr.Column():\n", "            img_o = gr.Image(label=\"Output Image\")\n", "    with gr.Row():\n", "        btn = gr.Button(value=\"Flip Image\")\n", "    btn.click(flip, inputs=[img_i], outputs=[img_o])\n", "\n", "    gr.Examples(\n", "        [ \n", "            os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", "        ],\n", "        img_i,\n", "        img_o,\n", "        flip\n", "    )\n", "    \n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/examples_component/run.py

@@ -0,0 +1,29 @@
+import gradio as gr
+import os
+
+def flip(i):
+    return i.rotate(180)
+
+css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+
+with gr.Blocks(css=css) as demo:
+    with gr.Row():
+        with gr.Column():
+            img_i = gr.Image(label="Input Image", type="pil")
+        with gr.Column():
+            img_o = gr.Image(label="Output Image")
+    with gr.Row():
+        btn = gr.Button(value="Flip Image")
+    btn.click(flip, inputs=[img_i], outputs=[img_o])
+
+    gr.Examples(
+        [ 
+            os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
+        ],
+        img_i,
+        img_o,
+        flip
+    )
+    
+demo.launch()

demo/gallery_component/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: gallery_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr \n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    cheetahs = [\n", "        \"https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg\",\n", "        \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\",\n", "        \"https://img.etimg.com/thumb/msid-50159822,width-650,imgsize-129520,,resizemode-4,quality-100/.jpg\",\n", "        \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-002.jpg\",\n", "        \"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\",\n", "        \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeSdQE5kHykTdB970YGSW3AsF6MHHZzY4QiQ&usqp=CAU\",\n", "        \"https://www.lifegate.com/app/uploads/ghepardo-primo-piano.jpg\",\n", "        \"https://i.natgeofe.com/n/60004bcc-cd85-4401-8bfa-6f96551557db/cheetah-extinction-3_3x4.jpg\",\n", "        \"https://qph.cf2.quoracdn.net/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq\"\n", "    ]\n", "    gr.Gallery(value=cheetahs)\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: gallery_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr \n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    cheetahs = [\n", "        \"https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg\",\n", "        \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\",\n", "        \"https://img.etimg.com/thumb/msid-50159822,width-650,imgsize-129520,,resizemode-4,quality-100/.jpg\",\n", "        \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-002.jpg\",\n", "        \"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\",\n", "        \"https://www.lifegate.com/app/uploads/ghepardo-primo-piano.jpg\",\n", "        \"https://qph.cf2.quoracdn.net/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq\"\n", "    ]\n", "    gr.Gallery(value=cheetahs)\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/gallery_component/run.py

@@ -9,9 +9,7 @@ with gr.Blocks(css=css) as demo:
         "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)

demo/interpretation_component/requirements.txt

@@ -0,0 +1,3 @@
+shap
+transformers
+torch

demo/interpretation_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: interpretation_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio shap transformers torch"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import shap\n", "from transformers import pipeline\n", "\n", "\n", "sentiment_classifier = pipeline(\"text-classification\", return_all_scores=True)\n", "\n", "def interpretation_function(text):\n", "    explainer = shap.Explainer(sentiment_classifier)\n", "    shap_values = explainer([text])\n", "    scores = list(zip(shap_values.data[0], shap_values.values[0, :, 1]))\n", "    return {\"original\": text, \"interpretation\": scores}\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_text = gr.Textbox(label=\"Sentiment Analysis\", value=\"Wonderfully terrible\")\n", "            with gr.Row():\n", "                interpret = gr.Button(\"Interpret\")\n", "        with gr.Column():\n", "                interpretation = gr.components.Interpretation(input_text)\n", "\n", "    interpret.click(interpretation_function, input_text, interpretation)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/interpretation_component/run.py

@@ -0,0 +1,28 @@
+import gradio as gr
+import shap
+from transformers import pipeline
+
+
+sentiment_classifier = pipeline("text-classification", return_all_scores=True)
+
+def interpretation_function(text):
+    explainer = shap.Explainer(sentiment_classifier)
+    shap_values = explainer([text])
+    scores = list(zip(shap_values.data[0], shap_values.values[0, :, 1]))
+    return {"original": text, "interpretation": scores}
+
+css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+
+with gr.Blocks(css=css) as demo:
+    with gr.Row():
+        with gr.Column():
+            input_text = gr.Textbox(label="Sentiment Analysis", value="Wonderfully terrible")
+            with gr.Row():
+                interpret = gr.Button("Interpret")
+        with gr.Column():
+                interpretation = gr.components.Interpretation(input_text)
+
+    interpret.click(interpretation_function, input_text, interpretation)
+
+if __name__ == "__main__":
+    demo.launch()

demo/lineplot_component/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: lineplot_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from vega_datasets import data\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LinePlot(\n", "        data.stocks(),\n", "        x=\"date\",\n", "        y=\"price\",\n", "        color=\"symbol\",\n", "        color_legend_position=\"bottom\",\n", "        title=\"Stock Prices\",\n", "        tooltip=[\"date\", \"price\", \"symbol\"],\n", "        height=300,\n", "        width=500,\n", "        show_label=False,\n", "    ).style(\n", "        container=False,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: lineplot_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from vega_datasets import data\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    gr.LinePlot(\n", "        data.stocks(),\n", "        x=\"date\",\n", "        y=\"price\",\n", "        color=\"symbol\",\n", "        color_legend_position=\"bottom\",\n", "        title=\"Stock Prices\",\n", "        tooltip=[\"date\", \"price\", \"symbol\"],\n", "        height=300,\n", "        width=500,\n", "        show_label=False,\n", "    ).style(\n", "        container=False,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/lineplot_component/run.py

@@ -1,7 +1,9 @@
 import gradio as gr
 from vega_datasets import data
 
-with gr.Blocks() as demo:
+css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+
+with gr.Blocks(css=css) as demo:
     gr.LinePlot(
         data.stocks(),
         x="date",

demo/progress_component/requirements.txt

@@ -0,0 +1 @@
+tqdm

demo/progress_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: progress_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio tqdm"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time \n", "import tqdm\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "\n", "def load_set(progress=gr.Progress()):\n", "    imgs = [None] * 24\n", "    for img in progress.tqdm(imgs, desc=\"Loading...\"):\n", "        time.sleep(0.1)\n", "    return \"Loaded\"\n", "\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    load = gr.Button(\"Load\")\n", "    label = gr.Label(label=\"Loader\")\n", "    load.click(load_set, outputs=label)\n", "\n", "demo.queue(concurrency_count=20).launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/progress_component/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+import time 
+import tqdm
+
+css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+
+def load_set(progress=gr.Progress()):
+    imgs = [None] * 24
+    for img in progress.tqdm(imgs, desc="Loading..."):
+        time.sleep(0.1)
+    return "Loaded"
+
+
+with gr.Blocks(css=css) as demo:
+    load = gr.Button("Load")
+    label = gr.Label(label="Loader")
+    load.click(load_set, outputs=label)
+
+demo.queue(concurrency_count=20).launch()

demo/uploadbutton_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: uploadbutton_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def upload_file(files):\n", "    file_paths = [file.name for file in files]\n", "    return file_paths\n", "\n", "css = \"footer {display: none !important;} .gradio-container {min-height: 0px !important;}\"\n", "with gr.Blocks(css=css) as demo:\n", "    file_output = gr.File()\n", "    upload_button = gr.UploadButton(\"Click to Upload an Image or Video File\", file_types=[\"image\", \"video\"], file_count=\"multiple\")\n", "    upload_button.upload(upload_file, upload_button, file_output)\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/uploadbutton_component/run.py

@@ -0,0 +1,13 @@
+import gradio as gr
+
+def upload_file(files):
+    file_paths = [file.name for file in files]
+    return file_paths
+
+css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+with gr.Blocks(css=css) 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()

website/homepage/src/docs/obj_doc_template.html

@@ -71,14 +71,16 @@
 -->{% endfor %}<!--  
 -->···<span>)</span></code></pre></div>
   {% endif %}
-  {% if is_component %}
-    <div class="embedded-component">
-      {% if version=="main" %}
-        <gradio-app space="gradio/{{ obj['name'].lower() }}_component_main" />
-      {% else %}
-        <gradio-app space="gradio/{{ obj['name'].lower() }}_component" />
-      {% endif %}
-    </div>
+  {% if (is_component or obj['name'].lower() in ["examples", "progress"]) %}
+    {% if obj['name'].lower() != "state" %}
+      <div class="embedded-component">
+        {% if version=="main" %}
+          <gradio-app space="gradio/{{ obj['name'].lower() }}_component_main" />
+        {% else %}
+          <gradio-app space="gradio/{{ obj['name'].lower() }}_component" />
+        {% endif %}
+      </div>
+    {% endif %}
   {% endif %}
   <p class="mt-8 mb-2 text-lg">{{ obj["description"] }}</p>
   <br>