From b2ba06d025a6de85049e6470f1533f6f59b4e9e8 Mon Sep 17 00:00:00 2001
From: Julien Chaumond <julien@huggingface.co>
Date: Fri, 29 Sep 2023 18:49:42 +0200
Subject: [PATCH] Typings for all kinds of widget examples (#979)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Typings for all kinds of widget examples

* Add a //#region block

* Tweaks

* Fix some part of the CI already(?)

cc @krampstudio @mishig25 for review :pray:

* Revert "Fix some part of the CI already(?)"

This reverts commit 3e89028d34db5c3f3a40a92f79f3e73141a64ffb.

* nvm, probably better like this

* sorry this was wrong

* 🤯 Use generics in Svelte (i guess...)

* Proposal: widget types (#980)

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

* 💄 Lint & checks

* Go for same syntax everywhere

---------

Co-authored-by: Simon Brandeis <33657802+SBrandeis@users.noreply.github.com>
Co-authored-by: SBrandeis <simon@huggingface.co>
---
 .../InferenceWidget/shared/WidgetExample.ts   | 89 +++++++++++++++++++
 .../WidgetInputSamples.svelte                 | 10 ++-
 .../shared/WidgetWrapper/WidgetWrapper.svelte | 19 ++--
 .../InferenceWidget/shared/inputValidation.ts | 87 ++++++++++++++++++
 .../shared/outputValidation.ts                | 22 +++++
 .../AudioClassificationWidget.svelte          | 33 ++++---
 .../AudioToAudioWidget.svelte                 | 13 +--
 .../AutomaticSpeechRecognitionWidget.svelte   | 29 ++++--
 .../ConversationalWidget.svelte               |  7 +-
 .../FeatureExtractionWidget.svelte            | 11 ++-
 .../FillMaskWidget/FillMaskWidget.svelte      | 18 +++-
 .../ImageClassificationWidget.svelte          | 27 ++++--
 .../ImageSegmentationWidget.svelte            |  7 +-
 .../ImageToImageWidget.svelte                 |  7 +-
 .../ImageToTextWidget.svelte                  |  7 +-
 .../ObjectDetectionWidget.svelte              |  7 +-
 .../QuestionAnsweringWidget.svelte            | 22 ++++-
 .../SentenceSimilarityWidget.svelte           |  7 +-
 .../SummarizationWidget.svelte                |  7 +-
 .../TableQuestionAnsweringWidget.svelte       |  7 +-
 .../TabularDataWidget.svelte                  | 15 ++--
 .../TextGenerationWidget.svelte               | 20 ++++-
 .../TextToImageWidget.svelte                  | 17 +++-
 .../TextToSpeechWidget.svelte                 |  7 +-
 .../TokenClassificationWidget.svelte          |  7 +-
 .../VisualQuestionAnsweringWidget.svelte      |  7 +-
 .../ZeroShotImageClassificationWidget.svelte  |  7 +-
 .../ZeroShotClassificationWidget.svelte       |  7 +-
 js/src/lib/interfaces/DefaultWidget.ts        |  3 +-
 js/src/lib/interfaces/Types.ts                | 14 +--
 js/src/routes/index.svelte                    | 89 +++++++++++++++++--
 31 files changed, 521 insertions(+), 108 deletions(-)
 create mode 100644 js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
 create mode 100644 js/src/lib/components/InferenceWidget/shared/inputValidation.ts
 create mode 100644 js/src/lib/components/InferenceWidget/shared/outputValidation.ts

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
new file mode 100644
index 000000000..4b43c9ead
--- /dev/null
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -0,0 +1,89 @@
+type TableData = Record<string, (string | number)[]>;
+
+//#region outputs
+export type WidgetExampleOutputLabels = Array<{ label: string; score: number; }>;
+export interface WidgetExampleOutputAnswerScore {
+	answer: string;
+	score:  number;
+}
+export interface WidgetExampleOutputText {
+	text: string;
+}
+export interface WidgetExampleOutputUrl {
+	url: string;
+}
+
+export type WidgetExampleOutput =
+	| WidgetExampleOutputLabels
+	| WidgetExampleOutputAnswerScore
+	| WidgetExampleOutputText
+	| WidgetExampleOutputUrl;
+//#endregion
+
+export interface WidgetExampleBase<TOutput> {
+	example_title?: string;
+	group?:         string;
+	output?:        TOutput;
+}
+
+export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	text: string;
+}
+
+export interface WidgetExampleTextAndContextInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleTextInput<TOutput> {
+	context: string;
+}
+
+export interface WidgetExampleTextAndTableInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
+	table: (string | number)[][];
+}
+
+export interface WidgetExampleAssetInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	src: string;
+}
+export interface WidgetExampleAssetAndPromptInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleAssetInput<TOutput> {
+	prompt: string;
+}
+
+export type WidgetExampleAssetAndTextInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleTextInput<TOutput>;
+
+export type WidgetExampleAssetAndZeroShotInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleZeroShotTextInput<TOutput>;
+
+export interface WidgetExampleStructuredDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	structuredData: TableData;
+}
+
+export interface WidgetExampleTableDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	table: TableData;
+}
+
+export interface WidgetExampleZeroShotTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
+	text:             string;
+	candidate_labels: string;
+	multi_class:      boolean;
+}
+
+export interface WidgetExampleSentenceSimilarityInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleBase<TOutput> {
+	source_sentence: string;
+	sentences:       string[];
+}
+
+//#endregion
+
+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 0a5d4e750..26e962e15 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import type { WidgetInputSample } from "../../../../interfaces/Types";
+	import type { WidgetExample } from "../WidgetExample";
+
+	type TWidgetExample = $$Generic<WidgetExample>;
 
 	import { slide } from "svelte/transition";
 
