From cfc51268119af94b0fa1fa947994c9eeb2e474e9 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 12:58:38 +0000
Subject: [PATCH 01/12] wip

---
 .../InferenceWidget/shared/WidgetExample.ts   | 88 +++++++------------
 .../WidgetInputSamples.svelte                 |  8 +-
 .../AudioClassificationWidget.svelte          |  8 +-
 .../AutomaticSpeechRecognitionWidget.svelte   |  6 +-
 4 files changed, 44 insertions(+), 66 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index d642afd26..e9be9ef45 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -6,89 +6,67 @@ export interface WidgetExampleOutputAnswerScore {
 	answer: string;
 	score:  number;
 }
-export interface WidgetExampleOutputText {
+export interface WidgetExampleOutputText  {
 	text: string;
 }
-export interface WidgetExampleOutputUrl {
+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 WidgetExampleTextAndContextInputAnswerScoreOutput extends WidgetExampleBase {
-	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 WidgetExampleTextInput<TOutput> extends WidgetExampleBase<TOutput> {
+	text: string;
 }
 
-export interface WidgetExampleAssetInputTextOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputText;
+export interface WidgetExampleTextAndContextInput<TOutput> extends WidgetExampleBase<TOutput> {
+	text:     string;
+ 	context: string;
 }
 
-export interface WidgetExampleAssetInputUrlOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputUrl;
+export interface WidgetExampleAssetInput<TOutput > extends WidgetExampleBase<TOutput> {
+	src: string;
 }
 
-//#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;
+export type WidgetExample  =
+	| WidgetExampleTextInput<WidgetExampleOutput>
+	| WidgetExampleTextAndContextInput<WidgetExampleOutput>
+	| WidgetExampleTextInput<WidgetExampleOutput>
+	| WidgetExampleAssetInput<WidgetExampleOutput>
+	| WidgetExampleStructuredDataInput<WidgetExampleOutput>
+	| WidgetExampleTableDataInput<WidgetExampleOutput>
+	| WidgetExampleZeroShotTextInput<WidgetExampleOutput>
+	| WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>;
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index 59985626f..f422fdcfe 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -7,7 +7,7 @@
 
 	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;
 
@@ -16,7 +16,7 @@
 	let title = "Examples";
 
 	$: {
-		// reset title on inputSamples change (i.e. input group change)
+		// reset title on inputSamples change (i.e. input group change)s
 		inputSamples;
 		title = "Examples";
 	}
@@ -25,12 +25,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() {
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
index d7058a1b1..85e8d3494 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
+++ b/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,7 +121,7 @@
 		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;
@@ -129,7 +129,7 @@
 		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}
diff --git a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
index 48729fb70..2a3bf91a1 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
+++ b/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,7 +123,7 @@
 		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;
@@ -131,7 +131,7 @@
 		getOutput();
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInputTextOutput) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		if (isValidOutputText(sample.output)) {

From 8f98fa2e54ebb3cf10e972fac8c343404fa664f7 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 13:08:33 +0000
Subject: [PATCH 02/12] =?UTF-8?q?=F0=9F=A9=B9=20Fix=20types=20in=20widgets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/FillMaskWidget/FillMaskWidget.svelte            | 6 +++---
 .../ImageClassificationWidget.svelte                        | 6 +++---
 .../widgets/TabularDataWidget/TabularDataWidget.svelte      | 4 ++--
 .../TextGenerationWidget/TextGenerationWidget.svelte        | 6 +++---
 .../widgets/TextToImageWidget/TextToImageWidget.svelte      | 6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
index 80eb91ae9..ef0266baa 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
+++ b/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();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
index 57c82edee..7a858543b 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
+++ b/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;
diff --git a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
index b5cafd4b4..8eea2df62 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
+++ b/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 = "";
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
index 9cbe9298d..6fea9fcb4 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
+++ b/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 });
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
index cf95cfe5e..b4dc45cc4 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
+++ b/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();
 	}

From eff0b8b6ba2379fc351fb3c0ffb855c6ee7257a1 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 13:15:52 +0000
Subject: [PATCH 03/12] =?UTF-8?q?=F0=9F=A9=B9=20Minimize=20diff?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/components/InferenceWidget/shared/WidgetExample.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index e9be9ef45..e406cd056 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -6,10 +6,10 @@ export interface WidgetExampleOutputAnswerScore {
 	answer: string;
 	score:  number;
 }
