Gradio radio buttons and interfaces

🔒 Gradio
1

Hello Guys,
So I am trying to use the radio buttons and when chosen an option, I want to show an interface that is sends the inputs to a method. The following is the code.

import gradio as gr

def transcribe(data):
    if not mic and not file:
        return "No input"
    if mic:
        audio = mike
    elif file:
        audio = file
    return "hello"

def filter(choice):
    if choice == "Microphone":
        return [gr.update(visible=True), gr.update(visible=False)]
    if choice == "Browse":
        return [gr.update(visible=False), gr.update(visible=True)]
    

with gr.Blocks() as demo:
    radio = gr.Radio(["Microphone", "Browse"], value="Microphone", label = "Choose the input method")
    list = gr.Dropdown(value=["whisper_base"], choices=["whisper_small", "whisper_base", "whisper_medium", "whisper_large"], interactive=True)
#     with gr.Row(visible=True) as mainA:
#         with gr.Column(visible=True) as colA:
    with gr.Row(visible=True) as rowA:
#                 microphone = gr.Audio(source="microphone", type="filepath")
#                 output1 = gr.Textbox(label = "Text Genereated", lines = 5)    
        io1 = gr.Interface(
            fn=transcribe, 
            inputs = gr.Audio(source="microphone", type="filepath"),
            outputs = gr.Textbox(label = "Text Genereated", lines = 5)    
        )

    with gr.Row(visible=False) as rowB:
#                 browse = 
#                 output1 = gr.Textbox(label = "Text Genereated", lines = 5)    
        io2 = gr.Interface(
            fn=transcribe, 
            inputs = gr.Audio(source="upload", type="filepath"),
            outputs = gr.Textbox(label = "Text Genereated", lines = 5)    
        )
                
#         with gr.Column(visible=True) as colB:
#             output = gr.Textbox(label = "Text Genereated", lines = 5)    
    radio.change(filter, radio, [rowA, rowB])

demo.launch()

The above code is working with gr.Textbox or gr.Audio but it is not working with the Interfaces. It says the block is already rendered and throws me a duplicate error.

DuplicateBlockError                       Traceback (most recent call last)
Cell In[54], line 27
     22 #     with gr.Row(visible=True) as mainA:
     23 #         with gr.Column(visible=True) as colA:
     24     with gr.Row(visible=True) as rowA:
     25 #                 microphone = gr.Audio(source="microphone", type="filepath")
     26 #                 output1 = gr.Textbox(label = "Text Genereated", lines = 5)    
---> 27         io1 = gr.Interface(
     28             fn=transcribe, 
     29             inputs = gr.Audio(source="microphone", type="filepath"),
     30             outputs = gr.Textbox(label = "Text Genereated", lines = 5)    
     31         )
     33     with gr.Row(visible=False) as rowB:
     34 #                 browse = 
     35 #                 output1 = gr.Textbox(label = "Text Genereated", lines = 5)    
     36         io2 = gr.Interface(
     37             fn=transcribe, 
     38             inputs = gr.Audio(source="upload", type="filepath"),
     39             outputs = gr.Textbox(label = "Text Genereated", lines = 5)    
     40         )

File /usr/local/anaconda3/envs/aimlstuff/lib/python3.10/site-packages/gradio/interface.py:444, in Interface.__init__(self, fn, inputs, outputs, examples, cache_examples, examples_per_page, live, interpretation, num_shap, title, description, article, thumbnail, theme, css, allow_flagging, flagging_options, flagging_dir, flagging_callback, analytics_enabled, batch, max_batch_size, _api_mode, **kwargs)
    430 with Row().style(equal_height=False):
    431     if self.interface_type in [
    432         InterfaceTypes.STANDARD,
    433         InterfaceTypes.INPUT_ONLY,
    434         InterfaceTypes.UNIFIED,
    435     ]:
    436         (
    437             submit_btn,
    438             clear_btn,
    439             stop_btn,
    440             flag_btns,
    441             input_component_column,
    442             interpret_component_column,
    443             interpretation_set,
--> 444         ) = self.render_input_column()
    445     if self.interface_type in [
    446         InterfaceTypes.STANDARD,
    447         InterfaceTypes.OUTPUT_ONLY,
    448     ]:
    449         (
    450             submit_btn_out,
    451             clear_btn_2_out,
   (...)
    454             interpretation_btn,
    455         ) = self.render_output_column(submit_btn)

File /usr/local/anaconda3/envs/aimlstuff/lib/python3.10/site-packages/gradio/interface.py:511, in Interface.render_input_column(self)
    509 with input_component_column:
    510     for component in self.input_components:
--> 511         component.render()
    512 if self.interpretation:
    513     interpret_component_column = Column(visible=False)

File /usr/local/anaconda3/envs/aimlstuff/lib/python3.10/site-packages/gradio/blocks.py:85, in Block.render(self)
     81 """
     82 Adds self into appropriate BlockContext
     83 """
     84 if Context.root_block is not None and self._id in Context.root_block.blocks:
---> 85     raise DuplicateBlockError(
     86         f"A block with id: {self._id} has already been rendered in the current Blocks."
     87     )
     88 if Context.block is not None:
     89     Context.block.add(self)

DuplicateBlockError: A block with id: 445 has already been rendered in the current Blocks.

Could you please help me where I am going wrong here?

Thanks and regards,
Baradwaj Aryasomayajula

2

So, after some trial and errors, I kind of solved it.

import gradio as gr

def transcribe(mic = None, file=None):
    if not mic and not file:
        return "No input"
    if mic:
        audio = mic
    elif file:
        audio = file
    return "hello"


def filter(choice):
    if choice == "Microphone":
        return [gr.update(visible=True), gr.update(visible=False)]
    if choice == "Browse":
        return [gr.update(visible=False), gr.update(visible=True)]
    

input1 = gr.Interface(
        transcribe, 
        inputs = gr.Audio(source="microphone", type="filepath", label="Microphone"),
        outputs = gr.Textbox(label = "Text Genereated", lines = 5)    
    )

input2 = gr.Interface(
        transcribe, 
        inputs = gr.Audio(source="upload", type="filepath", label="Audio File"),
        outputs = gr.Textbox(label = "Text Genereated", lines = 5)    
    )
    
with gr.Blocks() as demo:
    radio = gr.Radio(["Microphone", "Browse"], value="Microphone", label = "Choose the input method")
    list = gr.Dropdown(value=["whisper_base"], choices=["whisper_small", "whisper_base", "whisper_medium", "whisper_large"], interactive=True)
    
    with gr.Row(visible=True) as mainA:
        with gr.Column(visible=True) as colA:
            with gr.Row(visible=True) as rowA:        
                input1.render()
            with gr.Row(visible=False) as rowB:
                input2.render()                
#         with gr.Column(visible=True) as colB:
#             output = gr.Textbox(label = "Text Genereated", lines = 5)    
    radio.change(filter, radio, [rowA, rowB])

demo.launch()
3

hi @bharadwaj509 this is an interesting bug, tagging @freddyaboulton here

One extra tip you could disable the queue for the iterface udpate

radio.change(filter, radio, [rowA, rowB], queue=False)

5

@radames Sure, thanks a lot. But what does it do?

6

you don’t need to queue the requests to switch the interface components, queue is very useful to queue request on function that take more resources, such as the prediction function etc.