gradio: 🙋 Community Feedback on Blocks

I have tried out blocks now and have a few pieces of feedback. I found it easy to use and was able to make my desired layout quickly with one button outputting to multiple tabs with different views. Building an interface with rows/columns is intuitive to me, very HTML-like. I prefer the control compared to the previous ‘magic’ of the standard interface. I think this new UI type will be useful for multi-step processes and for making more app-like complex demos. Having this as a more advanced option is perfect, with the standard Gradio UI as default.

Areas to improve:

• It seems that the default dark theme is not supported (text stays black)
• With added layout customization, supporting custom CSS is very much desired 🙏
• Input elements should not change in size relative to the output (add flex-shrink: 0)
• Output elements should have a min and max width to keep styles clean

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()

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. 😄

Hi @abidlabs and team: 2 quick questions on using Parallel and Series with Blocks. I’ve deployed a new demo on Spaces so it’ll be easier to see what I mean: https://huggingface.co/spaces/chinhon/headlines_blocks_parallel_series

For Parallel:

• is there a way to “stack” the outputs on top of each other in 2 different windows, like gr.Interface?
• I’ve tried to work around it, but current version of Block seems to display the Parallel outputs in columns or as a list. See attached screen grabs.

For Parallel and Series:

• would performance slow significantly by combining Parallel and Series under the hood of one app via Block? I’ve not tested the run times exhaustively, and the app seems to run ok so far on Spaces.

Overall, I’d say Blocks still works for me mostly as an organisatonal tool to put similar apps together. I’ve tried out a few version using blocks to combine different inputs and processing functions, but found myself bogged down with unnecessary complexities after a while - which detracts from the main draw of Gradio, in my view.

But that’s just me/my use case. Others might have better use cases for the other features.

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.

Every theme will have a light and dark mode. This will be toggleable by the user but, by default, respect system preferences.

So in this case you would just select (theme=peach) and both light and dark variants of that theme will be available to users of the app.

Thanks for the feedback @Lastly and @prakharrathi25! I have created an issue around the step-gating / visibility issue that you guys have mentioned: #784

Great question @brenden-connors! We are still working on themes with Blocks. We are planning on launching with a default and a dark theme next week, but then adding more themes over time. Right now, you won’t find themes working correctly, but eventually something like gr.Blocks(theme="dark-peach") should work! cc @pngwn @gary149

@nateraw thanks for the feedback! let’s continue the conversation on https://github.com/gradio-app/gradio/issues/640

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? https://github.com/gradio-app/gradio/issues/729
• State (with Chatbot) throws an error https://github.com/gradio-app/gradio/issues/730
• Can we get string shortcuts for components like in Interface? https://github.com/gradio-app/gradio/issues/731
• Is there a way to remove the need for a button and mimic live=True behavior? Documented by @abidlabs in https://github.com/gradio-app/gradio/issues/723
• The output has no loading feedback. https://github.com/gradio-app/gradio/issues/732
• label not showing. Documented by @abidlabs in https://github.com/gradio-app/gradio/issues/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 https://github.com/gradio-app/gradio/issues/736
• Can we build a component for examples? https://github.com/gradio-app/gradio/issues/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) https://github.com/gradio-app/gradio/issues/738