Sync widgets demo

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetExamples/WidgetExamples.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import type { ExampleRunOpts, WidgetProps } from "../types.js";
+	import type { WidgetExample, WidgetExampleAttribute } from "@huggingface/tasks";
+
+	type TWidgetExample = $$Generic<WidgetExample>;
+
+	import { onMount } from "svelte";
+	import { slide } from "svelte/transition";
+
+	import { randomItem } from "../../../../utils/ViewUtils.js";
+	import IconCaretDownV2 from "../../..//Icons/IconCaretDownV2.svelte";
+	import WidgetExamplesGroup from "./WidgetExamplesGroup.svelte";
+	import { getQueryParamVal } from "../../..//InferenceWidget/shared/helpers.js";
+
+	export let isLoading = false;
+	export let callApiOnMount: WidgetProps["callApiOnMount"];
+	export let exampleQueryParams: WidgetExampleAttribute[] = [];
+	export let applyWidgetExample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void;
+
+	export let validExamples: TWidgetExample[];
+
+	interface ExamplesGroup {
+		group: string;
+		examples: TWidgetExample[];
+	}
+
+	$: exampleGroups = getExamplesGroups(validExamples);
+	$: examples = exampleGroups?.[0]?.examples ?? [];
+	// for examples with multiple groups, a group needs to be selected first, before an example can be clicked
+	$: clickable = exampleGroups?.length === 1;
+	let containerEl: HTMLElement;
+	let isOptionsVisible = false;
+	let title = "Examples";
+
+	function getExamplesGroups(_examples: TWidgetExample[]): ExamplesGroup[] {
+		const examples = _examples.map((sample, idx) => ({
+			example_title: `Example ${++idx}`,
+			group: "Group 1",
+			...sample,
+		}));
+		const examplesGroups: ExamplesGroup[] = [];
+		for (const example of examples) {
+			const groupExists = examplesGroups.find(({ group }) => group === example.group);
+			if (!groupExists) {
+				examplesGroups.push({ group: example.group as string, examples: [] });
+			}
+			examplesGroups.find(({ group }) => group === example.group)?.examples.push(example);
+		}
+		return examplesGroups;
+	}
+
+	function _applyWidgetExample(idx: number) {
+		hideOptions();
+		const sample = examples[idx];
+		title = sample.example_title as string;
+		applyWidgetExample(sample);
+	}
+
+	function _previewInputSample(idx: number) {
+		const sample = examples[idx];
+		applyWidgetExample(sample, { isPreview: true });
+	}
+
+	function toggleOptionsVisibility() {
+		isOptionsVisible = !isOptionsVisible;
+	}
+
+	function onClick(e: MouseEvent | TouchEvent) {
+		let targetElement = e.target;
+		do {
+			if (targetElement === containerEl) {
+				// This is a click inside. Do nothing, just return.
+				return;
+			}
+			targetElement = (targetElement as HTMLElement).parentElement;
+		} while (targetElement);
+		// This is a click outside
+		hideOptions();
+	}
+
+	function hideOptions() {
+		isOptionsVisible = false;
+	}
+	function changeGroup(e: CustomEvent<string>) {
+		const selectedGroup = e.detail;
+		const newGroup = exampleGroups.find(({ group }) => group === selectedGroup);
+		if (!newGroup) {
+			return;
+		}
+		examples = newGroup?.examples ?? [];
+		title = "Examples";
+		clickable = true;
+	}
+
+	onMount(() => {
+		// run random example onMount
+		(async () => {
+			const exampleFromQueryParams = {} as TWidgetExample;
+			for (const key of exampleQueryParams) {
+				const val = getQueryParamVal(key);
+				if (val) {
+					// @ts-expect-error complicated type
+					exampleFromQueryParams[key] = val;
+				}
+			}
+			if (Object.keys(exampleFromQueryParams).length) {
+				// run widget example from query params
+				applyWidgetExample(exampleFromQueryParams);
+			} else {
+				// run random widget example
+				const example = randomItem(validExamples);
+				if (callApiOnMount && example) {
+					applyWidgetExample(example, { inferenceOpts: { isOnLoadCall: true } });
+				}
+			}
+		})();
+	});
+</script>
+
+<svelte:window on:click={onClick} />
+
+<div class="ml-auto flex gap-x-1">
+	<!-- Example Groups -->
+	{#if exampleGroups.length > 1}
+		<WidgetExamplesGroup
+			on:groupSelected={changeGroup}
+			{isLoading}
+			groupNames={exampleGroups.map(({ group }) => group)}
+		/>
+	{/if}
+
+	<!-- Example picker -->
+	<div
+		class="relative mb-1.5
+			{isLoading || !clickable ? 'pointer-events-none opacity-50' : ''} 
+			{isOptionsVisible ? 'z-10' : ''}"
+		bind:this={containerEl}
+	>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			class="inline-flex w-32 justify-between rounded-md border border-gray-100 px-4 py-1"
+			on:click={toggleOptionsVisibility}
+		>
+			<div class="truncate text-sm">{title}</div>
+			<IconCaretDownV2
+				classNames="-mr-1 ml-2 h-5 w-5 transition ease-in-out transform {isOptionsVisible && '-rotate-180'}"
+			/>
+		</div>
+
+		{#if isOptionsVisible}
+			<div
+				class="absolute right-0 mt-1 w-full origin-top-right rounded-md ring-1 ring-black ring-opacity-10"
+				transition:slide
+			>
+				<div class="rounded-md bg-white py-1" role="none">
+					{#each examples as { example_title }, i}
+						<!-- svelte-ignore a11y-click-events-have-key-events a11y-mouse-events-have-key-events -->
+						<div
+							class="cursor-pointer truncate px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+							on:mouseover={() => _previewInputSample(i)}
+							on:click={() => _applyWidgetExample(i)}
+						>
+							{example_title}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

packages/widgets/src/lib/components/InferenceWidget/shared/{WidgetInputSamplesGroup/WidgetInputSamplesGroup.svelte → WidgetExamples/WidgetExamplesGroup.svelte}

@@ -1,22 +1,24 @@
 <script lang="ts">
+	import { createEventDispatcher } from "svelte";
 	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../..//Icons/IconCaretDownV2.svelte";
 
 	export let classNames = "";
 	export let isLoading = false;
-	export let inputGroups: string[];
-	export let selectedInputGroup: string;
+	export let groupNames: string[];
+
+	const dispatch = createEventDispatcher<{ groupSelected: string }>();
 
 	let containerEl: HTMLElement;
 	let isOptionsVisible = false;
-	let title = "Groups";
+	let selectedGroupName: string;
 
 	function chooseInputGroup(idx: number) {
 		hideOptions();
-		const inputGroup = inputGroups[idx];
-		title = inputGroup;
-		selectedInputGroup = inputGroup;
+		const inputGroup = groupNames[idx];
+		selectedGroupName = inputGroup;
+		dispatch("groupSelected", selectedGroupName);
 	}
 
 	function toggleOptionsVisibility() {
@@ -54,7 +56,7 @@
 		class="inline-flex w-32 justify-between rounded-md border border-gray-100 px-4 py-1"
 		on:click={toggleOptionsVisibility}
 	>
-		<div class="truncate text-sm">{title}</div>
+		<div class="truncate text-sm">{selectedGroupName ?? "Groups"}</div>
 		<IconCaretDownV2
 			classNames="-mr-1 ml-2 h-5 w-5 transition ease-in-out transform {isOptionsVisible && '-rotate-180'}"
 		/>
@@ -66,7 +68,7 @@
 			transition:slide
 		>
 			<div class="rounded-md bg-white py-1" role="none">
-				{#each inputGroups as inputGroup, i}
+				{#each groupNames as inputGroup, i}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class="truncate px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-200"

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetFooter/WidgetFooter.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
+	import type { WidgetProps } from "../types.js";
+	import { identity } from "svelte/internal";
+	import { widgetStates, updateWidgetState } from "../../stores.js";
 	import IconCode from "../../..//Icons/IconCode.svelte";
 	import IconMaximize from "../../..//Icons/IconMaximize.svelte";
 
-	export let isMaximized = false;
+	export let model: WidgetProps["model"];
 	export let outputJson: string;
 	export let isDisabled = false;
 
+	$: isMaximized = $widgetStates?.[model.id]?.isMaximized;
+
 	let isOutputJsonVisible = false;
 </script>
 
@@ -22,7 +27,10 @@
 			JSON Output
 		</button>
 	{/if}
-	<button class="ml-auto flex items-center" on:click|preventDefault={() => (isMaximized = !isMaximized)}>
+	<button
+		class="ml-auto flex items-center"
+		on:click|preventDefault={() => updateWidgetState(model.id, "isMaximized", true)}
+	>
 		<IconMaximize classNames="mr-1" />
 		{#if !isMaximized}
 			Maximize

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetHeader/WidgetHeader.svelte

@@ -1,16 +1,46 @@
 <script lang="ts">
-	import { TASKS_DATA, type PipelineType } from "@huggingface/tasks";
+	import { updateWidgetState } from "../../stores.js";
+	import { TASKS_DATA } from "@huggingface/tasks";
+	import type { WidgetExample, WidgetExampleAttribute } from "@huggingface/tasks";
+	import type { WidgetProps, ExampleRunOpts } from "../types.js";
 	import { getPipelineTask } from "../../../../utils/ViewUtils.js";
 	import IconInfo from "../../..//Icons/IconInfo.svelte";
 	import IconLightning from "../../..//Icons/IconLightning.svelte";
 	import PipelineTag from "../../../PipelineTag/PipelineTag.svelte";
+	import WidgetExamples from "../WidgetExamples/WidgetExamples.svelte";
 
+	type TWidgetExample = $$Generic<WidgetExample>;
+
+	export let model: WidgetProps["model"];
 	export let noTitle = false;
 	export let title: string | null = null;
-	export let pipeline: PipelineType | undefined;
+	export let isLoading = false;
 	export let isDisabled = false;
+	export let applyWidgetExample: ((sample: TWidgetExample, opts?: ExampleRunOpts) => void) | undefined = undefined;
+	export let validateExample: ((sample: WidgetExample) => sample is TWidgetExample) | undefined = undefined;
+	export let callApiOnMount: WidgetProps["callApiOnMount"] = false;
+	export let exampleQueryParams: WidgetExampleAttribute[] = [];
+
+	const pipeline = model?.pipeline_tag;
 
 	$: task = pipeline ? getPipelineTask(pipeline) : undefined;
+
+	$: validExamples = getValidExamples(isDisabled);
+
+	function getValidExamples(isDisabled: boolean): TWidgetExample[] {
+		const examples = (model?.widgetData ?? []).filter(
+			(sample): sample is TWidgetExample =>
+				(validateExample?.(sample) ?? false) && (!isDisabled || sample.output !== undefined)
+		);
+
+		// if there are no examples with outputs AND model.inference !== InferenceDisplayability.Yes
+		// then widget will show InferenceDisplayability error to the user without showing anything else
+		if (isDisabled && !examples.length) {
+			updateWidgetState(model.id, "noInference", true);
+		}
+
+		return examples;
+	}
 </script>
 
 <div class="mb-2 flex items-center font-semibold">
@@ -45,5 +75,7 @@
 			<PipelineTag classNames="mr-2 mb-1.5" {pipeline} />
 		</a>
 	{/if}
-	<slot />
+	{#if validExamples.length && applyWidgetExample}
+		<WidgetExamples {validExamples} {isLoading} {applyWidgetExample} {callApiOnMount} {exampleQueryParams} />
+	{/if}
 </div>

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetInfo/WidgetInfo.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { InferenceDisplayability } from "@huggingface/tasks";
 	import { type WidgetProps, type ModelLoadInfo, LoadState, ComputeType } from "../types.js";
+	import WidgetModelLoading from "../WidgetModelLoading/WidgetModelLoading.svelte";
 	import IconAzureML from "../../..//Icons/IconAzureML.svelte";
 	import IconInfo from "../../..//Icons/IconInfo.svelte";
+	import { modelLoadStates } from "../../stores.js";
 
 	export let model: WidgetProps["model"];
 	export let computeTime: string = "";
 	export let error: string = "";
-	export let modelLoadInfo: ModelLoadInfo | undefined = undefined;
-	export let modelTooBig = false;
+	export let modelLoading = {
+		isLoading: false,
+		estimatedTime: 0,
+	};
+
+	$: modelTooBig = $modelLoadStates[model.id]?.state === "TooBig";
 
 	const state = {
 		[LoadState.Loadable]: "This model can be loaded on the Inference API on-demand.",
@@ -26,11 +32,11 @@
 		[LoadState.Error]: "⚠️ This model could not be loaded.",
 	} as const;
 
-	function getStatusReport(modelLoadInfo: ModelLoadInfo | undefined, statuses: Record<LoadState, string>): string {
-		if (!modelLoadInfo) {
+	function getStatusReport(modelLoadStates: ModelLoadInfo | undefined, statuses: Record<LoadState, string>): string {
+		if (!modelLoadStates) {
 			return "Model state unknown";
 		}
-		return statuses[modelLoadInfo.state];
+		return statuses[modelLoadStates.state];
 	}
 </script>
 
@@ -48,13 +54,13 @@
 				</div>
 				<div class="border-dotter mx-2 flex flex-1 -translate-y-px border-b border-gray-100" />
 				<div>
-					{@html getStatusReport(modelLoadInfo, azureState)}
+					{@html getStatusReport($modelLoadStates[model.id], azureState)}
 				</div>
 			</div>
 		{:else if computeTime}
-			Computation time on {modelLoadInfo?.compute_type ?? ComputeType.CPU}: {computeTime}
+			Computation time on {$modelLoadStates[model.id]?.compute_type ?? ComputeType.CPU}: {computeTime}
 		{:else if (model.inference === InferenceDisplayability.Yes || model.pipeline_tag === "reinforcement-learning") && !modelTooBig}
-			{@html getStatusReport(modelLoadInfo, state)}
+			{@html getStatusReport($modelLoadStates[model.id], state)}
 		{:else if model.inference === InferenceDisplayability.ExplicitOptOut}
 			<span class="text-sm text-gray-500">Inference API has been turned off for this model.</span>
 		{:else if model.inference === InferenceDisplayability.CustomCode}
@@ -98,4 +104,7 @@
 	{#if error}
 		<div class="alert alert-error mt-3">{error}</div>
 	{/if}
+	{#if modelLoading.isLoading}
+		<WidgetModelLoading estimatedTime={modelLoading.estimatedTime} />
+	{/if}
 </div>

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import type { ExampleRunOpts } from "../types.js";
-	import type { WidgetExample } from "@huggingface/tasks";
-
-	type TWidgetExample = $$Generic<WidgetExample>;
-
-	import { slide } from "svelte/transition";
-
-	import IconCaretDownV2 from "../../..//Icons/IconCaretDownV2.svelte";
-
-	export let classNames = "";
-	export let isLoading = false;
-	export let inputSamples: TWidgetExample[];
-	export let applyInputSample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void;
-
-	let containerEl: HTMLElement;
-	let isOptionsVisible = false;
-	let title = "Examples";
-
-	$: {
-		// reset title on inputSamples change (i.e. input group change)
-		inputSamples;
-		title = "Examples";
-	}
-
-	function _applyInputSample(idx: number) {
-		hideOptions();
-		const sample = inputSamples[idx];
-		title = sample.example_title as string;
-		applyInputSample(sample);
-	}
-
-	function _previewInputSample(idx: number) {
-		const sample = inputSamples[idx];
-		applyInputSample(sample, { isPreview: true });
-	}
-
-	function toggleOptionsVisibility() {
-		isOptionsVisible = !isOptionsVisible;
-	}
-
-	function onClick(e: MouseEvent | TouchEvent) {
-		let targetElement = e.target;
-		do {
-			if (targetElement === containerEl) {
-				// This is a click inside. Do nothing, just return.
-				return;
-			}
-			targetElement = (targetElement as HTMLElement).parentElement;
-		} while (targetElement);
-		// This is a click outside
-		hideOptions();
-	}
-
-	function hideOptions() {
-		isOptionsVisible = false;
-	}
-</script>
-
-<svelte:window on:click={onClick} />
-
-<div
-	class="relative mb-1.5 {classNames}
-		{isLoading && 'pointer-events-none opacity-50'} 
-		{isOptionsVisible && 'z-10'}"
-	bind:this={containerEl}
->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div
-		class="inline-flex w-32 justify-between rounded-md border border-gray-100 px-4 py-1"
-		on:click={toggleOptionsVisibility}
-	>
-		<div class="truncate text-sm">{title}</div>
-		<IconCaretDownV2
-			classNames="-mr-1 ml-2 h-5 w-5 transition ease-in-out transform {isOptionsVisible && '-rotate-180'}"
-		/>
-	</div>
-
-	{#if isOptionsVisible}
-		<div
-			class="absolute right-0 mt-1 w-full origin-top-right rounded-md ring-1 ring-black ring-opacity-10"
-			transition:slide
-		>
-			<div class="rounded-md bg-white py-1" role="none">
-				{#each inputSamples as { example_title }, i}
-					<!-- svelte-ignore a11y-click-events-have-key-events a11y-mouse-events-have-key-events -->
-					<div
-						class="cursor-pointer truncate px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-						on:mouseover={() => _previewInputSample(i)}
-						on:click={() => _applyInputSample(i)}
-					>
-						{example_title}
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte

@@ -1,155 +1,57 @@
 <script lang="ts">
 	import { InferenceDisplayability } from "@huggingface/tasks";
-	import type { WidgetExample, WidgetExampleAttribute } from "@huggingface/tasks";
-	import type { WidgetProps, ModelLoadInfo, ExampleRunOpts } from "../types.js";
+	import type { WidgetExample } from "@huggingface/tasks";
+	import type { WidgetProps } from "../types.js";
 
 	type TWidgetExample = $$Generic<WidgetExample>;
 
 	import { onMount } from "svelte";
 
-	import IconCross from "../../..//Icons/IconCross.svelte";
-	import WidgetInputSamples from "../WidgetInputSamples/WidgetInputSamples.svelte";
-	import WidgetInputSamplesGroup from "../WidgetInputSamplesGroup/WidgetInputSamplesGroup.svelte";
 	import WidgetFooter from "../WidgetFooter/WidgetFooter.svelte";
 	import WidgetHeader from "../WidgetHeader/WidgetHeader.svelte";
 	import WidgetInfo from "../WidgetInfo/WidgetInfo.svelte";
-	import WidgetModelLoading from "../WidgetModelLoading/WidgetModelLoading.svelte";
-	import { getModelLoadInfo, getQueryParamVal, getWidgetExample } from "../../..//InferenceWidget/shared/helpers.js";
-	import { modelLoadStates } from "../../stores.js";
+	import IconCross from "../../..//Icons/IconCross.svelte";
+	import { getModelLoadInfo } from "../../..//InferenceWidget/shared/helpers.js";
+	import { modelLoadStates, widgetStates, updateWidgetState } from "../../stores.js";
 
 	export let apiUrl: string;
-	export let callApiOnMount: WidgetProps["callApiOnMount"];
-	export let computeTime: string;
-	export let error: string;
-	export let isLoading = false;
 	export let model: WidgetProps["model"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	export let modelLoading = {
-		isLoading: false,
-		estimatedTime: 0,
-	};
-	export let noTitle = false;
-	export let outputJson: string;
-	export let applyInputSample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void = () => {};
-	export let validateExample: (sample: WidgetExample) => sample is TWidgetExample;
-	export let exampleQueryParams: WidgetExampleAttribute[] = [];
-
-	let isDisabled = model.inference !== InferenceDisplayability.Yes && model.pipeline_tag !== "reinforcement-learning";
-	let isMaximized = false;
-	let modelLoadInfo: ModelLoadInfo | undefined = undefined;
-	let selectedInputGroup: string;
-	let modelTooBig = false;
 
-	interface ExamplesGroup {
-		group: string;
-		inputSamples: TWidgetExample[];
-	}
+	$: isMaximized = $widgetStates?.[model.id]?.isMaximized;
 
-	const allInputSamples = (model.widgetData ?? [])
-		.filter(validateExample)
-		.sort((sample1, sample2) => (sample2.example_title ? 1 : 0) - (sample1.example_title ? 1 : 0))
-		.map((sample, idx) => ({
-			example_title: `Example ${++idx}`,
-			group: "Group 1",
-			...sample,
-		}));
-	let inputSamples = !isDisabled ? allInputSamples : allInputSamples.filter((sample) => sample.output !== undefined);
-	let inputGroups = getExamplesGroups();
-
-	$: selectedInputSamples =
-		inputGroups.length === 1 ? inputGroups[0] : inputGroups.find(({ group }) => group === selectedInputGroup);
-
-	function getExamplesGroups(): ExamplesGroup[] {
-		const inputGroups: ExamplesGroup[] = [];
-		for (const inputSample of inputSamples) {
-			const groupExists = inputGroups.find(({ group }) => group === inputSample.group);
-			if (!groupExists) {
-				inputGroups.push({ group: inputSample.group as string, inputSamples: [] });
-			}
-			inputGroups.find(({ group }) => group === inputSample.group)?.inputSamples.push(inputSample);
-		}
-		return inputGroups;
-	}
+	const isDisabled = model.inference !== InferenceDisplayability.Yes && model.pipeline_tag !== "reinforcement-learning";
+	updateWidgetState(model.id, "isDisabled", isDisabled);
 
 	onMount(() => {
 		(async () => {
-			if (model.inference === InferenceDisplayability.Yes) {
-				modelLoadInfo = await getModelLoadInfo(apiUrl, model.id, includeCredentials);
-				$modelLoadStates[model.id] = modelLoadInfo;
-				modelTooBig = modelLoadInfo?.state === "TooBig";
-
-				if (modelTooBig) {
-					// disable the widget
-					isDisabled = true;
-					inputSamples = allInputSamples.filter((sample) => sample.output !== undefined);
-					inputGroups = getExamplesGroups();
-				}
+			if (model.inference !== InferenceDisplayability.Yes) {
+				return;
 			}
 
-			const exampleFromQueryParams = {} as TWidgetExample;
-			for (const key of exampleQueryParams) {
-				const val = getQueryParamVal(key);
-				if (val) {
-					// @ts-expect-error complicated type
-					exampleFromQueryParams[key] = val;
-				}
-			}
-			if (Object.keys(exampleFromQueryParams).length) {
-				// run widget example from query params
-				applyInputSample(exampleFromQueryParams);
-			} else {
-				// run random widget example
-				const example = getWidgetExample<TWidgetExample>(model, validateExample);
-				if (callApiOnMount && example) {
-					applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-				}
+			const modelLoadInfo = await getModelLoadInfo(apiUrl, model.id, includeCredentials);
+			$modelLoadStates[model.id] = modelLoadInfo;
+
+			if (modelLoadInfo?.state === "TooBig") {
+				updateWidgetState(model.id, "isDisabled", true);
 			}
 		})();
 	});
 </script>
 
-{#if isDisabled && !inputSamples.length}
-	<WidgetHeader pipeline={model.pipeline_tag} noTitle={true} />
-	<WidgetInfo {model} {computeTime} {error} {modelLoadInfo} {modelTooBig} />
-{:else}
-	<!-- require that we have `modelLoadInfo` for InferenceDisplayability.Yes models -->
-	{#if modelLoadInfo || model.inference !== InferenceDisplayability.Yes}
-		<div
-			class="flex w-full max-w-full flex-col
-			 {isMaximized ? 'fixed inset-0 z-20 bg-white p-12' : ''}"
-		>
-			{#if isMaximized}
-				<button class="absolute right-12 top-6" on:click={() => (isMaximized = !isMaximized)}>
-					<IconCross classNames="text-xl text-gray-500 hover:text-black" />
-				</button>
-			{/if}
-			<WidgetHeader {noTitle} pipeline={model.pipeline_tag} {isDisabled}>
-				{#if !!inputGroups.length}
-					<div class="ml-auto flex gap-x-1">
-						<!-- Show samples selector when there are more than one sample -->
-						{#if inputGroups.length > 1}
-							<WidgetInputSamplesGroup
-								bind:selectedInputGroup
-								{isLoading}
-								inputGroups={inputGroups.map(({ group }) => group)}
-							/>
-						{/if}
-						<WidgetInputSamples
-							classNames={!selectedInputSamples ? "opacity-50 pointer-events-none" : ""}
-							{isLoading}
-							inputSamples={selectedInputSamples?.inputSamples ?? []}
-							{applyInputSample}
-						/>
-					</div>
-				{/if}
-			</WidgetHeader>
-			<slot name="top" {isDisabled} />
-			<WidgetInfo {model} {computeTime} {error} {modelLoadInfo} {modelTooBig} />
-			{#if modelLoading.isLoading}
-				<WidgetModelLoading estimatedTime={modelLoading.estimatedTime} />
-			{/if}
-			<slot name="bottom" />
-			<WidgetFooter bind:isMaximized {outputJson} {isDisabled} />
-		</div>
-	{/if}
+{#if $widgetStates?.[model.id]?.noInference}
+	<WidgetHeader {model} noTitle={true} />
+	<WidgetInfo {model} />
+{:else if $modelLoadStates[model.id] || model.inference !== InferenceDisplayability.Yes}
+	<form
+		class="flex w-full max-w-full flex-col
+	{isMaximized ? 'fixed inset-0 z-20 bg-white p-12' : ''}"
+	>
+		{#if isMaximized}
+			<button class="absolute right-12 top-6" on:click={() => updateWidgetState(model.id, "isMaximized", false)}>
+				<IconCross classNames="text-xl text-gray-500 hover:text-black" />
+			</button>
+		{/if}
+		<slot {WidgetInfo} {WidgetHeader} {WidgetFooter} />
+	</form>
 {/if}

packages/widgets/src/lib/components/InferenceWidget/shared/helpers.ts

@@ -1,5 +1,5 @@
-import type { ModelData, WidgetExample, WidgetExampleAttribute } from "@huggingface/tasks";
-import { randomItem, parseJSON } from "../../../utils/ViewUtils.js";
+import type { ModelData, WidgetExampleAttribute } from "@huggingface/tasks";
+import { parseJSON } from "../../../utils/ViewUtils.js";
 import type { ModelLoadInfo, TableData } from "./types.js";
 import { LoadState } from "./types.js";
 
@@ -21,16 +21,6 @@ export function getQueryParamVal(key: WidgetExampleAttribute): QueryParamVal {
 	return value;
 }
 
-export function getWidgetExample<TWidgetExample extends WidgetExample>(
-	model: ModelData,
-	validateExample: (sample: WidgetExample) => sample is TWidgetExample
-): TWidgetExample | undefined {
-	const validExamples = model.widgetData?.filter(
-		(sample): sample is TWidgetExample => sample && validateExample(sample)
-	);
-	return validExamples?.length ? randomItem(validExamples) : undefined;
-}
-
 // Update current url search params, keeping existing keys intact.
 export function updateUrl(obj: Partial<Record<WidgetExampleAttribute, string | undefined>>): void {
 	if (!window) {
@@ -63,7 +53,6 @@ export async function getBlobFromUrl(url: string): Promise<Blob> {
 	const blob = await res.blob();
 	return blob;
 }
-
 interface Success<T> {
 	computeTime: string;
 	output: T;

packages/widgets/src/lib/components/InferenceWidget/shared/types.ts

@@ -40,6 +40,12 @@ export interface ModelLoadInfo {
 	compute_type?: ComputeType;
 }
 
+export interface WidgetState {
+	isDisabled?: boolean;
+	noInference?: boolean;
+	isMaximized?: boolean;
+}
+
 export type TableData = Record<string, (string | number)[]>;
 
 export type HighlightCoordinates = Record<string, string>;

packages/widgets/src/lib/components/InferenceWidget/stores.ts

@@ -1,4 +1,21 @@
 import { writable } from "svelte/store";
-import type { ModelLoadInfo } from "./shared/types.js";
+import type { ModelData } from "@huggingface/tasks";
+import type { ModelLoadInfo, WidgetState } from "./shared/types.js";
 
-export const modelLoadStates = writable<Record<string, ModelLoadInfo>>({});
+export const modelLoadStates = writable<Record<ModelData["id"], ModelLoadInfo>>({});
+
+export const widgetNoInference = writable<Record<ModelData["id"], boolean>>({});
+
+export const widgetStates = writable<Record<ModelData["id"], WidgetState>>({});
+
+export function updateWidgetState(modelId: ModelData["id"], key: keyof WidgetState, val: boolean): void {
+	widgetStates.update((states) => {
+		// Check if the modelId exists, if not initialize it
+		if (!states[modelId]) {
+			states[modelId] = {};
+		}
+		// Update the specific property for the given modelId
+		states[modelId][key] = val;
+		return states;
+	});
+}

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

@@ -11,6 +11,7 @@
 	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers.js";
 	import { isValidOutputLabels } from "../../shared/outputValidation.js";
 	import { isAssetInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -19,6 +20,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let file: Blob | File | null = null;
@@ -130,7 +133,7 @@
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>, opts: ExampleRunOpts = {}) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 
@@ -155,44 +158,32 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
-				<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
-				<span class="mr-2 mt-1.5">or</span>
-				<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
-			</div>
-			{#if fileUrl}
-				<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
-			{/if}
-			<WidgetSubmitBtn
-				classNames="mt-2"
-				isDisabled={isRecording || isDisabled}
-				{isLoading}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputChart classNames="pt-4" {output} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+
+	<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
+		<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
+		<span class="mr-2 mt-1.5">or</span>
+		<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
+	</div>
+	{#if fileUrl}
+		<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
+	{/if}
+	<WidgetSubmitBtn
+		classNames="mt-2"
+		isDisabled={isRecording || isDisabled}
+		{isLoading}
+		onClick={() => {
+			getOutput();
+		}}
+	/>
+	{#if warning}
+		<div class="alert alert-warning mt-2">{warning}</div>
+	{/if}
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputChart classNames="pt-4" {output} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte

@@ -9,6 +9,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers.js";
 	import { isAssetInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -16,7 +17,8 @@
 	export let model: WidgetProps["model"];
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -131,7 +133,7 @@
 		throw new TypeError("Invalid output: output must be of type Array<blob:string, label:string, content-type:string>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		filename = sample.example_title ?? "";
 		fileUrl = sample.src;
 		if (opts.isPreview) {
@@ -146,46 +148,42 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
-				<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
-				<span class="mr-2 mt-1.5">or</span>
-				<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
-			</div>
-			{#if fileUrl}
-				<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
-			{/if}
-			<WidgetSubmitBtn
-				classNames="mt-2"
-				isDisabled={isRecording || isDisabled}
-				{isLoading}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#each output as item}
-			<div class="mt-2 flex items-center">
-				<span class="mr-2">{item.label}:</span>
-				<WidgetAudioTrack classNames="" src={item.src} />
-			</div>
-		{/each}
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetInput}
+	/>
+
+	<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
+		<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
+		<span class="mr-2 mt-1.5">or</span>
+		<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
+	</div>
+	{#if fileUrl}
+		<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
+	{/if}
+	<WidgetSubmitBtn
+		classNames="mt-2"
+		isDisabled={isRecording || isDisabled}
+		{isLoading}
+		onClick={() => {
+			getOutput();
+		}}
+	/>
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#each output as item}
+		<div class="mt-2 flex items-center">
+			<span class="mr-2">{item.label}:</span>
+			<WidgetAudioTrack classNames="" src={item.src} />
+		</div>
+	{/each}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

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

@@ -12,6 +12,7 @@
 	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers.js";
 	import { isValidOutputText } from "../../shared/outputValidation.js";
 	import { isAssetInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -19,7 +20,8 @@
 	export let model: WidgetProps["model"];
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -133,7 +135,7 @@
 		throw new TypeError("Invalid output: output must be of type <text:string>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
 		if (opts.isPreview) {
@@ -161,62 +163,50 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
-				{#if !isRealtimeRecording}
-					<WidgetFileInput accept="audio/*" classNames="mt-1.5" {onSelectFile} />
-					<span class="mx-2 mt-1.5">or</span>
-					<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
-				{/if}
-				{#if model?.library_name === "transformers"}
-					{#if !isRealtimeRecording}
-						<span class="mx-2 mt-1.5">or</span>
-					{/if}
-					<WidgetRealtimeRecorder
-						classNames="mt-1.5"
-						{apiToken}
-						{model}
-						{updateModelLoading}
-						onRecordStart={() => (isRealtimeRecording = true)}
-						onRecordStop={() => (isRealtimeRecording = false)}
-						onError={onRecordError}
-					/>
-				{/if}
-			</div>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+
+	<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
+		{#if !isRealtimeRecording}
+			<WidgetFileInput accept="audio/*" classNames="mt-1.5" {onSelectFile} />
+			<span class="mx-2 mt-1.5">or</span>
+			<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
+		{/if}
+		{#if model?.library_name === "transformers"}
 			{#if !isRealtimeRecording}
-				{#if fileUrl}
-					<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
-				{/if}
-				<WidgetSubmitBtn
-					classNames="mt-2"
-					isDisabled={isRecording || isDisabled}
-					{isLoading}
-					onClick={() => {
-						getOutput();
-					}}
-				/>
-				{#if warning}
-					<div class="alert alert-warning mt-2">{warning}</div>
-				{/if}
+				<span class="mx-2 mt-1.5">or</span>
 			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputText classNames="mt-4" {output} />
-	</svelte:fragment>
+			<WidgetRealtimeRecorder
+				classNames="mt-1.5"
+				{apiToken}
+				{model}
+				{updateModelLoading}
+				onRecordStart={() => (isRealtimeRecording = true)}
+				onRecordStop={() => (isRealtimeRecording = false)}
+				onError={onRecordError}
+			/>
+		{/if}
+	</div>
+	{#if !isRealtimeRecording}
+		{#if fileUrl}
+			<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
+		{/if}
+		<WidgetSubmitBtn
+			classNames="mt-2"
+			isDisabled={isRecording || isDisabled}
+			{isLoading}
+			onClick={() => {
+				getOutput();
+			}}
+		/>
+		{#if warning}
+			<div class="alert alert-warning mt-2">{warning}</div>
+		{/if}
+	{/if}
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputText classNames="mt-4" {output} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte

@@ -7,6 +7,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -15,7 +16,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	interface Conversation {
 		generated_responses: string[];
@@ -143,7 +145,7 @@
 		);
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		text = sample.text;
 		if (opts.isPreview) {
 			return;
@@ -153,34 +155,30 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isTextInput}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<WidgetOutputConvo modelId={model.id} {output} />
-		<form>
-			<WidgetQuickInput
-				bind:value={text}
-				flatTop={true}
-				{isLoading}
-				{isDisabled}
-				onClickSubmitBtn={() => {
-					getOutput();
-				}}
-				submitButtonLabel="Send"
-			/>
-		</form>
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isTextInput}
+	/>
+	<WidgetOutputConvo modelId={model.id} {output} />
+
+	<WidgetQuickInput
+		bind:value={text}
+		flatTop={true}
+		{isLoading}
+		{isDisabled}
+		onClickSubmitBtn={() => {
+			getOutput();
+		}}
+		submitButtonLabel="Send"
+	/>
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte

@@ -8,6 +8,7 @@
 	import { isTextInput } from "../../shared/inputValidation.js";
 
 	import { DataTable } from "./DataTable.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -16,7 +17,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -111,7 +113,7 @@
 		return Math.ceil(total_elems / SINGLE_DIM_COLS);
 	};
 
-	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		text = sample.text;
 		if (opts.isPreview) {
 			return;
@@ -121,76 +123,71 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isTextInput}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetQuickInput
-				bind:value={text}
-				{isLoading}
-				{isDisabled}
-				onClickSubmitBtn={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output}
-			{#if output.isArrLevel0}
-				<div class="mt-3 h-96 overflow-auto">
-					<table class="w-full table-auto border text-right font-mono text-xs">
-						{#each range(numOfRows(output.oneDim.length)) as i}
-							<tr>
-								{#each range(SINGLE_DIM_COLS) as j}
-									{#if j * numOfRows(output.oneDim.length) + i < output.oneDim.length}
-										<td class="bg-gray-100 px-1 text-gray-400 dark:bg-gray-900">
-											{j * numOfRows(output.oneDim.length) + i}
-										</td>
-										<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}
-								{/each}
-							</tr>
-						{/each}
-					</table>
-				</div>
-			{:else}
-				<div class="mt-3 overflow-auto">
-					<table class="border text-right font-mono text-xs">
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isTextInput}
+	/>
+
+	<WidgetQuickInput
+		bind:value={text}
+		{isLoading}
+		{isDisabled}
+		onClickSubmitBtn={() => {
+			getOutput();
+		}}
+	/>
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output}
+		{#if output.isArrLevel0}
+			<div class="mt-3 h-96 overflow-auto">
+				<table class="w-full table-auto border text-right font-mono text-xs">
+					{#each range(numOfRows(output.oneDim.length)) as i}
 						<tr>
-							<td class="bg-gray-100 dark:bg-gray-900" />
-							{#each range(output.twoDim[0].length) as j}
-								<td class="bg-gray-100 px-1 pt-1 text-gray-400 dark:bg-gray-900">{j}</td>
+							{#each range(SINGLE_DIM_COLS) as j}
+								{#if j * numOfRows(output.oneDim.length) + i < output.oneDim.length}
+									<td class="bg-gray-100 px-1 text-gray-400 dark:bg-gray-900">
+										{j * numOfRows(output.oneDim.length) + i}
+									</td>
+									<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}
 							{/each}
 						</tr>
-						{#each output.twoDim as column, i}
-							<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="px-1 py-1 {output.bg(x)}">
-										{x.toFixed(3)}
-									</td>
-								{/each}
-							</tr>
+					{/each}
+				</table>
+			</div>
+		{:else}
+			<div class="mt-3 overflow-auto">
+				<table class="border text-right font-mono text-xs">
+					<tr>
+						<td class="bg-gray-100 dark:bg-gray-900" />
+						{#each range(output.twoDim[0].length) as j}
+							<td class="bg-gray-100 px-1 pt-1 text-gray-400 dark:bg-gray-900">{j}</td>
 						{/each}
-					</table>
-				</div>
-			{/if}
+					</tr>
+					{#each output.twoDim as column, i}
+						<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="px-1 py-1 {output.bg(x)}">
+									{x.toFixed(3)}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</table>
+			</div>
 		{/if}
-	</svelte:fragment>
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

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

@@ -9,6 +9,7 @@
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isValidOutputLabels } from "../../shared/outputValidation.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -18,6 +19,8 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -112,7 +115,7 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
 		if (opts.isPreview) {
 			if (sample.output) {
@@ -131,40 +134,27 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			{#if model.pipeline_tag === "fill-mask"}
-				<div class="mb-1.5 text-sm text-gray-500">
-					Mask token: <code>{model.mask_token}</code>
-				</div>
-			{/if}
-			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
-			<WidgetSubmitBtn
-				classNames="mt-2"
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputChart classNames="pt-4" {output} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+
+	{#if model.pipeline_tag === "fill-mask"}
+		<div class="mb-1.5 text-sm text-gray-500">
+			Mask token: <code>{model.mask_token}</code>
+		</div>
+	{/if}
+	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+	<WidgetSubmitBtn
+		classNames="mt-2"
+		{isLoading}
+		{isDisabled}
+		onClick={() => {
+			getOutput();
+		}}
+	/>
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputChart classNames="pt-4" {output} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

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

@@ -9,6 +9,7 @@
 	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers.js";
 	import { isValidOutputLabels } from "../../shared/outputValidation.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -17,6 +18,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -92,7 +95,7 @@
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	async function applyInputSample(
+	async function applyWidgetExample(
 		sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>,
 		opts: ExampleRunOpts = {}
 	) {
@@ -117,56 +120,44 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetDropzone
-				classNames="no-hover:hidden"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
-			{#if imgSrc}
-				{#if imgSrc}
-					<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
-						<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
-					</div>
-				{/if}
-			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputChart classNames="pt-4" {output} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+
+	<WidgetDropzone
+		classNames="no-hover:hidden"
+		{isLoading}
+		{isDisabled}
+		{imgSrc}
+		{onSelectFile}
+		onError={(e) => (error = e)}
+	>
+		{#if imgSrc}
+			<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
+		{/if}
+	</WidgetDropzone>
+	<!-- Better UX for mobile/table through CSS breakpoints -->
+	{#if imgSrc}
+		{#if imgSrc}
+			<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
+				<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
+			</div>
+		{/if}
+	{/if}
+	<WidgetFileInput
+		accept="image/*"
+		classNames="mr-2 md:hidden"
+		{isLoading}
+		{isDisabled}
+		label="Browse for image"
+		{onSelectFile}
+	/>
+	{#if warning}
+		<div class="alert alert-warning mt-2">{warning}</div>
+	{/if}
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputChart classNames="pt-4" {output} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte

@@ -14,6 +14,7 @@
 	import { isAssetInput } from "../../shared/inputValidation.js";
 
 	import Canvas from "./Canvas.svelte";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -22,6 +23,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	const maskOpacity = Math.floor(255 * 0.6);
 	const colorToRgb = Object.fromEntries(
 		COLORS.map((color) => {
@@ -210,7 +213,7 @@
 		};
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
+	async function applyWidgetExample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		imgSrc = sample.src;
 		if (opts.isPreview) {
 			output = [];
@@ -229,53 +232,49 @@
 	});
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetDropzone
-				classNames="hidden md:block"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<Canvas {imgSrc} {highlightIndex} {mousemove} {mouseout} {output} />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
-			{#if imgSrc}
-				<Canvas classNames="mr-2 md:hidden" {imgSrc} {highlightIndex} {mousemove} {mouseout} {output} />
-			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-			<img alt="" bind:this={imgEl} class="hidden" src={imgSrc} />
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputChart classNames="pt-4" {output} {highlightIndex} {mouseover} {mouseout} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetInput}
+	/>
+
+	<WidgetDropzone
+		classNames="hidden md:block"
+		{isLoading}
+		{isDisabled}
+		{imgSrc}
+		{onSelectFile}
+		onError={(e) => (error = e)}
+	>
+		{#if imgSrc}
+			<Canvas {imgSrc} {highlightIndex} {mousemove} {mouseout} {output} />
+		{/if}
+	</WidgetDropzone>
+	<!-- Better UX for mobile/table through CSS breakpoints -->
+	{#if imgSrc}
+		<Canvas classNames="mr-2 md:hidden" {imgSrc} {highlightIndex} {mousemove} {mouseout} {output} />
+	{/if}
+	<WidgetFileInput
+		accept="image/*"
+		classNames="mr-2 md:hidden"
+		{isLoading}
+		{isDisabled}
+		label="Browse for image"
+		{onSelectFile}
+	/>
+	{#if warning}
+		<div class="alert alert-warning mt-2">{warning}</div>
+	{/if}
+	<img alt="" bind:this={imgEl} class="hidden" src={imgSrc} />
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputChart classNames="pt-4" {output} {highlightIndex} {mouseover} {mouseout} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte

@@ -9,6 +9,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers.js";
 	import { isAssetAndPromptInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -17,6 +18,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -61,7 +64,7 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput, opts: ExampleRunOpts = {}) {
+	async function applyWidgetExample(sample: WidgetExampleAssetAndPromptInput, opts: ExampleRunOpts = {}) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
 		if (opts.isPreview) {
@@ -133,70 +136,66 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetAndPromptInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="space-y-2">
-			<WidgetDropzone
-				classNames="hidden md:block"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetAndPromptInput}
+	/>
+	<div class="space-y-2">
+		<WidgetDropzone
+			classNames="hidden md:block"
+			{isLoading}
+			{isDisabled}
+			{imgSrc}
+			{onSelectFile}
+			onError={(e) => (error = e)}
+		>
+			{#if imgSrc}
+				<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
+			{/if}
+		</WidgetDropzone>
+		<!-- Better UX for mobile/table through CSS breakpoints -->
+		{#if imgSrc}
 			{#if imgSrc}
-				{#if imgSrc}
-					<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
-						<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
-					</div>
-				{/if}
+				<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
+					<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
+				</div>
 			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			<WidgetTextInput
-				bind:value={prompt}
-				{isDisabled}
-				label="(Optional) Text-guidance if the model has support for it"
-				placeholder="Your prompt here..."
-			/>
-			<WidgetSubmitBtn
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output.length}
-			<div class="mt-4 flex justify-center bg-gray-50 dark:bg-gray-925">
-				<img class="max-w-sm object-contain" src={output} alt="" />
-			</div>
 		{/if}
-	</svelte:fragment>
+		<WidgetFileInput
+			accept="image/*"
+			classNames="mr-2 md:hidden"
+			{isLoading}
+			{isDisabled}
+			label="Browse for image"
+			{onSelectFile}
+		/>
+		<WidgetTextInput
+			bind:value={prompt}
+			{isDisabled}
+			label="(Optional) Text-guidance if the model has support for it"
+			placeholder="Your prompt here..."
+		/>
+		<WidgetSubmitBtn
+			{isLoading}
+			{isDisabled}
+			onClick={() => {
+				getOutput();
+			}}
+		/>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output.length}
+		<div class="mt-4 flex justify-center bg-gray-50 dark:bg-gray-925">
+			<img class="max-w-sm object-contain" src={output} alt="" />
+		</div>
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte

@@ -8,6 +8,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers.js";
 	import { isAssetInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -16,6 +17,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -92,7 +95,7 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
+	async function applyWidgetExample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		imgSrc = sample.src;
 		if (opts.isPreview) {
 			output = "";
@@ -104,58 +107,54 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetDropzone
-				classNames="hidden md:block"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
-			{#if imgSrc}
-				{#if imgSrc}
-					<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
-						<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
-					</div>
-				{/if}
-			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if model?.pipeline_tag !== "text-generation"}
-			<WidgetOutputText classNames="mt-4" {output} />
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetInput}
+	/>
+
+	<WidgetDropzone
+		classNames="hidden md:block"
+		{isLoading}
+		{isDisabled}
+		{imgSrc}
+		{onSelectFile}
+		onError={(e) => (error = e)}
+	>
+		{#if imgSrc}
+			<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
+		{/if}
+	</WidgetDropzone>
+	<!-- Better UX for mobile/table through CSS breakpoints -->
+	{#if imgSrc}
+		{#if imgSrc}
+			<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
+				<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
+			</div>
 		{/if}
-	</svelte:fragment>
+	{/if}
+	<WidgetFileInput
+		accept="image/*"
+		classNames="mr-2 md:hidden"
+		{isLoading}
+		{isDisabled}
+		label="Browse for image"
+		{onSelectFile}
+	/>
+	{#if warning}
+		<div class="alert alert-warning mt-2">{warning}</div>
+	{/if}
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if model?.pipeline_tag !== "text-generation"}
+		<WidgetOutputText classNames="mt-4" {output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte

@@ -12,6 +12,7 @@
 	import { isAssetInput } from "../../shared/inputValidation.js";
 
 	import BoundingBoxes from "./SvgBoundingBoxes.svelte";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -20,6 +21,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -128,7 +131,7 @@
 		highlightIndex = index;
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
+	async function applyWidgetExample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		imgSrc = sample.src;
 		if (opts.isPreview) {
 			output = [];
@@ -141,52 +144,48 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetDropzone
-				classNames="hidden md:block"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<BoundingBoxes {imgSrc} {mouseover} {mouseout} {output} {highlightIndex} />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
-			{#if imgSrc}
-				<BoundingBoxes classNames="mb-2 md:hidden" {imgSrc} {mouseover} {mouseout} {output} {highlightIndex} />
-			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputChart classNames="pt-4" {output} {highlightIndex} {mouseover} {mouseout} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetInput}
+	/>
+
+	<WidgetDropzone
+		classNames="hidden md:block"
+		{isLoading}
+		{isDisabled}
+		{imgSrc}
+		{onSelectFile}
+		onError={(e) => (error = e)}
+	>
+		{#if imgSrc}
+			<BoundingBoxes {imgSrc} {mouseover} {mouseout} {output} {highlightIndex} />
+		{/if}
+	</WidgetDropzone>
+	<!-- Better UX for mobile/table through CSS breakpoints -->
+	{#if imgSrc}
+		<BoundingBoxes classNames="mb-2 md:hidden" {imgSrc} {mouseover} {mouseout} {output} {highlightIndex} />
+	{/if}
+	<WidgetFileInput
+		accept="image/*"
+		classNames="mr-2 md:hidden"
+		{isLoading}
+		{isDisabled}
+		label="Browse for image"
+		{onSelectFile}
+	/>
+	{#if warning}
+		<div class="alert alert-warning mt-2">{warning}</div>
+	{/if}
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputChart classNames="pt-4" {output} {highlightIndex} {mouseover} {mouseout} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte

@@ -12,6 +12,7 @@
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isValidOutputAnswerScore } from "../../shared/outputValidation.js";
 	import { isTextAndContextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -21,6 +22,8 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let context = "";
 	let computeTime = "";
 	let error: string = "";
@@ -108,7 +111,7 @@
 		throw new TypeError("Invalid output: output must be of type <answer:string; score:number>");
 	}
 
-	function applyInputSample(
+	function applyWidgetExample(
 		sample: WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>,
 		opts: ExampleRunOpts = {}
 	) {
@@ -128,46 +131,33 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
-	exampleQueryParams={["context", "text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="space-y-2">
-			<WidgetQuickInput
-				bind:value={question}
-				{isLoading}
-				{isDisabled}
-				onClickSubmitBtn={() => {
-					getOutput();
-				}}
-			/>
-			<WidgetTextarea
-				bind:value={context}
-				bind:setValue={setTextAreaValue}
-				{isDisabled}
-				placeholder="Please input some context..."
-				label="Context"
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output}
-			<div class="alert alert-success mt-4 flex items-baseline">
-				<span>{output.answer}</span>
-				<span class="ml-auto font-mono text-xs">{output.score.toFixed(3)}</span>
-			</div>
-		{/if}
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+	<div class="space-y-2">
+		<WidgetQuickInput
+			bind:value={question}
+			{isLoading}
+			{isDisabled}
+			onClickSubmitBtn={() => {
+				getOutput();
+			}}
+		/>
+		<WidgetTextarea
+			bind:value={context}
+			bind:setValue={setTextAreaValue}
+			{isDisabled}
+			placeholder="Please input some context..."
+			label="Context"
+		/>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output}
+		<div class="alert alert-success mt-4 flex items-baseline">
+			<span>{output.answer}</span>
+			<span class="ml-auto font-mono text-xs">{output.score.toFixed(3)}</span>
+		</div>
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ReinforcementLearningWidget/ReinforcementLearningWidget.svelte

@@ -38,7 +38,7 @@
 	does NOT use InferenceAPI (unlike other pipelines widgets)
 -->
 <div class="flex w-full max-w-full flex-col">
-	<WidgetHeader title="Video Preview" pipeline="reinforcement-learning" />
+	<WidgetHeader title="Video Preview" {model} />
 	<div class="w-full overflow-hidden rounded-lg">
 		{#if replay === Replay.Available}
 			<!-- svelte-ignore a11y-media-has-caption -->

packages/widgets/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte

@@ -9,6 +9,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers.js";
 	import { isSentenceSimilarityInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -17,6 +18,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let sourceSentence = "";
 	let comparisonSentences: Array<string> = [];
 	let nComparisonSentences = 2;
@@ -121,7 +124,7 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleSentenceSimilarityInput, opts: ExampleRunOpts = {}) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
@@ -133,55 +136,51 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isSentenceSimilarityInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="flex flex-col space-y-2">
-			<WidgetTextInput
-				bind:value={sourceSentence}
-				{isDisabled}
-				label="Source Sentence"
-				placeholder={isDisabled ? "" : "Your sentence here..."}
-			/>
-			<WidgetTextInput
-				bind:value={comparisonSentences[0]}
-				{isDisabled}
-				label="Sentences to compare to"
-				placeholder={isDisabled ? "" : "Your sentence here..."}
-			/>
-			{#each Array(nComparisonSentences - 1) as _, idx}
-				<WidgetTextInput bind:value={comparisonSentences[idx + 1]} {isDisabled} placeholder="Your sentence here..." />
-			{/each}
-			<WidgetAddSentenceBtn
-				isDisabled={nComparisonSentences === maxComparisonSentences || isDisabled}
-				onClick={() => {
-					nComparisonSentences++;
-				}}
-			/>
-			<WidgetSubmitBtn
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output.length}
-			<WidgetOutputChart classNames="pt-4" {output} />
-		{/if}
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isSentenceSimilarityInput}
+	/>
+	<div class="flex flex-col space-y-2">
+		<WidgetTextInput
+			bind:value={sourceSentence}
+			{isDisabled}
+			label="Source Sentence"
+			placeholder={isDisabled ? "" : "Your sentence here..."}
+		/>
+		<WidgetTextInput
+			bind:value={comparisonSentences[0]}
+			{isDisabled}
+			label="Sentences to compare to"
+			placeholder={isDisabled ? "" : "Your sentence here..."}
+		/>
+		{#each Array(nComparisonSentences - 1) as _, idx}
+			<WidgetTextInput bind:value={comparisonSentences[idx + 1]} {isDisabled} placeholder="Your sentence here..." />
+		{/each}
+		<WidgetAddSentenceBtn
+			isDisabled={nComparisonSentences === maxComparisonSentences || isDisabled}
+			onClick={() => {
+				nComparisonSentences++;
+			}}
+		/>
+		<WidgetSubmitBtn
+			{isLoading}
+			{isDisabled}
+			onClick={() => {
+				getOutput();
+			}}
+		/>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output.length}
+		<WidgetOutputChart classNames="pt-4" {output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte

@@ -8,6 +8,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -17,6 +18,8 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -93,7 +96,7 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
 		if (opts.isPreview) {
 			return;
@@ -103,34 +106,29 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isTextInput}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="space-y-2">
-			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
-			<WidgetSubmitBtn
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOutputText classNames="mt-4" {output} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isTextInput}
+	/>
+	<div class="space-y-2">
+		<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+		<WidgetSubmitBtn
+			{isLoading}
+			{isDisabled}
+			onClick={() => {
+				getOutput();
+			}}
+		/>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOutputText classNames="mt-4" {output} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte

@@ -14,6 +14,7 @@
 		updateUrl,
 	} from "../../shared/helpers.js";
 	import { isTextAndTableInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 	interface Output {
 		aggregator?: string;
 		answer: string;
@@ -29,6 +30,8 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	let computeTime = "";
 	let error: string = "";
 	let isLoading = false;
@@ -142,7 +145,7 @@
 		);
 	}
 
-	function applyInputSample(sample: WidgetExampleTextAndTableInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextAndTableInput, opts: ExampleRunOpts = {}) {
 		query = sample.text;
 		table = convertDataToTable(sample.table);
 		if (opts.isPreview) {
@@ -153,39 +156,35 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isTextAndTableInput}
-	exampleQueryParams={["text", "table"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetQuickInput
-				bind:value={query}
-				{isLoading}
-				{isDisabled}
-				onClickSubmitBtn={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-		<div class="mt-4">
-			{#if output}
-				<WidgetOutputTableQA {output} {isAnswerOnlyOutput} />
-			{/if}
-			{#if table.length > 1 || table[0].length > 1}
-				<WidgetTableInput {highlighted} onChange={onChangeTable} {table} {isDisabled} />
-			{/if}
-		</div>
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isTextAndTableInput}
+	/>
+
+	<WidgetQuickInput
+		bind:value={query}
+		{isLoading}
+		{isDisabled}
+		onClickSubmitBtn={() => {
+			getOutput();
+		}}
+	/>
+
+	<div class="mt-4">
+		{#if output}
+			<WidgetOutputTableQA {output} {isAnswerOnlyOutput} />
+		{/if}
+		{#if table.length > 1 || table[0].length > 1}
+			<WidgetTableInput {highlighted} onChange={onChangeTable} {table} {isDisabled} />
+		{/if}
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

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

@@ -14,6 +14,7 @@
 		updateUrl,
 	} from "../../shared/helpers.js";
 	import { isStructuredDataInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -23,6 +24,8 @@
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	const widgetData = model?.widgetData?.[0] as WidgetExampleStructuredDataInput<WidgetExampleOutputLabels> | undefined;
 	const columns: string[] = Object.keys(widgetData?.structured_data ?? {});
 
@@ -167,7 +170,7 @@
 		);
 	}
 
-	function applyInputSample(sample: WidgetExampleStructuredDataInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleStructuredDataInput, opts: ExampleRunOpts = {}) {
 		table = convertDataToTable(sample.structured_data);
 		if (opts.isPreview) {
 			return;
@@ -177,44 +180,38 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isStructuredDataInput}
-	exampleQueryParams={["structured_data"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<div class="mt-4">
-				{#if table.length > 1 || table[1]?.length > 1}
-					<WidgetTableInput
-						{highlighted}
-						{isLoading}
-						{isDisabled}
-						onChange={onChangeTable}
-						table={tableWithOutput}
-						canAddCol={false}
-						bind:scrollTableToRight
-					/>
-				{/if}
-			</div>
-			<WidgetSubmitBtn
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isStructuredDataInput}
+	/>
+
+	<div class="mt-4">
+		{#if table.length > 1 || table[1]?.length > 1}
+			<WidgetTableInput
+				{highlighted}
 				{isLoading}
 				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
+				onChange={onChangeTable}
+				table={tableWithOutput}
+				canAddCol={false}
+				bind:scrollTableToRight
 			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom" />
+		{/if}
+	</div>
+	<WidgetSubmitBtn
+		{isLoading}
+		{isDisabled}
+		onClick={() => {
+			getOutput();
+		}}
+	/>
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

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

@@ -13,6 +13,7 @@
 	import { isValidOutputText } from "../../shared/outputValidation.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
 	import type { PipelineType } from "@huggingface/tasks";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -23,6 +24,8 @@
 	export let includeCredentials: WidgetProps["includeCredentials"];
 	export let isLoggedIn: WidgetProps["includeCredentials"];
 
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
+
 	const isBloomLoginRequired = isLoggedIn === false && model.id === "bigscience/bloom";
 
 	let computeTime = "";
@@ -165,7 +168,7 @@
 		renderTypingEffect(prefix + output);
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
 		if (opts.isPreview) {
 			if (sample.output) {
@@ -195,66 +198,53 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="space-y-2">
-			<WidgetTextarea
-				bind:value={text}
-				bind:setValue={setTextAreaValue}
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+	<div class="space-y-2">
+		<WidgetTextarea
+			bind:value={text}
+			bind:setValue={setTextAreaValue}
+			{isLoading}
+			{isDisabled}
+			size="big"
+			bind:renderTypingEffect
+		/>
+		{#if model.id === "bigscience/bloom"}
+			<WidgetBloomDecoding bind:decodingStrategy />
+		{/if}
+		<div class="flex items-center gap-x-2 {isBloomLoginRequired ? 'pointer-events-none opacity-50' : ''}">
+			<WidgetSubmitBtn
 				{isLoading}
 				{isDisabled}
-				size="big"
-				bind:renderTypingEffect
+				onClick={() => {
+					getOutput({ useCache });
+				}}
 			/>
-			{#if model.id === "bigscience/bloom"}
-				<WidgetBloomDecoding bind:decodingStrategy />
-			{/if}
-			<div class="flex items-center gap-x-2 {isBloomLoginRequired ? 'pointer-events-none opacity-50' : ''}">
-				<WidgetSubmitBtn
-					{isLoading}
-					{isDisabled}
-					onClick={() => {
-						getOutput({ useCache });
-					}}
-				/>
-				<WidgetShortcutRunLabel {isLoading} {isDisabled} />
-				<div class="ml-auto self-start">
-					<WidgetTimer bind:this={inferenceTimer} {isDisabled} />
-				</div>
+			<WidgetShortcutRunLabel {isLoading} {isDisabled} />
+			<div class="ml-auto self-start">
+				<WidgetTimer bind:this={inferenceTimer} {isDisabled} />
+			</div>
+		</div>
+		{#if warning}
+			<div class="alert alert-warning mt-2">{warning}</div>
+		{/if}
+		{#if isBloomLoginRequired}
+			<div class="alert alert-warning mt-2">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				Please
+				<span class="cursor-pointer underline" on:click={redirectLogin}>login</span>
+				or
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<span class="cursor-pointer underline" on:click={redirectJoin}>register</span> to try BLOOM 🌸
 			</div>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-			{#if isBloomLoginRequired}
-				<div class="alert alert-warning mt-2">
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					Please
-					<span class="cursor-pointer underline" on:click={redirectLogin}>login</span>
-					or
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<span class="cursor-pointer underline" on:click={redirectJoin}>register</span> to try BLOOM 🌸
-				</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if model?.pipeline_tag !== "text-generation"}
-			<!-- for pipelines: text2text-generation & translation -->
-			<WidgetOutputText classNames="mt-4" {output} />
 		{/if}
-	</svelte:fragment>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if model?.pipeline_tag !== "text-generation"}
+		<!-- for pipelines: text2text-generation & translation -->
+		<WidgetOutputText classNames="mt-4" {output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

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

@@ -7,6 +7,7 @@
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isValidOutputUrl } from "../../shared/outputValidation.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -15,7 +16,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -98,7 +100,7 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>, opts: ExampleRunOpts = {}) {
 		text = sample.text;
 		if (opts.isPreview) {
 			if (sample.output) {
@@ -117,31 +119,18 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	{validateExample}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetQuickInput bind:value={text} {isLoading} {isDisabled} onClickSubmitBtn={() => getOutput()} />
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output.length}
-			<div class="mt-4 flex justify-center bg-gray-50 dark:bg-gray-925">
-				<img class="max-w-sm object-contain" src={output} alt="" />
-			</div>
-		{/if}
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+
+	<WidgetQuickInput bind:value={text} {isLoading} {isDisabled} onClickSubmitBtn={() => getOutput()} />
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output.length}
+		<div class="mt-4 flex justify-center bg-gray-50 dark:bg-gray-925">
+			<img class="max-w-sm object-contain" src={output} alt="" />
+		</div>
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte

@@ -8,6 +8,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -16,7 +17,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -93,7 +95,7 @@
 		throw new TypeError("Invalid output: output must be of type object & instance of Blob");
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
 		if (opts.isPreview) {
 			return;
@@ -103,37 +105,32 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isTextInput}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
-			<WidgetSubmitBtn
-				classNames="mt-2"
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output.length}
-			<WidgetAudioTrack classNames="mt-4" src={output} />
-		{/if}
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isTextInput}
+	/>
+
+	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+	<WidgetSubmitBtn
+		classNames="mt-2"
+		{isLoading}
+		{isDisabled}
+		onClick={() => {
+			getOutput();
+		}}
+	/>
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output.length}
+		<WidgetAudioTrack classNames="mt-4" src={output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte

@@ -9,6 +9,7 @@
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isTextInput } from "../../shared/inputValidation.js";
 	import { uniqBy } from "../../../../utils/ViewUtils.js";
+	import { widgetStates } from "../../stores.js";
 
 	interface EntityGroup {
 		entity_group: string;
@@ -32,7 +33,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -214,7 +216,7 @@
 		return a.type === b.type && a.start === b.start && a.end === b.end;
 	}
 
-	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
 		if (opts.isPreview) {
 			return;
@@ -224,38 +226,33 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isTextInput}
-	exampleQueryParams={["text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form>
-			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
-			<WidgetSubmitBtn
-				classNames="mt-2"
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		<WidgetOuputTokens classNames="mt-2" {output} text={outputText} />
-	</svelte:fragment>
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isTextInput}
+	/>
+
+	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+	<WidgetSubmitBtn
+		classNames="mt-2"
+		{isLoading}
+		{isDisabled}
+		onClick={() => {
+			getOutput();
+		}}
+	/>
+	{#if warning}
+		<div class="alert alert-warning mt-2">{warning}</div>
+	{/if}
+
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	<WidgetOuputTokens classNames="mt-2" {output} text={outputText} />
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte

@@ -9,6 +9,7 @@
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers.js";
 	import { isAssetAndTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -16,7 +17,8 @@
 	export let model: WidgetProps["model"];
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let computeTime = "";
 	let error: string = "";
@@ -69,7 +71,7 @@
 		throw new TypeError("Invalid output: output must be of type Array<{ answer: string, score?: number }>");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetAndTextInput, opts: ExampleRunOpts = {}) {
+	async function applyWidgetExample(sample: WidgetExampleAssetAndTextInput, opts: ExampleRunOpts = {}) {
 		question = sample.text;
 		imgSrc = sample.src;
 		if (opts.isPreview) {
@@ -145,63 +147,59 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetAndTextInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="space-y-2">
-			<WidgetDropzone
-				classNames="hidden md:block"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetAndTextInput}
+	/>
+	<div class="space-y-2">
+		<WidgetDropzone
+			classNames="hidden md:block"
+			{isLoading}
+			{isDisabled}
+			{imgSrc}
+			{onSelectFile}
+			onError={(e) => (error = e)}
+		>
+			{#if imgSrc}
+				<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
+			{/if}
+		</WidgetDropzone>
+		<!-- Better UX for mobile/table through CSS breakpoints -->
+		{#if imgSrc}
 			{#if imgSrc}
-				{#if imgSrc}
-					<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
-						<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
-					</div>
-				{/if}
+				<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
+					<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
+				</div>
 			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			<WidgetQuickInput
-				bind:value={question}
-				{isLoading}
-				{isDisabled}
-				onClickSubmitBtn={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output}
-			<WidgetOutputChart labelField="answer" classNames="pt-4" {output} />
 		{/if}
-	</svelte:fragment>
+		<WidgetFileInput
+			accept="image/*"
+			classNames="mr-2 md:hidden"
+			{isLoading}
+			{isDisabled}
+			label="Browse for image"
+			{onSelectFile}
+		/>
+		<WidgetQuickInput
+			bind:value={question}
+			{isLoading}
+			{isDisabled}
+			onClickSubmitBtn={() => {
+				getOutput();
+			}}
+		/>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output}
+		<WidgetOutputChart labelField="answer" classNames="pt-4" {output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ZeroShotClassificationWidget/ZeroShotClassificationWidget.svelte

@@ -10,6 +10,7 @@
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers.js";
 	import { isZeroShotTextInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -18,7 +19,8 @@
 	export let noTitle: WidgetProps["noTitle"];
 	export let shouldUpdateUrl: WidgetProps["shouldUpdateUrl"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let candidateLabels = "";
 	let computeTime = "";
@@ -134,7 +136,7 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function applyInputSample(sample: WidgetExampleZeroShotTextInput, opts: ExampleRunOpts = {}) {
+	function applyWidgetExample(sample: WidgetExampleZeroShotTextInput, opts: ExampleRunOpts = {}) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);
@@ -146,51 +148,41 @@
 	}
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isZeroShotTextInput}
-	exampleQueryParams={["candidate_labels", "multi_class", "text"]}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="flex flex-col space-y-2">
-			<WidgetTextarea
-				bind:value={text}
-				bind:setValue={setTextAreaValue}
-				{isDisabled}
-				placeholder="Text to classify..."
-			/>
-			<WidgetTextInput
-				bind:value={candidateLabels}
-				{isDisabled}
-				label="Possible class names (comma-separated)"
-				placeholder="Possible class names..."
-			/>
-			<WidgetCheckbox bind:checked={multiClass} label="Allow multiple true classes" />
-			<WidgetSubmitBtn
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-			{#if warning}
-				<div class="alert alert-warning mt-2">{warning}</div>
-			{/if}
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output.length}
-			<WidgetOutputChart classNames="pt-4" {output} />
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isZeroShotTextInput}
+	/>
+	<div class="flex flex-col space-y-2">
+		<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} placeholder="Text to classify..." />
+		<WidgetTextInput
+			bind:value={candidateLabels}
+			{isDisabled}
+			label="Possible class names (comma-separated)"
+			placeholder="Possible class names..."
+		/>
+		<WidgetCheckbox bind:checked={multiClass} label="Allow multiple true classes" />
+		<WidgetSubmitBtn
+			{isLoading}
+			{isDisabled}
+			onClick={() => {
+				getOutput();
+			}}
+		/>
+		{#if warning}
+			<div class="alert alert-warning mt-2">{warning}</div>
 		{/if}
-	</svelte:fragment>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output.length}
+		<WidgetOutputChart classNames="pt-4" {output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte

@@ -2,16 +2,15 @@
 	import type { WidgetProps, ExampleRunOpts, InferenceRunOpts } from "../../shared/types.js";
 	import type { WidgetExampleAssetAndZeroShotInput } from "@huggingface/tasks";
 
-	import { onMount } from "svelte";
-
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetTextInput from "../../shared/WidgetTextInput/WidgetTextInput.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
-	import { addInferenceParameters, callInferenceApi, getWidgetExample } from "../../shared/helpers.js";
+	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers.js";
 	import { isAssetAndZeroShotInput } from "../../shared/inputValidation.js";
+	import { widgetStates } from "../../stores.js";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -19,7 +18,8 @@
 	export let model: WidgetProps["model"];
 	export let noTitle: WidgetProps["noTitle"];
 	export let includeCredentials: WidgetProps["includeCredentials"];
-	let isDisabled = false;
+
+	$: isDisabled = $widgetStates?.[model.id]?.isDisabled;
 
 	let candidateLabels = "";
 	let computeTime = "";
@@ -69,7 +69,7 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput, opts: ExampleRunOpts = {}) {
+	async function applyWidgetExample(sample: WidgetExampleAssetAndZeroShotInput, opts: ExampleRunOpts = {}) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
 		if (opts.isPreview) {
@@ -146,79 +146,66 @@
 			error = res.error;
 		}
 	}
-
-	onMount(() => {
-		(async () => {
-			const example = getWidgetExample<WidgetExampleAssetAndZeroShotInput>(model, isAssetAndZeroShotInput);
-			if (callApiOnMount && example) {
-				await applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-			}
-		})();
-	});
 </script>
 
-<WidgetWrapper
-	{callApiOnMount}
-	{apiUrl}
-	{includeCredentials}
-	{applyInputSample}
-	{computeTime}
-	{error}
-	{isLoading}
-	{model}
-	{modelLoading}
-	{noTitle}
-	{outputJson}
-	validateExample={isAssetAndZeroShotInput}
->
-	<svelte:fragment slot="top" let:isDisabled>
-		<form class="space-y-2">
-			<WidgetDropzone
-				classNames="hidden md:block"
-				{isLoading}
-				{isDisabled}
-				{imgSrc}
-				{onSelectFile}
-				onError={(e) => (error = e)}
-			>
-				{#if imgSrc}
-					<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
-				{/if}
-			</WidgetDropzone>
-			<!-- Better UX for mobile/table through CSS breakpoints -->
+<WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		validateExample={isAssetAndZeroShotInput}
+	/>
+	<div class="space-y-2">
+		<WidgetDropzone
+			classNames="hidden md:block"
+			{isLoading}
+			{isDisabled}
+			{imgSrc}
+			{onSelectFile}
+			onError={(e) => (error = e)}
+		>
+			{#if imgSrc}
+				<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
+			{/if}
+		</WidgetDropzone>
+		<!-- Better UX for mobile/table through CSS breakpoints -->
+		{#if imgSrc}
 			{#if imgSrc}
-				{#if imgSrc}
-					<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
-						<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
-					</div>
-				{/if}
+				<div class="mb-2 flex justify-center bg-gray-50 dark:bg-gray-900 md:hidden">
+					<img src={imgSrc} class="pointer-events-none max-h-44" alt="" />
+				</div>
 			{/if}
-			<WidgetFileInput
-				accept="image/*"
-				classNames="mr-2 md:hidden"
-				{isLoading}
-				{isDisabled}
-				label="Browse for image"
-				{onSelectFile}
-			/>
-			<WidgetTextInput
-				bind:value={candidateLabels}
-				{isDisabled}
-				label="Possible class names (comma-separated)"
-				placeholder="Possible class names..."
-			/>
-			<WidgetSubmitBtn
-				{isLoading}
-				{isDisabled}
-				onClick={() => {
-					getOutput();
-				}}
-			/>
-		</form>
-	</svelte:fragment>
-	<svelte:fragment slot="bottom">
-		{#if output.length}
-			<WidgetOutputChart classNames="pt-4" {output} />
 		{/if}
-	</svelte:fragment>
+		<WidgetFileInput
+			accept="image/*"
+			classNames="mr-2 md:hidden"
+			{isLoading}
+			{isDisabled}
+			label="Browse for image"
+			{onSelectFile}
+		/>
+		<WidgetTextInput
+			bind:value={candidateLabels}
+			{isDisabled}
+			label="Possible class names (comma-separated)"
+			placeholder="Possible class names..."
+		/>
+		<WidgetSubmitBtn
+			{isLoading}
+			{isDisabled}
+			onClick={() => {
+				getOutput();
+			}}
+		/>
+	</div>
+	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
+
+	{#if output.length}
+		<WidgetOutputChart classNames="pt-4" {output} />
+	{/if}
+
+	<WidgetFooter {model} {isDisabled} {outputJson} />
 </WidgetWrapper>

packages/widgets/src/routes/+page.svelte

@@ -212,7 +212,7 @@
 			],
 		},
 		{
-			id: "gpt2",
+			id: "mistralai/Mistral-7B-v0.1",
 			pipeline_tag: "text-generation",
 			inference: InferenceDisplayability.Yes,
 			widgetData: [
@@ -228,11 +228,11 @@
 			pipeline_tag: "text-generation",
 			inference: InferenceDisplayability.Yes,
 			widgetData: [
-				{ text: "My name is Julien and I like to" },
-				{ text: "My name is Thomas and my main" },
-				{ text: "My name is Mariama, my favorite" },
-				{ text: "My name is Clara and I am" },
-				{ text: "Once upon a time," },
+				{ text: "My name is Julien and I like to", group: "English" },
+				{ text: "My name is Thomas and my main", group: "English" },
+				{ text: "My name is Mariama, my favorite", group: "French" },
+				{ text: "My name is Clara and I am", group: "French" },
+				{ text: "Once upon a time,", group: "French" },
 			],
 		},
 		{