Upload with huggingface_hub

.gitattributes

@@ -29,3 +29,10 @@ 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/blocks_neural_instrument_coding/sax.wav filter=lfs diff=lfs merge=lfs -text
+demos/kitchen_sink/files/world.mp4 filter=lfs diff=lfs merge=lfs -text
+demos/image_mod/screenshot.png filter=lfs diff=lfs merge=lfs -text
+demos/sepia_filter/screenshot.gif filter=lfs diff=lfs merge=lfs -text
+demos/blocks_flipper/screenshot.gif filter=lfs diff=lfs merge=lfs -text
+demos/hello_world_2/screenshot.gif filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,31 @@
+import importlib
+import gradio as gr
+import os
+import sys
+import copy
+import pathlib
+
+os.environ["SYSTEM"] = "pretend-not-spaces"
+
+demo_dir = pathlib.Path(__file__).parent / "demos"
+
+
+all_demos = []
+for p in os.listdir("./demos"):
+    all_demos.append(p)
+
+demo_module = None
+with gr.Blocks() as mega_demo:
+    with gr.Tabs():
+        for demo_name in all_demos:
+            with gr.TabItem(demo_name):
+                old_path = copy.deepcopy(sys.path)
+                sys.path = [os.path.join(demo_dir, demo_name)] + sys.path
+                if demo_module is None:
+                    demo_module = importlib.import_module(f"run")
+                else:
+                    demo_module = importlib.reload(demo_module)
+                demo_module.demo
+                sys.path = old_path
+
+mega_demo.launch()

demos/blocks_component_shortcut/run.py

@@ -0,0 +1,31 @@
+import gradio as gr
+
+
+def greet(str):
+    return str
+
+
+with gr.Blocks() as demo:
+    """
+    You can make use of str shortcuts you use in Interface within Blocks as well.
+    
+    Interface shortcut example:
+    Interface(greet, "textarea", "textarea")
+    
+    You can use 
+    1. gr.component()
+    2. gr.templates.Template()
+    3. gr.Template()
+    All the templates are listed in gradio/templates.py
+    """
+    with gr.Row():
+            text1 = gr.component("textarea")
+            text2 = gr.TextArea()
+            text3 = gr.templates.TextArea()
+    text1.change(greet, text1, text2)
+    text2.change(greet, text2, text3)
+    text3.change(greet, text3, text1)
+    button = gr.component("button")
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_essay/run.py

@@ -0,0 +1,22 @@
+import gradio as gr
+
+
+def change_textbox(choice):
+    if choice == "short":
+        return gr.Textbox.update(lines=2, visible=True)
+    elif choice == "long":
+        return gr.Textbox.update(lines=8, visible=True)
+    else:
+        return gr.Textbox.update(visible=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)
+
+    radio.change(fn=change_textbox, inputs=radio, outputs=text)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_essay_update/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+
+def change_textbox(choice):
+    if choice == "short":
+        return gr.update(lines=2, visible=True, value="Short story: ")
+    elif choice == "long":
+        return gr.update(lines=8, visible=True, value="Long story...")
+    else:
+        return gr.update(visible=False)
+
+with gr.Blocks() as demo:
+    radio = gr.Radio(
+        ["short", "long", "none"], label="Essay Length to Write?"
+    )
+    text = gr.Textbox(lines=2, interactive=True)
+    radio.change(fn=change_textbox, inputs=radio, outputs=text)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_flashcards/run.py

@@ -0,0 +1,92 @@
+import random
+
+import gradio as gr
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Markdown(
+        "Load the flashcards in the table below, then use the Practice tab to practice."
+    )
+
+    with gr.Tabs():
+        with gr.TabItem("Word Bank"):
+            flashcards_table = gr.Dataframe(headers=["front", "back"], type="array")
+        with gr.TabItem("Practice"):
+            with gr.Row():
+                with gr.Column():
+                    front = gr.Textbox(label="Prompt")
+                    with gr.Row():
+                        new_btn = gr.Button("New Card").style(full_width=True)
+                        flip_btn = gr.Button("Flip Card").style(full_width=True)
+                with gr.Column(visible=False) as answer_col:
+                    back = gr.Textbox(label="Answer")
+                    selected_card = gr.Variable()
+                    with gr.Row():
+                        correct_btn = gr.Button(
+                            "Correct",
+                        ).style(full_width=True)
+                        incorrect_btn = gr.Button("Incorrect").style(full_width=True)
+
+        with gr.TabItem("Results"):
+            results = gr.Variable(value={})
+            correct_field = gr.Markdown("# Correct: 0")
+            incorrect_field = gr.Markdown("# Incorrect: 0")
+            gr.Markdown("Card Statistics: ")
+            results_table = gr.Dataframe(headers=["Card", "Correct", "Incorrect"])
+
+        def load_new_card(flashcards):
+            card = random.choice(flashcards)
+            return (
+                card,
+                card[0],
+                gr.Column.update(visible=False),
+            )
+
+        new_btn.click(
+            load_new_card,
+            [flashcards_table],
+            [selected_card, front, answer_col],
+        )
+
+        def flip_card(card):
+            return card[1], gr.Column.update(visible=True)
+
+        flip_btn.click(flip_card, [selected_card], [back, answer_col])
+
+        def mark_correct(card, results):
+            if card[0] not in results:
+                results[card[0]] = [0, 0]
+            results[card[0]][0] += 1
+            correct_count = sum(result[0] for result in results.values())
+            return (
+                results,
+                f"# Correct: {correct_count}",
+                [[front, scores[0], scores[1]] for front, scores in results.items()],
+            )
+
+        def mark_incorrect(card, results):
+            if card[0] not in results:
+                results[card[0]] = [0, 0]
+            results[card[0]][1] += 1
+            incorrect_count = sum(result[1] for result in results.values())
+            return (
+                results,
+                f"# Inorrect: {incorrect_count}",
+                [[front, scores[0], scores[1]] for front, scores in results.items()],
+            )
+
+        correct_btn.click(
+            mark_correct,
+            [selected_card, results],
+            [results, correct_field, results_table],
+        )
+
+        incorrect_btn.click(
+            mark_incorrect,
+            [selected_card, results],
+            [results, incorrect_field, results_table],
+        )
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_flipper/run.py