-export interface WidgetExampleOutputText  {
+export interface WidgetExampleOutputText {
 	text: string;
 }
-export interface WidgetExampleOutputUrl  {
+export interface WidgetExampleOutputUrl {
 	url: string;
 }
 
@@ -27,7 +27,7 @@ export interface WidgetExampleBase<TOutput> {
 	output?:        TOutput;
 }
 
-export interface WidgetExampleTextInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
 	text: string;
 }
 

From 74f63a8758d8486125c93dbf4d94b855134a0456 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 13:17:43 +0000
Subject: [PATCH 04/12] =?UTF-8?q?=F0=9F=92=84=20Lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InferenceWidget/shared/WidgetExample.ts     | 17 ++++++++---------
 .../WidgetInputSamples.svelte                   |  2 --
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index e406cd056..b8194fc8d 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -20,7 +20,6 @@ export type WidgetExampleOutput =
 	| WidgetExampleOutputUrl;
 //#endregion
 
-
 export interface WidgetExampleBase<TOutput> {
 	example_title?: string;
 	group?:         string;
@@ -32,36 +31,36 @@ export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends W
 }
 
 export interface WidgetExampleTextAndContextInput<TOutput> extends WidgetExampleBase<TOutput> {
-	text:     string;
- 	context: string;
+	text:    string;
+	context: string;
 }
 
-export interface WidgetExampleAssetInput<TOutput > extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleAssetInput<TOutput> extends WidgetExampleBase<TOutput> {
 	src: string;
 }
 
-export interface WidgetExampleStructuredDataInput<TOutput > extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleStructuredDataInput<TOutput> extends WidgetExampleBase<TOutput> {
 	structuredData: TableData;
 }
 
-export interface WidgetExampleTableDataInput<TOutput > extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleTableDataInput<TOutput> extends WidgetExampleBase<TOutput> {
 	table: TableData;
 }
 
-export interface WidgetExampleZeroShotTextInput<TOutput > extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleZeroShotTextInput<TOutput> extends WidgetExampleBase<TOutput> {
 	text:             string;
 	candidate_labels: string;
 	multi_class:      boolean;
 }
 
-export interface WidgetExampleSentenceSimilarityInput<TOutput > extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleSentenceSimilarityInput<TOutput> extends WidgetExampleBase<TOutput> {
 	source_sentence: string;
 	sentences:       string[];
 }
 
 //#endregion
 
-export type WidgetExample  =
+export type WidgetExample =
 	| WidgetExampleTextInput<WidgetExampleOutput>
 	| WidgetExampleTextAndContextInput<WidgetExampleOutput>
 	| WidgetExampleTextInput<WidgetExampleOutput>
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index f422fdcfe..da0399a1f 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,6 +1,4 @@
 <script lang="ts" generics="T extends WidgetExample">
-	import type { WidgetExample } from "../WidgetExample";
-
 	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";

From ad29faeb2b9d8cdfd60c9537cd5dd047044cfb9d Mon Sep 17 00:00:00 2001
From: Simon Brandeis <33657802+SBrandeis@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:08:28 +0200
Subject: [PATCH 05/12] Update
 js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte

Co-authored-by: Julien Chaumond <julien@huggingface.co>
---
 .../shared/WidgetInputSamples/WidgetInputSamples.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index da0399a1f..c18458af7 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -14,7 +14,7 @@
 	let title = "Examples";
 
 	$: {
-		// reset title on inputSamples change (i.e. input group change)s
+		// reset title on inputSamples change (i.e. input group change)
 		inputSamples;
 		title = "Examples";
 	}

From e232040b7f021b8564b105df18fc06313fc6883f Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 13:24:01 +0000
Subject: [PATCH 06/12] =?UTF-8?q?=F0=9F=A7=B9=20cleanup=20unwanted=20chang?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/src/lib/components/InferenceWidget/shared/WidgetExample.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index b8194fc8d..a92c5e7dc 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -26,7 +26,7 @@ export interface WidgetExampleBase<TOutput> {
 	output?:        TOutput;
 }
 
-export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleTextInput<TOutput> extends WidgetExampleBase<TOutput> {
 	text: string;
 }
 

From d1b38afaca6da28409dc887e3ccbf9ccc1328135 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 14:29:58 +0000
Subject: [PATCH 07/12] =?UTF-8?q?=F0=9F=A9=B9=20wip:=20type=20safety?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InferenceWidget/shared/WidgetExample.ts    | 18 +++++++++---------
 .../WidgetInputSamples.svelte                  |  5 ++++-
 .../shared/WidgetWrapper/WidgetWrapper.svelte  | 14 ++++++++++----
 .../AudioClassificationWidget.svelte           |  7 ++++++-
 .../AutomaticSpeechRecognitionWidget.svelte    |  7 ++++++-
 .../FillMaskWidget/FillMaskWidget.svelte       |  7 ++++++-
 6 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index a92c5e7dc..c5b7788a3 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -60,12 +60,12 @@ export interface WidgetExampleSentenceSimilarityInput<TOutput> extends WidgetExa
 
 //#endregion
 
-export type WidgetExample =
-	| WidgetExampleTextInput<WidgetExampleOutput>
-	| WidgetExampleTextAndContextInput<WidgetExampleOutput>
-	| WidgetExampleTextInput<WidgetExampleOutput>
-	| WidgetExampleAssetInput<WidgetExampleOutput>
-	| WidgetExampleStructuredDataInput<WidgetExampleOutput>
-	| WidgetExampleTableDataInput<WidgetExampleOutput>
-	| WidgetExampleZeroShotTextInput<WidgetExampleOutput>
-	| WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>;
+export type WidgetExample<TOutput = WidgetExampleOutput> =
+	| WidgetExampleTextInput<TOutput>
+	| WidgetExampleTextAndContextInput<TOutput>
+	| WidgetExampleTextInput<TOutput>
+	| WidgetExampleAssetInput<TOutput>
+	| WidgetExampleStructuredDataInput<TOutput>
+	| WidgetExampleTableDataInput<TOutput>
+	| WidgetExampleZeroShotTextInput<TOutput>
+	| WidgetExampleSentenceSimilarityInput<TOutput>;
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index c18458af7..be6062889 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,4 +1,7 @@
-<script lang="ts" generics="T extends WidgetExample">
+<script lang="ts">
+	import type { WidgetExample } from "../WidgetExample";
+	type T = $$Generic<WidgetExample>;
+
 	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
index 4a4de0d18..d87ddb949 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
@@ -1,6 +1,7 @@
-<script lang="ts" generics="T extends WidgetExample">
+<script lang="ts">
 	import type { WidgetProps, ModelLoadInfo } from "../types";
 	import type { WidgetExample } from "../WidgetExample";
+	type T = $$Generic<WidgetExample>;
 
 	import { onMount } from "svelte";
 
@@ -28,12 +29,14 @@
 	export let outputJson: string;
 	export let applyInputSample: (sample: T) => void = () => {};
 	export let previewInputSample: (sample: T) => void = () => {};
+	export let validateExample: (sample: WidgetExample) => sample is T;
 
 	let isMaximized = false;
 	let modelLoadInfo: ModelLoadInfo | undefined = undefined;
 	let selectedInputGroup: string;
 
-	const inputSamples: WidgetExample[] = (model.widgetData ?? [])
+	const inputSamples = (model.widgetData ?? [])
+		.filter(validateExample)
 		.sort((sample1, sample2) => (sample2.example_title ? 1 : 0) - (sample1.example_title ? 1 : 0))
 		.map((sample, idx) => ({
 			example_title: `Example ${++idx}`,
@@ -41,7 +44,10 @@
 			...sample,
 		}));
 
-	const inputGroups: { group: string; inputSamples: WidgetExample[] }[] = [];
+	const inputGroups: {
+		group: string;
+		inputSamples: T[];
+	}[] = [];
 	for (const inputSample of inputSamples) {
 		const isExist = inputGroups.find(({ group }) => group === inputSample.group);
 		if (!isExist) {
@@ -80,7 +86,7 @@
 		</p>
 	{:else}
 		{#if isMaximized}
-			<button class="absolute top-6 right-12" on:click={onClickMaximizeBtn}>
+			<button class="absolute right-12 top-6" on:click={onClickMaximizeBtn}>
 				<IconCross classNames="text-xl text-gray-500 hover:text-black" />
 			</button>
 		{/if}
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
index 85e8d3494..1f59d2403 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -141,6 +141,10 @@
 		}
 	}
 
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
+		return "src" in sample;
+	}
+
 	onMount(() => {
 		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
 		if (callApiOnMount && src) {
@@ -164,6 +168,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
index 2a3bf91a1..538ccd9b9 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -147,6 +147,10 @@
 		modelLoading = { isLoading, estimatedTime };
 	}
 
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputText> {
+		return "src" in sample;
+	}
+
 	onMount(() => {
 		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
 		if (callApiOnMount && src) {
@@ -170,6 +174,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
index ef0266baa..31088719b 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleTextInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput, WidgetExampleOutputLabels, WidgetExample } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -131,6 +131,10 @@
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
+
+	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputLabels> {
+		return "text" in sample;
+	}
 </script>
 
 <WidgetWrapper
@@ -145,6 +149,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>

From 921589653961efde555fddf10353224b220f1554 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 15:50:16 +0000
Subject: [PATCH 08/12] =?UTF-8?q?=E2=9C=A8=20Typing=20&=20validation=20for?=
 =?UTF-8?q?=20ALL=20widgets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InferenceWidget/shared/WidgetExample.ts   | 23 ++++-
 .../WidgetInputSamples.svelte                 |  9 +-
 .../shared/WidgetWrapper/WidgetWrapper.svelte | 11 ++-
 .../InferenceWidget/shared/inputValidation.ts | 87 +++++++++++++++++++
 .../AudioClassificationWidget.svelte          |  3 +-
 .../AudioToAudioWidget.svelte                 | 13 +--
 .../AutomaticSpeechRecognitionWidget.svelte   |  3 +-
 .../ConversationalWidget.svelte               |  7 +-
 .../FeatureExtractionWidget.svelte            | 11 ++-
 .../FillMaskWidget/FillMaskWidget.svelte      |  3 +-
 .../ImageClassificationWidget.svelte          |  8 +-
 .../ImageSegmentationWidget.svelte            |  9 +-
 .../ImageToImageWidget.svelte                 |  9 +-
 .../ImageToTextWidget.svelte                  |  7 +-
 .../ObjectDetectionWidget.svelte              |  7 +-
 .../QuestionAnsweringWidget.svelte            | 17 +++-
 .../SentenceSimilarityWidget.svelte           |  7 +-
 .../SummarizationWidget.svelte                |  7 +-
 .../TableQuestionAnsweringWidget.svelte       |  9 +-
 .../TabularDataWidget.svelte                  | 12 ++-
 .../TextGenerationWidget.svelte               | 10 ++-
 .../TextToImageWidget.svelte                  | 10 ++-
 .../TextToSpeechWidget.svelte                 |  7 +-
 .../TokenClassificationWidget.svelte          |  7 +-
 .../VisualQuestionAnsweringWidget.svelte      |  9 +-
 .../ZeroShotImageClassificationWidget.svelte  |  9 +-
 .../ZeroShotClassificationWidget.svelte       |  7 +-
 27 files changed, 258 insertions(+), 63 deletions(-)
 create mode 100644 js/src/lib/components/InferenceWidget/shared/inputValidation.ts

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index c5b7788a3..9cbf407c6 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -30,14 +30,26 @@ export interface WidgetExampleTextInput<TOutput> extends WidgetExampleBase<TOutp
 	text: string;
 }
 
-export interface WidgetExampleTextAndContextInput<TOutput> extends WidgetExampleBase<TOutput> {
-	text:    string;
+export interface WidgetExampleTextAndContextInput<TOutput> extends WidgetExampleTextInput<TOutput> {
 	context: string;
 }
 
+export interface WidgetExampleTextAndTableInput<TOutput> extends WidgetExampleTextInput<TOutput> {
+	table: (string | number)[][];
+}
+
 export interface WidgetExampleAssetInput<TOutput> extends WidgetExampleBase<TOutput> {
 	src: string;
 }
+export interface WidgetExampleAssetAndPromptInput<TOutput> extends WidgetExampleAssetInput<TOutput> {
+	prompt: string;
+}
+
+export type WidgetExampleAssetAndTextInput<TOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleTextInput<TOutput>;
+
+export type WidgetExampleAssetAndZeroShotInput<TOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleZeroShotTextInput<TOutput>;
 
 export interface WidgetExampleStructuredDataInput<TOutput> extends WidgetExampleBase<TOutput> {
 	structuredData: TableData;
@@ -47,7 +59,7 @@ export interface WidgetExampleTableDataInput<TOutput> extends WidgetExampleBase<
 	table: TableData;
 }
 
-export interface WidgetExampleZeroShotTextInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleZeroShotTextInput<TOutput> extends WidgetExampleTextInput<TOutput> {
 	text:             string;
 	candidate_labels: string;
 	multi_class:      boolean;
@@ -63,8 +75,11 @@ export interface WidgetExampleSentenceSimilarityInput<TOutput> extends WidgetExa
 export type WidgetExample<TOutput = WidgetExampleOutput> =
 	| WidgetExampleTextInput<TOutput>
 	| WidgetExampleTextAndContextInput<TOutput>
-	| WidgetExampleTextInput<TOutput>
+	| WidgetExampleTextAndTableInput<TOutput>
 	| WidgetExampleAssetInput<TOutput>
+	| WidgetExampleAssetAndPromptInput<TOutput>
+	| WidgetExampleAssetAndTextInput<TOutput>
+	| WidgetExampleAssetAndZeroShotInput<TOutput>
 	| WidgetExampleStructuredDataInput<TOutput>
 	| WidgetExampleTableDataInput<TOutput>
 	| WidgetExampleZeroShotTextInput<TOutput>
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index be6062889..97208115b 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,6 +1,5 @@
-<script lang="ts">
+<script lang="ts" generics="TWidgetExample extends WidgetExample">
 	import type { WidgetExample } from "../WidgetExample";
-	type T = $$Generic<WidgetExample>;
 
 	import { slide } from "svelte/transition";
 
@@ -8,9 +7,9 @@
 
 	export let classNames = "";
 	export let isLoading = false;
-	export let inputSamples: T[];
-	export let applyInputSample: (sample: T) => void;
-	export let previewInputSample: (sample: T) => void;
+	export let inputSamples: TWidgetExample[];
+	export let applyInputSample: (sample: TWidgetExample) => void;
+	export let previewInputSample: (sample: TWidgetExample) => void;
 
 	let containerEl: HTMLElement;
 	let isOptionsVisible = false;
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
index d87ddb949..84fff5fed 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
@@ -1,7 +1,6 @@
-<script lang="ts">
+<script lang="ts" generics="TWidgetExample extends WidgetExample">
 	import type { WidgetProps, ModelLoadInfo } from "../types";
 	import type { WidgetExample } from "../WidgetExample";
-	type T = $$Generic<WidgetExample>;
 
 	import { onMount } from "svelte";
 
@@ -27,9 +26,9 @@
 	};
 	export let noTitle = false;
 	export let outputJson: string;
-	export let applyInputSample: (sample: T) => void = () => {};
-	export let previewInputSample: (sample: T) => void = () => {};
-	export let validateExample: (sample: WidgetExample) => sample is T;
+	export let applyInputSample: (sample: TWidgetExample) => void = () => {};
+	export let previewInputSample: (sample: TWidgetExample) => void = () => {};
+	export let validateExample: (sample: WidgetExample) => sample is TWidgetExample;
 
 	let isMaximized = false;
 	let modelLoadInfo: ModelLoadInfo | undefined = undefined;
@@ -46,7 +45,7 @@
 
 	const inputGroups: {
 		group: string;
-		inputSamples: T[];
+		inputSamples: TWidgetExample[];
 	}[] = [];
 	for (const inputSample of inputSamples) {
 		const isExist = inputGroups.find(({ group }) => group === inputSample.group);
diff --git a/js/src/lib/components/InferenceWidget/shared/inputValidation.ts b/js/src/lib/components/InferenceWidget/shared/inputValidation.ts
new file mode 100644
index 000000000..f4b0e8afc
--- /dev/null
+++ b/js/src/lib/components/InferenceWidget/shared/inputValidation.ts
@@ -0,0 +1,87 @@
+import type {
+	WidgetExample,
+	WidgetExampleAssetAndPromptInput,
+	WidgetExampleAssetAndTextInput,
+	WidgetExampleAssetAndZeroShotInput,
+	WidgetExampleAssetInput,
+	WidgetExampleSentenceSimilarityInput,
+	WidgetExampleStructuredDataInput,
+	WidgetExampleTableDataInput,
+	WidgetExampleTextAndContextInput,
+	WidgetExampleTextAndTableInput,
+	WidgetExampleTextInput,
+	WidgetExampleZeroShotTextInput,
+} from "./WidgetExample";
+
+export function isTextInput<TOutput>(sample: WidgetExample<TOutput>): sample is WidgetExampleTextInput<TOutput> {
+	return "text" in sample;
+}
+
+export function isTextAndContextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleTextAndContextInput<TOutput> {
+	return isTextInput(sample) && "context" in sample;
+}
+
+export function isAssetInput<TOutput>(sample: WidgetExample<TOutput>): sample is WidgetExampleAssetInput<TOutput> {
+	return "src" in sample;
+}
+
+export function isAssetAndPromptInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleAssetAndPromptInput<TOutput> {
+	return isAssetInput(sample) && "prompt" in sample && typeof sample.prompt === "string";
+}
+
+export function isAssetAndTextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleAssetAndTextInput<TOutput> {
+	return isAssetInput(sample) && isTextInput(sample);
+}
+
+export function isStructuredDataInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleStructuredDataInput<TOutput> {
+	return "structuredData" in sample;
+}
+
+export function isTableDataInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleTableDataInput<TOutput> {
+	return "table" in sample;
+}
+
+function _isZeroShotTextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is Exclude<WidgetExampleZeroShotTextInput<TOutput>, "text"> {
+	return "candidate_labels" in sample && "multi_class" in sample;
+}
+
+export function isZeroShotTextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleZeroShotTextInput<TOutput> {
+	return isTextInput(sample) && _isZeroShotTextInput(sample);
+}
+
+export function isSentenceSimilarityInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleSentenceSimilarityInput<TOutput> {
+	return "source_sentence" in sample && "sentences" in sample;
+}
+
+export function isTextAndTableInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleTextAndTableInput<TOutput> {
+	return (
+		isTextInput(sample)
+		&& "table" in sample
+		&& Array.isArray(sample.table)
+		&& sample.table.every(r => Array.isArray(r) && r.every(c => typeof c === "string" || typeof c === "number"))
+	);
+}
+
+export function isAssetAndZeroShotInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleAssetAndZeroShotInput<TOutput> {
+	return isAssetInput(sample) && _isZeroShotTextInput(sample);
+}
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
index 1f59d2403..7a5396e06 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
@@ -12,6 +12,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -142,7 +143,7 @@
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
-		return "src" in sample;
+		return isAssetInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
 	}
 
 	onMount(() => {
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
index 9127ebb47..f5c87bdde 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleAssetInput, WidgetExampleOutput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,6 +10,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -124,16 +126,16 @@
 		throw new TypeError("Invalid output: output must be of type Array<blob:string, label:string, content-type:string>");
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		file = null;
-		filename = sample.example_title;
+		filename = sample.example_title ?? "";
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
-		filename = sample.example_title;
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+		filename = sample.example_title ?? "";
 		fileUrl = sample.src;
 		output = [];
 		outputJson = "";
@@ -162,12 +164,13 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
 		<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}
diff --git a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
index 538ccd9b9..339a1e7d3 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
@@ -13,6 +13,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
 	import { isValidOutputText } from "../../shared/outputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -148,7 +149,7 @@
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputText> {
-		return "src" in sample;
+		return isAssetInput(sample) && (!sample.output || isValidOutputText(sample.output));
 	}
 
 	onMount(() => {
diff --git a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
index abc1f2882..f013fd82a 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -7,6 +8,7 @@
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
+import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -152,11 +154,11 @@
 		);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		text = sample.text;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		text = sample.text;
 		getOutput();
 	}
@@ -174,6 +176,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isTextInput}
 >
 	<svelte:fragment slot="top">
 		<WidgetOutputConvo modelId={model.id} {output} />
diff --git a/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
index 57f82c59c..3eb6a6ef1 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
+import { isTextInput } from "../../shared/inputValidation";
 
 	import { DataTable } from "./DataTable";
 
@@ -120,11 +122,11 @@
 		return Math.ceil(total_elems / SINGLE_DIM_COLS);
 	};
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		text = sample.text;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		text = sample.text;
 		getOutput();
 	}
@@ -142,6 +144,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isTextInput}
 >
 	<svelte:fragment slot="top">
 		<form>
@@ -166,7 +169,7 @@
 										<td class="bg-gray-100 px-1 text-gray-400 dark:bg-gray-900">
 											{j * numOfRows(output.oneDim.length) + i}
 										</td>
-										<td class="py-0.5 px-1 {output.bg(output.oneDim[j * numOfRows(output.oneDim.length) + i])}">
+										<td class="px-1 py-0.5 {output.bg(output.oneDim[j * numOfRows(output.oneDim.length) + i])}">
 											{output.oneDim[j * numOfRows(output.oneDim.length) + i].toFixed(3)}
 										</td>
 									{/if}
@@ -188,7 +191,7 @@
 							<tr>
 								<td class="bg-gray-100 pl-4 pr-1 text-gray-400 dark:bg-gray-900">{i}</td>
 								{#each column as x}
-									<td class="py-1 px-1 {output.bg(x)}">
+									<td class="px-1 py-1 {output.bg(x)}">
 										{x.toFixed(3)}
 									</td>
 								{/each}
diff --git a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
index 31088719b..8cda05bce 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
@@ -10,6 +10,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -133,7 +134,7 @@
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputLabels> {
-		return "text" in sample;
+		return isTextInput(sample) && (!output || isValidOutputLabels(sample.output));
 	}
 </script>
 
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
index 7a858543b..eb6ee69c6 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +10,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -107,6 +108,10 @@
 		}
 	}
 
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
+		return isTextInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
+	}
+
 	onMount(() => {
 		(async () => {
 			const [src] = getDemoInputs(model, ["src"]);
@@ -131,6 +136,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
index 17057115b..566fca285 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps, ImageSegment } from "../../shared/types";
+	import type {
+		WidgetExampleAssetInput,
+		WidgetExampleOutput} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +13,7 @@
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
+import { isAssetInput } from "../../shared/inputValidation";
 
 	import Canvas from "./Canvas.svelte";
 
@@ -204,13 +208,13 @@
 		};
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		imgSrc = sample.src;
 		output = [];
 		outputJson = "";
@@ -244,6 +248,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
index 0ea50e0b8..e14fa9719 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type {
+		WidgetExampleAssetAndPromptInput,
+		WidgetExampleOutput} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,6 +12,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
+import { isAssetAndPromptInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -61,12 +65,12 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetAndPromptInput<WidgetExampleOutput>) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput<WidgetExampleOutput>) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
@@ -156,6 +160,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetAndPromptInput}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
index 892f3b946..547ba0e8e 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleAssetInput, WidgetExampleOutput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +9,7 @@
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -89,13 +91,13 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		imgSrc = sample.src;
 		output = "";
 		outputJson = "";
