Update Label color from backend

[freddyaboulton]

Description

Demo usecase

import gradio as gr
import random

def update_color(value):
    if value == "bad":
        # This is bad so use red
        return "brown"
    elif value == "so-so":
        # Ok but pay attention (use orange)
        return "#ff9966"
    else:
        # Nothing to worry about
        return None


def update_value():
    choice = random.choice(['good', 'bad', 'so-so'])
    color = update_color(choice)
    return gr.Label.update(value=choice, color=color)

with gr.Blocks() as demo:
    label = gr.Label(value=-10)
    demo.load(lambda: update_value(), inputs=None, outputs=[label], every=1)
demo.queue().launch()

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:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

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.

[github-actions]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2736-all-demos

[abidlabs]

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()

[freddyaboulton]

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

[pngwn]

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>

[freddyaboulton]

Thank you for the tip @pngwn ! Works and makes it much cleaner!

[freddyaboulton]

@abidlabs I'm sticking with the function approach. Much easier for users and it's easier to specify the "no background color" state with None in this case.

[abidlabs]

Awesome PR @freddyaboulton! Specifying the color via a function which works well, and it's nice that None maps to the default background color.

One thing I'm having an issue with is passing a color function to update(). Here's what I tried, which doesn't seem to set the background color to red:

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()

[freddyaboulton]

Chatted with @abidlabs - will refactor so that color accepts a string as opposed to a function

[freddyaboulton]

@abidlabs The label parameter is now just a string and works with gr.Label.update. Should be good for another review!

[abidlabs]

Is there a typo here or am I misunderstanding?

Suggested change

	# Map is so that the color is updated to be transparent,
	# Make it so that the color is updated to be transparent,

[abidlabs]

LGTM, thanks for getting it to work with update(). Works great now!