🙋 Community Feedback on Blocks

[abidlabs]

This issue is a place for the community to try Blocks 🧱 and give feedback on its development

What is Blocks?

Blocks allows you to build web-based demos in a flexible way using the gradio library. Blocks is a more low-level and flexible alternative to the core Interface class. Specifically, Blocks support:

• grouping together related demos using Tabs
• flexible positioning of components using Columns, Rows, etc. and the ability to add explanatory Markdown or Text at any point
• flexible data flows (e.g. any number of input and output components can be displayed on screen, and functions can define data flow between any subset of inputs and outputs)
• flexible event triggers (e.g. button clicks, element changes, etc.)

Here's an example Block:

If you've used Gradio before, you'll find that Blocks still allows you to build web apps:

• entirely in Python
• using the standard Python interpreter, which means it will run in Jupyter notebooks, colab notebooks, or any Python IDE

Getting Started with Blocks

• Blocks is just released with Gradio 3.0. Check here for the announcement.
• To use it, please install the latest release of Gradio: pip install gradio
• TODO: Add [Blocks Introduction Guide Link]

You can also use Blocks in Spaces! See an example here.

---

Giving feedback: In the comments below, we'd love to hear from you:

• Did Blocks allow you to build something cool? Share a screenshot or a link to a Blocks Demo!
• Does Blocks not support your use case? Let us know too so that we can support it!
• Did you find anything confusing or hard within the syntax or usage of Blocks? Let's improve it together!

[nateraw]

Really looking forward to this feature! In colab, I'm running into an issue. Here's a notebook.

AttributeError: 'Blocks' object has no attribute 'requires_permissions'

Looks like some env variable I'm supposed to set/isn't set properly?

Edit: Works now! Thanks for the quick fix

[abidlabs]

Hi folks! I just built a Block to plot projectile trajectories when a user specifies the speed and angle of the projectile.

Screenshot

Code

import gradio as gr
import matplotlib.pyplot as plt
import numpy as np


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

block = gr.Blocks()

with block:
    gr.Markdown("Let's do some kinematics! Choose the speed and angle to see the trajectory.")
    
    with gr.Row():
        speed = gr.inputs.Slider(1, 30, default=25, label="Speed")
        angle = gr.inputs.Slider(0, 90, default=45, label="Angle")
    output = gr.outputs.Image(type="plot")
    btn = gr.Button("Run")
    btn.click(plot, [speed, angle], output)

block.launch()

Feedback

