Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+demos/calculator/screenshot.gif filter=lfs diff=lfs merge=lfs -text
+demos/kitchen_sink/files/world.mp4 filter=lfs diff=lfs merge=lfs -text
+demos/video_component/files/world.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,12 +1,11 @@
+
 ---
-title: Pr 8377 All Demos
-emoji: 🌖
+title: pr-8377-all-demos 
+emoji: 💩
 colorFrom: indigo
-colorTo: gray
+colorTo: indigo
 sdk: gradio
 sdk_version: 4.31.5
 app_file: app.py
 pinned: false
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,52 @@
+import importlib
+import gradio as gr
+import os
+import sys
+import copy
+import pathlib
+from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+import uvicorn
+from gradio.utils import get_space
+
+os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
+
+demo_dir = pathlib.Path(__file__).parent / "demos"
+
+
+app = FastAPI()
+
+templates = Jinja2Templates(directory="templates")
+
+names = sorted(os.listdir("./demos"))
+
+
+@app.get("/")
+def index(request: Request):
+    names = [[p[0], p[2]] for p in all_demos]
+    return templates.TemplateResponse("index.html", {"request": request, "names": names,
+                                                     "initial_demo": names[0][0], "is_space": get_space()})
+
+
+all_demos = []
+demo_module = None
+for p in sorted(os.listdir("./demos")):
+    old_path = copy.deepcopy(sys.path)
+    sys.path = [os.path.join(demo_dir, p)] + sys.path
+    try:  # Some demos may not be runnable because of 429 timeouts, etc.
+        if demo_module is None:
+            demo_module = importlib.import_module(f"run")
+        else:
+            demo_module = importlib.reload(demo_module)
+        all_demos.append((p, demo_module.demo.queue(), False))
+    except Exception as e:
+        with gr.Blocks() as demo:
+            gr.Markdown(f"Error loading demo: {e}")
+        all_demos.append((p, demo, True))
+
+for demo_name, demo, _ in all_demos:
+    app = gr.mount_gradio_app(app, demo, f"/demo/{demo_name}")
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, port=7860, host="0.0.0.0")

demos/altair_plot/requirements.txt

@@ -0,0 +1,2 @@
+altair
+vega_datasets

demos/altair_plot/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: altair_plot"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio altair vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import altair as alt\n", "import gradio as gr\n", "import numpy as np\n", "import pandas as pd\n", "from vega_datasets import data\n", "\n", "\n", "def make_plot(plot_type):\n", "    if plot_type == \"scatter_plot\":\n", "        cars = data.cars()\n", "        return alt.Chart(cars).mark_point().encode(\n", "            x='Horsepower',\n", "            y='Miles_per_Gallon',\n", "            color='Origin',\n", "        )\n", "    elif plot_type == \"heatmap\":\n", "        # Compute x^2 + y^2 across a 2D grid\n", "        x, y = np.meshgrid(range(-5, 5), range(-5, 5))\n", "        z = x ** 2 + y ** 2\n", "\n", "        # Convert this grid to columnar data expected by Altair\n", "        source = pd.DataFrame({'x': x.ravel(),\n", "                            'y': y.ravel(),\n", "                            'z': z.ravel()})\n", "        return alt.Chart(source).mark_rect().encode(\n", "            x='x:O',\n", "            y='y:O',\n", "            color='z:Q'\n", "        )\n", "    elif plot_type == \"us_map\":\n", "        states = alt.topo_feature(data.us_10m.url, 'states')\n", "        source = data.income.url\n", "\n", "        return alt.Chart(source).mark_geoshape().encode(\n", "            shape='geo:G',\n", "            color='pct:Q',\n", "            tooltip=['name:N', 'pct:Q'],\n", "            facet=alt.Facet('group:N', columns=2),\n", "        ).transform_lookup(\n", "            lookup='id',\n", "            from_=alt.LookupData(data=states, key='id'),\n", "            as_='geo'\n", "        ).properties(\n", "            width=300,\n", "            height=175,\n", "        ).project(\n", "            type='albersUsa'\n", "        )\n", "    elif plot_type == \"interactive_barplot\":\n", "        source = data.movies.url\n", "\n", "        pts = alt.selection(type=\"single\", encodings=['x'])\n", "\n", "        rect = alt.Chart(data.movies.url).mark_rect().encode(\n", "            alt.X('IMDB_Rating:Q', bin=True),\n", "            alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),\n", "            alt.Color('count()',\n", "                scale=alt.Scale(scheme='greenblue'),\n", "                legend=alt.Legend(title='Total Records')\n", "            )\n", "        )\n", "\n", "        circ = rect.mark_point().encode(\n", "            alt.ColorValue('grey'),\n", "            alt.Size('count()',\n", "                legend=alt.Legend(title='Records in Selection')\n", "            )\n", "        ).transform_filter(\n", "            pts\n", "        )\n", "\n", "        bar = alt.Chart(source).mark_bar().encode(\n", "            x='Major_Genre:N',\n", "            y='count()',\n", "            color=alt.condition(pts, alt.ColorValue(\"steelblue\"), alt.ColorValue(\"grey\"))\n", "        ).properties(\n", "            width=550,\n", "            height=200\n", "        ).add_selection(pts)\n", "\n", "        plot = alt.vconcat(\n", "            rect + circ,\n", "            bar\n", "        ).resolve_legend(\n", "            color=\"independent\",\n", "            size=\"independent\"\n", "        )\n", "        return plot\n", "    elif plot_type == \"radial\":\n", "        source = pd.DataFrame({\"values\": [12, 23, 47, 6, 52, 19]})\n", "\n", "        base = alt.Chart(source).encode(\n", "            theta=alt.Theta(\"values:Q\", stack=True),\n", "            radius=alt.Radius(\"values\", scale=alt.Scale(type=\"sqrt\", zero=True, rangeMin=20)),\n", "            color=\"values:N\",\n", "        )\n", "\n", "        c1 = base.mark_arc(innerRadius=20, stroke=\"#fff\")\n", "\n", "        c2 = base.mark_text(radiusOffset=10).encode(text=\"values:Q\")\n", "\n", "        return c1 + c2\n", "    elif plot_type == \"multiline\":\n", "        source = data.stocks()\n", "\n", "        highlight = alt.selection(type='single', on='mouseover',\n", "                                fields=['symbol'], nearest=True)\n", "\n", "        base = alt.Chart(source).encode(\n", "            x='date:T',\n", "            y='price:Q',\n", "            color='symbol:N'\n", "        )\n", "\n", "        points = base.mark_circle().encode(\n", "            opacity=alt.value(0)\n", "        ).add_selection(\n", "            highlight\n", "        ).properties(\n", "            width=600\n", "        )\n", "\n", "        lines = base.mark_line().encode(\n", "            size=alt.condition(~highlight, alt.value(1), alt.value(3))\n", "        )\n", "\n", "        return points + lines\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    button = gr.Radio(label=\"Plot type\",\n", "                      choices=['scatter_plot', 'heatmap', 'us_map',\n", "                               'interactive_barplot', \"radial\", \"multiline\"], value='scatter_plot')\n", "    plot = gr.Plot(label=\"Plot\")\n", "    button.change(make_plot, inputs=button, outputs=[plot])\n", "    demo.load(make_plot, inputs=[button], outputs=[plot])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/altair_plot/run.py

