File size: 3,511 Bytes
0bd62e5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<script context="module" lang="ts">

	export { default as BaseStaticHighlightedText } from "./shared/StaticHighlightedtext.svelte";

	export { default as BaseInteractiveHighlightedText } from "./shared/InteractiveHighlightedtext.svelte";

</script>

<script lang="ts">

	import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";

	import StaticHighlightedText from "./shared/StaticHighlightedtext.svelte";

	import InteractiveHighlightedText from "./shared/InteractiveHighlightedtext.svelte";

	import { Block, BlockLabel, Empty } from "@gradio/atoms";

	import { TextHighlight } from "@gradio/icons";

	import { StatusTracker } from "@gradio/statustracker";

	import type { LoadingStatus } from "@gradio/statustracker";

	import { merge_elements } from "./shared/utils";



	export let gradio: Gradio<{

		select: SelectData;

		change: never;

		clear_status: LoadingStatus;

	}>;

	export let elem_id = "";

	export let elem_classes: string[] = [];

	export let visible = true;

	export let value: {

		token: string;

		class_or_confidence: string | number | null;

	}[];

	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;

	export let scale: number | null = null;

	export let min_width: number | undefined = undefined;

	export let _selectable = false;

	export let combine_adjacent = false;

	export let interactive: boolean;



	$: if (!color_map && Object.keys(color_map).length) {

		color_map = color_map;

	}



	export let loading_status: LoadingStatus;



	$: {

		if (value !== old_value) {

			old_value = value;

			gradio.dispatch("change");

		}

	}



	$: if (value && combine_adjacent) {

		value = merge_elements(value, "equal");

	}

</script>

{#if !interactive}
	<Block

		variant={"solid"}

		test_id="highlighted-text"

		{visible}

		{elem_id}

		{elem_classes}

		padding={false}

		{container}

		{scale}

		{min_width}

	>
		<StatusTracker

			autoscroll={gradio.autoscroll}

			i18n={gradio.i18n}

			{...loading_status}

			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
		/>
		{#if label}
			<BlockLabel

				Icon={TextHighlight}

				{label}

				float={false}

				disable={container === false}

			/>
		{/if}

		{#if value}
			<StaticHighlightedText

				on:select={({ detail }) => gradio.dispatch("select", detail)}
				selectable={_selectable}
				{value}
				{show_legend}
				{show_inline_category}
				{color_map}
			/>
		{:else}
			<Empty>
				<TextHighlight />
			</Empty>
		{/if}
	</Block>
{:else}
	<Block

		variant={interactive ? "dashed" : "solid"}

		test_id="highlighted-text"

		{visible}

		{elem_id}

		{elem_classes}

		padding={false}

		{container}

		{scale}

		{min_width}

	>
		<StatusTracker

			autoscroll={gradio.autoscroll}

			{...loading_status}

			i18n={gradio.i18n}

			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
		/>
		{#if label}
			<BlockLabel

				Icon={TextHighlight}

				{label}

				float={false}

				disable={container === false}

			/>
		{/if}

		{#if value}
			<InteractiveHighlightedText

				bind:value

				on:change={() => gradio.dispatch("change")}
				selectable={_selectable}
				{show_legend}
				{color_map}
			/>
		{:else}
			<Empty>
				<TextHighlight />
			</Empty>
		{/if}
	</Block>
{/if}