Fix demo

.gitattributes

@@ -29,3 +29,9 @@ 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
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.whl filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,43 @@
+# Python build
+.eggs/
+gradio.egg-info
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+build/
+
+# JS build
+gradio/templates/cdn
+gradio/templates/frontend
+
+# Secrets
+.env
+
+# Gradio run artifacts
+*.db
+*.sqlite3
+gradio/launches.json
+flagged/
+gradio_cached_examples/
+
+# Tests
+.coverage
+coverage.xml
+test.txt
+
+# Demos
+demo/tmp.zip
+demo/files/*.avi
+demo/files/*.mp4
+
+# Etc
+.idea/*
+.DS_Store
+*.bak
+workspace.code-workspace
+*.h5
+
+# log files
+.pnpm-debug.log

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_flag/requirements.txt

@@ -0,0 +1 @@
+numpy

demos/blocks_flag/run.py

@@ -0,0 +1,33 @@
+import numpy as np
+import gradio as gr
+
+def sepia(input_img, strength):
+    sepia_filter = strength * np.array(
+        [[0.393, 0.769, 0.189], [0.349, 0.686, 0.168], [0.272, 0.534, 0.131]]
+    ) + (1-strength) * np.identity(3)
+    sepia_img = input_img.dot(sepia_filter.T)
+    sepia_img /= sepia_img.max()
+    return sepia_img
+
+callback = gr.CSVLogger()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            img_input = gr.Image()
+            strength = gr.Slider(0, 1, 0.5)
+        img_output = gr.Image()
+    with gr.Row():
+        btn = gr.Button("Flag")
+        
+    # This needs to be called at some point prior to the first call to callback.flag()
+    callback.setup([img_input, strength, img_output], "flagged_data_points")
+
+    img_input.change(sepia, [img_input, strength], img_output)
+    strength.change(sepia, [img_input, strength], img_output)
+    
+    # We can choose which components to flag -- in this case, we'll flag all of them
+    btn.click(lambda *args: callback.flag(args), [img_input, strength, img_output], None, _preprocess=False)
+
+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_interpretation/requirements.txt

@@ -0,0 +1 @@
+shap

demos/blocks_interpretation/run.py

@@ -0,0 +1,58 @@
+import gradio as gr
+import shap
+from transformers import pipeline
+import matplotlib
+import matplotlib.pyplot as plt
+matplotlib.use('Agg')
+
+
+sentiment_classifier = pipeline("text-classification", return_all_scores=True)
+
+
+def classifier(text):
+    pred = sentiment_classifier(text)
+    return {p["label"]: p["score"] for p in pred[0]}
+
+
+def interpretation_function(text):
+    explainer = shap.Explainer(sentiment_classifier)
+    shap_values = explainer([text])
+    # Dimensions are (batch size, text size, number of classes)
+    # Since we care about positive sentiment, use index 1
+    scores = list(zip(shap_values.data[0], shap_values.values[0, :, 1]))
+
+    scores_desc = sorted(scores, key=lambda t: t[1])[::-1]
+
+    # Filter out empty string added by shap
+    scores_desc = [t for t in scores_desc if t[0] != ""]
+
+    fig_m = plt.figure()
+    plt.bar(x=[s[0] for s in scores_desc[:5]],
+            height=[s[1] for s in scores_desc[:5]])
+    plt.title("Top words contributing to positive sentiment")
+    plt.ylabel("Shap Value")
+    plt.xlabel("Word")
+    return {"original": text, "interpretation": scores}, fig_m
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_text = gr.Textbox(label="Input Text")
+            with gr.Row():
+                classify = gr.Button("Classify Sentiment")
+                interpret = gr.Button("Interpret")
+        with gr.Column():
+            label = gr.Label(label="Predicted Sentiment")
+        with gr.Column():
+            with gr.Tabs():
+                with gr.TabItem("Display interpretation with built-in component"):
+                    interpretation = gr.components.Interpretation(input_text)
+                with gr.TabItem("Display interpretation with plot"):
+                    interpretation_plot = gr.Plot()
+
+    classify.click(classifier, input_text, label)
+    interpret.click(interpretation_function, input_text, [interpretation, interpretation_plot])
+
+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,27 @@
+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/flute.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4100bf2ed1909efdb3c583c41dd78cd9347a4b2d5c8068ed3fd9d99ce24014b6
+size 222798

demos/blocks_neural_instrument_coding/new-sax-1.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:55767e0cc8c40c40ff9372c57ec9847b9c768d3ccdb0e40a18d0e395fd067043
+size 153678

demos/blocks_neural_instrument_coding/new-sax.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d4ad24dbfeee7f3808f9b08d1379043d26eeb559f69875e543210686afae586
+size 384044

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_neural_instrument_coding/sax2.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6ce10418426c151219a2f10697d348e00329fdd723197d60e49906420a443859
+size 384044

demos/blocks_neural_instrument_coding/trombone.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:141e4dd80b5e9a31f5c5f2f862b48a5802c334e594227b2955967e70df9126a2
+size 384044

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_speech_text_sentiment/requirements.txt

@@ -0,0 +1,2 @@
+torch
+transformers

demos/blocks_speech_text_sentiment/run.py

@@ -0,0 +1,32 @@
+from transformers import pipeline
+
+import gradio as gr
+
+asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
+classifier = pipeline("text-classification")
+
+
+def speech_to_text(speech):
+    text = asr(speech)["text"]
+    return text
+
+
+def text_to_sentiment(text):
+    return classifier(text)[0]["label"]
+
+
+demo = gr.Blocks()
+
+with demo:
+    audio_file = gr.Audio(type="filepath")
+    text = gr.Textbox()
+    label = gr.Label()
+
+    b1 = gr.Button("Recognize Speech")
+    b2 = gr.Button("Classify Sentiment")
+
+    b1.click(speech_to_text, inputs=audio_file, outputs=text)
+    b2.click(text_to_sentiment, inputs=text, outputs=label)
+
+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()