From 5b91fc516930f686e510d60c17ac62794a1c0697 Mon Sep 17 00:00:00 2001
From: Simon Brandeis <33657802+SBrandeis@users.noreply.github.com>
Date: Fri, 29 Sep 2023 18:06:44 +0200
Subject: [PATCH] Proposal: widget types (#980)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* 🩹 Fix types in widgets

* 🩹 Minimize diff

* 💄 Lint

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

Co-authored-by: Julien Chaumond <julien@huggingface.co>

* 🧹 cleanup unwanted change

* 🩹 wip: type safety

* ✨ Typing & validation for ALL widgets

* ♻️ Slightly less verbose version

* 🩹

* 🩹 Import type?

* 🩹 Alternative generic syntax to satisfy svelte-check

---------

Co-authored-by: Julien Chaumond <julien@huggingface.co>
---
 .../InferenceWidget/shared/WidgetExample.ts   | 89 +++++++++----------
 .../WidgetInputSamples.svelte                 | 14 +--
 .../shared/WidgetWrapper/WidgetWrapper.svelte | 17 ++--
 .../InferenceWidget/shared/inputValidation.ts | 87 ++++++++++++++++++
 .../AudioClassificationWidget.svelte          | 14 ++-
 .../AudioToAudioWidget.svelte                 | 13 +--
 .../AutomaticSpeechRecognitionWidget.svelte   | 12 ++-
 .../ConversationalWidget.svelte               |  7 +-
 .../FeatureExtractionWidget.svelte            | 11 ++-
 .../FillMaskWidget/FillMaskWidget.svelte      | 14 ++-
 .../ImageClassificationWidget.svelte          | 12 ++-
 .../ImageSegmentationWidget.svelte            |  7 +-
 .../ImageToImageWidget.svelte                 |  7 +-
 .../ImageToTextWidget.svelte                  |  7 +-
 .../ObjectDetectionWidget.svelte              |  7 +-
 .../QuestionAnsweringWidget.svelte            | 17 +++-
 .../SentenceSimilarityWidget.svelte           |  7 +-
 .../SummarizationWidget.svelte                |  7 +-
 .../TableQuestionAnsweringWidget.svelte       |  7 +-
 .../TabularDataWidget.svelte                  | 13 ++-
 .../TextGenerationWidget.svelte               | 14 ++-
 .../TextToImageWidget.svelte                  | 14 ++-
 .../TextToSpeechWidget.svelte                 |  7 +-
 .../TokenClassificationWidget.svelte          |  7 +-
 .../VisualQuestionAnsweringWidget.svelte      |  7 +-
 .../ZeroShotImageClassificationWidget.svelte  |  7 +-
 .../ZeroShotClassificationWidget.svelte       |  7 +-
 27 files changed, 310 insertions(+), 122 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 d642afd26..4b43c9ead 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -12,83 +12,78 @@ export interface WidgetExampleOutputText {
 export interface WidgetExampleOutputUrl {
 	url: string;
 }
+
+export type WidgetExampleOutput =
+	| WidgetExampleOutputLabels
+	| WidgetExampleOutputAnswerScore
+	| WidgetExampleOutputText
+	| WidgetExampleOutputUrl;
 //#endregion
 
-export interface WidgetExampleBase {
+export interface WidgetExampleBase<TOutput> {
 	example_title?: string;
 	group?:         string;
+	output?:        TOutput;
 }
 
-export interface WidgetExampleTextInputLabelsOutput extends WidgetExampleBase {
-	text:    string;
-	output?: WidgetExampleOutputLabels;
+export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	text: string;
 }
 
-export interface WidgetExampleTextAndContextInputAnswerScoreOutput extends WidgetExampleBase {
-	text:    string;
+export interface WidgetExampleTextAndContextInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleTextInput<TOutput> {
 	context: string;
-	output?: WidgetExampleOutputAnswerScore;
 }
 
-export interface WidgetExampleTextInputTextOutput extends WidgetExampleBase {
-	text:    string;
-	output?: WidgetExampleOutputText;
+export interface WidgetExampleTextAndTableInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
+	table: (string | number)[][];
 }
 
-export interface WidgetExampleTextInputUrlOutput extends WidgetExampleBase {
-	text:    string;
-	output?: WidgetExampleOutputUrl;
+export interface WidgetExampleAssetInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	src: string;
 }
-
-export interface WidgetExampleAssetInputLabelsOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputLabels;
+export interface WidgetExampleAssetAndPromptInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleAssetInput<TOutput> {
+	prompt: string;
 }
 
-export interface WidgetExampleAssetInputTextOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputText;
-}
+export type WidgetExampleAssetAndTextInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleTextInput<TOutput>;
 
-export interface WidgetExampleAssetInputUrlOutput extends WidgetExampleBase {
-	src:     string;
-	output?: WidgetExampleOutputUrl;
-}
+export type WidgetExampleAssetAndZeroShotInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleZeroShotTextInput<TOutput>;
 
-//#region more exotic stuff
-export interface WidgetExampleStructuredDataInputLabelsOutput extends WidgetExampleBase {
+export interface WidgetExampleStructuredDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
 	structuredData: TableData;
-	output?:        WidgetExampleOutputLabels;
 }
 
-export interface WidgetExampleTableDataInputLabelsOutput extends WidgetExampleBase {
-	table:   TableData;
-	output?: WidgetExampleOutputLabels;
+export interface WidgetExampleTableDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	table: TableData;
 }
 
-export interface WidgetExampleZeroShotTextInputLabelsOutput extends WidgetExampleBase {
+export interface WidgetExampleZeroShotTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
 	text:             string;
 	candidate_labels: string;
 	multi_class:      boolean;
-	output?:          WidgetExampleOutputLabels;
 }
 
-export interface WidgetExampleSentenceSimilarityInputLabelsOutput extends WidgetExampleBase {
+export interface WidgetExampleSentenceSimilarityInput<TOutput = WidgetExampleOutput>
+	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<TOutput = WidgetExampleOutput> =
+	| WidgetExampleTextInput<TOutput>
+	| WidgetExampleTextAndContextInput<TOutput>
+	| WidgetExampleTextAndTableInput<TOutput>
+	| WidgetExampleAssetInput<TOutput>
+	| WidgetExampleAssetAndPromptInput<TOutput>
+	| WidgetExampleAssetAndTextInput<TOutput>
+	| WidgetExampleAssetAndZeroShotInput<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 59985626f..cc41078e1 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,15 +1,17 @@
-<script lang="ts" generics="T 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: WidgetExample[];
-	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;
@@ -25,12 +27,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/shared/WidgetWrapper/WidgetWrapper.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
index 4a4de0d18..84fff5fed 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" generics="T extends WidgetExample">
+<script lang="ts" generics="TWidgetExample extends WidgetExample">
 	import type { WidgetProps, ModelLoadInfo } from "../types";
 	import type { WidgetExample } from "../WidgetExample";
 
@@ -26,14 +26,16 @@
 	};
 	export let noTitle = false;
 	export let outputJson: string;
-	export let applyInputSample: (sample: T) => void = () => {};
-	export let previewInputSample: (sample: T) => void = () => {};
+	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;
 	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 +43,10 @@
 			...sample,
 		}));
 