@@ -125,6 +127,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
index f36caac98..c7e731579 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, DetectedObject } from "../../shared/types";
+	import type { WidgetExampleAssetInput, WidgetExampleOutput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +11,7 @@
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+import { isAssetInput } from "../../shared/inputValidation";
 
 	import BoundingBoxes from "./SvgBoundingBoxes.svelte";
 
@@ -125,13 +127,13 @@
 		highlightIndex = index;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
 		imgSrc = sample.src;
 		output = [];
 		outputJson = "";
@@ -161,6 +163,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
index d1ce7d0bb..c96e7fdcd 100644
--- a/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type {
+		WidgetExample,
+		WidgetExampleOutputAnswerScore,
+		WidgetExampleTextAndContextInput,
+	} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +13,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
 	import { isValidOutputAnswerScore } from "../../shared/outputValidation";
+	import { isTextAndContextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -116,16 +122,22 @@
 		throw new TypeError("Invalid output: output must be of type <answer:string; score:number>");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>) {
 		question = sample.text;
 		setTextAreaValue(sample.context);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>) {
 		question = sample.text;
 		setTextAreaValue(sample.context);
 		getOutput();
 	}
+
+	function validateExample(
+		sample: WidgetExample
+	): sample is WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore> {
+		return isTextAndContextInput(sample) && (!sample.output || isValidOutputAnswerScore(sample.output));
+	}
 </script>
 
 <WidgetWrapper
@@ -140,6 +152,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
index 7d3f94884..b6629f301 100644
--- a/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleSentenceSimilarityInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,6 +10,7 @@
 	import WidgetTextInput from "../../shared/WidgetTextInput/WidgetTextInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
+import { isSentenceSimilarityInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -117,13 +119,13 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
@@ -153,6 +155,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isSentenceSimilarityInput}
 >
 	<svelte:fragment slot="top">
 		<form class="flex flex-col space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
index f1bbdfffc..4301adb25 100644
--- a/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +9,7 @@
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
+import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -103,11 +105,11 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
@@ -125,6 +127,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isTextInput}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
index ba8c8361c..1f8fa512b 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
+	import type {
+		WidgetExampleOutput,
+		WidgetExampleTextAndTableInput} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -17,6 +20,7 @@
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
+import { isTextAndTableInput } from "../../shared/inputValidation";
 	interface Output {
 		aggregator?: string;
 		answer: string;
@@ -157,12 +161,12 @@
 		);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextAndTableInput<WidgetExampleOutput>) {
 		query = sample.text;
 		table = sample.table;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextAndTableInput<WidgetExampleOutput>) {
 		query = sample.text;
 		table = sample.table;
 		getOutput();
@@ -181,6 +185,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isTextAndTableInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
index 8eea2df62..278dff93d 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
-	import type { WidgetExampleStructuredDataInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
+	import type {
+		WidgetExampleStructuredDataInput,
+		WidgetExampleOutputLabels,
+		WidgetExampleOutput,
+	} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -16,6 +20,7 @@
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
+	import { isStructuredDataInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -179,11 +184,11 @@
 		}, {});
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleStructuredDataInput<WidgetExampleOutput>) {
 		table = convertDataToTable(sample.structuredData);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleStructuredDataInput<WidgetExampleOutput>) {
 		table = convertDataToTable(sample.structuredData);
 		getOutput();
 	}