@@ -0,0 +1,140 @@
+import altair as alt
+import gradio as gr
+import numpy as np
+import pandas as pd
+from vega_datasets import data
+
+
+def make_plot(plot_type):
+    if plot_type == "scatter_plot":
+        cars = data.cars()
+        return alt.Chart(cars).mark_point().encode(
+            x='Horsepower',
+            y='Miles_per_Gallon',
+            color='Origin',
+        )
+    elif plot_type == "heatmap":
+        # Compute x^2 + y^2 across a 2D grid
+        x, y = np.meshgrid(range(-5, 5), range(-5, 5))
+        z = x ** 2 + y ** 2
+
+        # Convert this grid to columnar data expected by Altair
+        source = pd.DataFrame({'x': x.ravel(),
+                            'y': y.ravel(),
+                            'z': z.ravel()})
+        return alt.Chart(source).mark_rect().encode(
+            x='x:O',
+            y='y:O',
+            color='z:Q'
+        )
+    elif plot_type == "us_map":
+        states = alt.topo_feature(data.us_10m.url, 'states')
+        source = data.income.url
+
+        return alt.Chart(source).mark_geoshape().encode(
+            shape='geo:G',
+            color='pct:Q',
+            tooltip=['name:N', 'pct:Q'],
+            facet=alt.Facet('group:N', columns=2),
+        ).transform_lookup(
+            lookup='id',
+            from_=alt.LookupData(data=states, key='id'),
+            as_='geo'
+        ).properties(
+            width=300,
+            height=175,
+        ).project(
+            type='albersUsa'
+        )
+    elif plot_type == "interactive_barplot":
+        source = data.movies.url
+
+        pts = alt.selection(type="single", encodings=['x'])
+
+        rect = alt.Chart(data.movies.url).mark_rect().encode(
+            alt.X('IMDB_Rating:Q', bin=True),
+            alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
+            alt.Color('count()',
+                scale=alt.Scale(scheme='greenblue'),
+                legend=alt.Legend(title='Total Records')
+            )
+        )
+
+        circ = rect.mark_point().encode(
+            alt.ColorValue('grey'),
+            alt.Size('count()',
+                legend=alt.Legend(title='Records in Selection')
+            )
+        ).transform_filter(
+            pts
+        )
+
+        bar = alt.Chart(source).mark_bar().encode(
+            x='Major_Genre:N',
+            y='count()',
+            color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
+        ).properties(
+            width=550,
+            height=200
+        ).add_selection(pts)
+
+        plot = alt.vconcat(
+            rect + circ,
+            bar
+        ).resolve_legend(
+            color="independent",
+            size="independent"
+        )
+        return plot
+    elif plot_type == "radial":
+        source = pd.DataFrame({"values": [12, 23, 47, 6, 52, 19]})
+
+        base = alt.Chart(source).encode(
+            theta=alt.Theta("values:Q", stack=True),
+            radius=alt.Radius("values", scale=alt.Scale(type="sqrt", zero=True, rangeMin=20)),
+            color="values:N",
+        )
+
+        c1 = base.mark_arc(innerRadius=20, stroke="#fff")
+
+        c2 = base.mark_text(radiusOffset=10).encode(text="values:Q")
+
+        return c1 + c2
+    elif plot_type == "multiline":
+        source = data.stocks()
+
+        highlight = alt.selection(type='single', on='mouseover',
+                                fields=['symbol'], nearest=True)
+
+        base = alt.Chart(source).encode(
+            x='date:T',
+            y='price:Q',
+            color='symbol:N'
+        )
+
+        points = base.mark_circle().encode(
+            opacity=alt.value(0)
+        ).add_selection(
+            highlight
+        ).properties(
+            width=600
+        )
+
+        lines = base.mark_line().encode(
+            size=alt.condition(~highlight, alt.value(1), alt.value(3))
+        )
+
+        return points + lines
+
+
+with gr.Blocks() as demo:
+    button = gr.Radio(label="Plot type",
+                      choices=['scatter_plot', 'heatmap', 'us_map',
+                               'interactive_barplot', "radial", "multiline"], value='scatter_plot')
+    plot = gr.Plot(label="Plot")
+    button.change(make_plot, inputs=button, outputs=[plot])
+    demo.load(make_plot, inputs=[button], outputs=[plot])
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/audio_debugger/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: audio_debugger"]}, {"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", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/audio_debugger/cantina.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import subprocess\n", "import os\n", "\n", "audio_file = os.path.join(os.path.abspath(''), \"cantina.wav\")\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tab(\"Audio\"):\n", "        gr.Audio(audio_file)\n", "    with gr.Tab(\"Interface\"):\n", "        gr.Interface(\n", "            lambda x: x, \"audio\", \"audio\", examples=[audio_file], cache_examples=True\n", "        )\n", "    with gr.Tab(\"Streaming\"):\n", "        gr.Interface(\n", "            lambda x: x,\n", "            gr.Audio(streaming=True),\n", "            \"audio\",\n", "            examples=[audio_file],\n", "            cache_examples=True,\n", "        )\n", "    with gr.Tab(\"console\"):\n", "        ip = gr.Textbox(label=\"User IP Address\")\n", "        gr.Interface(\n", "            lambda cmd: subprocess.run([cmd], capture_output=True, shell=True)\n", "            .stdout.decode(\"utf-8\")\n", "            .strip(),\n", "            \"text\",\n", "            \"text\",\n", "        )\n", "\n", "    def get_ip(request: gr.Request):\n", "        return request.client.host\n", "\n", "    demo.load(get_ip, None, ip)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue()\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/audio_debugger/run.py

@@ -0,0 +1,40 @@
+import gradio as gr
+import subprocess
+import os
+
+audio_file = os.path.join(os.path.dirname(__file__), "cantina.wav")
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Audio"):
+        gr.Audio(audio_file)
+    with gr.Tab("Interface"):
+        gr.Interface(
+            lambda x: x, "audio", "audio", examples=[audio_file], cache_examples=True
+        )
+    with gr.Tab("Streaming"):
+        gr.Interface(
+            lambda x: x,
+            gr.Audio(streaming=True),
+            "audio",
+            examples=[audio_file],
+            cache_examples=True,
+        )
+    with gr.Tab("console"):
+        ip = gr.Textbox(label="User IP Address")
+        gr.Interface(
+            lambda cmd: subprocess.run([cmd], capture_output=True, shell=True)
+            .stdout.decode("utf-8")
+            .strip(),
+            "text",
+            "text",
+        )
+
+    def get_ip(request: gr.Request):
+        return request.client.host
+
+    demo.load(get_ip, None, ip)
+
+if __name__ == "__main__":
+    demo.queue()
+    demo.launch()