-	const inputGroups: { group: string; inputSamples: WidgetExample[] }[] = [];
+	const inputGroups: {
+		group: string;
+		inputSamples: TWidgetExample[];
+	}[] = [];
 	for (const inputSample of inputSamples) {
 		const isExist = inputGroups.find(({ group }) => group === inputSample.group);
 		if (!isExist) {
@@ -80,7 +85,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/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 d7058a1b1..7a5396e06 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 { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "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"];
@@ -121,7 +122,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 +130,7 @@
 		getOutput();
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInputLabelsOutput) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		if (isValidOutputLabels(sample.output)) {
@@ -141,6 +142,10 @@
 		}
 	}
 
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
+		return isAssetInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
+	}
+
 	onMount(() => {
 		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
 		if (callApiOnMount && src) {
@@ -164,12 +169,13 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<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/AudioToAudioWidget/AudioToAudioWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
index 9127ebb47..21b698541 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 } 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) {
 		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) {
+		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 48729fb70..339a1e7d3 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 { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
 
 	import { onMount } from "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"];
@@ -123,7 +124,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 +132,7 @@
 		getOutput();
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetInputTextOutput) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		if (isValidOutputText(sample.output)) {
@@ -147,6 +148,10 @@
 		modelLoading = { isLoading, estimatedTime };
 	}
 
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputText> {
+		return isAssetInput(sample) && (!sample.output || isValidOutputText(sample.output));
+	}
+
 	onMount(() => {
 		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
 		if (callApiOnMount && src) {
@@ -170,6 +175,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
index abc1f2882..c7161de0a 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 { 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) {
 		text = sample.text;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		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..223c104e8 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 { 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) {
 		text = sample.text;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		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 80eb91ae9..08c16186d 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, WidgetExample } from "../../shared/WidgetExample";
 
 	import { onMount } from "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"];
@@ -118,19 +119,23 @@
 		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)) {
+		if (sample.output) {
 			output = sample.output;
 		} else {
 			output = [];
 		}
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInputLabelsOutput) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
 		setTextAreaValue(sample.text);
 		getOutput();
 	}
+
+	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputLabels> {
+		return isTextInput(sample) && (!output || isValidOutputLabels(sample.output));
+	}
 </script>
 
 <WidgetWrapper
@@ -145,6 +150,7 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
index 57c82edee..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 { WidgetExampleAssetInputLabelsOutput } 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"];
@@ -90,13 +91,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;
@@ -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..a607273e7 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, ImageSegment } from "../../shared/types";
+	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +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 Canvas from "./Canvas.svelte";
 