@@ -201,6 +206,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isStructuredDataInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
index 6fea9fcb4..eec33daa1 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
+++ b/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 { WidgetExampleTextInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput, WidgetExampleOutputText, WidgetExample } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -14,6 +14,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
 	import { isValidOutputText } from "../../shared/outputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -166,7 +167,7 @@
 
 	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
 		setTextAreaValue(sample.text);
-		if (isValidOutputText(sample.output)) {
+		if (sample.output) {
 			output = sample.output.text;
 			outputJson = "";
 			renderTypingEffect(output);
@@ -181,6 +182,10 @@
 		getOutput({ useCache });
 	}
 
+	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputText> {
+		return isTextInput(sample) && (!sample.output || isValidOutputText(sample.output));
+	}
+
 	function redirectLogin() {
 		window.location.href = `/login?next=${encodeURIComponent(window.location.href)}`;
 	}
@@ -202,6 +207,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
index b4dc45cc4..60da9dc27 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleTextInput, WidgetExampleOutputUrl } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput, WidgetExampleOutputUrl, WidgetExample } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +8,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
 	import { isValidOutputUrl } from "../../shared/outputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -104,7 +105,7 @@
 
 	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
 		text = sample.text;
-		if (isValidOutputUrl(sample.output)) {
+		if (sample.output) {
 			output = sample.output.url;
 		} else {
 			output = "";
@@ -115,6 +116,10 @@
 		text = sample.text;
 		getOutput();
 	}
+
+	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputUrl> {
+		return isTextInput(sample) && (!sample.output || isValidOutputUrl(sample.output));
+	}
 </script>
 
 <WidgetWrapper
@@ -129,6 +134,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
index f266a0c43..e7800d3ba 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +9,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
+import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -102,11 +104,11 @@
 		throw new TypeError("Invalid output: output must be of type object & instance of Blob");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
@@ -124,6 +126,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isTextInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
index d04eee31b..ac9a730f7 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +9,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	interface EntityGroup {
 		entity_group: string;
@@ -222,11 +224,11 @@
 		return a.type === b.type && a.start === b.start && a.end === b.end;
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
@@ -244,6 +246,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isTextInput}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
index d8b2557ca..a1b02f4cf 100644
--- a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type {
+		WidgetExampleAssetAndTextInput,
+		WidgetExampleOutput} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,6 +12,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
+import { isAssetAndTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -65,12 +69,12 @@
 		throw new TypeError("Invalid output: output must be of type Array<answer: string, score:number>");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetAndTextInput<WidgetExampleOutput>) {
 		question = sample.text;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndTextInput<WidgetExampleOutput>) {
 		question = sample.text;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
@@ -164,6 +168,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetAndTextInput}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
index f34c69e35..a788e6c03 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type {
+		WidgetExampleAssetAndZeroShotInput,
+		WidgetExampleOutput} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +13,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import { addInferenceParameters, getResponse, getDemoInputs } from "../../shared/helpers";
+import { isAssetAndZeroShotInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -66,12 +70,12 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetAndZeroShotInput<WidgetExampleOutput>) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput<WidgetExampleOutput>) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
@@ -168,6 +172,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isAssetAndZeroShotInput}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
index 63b67a858..6ef339938 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleOutput, WidgetExampleZeroShotTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +11,7 @@
 	import WidgetTextInput from "../../shared/WidgetTextInput/WidgetTextInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