• Very quick and easy to put together a demo for this. I like how the output plot is hidden until the button is clicked
• The labels don't appear next to the sliders like I expected ([Blocks] Component labels don't show in Blocks #704)
• The plot output looks kind of ugly with the gray background (Improve design of "plot" output #711). It would be nicer if it was wider or the width could be adjusted
• Is it possible to adjust the width/color/style of the run button?
• I would actually prefer if the run button didn't have to come at all, and instead, the demo refreshed any time I changed the sliders ([Blocks] Implement other event triggers besides click & support event triggers across multiple components #723)

I have created feature request issues for some points of feedback above

[aliabd]

Built a block that can convert text to either audio or an image, depending on user's choice.

Demo

Code

import gradio as gr

fastspeech = gr.Interface.load("huggingface/facebook/fastspeech2-en-ljspeech")
clip = gr.Interface.load("spaces/DrishtiSharma/Text-to-Image-search-using-CLIP")


def text2speech(text):
    return fastspeech(text)


def text2image(text):
    image = clip(text)[0]
    return gr.processing_utils.decode_base64_to_image(image)


block = gr.Blocks()

with block:
    text = gr.inputs.Textbox(placeholder="Try writing something..")

    with gr.Column():
        with gr.Row():
            get_audio = gr.Button("generate audio")
            get_image = gr.Button("generate image")
        with gr.Row():
            speech = gr.outputs.Audio()
            image = gr.outputs.Image()


    get_audio.click(text2speech, inputs=text, outputs=speech)
    get_image.click(text2image, inputs=text, outputs=image)

block.launch()

Feedback
A few issues I faced with this and other demos:

• Markdown doesn’t seem to actually render markdown. Am I missing something? [Blocks] gr.Markdown doesn't render markdown #729
• State (with Chatbot) throws an error [Blocks] State throws a js error  #730
• Can we get string shortcuts for components like in Interface? [Blocks] String shortcuts for components #731
• Is there a way to remove the need for a button and mimic live=True behavior? Documented by @abidlabs in [Blocks] Implement other event triggers besides click & support event triggers across multiple components #723
• The output has no loading feedback. [Blocks] Output has no loading feedback #732
• label not showing. Documented by @abidlabs in [Blocks] Component labels don't show in Blocks #704
• I would like to build a workflow where the output of a model is the input of another. but I can't pass gr.outputs.<etc> as an input to something [Blocks] Input/Output Component Limitation #736
• Can we build a component for examples? [Blocks] Examples component #737
• I would like to build a conditional workflow based on output/selected input. something like a radio input "pick one of these options" and based on choice show them one of two inputs (and run one of two functions) [Blocks] Conditional Flow #738

[omerXfaruq]

Regarding the last example the output is changing its position and size, it looks nice and well, however the positioning was not defined like that in the code.

• Generate image
  

• Then generate audio

[nateraw]

Have there been any discussions about an interface list as opposed to the context manager/blocks solution?

I think this sort of thing reads a bit better. It would sacrifice "shared" components from the blocks, but it would make it easier to define inputs/outputs via the shortcuts as opposed to having to define each input class instance explicitly.

interface_a = gr.Interface(
    fn_a,
    inputs='sketchpad',
    outputs='label',
    title='Pictionary App'
)

interface_b = gr.Interface(
    fn_b,
    inputs='text',
    outputs='image',
    title="Text to Image App"
)

# InterfaceList does not exist, just an idea
gr.InterfaceList([interface_a, interface_b]).launch()

[abidlabs]

This is a really nice suggestion @nateraw. We've used context managers because they provide a lot more flexibility -- we can define different kinds of layouts (for example tabs, columns, etc.). But as a broader point, do you find that the blocks syntax is difficult to use? Or is it more that you feel that that this use case (of combining separate interfaces together) is common and should be easier to write?

If it's the second, then we have an idea that I'd like your feedback on. A block-ish of doing what you want could potentially look like this:

with block as Blocks():
  with Tab("Pictionary"):
      gr.Interface(
          fn_a,
          inputs='sketchpad',
          outputs='label',
      )
  with Tab("Text to Image"):
      gr.Interface(
          fn_b,
          inputs='text',
          outputs='image',
      )
  block.launch()

What do you think about this syntax? Is it intuitive for you? I've proposed that we should support this in #640

[nateraw]

I found having to do 2 nested withs to be not so intuitive. This is just one opinion from one person though!

The blocks syntax reminds me of the column/row management experience in streamlit, which I find for the most part to be confusing, and I see most folks (non-power users) just not using it - and if they do, the code is hard to read imho.

At the end of the day, if the point/driving force behind this feature is to allow folks to have more than one interface in one hosted gradio app, I think we should make it as easy as possible to do just that.

Would really love some other community members to weigh in on this, so we can see what they think. 😄

[chuachinhon]

Quick question: Blocks is not supported on Spaces at the moment, right? I tried to deploy one but got the error:
Traceback (most recent call last):
File "app.py", line 129, in
block = gr.Blocks()
AttributeError: module 'gradio' has no attribute 'Blocks'

I did specify gradio==2.8.0b20 in my requirements.txt

I've left the trial app here: https://huggingface.co/spaces/chinhon/multilingual_headline_writer

Otherwise, the Blocks feature looks useful for grouping apps together.

[JuanCarlosMartinezSevilla]

I'm not sure if I am understanding blocks the right way, but what I feel users want is a way to dinamically load the different inputs from others. For example if you want to have 2 functionalities in the interface you can just put a gr.input.Radio and then depending and what you have clicked... load other gr.input components.

In my case I would also love to see some way to reload individual components like in this case (see the image) . I've selected the class Staff and when I submit, I would love to be able to reload the component without the option Staff. Beware I am using Gradio as an input for different configurations to execute a model.

If you have any doubt about my use case you can reply me. Thank you for reading!

PS: I would like also to be able to locate examples above the options and change the text "Examples" to -> "Default settings" or any other text.