Load visible components in 6.0 #12491
Conversation
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/31967f962a07a7856a36784815f6c96570368f7e/gradio-6.0.2-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@31967f962a07a7856a36784815f6c96570368f7e#subdirectory=client/python"Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/31967f962a07a7856a36784815f6c96570368f7e/gradio-client-2.0.0.tgz |
🦄 change detectedThis Pull Request includes changes to the following packages.
✅ Changeset approved by @freddyaboulton
|
freddyaboulton
requested review from
abidlabs,
aliabd,
aliabid94,
dawoodkhan82,
hannahblair and
pngwn
js/core/src/init.svelte.ts
Outdated
| } from "./init_utils"; | ||
| import { translate_if_needed } from "./i18n"; | ||
| import { tick } from "svelte"; | ||
| import { tick, getContext } from "svelte"; |
There was a problem hiding this comment.
The main changes are in this file:
untrack_children_of_closed_accordions_or_inactive_tabssets visibility=False for children of unopened accordions, inactive tabs- changes to
update_state. If a component withvisible=Falseis the output of an event, we would previously not update its props. Now we do. We also let components withvisible=False, trigger change events. This was true in 5.x. In order to trigger change events fromupdate_state, we have to pass in thegradio_dispatch_functionfrom blocks - Last big change is that tabs/accordions now dispatch custom events that let the AppTree know when to render the children of an Accordion/Tabs. You can see that in
js/tabs/,js/accodion, andBlocks.sveltemostly
|
I am willing to test this just let me know how to install |
|
You can install with |
wow so many times faster. cant wait you to publish great work |
|
Seems like visibility toggling is very broken even on main with something as simple as: import gradio as gr
with gr.Blocks() as demo:
textbox = gr.Textbox(visible=False)
make_visible_btn = gr.Button("Show")
def show():
return gr.Textbox(visible=True)
make_visible_btn.click(fn=show, outputs=textbox)
if __name__ == "__main__":
demo.launch()Confirmed that this works for Tabs and Accordion though! Components only mount when made visible there. Also, I tried this: import gradio as gr
with gr.Blocks() as demo:
with gr.Tab("A"):
timerA = gr.Timer()
timerA.tick(lambda: print("A"))
with gr.Tab("B"):
timerB = gr.Timer()
timerB.tick(lambda: print("B"))
if __name__ == "__main__":
demo.launch()Both timers tick, I'm not sure why. Would have expected the hidden ticker to not tick, but doesn't seem to be the case. Not too important, just wondering why. Would be nice if we could test for this somehow, especially if there's some component that triggers and event onMount (this is why I was playing with Timers). |
|
I'm trying to figure out why visible= is broken but seems like a component that starts off as visible=False can never be visible again. Also seems like a component like Textbox that gets hidden will not hide its parent Form container. Demo: import gradio as gr
with gr.Blocks() as demo:
textbox = gr.Textbox(visible=False)
make_visible_btn = gr.Button("Show")
def show():
return gr.Textbox(visible=True)
make_visible_btn.click(fn=show, outputs=textbox)
make_invisible_btn = gr.Button("Hide")
def hide():
return gr.Textbox(visible=False)
make_invisible_btn.click(fn=hide, outputs=textbox)
if __name__ == "__main__":
demo.launch()
If it is initially set to visible=True:
|
|
Thanks for the thorough review @aliabid94 ! Yea the issue with textbox is that it is the child of a form component and if all children of a form are invisible, then we mark that form as invisible so we don't render an empty form (looks ugly in UI). If you tried with a ColorPicker or something everything would work as expected. The problem was that updating the visibility of a child would not update the visibility of the parent form. I added a function called The issue with the timers in inactive tabs triggering is also fixed. |
aliabid94
left a comment
aliabid94
left a comment
There was a problem hiding this comment.
Nice, thanks for fixing! Just to be clear I still see the Form parent when the child is hidden by an event listener, but can confirm everything else works great! Approved
|
just lots of console.logs to remove |
aliabid94
force-pushed
the
12482-long-time-to-load
branch
from
c7a859b to
2bcda20
Compare
|
Thanks for the thorough review @aliabid94 ! I removed those console logs and handled removing the empty form if its children are invisible. However, that issue is trickier than expected and filed a follow-up issue for it. |
|
@freddyaboulton will it come with gradio 6.0.3? |
|
Yes. Next release will be 6.1.0 |
awesome any ETA? thank you so much for great work |
Description
Closes: #12482
Closes: #12506
Closes: #12505
In 5.0, we would only render components that are visible. We did not do that optimization in 6.0.
This PR
Main
AI Disclosure
We encourage the use of AI tooling in creating PRs, but the any non-trivial use of AI needs be disclosed. E.g. if you used Claude to write a first draft, you should mention that. Trivial tab-completion doesn't need to be disclosed. You should self-review all PRs, especially if they were generated with AI.
🎯 PRs Should Target Issues
Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.
Not adhering to this guideline will result in the PR being closed.
Testing and Formatting Your Code
PRs will only be merged if tests pass on CI. We recommend at least running the backend tests locally, please set up your Gradio environment locally and run the backed tests:
bash scripts/run_backend_tests.shPlease run these bash scripts to automatically format your code:
bash scripts/format_backend.sh, and (if you made any changes to non-Python files)bash scripts/format_frontend.sh