+	import { isZeroShotTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -147,13 +149,13 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleZeroShotTextInput<WidgetExampleOutput>) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleZeroShotTextInput<WidgetExampleOutput>) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);
@@ -173,6 +175,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	validateExample={isZeroShotTextInput}
 >
 	<svelte:fragment slot="top">
 		<form class="flex flex-col space-y-2">

From 0540005faac2cb66ec781209b4a6ad5cc307c688 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 15:56:54 +0000
Subject: [PATCH 09/12] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Slightly=20less=20ve?=
 =?UTF-8?q?rbose=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InferenceWidget/shared/WidgetExample.ts   | 25 +++++++++++--------
 .../WidgetInputSamples.svelte                 |  5 ++--
 .../AudioToAudioWidget.svelte                 |  8 +++---
 .../ConversationalWidget.svelte               |  8 +++---
 .../FeatureExtractionWidget.svelte            |  8 +++---
 .../FillMaskWidget/FillMaskWidget.svelte      |  2 +-
 .../ImageSegmentationWidget.svelte            | 10 +++-----
 .../ImageToImageWidget.svelte                 | 10 +++-----
 .../ImageToTextWidget.svelte                  |  8 +++---
 .../ObjectDetectionWidget.svelte              |  8 +++---
 .../SentenceSimilarityWidget.svelte           |  8 +++---
 .../SummarizationWidget.svelte                |  8 +++---
 .../TableQuestionAnsweringWidget.svelte       | 10 +++-----
 .../TabularDataWidget.svelte                  |  5 ++--
 .../TextToSpeechWidget.svelte                 |  8 +++---
 .../TokenClassificationWidget.svelte          |  6 ++---
 .../VisualQuestionAnsweringWidget.svelte      | 10 +++-----
 .../ZeroShotImageClassificationWidget.svelte  | 10 +++-----
 .../ZeroShotClassificationWidget.svelte       |  6 ++---
 19 files changed, 77 insertions(+), 86 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index 9cbf407c6..4b43c9ead 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -26,46 +26,49 @@ export interface WidgetExampleBase<TOutput> {
 	output?:        TOutput;
 }
 
