Be able to set the active `Tab` programmatically

[vzakharov]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
I have different tabs for different stages in the process, and I’d like the app to “remember” where the user is now.

Describe the solution you'd like
Seems like adding an 'active' parameter for a Tab will solve it, although it will be a bit cumbersome because you'll need to set 'active' to False for one tab and to True for another.

Additional context
Perhaps having a Tabs component which would combine several tabs in one, along with 'active_tab' parameter would be a more sustainable solution. But it also probably requires much more development.

[abidlabs]

Hi @vzakharov this possible by using the TabItem.select() event trigger. What you can do is once a tabitem is selected, you can store some value into a gradio State. And then you can use the state variable as inputs to your other functions.

Read more about state here: https://gradio.app/state_in_blocks/

If this solves your use case, feel free to close the issue. Otherwise, please add more details on what you are trying to acheive.

[vzakharov]

What I need is not store the selected tab, but select an tab based on a certain stored value.

Say, you have tabs 'Training' and 'Inference'. The user first trains some model, then infers it. While the model isn't trained yet (say, stored status is 0), I want the Training tab to be open whenever the app is opened. But when the model is already trained (stored status is 1), I want the Inference tab to open.

Hope this clarifies. Alternatively, I might just not have understood your previous answer :-)

[abidlabs]

Ah okay yes I don't think we currently support that. Out of curiosity, how would you get the stored status of the model?

[vzakharov]

Via Blocks.load() and then either get it from the server or localStorage.

Currently the workaround I came up with is to use a group of Radios (indicating the stage) together with Boxes that become visible or hidden depending on the stage. Doesn’t look as neat but does the job.

[TashaSkyUp]

@abidlabs any progress?

[abidlabs]

As @TashaSkyUp has kindly fixed in #2971, this is actually possible now @vzakharov. Here's a quick code snippet showing how to do it:

import gradio as gr

def change_tab():
    return gr.Tabs.update(selected=1)

with gr.Blocks() as demo:
    with gr.Tabs() as tabs:
        with gr.TabItem("Train", id=0):
            t = gr.Textbox()
        with gr.TabItem("Inference", id=1):
            i = gr.Image()

    btn = gr.Button()
    btn.click(change_tab, None, tabs)

demo.launch()

[kcelia]

When I switch tabs, the next page starts at the bottom. How can I change tabs and start from the top of the page?

Thanks

[gaurikapse]

Hello, I'm trying to follow the recommendation from @abidlabs but I'm receiving this error: AttributeError: type object 'Tabs' has no attribute 'update' I'm not sure where I should look to resolve this.

[abidlabs]

Hi @gaurikapse if you are using Gradio 4.x, then you no longer need to return Tabs.update() from your function, you can just return the Tabs object directly.

So the above code would be:

import gradio as gr

def change_tab():
    return gr.Tabs(selected=1)

with gr.Blocks() as demo:
    with gr.Tabs() as tabs:
        with gr.TabItem("Train", id=0):
            t = gr.Textbox()
        with gr.TabItem("Inference", id=1):
            i = gr.Image()

    btn = gr.Button()
    btn.click(change_tab, None, tabs)

demo.launch()

[lxgbrl]

Hey abidlabs, @abidlabs will this also work with interactive True/False. I try to activate and deactivate tab through buttons but that will not work. Maybe you can show me a direction?

thx Alex

[Mon-ius]

not work

[dominictobias]

Is it possible to give the active tabitem (tab content) a class? It's currently impossible to select with CSS I think