-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Label color from backend #2736
Conversation
All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2736-all-demos |
I find it a little simpler than the alternative (see below), but I don't have a strong opinion and am fine with this too: import gradio as gr
import random
def update_color(value):
if value < 0:
# This is bad so use red
return "#FF0000"
elif 0 <= value <= 20:
# Ok but pay attention (use orange)
return "#ff9966"
else:
# Nothing to worry about
return None
def get_update():
val = random.randrange(-20, 60)
return gr.update(value=val, color=update_color(val))
with gr.Blocks() as demo:
label = gr.Label(value=-10)
demo.load(get_update, inputs=None, outputs=[label], every=1)
demo.queue().launch() |
70d30b9
to
cac3d06
Compare
ui/packages/label/src/Label.svelte
Outdated
> | ||
{value.label} | ||
</div> | ||
{#if color !== null} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the best practice to reduce this code dupe? The only difference is style:background-color
but you can't place an {#if} around just the style
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can create a conditional expression in the curly braces, falling back tot he 'default' which is probably transparent in this case (swap transparent for something else if that isn't the case).
<div style:background-color={color || "transparent"}>
...
</div>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the tip @pngwn ! Works and makes it much cleaner!
@abidlabs I'm sticking with the function approach. Much easier for users and it's easier to specify the "no background color" state with |
3324404
to
739a944
Compare
Awesome PR @freddyaboulton! Specifying the color via a function which works well, and it's nice that One thing I'm having an issue with is passing a color function to def get_update():
val = random.randrange(-20, 60)
return gr.update(value=val, color=lambda x:"red")
with gr.Blocks() as demo:
label = gr.Label(value=-10)
demo.load(get_update, inputs=None, outputs=[label])
demo.queue().launch() |
Chatted with @abidlabs - will refactor so that |
739a944
to
c08f906
Compare
@abidlabs The label parameter is now just a string and works with |
if color is _Keywords.NO_VALUE: | ||
color = None | ||
# If the color was specified by the developer as None | ||
# Map is so that the color is updated to be transparent, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a typo here or am I misunderstanding?
# Map is so that the color is updated to be transparent, | |
# Make it so that the color is updated to be transparent, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks for getting it to work with update()
. Works great now!
Description
Demo usecase
Question about the api: Went with the suggestion to use a function to determine the label color. The one thing I don't like about it is that it couples the styling of the component with its value. We keep those separate for the other components. Curious what others think before going further. @abidlabs @pngwn @aliabid94 @aliabd
Fixes #2629
Checklist:
A note about the CHANGELOG
Hello 👋 and thank you for contributing to Gradio!
All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.
Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by
[@myusername](link-to-your-github-profile)
in[PR 11111](https://github.com/gradio-app/gradio/pull/11111)
".If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.