-export interface WidgetExampleTextInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
 	text: string;
 }
 
-export interface WidgetExampleTextAndContextInput<TOutput> extends WidgetExampleTextInput<TOutput> {
+export interface WidgetExampleTextAndContextInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleTextInput<TOutput> {
 	context: string;
 }
 
-export interface WidgetExampleTextAndTableInput<TOutput> extends WidgetExampleTextInput<TOutput> {
+export interface WidgetExampleTextAndTableInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
 	table: (string | number)[][];
 }
 
-export interface WidgetExampleAssetInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleAssetInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
 	src: string;
 }
-export interface WidgetExampleAssetAndPromptInput<TOutput> extends WidgetExampleAssetInput<TOutput> {
+export interface WidgetExampleAssetAndPromptInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleAssetInput<TOutput> {
 	prompt: string;
 }
 
-export type WidgetExampleAssetAndTextInput<TOutput> = WidgetExampleAssetInput<TOutput> &
+export type WidgetExampleAssetAndTextInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
 	WidgetExampleTextInput<TOutput>;
 
-export type WidgetExampleAssetAndZeroShotInput<TOutput> = WidgetExampleAssetInput<TOutput> &
+export type WidgetExampleAssetAndZeroShotInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
 	WidgetExampleZeroShotTextInput<TOutput>;
 
-export interface WidgetExampleStructuredDataInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleStructuredDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
 	structuredData: TableData;
 }
 
