gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
32.47k stars 2.43k forks source link

Improve rendering #8398

Closed aliabid94 closed 4 months ago

aliabid94 commented 4 months ago

Several improvements to gr.render, including:

  1. Animation to show rendering Recording 2024-05-28 at 08 49 22

  2. Memory cleanup in frontend, removing elements from previous render

  3. Allow rendering in a row

  4. Respond to last trigger, via trigger_mode="always_last"

gradio-pr-bot commented 4 months ago

🪼 branch checks and previews

• Name Status URL
Spaces ready! Spaces preview
Website ready! Website preview
Storybook ready! Storybook preview
:unicorn: Changes detected! Details

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/18c73936724aeca7ce033d0ba386971b624b75ae/gradio-4.31.5-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@18c73936724aeca7ce033d0ba386971b624b75ae#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-builds.s3.amazonaws.com/18c73936724aeca7ce033d0ba386971b624b75ae/gradio-client-0.19.4.tgz
gradio-pr-bot commented 4 months ago

🦄 change detected

This Pull Request includes changes to the following packages.

Package Version
@gradio/app patch
@gradio/client patch
@gradio/column patch
@gradio/row patch
@gradio/statustracker patch
gradio patch

With the following changelog entry.

Improve rendering

Maintainers or the PR author can modify the PR title to modify this entry.

#### Something isn't right? - Maintainers can change the version label to modify the version bump. - If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can [update the changelog file directly](https://github.com/gradio-app/gradio/edit/render_deps/.changeset/fine-pillows-open.md).
freddyaboulton commented 4 months ago

Rendering animation looks great. Two comments beyond what I left on slack:

too_much_progress

pngwn commented 4 months ago

Regarding rapid updates, a common approach is to add a threshold of a few hundred MS before starting any animations, that could work here (but is also something we could do in a follow up)

aliabid94 commented 4 months ago

I think it should be possible to disable the progress animation for render. It can be distracting for quick renders. Especially if render is triggered based on small changes to a state variable.

Okay I made this change for now: Previously, the animation would be alternating from 100% opacity to 50% and back to 100%, over 2s infinitely. Now it starts at 0%, goes to 100% over 1s, and then 100% opacity to 50% and back to 100%, over 2s infinitely. Because it now starts at 0%, quick renders don't show any visual change.

I think it should be possible to not queue render events. If it's a quick UI update, I don't see the benefit of queueing.

Done.