Automatic word-break in highlighted text, combine_adjacent support (#1209)

* changes

* changes

* updated PyPi version to 2.9b26

* changes

* css tweaks (#1213)

* css tweaks

* more tweaks

* fix lint error

Co-authored-by: pngwn <hello@pngwn.io>

demo/diff_texts/run.py

@@ -25,7 +25,7 @@ demo = gr.Interface(
             value="The fast brown fox jumps over lazy dogs.",
         ),
     ],
-    gr.HighlightedText(label="Diff"),
+    gr.HighlightedText(label="Diff", combine_adjacent=True),
 )
 if __name__ == "__main__":
     demo.launch()

gradio.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: gradio
-Version: 2.9b25
+Version: 2.9b26
 Summary: Python library for easily interacting with trained machine learning models
 Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq, Pete Allen, Ömer Faruk Özdemir

gradio/components.py

@@ -2726,6 +2726,7 @@ class HighlightedText(Changeable, IOComponent):
         *,
         color_map: Dict[str, str] = None,
         show_legend: bool = False,
+        combine_adjacent: bool = False,
         label: Optional[str] = None,
         show_label: bool = True,
         css: Optional[Dict] = None,
@@ -2745,6 +2746,7 @@ class HighlightedText(Changeable, IOComponent):
         self.value = value
         self.color_map = color_map
         self.show_legend = show_legend
+        self.combine_adjacent = combine_adjacent
         IOComponent.__init__(
             self, label=label, show_label=show_label, css=css, visible=visible, **kwargs
         )
@@ -2781,12 +2783,28 @@ class HighlightedText(Changeable, IOComponent):
     def postprocess(self, y):
         """
         Parameters:
-        y (Union[Dict, List[Tuple[str, Union[str, int, float]]]]): dictionary or tuple list representing key value pairs
+        y (List[Tuple[str, Union[str, number, None]]]): List of (word, category) tuples
         Returns:
-        (List[Tuple[str, Union[str, number]]]): list of key value pairs
-
+        (List[Tuple[str, Union[str, number, None]]]): List of (word, category) tuples
         """
-        return y
+        if self.combine_adjacent:
+            output = []
+            running_text, running_category = None, None
+            for text, category in y:
+                if running_text is None:
+                    running_text = text
+                    running_category = category
+                elif category == running_category:
+                    running_text += text
+                else:
+                    output.append((running_text, running_category))
+                    running_text = text
+                    running_category = category
+            if running_text is not None:
+                output.append((running_text, running_category))
+            return output
+        else:
+            return y
 
     def save_flagged(self, dir, label, data, encryption_key):
         return json.dumps(data)

gradio/version.txt

@@ -1 +1 @@
-2.9b25
+2.9b26

setup.py

@@ -9,7 +9,7 @@ long_description = (this_directory / "README.md").read_text()
 
 setup(
     name="gradio",
-    version="2.9b25",
+    version="2.9b26",
     include_package_data=True,
     description="Python library for easily interacting with trained machine learning models",
     long_description=long_description,

ui/packages/highlighted-text/src/HighlightedText.svelte

@@ -104,22 +104,23 @@
 		</div>
 	{/if}
 	<div
-		class="textfield bg-white dark:bg-transparent rounded-sm box-border max-w-full break-word inline-flex flex-wrap gap-1"
+		class="textfield bg-white dark:bg-transparent rounded-sm text-sm box-border max-w-full break-word leading-7"
 	>
 		{#each value as [text, category]}
 			<span
-				class="textspan rounded-sm inline-flex items-center px-1 space-x-1.5 transition-colors text-black"
+				class="textspan rounded-sm px-1 transition-colors text-black  pb-[0.225rem] pt-[0.15rem]"
 				style:background-color={category === null ||
 				(active && active !== category)
 					? ""
 					: _color_map[category].secondary}
 				class:dark:text-white={category === null ||
 					(active && active !== category)}
+				class:hl={category !== null}
 			>
 				<span class="text ">{text}</span>
 				{#if !show_legend && category !== null}
 					<span
-						class="font-bold uppercase inline-category text-xs text-white rounded-sm my-[0.225rem] px-[0.325rem] transition-colors"
+						class="label mr-[-4px] font-bold uppercase text-xs inline-category  text-white rounded-sm  px-[0.325rem] mt-[0.05rem] py-[0.05rem] transition-colors"
 						style:background-color={category === null ||
 						(active && active !== category)
 							? ""
@@ -157,3 +158,13 @@
 		{/each}
 	</div>
 {/if}
+
+<style>
+	.hl + .hl {
+		@apply ml-1;
+	}
+
+	.textspan:last-child > .label {
+		@apply mr-0;
+	}
+</style>

ui/packages/workbench/src/routes/highlightedtext.svelte

@@ -9,6 +9,7 @@
 		["one", "1"],
 		["two", "2"],
 		["three", "3"],
+		["The", null],
 		["two", "2"],
 		["three", "3"]
 	]}
@@ -17,11 +18,11 @@
 <h2 class="my-2">Without legend</h2>
 <HighlightedText
 	value={[
-		["one", "1"],
-		["two", "2"],
-		["three", "3"],
-		["two", "2"],
-		["three", "3"]
+		["Frank ", "Name"],
+		["lives in ", null],
+		["Paris", "Loc"],
+		[" and is aged ", null],
+		["37", "Age"]
 	]}
 />