@@ -7,9 +9,9 @@
 
 	export let classNames = "";
 	export let isLoading = false;
-	export let inputSamples: WidgetInputSample[];
-	export let applyInputSample: (sample: Record<string, any>) => void;
-	export let previewInputSample: (sample: Record<string, any>) => 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 34604c988..a3ad8b2a1 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps, ModelLoadInfo } from "../types";
-	import type { WidgetInputSample } from "../../../../interfaces/Types";
+	import type { WidgetExample } from "../WidgetExample";
+
+	type TWidgetExample = $$Generic<WidgetExample>;
 
 	import { onMount } from "svelte";
 
@@ -26,14 +28,16 @@
 	};
 	export let noTitle = false;
 	export let outputJson: string;
-	export let applyInputSample: (sample: Record<string, any>) => void = () => {};
-	export let previewInputSample: (sample: Record<string, any>) => 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: WidgetInputSample[] = (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 +45,10 @@
 			...sample,
 		}));
 
-	const inputGroups: { group: string; inputSamples: WidgetInputSample[] }[] = [];
+	const inputGroups: {
+		group: string;
+		inputSamples: TWidgetExample[];
+	}[] = [];
 	for (const inputSample of inputSamples) {
 		const isExist = inputGroups.find(({ group }) => group === inputSample.group);
 		if (!isExist) {
@@ -80,7 +87,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/shared/outputValidation.ts b/js/src/lib/components/InferenceWidget/shared/outputValidation.ts
new file mode 100644
index 000000000..570aa1db4
--- /dev/null
+++ b/js/src/lib/components/InferenceWidget/shared/outputValidation.ts
@@ -0,0 +1,22 @@
+import type {
+	WidgetExampleOutputLabels,
+	WidgetExampleOutputAnswerScore,
+	WidgetExampleOutputText,
+	WidgetExampleOutputUrl,
+} from "./WidgetExample";
+
+export function isValidOutputLabels(arg: unknown): arg is WidgetExampleOutputLabels {
+	return Array.isArray(arg) && arg.every(x => typeof x.label === "string" && typeof x.score === "number");
+}
+
+export function isValidOutputAnswerScore(arg: unknown): arg is WidgetExampleOutputAnswerScore {
+	return !!arg && typeof arg === "object" && typeof arg["answer"] === "string" && typeof arg["score"] === "number";
+}
+
+export function isValidOutputText(arg: unknown): arg is WidgetExampleOutputText {
+	return !!arg && typeof arg === "object" && typeof arg["text"] === "string";
+}
+
+export function isValidOutputUrl(arg: unknown): arg is WidgetExampleOutputUrl {
+	return !!arg && typeof arg === "object" && typeof arg["url"] === "string" && arg["url"].startsWith("https://");
+}
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
index ea1197583..7a5396e06 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +11,8 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	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"];
@@ -112,30 +115,35 @@
 		}
 	}
 