@@ -0,0 +1,27 @@
+import numpy as np
+import gradio as gr
+
+def flip_text(x):
+    return x[::-1]
+
+def flip_image(x):
+    return np.fliplr(x)
+
+with gr.Blocks() as demo:
+    gr.Markdown("Flip text or image files using this demo.")
+    with gr.Tabs():
+        with gr.TabItem("Flip Text"):
+            text_input = gr.Textbox()
+            text_output = gr.Textbox()
+            text_button = gr.Button("Flip")
+        with gr.TabItem("Flip Image"):
+            with gr.Row():
+                image_input = gr.Image()
+                image_output = gr.Image()
+            image_button = gr.Button("Flip")
+    
+    text_button.click(flip_text, inputs=text_input, outputs=text_output)
+    image_button.click(flip_image, inputs=image_input, outputs=image_output)
+    
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_form/run.py

@@ -0,0 +1,33 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    error_box = gr.Textbox(label="Error", visible=False)
+
+    name_box = gr.Textbox(label="Name")
+    age_box = gr.Number(label="Age")
+    symptoms_box = gr.CheckboxGroup(["Cough", "Fever", "Runny Nose"])
+    submit_btn = gr.Button("Submit")
+
+    with gr.Column(visible=False) as output_col:
+        diagnosis_box = gr.Textbox(label="Diagnosis")
+        patient_summary_box = gr.Textbox(label="Patient Summary")
+
+    def submit(name, age, symptoms):
+        if len(name) == 0:
+            return {error_box: gr.update(value="Enter name", visible=True)}
+        if age < 0 or age > 200:
+            return {error_box: gr.update(value="Enter valid age", visible=True)}
+        return {
+            output_col: gr.update(visible=True),
+            diagnosis_box: "covid" if "Cough" in symptoms else "flu",
+            patient_summary_box: f"{name}, {age} y/o"
+        }
+
+    submit_btn.click(
+        submit,
+        [name_box, age_box, symptoms_box],
+        [error_box, diagnosis_box, patient_summary_box, output_col],
+    )
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_gpt/run.py

@@ -0,0 +1,16 @@
+import gradio as gr
+
+api = gr.Interface.load("huggingface/EleutherAI/gpt-j-6B")
+
+def complete_with_gpt(text):
+    # Use the last 50 characters of the text as context
+    return text[:-50] + api(text[-50:])
+
+with gr.Blocks() as demo:
+    textbox = gr.Textbox(placeholder="Type here and press enter...", lines=4)
+    btn = gr.Button("Generate")
+    
+    btn.click(complete_with_gpt, textbox, textbox)
+    
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_hello/run.py

@@ -0,0 +1,17 @@
+import gradio as gr
+
+def welcome(name):
+    return f"Welcome to Gradio, {name}!"
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+    """
+    # Hello World!
+    Start typing below to see the output.
+    """)
+    inp = gr.Textbox(placeholder="What is your name?")
+    out = gr.Textbox()
+    inp.change(welcome, inp, out)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_inputs/config.json

