Be able to link to a specific gr.Tab or specific header in gr.Markdown

[abidlabs]

It would be great if a Gradio app automatically generated anchor links for every gr.Tab. Clicking on such a link would take a user directly to that Tab in a demo. Same for each header in a gr.Markdown.

[hunxuewangzi]

May I ask if it has been implemented, or when it will be implemented?

[hunxuewangzi]

@abidlabs

[abidlabs]

Not yet -- its on our radar, but will still take some time

[hunxuewangzi]

I need this function urgently now, is there any other way to achieve it, such as using javasrcipt @abidlabs thanks

[abidlabs]

Thinking about this some more -- these are two separate issues:

It would be great if a Gradio app automatically generated anchor links for every gr.Tab. Clicking on such a link would take a user directly to that Tab in a demo.

This is really a special case of https://github.com/gradio-app/gradio/issues/2269 and we should take care of it as part of that

Same for each header in a gr.Markdown.

This may not always be desired behavior. We could add a toggle, but its relatively simple for users to do this themselves, e.g. like this:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("lorem ipsum"*1000)
    gr.Markdown("""
# Hello <a id="hello" href="#hello">#</a>
""")
    demo.launch()

I'm inclined towards closing this issue, unless anyone feels strongly otherwise?

[abidlabs]

Ok let's go ahead and close this

[yiya1989]

Thinking about this some more -- these are two separate issues:

It would be great if a Gradio app automatically generated anchor links for every gr.Tab. Clicking on such a link would take a user directly to that Tab in a demo.

This is really a special case of #2269 and we should take care of it as part of that

Same for each header in a gr.Markdown.

This may not always be desired behavior. We could add a toggle, but its relatively simple for users to do this themselves, e.g. like this:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("lorem ipsum"*1000)
    gr.Markdown("""
# Hello <a id="hello" href="#hello">#</a>
""")
    demo.launch()

I'm inclined towards closing this issue, unless anyone feels strongly otherwise?

Hello, when i use gr.Tabs() and has multiple gr.TabItem, I want to specific a TabItem in url. But this code is not effect, What can I do now? Any other solution?

[yiya1989]

Thinking about this some more -- these are two separate issues:

It would be great if a Gradio app automatically generated anchor links for every gr.Tab. Clicking on such a link would take a user directly to that Tab in a demo.

This is really a special case of #2269 and we should take care of it as part of that

Same for each header in a gr.Markdown.

This may not always be desired behavior. We could add a toggle, but its relatively simple for users to do this themselves, e.g. like this:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("lorem ipsum"*1000)
    gr.Markdown("""
# Hello <a id="hello" href="#hello">#</a>
""")
    demo.launch()

I'm inclined towards closing this issue, unless anyone feels strongly otherwise?

Hello, when i use gr.Tabs() and has multiple gr.TabItem, I want to specific a TabItem in url. But this code is not effect, What can I do now? Any other solution?

I have use this to solve my question. Get request from gr.Request, and update gtab use gr.update(selected=tab_key_value).

def get_default_tab_id(request: gr.Request):
    tab_key_value = request.query_params.get("tab", "1")
    return gr.update(selected=tab_key_value)

with gr.Blocks(title=" WebUI") as app:
    gr.Markdown(value=i18n("AAAA."))
    with gr.Tabs() as gtab:
        with gr.TabItem(i18n("BBBB"), id="1"):
            gr.Markdown(value=i18n("bbbb"))
        with gr.TabItem(i18n("CCCC"), id="2"):
            gr.Markdown(value=i18n("cccc"))

app.load(get_default_tab_id, None, gtab)