Proposal: widget types

js/src/lib/components/InferenceWidget/shared/WidgetExample.ts

@@ -12,83 +12,60 @@ export interface WidgetExampleOutputText {
 export interface WidgetExampleOutputUrl {
 	url: string;
 }
+
+export type WidgetExampleOutput =
+	| WidgetExampleOutputLabels
+	| WidgetExampleOutputAnswerScore
+	| WidgetExampleOutputText
+	| WidgetExampleOutputUrl;
 //#endregion
 
-export interface WidgetExampleBase {
+export interface WidgetExampleBase<TOutput> {
 	example_title?: string;
 	group?:         string;
+	output?:        TOutput;
 }
 
-export interface WidgetExampleTextInputLabelsOutput extends WidgetExampleBase {
-	text:    string;
-	output?: WidgetExampleOutputLabels;
+export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	text: string;
 }
 
-export interface WidgetExampleTextAndContextInputAnswerScoreOutput extends WidgetExampleBase {
+export interface WidgetExampleTextAndContextInput<TOutput> extends WidgetExampleBase<TOutput> {
 	text:    string;
 	context: string;
-	output?: WidgetExampleOutputAnswerScore;
-}
-
-export interface WidgetExampleTextInputTextOutput extends WidgetExampleBase {
-	text:    string;
-	output?: WidgetExampleOutputText;
-}
-
-export interface WidgetExampleTextInputUrlOutput extends WidgetExampleBase {
-	text:    string;
-	output?: WidgetExampleOutputUrl;
-}
-
-export interface WidgetExampleAssetInputLabelsOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputLabels;
 }
 
-export interface WidgetExampleAssetInputTextOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputText;
+export interface WidgetExampleAssetInput<TOutput> extends WidgetExampleBase<TOutput> {
+	src: string;
 }
 
-export interface WidgetExampleAssetInputUrlOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputUrl;
-}
-
-//#region more exotic stuff
-export interface WidgetExampleStructuredDataInputLabelsOutput extends WidgetExampleBase {
+export interface WidgetExampleStructuredDataInput<TOutput> extends WidgetExampleBase<TOutput> {
 	structuredData: TableData;
-	output?:        WidgetExampleOutputLabels;
 }
 
-export interface WidgetExampleTableDataInputLabelsOutput extends WidgetExampleBase {
-	table:   TableData;
-	output?: WidgetExampleOutputLabels;
+export interface WidgetExampleTableDataInput<TOutput> extends WidgetExampleBase<TOutput> {
+	table: TableData;
 }
 
-export interface WidgetExampleZeroShotTextInputLabelsOutput extends WidgetExampleBase {
+export interface WidgetExampleZeroShotTextInput<TOutput> extends WidgetExampleBase<TOutput> {
 	text:             string;
 	candidate_labels: string;
 	multi_class:      boolean;
-	output?:          WidgetExampleOutputLabels;
 }
 
-export interface WidgetExampleSentenceSimilarityInputLabelsOutput extends WidgetExampleBase {
+export interface WidgetExampleSentenceSimilarityInput<TOutput> extends WidgetExampleBase<TOutput> {
 	source_sentence: string;
 	sentences:       string[];
-	output?:         WidgetExampleOutputLabels;
 }
+
 //#endregion
 
 export type WidgetExample =
-	| WidgetExampleTextInputLabelsOutput
-	| WidgetExampleTextAndContextInputAnswerScoreOutput
-	| WidgetExampleTextInputTextOutput
-	| WidgetExampleTextInputUrlOutput
-	| WidgetExampleAssetInputLabelsOutput
-	| WidgetExampleAssetInputTextOutput
-	| WidgetExampleAssetInputUrlOutput
-	| WidgetExampleStructuredDataInputLabelsOutput
-	| WidgetExampleTableDataInputLabelsOutput
-	| WidgetExampleZeroShotTextInputLabelsOutput
-	| WidgetExampleSentenceSimilarityInputLabelsOutput;
+	| WidgetExampleTextInput<WidgetExampleOutput>
+	| WidgetExampleTextAndContextInput<WidgetExampleOutput>
+	| WidgetExampleTextInput<WidgetExampleOutput>
+	| WidgetExampleAssetInput<WidgetExampleOutput>
+	| WidgetExampleStructuredDataInput<WidgetExampleOutput>
+	| WidgetExampleTableDataInput<WidgetExampleOutput>
+	| WidgetExampleZeroShotTextInput<WidgetExampleOutput>
+	| WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>;

js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte

@@ -1,13 +1,11 @@
 <script lang="ts" generics="T extends WidgetExample">
-	import type { WidgetExample } from "../WidgetExample";
-
 	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";
 
 	export let classNames = "";
 	export let isLoading = false;
-	export let inputSamples: WidgetExample[];
+	export let inputSamples: T[];
 	export let applyInputSample: (sample: T) => void;
 	export let previewInputSample: (sample: T) => void;
 
@@ -25,12 +23,12 @@
 		hideOptions();
 		const sample = inputSamples[idx];
 		title = sample.example_title as string;
-		applyInputSample(sample as T);
+		applyInputSample(sample);
 	}
 
 	function _previewInputSample(idx: number) {
 		const sample = inputSamples[idx];
-		previewInputSample(sample as T);
+		previewInputSample(sample);
 	}
 
 	function toggleOptionsVisibility() {

js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInputLabelsOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -121,15 +121,15 @@
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInputLabelsOutput) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		file = null;
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInputLabelsOutput) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		if (isValidOutputLabels(sample.output)) {
@@ -169,7 +169,7 @@
 		<form>
 			<div class="flex flex-wrap items-center">
 				<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
-				<span class="mt-1.5 mr-2">or</span>
+				<span class="mr-2 mt-1.5">or</span>
 				<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
 			</div>
 			{#if fileUrl}

js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInputTextOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -123,15 +123,15 @@
 		throw new TypeError("Invalid output: output must be of type <text:string>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInputTextOutput) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
 		file = null;
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInputTextOutput) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		if (isValidOutputText(sample.output)) {

js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleTextInputLabelsOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -118,7 +118,7 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInputLabelsOutput) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
 		setTextAreaValue(sample.text);
 		if (isValidOutputLabels(sample.output)) {
 			output = sample.output;
@@ -127,7 +127,7 @@
 		}
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInputLabelsOutput) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}

js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInputLabelsOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -90,13 +90,13 @@
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInputLabelsOutput) {
+	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInputLabelsOutput) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		imgSrc = sample.src;
 		if (isValidOutputLabels(sample.output)) {
 			output = sample.output;

js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
-	import type { WidgetExampleStructuredDataInputLabelsOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleStructuredDataInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -25,7 +25,7 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
-	const widgetData = model?.widgetData?.[0] as WidgetExampleStructuredDataInputLabelsOutput | undefined;
+	const widgetData = model?.widgetData?.[0] as WidgetExampleStructuredDataInput<WidgetExampleOutputLabels> | undefined;
 	const columns: string[] = Object.keys(widgetData?.structuredData ?? {});
 
 	let computeTime = "";

js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
 	import type { PipelineType } from "../../../../interfaces/Types";
-	import type { WidgetExampleTextInputTextOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -164,7 +164,7 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInputTextOutput) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
 		setTextAreaValue(sample.text);
 		if (isValidOutputText(sample.output)) {
 			output = sample.output.text;
@@ -176,7 +176,7 @@
 		}
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInputTextOutput) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
 		setTextAreaValue(sample.text);
 		getOutput({ useCache });
 	}

js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleTextInputUrlOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput, WidgetExampleOutputUrl } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -102,7 +102,7 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInputUrlOutput) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
 		text = sample.text;
 		if (isValidOutputUrl(sample.output)) {
 			output = sample.output.url;
@@ -111,7 +111,7 @@
 		}
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInputUrlOutput) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
 		text = sample.text;
 		getOutput();
 	}