more changes

demo/kitchen_sink/run.py

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

frontend-svelte/package-lock.json

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

frontend-svelte/src/components/directory.js

@@ -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,
+    "checkbox": InputCheckbox,
-    "checkboxgroup": Dummy,
+    "checkboxgroup": InputCheckboxGroup,
     "dataframe": Dummy,
     "dropdown": InputDropdown,
     "file": InputFile,
     "image": InputImage,
     "number": InputNumber,
     "radio": InputRadio,
-    "slider": Dummy,
+    "slider": InputSlider,
-    "textbox": Dummy,
+    "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,

frontend-svelte/src/components/input/Checkbox.svelte

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

frontend-svelte/src/components/input/CheckboxGroup.svelte

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

frontend-svelte/src/components/input/Number.svelte

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

frontend-svelte/src/components/input/Slider.svelte

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

frontend-svelte/src/components/input/Textbox.svelte

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

frontend-svelte/src/components/output/HighlightedText.svelte

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

frontend-svelte/src/components/output/Label.svelte

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

frontend-svelte/src/components/utils/helpers.js

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