-export interface WidgetExampleTableDataInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleTableDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
 	table: TableData;
 }
 
-export interface WidgetExampleZeroShotTextInput<TOutput> extends WidgetExampleTextInput<TOutput> {
+export interface WidgetExampleZeroShotTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
 	text:             string;
 	candidate_labels: string;
 	multi_class:      boolean;
 }
 
-export interface WidgetExampleSentenceSimilarityInput<TOutput> extends WidgetExampleBase<TOutput> {
+export interface WidgetExampleSentenceSimilarityInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleBase<TOutput> {
 	source_sentence: string;
 	sentences:       string[];
 }
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index 97208115b..f5aed09a8 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,7 +1,6 @@
 <script lang="ts" generics="TWidgetExample extends WidgetExample">
-	import type { WidgetExample } from "../WidgetExample";
-
-	import { slide } from "svelte/transition";
+	
+import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";
 
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
index f5c87bdde..21b698541 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInput, WidgetExampleOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,7 +10,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
-import { isAssetInput } from "../../shared/inputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -126,7 +126,7 @@ import { isAssetInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type Array<blob:string, label:string, content-type:string>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleAssetInput) {
 		file = null;
 		filename = sample.example_title ?? "";
 		fileUrl = sample.src;
@@ -134,7 +134,7 @@ import { isAssetInput } from "../../shared/inputValidation";
 		getOutput();
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		filename = sample.example_title ?? "";
 		fileUrl = sample.src;
 		output = [];
diff --git a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
index f013fd82a..c7161de0a 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,7 +8,7 @@
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
-import { isTextInput } from "../../shared/inputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -154,11 +154,11 @@ import { isTextInput } from "../../shared/inputValidation";
 		);
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleTextInput) {
 		text = sample.text;
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		text = sample.text;
 		getOutput();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
index 3eb6a6ef1..223c104e8 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
-import { isTextInput } from "../../shared/inputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	import { DataTable } from "./DataTable";
 
@@ -122,11 +122,11 @@ import { isTextInput } from "../../shared/inputValidation";
 		return Math.ceil(total_elems / SINGLE_DIM_COLS);
 	};
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleTextInput) {
 		text = sample.text;
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		text = sample.text;
 		getOutput();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
index 8cda05bce..08c16186d 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
@@ -121,7 +121,7 @@
 
 	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
 		setTextAreaValue(sample.text);
-		if (isValidOutputLabels(sample.output)) {
+		if (sample.output) {
 			output = sample.output;
 		} else {
 			output = [];
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
index 566fca285..a607273e7 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, ImageSegment } from "../../shared/types";
-	import type {
-		WidgetExampleAssetInput,
-		WidgetExampleOutput} from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -13,7 +11,7 @@
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-import { isAssetInput } from "../../shared/inputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	import Canvas from "./Canvas.svelte";
 
@@ -208,13 +206,13 @@ import { isAssetInput } from "../../shared/inputValidation";
 		};
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		output = [];
 		outputJson = "";
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
index e14fa9719..84be41a03 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type {
-		WidgetExampleAssetAndPromptInput,
-		WidgetExampleOutput} from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetAndPromptInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -12,7 +10,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
-import { isAssetAndPromptInput } from "../../shared/inputValidation";
+	import { isAssetAndPromptInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -65,12 +63,12 @@ import { isAssetAndPromptInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetAndPromptInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetAndPromptInput) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput<WidgetExampleOutput>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
index 547ba0e8e..b33f81d23 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleAssetInput, WidgetExampleOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,7 +9,7 @@
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
-import { isAssetInput } from "../../shared/inputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -91,13 +91,13 @@ import { isAssetInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		output = "";
 		outputJson = "";
diff --git a/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
index c7e731579..cc44a0f7a 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, DetectedObject } from "../../shared/types";
-	import type { WidgetExampleAssetInput, WidgetExampleOutput } from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -11,7 +11,7 @@
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
-import { isAssetInput } from "../../shared/inputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	import BoundingBoxes from "./SvgBoundingBoxes.svelte";
 
@@ -127,13 +127,13 @@ import { isAssetInput } from "../../shared/inputValidation";
 		highlightIndex = index;
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		output = [];
 		outputJson = "";
diff --git a/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
index b6629f301..a08755c22 100644
--- a/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleSentenceSimilarityInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleSentenceSimilarityInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,7 +10,7 @@
 	import WidgetTextInput from "../../shared/WidgetTextInput/WidgetTextInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
-import { isSentenceSimilarityInput } from "../../shared/inputValidation";
+	import { isSentenceSimilarityInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -119,13 +119,13 @@ import { isSentenceSimilarityInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function previewInputSample(sample: WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleSentenceSimilarityInput) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
 	}
 
-	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
diff --git a/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
index 4301adb25..14d43df6b 100644
--- a/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,7 +9,7 @@
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
-import { isTextInput } from "../../shared/inputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -105,11 +105,11 @@ import { isTextInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleTextInput) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
index 1f8fa512b..47e363895 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
-	import type {
-		WidgetExampleOutput,
-		WidgetExampleTextAndTableInput} from "../../shared/WidgetExample";
+	import type { WidgetExampleTextAndTableInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -20,7 +18,7 @@
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
-import { isTextAndTableInput } from "../../shared/inputValidation";
+	import { isTextAndTableInput } from "../../shared/inputValidation";
 	interface Output {
 		aggregator?: string;
 		answer: string;
@@ -161,12 +159,12 @@ import { isTextAndTableInput } from "../../shared/inputValidation";
 		);
 	}
 
-	function previewInputSample(sample: WidgetExampleTextAndTableInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleTextAndTableInput) {
 		query = sample.text;
 		table = sample.table;
 	}
 
-	function applyInputSample(sample: WidgetExampleTextAndTableInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleTextAndTableInput) {
 		query = sample.text;
 		table = sample.table;
 		getOutput();
diff --git a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
index 278dff93d..60f07dcab 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
@@ -3,7 +3,6 @@
 	import type {
 		WidgetExampleStructuredDataInput,
 		WidgetExampleOutputLabels,
-		WidgetExampleOutput,
 	} from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
@@ -184,11 +183,11 @@
 		}, {});
 	}
 