-	function isValidOutput(arg: any): arg is { label: string; score: number }[] {
-		return Array.isArray(arg) && arg.every(x => typeof x.label === "string" && typeof x.score === "number");
-	}
-
 	function parseOutput(body: unknown): Array<{ label: string; score: number }> {
-		if (isValidOutput(body)) {
+		if (isValidOutputLabels(body)) {
 			return body;
 		}
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		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<WidgetExampleOutputLabels>) {
+		filename = sample.example_title!;
 		fileUrl = sample.src;
-		output = [];
-		outputJson = "";
+		if (isValidOutputLabels(sample.output)) {
+			output = sample.output;
+			outputJson = "";
+		} else {
+			output = [];
+			outputJson = "";
+		}
+	}
+
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
+		return isAssetInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
 	}
 
 	onMount(() => {
@@ -161,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 ed24664a9..339a1e7d3 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -11,6 +12,8 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	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"];
@@ -115,31 +118,40 @@
 	}
 
 	function parseOutput(body: unknown): string {
-		if (body && typeof body === "object" && typeof body["text"] === "string") {
-			return body["text"];
+		if (isValidOutputText(body)) {
+			return body.text;
 		}
 		throw new TypeError("Invalid output: output must be of type <text:string>");
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
 		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<WidgetExampleOutputText>) {
+		filename = sample.example_title!;
 		fileUrl = sample.src;
-		output = "";
-		outputJson = "";
+		if (isValidOutputText(sample.output)) {
+			output = sample.output.text;
+			outputJson = "";
+		} else {
+			output = "";
+			outputJson = "";
+		}
 	}
 
 	function updateModelLoading(isLoading: boolean, estimatedTime: number = 0) {
 		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) {
@@ -163,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 437068b2f..08c16186d 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleTextInput, WidgetExampleOutputLabels, WidgetExample } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +9,8 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	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"];
@@ -36,6 +39,7 @@
 			getOutput();
 		} else {
 			const [demoText] = getDemoInputs(model, ["text"]);
+			/// TODO(get rid of useless getDemoInputs)
 			setTextAreaValue(demoText ?? "");
 			if (text && callApiOnMount) {
 				getOutput({ isOnLoadCall: true });
@@ -115,14 +119,23 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
 		setTextAreaValue(sample.text);
+		if (sample.output) {
+			output = sample.output;
+		} else {
+			output = [];
+		}
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	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
@@ -137,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 91ac9c7f2..eb6ee69c6 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -8,6 +9,8 @@
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	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"];
@@ -81,27 +84,32 @@
 		}
 	}
 
-	function isValidOutput(arg: any): arg is { label: string; score: number }[] {
-		return Array.isArray(arg) && arg.every(x => typeof x.label === "string" && typeof x.score === "number");
-	}
-
 	function parseOutput(body: unknown): Array<{ label: string; score: number }> {
-		if (isValidOutput(body)) {
+		if (isValidOutputLabels(body)) {
 			return body;
 		}
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	async function applyInputSample(sample: Record<string, any>) {
+	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		imgSrc = sample.src;
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		imgSrc = sample.src;
-		output = [];
-		outputJson = "";
+		if (isValidOutputLabels(sample.output)) {
+			output = sample.output;
+			outputJson = "";
+		} else {
+			output = [];
+			outputJson = "";
+		}
+	}
+
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
+		return isTextInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
 	}
 
 	onMount(() => {
@@ -128,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 fd749fa40..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";
 
@@ -7,6 +12,8 @@
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	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"];
@@ -109,22 +116,28 @@
 	}
 
 	function parseOutput(body: any): { answer: string; score: number } {
-		if (body && typeof body === "object" && "answer" in body && "score" in body) {
-			return { answer: body["answer"], score: body["score"] };
+		if (isValidOutputAnswerScore(body)) {
+			return body;
 		}
 		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
@@ -139,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 591b91ca0..b75ba6f0d 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
+	import type { WidgetExampleStructuredDataInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -11,11 +12,11 @@
 		addInferenceParameters,
 		convertDataToTable,
 		convertTableToData,
-		getDemoInputs,
 		getResponse,
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
+	import { isStructuredDataInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -25,7 +26,8 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
-	const columns: string[] = Object.keys(model?.widgetData?.[0]?.structuredData ?? {});
+	const widgetData = model?.widgetData?.[0] as WidgetExampleStructuredDataInput<WidgetExampleOutputLabels> | undefined;
+	const columns: string[] = Object.keys(widgetData?.structuredData ?? {});
 
 	let computeTime = "";
 	let error: string = "";
@@ -68,8 +70,8 @@
 			table = convertDataToTable((parseJSON(dataParam) as TableData) ?? {});
 			getOutput();
 		} else {
-			const [demoTable] = getDemoInputs(model, ["structuredData"]);
-			table = convertDataToTable((demoTable as TableData) ?? {});
+			const demoTable = widgetData?.structuredData ?? {};
+			table = convertDataToTable(demoTable);
 			if (table && callApiOnMount) {
 				getOutput({ isOnLoadCall: true });
 			}
@@ -178,11 +180,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();
 	}
@@ -200,6 +202,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 ee02dad01..eec33daa1 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
 	import type { PipelineType } from "../../../../interfaces/Types";
+	import type { WidgetExampleTextInput, WidgetExampleOutputText, WidgetExample } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -12,6 +13,8 @@
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
 	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"];
@@ -162,15 +165,27 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
 		setTextAreaValue(sample.text);
+		if (sample.output) {
+			output = sample.output.text;
+			outputJson = "";
+			renderTypingEffect(output);
+		} else {
+			output = "";
+			outputJson = "";
+		}
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	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)}`;
 	}
@@ -192,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 2a6facd74..60da9dc27 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExampleTextInput, WidgetExampleOutputUrl, WidgetExample } 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 { isValidOutputUrl } from "../../shared/outputValidation";
+	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -100,14 +103,23 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
+	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
 		text = sample.text;
+		if (sample.output) {
+			output = sample.output.url;
+		} else {
+			output = "";
+		}
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	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
@@ -122,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">
diff --git a/js/src/lib/interfaces/DefaultWidget.ts b/js/src/lib/interfaces/DefaultWidget.ts
index b6f117acb..fca7616fa 100644
--- a/js/src/lib/interfaces/DefaultWidget.ts
+++ b/js/src/lib/interfaces/DefaultWidget.ts
@@ -1,8 +1,9 @@
+import type { WidgetExample } from "../components/InferenceWidget/shared/WidgetExample";
 import type { PipelineType } from "./Types";
 
 type LanguageCode = string;
 
-type PerLanguageMapping = Map<PipelineType, (Record<string, any> | string)[]>;
+type PerLanguageMapping = Map<PipelineType, string[] | WidgetExample[]>;
 
 /// NOTE TO CONTRIBUTORS:
 ///
diff --git a/js/src/lib/interfaces/Types.ts b/js/src/lib/interfaces/Types.ts
index 0582a188c..d6741df17 100644
--- a/js/src/lib/interfaces/Types.ts
+++ b/js/src/lib/interfaces/Types.ts
@@ -1,3 +1,5 @@
+import type { WidgetExample } from "../components/InferenceWidget/shared/WidgetExample";
+
 // Warning: order of modalities here determine how they are listed on the /tasks page
 export const MODALITIES = ["cv", "nlp", "audio", "tabular", "multimodal", "rl", "other"] as const;
 
@@ -648,16 +650,6 @@ export const OTHER_TAGS_SUGGESTIONS = [
 	TAG_NFAA_CONTENT,
 ];
 
-export type WidgetInputSampleValue =
-	| string
-	| string[]
-	| boolean
-	| number
-	| number[]
-	| Record<string, string | string[] | number[]>;
-
-export type WidgetInputSample = Record<string | "example_title" | "group", WidgetInputSampleValue>;
-
 /**
  * Public interface for model metadata
  */
@@ -700,7 +692,7 @@ export interface ModelData {
 	 * can be set in the model card metadata (under `widget`),
 	 * or by default in `DefaultWidget.ts`
 	 */
-	widgetData?:       WidgetInputSample[] | undefined;
+	widgetData?:       WidgetExample[] | undefined;
 	/**
 	 * Parameters that will be used by the widget when calling Inference API
 	 * https://huggingface.co/docs/api-inference/detailed_parameters
diff --git a/js/src/routes/index.svelte b/js/src/routes/index.svelte
index 4a62f40d2..29acfd499 100644
--- a/js/src/routes/index.svelte
+++ b/js/src/routes/index.svelte
@@ -57,7 +57,15 @@
 			id: "roberta-large-mnli",
 			pipeline_tag: "text-classification",
 			widgetData: [
-				{ text: "I like you. I love you.", group: "Contradiction" },
+				{
+					text: "I like you. I love you.",
+					group: "Contradiction",
+					example_title: "Foobar",
+					output: [
+						{ label: "Hello", score: 0.8 },
+						{ label: "Bye", score: 0.2 },
+					],
+				},
 				{ text: "This is good. This is bad.", group: "Contradiction" },
 				{ text: "He runs fast. He runs slow", group: "Contradiction" },
 				{ text: "I like you", group: "Neutral" },
@@ -72,6 +80,42 @@
 		{
 			id: "sgugger/resnet50d",
 			pipeline_tag: "image-classification",
+			widgetData: [
+				{
+					src: "https://huggingface.co/datasets/mishig/sample_images/resolve/main/tiger.jpg",
+					example_title: "Tiger",
+				},
+				{
+					src: "https://huggingface.co/datasets/mishig/sample_images/resolve/main/teapot.jpg",
+					example_title: "Teapot",
+					output: [
+						{
+							label: "teapot: pot for brewing tea; usually has a spout and handle",
+							score: 0.8853782415390015,
+						},
+						{
+							label: "coffeepot: tall pot in which coffee is brewed",
+							score: 0.016733085736632347,
+						},
+						{
+							label: "water jug: a jug that holds water",
+							score: 0.0019129429711028934,
+						},
+						{
+							label: "cup: a punch served in a pitcher instead of a punch bowl",
+							score: 0.0009115593857131898,
+						},
+						{
+							label: "strainer: a filter to retain larger pieces while smaller pieces and liquids pass through",
+							score: 0.0007022042409516871,
+						},
+					],
+				},
+				{
+					src: "https://huggingface.co/datasets/mishig/sample_images/resolve/main/palace.jpg",
+					example_title: "Palace",
+				},
+			],
 		},
 		{
 			id: "facebook/detr-resnet-50",
@@ -128,7 +172,7 @@
 			id: "gpt2",
 			pipeline_tag: "text-generation",
 			widgetData: [
-				{ text: "My name is Julien and I like to" },
+				{ text: "My name is Julien and I like to", output: { text: " code cool products with my friends." } },
 				{ text: "My name is Thomas and my main" },
 				{ text: "My name is Mariama, my favorite" },
 				{ text: "My name is Clara and I am" },
@@ -226,6 +270,14 @@
 		{
 			id: "osanseviero/BigGAN-deep-128",
 			pipeline_tag: "text-to-image",
+			widgetData: [
+				{
+					text: "a tiger",
+					output: {
+						url: "https://huggingface.co/datasets/mishig/sample_images/resolve/main/tiger.jpg",
+					},
+				},
+			],
 		},
 		{
 			id: "julien-c/kan-bayashi_csmsc_tacotron2",
@@ -237,8 +289,30 @@
 			pipeline_tag: "audio-classification",
 			widgetData: [
 				{
-					label: "Librispeech sample 1",
+					example_title: "Librispeech sample 1",
 					src: "https://cdn-media.huggingface.co/speech_samples/sample1.flac",
+					output: [
+						{
+							score: 1,
+							label: "id10003",
+						},
+						{
+							score: 3.958137817505758e-9,
+							label: "id10912",
+						},
+						{
+							score: 2.8285052078302897e-9,
+							label: "id11089",
+						},
+						{
+							score: 2.4077480009765395e-9,
+							label: "id10017",
+						},
+						{
+							score: 1.3356071804082603e-9,
+							label: "id10045",
+						},
+					],
 				},
 			],
 		},
@@ -251,8 +325,11 @@
 			pipeline_tag: "automatic-speech-recognition",
 			widgetData: [
 				{
-					label: "Librispeech sample 1",
+					example_title: "Librispeech sample 1",
 					src: "https://cdn-media.huggingface.co/speech_samples/sample1.flac",
+					output: {
+						text: "GOING ALONG SLUSHY COUNTRY ROADS AND SPEAKING TO DAMP AUDIENCES IN DRAUGHTY SCHOOL ROOMS DAY AFTER DAY FOR A FORTNIGHT HE'LL HAVE TO PUT IN AN APPEARANCE AT SOME PLACE OF WORSHIP ON SUNDAY MORNING AND HE CAN COME TO US IMMEDIATELY AFTERWARDS",
+					},
 				},
 			],
 		},
@@ -261,7 +338,7 @@
 			pipeline_tag: "automatic-speech-recognition",
 			widgetData: [
 				{
-					label: "Librispeech sample 1",
+					example_title: "Librispeech sample 1",
 					src: "https://cdn-media.huggingface.co/speech_samples/sample1.flac",
 				},
 			],
@@ -271,7 +348,7 @@
 			pipeline_tag: "automatic-speech-recognition",
 			widgetData: [
 				{
-					label: "Librispeech sample 1",
+					example_title: "Librispeech sample 1",
 					src: "https://cdn-media.huggingface.co/speech_samples/sample1.flac",
 				},
 			],