@@ -0,0 +1,99 @@
+{
+  "version": "3.0.6",
+  "mode": "blocks",
+  "dev_mode": true,
+  "components": [
+    {
+      "id": 1,
+      "type": "textbox",
+      "props": {
+        "lines": 5,
+        "max_lines": 20,
+        "value": "",
+        "label": "Input",
+        "show_label": true,
+        "name": "textbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "value": "",
+        "label": "Output-Interactive",
+        "show_label": true,
+        "name": "textbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 3,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "value": "Hello friends\nhello friends\n\nHello friends\n\n",
+        "label": "Output",
+        "show_label": true,
+        "interactive": false,
+        "name": "textbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 4,
+      "type": "button",
+      "props": {
+        "value": "Submit",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "css": null,
+  "enable_queue": false,
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1
+      },
+      {
+        "id": 2
+      },
+      {
+        "id": 3
+      },
+      {
+        "id": 4
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [
+        4
+      ],
+      "trigger": "click",
+      "inputs": [
+        1
+      ],
+      "outputs": [
+        2
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": null,
+      "queue": null
+    }
+  ]
+}

demos/blocks_inputs/run.py

@@ -0,0 +1,36 @@
+import gradio as gr
+import os
+
+def combine(a, b):
+    return a + " " + b
+
+def mirror(x):
+    return x
+
+with gr.Blocks() as demo:
+    
+    txt = gr.Textbox(label="Input", lines=2)
+    txt_2 = gr.Textbox(label="Input 2")
+    txt_3 = gr.Textbox(value="", label="Output")
+    btn = gr.Button(value="Submit")
+    btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])
+    
+    with gr.Row():
+        im = gr.Image()
+        im_2 = gr.Image()
+        
+    btn = gr.Button(value="Mirror Image")
+    btn.click(mirror, inputs=[im], outputs=[im_2])
+        
+    gr.Markdown("## Text Examples")
+    gr.Examples([["hi", "Adam"], ["hello", "Eve"]], [txt, txt_2], txt_3, combine, cache_examples=True)
+    gr.Markdown("## Image Examples")
+    gr.Examples(
+        examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
+        inputs=im,
+        outputs=im_2,
+        fn=mirror,
+        cache_examples=True)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_joined/run.py

@@ -0,0 +1,58 @@
+from time import sleep
+import gradio as gr
+import os
+
+cheetah = os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg")
+
+
+def img(text):
+    sleep(3)
+    return [
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+    ]
+
+
+with gr.Blocks(css=".container { max-width: 800px; margin: auto; }") as demo:
+    gr.Markdown("<h1><center>DALL·E mini</center></h1>")
+    gr.Markdown(
+        "DALL·E mini is an AI model that generates images from any prompt you give!"
+    )
+    with gr.Group():
+        with gr.Box():
+            with gr.Row().style(mobile_collapse=False, equal_height=True):
+
+                text = gr.Textbox(
+                    label="Enter your prompt", show_label=False, max_lines=1
+                ).style(
+                    border=(True, False, True, True),
+                    rounded=(True, False, False, True),
+                    container=False,
+                )
+                btn = gr.Button("Run").style(
+                    margin=False,
+                    rounded=(False, True, True, False),
+                )
+        gallery = gr.Gallery(label="Generated images", show_label=False).style(
+            grid=(
+                1,
+                3,
+            ),
+            height="auto",
+        )
+    btn.click(img, inputs=text, outputs=gallery)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+
+# margin = (TOP, RIGHT, BOTTOM, LEFT)
+# rounded = (TOPLEFT, TOPRIGHT, BOTTOMRIGHT, BOTTOMLEFT)

demos/blocks_js_methods/run.py

@@ -0,0 +1,28 @@
+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("Foo bar.")
+    
+    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")
+
+    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'")
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_kinematics/config.json

@@ -0,0 +1,124 @@
+{
+  "version": "3.0.6",
+  "mode": "blocks",
+  "dev_mode": true,
+  "components": [
+    {
+      "id": 1,
+      "type": "markdown",
+      "props": {
+        "value": "<p>Let's do some kinematics! Choose the speed and angle to see the trajectory.</p>\n",
+        "name": "markdown",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "row",
+      "props": {
+        "type": "row",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 3,
+      "type": "slider",
+      "props": {
+        "minimum": 1,
+        "maximum": 30,
+        "step": 0.1,
+        "value": 25,
+        "label": "Speed",
+        "show_label": true,
+        "name": "slider",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 4,
+      "type": "slider",
+      "props": {
+        "minimum": 0,
+        "maximum": 90,
+        "step": 0.1,
+        "value": 45,
+        "label": "Angle",
+        "show_label": true,
+        "name": "slider",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 5,
+      "type": "plot",
+      "props": {
+        "show_label": true,
+        "name": "plot",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 6,
+      "type": "button",
+      "props": {
+        "value": "Run",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "css": null,
+  "enable_queue": false,
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1
+      },
+      {
+        "id": 2,
+        "children": [
+          {
+            "id": 3
+          },
+          {
+            "id": 4
+          }
+        ]
+      },
+      {
+        "id": 5
+      },
+      {
+        "id": 6
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [
+        6
+      ],
+      "trigger": "click",
+      "inputs": [
+        3,
+        4
+      ],
+      "outputs": [
+        5
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": null,
+      "queue": null
+    }
+  ]
+}

demos/blocks_kinematics/run.py

@@ -0,0 +1,40 @@
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+import numpy as np
+
+import gradio as gr
+
+
+def plot(v, a):
+    g = 9.81
+    theta = a / 180 * 3.14
+    tmax = ((2 * v) * np.sin(theta)) / g
+    timemat = tmax * np.linspace(0, 1, 40)[:, None]
+
+    x = (v * timemat) * np.cos(theta)
+    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
+
+    fig = plt.figure()
+    plt.scatter(x=x, y=y, marker=".")
+    plt.xlim(0, 100)
+    plt.ylim(0, 60)
+    return fig
+
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Markdown(
+        "Let's do some kinematics! Choose the speed and angle to see the trajectory."
+    )
+
+    with gr.Row():
+        speed = gr.Slider(1, 30, 25, label="Speed")
+        angle = gr.Slider(0, 90, 45, label="Angle")
+    output = gr.Plot()
+    btn = gr.Button(value="Run")
+    btn.click(plot, [speed, angle], output)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_layout/run.py

@@ -0,0 +1,31 @@
+import gradio as gr
+
+
+demo = gr.Blocks()
+
+with demo:
+    with gr.Row():
+        gr.Image(interactive=True)
+        gr.Image()
+    with gr.Row():
+        gr.Textbox(label="Text")
+        gr.Number(label="Count")
+        gr.Radio(choices=["One", "Two"])
+    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_mask/run.py

@@ -0,0 +1,26 @@
+import gradio as gr
+import os
+
+def fn(mask):
+    return [mask["image"], mask["mask"]]
+
+
+demo = gr.Blocks()
+
+with demo:
+    with gr.Row():
+        with gr.Column():
+            img = gr.Image(
+                tool="sketch", source="upload", label="Mask", value=os.path.join(os.path.dirname(__file__), "lion.jpg")
+            )
+            with gr.Row():
+                btn = gr.Button("Run")
+        with gr.Column():
+            img2 = gr.Image()
+            img3 = gr.Image()
+
+    btn.click(fn=fn, inputs=img, outputs=[img2, img3])
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_multiple_event_triggers/run.py

@@ -0,0 +1,35 @@
+import gradio as gr
+import pypistats
+from datetime import date
+from dateutil.relativedelta import relativedelta
+import pandas as pd
+
+pd.options.plotting.backend = "plotly"
+
+
+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))]
+    chart = data.plot(x="date", y="downloads")
+    return chart
+
+
+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"], label="Library")
+        time = gr.Dropdown(["3 months", "6 months", "9 months", "12 months"], label="Downloads over the last...")
+
+    plt = gr.Plot()
+    # You can add multiple event triggers in 2 lines like this
+    for event in [lib.change, time.change]:
+        event(get_plot, [lib, time], [plt])
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_neural_instrument_coding/run.py

@@ -0,0 +1,143 @@
+# A Blocks implementation of https://erlj.notion.site/Neural-Instrument-Cloning-from-very-few-samples-2cf41d8b630842ee8c7eb55036a1bfd6
+
+import datetime
+import os
+import random
+
+import gradio as gr
+from gradio.components import Markdown as m
+
+
+def get_time():
+    now = datetime.datetime.now()
+    return now.strftime("%m/%d/%Y, %H:%M:%S")
+
+
+def generate_recording():
+    return random.choice(["new-sax-1.mp3", "new-sax-1.wav"])
+
+
+def reconstruct(audio):
+    return random.choice(["new-sax-1.mp3", "new-sax-1.wav"])
+
+
+io1 = gr.Interface(
+    lambda x, y, z: os.path.join(os.path.dirname(__file__),"sax.wav"),
+    [
+        gr.Slider(label="pitch"),
+        gr.Slider(label="loudness"),
+        gr.Audio(label="base audio file (optional)"),
+    ],
+    gr.Audio(),
+)
+
+io2 = gr.Interface(
+    lambda x, y, z: os.path.join(os.path.dirname(__file__),"flute.wav"),
+    [
+        gr.Slider(label="pitch"),
+        gr.Slider(label="loudness"),
+        gr.Audio(label="base audio file (optional)"),
+    ],
+    gr.Audio(),
+)
+
+io3 = gr.Interface(
+    lambda x, y, z: os.path.join(os.path.dirname(__file__),"trombone.wav"),
+    [
+        gr.Slider(label="pitch"),
+        gr.Slider(label="loudness"),
+        gr.Audio(label="base audio file (optional)"),
+    ],
+    gr.Audio(),
+)
+
+io4 = gr.Interface(
+    lambda x, y, z: os.path.join(os.path.dirname(__file__),"sax2.wav"),
+    [
+        gr.Slider(label="pitch"),
+        gr.Slider(label="loudness"),
+        gr.Audio(label="base audio file (optional)"),
+    ],
+    gr.Audio(),
+)
+
+demo = gr.Blocks(title="Neural Instrument Cloning")
+
+with demo.clear():
+    m(
+        """
+    ## Neural Instrument Cloning from Very Few Samples
+    <center><img src="https://media.istockphoto.com/photos/brass-trombone-picture-id490455809?k=20&m=490455809&s=612x612&w=0&h=l9KJvH_25z0QTLggHrcH_MsR4gPLH7uXwDPUAZ_C5zk=" width="400px"></center>"""
+    )
+    m(
+        """
+    This Blocks implementation is an adaptation [a report written](https://erlj.notion.site/Neural-Instrument-Cloning-from-very-few-samples-2cf41d8b630842ee8c7eb55036a1bfd6) by Nicolas Jonason and Bob L.T. Sturm.
+    
+    I've implemented it in Blocks to show off some cool features, such as embedding live ML demos. More on that ahead...
+    
+    ### What does this machine learning model do?
+    It combines techniques from neural voice cloning with musical instrument synthesis. This makes it possible to produce neural instrument synthesisers from just seconds of target instrument audio.
+    
+    ### Audio Examples
+    Here are some **real** 16 second saxophone recordings:
+    """
+    )
+    gr.Audio(os.path.join(os.path.dirname(__file__),"sax.wav"), label="Here is a real 16 second saxophone recording:")
+    gr.Audio(os.path.join(os.path.dirname(__file__),"sax.wav"))
+
+    m(
+        """\n
+        Here is a **generated** saxophone recordings:"""
+    )
+    a = gr.Audio(os.path.join(os.path.dirname(__file__),"new-sax.wav"))
+
+    gr.Button("Generate a new saxophone recording")
+
+    m(
+        """
+    ### Inputs to the model
+    The inputs to the model are:
+    * pitch
+    * loudness
+    * base audio file
+    """
+    )
+
+    m(
+        """
+    Try the model live!
+    """
+    )
+
+    gr.TabbedInterface(
+        [io1, io2, io3, io4], ["Saxophone", "Flute", "Trombone", "Another Saxophone"]
+    )
+
+    m(
+        """
+    ### Using the model for cloning
+    You can also use this model a different way, to simply clone the audio file and reconstruct it 
+    using machine learning. Here, we'll show a demo of that below:
+    """
+    )
+
+    a2 = gr.Audio()
+    a2.change(reconstruct, a2, a2)
+
+    m(
+        """
+    Thanks for reading this! As you may have realized, all of the "models" in this demo are fake. They are just designed to show you what is possible using Blocks 🤗.
+    
+    For details of the model, read the [original report here](https://erlj.notion.site/Neural-Instrument-Cloning-from-very-few-samples-2cf41d8b630842ee8c7eb55036a1bfd6).
+    
+    *Details for nerds*: this report was "launched" on:
+    """
+    )
+
+    t = gr.Textbox(label="timestamp")
+
+    demo.load(get_time, [], t)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_neural_instrument_coding/sax.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:12ee32c66257e1c98ed0f2f7b708a1eab638ec09f4c69dda3ec1d78047a7be4d
+size 1536044

demos/blocks_outputs/config.json

@@ -0,0 +1,325 @@
+{
+  "mode": "blocks",
+  "components": [
+    {
+      "id": 1,
+      "type": "column",
+      "props": {
+        "type": "column",
+        "variant": "default",
+        "css": {},
+        "default_value": true
+      }
+    },
+    {
+      "id": 2,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "default_value": "",
+        "label": "Small Textbox",
+        "show_label": false,
+        "name": "textbox",
+        "css": {}
+      }
+    },
+    {
+      "id": 3,
+      "type": "textbox",
+      "props": {
+        "lines": 5,
+        "max_lines": 20,
+        "default_value": "",
+        "label": "Large Textbox",
+        "show_label": false,
+        "name": "textbox",
+        "css": {}
+      }
+    },
+    {
+      "id": 4,
+      "type": "number",
+      "props": {
+        "label": "Number",
+        "show_label": false,
+        "name": "number",
+        "css": {}
+      }
+    },
+    {
+      "id": 5,
+      "type": "checkbox",
+      "props": {
+        "default_value": false,
+        "label": "Checkbox",
+        "show_label": false,
+        "name": "checkbox",
+        "css": {}
+      }
+    },
+    {
+      "id": 6,
+      "type": "checkboxgroup",
+      "props": {
+        "choices": [
+          "One",
+          "Two",
+          "Three"
+        ],
+        "default_value": [],
+        "label": "Checkbox Group",
+        "show_label": false,
+        "name": "checkboxgroup",
+        "css": {}
+      }
+    },
+    {
+      "id": 7,
+      "type": "radio",
+      "props": {
+        "choices": [
+          "One",
+          "Two",
+          "Three"
+        ],
+        "default_value": "One",
+        "label": "Radio",
+        "show_label": false,
+        "name": "radio",
+        "css": {}
+      }
+    },
+    {
+      "id": 8,
+      "type": "dropdown",
+      "props": {
+        "choices": [
+          "One",
+          "Two",
+          "Three"
+        ],
+        "default_value": "One",
+        "label": "Dropdown",
+        "show_label": false,
+        "name": "dropdown",
+        "css": {}
+      }
+    },
+    {
+      "id": 9,
+      "type": "slider",
+      "props": {
+        "minimum": 0,
+        "maximum": 100,
+        "step": 1,
+        "default_value": 0,
+        "label": "Slider",
+        "show_label": false,
+        "name": "slider",
+        "css": {}
+      }
+    },
+    {
+      "id": 10,
+      "type": "audio",
+      "props": {
+        "source": "upload",
+        "show_label": false,
+        "name": "audio",
+        "css": {}
+      }
+    },
+    {
+      "id": 11,
+      "type": "file",
+      "props": {
+        "file_count": "single",
+        "show_label": false,
+        "name": "file",
+        "css": {}
+      }
+    },
+    {
+      "id": 12,
+      "type": "video",
+      "props": {
+        "source": "upload",
+        "show_label": false,
+        "name": "video",
+        "css": {}
+      }
+    },
+    {
+      "id": 13,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "upload",
+        "tool": "editor",
+        "show_label": false,
+        "name": "image",
+        "css": {}
+      }
+    },
+    {
+      "id": 14,
+      "type": "timeseries",
+      "props": {
+        "show_label": false,
+        "name": "timeseries",
+        "css": {}
+      }
+    },
+    {
+      "id": 15,
+      "type": "dataframe",
+      "props": {
+        "datatype": "str",
+        "row_count": 1,
+        "col_count": 3,
+        "default_value": [
+          [
+            "",
+            "",
+            ""
+          ],
+          [
+            "",
+            "",
+            ""
+          ],
+          [
+            "",
+            "",
+            ""
+          ]
+        ],
+        "max_rows": 20,
+        "overflow_row_behaviour": "paginate",
+        "show_label": false,
+        "name": "dataframe",
+        "css": {}
+      }
+    },
+    {
+      "id": 16,
+      "type": "html",
+      "props": {
+        "default_value": "",
+        "show_label": false,
+        "name": "html",
+        "css": {}
+      }
+    },
+    {
+      "id": 17,
+      "type": "json",
+      "props": {
+        "default_value": "\"\"",
+        "show_label": false,
+        "name": "json",
+        "css": {}
+      }
+    },
+    {
+      "id": 18,
+      "type": "markdown",
+      "props": {
+        "default_value": "",
+        "name": "markdown",
+        "css": {}
+      }
+    },
+    {
+      "id": 19,
+      "type": "label",
+      "props": {
+        "show_label": false,
+        "name": "label",
+        "css": {}
+      }
+    },
+    {
+      "id": 20,
+      "type": "highlightedtext",
+      "props": {
+        "show_legend": false,
+        "default_value": "",
+        "show_label": false,
+        "name": "highlightedtext",
+        "css": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "enable_queue": false,
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1,
+        "children": [
+          {
+            "id": 2
+          },
+          {
+            "id": 3
+          },
+          {
+            "id": 4
+          },
+          {
+            "id": 5
+          },
+          {
+            "id": 6
+          },
+          {
+            "id": 7
+          },
+          {
+            "id": 8
+          },
+          {
+            "id": 9
+          },
+          {
+            "id": 10
+          },
+          {
+            "id": 11
+          },
+          {
+            "id": 12
+          },
+          {
+            "id": 13
+          },
+          {
+            "id": 14
+          },
+          {
+            "id": 15
+          },
+          {
+            "id": 16
+          },
+          {
+            "id": 17
+          },
+          {
+            "id": 18
+          },
+          {
+            "id": 19
+          },
+          {
+            "id": 20
+          }
+        ]
+      }
+    ]
+  },
+  "dependencies": []
+}

demos/blocks_outputs/run.py

@@ -0,0 +1,95 @@
+import gradio as gr
+
+
+def make_markdown():
+    return [
+        [
+            "# hello again",
+            "Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
+            '<img src="https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80"/>',
+        ],
+        [
+            "## hello again again",
+            "Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
+            '<img src="https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80"/>',
+        ],
+        [
+            "### hello thrice",
+            "Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
+            '<img src="https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80"/>',
+        ],
+    ]
+
+
+with gr.Blocks() as demo:
+    with gr.Column():
+        txt = gr.Textbox(label="Small Textbox", lines=1, show_label=False)
+        txt = gr.Textbox(label="Large Textbox", lines=5, show_label=False)
+        num = gr.Number(label="Number", show_label=False)
+        check = gr.Checkbox(label="Checkbox", show_label=False)
+        check_g = gr.CheckboxGroup(
+            label="Checkbox Group", choices=["One", "Two", "Three"], show_label=False
+        )
+        radio = gr.Radio(
+            label="Radio", choices=["One", "Two", "Three"], show_label=False
+        )
+        drop = gr.Dropdown(
+            label="Dropdown", choices=["One", "Two", "Three"], show_label=False
+        )
+        slider = gr.Slider(label="Slider", show_label=False)
+        audio = gr.Audio(show_label=False)
+        file = gr.File(show_label=False)
+        video = gr.Video(show_label=False)
+        image = gr.Image(show_label=False)
+        ts = gr.Timeseries(show_label=False)
+        df = gr.Dataframe(show_label=False)
+        html = gr.HTML(show_label=False)
+        json = gr.JSON(show_label=False)
+        md = gr.Markdown(show_label=False)
+        label = gr.Label(show_label=False)
+        highlight = gr.HighlightedText(show_label=False)
+        gr.Dataframe(interactive=True, col_count=(3, "fixed"), label="Dataframe")
+        gr.Dataframe(interactive=True, col_count=4, label="Dataframe")
+        gr.Dataframe(
+            interactive=True, headers=["One", "Two", "Three", "Four"], label="Dataframe"
+        )
+        gr.Dataframe(
+            interactive=True,
+            headers=["One", "Two", "Three", "Four"],
+            col_count=(4, "fixed"),
+            row_count=(7, "fixed"),
+            value=[[0, 0, 0, 0]],
+            label="Dataframe",
+        )
+        gr.Dataframe(
+            interactive=True, headers=["One", "Two", "Three", "Four"], col_count=4
+        )
+        df = gr.DataFrame(
+            [
+                [
+                    "# hello",
+                    "Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
+                    '<img src="https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80"/>',
+                ],
+                [
+                    "## hello",
+                    "Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
+                    '<img src="https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80"/>',
+                ],
+                [
+                    "### hello",
+                    "Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
+                    '<img src="https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80"/>',
+                ],
+            ],
+            headers=["One", "Two", "Three"],
+            wrap=True,
+            datatype=["markdown", "markdown", "html"],
+            interactive=True,
+        )
+        btn = gr.Button("Run")
+        btn.click(fn=make_markdown, inputs=None, outputs=df)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_page_load/config.json

@@ -0,0 +1,58 @@
+{
+  "mode": "blocks",
+  "components": [
+    {
+      "id": 1,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "default_value": "Frank",
+        "label": "Name",
+        "show_label": true,
+        "name": "textbox",
+        "css": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "default_value": "",
+        "label": "Output",
+        "show_label": true,
+        "name": "textbox",
+        "css": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "enable_queue": false,
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1
+      },
+      {
+        "id": 2
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [],
+      "trigger": "load",
+      "inputs": [
+        1
+      ],
+      "outputs": [
+        2
+      ],
+      "status_tracker": null,
+      "queue": null
+    }
+  ]
+}

demos/blocks_page_load/run.py

@@ -0,0 +1,15 @@
+import gradio as gr
+
+
+def print_message(n):
+    return "Welcome! This page has loaded for " + n
+
+
+with gr.Blocks() as demo:
+    t = gr.Textbox("Frank", label="Name")
+    t2 = gr.Textbox(label="Output")
+    demo.load(print_message, t, t2)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_plug/run.py

@@ -0,0 +1,36 @@
+import gradio as gr
+
+
+def change_tab():
+    return gr.Tabs.update(selected=2)
+
+
+identity_demo, input_demo, output_demo = gr.Blocks(), gr.Blocks(), gr.Blocks()
+
+with identity_demo:
+    gr.Interface(lambda x: x, "text", "text")
+
+with input_demo:
+    t = gr.Textbox(label="Enter your text here")
+    with gr.Row():
+        btn = gr.Button("Submit")
+        clr = gr.Button("Clear")
+    clr.click(lambda x: "", t, t)
+
+with output_demo:
+    gr.Textbox("This is a static output")
+
+with gr.Blocks() as demo:
+    gr.Markdown("Three demos in one!")
+    with gr.Tabs(selected=1) as tabs:
+        with gr.TabItem("Text Identity", id=0):
+            identity_demo.render()
+        with gr.TabItem("Text Input", id=1):
+            input_demo.render()
+        with gr.TabItem("Text Static", id=2):
+            output_demo.render()
+    btn = gr.Button("Change tab")
+    btn.click(inputs=None, outputs=tabs, fn=change_tab)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_random_slider/run.py

@@ -0,0 +1,18 @@
+
+import gradio as gr
+
+
+def func(slider_1, slider_2):
+    return slider_1 * 5 + slider_2
+
+
+with gr.Blocks() as demo:
+    slider = gr.Slider(minimum=-10.2, maximum=15, label="Random Slider (Static)", randomize=True)
+    slider_1 = gr.Slider(minimum=100, maximum=200, label="Random Slider (Input 1)", randomize=True)
+    slider_2 = gr.Slider(minimum=10, maximum=23.2, label="Random Slider (Input 2)", randomize=True)
+    slider_3 = gr.Slider(value=3, label="Non random slider")
+    btn = gr.Button("Run")
+    btn.click(func, inputs=[slider_1, slider_2], outputs=gr.Number())
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_scroll/run.py

@@ -0,0 +1,24 @@
+import gradio as gr
+
+
+demo = gr.Blocks()
+
+with demo:
+    inp = gr.Textbox(placeholder="Enter text.")
+    scroll_btn = gr.Button("Scroll")
+    no_scroll_btn = gr.Button("No Scroll")
+    big_block = gr.HTML("""
+    <div style='height: 800px; width: 100px; background-color: pink;'></div>
+    """)
+    out = gr.Textbox()
+    
+    scroll_btn.click(lambda x: x, 
+               inputs=inp, 
+               outputs=out,
+                scroll_to_output=True)
+    no_scroll_btn.click(lambda x: x, 
+               inputs=inp, 
+               outputs=out)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_simple_squares/config.json

@@ -0,0 +1,115 @@
+{
+  "version": "3.0.6",
+  "mode": "blocks",
+  "dev_mode": true,
+  "components": [
+    {
+      "id": 1,
+      "type": "variable",
+      "props": {
+        "value": 0,
+        "show_label": true,
+        "name": "variable",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "number",
+      "props": {
+        "value": 0.0,
+        "show_label": true,
+        "name": "number",
+        "visible": true,
+        "style": {
+          "text_color": "blue",
+          "container_bg_color": "yellow"
+        }
+      }
+    },
+    {
+      "id": 3,
+      "type": "button",
+      "props": {
+        "value": "Next Square",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "elem_id": "btn",
+        "style": {
+          "rounded": false,
+          "bg_color": "purple"
+        }
+      }
+    },
+    {
+      "id": 4,
+      "type": "variable",
+      "props": {
+        "value": {
+          "a": "a"
+        },
+        "show_label": true,
+        "name": "variable",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 5,
+      "type": "json",
+      "props": {
+        "show_label": true,
+        "name": "json",
+        "visible": true,
+        "style": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "css": "#btn {color: red}",
+  "enable_queue": false,
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1
+      },
+      {
+        "id": 2
+      },
+      {
+        "id": 3
+      },
+      {
+        "id": 4
+      },
+      {
+        "id": 5
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [
+        3
+      ],
+      "trigger": "click",
+      "inputs": [
+        1,
+        4
+      ],
+      "outputs": [
+        1,
+        2,
+        4,
+        5
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": null,
+      "queue": null
+    }
+  ]
+}

demos/blocks_simple_squares/run.py

@@ -0,0 +1,23 @@
+import gradio as gr
+
+demo = gr.Blocks(css="#btn {color: red}")
+
+with demo:
+    default_json = {"a": "a"}
+
+    num = gr.Variable(value=0)
+    squared = gr.Number(value=0)
+    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)
+
+    stats = gr.Variable(value=default_json)
+    table = gr.JSON()
+
+    def increase(var, stats_history):
+        var += 1
+        stats_history[str(var)] = var**2
+        return var, var**2, stats_history, stats_history
+
+    btn.click(increase, [num, stats], [num, squared, stats, table])
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_static_textbox/run.py

@@ -0,0 +1,10 @@
+import gradio as gr
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Textbox("Hello")
+    gr.Number(5)
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_style/run.py

@@ -0,0 +1,104 @@
+import gradio as gr
+
+with gr.Blocks(title="Styling Examples") as demo:
+    with gr.Column():
+        txt = gr.Textbox(label="Small Textbox", lines=1).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+
+        num = gr.Number(label="Number", show_label=False).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+        slider = gr.Slider(label="Slider", show_label=False).style(
+            container=False,
+        )
+        check = gr.Checkbox(label="Checkbox", show_label=False).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+        check_g = gr.CheckboxGroup(
+            label="Checkbox Group", choices=["One", "Two", "Three"], show_label=False
+        ).style(rounded=False, container=False, item_container=False)
+        radio = gr.Radio(
+            label="Radio", choices=["One", "Two", "Three"], show_label=False
+        ).style(
+            item_container=False,
+            container=False,
+        )
+        drop = gr.Dropdown(
+            label="Dropdown", choices=["One", "Two", "Three"], show_label=False
+        ).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+        image = gr.Image(show_label=False).style(
+            rounded=False,
+        )
+        video = gr.Video(show_label=False).style(
+            rounded=False,
+        )
+        audio = gr.Audio(show_label=False).style(
+            rounded=False,
+        )
+        file = gr.File(show_label=False).style(
+            rounded=False,
+        )
+        df = gr.Dataframe(show_label=False).style(
+            rounded=False,
+        )
+
+        ts = gr.Timeseries(show_label=False).style(
+            rounded=False,
+        )
+        label = gr.Label().style(
+            container=False,
+        )
+        highlight = gr.HighlightedText(
+            "+ hello. - goodbye", show_label=False, color_map={"+": "green", "-": "red"}
+        ).style(rounded=False, container=False)
+        json = gr.JSON().style(container=False)
+        html = gr.HTML(show_label=False).style()
+        gallery = gr.Gallery().style(
+            rounded=False,
+            grid=(3, 3, 1),
+            height="auto",
+            container=False,
+        )
+        chat = gr.Chatbot("hi", color_map=("pink", "blue")).style(
+            rounded=False,
+        )
+
+        model = gr.Model3D().style(
+            rounded=False,
+        )
+
+        gr.Plot().style()
+        md = gr.Markdown(show_label=False).style()
+
+        highlight = gr.HighlightedText().style(
+            rounded=False,
+        )
+
+        btn = gr.Button("Run").style(
+            rounded=False,
+            full_width=True,
+            border=False,
+        )
+
+        # Not currently public
+        # TODO: Uncomment at next release
+        # gr.Dataset().style(
+        #     rounded=False,
+        #     margin=False,
+        #     border=False,
+        # )
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_textbox_max_lines/run.py

@@ -0,0 +1,13 @@
+import gradio as gr
+
+
+def greet(name: str, repeat: float):
+    return "Hello " + name * int(repeat) + "!!"
+
+
+demo = gr.Interface(
+    fn=greet, inputs=[gr.Textbox(lines=2, max_lines=4), gr.Number()], outputs="textarea"
+)
+
+if __name__ == "__main__":
+    demo.launch()

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.update(
+            choices=species_map[species], value=species_map[species][1]
+        ), gr.update(visible=True)
+
+    species.change(filter_species, species, [animal, details_col])
+
+    def filter_weight(animal):
+        if animal in ("Elephant", "Shark", "Giraffe"):
+            return gr.update(maximum=100)
+        else:
+            return gr.update(maximum=20)
+
+    animal.change(filter_weight, animal, weight)
+    weight.change(lambda w: gr.update(lines=int(w / 10) + 1), weight, details)
+
+    generate_btn.click(lambda x: x, details, output)
+
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_webcam/run.py

@@ -0,0 +1,13 @@
+import numpy as np
+
+import gradio as gr
+
+
+def snap(image):
+    return np.flipud(image)
+
+
+demo = gr.Interface(snap, "webcam", "image")
+
+if __name__ == "__main__":
+    demo.launch()

demos/blocks_xray/config.json

@@ -0,0 +1,339 @@
+{
+  "version": "3.1.1\n",
+  "mode": "blocks",
+  "dev_mode": true,
+  "components": [
+    {
+      "id": 1,
+      "type": "markdown",
+      "props": {
+        "value": "<h1>Detect Disease From Scan</h1>\n<p>With this model you can lorem ipsum</p>\n<ul>\n<li>ipsum 1</li>\n<li>ipsum 2</li>\n</ul>\n",
+        "name": "markdown",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "checkboxgroup",
+      "props": {
+        "choices": [
+          "Covid",
+          "Malaria",
+          "Lung Cancer"
+        ],
+        "value": [],
+        "label": "Disease to Scan For",
+        "show_label": true,
+        "name": "checkboxgroup",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 3,
+      "type": "tabs",
+      "props": {
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 4,
+      "type": "tabitem",
+      "props": {
+        "label": "X-ray",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 5,
+      "type": "row",
+      "props": {
+        "type": "row",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 6,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "upload",
+        "tool": "editor",
+        "streaming": false,
+        "mirror_webcam": true,
+        "show_label": true,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 7,
+      "type": "json",
+      "props": {
+        "show_label": true,
+        "name": "json",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 8,
+      "type": "button",
+      "props": {
+        "value": "Run",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 9,
+      "type": "statustracker",
+      "props": {
+        "cover_container": true,
+        "name": "statustracker",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 10,
+      "type": "tabitem",
+      "props": {
+        "label": "CT Scan",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 11,
+      "type": "row",
+      "props": {
+        "type": "row",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 12,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "upload",
+        "tool": "editor",
+        "streaming": false,
+        "mirror_webcam": true,
+        "show_label": true,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 13,
+      "type": "json",
+      "props": {
+        "show_label": true,
+        "name": "json",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 14,
+      "type": "button",
+      "props": {
+        "value": "Run",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 15,
+      "type": "statustracker",
+      "props": {
+        "cover_container": true,
+        "name": "statustracker",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 16,
+      "type": "button",
+      "props": {
+        "value": "Upload Results",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 17,
+      "type": "statustracker",
+      "props": {
+        "cover_container": false,
+        "name": "statustracker",
+        "visible": true,
+        "style": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "css": null,
+  "title": "Gradio",
+  "enable_queue": false,
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1
+      },
+      {
+        "id": 2
+      },
+      {
+        "id": 3,
+        "children": [
+          {
+            "id": 4,
+            "children": [
+              {
+                "id": 5,
+                "children": [
+                  {
+                    "id": 6
+                  },
+                  {
+                    "id": 7
+                  }
+                ]
+              },
+              {
+                "id": 8
+              },
+              {
+                "id": 9
+              }
+            ]
+          },
+          {
+            "id": 10,
+            "children": [
+              {
+                "id": 11,
+                "children": [
+                  {
+                    "id": 12
+                  },
+                  {
+                    "id": 13
+                  }
+                ]
+              },
+              {
+                "id": 14
+              },
+              {
+                "id": 15
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": 16
+      },
+      {
+        "id": 17
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [
+        8
+      ],
+      "trigger": "click",
+      "inputs": [
+        2,
+        6
+      ],
+      "outputs": [
+        7
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": 9,
+      "queue": null,
+      "api_name": "xray_model",
+      "scroll_to_output": false,
+      "show_progress": true,
+      "documentation": [
+        [
+          null,
+          null
+        ],
+        [
+          null
+        ]
+      ]
+    },
+    {
+      "targets": [
+        14
+      ],
+      "trigger": "click",
+      "inputs": [
+        2,
+        12
+      ],
+      "outputs": [
+        13
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": 15,
+      "queue": null,
+      "api_name": "ct_model",
+      "scroll_to_output": false,
+      "show_progress": true,
+      "documentation": [
+        [
+          null,
+          null
+        ],
+        [
+          null
+        ]
+      ]
+    },
+    {
+      "targets": [
+        16
+      ],
+      "trigger": "click",
+      "inputs": [
+        13,
+        7
+      ],
+      "outputs": [],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": 17,
+      "queue": null,
+      "api_name": null,
+      "scroll_to_output": false,
+      "show_progress": true
+    }
+  ]
+}

demos/blocks_xray/run.py

@@ -0,0 +1,67 @@
+import gradio as gr
+import random
+import time
+
+
+def xray_model(diseases, img):
+    time.sleep(4)
+    return [{disease: random.random() for disease in diseases}]
+
+
+def ct_model(diseases, img):
+    time.sleep(3)
+    return [{disease: 0.1 for disease in diseases}]
+
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+        """
+# Detect Disease From Scan
+With this model you can lorem ipsum
+- ipsum 1
+- ipsum 2
+"""
+    )
+    disease = gr.CheckboxGroup(
+        choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
+    )
+
+    with gr.Tabs():
+        with gr.TabItem("X-ray") as x_tab:
+            with gr.Row():
+                xray_scan = gr.Image()
+                xray_results = gr.JSON()
+            xray_run = gr.Button("Run")
+            xray_progress = gr.StatusTracker(cover_container=True)
+            xray_run.click(
+                xray_model,
+                inputs=[disease, xray_scan],
+                outputs=xray_results,
+                status_tracker=xray_progress,
+                api_name="xray_model"
+            )
+
+        with gr.TabItem("CT Scan"):
+            with gr.Row():
+                ct_scan = gr.Image()
+                ct_results = gr.JSON()
+            ct_run = gr.Button("Run")
+            ct_progress = gr.StatusTracker(cover_container=True)
+            ct_run.click(
+                ct_model,
+                inputs=[disease, ct_scan],
+                outputs=ct_results,
+                status_tracker=ct_progress,
+                api_name="ct_model"
+            )
+
+    upload_btn = gr.Button("Upload Results")
+    upload_btn.click(
+        lambda ct, xr: time.sleep(5),
+        inputs=[ct_results, xray_results],
+        outputs=[],
+        status_tracker=gr.StatusTracker(),
+    )
+
+if __name__ == "__main__":
+    demo.launch()

demos/calculator/run.py

@@ -0,0 +1,31 @@
+import gradio as gr
+
+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":
+        return num1 / num2
+
+demo = gr.Interface(
+    calculator,
+    [
+        "number", 
+        gr.Radio(["add", "subtract", "multiply", "divide"]),
+        "number"
+    ],
+    "number",
+    examples=[
+        [5, "add", 3],
+        [4, "divide", 2],
+        [-4, "multiply", 2.5],
+        [0, "subtract", 1.2],
+    ],
+    title="Toy Calculator",
+    description="Here's a sample toy calculator. Enjoy!",
+)
+if __name__ == "__main__":
+    demo.launch()