Enable hiding the inline category in HighlightedText with a show_inline_category argument (#8355)

* Enable hidding inline_category in HighlightedText

* add changeset

* Update test_highlighted_text.py

* add changeset

* Update gradio/components/highlighted_text.py

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

* add story

---------

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

.changeset/public-socks-shout.md

@@ -0,0 +1,6 @@
+---
+"@gradio/highlightedtext": minor
+"gradio": minor
+---
+
+feat:Enable hiding the inline category in HighlightedText with a `show_inline_category` argument

gradio/components/highlighted_text.py

@@ -39,6 +39,7 @@ class HighlightedText(Component):
         color_map: dict[str, str]
         | None = None,  # Parameter moved to HighlightedText.style()
         show_legend: bool = False,
+        show_inline_category: bool = True,
         combine_adjacent: bool = False,
         adjacent_separator: str = "",
         label: str | None = None,
@@ -59,6 +60,7 @@ class HighlightedText(Component):
             value: Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component.
             color_map: A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {"person": "red", "location": "#FFEE22"}
             show_legend: whether to show span categories in a separate legend or inline.
+            show_inline_category: If False, will not display span category label. Only applies if show_legend=False and interactive=False.
             combine_adjacent: If True, will merge the labels of adjacent tokens belonging to the same category.
             adjacent_separator: Specifies the separator to be used between tokens if combine_adjacent is True.
             label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
@@ -76,6 +78,7 @@ class HighlightedText(Component):
         """
         self.color_map = color_map
         self.show_legend = show_legend
+        self.show_inline_category = show_inline_category
         self.combine_adjacent = combine_adjacent
         self.adjacent_separator = adjacent_separator
         super().__init__(

js/highlightedtext/HighlightedText.stories.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import HighlightedText from "./Index.svelte";
-	import { Gradio } from "@gradio/utils";
 </script>
 
 <Meta title="Components/HighlightedText" component={HighlightedText} />
@@ -98,3 +97,17 @@
 		show_legend: true
 	}}
 />
+
+<Story
+	name="Highlighted Text with hidden inline category"
+	args={{
+		value: [
+			{ token: "the", class_or_confidence: -1 },
+			{ token: "quick", class_or_confidence: 1 },
+			{ token: "fox", class_or_confidence: 0.3 }
+		],
+		show_legend: false,
+		show_inline_category: false,
+		interactive: false
+	}}
+/>

js/highlightedtext/Index.svelte

@@ -27,6 +27,7 @@
 	}[];
 	let old_value: typeof value;
 	export let show_legend: boolean;
+	export let show_inline_category: boolean;
 	export let color_map: Record<string, string> = {};
 	export let label = gradio.i18n("highlighted_text.highlighted_text");
 	export let container = true;
@@ -87,6 +88,7 @@
 				selectable={_selectable}
 				{value}
 				{show_legend}
+				{show_inline_category}
 				{color_map}
 			/>
 		{:else}

js/highlightedtext/README.md

@@ -14,6 +14,7 @@ BaseStaticHighlightedText
 		class_or_confidence: string | number | null;
 	}[] = [];
 	export let show_legend = false;
+	export let show_inline_category = true;
 	export let color_map: Record<string, string> = {};
 	export let selectable = false;
 ```
@@ -27,4 +28,4 @@ BaseInteractiveHighlightedText
 	export let show_legend = false;
 	export let color_map: Record<string, string> = {};
 	export let selectable = false;
-```
+```

js/highlightedtext/shared/StaticHighlightedtext.svelte

@@ -10,6 +10,7 @@
 		class_or_confidence: string | number | null;
 	}[] = [];
 	export let show_legend = false;
+	export let show_inline_category = true;
 	export let color_map: Record<string, string> = {};
 	export let selectable = false;
 
@@ -122,7 +123,7 @@
 									!_color_map[v.class_or_confidence]}
 								class="text">{line}</span
 							>
-							{#if !show_legend && v.class_or_confidence !== null}
+							{#if !show_legend && show_inline_category && v.class_or_confidence !== null}
 								&nbsp;
 								<span
 									class="label"

test/components/test_highlighted_text.py

@@ -113,6 +113,7 @@ class TestHighlightedText:
             "show_label": True,
             "label": None,
             "show_legend": False,
+            "show_inline_category": True,
             "container": True,
             "min_width": 160,
             "scale": None,