Repository: gradio-app/gradio

Issue:
Improvements to Label for Dashboarding
- [x] I have searched to see if a similar issue already exists.


**Is your feature request related to a problem? Please describe.**  
As discussed today in our workshop, the gr.Number component does not work great for dashboarding uses where you want to display a number.

<img width="1344" alt="image" src="https://user-images.githubusercontent.com/41651716/200894524-8612c9d2-ddb5-41f9-95db-8bb8bed3f57b.png">

@abidlabs suggested using the Label component instead of a number and it works much better!

<img width="1336" alt="image" src="https://user-images.githubusercontent.com/41651716/200896004-47fbf4e7-a80f-4d31-afb3-57f39fa12c67.png">


However there some improvements we can make (detailed below)


**Describe the solution you'd like**  

- Be able to set a color for the Label's Box. That way developers can use it to create "Alert" boxes for metrics.
Something like 

```python
return gr.Label.update(value=100, color="#FF0000")
```


**Additional context**  
Add any other context or screenshots about the feature request here.



Discussion:
Very nice!

Maybe it would be cool if the box color parameter could accept a function based on the value. E.g. like this:

```py
def shade(val):
  if val==0:
     return "green"
  else:
     return "#FF0000"

gr.Label(box_color=shade)
```

That way as the label changes, the box color is automatically updated

Resolving patch:
diff --git a/gradio/components.py b/gradio/components.py
--- a/gradio/components.py
+++ b/gradio/components.py
@@ -3038,6 +3038,7 @@ def __init__(
         show_label: bool = True,
         visible: bool = True,
         elem_id: Optional[str] = None,
+        color: Optional[str] = None,
         **kwargs,
     ):
         """
@@ -3048,8 +3049,10 @@ def __init__(
             show_label: if True, will display label.
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            color: The background color of the label (either a valid css color name or hexadecimal string).
         """
         self.num_top_classes = num_top_classes
+        self.color = color
         IOComponent.__init__(
             self,
             label=label,
@@ -3064,6 +3067,7 @@ def get_config(self):
         return {
             "num_top_classes": self.num_top_classes,
             "value": self.value,
+            "color": self.color,
             **IOComponent.get_config(self),
         }
 
@@ -3105,12 +3109,24 @@ def update(
         label: Optional[str] = None,
         show_label: Optional[bool] = None,
         visible: Optional[bool] = None,
+        color: Optional[str] = _Keywords.NO_VALUE,
     ):
+        # If color is not specified (NO_VALUE) map it to None so that
+        # it gets filtered out in postprocess. This will mean the color
+        # will not be updated in the front-end
+        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,
+        # e.g. no background default state.
+        elif color is None:
+            color = "transparent"
         updated_config = {
             "label": label,
             "show_label": show_label,
             "visible": visible,
             "value": value,
+            "color": color,
             "__type__": "update",
         }
         return updated_config


Test patch:
diff --git a/test/test_components.py b/test/test_components.py
--- a/test/test_components.py
+++ b/test/test_components.py
@@ -1352,8 +1352,31 @@ def test_component_functions(self):
             "visible": True,
             "interactive": None,
             "root_url": None,
+            "color": None,
         }
 
+    def test_color_argument(self):
+
+        label = gr.Label(value=-10, color="red")
+        assert label.get_config()["color"] == "red"
+        update_1 = gr.Label.update(value="bad", color="brown")
+        assert update_1["color"] == "brown"
+        update_2 = gr.Label.update(value="bad", color="#ff9966")
+        assert update_2["color"] == "#ff9966"
+
+        update_3 = gr.Label.update(
+            value={"bad": 0.9, "good": 0.09, "so-so": 0.01}, color="green"
+        )
+        assert update_3["color"] == "green"
+
+        update_4 = gr.Label.update(value={"bad": 0.8, "good": 0.18, "so-so": 0.02})
+        assert update_4["color"] is None
+
+        update_5 = gr.Label.update(
+            value={"bad": 0.8, "good": 0.18, "so-so": 0.02}, color=None
+        )
+        assert update_5["color"] == "transparent"
+
     @pytest.mark.asyncio
     async def test_in_interface(self):
         """
@@ -1590,7 +1613,9 @@ def bold_text(text):
 class TestMarkdown:
     def test_component_functions(self):
         markdown_component = gr.Markdown("# Let's learn about $x$", label="Markdown")
-        assert markdown_component.get_config()["value"].startswith("""<h1>Let\'s learn about <span class="math inline"><span style=\'font-size: 0px\'>x</span><svg xmlns:xlink="http://www.w3.org/1999/xlink" width="11.6pt" height="19.35625pt" viewBox="0 0 11.6 19.35625" xmlns="http://www.w3.org/2000/svg" version="1.1">\n \n <defs>\n  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n  <g id="patch_1">\n   <path d="M 0 19.35625""")
+        assert markdown_component.get_config()["value"].startswith(
+            """<h1>Let\'s learn about <span class="math inline"><span style=\'font-size: 0px\'>x</span><svg xmlns:xlink="http://www.w3.org/1999/xlink" width="11.6pt" height="19.35625pt" viewBox="0 0 11.6 19.35625" xmlns="http://www.w3.org/2000/svg" version="1.1">\n \n <defs>\n  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n  <g id="patch_1">\n   <path d="M 0 19.35625"""
+        )
 
     @pytest.mark.asyncio
     async def test_in_interface(self):