demos/blocks_essay/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_essay"]}, {"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", "countries_cities_dict = {\n", "    \"USA\": [\"New York\", \"Los Angeles\", \"Chicago\"],\n", "    \"Canada\": [\"Toronto\", \"Montreal\", \"Vancouver\"],\n", "    \"Pakistan\": [\"Karachi\", \"Lahore\", \"Islamabad\"],\n", "}\n", "\n", "\n", "def change_textbox(choice):\n", "    if choice == \"short\":\n", "        return gr.Textbox(lines=2, visible=True), gr.Button(interactive=True)\n", "    elif choice == \"long\":\n", "        return gr.Textbox(lines=8, visible=True, value=\"Lorem ipsum dolor sit amet\"), gr.Button(interactive=True)\n", "    else:\n", "        return gr.Textbox(visible=False), gr.Button(interactive=False)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    radio = gr.Radio(\n", "        [\"short\", \"long\", \"none\"], label=\"What kind of essay would you like to write?\"\n", "    )\n", "    text = gr.Textbox(lines=2, interactive=True, show_copy_button=True)\n", "\n", "    with gr.Row():\n", "        num = gr.Number(minimum=0, maximum=100, label=\"input\")\n", "        out = gr.Number(label=\"output\")\n", "    minimum_slider = gr.Slider(0, 100, 0, label=\"min\")\n", "    maximum_slider = gr.Slider(0, 100, 100, label=\"max\")\n", "    submit_btn = gr.Button(\"Submit\", variant=\"primary\")\n", "\n", "    with gr.Row():\n", "        country = gr.Dropdown(list(countries_cities_dict.keys()), label=\"Country\")\n", "        cities = gr.Dropdown([], label=\"Cities\")\n", "        \n", "    @country.change(inputs=country, outputs=cities)\n", "    def update_cities(country):\n", "        cities = list(countries_cities_dict[country])\n", "        return gr.Dropdown(choices=cities, value=cities[0], interactive=True)\n", "\n", "    def reset_bounds(minimum, maximum):\n", "        return gr.Number(minimum=minimum, maximum=maximum)\n", "\n", "    radio.change(fn=change_textbox, inputs=radio, outputs=[text, submit_btn])\n", "    gr.on(\n", "        [minimum_slider.change, maximum_slider.change],\n", "        reset_bounds,\n", "        [minimum_slider, maximum_slider],\n", "        outputs=num,\n", "    )\n", "    num.submit(lambda x: x, num, out)\n", "\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/blocks_essay/run.py

@@ -0,0 +1,56 @@
+import gradio as gr
+
+countries_cities_dict = {
+    "USA": ["New York", "Los Angeles", "Chicago"],
+    "Canada": ["Toronto", "Montreal", "Vancouver"],
+    "Pakistan": ["Karachi", "Lahore", "Islamabad"],
+}
+
+
+def change_textbox(choice):
+    if choice == "short":
+        return gr.Textbox(lines=2, visible=True), gr.Button(interactive=True)
+    elif choice == "long":
+        return gr.Textbox(lines=8, visible=True, value="Lorem ipsum dolor sit amet"), gr.Button(interactive=True)
+    else:
+        return gr.Textbox(visible=False), gr.Button(interactive=False)
+
+
+with gr.Blocks() as demo:
+    radio = gr.Radio(
+        ["short", "long", "none"], label="What kind of essay would you like to write?"
+    )
+    text = gr.Textbox(lines=2, interactive=True, show_copy_button=True)
+
+    with gr.Row():
+        num = gr.Number(minimum=0, maximum=100, label="input")
+        out = gr.Number(label="output")
+    minimum_slider = gr.Slider(0, 100, 0, label="min")
+    maximum_slider = gr.Slider(0, 100, 100, label="max")
+    submit_btn = gr.Button("Submit", variant="primary")
+
+    with gr.Row():
+        country = gr.Dropdown(list(countries_cities_dict.keys()), label="Country")
+        cities = gr.Dropdown([], label="Cities")
+        
+    @country.change(inputs=country, outputs=cities)
+    def update_cities(country):
+        cities = list(countries_cities_dict[country])
+        return gr.Dropdown(choices=cities, value=cities[0], interactive=True)
+
+    def reset_bounds(minimum, maximum):
+        return gr.Number(minimum=minimum, maximum=maximum)
+
+    radio.change(fn=change_textbox, inputs=radio, outputs=[text, submit_btn])
+    gr.on(
+        [minimum_slider.change, maximum_slider.change],
+        reset_bounds,
+        [minimum_slider, maximum_slider],
+        outputs=num,
+    )
+    num.submit(lambda x: x, num, out)
+
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_group/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_group"]}, {"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 greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.\")\n", "    gr.Textbox(\"A\")\n", "    gr.Number(3)\n", "    gr.Button()\n", "    gr.Image()\n", "    gr.Slider()\n", "\n", "    gr.Markdown(\"### This is the same set put in a gr.Group.\")\n", "    with gr.Group():\n", "        gr.Textbox(\"A\")\n", "        gr.Number(3)\n", "        gr.Button()\n", "        gr.Image()\n", "        gr.Slider()\n", "\n", "    gr.Markdown(\"### Now in a Row, no group.\")\n", "    with gr.Row():\n", "        gr.Textbox(\"A\")\n", "        gr.Number(3)\n", "        gr.Button()\n", "        gr.Image()\n", "        gr.Slider()\n", "\n", "    gr.Markdown(\"### Now in a Row in a group.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Textbox(\"A\")\n", "            gr.Number(3)\n", "            gr.Button()\n", "            gr.Image()\n", "            gr.Slider()\n", "\n", "    gr.Markdown(\"### Several rows grouped together.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Textbox(\"A\")\n", "            gr.Number(3)\n", "            gr.Button()\n", "        with gr.Row():\n", "            gr.Image()\n", "            gr.Audio()\n", "\n", "    gr.Markdown(\"### Several columns grouped together. If columns are uneven, there is a gray group background.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                name = gr.Textbox(label=\"Name\")\n", "                btn = gr.Button(\"Hello\")\n", "                gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", "                gr.Number()\n", "                gr.Textbox()\n", "            with gr.Column():\n", "                gr.Image()\n", "                gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", "                with gr.Row():\n", "                    gr.Number(scale=2)\n", "                    gr.Textbox()\n", "\n", "    gr.Markdown(\"### container=False removes label, padding, and block border, placing elements 'directly' on background.\")\n", "    gr.Radio([1,2,3], container=False)\n", "    gr.Textbox(container=False)\n", "    gr.Image(\"https://picsum.photos/id/237/200/300\", container=False, height=200)\n", "\n", "    gr.Markdown(\"### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.\")\n", "\n", "\n", "    with gr.Group():\n", "        name = gr.Textbox(label=\"Name\")\n", "        output = gr.Textbox(show_label=False, container=False)\n", "        greet_btn = gr.Button(\"Greet\")\n", "        with gr.Row():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False)\n", "            gr.Textbox(container=False)\n", "            gr.Number(container=False)\n", "            gr.Image(height=100)\n", "    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "\n", "    gr.Markdown(\"### More examples\")\n", "\n", "    with gr.Group():\n", "        gr.Chatbot()\n", "        with gr.Row():\n", "            name = gr.Textbox(label=\"Prompot\", container=False)\n", "            go = gr.Button(\"go\", scale=0)\n", "\n", "    with gr.Column():\n", "        gr.Radio([1,2,3], container=False)\n", "        gr.Slider(0, 20, container=False)\n", "\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", "            gr.Number(container=False)\n", "            gr.Textbox(container=False)\n", "\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", "        with gr.Column():\n", "           gr.Number(container=False)\n", "        with gr.Column():\n", "            gr.Textbox(container=False)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/blocks_group/run.py

@@ -0,0 +1,113 @@
+import gradio as gr
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+    gr.Textbox("A")
+    gr.Number(3)
+    gr.Button()
+    gr.Image()
+    gr.Slider()
+
+    gr.Markdown("### This is the same set put in a gr.Group.")
+    with gr.Group():
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+    gr.Markdown("### Now in a Row, no group.")
+    with gr.Row():
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+    gr.Markdown("### Now in a Row in a group.")
+    with gr.Group():
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+    gr.Markdown("### Several rows grouped together.")
+    with gr.Group():
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+        with gr.Row():
+            gr.Image()
+            gr.Audio()
+
+    gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+    with gr.Group():
+        with gr.Row():
+            with gr.Column():
+                name = gr.Textbox(label="Name")
+                btn = gr.Button("Hello")
+                gr.Dropdown(["a", "b", "c"], interactive=True)
+                gr.Number()
+                gr.Textbox()
+            with gr.Column():
+                gr.Image()
+                gr.Dropdown(["a", "b", "c"], interactive=True)
+                with gr.Row():
+                    gr.Number(scale=2)
+                    gr.Textbox()
+
+    gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+    gr.Radio([1,2,3], container=False)
+    gr.Textbox(container=False)
+    gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+    gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+    with gr.Group():
+        name = gr.Textbox(label="Name")
+        output = gr.Textbox(show_label=False, container=False)
+        greet_btn = gr.Button("Greet")
+        with gr.Row():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+            gr.Textbox(container=False)
+            gr.Number(container=False)
+            gr.Image(height=100)
+    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+    gr.Markdown("### More examples")
+
+    with gr.Group():
+        gr.Chatbot()
+        with gr.Row():
+            name = gr.Textbox(label="Prompot", container=False)
+            go = gr.Button("go", scale=0)
+
+    with gr.Column():
+        gr.Radio([1,2,3], container=False)
+        gr.Slider(0, 20, container=False)
+
+    with gr.Group():
+        with gr.Row():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            gr.Number(container=False)
+            gr.Textbox(container=False)
+
+    with gr.Row():
+        with gr.Column():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+        with gr.Column():
+           gr.Number(container=False)
+        with gr.Column():
+            gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_js_methods/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_js_methods"]}, {"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", "blocks = gr.Blocks()\n", "\n", "with blocks as demo:\n", "    subject = gr.Textbox(placeholder=\"subject\")\n", "    verb = gr.Radio([\"ate\", \"loved\", \"hated\"])\n", "    object = gr.Textbox(placeholder=\"object\")\n", "\n", "    with gr.Row():\n", "        btn = gr.Button(\"Create sentence.\")\n", "        reverse_btn = gr.Button(\"Reverse sentence.\")\n", "        foo_bar_btn = gr.Button(\"Append foo\")\n", "        reverse_then_to_the_server_btn = gr.Button(\n", "            \"Reverse sentence and send to server.\"\n", "        )\n", "\n", "    def sentence_maker(w1, w2, w3):\n", "        return f\"{w1} {w2} {w3}\"\n", "\n", "    output1 = gr.Textbox(label=\"output 1\")\n", "    output2 = gr.Textbox(label=\"verb\")\n", "    output3 = gr.Textbox(label=\"verb reversed\")\n", "    output4 = gr.Textbox(label=\"front end process and then send to backend\")\n", "\n", "    btn.click(sentence_maker, [subject, verb, object], output1)\n", "    reverse_btn.click(\n", "        None, [subject, verb, object], output2, js=\"(s, v, o) => o + ' ' + v + ' ' + s\"\n", "    )\n", "    verb.change(lambda x: x, verb, output3, js=\"(x) => [...x].reverse().join('')\")\n", "    foo_bar_btn.click(None, [], subject, js=\"(x) => x + ' foo'\")\n", "\n", "    reverse_then_to_the_server_btn.click(\n", "        sentence_maker,\n", "        [subject, verb, object],\n", "        output4,\n", "        js=\"(s, v, o) => [s, v, o].map(x => [...x].reverse().join(''))\",\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/blocks_js_methods/run.py

@@ -0,0 +1,41 @@
+import gradio as gr
+
+blocks = gr.Blocks()
+
+with blocks as demo:
+    subject = gr.Textbox(placeholder="subject")
+    verb = gr.Radio(["ate", "loved", "hated"])
+    object = gr.Textbox(placeholder="object")
+
+    with gr.Row():
+        btn = gr.Button("Create sentence.")
+        reverse_btn = gr.Button("Reverse sentence.")
+        foo_bar_btn = gr.Button("Append foo")
+        reverse_then_to_the_server_btn = gr.Button(
+            "Reverse sentence and send to server."
+        )
+
+    def sentence_maker(w1, w2, w3):
+        return f"{w1} {w2} {w3}"
+
+    output1 = gr.Textbox(label="output 1")
+    output2 = gr.Textbox(label="verb")
+    output3 = gr.Textbox(label="verb reversed")
+    output4 = gr.Textbox(label="front end process and then send to backend")
+
+    btn.click(sentence_maker, [subject, verb, object], output1)
+    reverse_btn.click(
+        None, [subject, verb, object], output2, js="(s, v, o) => o + ' ' + v + ' ' + s"
+    )
+    verb.change(lambda x: x, verb, output3, js="(x) => [...x].reverse().join('')")
+    foo_bar_btn.click(None, [], subject, js="(x) => x + ' foo'")
+
+    reverse_then_to_the_server_btn.click(
+        sentence_maker,
+        [subject, verb, object],
+        output4,
+        js="(s, v, o) => [s, v, o].map(x => [...x].reverse().join(''))",
+    )
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_layout/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"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", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    with gr.Row():\n", "        gr.Image(interactive=True, scale=2)\n", "        gr.Image()\n", "    with gr.Row():\n", "        gr.Textbox(label=\"Text\")\n", "        gr.Number(label=\"Count\", scale=2)\n", "        gr.Radio(choices=[\"One\", \"Two\"])\n", "    with gr.Row():\n", "        gr.Button(\"500\", scale=0, min_width=500)\n", "        gr.Button(\"A\", scale=0)\n", "        gr.Button(\"grow\")\n", "    with gr.Row():\n", "        gr.Textbox()\n", "        gr.Textbox()\n", "        gr.Button()        \n", "    with gr.Row():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                gr.Textbox(label=\"Text\")\n", "                gr.Number(label=\"Count\")\n", "                gr.Radio(choices=[\"One\", \"Two\"])\n", "            gr.Image()\n", "            with gr.Column():\n", "                gr.Image(interactive=True)\n", "                gr.Image()\n", "    gr.Image()\n", "    gr.Textbox(label=\"Text\")\n", "    gr.Number(label=\"Count\")\n", "    gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/blocks_layout/run.py

@@ -0,0 +1,39 @@
+import gradio as gr
+
+
+demo = gr.Blocks()
+
+with demo:
+    with gr.Row():
+        gr.Image(interactive=True, scale=2)
+        gr.Image()
+    with gr.Row():
+        gr.Textbox(label="Text")
+        gr.Number(label="Count", scale=2)
+        gr.Radio(choices=["One", "Two"])
+    with gr.Row():
+        gr.Button("500", scale=0, min_width=500)
+        gr.Button("A", scale=0)
+        gr.Button("grow")
+    with gr.Row():
+        gr.Textbox()
+        gr.Textbox()
+        gr.Button()        
+    with gr.Row():
+        with gr.Row():
+            with gr.Column():
+                gr.Textbox(label="Text")
+                gr.Number(label="Count")
+                gr.Radio(choices=["One", "Two"])
+            gr.Image()
+            with gr.Column():
+                gr.Image(interactive=True)
+                gr.Image()
+    gr.Image()
+    gr.Textbox(label="Text")
+    gr.Number(label="Count")
+    gr.Radio(choices=["One", "Two"])
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_multiple_event_triggers/requirements.txt

@@ -0,0 +1,2 @@
+plotly
+pypistats

demos/blocks_multiple_event_triggers/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_multiple_event_triggers"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly pypistats"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pypistats\n", "from datetime import date\n", "from dateutil.relativedelta import relativedelta\n", "import pandas as pd\n", "\n", "def get_plot(lib, time):\n", "    data = pypistats.overall(lib, total=True, format=\"pandas\")\n", "    data = data.groupby(\"category\").get_group(\"with_mirrors\").sort_values(\"date\")\n", "    start_date = date.today() - relativedelta(months=int(time.split(\" \")[0]))\n", "    data = data[(data['date'] > str(start_date))]\n", "    data.date = pd.to_datetime(pd.to_datetime(data.date))\n", "    return gr.LinePlot(value=data, x=\"date\", y=\"downloads\",\n", "                              tooltip=['date', 'downloads'],\n", "                              title=f\"Pypi downloads of {lib} over last {time}\",\n", "                              overlay_point=True,\n", "                              height=400,\n", "                              width=900)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "        ## Pypi Download Stats \ud83d\udcc8\n", "        See live download stats for all of Hugging Face's open-source libraries \ud83e\udd17\n", "        \"\"\")\n", "    with gr.Row():\n", "        lib = gr.Dropdown([\"transformers\", \"datasets\", \"huggingface-hub\", \"gradio\", \"accelerate\"],\n", "                          value=\"gradio\", label=\"Library\")\n", "        time = gr.Dropdown([\"3 months\", \"6 months\", \"9 months\", \"12 months\"],\n", "                           value=\"3 months\", label=\"Downloads over the last...\")\n", "\n", "    plt = gr.LinePlot()\n", "    # You can add multiple event triggers in 2 lines like this\n", "    for event in [lib.change, time.change, demo.load]:\n", "        event(get_plot, [lib, time], [plt])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/blocks_multiple_event_triggers/run.py

@@ -0,0 +1,39 @@
+import gradio as gr
+import pypistats
+from datetime import date
+from dateutil.relativedelta import relativedelta
+import pandas as pd
+
+def get_plot(lib, time):
+    data = pypistats.overall(lib, total=True, format="pandas")
+    data = data.groupby("category").get_group("with_mirrors").sort_values("date")
+    start_date = date.today() - relativedelta(months=int(time.split(" ")[0]))
+    data = data[(data['date'] > str(start_date))]
+    data.date = pd.to_datetime(pd.to_datetime(data.date))
+    return gr.LinePlot(value=data, x="date", y="downloads",
+                              tooltip=['date', 'downloads'],
+                              title=f"Pypi downloads of {lib} over last {time}",
+                              overlay_point=True,
+                              height=400,
+                              width=900)
+
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+        """
+        ## Pypi Download Stats 📈
+        See live download stats for all of Hugging Face's open-source libraries 🤗
+        """)
+    with gr.Row():
+        lib = gr.Dropdown(["transformers", "datasets", "huggingface-hub", "gradio", "accelerate"],
+                          value="gradio", label="Library")
+        time = gr.Dropdown(["3 months", "6 months", "9 months", "12 months"],
+                           value="3 months", label="Downloads over the last...")
+
+    plt = gr.LinePlot()
+    # You can add multiple event triggers in 2 lines like this
+    for event in [lib.change, time.change, demo.load]:
+        event(get_plot, [lib, time], [plt])
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_update/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_update"]}, {"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", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "    # Animal Generator\n", "    Once you select a species, the detail panel should be visible.\n", "    \"\"\"\n", "    )\n", "\n", "    species = gr.Radio(label=\"Animal Class\", choices=[\"Mammal\", \"Fish\", \"Bird\"])\n", "    animal = gr.Dropdown(label=\"Animal\", choices=[])\n", "\n", "    with gr.Column(visible=False) as details_col:\n", "        weight = gr.Slider(0, 20)\n", "        details = gr.Textbox(label=\"Extra Details\")\n", "        generate_btn = gr.Button(\"Generate\")\n", "        output = gr.Textbox(label=\"Output\")\n", "\n", "    species_map = {\n", "        \"Mammal\": [\"Elephant\", \"Giraffe\", \"Hamster\"],\n", "        \"Fish\": [\"Shark\", \"Salmon\", \"Tuna\"],\n", "        \"Bird\": [\"Chicken\", \"Eagle\", \"Hawk\"],\n", "    }\n", "\n", "    def filter_species(species):\n", "        return gr.Dropdown(\n", "            choices=species_map[species], value=species_map[species][1]\n", "        ), gr.Column(visible=True)\n", "\n", "    species.change(filter_species, species, [animal, details_col])\n", "\n", "    def filter_weight(animal):\n", "        if animal in (\"Elephant\", \"Shark\", \"Giraffe\"):\n", "            return gr.Slider(maximum=100)\n", "        else:\n", "            return gr.Slider(maximum=20)\n", "\n", "    animal.change(filter_weight, animal, weight)\n", "    weight.change(lambda w: gr.Textbox(lines=int(w / 10) + 1), weight, details)\n", "\n", "    generate_btn.click(lambda x: x, details, output)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/blocks_update/run.py

@@ -0,0 +1,46 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+        """
+    # Animal Generator
+    Once you select a species, the detail panel should be visible.
+    """
+    )
+
+    species = gr.Radio(label="Animal Class", choices=["Mammal", "Fish", "Bird"])
+    animal = gr.Dropdown(label="Animal", choices=[])
+
+    with gr.Column(visible=False) as details_col:
+        weight = gr.Slider(0, 20)
+        details = gr.Textbox(label="Extra Details")
+        generate_btn = gr.Button("Generate")
+        output = gr.Textbox(label="Output")
+
+    species_map = {
+        "Mammal": ["Elephant", "Giraffe", "Hamster"],
+        "Fish": ["Shark", "Salmon", "Tuna"],
+        "Bird": ["Chicken", "Eagle", "Hawk"],
+    }
+
+    def filter_species(species):
+        return gr.Dropdown(
+            choices=species_map[species], value=species_map[species][1]
+        ), gr.Column(visible=True)
+
+    species.change(filter_species, species, [animal, details_col])
+
+    def filter_weight(animal):
+        if animal in ("Elephant", "Shark", "Giraffe"):
+            return gr.Slider(maximum=100)
+        else:
+            return gr.Slider(maximum=20)
+
+    animal.change(filter_weight, animal, weight)
+    weight.change(lambda w: gr.Textbox(lines=int(w / 10) + 1), weight, details)
+
+    generate_btn.click(lambda x: x, details, output)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/calculator/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: calculator"]}, {"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('examples')\n", "!wget -q -O examples/log.csv https://github.com/gradio-app/gradio/raw/main/demo/calculator/examples/log.csv"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "#from foo import BAR\n", "#\n", "def calculator(num1, operation, num2):\n", "    if operation == \"add\":\n", "        return num1 + num2\n", "    elif operation == \"subtract\":\n", "        return num1 - num2\n", "    elif operation == \"multiply\":\n", "        return num1 * num2\n", "    elif operation == \"divide\":\n", "        if num2 == 0:\n", "            raise gr.Error(\"Cannot divide by zero!\")\n", "        return num1 / num2\n", "\n", "demo = gr.Interface(\n", "    calculator,\n", "    [\n", "        \"number\", \n", "        gr.Radio([\"add\", \"subtract\", \"multiply\", \"divide\"]),\n", "        \"number\"\n", "    ],\n", "    \"number\",\n", "    examples=[\n", "        [45, \"add\", 3],\n", "        [3.14, \"divide\", 2],\n", "        [144, \"multiply\", 2.5],\n", "        [0, \"subtract\", 1.2],\n", "    ],\n", "    title=\"Toy Calculator\",\n", "    description=\"Here's a sample toy calculator. Allows you to calculate things like $2+2=4$\",\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/calculator/run.py

@@ -0,0 +1,35 @@
+import gradio as gr
+#from foo import BAR
+#
+def calculator(num1, operation, num2):
+    if operation == "add":
+        return num1 + num2
+    elif operation == "subtract":
+        return num1 - num2
+    elif operation == "multiply":
+        return num1 * num2
+    elif operation == "divide":
+        if num2 == 0:
+            raise gr.Error("Cannot divide by zero!")
+        return num1 / num2
+
+demo = gr.Interface(
+    calculator,
+    [
+        "number", 
+        gr.Radio(["add", "subtract", "multiply", "divide"]),
+        "number"
+    ],
+    "number",
+    examples=[
+        [45, "add", 3],
+        [3.14, "divide", 2],
+        [144, "multiply", 2.5],
+        [0, "subtract", 1.2],
+    ],
+    title="Toy Calculator",
+    description="Here's a sample toy calculator. Allows you to calculate things like $2+2=4$",
+)
+
+if __name__ == "__main__":
+    demo.launch()

demos/cancel_events/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: cancel_events"]}, {"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 time\n", "import gradio as gr\n", "import atexit\n", "import pathlib\n", "\n", "log_file = (pathlib.Path(__file__).parent / \"cancel_events_output_log.txt\").resolve()\n", "\n", "def fake_diffusion(steps):\n", "    log_file.write_text(\"\")\n", "    for i in range(steps):\n", "        print(f\"Current step: {i}\")\n", "        with log_file.open(\"a\") as f:\n", "            f.write(f\"Current step: {i}\\n\")\n", "        time.sleep(0.2)\n", "        yield str(i)\n", "\n", "\n", "def long_prediction(*args, **kwargs):\n", "    time.sleep(10)\n", "    return 42\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            n = gr.Slider(1, 10, value=9, step=1, label=\"Number Steps\")\n", "            run = gr.Button(value=\"Start Iterating\")\n", "            output = gr.Textbox(label=\"Iterative Output\")\n", "            stop = gr.Button(value=\"Stop Iterating\")\n", "        with gr.Column():\n", "            textbox = gr.Textbox(label=\"Prompt\")\n", "            prediction = gr.Number(label=\"Expensive Calculation\")\n", "            run_pred = gr.Button(value=\"Run Expensive Calculation\")\n", "        with gr.Column():\n", "            cancel_on_change = gr.Textbox(label=\"Cancel Iteration and Expensive Calculation on Change\")\n", "            cancel_on_submit = gr.Textbox(label=\"Cancel Iteration and Expensive Calculation on Submit\")\n", "            echo = gr.Textbox(label=\"Echo\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            image = gr.Image(sources=[\"webcam\"], label=\"Cancel on clear\", interactive=True)\n", "        with gr.Column():\n", "            video = gr.Video(sources=[\"webcam\"], label=\"Cancel on start recording\", interactive=True)\n", "\n", "    click_event = run.click(fake_diffusion, n, output)\n", "    stop.click(fn=None, inputs=None, outputs=None, cancels=[click_event])\n", "    pred_event = run_pred.click(fn=long_prediction, inputs=[textbox], outputs=prediction)\n", "\n", "    cancel_on_change.change(None, None, None, cancels=[click_event, pred_event])\n", "    cancel_on_submit.submit(lambda s: s, cancel_on_submit, echo, cancels=[click_event, pred_event])\n", "    image.clear(None, None, None, cancels=[click_event, pred_event])\n", "    video.start_recording(None, None, None, cancels=[click_event, pred_event])\n", "\n", "    demo.queue(max_size=20)\n", "    atexit.register(lambda: log_file.unlink())\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/cancel_events/run.py

@@ -0,0 +1,57 @@
+import time
+import gradio as gr
+import atexit
+import pathlib
+
+log_file = (pathlib.Path(__file__).parent / "cancel_events_output_log.txt").resolve()
+
+def fake_diffusion(steps):
+    log_file.write_text("")
+    for i in range(steps):
+        print(f"Current step: {i}")
+        with log_file.open("a") as f:
+            f.write(f"Current step: {i}\n")
+        time.sleep(0.2)
+        yield str(i)
+
+
+def long_prediction(*args, **kwargs):
+    time.sleep(10)
+    return 42
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            n = gr.Slider(1, 10, value=9, step=1, label="Number Steps")
+            run = gr.Button(value="Start Iterating")
+            output = gr.Textbox(label="Iterative Output")
+            stop = gr.Button(value="Stop Iterating")
+        with gr.Column():
+            textbox = gr.Textbox(label="Prompt")
+            prediction = gr.Number(label="Expensive Calculation")
+            run_pred = gr.Button(value="Run Expensive Calculation")
+        with gr.Column():
+            cancel_on_change = gr.Textbox(label="Cancel Iteration and Expensive Calculation on Change")
+            cancel_on_submit = gr.Textbox(label="Cancel Iteration and Expensive Calculation on Submit")
+            echo = gr.Textbox(label="Echo")
+    with gr.Row():
+        with gr.Column():
+            image = gr.Image(sources=["webcam"], label="Cancel on clear", interactive=True)
+        with gr.Column():
+            video = gr.Video(sources=["webcam"], label="Cancel on start recording", interactive=True)
+
+    click_event = run.click(fake_diffusion, n, output)
+    stop.click(fn=None, inputs=None, outputs=None, cancels=[click_event])
+    pred_event = run_pred.click(fn=long_prediction, inputs=[textbox], outputs=prediction)
+
+    cancel_on_change.change(None, None, None, cancels=[click_event, pred_event])
+    cancel_on_submit.submit(lambda s: s, cancel_on_submit, echo, cancels=[click_event, pred_event])
+    image.clear(None, None, None, cancels=[click_event, pred_event])
+    video.start_recording(None, None, None, cancels=[click_event, pred_event])
+
+    demo.queue(max_size=20)
+    atexit.register(lambda: log_file.unlink())
+
+if __name__ == "__main__":
+    demo.launch()

demos/chatbot_multimodal/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"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('files')\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_multimodal/files/avatar.png\n", "!wget -q -O files/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/chatbot_multimodal/files/lion.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import time\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append(((x,), None))\n", "    if message[\"text\"] is not None:\n", "        history.append((message[\"text\"], None))\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "def bot(history):\n", "    response = \"**That's cool!**\"\n", "    history[-1][1] = \"\"\n", "    for character in response:\n", "        history[-1][1] += character\n", "        time.sleep(0.05)\n", "        yield history\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(\n", "        [],\n", "        elem_id=\"chatbot\",\n", "        bubble_full_width=False\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(interactive=True, file_types=[\"image\"], placeholder=\"Enter message or upload file...\", show_label=False)\n", "\n", "    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])\n", "    bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name=\"bot_response\")\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "\n", "demo.queue()\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/chatbot_multimodal/run.py

@@ -0,0 +1,44 @@
+import gradio as gr
+import os
+import time
+
+# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.
+
+
+def print_like_dislike(x: gr.LikeData):
+    print(x.index, x.value, x.liked)
+
+def add_message(history, message):
+    for x in message["files"]:
+        history.append(((x,), None))
+    if message["text"] is not None:
+        history.append((message["text"], None))
+    return history, gr.MultimodalTextbox(value=None, interactive=False)
+
+def bot(history):
+    response = "**That's cool!**"
+    history[-1][1] = ""
+    for character in response:
+        history[-1][1] += character
+        time.sleep(0.05)
+        yield history
+
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot(
+        [],
+        elem_id="chatbot",
+        bubble_full_width=False,
+        avatar_images=[None, "files/avatar.png"]
+    )
+
+    chat_input = gr.MultimodalTextbox(interactive=True, file_types=["image"], placeholder="Enter message or upload file...", show_label=False)
+
+    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
+    bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name="bot_response")
+    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])
+
+    chatbot.like(print_like_dislike, None, None)
+
+demo.queue()
+if __name__ == "__main__":
+    demo.launch()

demos/chatinterface_streaming_echo/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_streaming_echo"]}, {"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 time\n", "import gradio as gr\n", "\n", "\n", "def slow_echo(message, history):\n", "    for i in range(len(message)):\n", "        time.sleep(0.05)\n", "        yield \"You typed: \" + message[: i + 1]\n", "\n", "\n", "demo = gr.ChatInterface(slow_echo).queue()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/chatinterface_streaming_echo/run.py

@@ -0,0 +1,14 @@
+import time
+import gradio as gr
+
+
+def slow_echo(message, history):
+    for i in range(len(message)):
+        time.sleep(0.05)
+        yield "You typed: " + message[: i + 1]
+
+
+demo = gr.ChatInterface(slow_echo).queue()
+
+if __name__ == "__main__":
+    demo.launch()

demos/clear_components/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: clear_components"]}, {"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", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/clear_components/__init__.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from datetime import datetime\n", "import os\n", "import random\n", "import string\n", "import pandas as pd\n", "\n", "import numpy as np\n", "import matplotlib.pyplot as plt\n", "\n", "\n", "\n", "def random_plot():\n", "    start_year = 2020\n", "    x = np.arange(start_year, start_year + 5)\n", "    year_count = x.shape[0]\n", "    plt_format = \"-\"\n", "    fig = plt.figure()\n", "    ax = fig.add_subplot(111)\n", "    series = np.arange(0, year_count, dtype=float)\n", "    series = series**2\n", "    series += np.random.rand(year_count)\n", "    ax.plot(x, series, plt_format)\n", "    return fig\n", "\n", "\n", "images = [\n", "    \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80\",\n", "    \"https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80\",\n", "    \"https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80\",\n", "]\n", "file_dir = os.path.join(os.path.abspath(''), \"..\", \"kitchen_sink\", \"files\")\n", "model3d_dir = os.path.join(os.path.abspath(''), \"..\", \"model3D\", \"files\")\n", "highlighted_text_output_1 = [\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9988978,\n", "        \"index\": 2,\n", "        \"word\": \"Chicago\",\n", "        \"start\": 5,\n", "        \"end\": 12,\n", "    },\n", "    {\n", "        \"entity\": \"I-MISC\",\n", "        \"score\": 0.9958592,\n", "        \"index\": 5,\n", "        \"word\": \"Pakistani\",\n", "        \"start\": 22,\n", "        \"end\": 31,\n", "    },\n", "]\n", "highlighted_text_output_2 = [\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9988978,\n", "        \"index\": 2,\n", "        \"word\": \"Chicago\",\n", "        \"start\": 5,\n", "        \"end\": 12,\n", "    },\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9958592,\n", "        \"index\": 5,\n", "        \"word\": \"Pakistan\",\n", "        \"start\": 22,\n", "        \"end\": 30,\n", "    },\n", "]\n", "\n", "highlighted_text = \"Does Chicago have any Pakistani restaurants\"\n", "\n", "\n", "def random_model3d():\n", "    model_3d = random.choice(\n", "        [os.path.join(model3d_dir, model) for model in os.listdir(model3d_dir) if model != \"source.txt\"]\n", "    )\n", "    return model_3d\n", "\n", "\n", "\n", "components = [\n", "    gr.Textbox(value=lambda: datetime.now(), label=\"Current Time\"),\n", "    gr.Number(value=lambda: random.random(), label=\"Random Percentage\"),\n", "    gr.Slider(minimum=0, maximum=100, randomize=True, label=\"Slider with randomize\"),\n", "    gr.Slider(\n", "        minimum=0,\n", "        maximum=1,\n", "        value=lambda: random.random(),\n", "        label=\"Slider with value func\",\n", "    ),\n", "    gr.Checkbox(value=lambda: random.random() > 0.5, label=\"Random Checkbox\"),\n", "    gr.CheckboxGroup(\n", "        choices=[\"a\", \"b\", \"c\", \"d\"],\n", "        value=lambda: random.choice([\"a\", \"b\", \"c\", \"d\"]),\n", "        label=\"Random CheckboxGroup\",\n", "    ),\n", "    gr.Radio(\n", "        choices=list(string.ascii_lowercase),\n", "        value=lambda: random.choice(string.ascii_lowercase),\n", "    ),\n", "    gr.Dropdown(\n", "        choices=[\"a\", \"b\", \"c\", \"d\", \"e\"],\n", "        value=lambda: random.choice([\"a\", \"b\", \"c\"]),\n", "    ),\n", "    gr.Image(\n", "        value=lambda: random.choice(images)\n", "    ),\n", "    gr.Video(value=lambda: os.path.join(file_dir, \"world.mp4\")),\n", "    gr.Audio(value=lambda: os.path.join(file_dir, \"cantina.wav\")),\n", "    gr.File(\n", "        value=lambda: random.choice(\n", "            [os.path.join(file_dir, img) for img in os.listdir(file_dir)]\n", "        )\n", "    ),\n", "    gr.Dataframe(\n", "        value=lambda: pd.DataFrame({\"random_number_rows\": range(5)}, columns=[\"one\", \"two\", \"three\"])\n", "    ),\n", "    gr.ColorPicker(value=lambda: random.choice([\"#000000\", \"#ff0000\", \"#0000FF\"])),\n", "    gr.Label(value=lambda: random.choice([\"Pedestrian\", \"Car\", \"Cyclist\"])),\n", "    gr.HighlightedText(\n", "        value=lambda: random.choice(\n", "            [\n", "                {\"text\": highlighted_text, \"entities\": highlighted_text_output_1},\n", "                {\"text\": highlighted_text, \"entities\": highlighted_text_output_2},\n", "            ]\n", "        ),\n", "    ),\n", "    gr.JSON(value=lambda: random.choice([{\"a\": 1}, {\"b\": 2}])),\n", "    gr.HTML(\n", "        value=lambda: random.choice(\n", "            [\n", "                '<p style=\"color:red;\">I am red</p>',\n", "                '<p style=\"color:blue;\">I am blue</p>',\n", "            ]\n", "        )\n", "    ),\n", "    gr.Gallery(\n", "        value=lambda: images\n", "    ),\n", "    gr.Model3D(value=random_model3d),\n", "    gr.Plot(value=random_plot),\n", "    gr.Markdown(value=lambda: f\"### {random.choice(['Hello', 'Hi', 'Goodbye!'])}\"),\n", "]\n", "\n", "\n", "def evaluate_values(*args):\n", "    are_false = []\n", "    for a in args:\n", "        if isinstance(a, (pd.DataFrame, np.ndarray)):\n", "            are_false.append(not a.any().any())\n", "        elif isinstance(a, str) and a.startswith(\"#\"):\n", "            are_false.append(a == \"#000000\")\n", "        else:\n", "            are_false.append(not a)\n", "    return all(are_false)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    for i, component in enumerate(components):\n", "        component.label = f\"component_{str(i).zfill(2)}\"\n", "        component.render()\n", "    clear = gr.ClearButton(value=\"Clear\", components=components)\n", "    result = gr.Textbox(label=\"Are all cleared?\")\n", "    hide = gr.Button(value=\"Hide\")\n", "    reveal = gr.Button(value=\"Reveal\")\n", "    clear_button_and_components = components + [clear]\n", "    hide.click(\n", "        lambda: [c.__class__(visible=False) for c in clear_button_and_components],\n", "        inputs=[],\n", "        outputs=clear_button_and_components\n", "    )\n", "    reveal.click(\n", "        lambda: [c.__class__(visible=True) for c in clear_button_and_components],\n", "        inputs=[],\n", "        outputs=clear_button_and_components\n", "    )\n", "    get_value = gr.Button(value=\"Get Values\")\n", "    get_value.click(evaluate_values, components, result)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/clear_components/run.py

@@ -0,0 +1,183 @@
+import gradio as gr
+from datetime import datetime
+import os
+import random
+import string
+import pandas as pd
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+
+
+def random_plot():
+    start_year = 2020
+    x = np.arange(start_year, start_year + 5)
+    year_count = x.shape[0]
+    plt_format = "-"
+    fig = plt.figure()
+    ax = fig.add_subplot(111)
+    series = np.arange(0, year_count, dtype=float)
+    series = series**2
+    series += np.random.rand(year_count)
+    ax.plot(x, series, plt_format)
+    return fig
+
+
+images = [
+    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+    "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
+    "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
+]
+file_dir = os.path.join(os.path.dirname(__file__), "..", "kitchen_sink", "files")
+model3d_dir = os.path.join(os.path.dirname(__file__), "..", "model3D", "files")
+highlighted_text_output_1 = [
+    {
+        "entity": "I-LOC",
+        "score": 0.9988978,
+        "index": 2,
+        "word": "Chicago",
+        "start": 5,
+        "end": 12,
+    },
+    {
+        "entity": "I-MISC",
+        "score": 0.9958592,
+        "index": 5,
+        "word": "Pakistani",
+        "start": 22,
+        "end": 31,
+    },
+]
+highlighted_text_output_2 = [
+    {
+        "entity": "I-LOC",
+        "score": 0.9988978,
+        "index": 2,
+        "word": "Chicago",
+        "start": 5,
+        "end": 12,
+    },
+    {
+        "entity": "I-LOC",
+        "score": 0.9958592,
+        "index": 5,
+        "word": "Pakistan",
+        "start": 22,
+        "end": 30,
+    },
+]
+
+highlighted_text = "Does Chicago have any Pakistani restaurants"
+
+
+def random_model3d():
+    model_3d = random.choice(
+        [os.path.join(model3d_dir, model) for model in os.listdir(model3d_dir) if model != "source.txt"]
+    )
+    return model_3d
+
+
+
+components = [
+    gr.Textbox(value=lambda: datetime.now(), label="Current Time"),
+    gr.Number(value=lambda: random.random(), label="Random Percentage"),
+    gr.Slider(minimum=0, maximum=100, randomize=True, label="Slider with randomize"),
+    gr.Slider(
+        minimum=0,
+        maximum=1,
+        value=lambda: random.random(),
+        label="Slider with value func",
+    ),
+    gr.Checkbox(value=lambda: random.random() > 0.5, label="Random Checkbox"),
+    gr.CheckboxGroup(
+        choices=["a", "b", "c", "d"],
+        value=lambda: random.choice(["a", "b", "c", "d"]),
+        label="Random CheckboxGroup",
+    ),
+    gr.Radio(
+        choices=list(string.ascii_lowercase),
+        value=lambda: random.choice(string.ascii_lowercase),
+    ),
+    gr.Dropdown(
+        choices=["a", "b", "c", "d", "e"],
+        value=lambda: random.choice(["a", "b", "c"]),
+    ),
+    gr.Image(
+        value=lambda: random.choice(images)
+    ),
+    gr.Video(value=lambda: os.path.join(file_dir, "world.mp4")),
+    gr.Audio(value=lambda: os.path.join(file_dir, "cantina.wav")),
+    gr.File(
+        value=lambda: random.choice(
+            [os.path.join(file_dir, img) for img in os.listdir(file_dir)]
+        )
+    ),
+    gr.Dataframe(
+        value=lambda: pd.DataFrame({"random_number_rows": range(5)}, columns=["one", "two", "three"])
+    ),
+    gr.ColorPicker(value=lambda: random.choice(["#000000", "#ff0000", "#0000FF"])),
+    gr.Label(value=lambda: random.choice(["Pedestrian", "Car", "Cyclist"])),
+    gr.HighlightedText(
+        value=lambda: random.choice(
+            [
+                {"text": highlighted_text, "entities": highlighted_text_output_1},
+                {"text": highlighted_text, "entities": highlighted_text_output_2},
+            ]
+        ),
+    ),
+    gr.JSON(value=lambda: random.choice([{"a": 1}, {"b": 2}])),
+    gr.HTML(
+        value=lambda: random.choice(
+            [
+                '<p style="color:red;">I am red</p>',
+                '<p style="color:blue;">I am blue</p>',
+            ]
+        )
+    ),
+    gr.Gallery(
+        value=lambda: images
+    ),
+    gr.Model3D(value=random_model3d),
+    gr.Plot(value=random_plot),
+    gr.Markdown(value=lambda: f"### {random.choice(['Hello', 'Hi', 'Goodbye!'])}"),
+]
+
+
+def evaluate_values(*args):
+    are_false = []
+    for a in args:
+        if isinstance(a, (pd.DataFrame, np.ndarray)):
+            are_false.append(not a.any().any())
+        elif isinstance(a, str) and a.startswith("#"):
+            are_false.append(a == "#000000")
+        else:
+            are_false.append(not a)
+    return all(are_false)
+
+
+with gr.Blocks() as demo:
+    for i, component in enumerate(components):
+        component.label = f"component_{str(i).zfill(2)}"
+        component.render()
+    clear = gr.ClearButton(value="Clear", components=components)
+    result = gr.Textbox(label="Are all cleared?")
+    hide = gr.Button(value="Hide")
+    reveal = gr.Button(value="Reveal")
+    clear_button_and_components = components + [clear]
+    hide.click(
+        lambda: [c.__class__(visible=False) for c in clear_button_and_components],
+        inputs=[],
+        outputs=clear_button_and_components
+    )
+    reveal.click(
+        lambda: [c.__class__(visible=True) for c in clear_button_and_components],
+        inputs=[],
+        outputs=clear_button_and_components
+    )
+    get_value = gr.Button(value="Get Values")
+    get_value.click(evaluate_values, components, result)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/code/file.css

@@ -0,0 +1,11 @@
+.class {
+  color: blue;
+}
+
+#id {
+  color: pink;
+}
+
+div {
+  color: purple;
+}

