mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-15 02:11:15 +08:00
more changes
This commit is contained in:
parent
3155488ed7
commit
5c0fc0148d
@ -61,7 +61,7 @@ iface = gr.Interface(
|
||||
gr.outputs.Audio(label="Audio"),
|
||||
gr.outputs.Image(label="Image"),
|
||||
gr.outputs.Video(label="Video"),
|
||||
gr.outputs.HighlightedText(label="HighlightedText"),
|
||||
gr.outputs.HighlightedText(label="HighlightedText", color_map={"punc": "pink", "test 0": "blue"}),
|
||||
gr.outputs.HighlightedText(label="HighlightedText", show_legend=True),
|
||||
gr.outputs.JSON(label="JSON"),
|
||||
gr.outputs.HTML(label="HTML"),
|
||||
|
1
frontend-svelte/package-lock.json
generated
1
frontend-svelte/package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"mime-types": "^2.1.34",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"rollup": "^2.3.4",
|
||||
|
@ -1,5 +1,9 @@
|
||||
import InputTextbox from "./input/Textbox.svelte";
|
||||
import InputNumber from "./input/Number.svelte";
|
||||
import InputRadio from "./input/Radio.svelte";
|
||||
import InputSlider from "./input/Slider.svelte";
|
||||
import InputCheckbox from "./input/Checkbox.svelte";
|
||||
import InputCheckboxGroup from "./input/CheckboxGroup.svelte";
|
||||
import InputAudio from "./input/Audio.svelte";
|
||||
import InputFile from "./input/File.svelte";
|
||||
import InputImage from "./input/Image.svelte";
|
||||
@ -11,6 +15,8 @@ import OutputCarousel from "./output/Carousel.svelte";
|
||||
import OutputImage from "./output/Image.svelte";
|
||||
import OutputVideo from "./output/Video.svelte";
|
||||
import OutputAudio from "./output/Audio.svelte";
|
||||
import OutputLabel from "./output/Label.svelte";
|
||||
import OutputHighlightedText from "./output/HighlightedText.svelte";
|
||||
import OutputFile from "./output/File.svelte";
|
||||
import OutputJson from "./output/Json.svelte";
|
||||
import OutputHtml from "./output/Html.svelte";
|
||||
@ -20,16 +26,16 @@ import Dummy from "./Dummy.svelte"
|
||||
|
||||
export const inputComponentMap = {
|
||||
"audio": InputAudio,
|
||||
"checkbox": Dummy,
|
||||
"checkboxgroup": Dummy,
|
||||
"checkbox": InputCheckbox,
|
||||
"checkboxgroup": InputCheckboxGroup,
|
||||
"dataframe": Dummy,
|
||||
"dropdown": InputDropdown,
|
||||
"file": InputFile,
|
||||
"image": InputImage,
|
||||
"number": InputNumber,
|
||||
"radio": InputRadio,
|
||||
"slider": Dummy,
|
||||
"textbox": Dummy,
|
||||
"slider": InputSlider,
|
||||
"textbox": InputTextbox,
|
||||
"timeseries": Dummy,
|
||||
"video": InputVideo,
|
||||
}
|
||||
@ -39,11 +45,11 @@ export const outputComponentMap = {
|
||||
"carousel": OutputCarousel,
|
||||
"dataframe": OutputDataframe,
|
||||
"file": OutputFile,
|
||||
"highlightedtext": Dummy,
|
||||
"highlightedtext": OutputHighlightedText,
|
||||
"html": OutputHtml,
|
||||
"image": OutputImage,
|
||||
"json": OutputJson,
|
||||
"label": Dummy,
|
||||
"label": OutputLabel,
|
||||
"textbox": OutputTextbox,
|
||||
"timeseries": Dummy,
|
||||
"video": OutputVideo,
|
||||
|
54
frontend-svelte/src/components/input/Checkbox.svelte
Normal file
54
frontend-svelte/src/components/input/Checkbox.svelte
Normal file
@ -0,0 +1,54 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="input-checkbox inline-block"
|
||||
{theme}
|
||||
on:click={() => setValue(!value)}
|
||||
>
|
||||
<div class="checkbox-item py-2 px-3 rounded cursor-pointer" class:selected={value}>
|
||||
<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
|
||||
<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
|
||||
<line
|
||||
x1="-7.5"
|
||||
y1="0"
|
||||
x2="-2.5"
|
||||
y2="5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="-2.5"
|
||||
y1="5"
|
||||
x2="7.5"
|
||||
y2="-7.5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected .check {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.input-checkbox[theme="default"] {
|
||||
.checkbox-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox {
|
||||
@apply bg-gray-100 dark:bg-gray-400 transition;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600 dark:bg-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
68
frontend-svelte/src/components/input/CheckboxGroup.svelte
Normal file
68
frontend-svelte/src/components/input/CheckboxGroup.svelte
Normal file
@ -0,0 +1,68 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let choices;
|
||||
|
||||
const toggleChoice = (choice) => {
|
||||
if (value.includes(choice)) {
|
||||
value.splice(value.indexOf(choice), 1);
|
||||
} else {
|
||||
value.push(choice);
|
||||
}
|
||||
setValue(value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="input-checkbox-group flex flex-wrap gap-2" {theme}>
|
||||
{#each choices as choice, i}
|
||||
<div
|
||||
class="checkbox-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2"
|
||||
class:selected={value.includes(choice)}
|
||||
key={i}
|
||||
on:click={() => toggleChoice(choice)}
|
||||
>
|
||||
<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
|
||||
<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
|
||||
<line
|
||||
x1="-7.5"
|
||||
y1="0"
|
||||
x2="-2.5"
|
||||
y2="5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="-2.5"
|
||||
y1="5"
|
||||
x2="7.5"
|
||||
y2="-7.5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{choice}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected .check {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.input-checkbox-group[theme="default"] {
|
||||
.checkbox-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox {
|
||||
@apply bg-gray-100 dark:bg-gray-400 transition;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600 dark:bg-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -5,6 +5,7 @@
|
||||
<input
|
||||
type="number"
|
||||
class="input-number w-full rounded box-border p-2 focus:outline-none appearance-none"
|
||||
value={value}
|
||||
on:change={e => setValue(parseFloat(e.target.value))}
|
||||
{theme}
|
||||
/>
|
||||
|
42
frontend-svelte/src/components/input/Slider.svelte
Normal file
42
frontend-svelte/src/components/input/Slider.svelte
Normal file
@ -0,0 +1,42 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let minimum, maximum, step;
|
||||
</script>
|
||||
|
||||
<div class="input-slider text-center" {theme}>
|
||||
<input
|
||||
type="range"
|
||||
class="range w-full appearance-none transition rounded h-4"
|
||||
on:input={(e) => setValue(e.target.value)}
|
||||
{value}
|
||||
min={minimum}
|
||||
max={maximum}
|
||||
{step}
|
||||
/>
|
||||
<div class="value inline-block mx-auto mt-1 px-2 py-0.5 rounded">{value}</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
|
||||
.input-slider[theme="default"] {
|
||||
.range {
|
||||
@apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
|
||||
}
|
||||
.value {
|
||||
@apply bg-gray-100 dark:bg-gray-600 font-semibold;
|
||||
}
|
||||
}
|
||||
</style>
|
29
frontend-svelte/src/components/input/Textbox.svelte
Normal file
29
frontend-svelte/src/components/input/Textbox.svelte
Normal file
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let lines, placeholder;
|
||||
</script>
|
||||
|
||||
{#if lines > 1}
|
||||
<textarea
|
||||
class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
|
||||
{value}
|
||||
{placeholder}
|
||||
on:change={(e) => setValue(e.target.value)}
|
||||
{theme}
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
type="text"
|
||||
class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
|
||||
{value}
|
||||
{placeholder}
|
||||
on:change={(e) => setValue(e.target.value)}
|
||||
{theme}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.input-text[theme="default"] {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
</style>
|
105
frontend-svelte/src/components/output/HighlightedText.svelte
Normal file
105
frontend-svelte/src/components/output/HighlightedText.svelte
Normal file
@ -0,0 +1,105 @@
|
||||
<script>
|
||||
import { getNextColor } from "../utils/helpers";
|
||||
|
||||
export let value, theme;
|
||||
export let show_legend, color_map;
|
||||
color_map = color_map || {};
|
||||
let mode;
|
||||
|
||||
if (value.length > 0) {
|
||||
for (let [_, label] of value) {
|
||||
if (label !== null) {
|
||||
if (typeof label === "string") {
|
||||
mode = "categories";
|
||||
if (!(label in color_map)) {
|
||||
let color = getNextColor(Object.keys(color_map).length);
|
||||
color_map[label] = color;
|
||||
}
|
||||
} else {
|
||||
mode = "scores";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(color_map);
|
||||
</script>
|
||||
|
||||
<div class="output-highlightedtext" {theme}>
|
||||
{#if mode === "categories"}
|
||||
{#if show_legend}
|
||||
<div class="category-legend flex flex-wrap gap-1 mb-2">
|
||||
{#each color_map.entries() as [category, color], i}
|
||||
<div
|
||||
class="category-label px-2 py-1 rounded text-white font-semibold"
|
||||
style={"background-color" + color}
|
||||
key={i}
|
||||
>
|
||||
{category}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-all"
|
||||
>
|
||||
{#each value as [text, category], i}
|
||||
<span
|
||||
class="textspan p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm"
|
||||
title={category}
|
||||
style={category === null
|
||||
? ""
|
||||
: `color: ${color_map[category]}; background-color: ${color_map[
|
||||
category
|
||||
].replace("1)", "var(--tw-bg-opacity))")}`}
|
||||
key={i}
|
||||
>
|
||||
<span class="text dark:text-white">{text}</span>
|
||||
{#if !show_legend && category !== null}
|
||||
<span
|
||||
class="inline-category text-xs text-white ml-0.5 px-0.5 rounded-sm"
|
||||
style={category === null
|
||||
? ""
|
||||
: `background-color: ${color_map[category]}`}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
{#if show_legend}
|
||||
<div
|
||||
class="color_legend flex px-2 py-1 justify-between rounded mb-3 font-semibold"
|
||||
style="background: -webkit-linear-gradient(to right,#8d83d6,(255,255,255,0),#eb4d4b); background: linear-gradient(to right,#8d83d6,rgba(255,255,255,0),#eb4d4b);"
|
||||
>
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>+1</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-all"
|
||||
>
|
||||
{#each value as [text, score], i}
|
||||
<span
|
||||
class="textspan p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm"
|
||||
title={value}
|
||||
style={"background-color: rgba(" +
|
||||
(score < 0 ? "141, 131, 214," + -score : "235, 77, 75," + score) +
|
||||
")"}
|
||||
>
|
||||
<span class="text dark:text-white">{text}</span>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.output-highlightedtext[theme="default"] {
|
||||
.textfield {
|
||||
@apply shadow;
|
||||
}
|
||||
}
|
||||
</style>
|
54
frontend-svelte/src/components/output/Label.svelte
Normal file
54
frontend-svelte/src/components/output/Label.svelte
Normal file
@ -0,0 +1,54 @@
|
||||
<script>
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<div class="output-label" {theme}>
|
||||
<div
|
||||
class="output-class font-bold text-2xl py-6 px-4 flex-grow flex items-center justify-center"
|
||||
class:no-confidence={!("confidences" in value)}
|
||||
>
|
||||
{value.label}
|
||||
</div>
|
||||
{#if "confidences" in value}
|
||||
<div class="confidence-intervals flex text-xl">
|
||||
<div class="labels mr-2" style={{ maxWidth: "120px" }}>
|
||||
{#each value.confidences as confidence_set, i}
|
||||
<div
|
||||
class="label overflow-hidden whitespace-nowrap h-7 mb-2 overflow-ellipsis text-right"
|
||||
title={confidence_set.label}
|
||||
key={i}
|
||||
>
|
||||
{confidence_set.label}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="confidences flex flex-grow flex-col items-baseline">
|
||||
{#each value.confidences as confidence_set, i}
|
||||
<div
|
||||
class="confidence flex justify-end overflow-hidden whitespace-nowrap h-7 mb-2 px-1"
|
||||
style={"min-width: calc(" +
|
||||
Math.round(confidence_set.confidence * 100) +
|
||||
"% - 12px)"}
|
||||
key={i}
|
||||
>
|
||||
{Math.round(confidence_set.confidence * 100) + "%"}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.output-label[theme="default"] {
|
||||
.label {
|
||||
@apply text-sm h-5;
|
||||
}
|
||||
.confidence {
|
||||
@apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-5 font-semibold rounded;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -7,6 +7,44 @@ export const playable = (filename) => {
|
||||
return true; // FIX BEFORE COMMIT - mime import causing issues
|
||||
};
|
||||
|
||||
export function randInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
export const getNextColor = (index, alpha) => {
|
||||
alpha = alpha || 1;
|
||||
let default_colors = [
|
||||
[255, 99, 132],
|
||||
[54, 162, 235],
|
||||
[240, 176, 26],
|
||||
[153, 102, 255],
|
||||
[75, 192, 192],
|
||||
[255, 159, 64],
|
||||
[194, 88, 74],
|
||||
[44, 102, 219],
|
||||
[44, 163, 23],
|
||||
[191, 46, 217],
|
||||
[160, 162, 162],
|
||||
[163, 151, 27],
|
||||
];
|
||||
if (index < default_colors.length) {
|
||||
var color_set = default_colors[index];
|
||||
} else {
|
||||
var color_set = [randInt(64, 196), randInt(64, 196), randInt(64, 196)];
|
||||
}
|
||||
return (
|
||||
"rgba(" +
|
||||
color_set[0] +
|
||||
", " +
|
||||
color_set[1] +
|
||||
", " +
|
||||
color_set[2] +
|
||||
", " +
|
||||
alpha +
|
||||
")"
|
||||
);
|
||||
}
|
||||
|
||||
export const prettyBytes = (bytes) => {
|
||||
let units = ["B", "KB", "MB", "GB", "PB"];
|
||||
let i = 0;
|
||||
|
Loading…
Reference in New Issue
Block a user