more changes

This commit is contained in:
Ali Abid 2022-01-11 15:08:27 -08:00
parent 3155488ed7
commit 5c0fc0148d
11 changed files with 405 additions and 7 deletions

View File

@ -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"),

View File

@ -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",

View File

@ -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,

View 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>

View 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>

View File

@ -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}
/>

View 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>

View 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>

View 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>

View 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>

View File

@ -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;