@@ -204,13 +206,13 @@
 		};
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		imgSrc = sample.src;
 		output = [];
 		outputJson = "";
@@ -244,6 +246,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..84be41a03 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleAssetAndPromptInput } 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 { addInferenceParameters, getDemoInputs, getResponse } from "../../shared/helpers";
+	import { isAssetAndPromptInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -61,12 +63,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) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
@@ -156,6 +158,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..b33f81d23 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 } 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) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		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..cc44a0f7a 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 } 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) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput) {
 		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..a08755c22 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 { 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) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput) {
 		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..14d43df6b 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 { 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) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		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..47e363895 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
+	import type { WidgetExampleTextAndTableInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -17,6 +18,7 @@
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
+	import { isTextAndTableInput } from "../../shared/inputValidation";
 	interface Output {
 		aggregator?: string;
 		answer: string;
@@ -157,12 +159,12 @@
 		);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextAndTableInput) {
 		query = sample.text;
 		table = sample.table;
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextAndTableInput) {
 		query = sample.text;
 		table = sample.table;
 		getOutput();
@@ -181,6 +183,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 b5cafd4b4..60f07dcab 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
@@ -1,6 +1,9 @@
 <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";
 
@@ -16,6 +19,7 @@
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
+	import { isStructuredDataInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -25,7 +29,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 = "";
@@ -179,11 +183,11 @@
 		}, {});
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleStructuredDataInput) {
 		table = convertDataToTable(sample.structuredData);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleStructuredDataInput) {
 		table = convertDataToTable(sample.structuredData);
 		getOutput();
 	}
@@ -201,6 +205,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 9cbe9298d..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 { WidgetExampleTextInputTextOutput } 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"];
@@ -164,9 +165,9 @@
 		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)) {
+		if (sample.output) {
 			output = sample.output.text;
 			outputJson = "";
 			renderTypingEffect(output);
@@ -176,11 +177,15 @@
 		}
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInputTextOutput) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
 		setTextAreaValue(sample.text);
 		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 cf95cfe5e..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 { WidgetExampleTextInputUrlOutput } 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"];
@@ -102,19 +103,23 @@
 		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)) {
+		if (sample.output) {
 			output = sample.output.url;
 		} else {
 			output = "";
 		}
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInputUrlOutput) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
 		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..870e5bb07 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 { 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) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		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..d5b568fb7 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 { 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) {
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleTextInput) {
 		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..c042b347b 100644
--- a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleAssetAndTextInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -9,6 +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";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -65,12 +67,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) {
 		question = sample.text;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndTextInput) {
 		question = sample.text;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
@@ -164,6 +166,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..354d302d2 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleAssetAndZeroShotInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +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";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -66,12 +68,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) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 		const res = await fetch(imgSrc);
@@ -168,6 +170,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..ba3f2356e 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 { 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) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleZeroShotTextInput) {
 		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">