mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-27 01:40:20 +08:00
hltext-label (#1204)
* show highttext label + tweaks * show highttext label + tweaks
This commit is contained in:
pngwn
GitHub
parent
871c9713b4
commit
4ca48284bb
@ -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()
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
? ""
|
||||
|
||||
@ -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]
|
||||
}
|
||||
}),
|
||||
{}
|
||||
);
|
||||
|
||||
@ -196,6 +196,9 @@ importers:
|
||||
packages/html:
|
||||
specifiers: {}
|
||||
|
||||
packages/icons:
|
||||
specifiers: {}
|
||||
|
||||
packages/image:
|
||||
specifiers:
|
||||
'@gradio/atoms': workspace:^0.0.1
|
||||
@ -347,7 +350,7 @@ importers:
|
||||
'@gradio/upload': link:../upload
|
||||
'@gradio/video': link:../video
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.36
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.40
|
||||
'@sveltejs/kit': 1.0.0-next.318_svelte@3.47.0
|
||||
autoprefixer: 10.4.2_postcss@8.4.6
|
||||
postcss: 8.4.6
|
||||
@ -1045,31 +1048,31 @@ packages:
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 2.3.1
|
||||
|
||||
/@sveltejs/adapter-auto/1.0.0-next.36:
|
||||
resolution: {integrity: sha512-BCvSlz77Mz38K2sQUQ3YcudxJsOZprOmIW05rzPf5KrqidWa5CvPH2PdQ7XKX7CYgcZHqWioyYt8oxdXBCIulA==}
|
||||
/@sveltejs/adapter-auto/1.0.0-next.40:
|
||||
resolution: {integrity: sha512-TT6YJUF3asJ/2RbviEpcDJQ/TixPcvmH0L2266fGNT7+KfAf9wbbVdegPWRODk2E2hTN0X+h5YS9l+lap+BK9w==}
|
||||
dependencies:
|
||||
'@sveltejs/adapter-cloudflare': 1.0.0-next.18
|
||||
'@sveltejs/adapter-netlify': 1.0.0-next.53
|
||||
'@sveltejs/adapter-vercel': 1.0.0-next.49
|
||||
'@sveltejs/adapter-cloudflare': 1.0.0-next.19
|
||||
'@sveltejs/adapter-netlify': 1.0.0-next.56
|
||||
'@sveltejs/adapter-vercel': 1.0.0-next.50
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-cloudflare/1.0.0-next.18:
|
||||
resolution: {integrity: sha512-iIb7ScN2hnnfVQPhRjw0FYpovYJrw4n22BFAQIg6QvOwmmGz1E3QkyBkm/tRmyY7emDfnljgXtvk4Hsoszp5Ug==}
|
||||
/@sveltejs/adapter-cloudflare/1.0.0-next.19:
|
||||
resolution: {integrity: sha512-LET3DUYpl+deoKhkWCzhHUT7iipYkgVkOcRIJX7qT4m23A+MAbzcAC3npgwEYSe9RokOSWMVBr3tVujeES5EeA==}
|
||||
dependencies:
|
||||
esbuild: 0.14.31
|
||||
worktop: 0.8.0-next.12
|
||||
worktop: 0.8.0-next.13
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-netlify/1.0.0-next.53:
|
||||
resolution: {integrity: sha512-F35KBfdSbR2FXJWliTRj422Y8OAc3syx9vgVPO/bQRuqSnCpXmgxuUgmPZ73/skv3fS4QStXsXQGTnyV4Xs25A==}
|
||||
/@sveltejs/adapter-netlify/1.0.0-next.56:
|
||||
resolution: {integrity: sha512-fM3aBHsr7syCGfIJcuB1mEoZwynqyOxVijvmyrd9OWHi6MP3bXSP+GhKDMtDpQRwejJJiwuZNTx2PUbV3uirvA==}
|
||||
dependencies:
|
||||
'@iarna/toml': 2.2.5
|
||||
esbuild: 0.14.31
|
||||
tiny-glob: 0.2.9
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-vercel/1.0.0-next.49:
|
||||
resolution: {integrity: sha512-Me0Zb10iBv+ySVMc0XgI7rdzwiMmeVHq48iVv3oXORa/et/efJVEknVSVk22q15XRqys7DhoPirf54Mz4jElFQ==}
|
||||
/@sveltejs/adapter-vercel/1.0.0-next.50:
|
||||
resolution: {integrity: sha512-yta0AkuWEr7qrm8LB34F4ZdCtMxj+cHD4huwrRYCgjv+PSJHLPwe7aH53+Mhrv6La0TgeyQ/f2lTyhBMXZXn9Q==}
|
||||
dependencies:
|
||||
esbuild: 0.14.31
|
||||
dev: true
|
||||
@ -4844,8 +4847,8 @@ packages:
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/worktop/0.8.0-next.12:
|
||||
resolution: {integrity: sha512-ZXdgI9XOf0uB4IegFoViLdQ0Bf7hish0XMHwuV3nopOXygfLJkwAC5+HyA+sihBMSM2sLLQ5uGnD5aknL8+NQg==}
|
||||
/worktop/0.8.0-next.13:
|
||||
resolution: {integrity: sha512-aLPWSneFtPJr3RAf841orF9GNlVdVkQd2Wj/BbcGHp3whBZoXx6dcwwClA9fezm7muNan4SuT+ZTyMWdoJSCAg==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
mrmime: 1.0.0
|
||||
|
||||
Loading…
Reference in New Issue
Block a user