hltext-label

demo/diff_texts/run.py

@@ -14,10 +14,18 @@ def diff_texts(text1, text2):
 demo = gr.Interface(
     diff_texts,
     [
-        gr.Textbox(lines=3, default_value="The quick brown fox jumped over the lazy dogs."),
-        gr.Textbox(lines=3, default_value="The fast brown fox jumps over lazy dogs."),
+        gr.Textbox(
+            label="Initial text",
+            lines=3,
+            default_value="The quick brown fox jumped over the lazy dogs.",
+        ),
+        gr.Textbox(
+            label="Text to compare",
+            lines=3,
+            default_value="The fast brown fox jumps over lazy dogs.",
+        ),
     ],
-    gr.HighlightedText(),
+    gr.HighlightedText(label="Diff"),
 )
 if __name__ == "__main__":
     demo.launch()

ui/packages/app/src/components/HighlightedText/HighlightedText.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { HighlightedText } from "@gradio/highlighted-text";
-	import { Block } from "@gradio/atoms";
+	import { Block, BlockTitle } from "@gradio/atoms";
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { LoadingStatus } from "../StatusTracker/types";
 
@@ -10,6 +10,7 @@
 	export let style: string = "";
 	export let show_legend: boolean;
 	export let color_map: Record<string, string> = {};
+	export let label: string;
 
 	export let loading_status: LoadingStatus;
 
@@ -22,6 +23,8 @@
 
 <Block>
 	<StatusTracker {...loading_status} />
-
+	{#if label}
+		<BlockTitle>{label}</BlockTitle>
+	{/if}
 	<HighlightedText {value} {style} {show_legend} {color_map} />
 </Block>

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

@@ -69,7 +69,7 @@
 	function handle_mouseover(label: string) {
 		active = label;
 	}
-	function handle_mouseout(label: string) {
+	function handle_mouseout() {
 		active = "";
 	}
 </script>
@@ -88,13 +88,13 @@
 
 {#if mode === "categories"}
 	{#if show_legend}
-		<div class="category-legend flex flex-wrap gap-1 mb-2">
+		<div class="category-legend flex flex-wrap gap-1 mb-2 text-black">
 			{#each Object.entries(_color_map) as [category, color], i}
 				<div
 					on:mouseover={() => handle_mouseover(category)}
 					on:focus={() => handle_mouseover(category)}
-					on:mouseout={() => handle_mouseout(category)}
-					on:blur={() => handle_mouseout(category)}
+					on:mouseout={() => handle_mouseout()}
+					on:blur={() => handle_mouseout()}
 					class="category-label px-2 rounded-sm font-semibold cursor-pointer"
 					style={"background-color:" + color.secondary}
 				>
@@ -104,20 +104,22 @@
 		</div>
 	{/if}
 	<div
-		class="textfield bg-white dark:bg-gray-800 rounded-sm box-border max-w-full break-word inline-flex flex-wrap gap-1"
+		class="textfield bg-white dark:bg-transparent rounded-sm box-border max-w-full break-word inline-flex flex-wrap gap-1"
 	>
 		{#each value as [text, category]}
 			<span
-				class="textspan bg-opacity-10 rounded-sm inline-flex items-center px-1.5 space-x-1.5 transition-colors"
+				class="textspan rounded-sm inline-flex items-center px-1 space-x-1.5 transition-colors text-black"
 				style:background-color={category === null ||
 				(active && active !== category)
 					? ""
 					: _color_map[category].secondary}
+				class:dark:text-white={category === null ||
+					(active && active !== category)}
 			>
-				<span class="text dark:text-white">{text}</span>
+				<span class="text ">{text}</span>
 				{#if !show_legend && category !== null}
 					<span
-						class="inline-category text-xs text-white rounded-sm px-1 transition-colors"
+						class="font-bold uppercase inline-category text-xs text-white rounded-sm my-[0.225rem] px-[0.325rem] transition-colors"
 						style:background-color={category === null ||
 						(active && active !== category)
 							? ""

ui/packages/theme/src/colors.ts

@@ -1,3 +1,7 @@
+import tw_colors from "tailwindcss/colors";
+
+console.log(tw_colors);
+
 export const ordered_colors = [
 	"red",
 	"green",
@@ -12,15 +16,26 @@ export const ordered_colors = [
 ] as const;
 
 // https://play.tailwindcss.com/ZubQYya0aN
-export const colors = {
-	red: { primary: "#dc2626", secondary: "#fca5a5" },
-	green: { primary: "#16a34a", secondary: "#86efac" },
-	blue: { primary: "#2563eb", secondary: "#93c5fd" },
-	yellow: { primary: "#eab308", secondary: "#fef08a" },
-	purple: { primary: "#9333ea", secondary: "#d8b4fe" },
-	teal: { primary: "#0d9488", secondary: "#5eead4" },
-	orange: { primary: "#ea580c", secondary: "#fdba74" },
-	cyan: { primary: "#0891b2", secondary: "#7dd3fc" },
-	lime: { primary: "#84cc16", secondary: "#d9f99d" },
-	pink: { primary: "#db2777", secondary: "#f9a8d4" }
-} as const;
+export const color_values = [
+	{ color: "red", primary: 600, secondary: 100 },
+	{ color: "green", primary: 600, secondary: 100 },
+	{ color: "blue", primary: 600, secondary: 100 },
+	{ color: "yellow", primary: 500, secondary: 100 },
+	{ color: "purple", primary: 600, secondary: 100 },
+	{ color: "teal", primary: 600, secondary: 100 },
+	{ color: "orange", primary: 600, secondary: 100 },
+	{ color: "cyan", primary: 600, secondary: 100 },
+	{ color: "lime", primary: 500, secondary: 100 },
+	{ color: "pink", primary: 600, secondary: 100 }
+] as const;
+
+export const colors = color_values.reduce(
+	(acc, { color, primary, secondary }) => ({
+		...acc,
+		[color]: {
+			primary: tw_colors[color][primary],
+			secondary: tw_colors[color][secondary]
+		}
+	}),
+	{}
+);