-	function previewInputSample(sample: WidgetExampleStructuredDataInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleStructuredDataInput) {
 		table = convertDataToTable(sample.structuredData);
 	}
 
-	function applyInputSample(sample: WidgetExampleStructuredDataInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleStructuredDataInput) {
 		table = convertDataToTable(sample.structuredData);
 		getOutput();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
index e7800d3ba..870e5bb07 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,7 +9,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse, getSearchParams, updateUrl } from "../../shared/helpers";
-import { isTextInput } from "../../shared/inputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -104,11 +104,11 @@ import { isTextInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type object & instance of Blob");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleTextInput) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
index ac9a730f7..d5b568fb7 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleTextInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -224,11 +224,11 @@
 		return a.type === b.type && a.start === b.start && a.end === b.end;
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleTextInput) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
diff --git a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
index a1b02f4cf..c042b347b 100644
--- a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type {
-		WidgetExampleAssetAndTextInput,
-		WidgetExampleOutput} from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetAndTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -12,7 +10,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
-import { isAssetAndTextInput } from "../../shared/inputValidation";
+	import { isAssetAndTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -69,12 +67,12 @@ import { isAssetAndTextInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type Array<answer: string, score:number>");
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetAndTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetAndTextInput) {
 		question = sample.text;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetAndTextInput<WidgetExampleOutput>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndTextInput) {
 		question = sample.text;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
diff --git a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
index a788e6c03..354d302d2 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type {
-		WidgetExampleAssetAndZeroShotInput,
-		WidgetExampleOutput} from "../../shared/WidgetExample";
+	import type { WidgetExampleAssetAndZeroShotInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -13,7 +11,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import { addInferenceParameters, getResponse, getDemoInputs } from "../../shared/helpers";
-import { isAssetAndZeroShotInput } from "../../shared/inputValidation";
+	import { isAssetAndZeroShotInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -70,12 +68,12 @@ import { isAssetAndZeroShotInput } from "../../shared/inputValidation";
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetAndZeroShotInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleAssetAndZeroShotInput) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput<WidgetExampleOutput>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
diff --git a/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
index 6ef339938..ba3f2356e 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
-	import type { WidgetExampleOutput, WidgetExampleZeroShotTextInput } from "../../shared/WidgetExample";
+	import type { WidgetExampleZeroShotTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -149,13 +149,13 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function previewInputSample(sample: WidgetExampleZeroShotTextInput<WidgetExampleOutput>) {
+	function previewInputSample(sample: WidgetExampleZeroShotTextInput) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: WidgetExampleZeroShotTextInput<WidgetExampleOutput>) {
+	function applyInputSample(sample: WidgetExampleZeroShotTextInput) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);

From 0df8b217e1b65e01c79b2272792bffb84813f971 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 15:58:22 +0000
Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=A9=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/WidgetInputSamples/WidgetInputSamples.svelte      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index f5aed09a8..3842560f4 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" generics="TWidgetExample extends WidgetExample">
-	
-import { slide } from "svelte/transition";
+	import { WidgetExample } from "../WidgetExample";
+
+	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";
 

From 2a1186e7e3e9c29146c7f4c80e1fd4aa46d8de38 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 16:03:03 +0000
Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=A9=B9=20Import=20type=3F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/WidgetInputSamples/WidgetInputSamples.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index 3842560f4..97208115b 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" generics="TWidgetExample extends WidgetExample">
-	import { WidgetExample } from "../WidgetExample";
+	import type { WidgetExample } from "../WidgetExample";
 
 	import { slide } from "svelte/transition";
 

From f8de5cc3d48e145648de07b1d1cdf627472c1c94 Mon Sep 17 00:00:00 2001
From: SBrandeis <simon@huggingface.co>
Date: Fri, 29 Sep 2023 16:04:58 +0000
Subject: [PATCH 12/12] =?UTF-8?q?=F0=9F=A9=B9=20Alternative=20generic=20sy?=
 =?UTF-8?q?ntax=20to=20satisfy=20svelte-check?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/WidgetInputSamples/WidgetInputSamples.svelte       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index 97208115b..cc41078e1 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,10 +1,12 @@
-<script lang="ts" generics="TWidgetExample extends WidgetExample">
+<script lang="ts">
 	import type { WidgetExample } from "../WidgetExample";
 
 	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";
 
+	type TWidgetExample = $$Generic<WidgetExample>;
+
 	export let classNames = "";
 	export let isLoading = false;
 	export let inputSamples: TWidgetExample[];