demos/code/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: code"]}, {"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", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/code/file.css"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from time import sleep\n", "\n", "\n", "css_file = os.path.join(os.path.abspath(''), \"file.css\")\n", "\n", "\n", "def set_lang(language):\n", "    print(language)\n", "    return gr.Code(language=language)\n", "\n", "\n", "def set_lang_from_path():\n", "    sleep(1)\n", "    return gr.Code((css_file,), language=\"css\")\n", "\n", "\n", "def code(language, code):\n", "    return gr.Code(code, language=language)\n", "\n", "\n", "io = gr.Interface(lambda x: x, \"code\", \"code\")\n", "\n", "with gr.Blocks() as demo:\n", "    lang = gr.Dropdown(value=\"python\", choices=gr.Code.languages)\n", "    with gr.Row():\n", "        code_in = gr.Code(\n", "            language=\"python\",\n", "            label=\"Input\",\n", "            value='def all_odd_elements(sequence):\\n    \"\"\"Returns every odd element of the sequence.\"\"\"',\n", "        )\n", "        code_out = gr.Code(label=\"Output\")\n", "    btn = gr.Button(\"Run\")\n", "    btn_two = gr.Button(\"Load File\")\n", "\n", "    lang.change(set_lang, inputs=lang, outputs=code_in)\n", "    btn.click(code, inputs=[lang, code_in], outputs=code_out)\n", "    btn_two.click(set_lang_from_path, inputs=None, outputs=code_out)\n", "    io.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/code/run.py

@@ -0,0 +1,43 @@
+import gradio as gr
+import os
+from time import sleep
+
+
+css_file = os.path.join(os.path.dirname(__file__), "file.css")
+
+
+def set_lang(language):
+    print(language)
+    return gr.Code(language=language)
+
+
+def set_lang_from_path():
+    sleep(1)
+    return gr.Code((css_file,), language="css")
+
+
+def code(language, code):
+    return gr.Code(code, language=language)
+
+
+io = gr.Interface(lambda x: x, "code", "code")
+
+with gr.Blocks() as demo:
+    lang = gr.Dropdown(value="python", choices=gr.Code.languages)
+    with gr.Row():
+        code_in = gr.Code(
+            language="python",
+            label="Input",
+            value='def all_odd_elements(sequence):\n    """Returns every odd element of the sequence."""',
+        )
+        code_out = gr.Code(label="Output")
+    btn = gr.Button("Run")
+    btn_two = gr.Button("Load File")
+
+    lang.change(set_lang, inputs=lang, outputs=code_in)
+    btn.click(code, inputs=[lang, code_in], outputs=code_out)
+    btn_two.click(set_lang_from_path, inputs=None, outputs=code_out)
+    io.render()
+
+if __name__ == "__main__":
+    demo.launch()

demos/fake_diffusion_with_gif/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: fake_diffusion_with_gif"]}, {"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", "import numpy as np\n", "import time\n", "import os\n", "from PIL import Image\n", "import requests\n", "from io import BytesIO\n", "\n", "\n", "def create_gif(images):\n", "    pil_images = []\n", "    for image in images:\n", "        if isinstance(image, str):\n", "            response = requests.get(image)\n", "            image = Image.open(BytesIO(response.content))\n", "        else:\n", "            image = Image.fromarray((image * 255).astype(np.uint8))\n", "        pil_images.append(image)\n", "    fp_out = os.path.join(os.path.abspath(''), \"image.gif\")\n", "    img = pil_images.pop(0)\n", "    img.save(fp=fp_out, format='GIF', append_images=pil_images,\n", "            save_all=True, duration=400, loop=0)\n", "    return fp_out\n", "\n", "\n", "def fake_diffusion(steps):\n", "    rng = np.random.default_rng()\n", "    images = []\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = rng.random((600, 600, 3))\n", "        images.append(image)\n", "        yield image, gr.Image(visible=False)\n", "\n", "    time.sleep(1)\n", "    image = \"https://gradio-builds.s3.amazonaws.com/diffusion_image/cute_dog.jpg\"\n", "    images.append(image)\n", "    gif_path = create_gif(images)\n", "\n", "    yield image, gr.Image(value=gif_path, visible=True)\n", "\n", "\n", "demo = gr.Interface(fake_diffusion,\n", "                    inputs=gr.Slider(1, 10, 3, step=1),\n", "                    outputs=[\"image\", gr.Image(label=\"All Images\", visible=False)])\n", "demo.queue()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/fake_diffusion_with_gif/run.py

@@ -0,0 +1,49 @@
+import gradio as gr
+import numpy as np
+import time
+import os
+from PIL import Image
+import requests
+from io import BytesIO
+
+
+def create_gif(images):
+    pil_images = []
+    for image in images:
+        if isinstance(image, str):
+            response = requests.get(image)
+            image = Image.open(BytesIO(response.content))
+        else:
+            image = Image.fromarray((image * 255).astype(np.uint8))
+        pil_images.append(image)
+    fp_out = os.path.join(os.path.dirname(__file__), "image.gif")
+    img = pil_images.pop(0)
+    img.save(fp=fp_out, format='GIF', append_images=pil_images,
+            save_all=True, duration=400, loop=0)
+    return fp_out
+
+
+def fake_diffusion(steps):
+    rng = np.random.default_rng()
+    images = []
+    for _ in range(steps):
+        time.sleep(1)
+        image = rng.random((600, 600, 3))
+        images.append(image)
+        yield image, gr.Image(visible=False)
+
+    time.sleep(1)
+    image = "https://gradio-builds.s3.amazonaws.com/diffusion_image/cute_dog.jpg"
+    images.append(image)
+    gif_path = create_gif(images)
+
+    yield image, gr.Image(value=gif_path, visible=True)
+
+
+demo = gr.Interface(fake_diffusion,
+                    inputs=gr.Slider(1, 10, 3, step=1),
+                    outputs=["image", gr.Image(label="All Images", visible=False)])
+demo.queue()
+
+if __name__ == "__main__":
+    demo.launch()

demos/fake_gan/DESCRIPTION.md

@@ -0,0 +1 @@
+This is a fake GAN that shows how to create a text-to-image interface for image generation. Check out the Stable Diffusion demo for more: https://hf.co/spaces/stabilityai/stable-diffusion/

demos/fake_gan/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: fake_gan\n", "### This is a fake GAN that shows how to create a text-to-image interface for image generation. Check out the Stable Diffusion demo for more: https://hf.co/spaces/stabilityai/stable-diffusion/\n", "        "]}, {"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": ["# This demo needs to be run from the repo folder.\n", "# python demo/fake_gan/run.py\n", "import random\n", "\n", "import gradio as gr\n", "\n", "\n", "def fake_gan():\n", "    images = [\n", "        (random.choice(\n", "            [\n", "                \"http://www.marketingtool.online/en/face-generator/img/faces/avatar-1151ce9f4b2043de0d2e3b7826127998.jpg\",\n", "                \"http://www.marketingtool.online/en/face-generator/img/faces/avatar-116b5e92936b766b7fdfc242649337f7.jpg\",\n", "                \"http://www.marketingtool.online/en/face-generator/img/faces/avatar-1163530ca19b5cebe1b002b8ec67b6fc.jpg\",\n", "                \"http://www.marketingtool.online/en/face-generator/img/faces/avatar-1116395d6e6a6581eef8b8038f4c8e55.jpg\",\n", "                \"http://www.marketingtool.online/en/face-generator/img/faces/avatar-11319be65db395d0e8e6855d18ddcef0.jpg\",\n", "            ]\n", "        ), f\"label {i}\")\n", "        for i in range(3)\n", "    ]\n", "    return images\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gallery = gr.Gallery(\n", "        label=\"Generated images\", show_label=False, elem_id=\"gallery\"\n", "    , columns=[3], rows=[1], object_fit=\"contain\", height=\"auto\")\n", "    btn = gr.Button(\"Generate images\", scale=0)\n", "\n", "    btn.click(fake_gan, None, gallery)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demos/fake_gan/run.py

@@ -0,0 +1,33 @@
+# This demo needs to be run from the repo folder.
+# python demo/fake_gan/run.py
+import random
+
+import gradio as gr
+
+
+def fake_gan():
+    images = [
+        (random.choice(
+            [
+                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1151ce9f4b2043de0d2e3b7826127998.jpg",
+                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-116b5e92936b766b7fdfc242649337f7.jpg",
+                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1163530ca19b5cebe1b002b8ec67b6fc.jpg",
+                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1116395d6e6a6581eef8b8038f4c8e55.jpg",
+                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-11319be65db395d0e8e6855d18ddcef0.jpg",
+            ]
+        ), f"label {i}")
+        for i in range(3)
+    ]
+    return images
+
+
+with gr.Blocks() as demo:
+    gallery = gr.Gallery(
+        label="Generated images", show_label=False, elem_id="gallery"
+    , columns=[3], rows=[1], object_fit="contain", height="auto")
+    btn = gr.Button("Generate images", scale=0)
+
+    btn.click(fake_gan, None, gallery)
+
+if __name__ == "__main__":
+    demo.launch()