Add show_heading param to gr.Label (#9987)

* add hide_heading param

* amend hide heading logic for single labels

* add changeset

* add changeset

* fix test

* tweak docstring

* hide_heading -> show_heading

* add changeset

* set show_headings to true

* lint

* fix hidden top label

* fix background fill for ms and webkit

* add changeset

* Update gradio/components/label.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/huge-walls-train.md

@@ -0,0 +1,6 @@
+---
+"@gradio/label": minor
+"gradio": minor
+---
+
+feat:Add `show_heading` param to gr.Label

gradio/components/label.py

@@ -59,6 +59,7 @@ class Label(Component):
         render: bool = True,
         key: int | str | None = None,
         color: str | None = None,
+        show_heading: bool = True,
     ):
         """
         Parameters:
@@ -77,9 +78,11 @@ class Label(Component):
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             color: The background color of the label (either a valid css color name or hexadecimal string).
+            show_heading: If False, the heading will not be displayed if a dictionary of labels and confidences is provided. The heading will still be visible if the value is a string or number.
         """
         self.num_top_classes = num_top_classes
         self.color = color
+        self.show_heading = show_heading
         super().__init__(
             label=label,
             every=every,

js/label/Index.svelte

@@ -31,6 +31,7 @@
 	export let loading_status: LoadingStatus;
 	export let show_label = true;
 	export let _selectable = false;
+	export let show_heading = true;
 
 	$: {
 		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
@@ -59,7 +60,12 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	{#if show_label}
-		<BlockLabel Icon={LabelIcon} {label} disable={container === false} />
+		<BlockLabel
+			Icon={LabelIcon}
+			{label}
+			disable={container === false}
+			float={show_heading === true}
+		/>
 	{/if}
 	{#if _label !== undefined && _label !== null}
 		<Label
@@ -67,6 +73,7 @@
 			selectable={_selectable}
 			{value}
 			{color}
+			{show_heading}
 		/>
 	{:else}
 		<Empty unpadded_box={true}><LabelIcon /></Empty>

js/label/Label.stories.svelte

@@ -35,3 +35,25 @@
 		}
 	}}
 />
+
+<Story
+	name="Multiple label text with show_heading set to false (heading not visible)"
+	args={{
+		show_heading: false,
+		value: {
+			label: "Label",
+			confidences: [
+				{ label: "First Label", confidence: 0.7 },
+				{ label: "Second Label", confidence: 0.2 }
+			]
+		}
+	}}
+/>
+
+<Story
+	name="Single label text with show_heading set to false (heading still visible)"
+	args={{
+		show_heading: false,
+		value: { label: "Test label", confidence: 0.8 }
+	}}
+/>

js/label/shared/Label.svelte

@@ -11,6 +11,7 @@
 
 	export let color: string | undefined = undefined;
 	export let selectable = false;
+	export let show_heading = true;
 
 	function get_aria_referenceable_id(elem_id: string): string {
 		// `aria-labelledby` interprets the value as a space-separated id reference list,
@@ -21,14 +22,16 @@
 </script>
 
 <div class="container">
-	<h2
-		class="output-class"
-		data-testid="label-output-value"
-		class:no-confidence={!("confidences" in value)}
-		style:background-color={color || "transparent"}
-	>
-		{value.label}
-	</h2>
+	{#if show_heading || !value.confidences}
+		<h2
+			class="output-class"
+			data-testid="label-output-value"
+			class:no-confidence={!("confidences" in value)}
+			style:background-color={color || "transparent"}
+		>
+			{value.label}
+		</h2>
+	{/if}
 
 	{#if typeof value === "object" && value.confidences}
 		{#each value.confidences as confidence_set, i}
@@ -115,11 +118,38 @@
 
 	.bar {
 		appearance: none;
+		-webkit-appearance: none;
+		-moz-appearance: none;
 		align-self: flex-start;
 		margin-bottom: var(--size-1);
 		border-radius: var(--radius-md);
 		background: var(--stat-background-fill);
 		height: var(--size-1);
+		border: none;
+	}
+
+	.bar::-moz-meter-bar {
+		border-radius: var(--radius-md);
+		background: var(--stat-background-fill);
+	}
+
+	.bar::-webkit-meter-bar {
+		border-radius: var(--radius-md);
+		background: var(--stat-background-fill);
+		border: none;
+	}
+
+	.bar::-webkit-meter-optimum-value,
+	.bar::-webkit-meter-suboptimum-value,
+	.bar::-webkit-meter-even-less-good-value {
+		border-radius: var(--radius-md);
+		background: var(--stat-background-fill);
+	}
+
+	.bar::-ms-fill {
+		border-radius: var(--radius-md);
+		background: var(--stat-background-fill);
+		border: none;
 	}
 
 	.label {

test/components/test_label.py

@@ -61,6 +61,7 @@ class TestLabel:
             "color": None,
             "_selectable": False,
             "key": None,
+            "show_heading": True,
         }
 
     def test_color_argument(self):