diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
index 84bbfa8df..70d58571a 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -75,7 +75,7 @@ export type WidgetExampleAssetAndZeroShotInput<TOutput = WidgetExampleOutput> =
 	WidgetExampleZeroShotTextInput<TOutput>;
 
 export interface WidgetExampleStructuredDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
-	structuredData: TableData;
+	structured_data: TableData;
 }
 
 export interface WidgetExampleTableDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
index 26e962e15..3abf629fa 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ExampleRunOpts } from "../types";
 	import type { WidgetExample } from "../WidgetExample";
 
 	type TWidgetExample = $$Generic<WidgetExample>;
@@ -10,8 +11,7 @@
 	export let classNames = "";
 	export let isLoading = false;
 	export let inputSamples: TWidgetExample[];
-	export let applyInputSample: (sample: TWidgetExample) => void;
-	export let previewInputSample: (sample: TWidgetExample) => void;
+	export let applyInputSample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void;
 
 	let containerEl: HTMLElement;
 	let isOptionsVisible = false;
@@ -32,7 +32,7 @@
 
 	function _previewInputSample(idx: number) {
 		const sample = inputSamples[idx];
-		previewInputSample(sample);
+		applyInputSample(sample, { isPreview: true });
 	}
 
 	function toggleOptionsVisibility() {
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
index 1d3925c3e..901567cd6 100644
--- a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
+++ b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { WidgetProps, ModelLoadInfo } from "../types";
+	import type { WidgetProps, ModelLoadInfo, ExampleRunOpts } from "../types";
 	import type { WidgetExample } from "../WidgetExample";
+	import type { QueryParam } from "../../shared/helpers";
 
 	type TWidgetExample = $$Generic<WidgetExample>;
 
@@ -13,10 +14,11 @@
 	import WidgetHeader from "../WidgetHeader/WidgetHeader.svelte";
 	import WidgetInfo from "../WidgetInfo/WidgetInfo.svelte";
 	import WidgetModelLoading from "../WidgetModelLoading/WidgetModelLoading.svelte";
-	import { getModelLoadInfo } from "../../shared/helpers";
+	import { getModelLoadInfo, getQueryParamVal, getWidgetExample } from "../../shared/helpers";
 	import { modelLoadStates } from "../../stores";
 
 	export let apiUrl: string;
+	export let callApiOnMount: WidgetProps["callApiOnMount"];
 	export let computeTime: string;
 	export let error: string;
 	export let isLoading = false;
@@ -28,9 +30,9 @@
 	};
 	export let noTitle = false;
 	export let outputJson: string;
-	export let applyInputSample: (sample: TWidgetExample) => void = () => {};
-	export let previewInputSample: (sample: TWidgetExample) => void = () => {};
+	export let applyInputSample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void = () => {};
 	export let validateExample: (sample: WidgetExample) => sample is TWidgetExample;
+	export let exampleQueryParams: QueryParam[] = [];
 
 	let isMaximized = false;
 	let modelLoadInfo: ModelLoadInfo | undefined = undefined;
@@ -64,6 +66,24 @@
 		(async () => {
 			modelLoadInfo = await getModelLoadInfo(apiUrl, model.id, includeCredentials);
 			$modelLoadStates[model.id] = modelLoadInfo;
+
+			const exampleFromQueryParams = {} as TWidgetExample;
+			for (const key of exampleQueryParams) {
+				const val = getQueryParamVal(key);
+				if (val) {
+					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 } });
+				}
+			}
 		})();
 	});
 
@@ -107,7 +127,6 @@
 						{isLoading}
 						inputSamples={selectedInputSamples?.inputSamples ?? []}
 						{applyInputSample}
-						{previewInputSample}
 					/>
 				</div>
 			{/if}
diff --git a/js/src/lib/components/InferenceWidget/shared/helpers.ts b/js/src/lib/components/InferenceWidget/shared/helpers.ts
index fba4f30f5..f89c165be 100644
--- a/js/src/lib/components/InferenceWidget/shared/helpers.ts
+++ b/js/src/lib/components/InferenceWidget/shared/helpers.ts
@@ -1,26 +1,40 @@
 import type { ModelData } from "../../../interfaces/Types";
 import { randomItem, parseJSON } from "../../../utils/ViewUtils";
+import type { WidgetExample } from "./WidgetExample";
 import type { ModelLoadInfo, TableData } from "./types";
 
-export function getSearchParams(keys: string[]): string[] {
+type KeysOfUnion<T> = T extends any ? keyof T : never;
+export type QueryParam = KeysOfUnion<WidgetExample>;
+type QueryParamVal = string | null | boolean | (string | number)[][];
+const KEYS_TEXT: QueryParam[] = ["text", "context", "candidate_labels"];
+const KEYS_TABLE: QueryParam[] = ["table", "structured_data"];
+
+export function getQueryParamVal(key: QueryParam): QueryParamVal {
 	const searchParams = new URL(window.location.href).searchParams;
-	return keys.map(key => {
-		const value = searchParams.get(key);
-		return value || "";
-	});
+	const value = searchParams.get(key);
+	if (KEYS_TEXT.includes(key)) {
+		return value;
+	} else if (KEYS_TABLE.includes(key)) {
+		const table = convertDataToTable((parseJSON(value) as TableData) ?? {});
+		return table;
+	} else if (key === "multi_class") {
+		return value === "true";
+	}
+	return value;
 }
 
-export function getDemoInputs(model: ModelData, keys: (number | string)[]): any[] {
-	const widgetData = Array.isArray(model.widgetData) ? model.widgetData : [];
-	const randomEntry = (randomItem(widgetData) ?? {}) as any;
-	return keys.map(key => {
-		const value = randomEntry[key] ? randomEntry[key] : null;
-		return value ? randomEntry[key] : null;
-	});
+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: Record<string, string | undefined>): void {
+export function updateUrl(obj: Partial<Record<QueryParam, string | undefined>>): void {
 	if (!window) {
 		return;
 	}
diff --git a/js/src/lib/components/InferenceWidget/shared/types.ts b/js/src/lib/components/InferenceWidget/shared/types.ts
index c8ff2fe3f..8c3cbbf98 100644
--- a/js/src/lib/components/InferenceWidget/shared/types.ts
+++ b/js/src/lib/components/InferenceWidget/shared/types.ts
@@ -11,6 +11,17 @@ export interface WidgetProps {
 	isLoggedIn?:        boolean;
 }
 
+export interface InferenceRunFlags {
+	withModelLoading?: boolean;
+	isOnLoadCall?:     boolean;
+	useCache?:         boolean;
+}
+
+export interface ExampleRunOpts {
+	isPreview?:     boolean;
+	inferenceOpts?: InferenceRunFlags;
+}
+
 export type LoadState = "Loadable" | "Loaded" | "TooBig" | "error";
 
 export type ComputeType = "cpu" | "gpu";
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
index 3b2b19a2a..e3372170f 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetAudioTrack from "../../shared/WidgetAudioTrack/WidgetAudioTrack.svelte";
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetRecorder from "../../shared/WidgetRecorder/WidgetRecorder.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
 	import { isAssetInput } from "../../shared/inputValidation";
 
@@ -61,7 +59,7 @@
 		}
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		if (!file && !selectedSampleUrl) {
 			error = "You must select or record an audio file";
 			output = [];
@@ -122,42 +120,32 @@
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
-		file = null;
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>, opts: ExampleRunOpts = {}) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
-		selectedSampleUrl = sample.src;
-		getOutput();
-	}
 
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
-		filename = sample.example_title!;
-		fileUrl = sample.src;
-		if (isValidOutputLabels(sample.output)) {
-			output = sample.output;
-			outputJson = "";
-		} else {
-			output = [];
-			outputJson = "";
+		if (opts.isPreview) {
+			if (isValidOutputLabels(sample.output)) {
+				output = sample.output;
+				outputJson = "";
+			} else {
+				output = [];
+				outputJson = "";
+			}
+			return;
 		}
+		file = null;
+		selectedSampleUrl = sample.src;
+		getOutput(opts.inferenceOpts);
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
 		return isAssetInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
 	}
-
-	onMount(() => {
-		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
-		if (callApiOnMount && src) {
-			filename = exampleTitle ?? "";
-			fileUrl = src;
-			selectedSampleUrl = src;
-			getOutput({ isOnLoadCall: true });
-		}
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -168,7 +156,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
index 7275266d2..7133a447a 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetAudioTrack from "../../shared/WidgetAudioTrack/WidgetAudioTrack.svelte";
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetRecorder from "../../shared/WidgetRecorder/WidgetRecorder.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -64,7 +62,7 @@
 		}
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		if (!file && !selectedSampleUrl) {
 			error = "You must select or record an audio file";
 			return;
@@ -126,33 +124,22 @@
 		throw new TypeError("Invalid output: output must be of type Array<blob:string, label:string, content-type:string>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput) {
-		file = null;
+	function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		filename = sample.example_title ?? "";
 		fileUrl = sample.src;
+		if (opts.isPreview) {
+			output = [];
+			outputJson = "";
+			return;
+		}
+		file = null;
 		selectedSampleUrl = sample.src;
-		getOutput();
-	}
-
-	function previewInputSample(sample: WidgetExampleAssetInput) {
-		filename = sample.example_title ?? "";
-		fileUrl = sample.src;
-		output = [];
-		outputJson = "";
+		getOutput(opts.inferenceOpts);
 	}
-
-	onMount(() => {
-		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
-		if (callApiOnMount && src) {
-			filename = exampleTitle ?? "";
-			fileUrl = src;
-			selectedSampleUrl = src;
-			getOutput({ isOnLoadCall: true });
-		}
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -163,7 +150,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
index 0d3e85328..47a998a4c 100644
--- a/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputText } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetAudioTrack from "../../shared/WidgetAudioTrack/WidgetAudioTrack.svelte";
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
@@ -11,7 +9,7 @@
 	import WidgetRealtimeRecorder from "../../shared/WidgetRealtimeRecorder/WidgetRealtimeRecorder.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isValidOutputText } from "../../shared/outputValidation";
 	import { isAssetInput } from "../../shared/inputValidation";
 
@@ -63,7 +61,7 @@
 		}
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		if (!file && !selectedSampleUrl) {
 			error = "You must select or record an audio file";
 			output = "";
@@ -124,24 +122,22 @@
 		throw new TypeError("Invalid output: output must be of type <text:string>");
 	}
 
-	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
-		file = null;
-		filename = sample.example_title!;
-		fileUrl = sample.src;
-		selectedSampleUrl = sample.src;
-		getOutput();
-	}
-
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
 		filename = sample.example_title!;
 		fileUrl = sample.src;
-		if (isValidOutputText(sample.output)) {
-			output = sample.output.text;
-			outputJson = "";
-		} else {
-			output = "";
-			outputJson = "";
+		if (opts.isPreview) {
+			if (isValidOutputText(sample.output)) {
+				output = sample.output.text;
+				outputJson = "";
+			} else {
+				output = "";
+				outputJson = "";
+			}
+			return;
 		}
+		file = null;
+		selectedSampleUrl = sample.src;
+		getOutput(opts.inferenceOpts);
 	}
 
 	function updateModelLoading(isLoading: boolean, estimatedTime: number = 0) {
@@ -151,19 +147,10 @@
 	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputText> {
 		return isAssetInput(sample) && (!sample.output || isValidOutputText(sample.output));
 	}
-
-	onMount(() => {
-		const [exampleTitle, src] = getDemoInputs(model, ["example_title", "src"]);
-		if (callApiOnMount && src) {
-			filename = exampleTitle ?? "";
-			fileUrl = src;
-			selectedSampleUrl = src;
-			getOutput({ isOnLoadCall: true });
-		}
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -174,7 +161,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
index f838ae738..6946c37c0 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetOutputConvo from "../../shared/WidgetOutputConvo/WidgetOutputConvo.svelte";
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -56,21 +48,7 @@
 	let outputJson: string;
 	let text = "";
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			text = textParam;
-			getOutput();
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
 		if (!trimmedText) {
@@ -160,17 +138,17 @@
 		);
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput) {
+	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		text = sample.text;
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput) {
-		text = sample.text;
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -181,8 +159,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isTextInput}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<WidgetOutputConvo modelId={model.id} {output} />
diff --git a/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
index fbd02f9b4..6f9a28870 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
@@ -1,18 +1,10 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	import { DataTable } from "./DataTable";
@@ -36,21 +28,7 @@
 	let outputJson: string;
 	let text = "";
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			text = textParam;
-			getOutput();
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
 		if (!trimmedText) {
@@ -128,17 +106,17 @@
 		return Math.ceil(total_elems / SINGLE_DIM_COLS);
 	};
 
-	function previewInputSample(sample: WidgetExampleTextInput) {
+	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		text = sample.text;
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput) {
-		text = sample.text;
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -149,8 +127,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isTextInput}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
index 5edd46ada..eeadeb1e5 100644
--- a/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextInput, WidgetExampleOutputLabels, WidgetExample } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
 	import { isTextInput } from "../../shared/inputValidation";
 
@@ -38,22 +30,7 @@
 	let text = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			setTextAreaValue(textParam);
-			getOutput();
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			/// TODO(get rid of useless getDemoInputs)
-			setTextAreaValue(demoText ?? "");
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
 		if (!trimmedText) {
@@ -125,18 +102,17 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
-		if (sample.output) {
-			output = sample.output;
-		} else {
-			output = [];
+		if (opts.isPreview) {
+			if (sample.output) {
+				output = sample.output;
+			} else {
+				output = [];
+			}
+			return;
 		}
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputLabels>) {
-		setTextAreaValue(sample.text);
-		getOutput();
+		getOutput(opts.inferenceOpts);
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputLabels> {
@@ -145,6 +121,7 @@
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -155,8 +132,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
index 7be4b9fd7..d4428d9b6 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, InferenceRunFlags, ExampleRunOpts } from "../../shared/types";
 	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
 	import { isTextInput } from "../../shared/inputValidation";
 
@@ -36,7 +34,10 @@
 		getOutput(file);
 	}
 
-	async function getOutput(file: File | Blob, { withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput(
+		file: File | Blob,
+		{ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}
+	) {
 		if (!file) {
 			return;
 		}
@@ -91,40 +92,32 @@
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
-		imgSrc = sample.src;
-		const blob = await getBlobFromUrl(imgSrc);
-		getOutput(blob);
-	}
-
-	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
+	async function applyInputSample(
+		sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>,
+		opts: ExampleRunOpts = {}
+	) {
 		imgSrc = sample.src;
-		if (isValidOutputLabels(sample.output)) {
-			output = sample.output;
-			outputJson = "";
-		} else {
-			output = [];
-			outputJson = "";
+		if (opts.isPreview) {
+			if (isValidOutputLabels(sample.output)) {
+				output = sample.output;
+				outputJson = "";
+			} else {
+				output = [];
+				outputJson = "";
+			}
+			return;
 		}
+		const blob = await getBlobFromUrl(imgSrc);
+		getOutput(blob, opts.inferenceOpts);
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
 		return isTextInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
 	}
-
-	onMount(() => {
-		(async () => {
-			const [src] = getDemoInputs(model, ["src"]);
-			if (callApiOnMount && src) {
-				imgSrc = src;
-				const blob = await getBlobFromUrl(imgSrc);
-				getOutput(blob, { isOnLoadCall: true });
-			}
-		})();
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -135,7 +128,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
index af9307359..ebb1b0b23 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageSegmentationWidget/ImageSegmentationWidget.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps, ImageSegment } from "../../shared/types";
+	import type { WidgetProps, ImageSegment, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
 	import { COLORS } from "../../shared/consts";
 	import { clamp, mod, hexToRgb } from "../../../../utils/ViewUtils";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
@@ -50,7 +50,10 @@
 		getOutput(file);
 	}
 
-	async function getOutput(file: File | Blob, { withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput(
+		file: File | Blob,
+		{ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}
+	) {
 		if (!file) {
 			return;
 		}
@@ -206,35 +209,26 @@
 		};
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput) {
+	async function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		imgSrc = sample.src;
+		if (opts.isPreview) {
+			output = [];
+			outputJson = "";
+			return;
+		}
 		const blob = await getBlobFromUrl(imgSrc);
-		getOutput(blob);
-	}
-
-	function previewInputSample(sample: WidgetExampleAssetInput) {
-		imgSrc = sample.src;
-		output = [];
-		outputJson = "";
+		getOutput(blob, opts.inferenceOpts);
 	}
 
 	onMount(() => {
 		if (typeof createImageBitmap === "undefined") {
 			polyfillCreateImageBitmap();
 		}
-
-		(async () => {
-			const [src] = getDemoInputs(model, ["src"]);
-			if (callApiOnMount && src) {
-				imgSrc = src;
-				const blob = await getBlobFromUrl(imgSrc);
-				getOutput(blob, { isOnLoadCall: true });
-			}
-		})();
 	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -245,7 +239,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
index 5eff07fa1..121c35669 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToImageWidget/ImageToImageWidget.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetAndPromptInput } from "../../shared/WidgetExample";
 
-	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 { addInferenceParameters, getDemoInputs, callInferenceApi } from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers";
 	import { isAssetAndPromptInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -63,21 +61,19 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetAndPromptInput) {
-		prompt = sample.prompt;
-		imgSrc = sample.src;
-	}
-
-	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput) {
+	async function applyInputSample(sample: WidgetExampleAssetAndPromptInput, opts: ExampleRunOpts = {}) {
 		prompt = sample.prompt;
 		imgSrc = sample.src;
+		if (opts.isPreview) {
+			return;
+		}
 		const res = await fetch(imgSrc);
 		const blob = await res.blob();
 		await updateImageBase64(blob);
-		getOutput();
+		getOutput(opts.inferenceOpts);
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedPrompt = prompt.trim();
 
 		if (!imageBase64) {
@@ -130,23 +126,10 @@
 			error = res.error;
 		}
 	}
-
-	onMount(() => {
-		(async () => {
-			const [prompt_, src] = getDemoInputs(model, ["prompt", "src"]);
-			if (callApiOnMount && prompt_ && src) {
-				prompt = prompt_;
-				imgSrc = src;
-				const res = await fetch(imgSrc);
-				const blob = await res.blob();
-				await updateImageBase64(blob);
-				getOutput({ isOnLoadCall: true });
-			}
-		})();
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -157,7 +140,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetAndPromptInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
index ea071e400..12657c808 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ImageToTextWidget/ImageToTextWidget.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -35,7 +33,10 @@
 		getOutput(file);
 	}
 
-	async function getOutput(file: File | Blob, { withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput(
+		file: File | Blob,
+		{ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}
+	) {
 		if (!file) {
 			return;
 		}
@@ -91,31 +92,20 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput) {
+	async function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		imgSrc = sample.src;
+		if (opts.isPreview) {
+			output = "";
+			outputJson = "";
+			return;
+		}
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob);
 	}
-
-	function previewInputSample(sample: WidgetExampleAssetInput) {
-		imgSrc = sample.src;
-		output = "";
-		outputJson = "";
-	}
-
-	onMount(() => {
-		(async () => {
-			const [src] = getDemoInputs(model, ["src"]);
-			if (callApiOnMount && src) {
-				imgSrc = src;
-				const blob = await getBlobFromUrl(imgSrc);
-				getOutput(blob, { isOnLoadCall: true });
-			}
-		})();
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -126,7 +116,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
index aee29d6c1..5886b43e8 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-	import type { WidgetProps, DetectedObject } from "../../shared/types";
+	import type { WidgetProps, DetectedObject, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import { mod } from "../../../../utils/ViewUtils";
 	import { COLORS } from "../../shared/consts";
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { callInferenceApi, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isAssetInput } from "../../shared/inputValidation";
 
 	import BoundingBoxes from "./SvgBoundingBoxes.svelte";
@@ -40,7 +38,10 @@
 		getOutput(file);
 	}
 
-	async function getOutput(file: File | Blob, { withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput(
+		file: File | Blob,
+		{ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}
+	) {
 		if (!file) {
 			return;
 		}
@@ -127,31 +128,20 @@
 		highlightIndex = index;
 	}
 
-	async function applyInputSample(sample: WidgetExampleAssetInput) {
+	async function applyInputSample(sample: WidgetExampleAssetInput, opts: ExampleRunOpts = {}) {
 		imgSrc = sample.src;
+		if (opts.isPreview) {
+			output = [];
+			outputJson = "";
+			return;
+		}
 		const blob = await getBlobFromUrl(imgSrc);
-		getOutput(blob);
-	}
-
-	function previewInputSample(sample: WidgetExampleAssetInput) {
-		imgSrc = sample.src;
-		output = [];
-		outputJson = "";
+		getOutput(blob, opts.inferenceOpts);
 	}
-
-	onMount(() => {
-		(async () => {
-			const [src] = getDemoInputs(model, ["src"]);
-			if (callApiOnMount && src) {
-				imgSrc = src;
-				const blob = await getBlobFromUrl(imgSrc);
-				getOutput(blob, { isOnLoadCall: true });
-			}
-		})();
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -162,7 +152,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
index 3f3341e1d..0365ca59c 100644
--- a/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
@@ -1,23 +1,15 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type {
 		WidgetExample,
 		WidgetExampleOutputAnswerScore,
 		WidgetExampleTextAndContextInput,
 	} from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isValidOutputAnswerScore } from "../../shared/outputValidation";
 	import { isTextAndContextInput } from "../../shared/inputValidation";
 
@@ -42,23 +34,7 @@
 	let question = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [contextParam, questionParam] = getSearchParams(["context", "question"]);
-		if (contextParam && questionParam) {
-			question = questionParam;
-			setTextAreaValue(contextParam);
-			getOutput();
-		} else {
-			const [demoContext, demoQuestion] = getDemoInputs(model, ["context", "text"]);
-			question = (demoQuestion as string) ?? "";
-			setTextAreaValue(demoContext ?? "");
-			if (context && question && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedQuestion = question.trim();
 		const trimmedContext = context.trim();
 
@@ -77,7 +53,7 @@
 		}
 
 		if (shouldUpdateUrl && !isOnLoadCall) {
-			updateUrl({ context: trimmedContext, question: trimmedQuestion });
+			updateUrl({ context: trimmedContext, text: trimmedQuestion });
 		}
 
 		const requestBody = {
@@ -128,15 +104,16 @@
 		throw new TypeError("Invalid output: output must be of type <answer:string; score:number>");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>) {
+	function applyInputSample(
+		sample: WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>,
+		opts: ExampleRunOpts = {}
+	) {
 		question = sample.text;
 		setTextAreaValue(sample.context);
-	}
-
-	function applyInputSample(sample: WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>) {
-		question = sample.text;
-		setTextAreaValue(sample.context);
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 
 	function validateExample(
@@ -147,6 +124,7 @@
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -157,8 +135,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
+	exampleQueryParams={["context", "text"]}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
index 0f3c793eb..c007dce94 100644
--- a/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/SentenceSimilarityWidget/SentenceSimilarityWidget.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleSentenceSimilarityInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetAddSentenceBtn from "../../shared/WidgetAddSentenceBtn/WidgetAddSentenceBtn.svelte";
 	import WidgetTextInput from "../../shared/WidgetTextInput/WidgetTextInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { addInferenceParameters, getDemoInputs, callInferenceApi } from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers";
 	import { isSentenceSimilarityInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -33,7 +31,7 @@
 	let output: Array<{ label: string; score: number }> = [];
 	let outputJson: string;
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedSourceSentence = sourceSentence.trim();
 		if (!trimmedSourceSentence) {
 			error = "You need to input some text";
@@ -119,31 +117,19 @@
 		throw new TypeError("Invalid output: output must be of type Array");
 	}
 
-	function previewInputSample(sample: WidgetExampleSentenceSimilarityInput) {
-		sourceSentence = sample.source_sentence;
-		comparisonSentences = sample.sentences;
-		nComparisonSentences = comparisonSentences.length;
-	}
-
-	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput) {
+	function applyInputSample(sample: WidgetExampleSentenceSimilarityInput, opts: ExampleRunOpts = {}) {
 		sourceSentence = sample.source_sentence;
 		comparisonSentences = sample.sentences;
 		nComparisonSentences = comparisonSentences.length;
-		getOutput();
-	}
-
-	onMount(() => {
-		const [demoSourcesentence, demoComparisonSentence] = getDemoInputs(model, ["source_sentence", "sentences"]);
-		if (callApiOnMount && demoSourcesentence && demoComparisonSentence?.length) {
-			sourceSentence = (demoSourcesentence as string) ?? "";
-			comparisonSentences = demoComparisonSentence ?? [""];
-			nComparisonSentences = comparisonSentences.length;
-			getOutput({ isOnLoadCall: true });
+		if (opts.isPreview) {
+			return;
 		}
-	});
+		getOutput(opts.inferenceOpts);
+	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -154,7 +140,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isSentenceSimilarityInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
index 9418cc00e..4fe4826cd 100644
--- a/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -37,21 +29,7 @@
 	let text = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			setTextAreaValue(textParam);
-			getOutput();
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			setTextAreaValue(demoText ?? "");
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedValue = text.trim();
 
 		if (!trimmedValue) {
@@ -111,17 +89,17 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput) {
-		setTextAreaValue(sample.text);
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput) {
+	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -132,8 +110,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isTextInput}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
index b924615f8..a35c7c9c0 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TableQuestionAnsweringWidget/TableQuestionAnsweringWidget.svelte
@@ -1,21 +1,16 @@
 <script lang="ts">
-	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
+	import type { WidgetProps, HighlightCoordinates, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextAndTableInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetOutputTableQA from "../../shared/WidgetOutputTableQA/WidgetOutputTableQA.svelte";
 	import WidgetTableInput from "../../shared/WidgetTableInput/WidgetTableInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { parseJSON } from "../../../../utils/ViewUtils";
 	import {
 		addInferenceParameters,
 		convertDataToTable,
 		convertTableToData,
-		getDemoInputs,
 		callInferenceApi,
-		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
 	import { isTextAndTableInput } from "../../shared/inputValidation";
@@ -55,27 +50,11 @@
 			return acc;
 		}, {}) ?? {};
 
-	onMount(() => {
-		const [queryParam, tableParam] = getSearchParams(["query", "table"]);
-		if (queryParam && tableParam) {
-			query = queryParam;
-			table = convertDataToTable((parseJSON(tableParam) as TableData) ?? {});
-			getOutput();
-		} else {
-			const [demoQuery, demoTable] = getDemoInputs(model, ["text", "table"]);
-			query = (demoQuery as string) ?? "";
-			table = convertDataToTable(demoTable as TableData);
-			if (query && table && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
 	function onChangeTable(updatedTable: (string | number)[][]) {
 		table = updatedTable;
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedQuery = query.trim();
 
 		if (!trimmedQuery) {
@@ -87,7 +66,7 @@
 
 		if (shouldUpdateUrl && !isOnLoadCall) {
 			updateUrl({
-				query: trimmedQuery,
+				text: trimmedQuery,
 				table: JSON.stringify(convertTableToData(table)),
 			});
 		}
@@ -159,19 +138,18 @@
 		);
 	}
 
-	function previewInputSample(sample: WidgetExampleTextAndTableInput) {
-		query = sample.text;
-		table = convertDataToTable(sample.table);
-	}
-
-	function applyInputSample(sample: WidgetExampleTextAndTableInput) {
+	function applyInputSample(sample: WidgetExampleTextAndTableInput, opts: ExampleRunOpts = {}) {
 		query = sample.text;
 		table = convertDataToTable(sample.table);
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -182,8 +160,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isTextAndTableInput}
+	exampleQueryParams={["text", "table"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
index 0e111f179..d157bd6f6 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TabularDataWidget/TabularDataWidget.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-	import type { WidgetProps, TableData, HighlightCoordinates } from "../../shared/types";
+	import type { WidgetProps, HighlightCoordinates, InferenceRunFlags, ExampleRunOpts } from "../../shared/types";
 	import type { WidgetExampleStructuredDataInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetTableInput from "../../shared/WidgetTableInput/WidgetTableInput.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import { mod, parseJSON } from "../../../../utils/ViewUtils";
+	import { mod } from "../../../../utils/ViewUtils";
 	import {
 		addInferenceParameters,
 		convertDataToTable,
 		convertTableToData,
 		callInferenceApi,
-		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
 	import { isStructuredDataInput } from "../../shared/inputValidation";
@@ -27,7 +24,7 @@
 	export let includeCredentials: WidgetProps["includeCredentials"];
 
 	const widgetData = model?.widgetData?.[0] as WidgetExampleStructuredDataInput<WidgetExampleOutputLabels> | undefined;
-	const columns: string[] = Object.keys(widgetData?.structuredData ?? {});
+	const columns: string[] = Object.keys(widgetData?.structured_data ?? {});
 
 	let computeTime = "";
 	let error: string = "";
@@ -64,26 +61,12 @@
 
 	const COLORS = ["blue", "green", "yellow", "purple", "red"] as const;
 
-	onMount(() => {
-		const [dataParam] = getSearchParams(["structuredData"]);
-		if (dataParam) {
-			table = convertDataToTable((parseJSON(dataParam) as TableData) ?? {});
-			getOutput();
-		} else {
-			const demoTable = widgetData?.structuredData ?? {};
-			table = convertDataToTable(demoTable);
-			if (table && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
 	function onChangeTable(updatedTable: (string | number)[][]) {
 		table = updatedTable;
 		output = [];
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		for (let [i, row] of table.entries()) {
 			for (const [j, cell] of row.entries()) {
 				if (!String(cell)) {
@@ -106,7 +89,7 @@
 
 		if (shouldUpdateUrl && !isOnLoadCall) {
 			updateUrl({
-				data: JSON.stringify(tableWithoutOutput),
+				structured_data: JSON.stringify(tableWithoutOutput),
 			});
 		}
 
@@ -180,17 +163,17 @@
 		}, {});
 	}
 
-	function previewInputSample(sample: WidgetExampleStructuredDataInput) {
-		table = convertDataToTable(sample.structuredData);
-	}
-
-	function applyInputSample(sample: WidgetExampleStructuredDataInput) {
-		table = convertDataToTable(sample.structuredData);
-		getOutput();
+	function applyInputSample(sample: WidgetExampleStructuredDataInput, opts: ExampleRunOpts = {}) {
+		table = convertDataToTable(sample.structured_data);
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -201,8 +184,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isStructuredDataInput}
+	exampleQueryParams={["structured_data"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
index ee819c00e..39a357fd4 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { PipelineType } from "../../../../interfaces/Types";
 	import type { WidgetExampleTextInput, WidgetExampleOutputText, WidgetExample } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetShortcutRunLabel from "../../shared/WidgetShortcutRunLabel/WidgetShortcutRunLabel.svelte";
 	import WidgetBloomDecoding from "../../shared/WidgetBloomDecoding/WidgetBloomDecoding.svelte";
@@ -12,13 +10,7 @@
 	import WidgetTimer from "../../shared/WidgetTimer/WidgetTimer.svelte";
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isValidOutputText } from "../../shared/outputValidation";
 	import { isTextInput } from "../../shared/inputValidation";
 
@@ -55,21 +47,11 @@
 		model.pipeline_tag as PipelineType
 	);
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			setTextAreaValue(textParam);
-			getOutput({ useCache: true });
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			setTextAreaValue(demoText ?? "");
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true, useCache: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false, useCache = true } = {}) {
+	async function getOutput({
+		withModelLoading = false,
+		isOnLoadCall = false,
+		useCache = true,
+	}: InferenceRunFlags = {}) {
 		if (isBloomLoginRequired) {
 			return;
 		}
@@ -171,21 +153,20 @@
 		throw new TypeError("Invalid output: output must be of type Array & non-empty");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
-		if (sample.output) {
-			output = sample.output.text;
-			outputJson = "";
-			renderTypingEffect(output);
-		} else {
-			output = "";
-			outputJson = "";
+		if (opts.isPreview) {
+			if (sample.output) {
+				output = sample.output.text;
+				outputJson = "";
+				renderTypingEffect(output);
+			} else {
+				output = "";
+				outputJson = "";
+			}
+			return;
 		}
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputText>) {
-		setTextAreaValue(sample.text);
-		getOutput({ useCache });
+		getOutput({ useCache, ...opts.inferenceOpts });
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputText> {
@@ -202,6 +183,7 @@
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -212,8 +194,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
index 008ad71d5..9ca830adb 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextToImageWidget/TextToImageWidget.svelte
@@ -1,18 +1,10 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts } from "../../shared/types";
 	import type { WidgetExampleTextInput, WidgetExampleOutputUrl, WidgetExample } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isValidOutputUrl } from "../../shared/outputValidation";
 	import { isTextInput } from "../../shared/inputValidation";
 
@@ -35,20 +27,6 @@
 	let outputJson = "";
 	let text = "";
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			text = textParam;
-			getOutput({ useCache: true });
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true, useCache: true });
-			}
-		}
-	});
-
 	async function getOutput({ withModelLoading = false, isOnLoadCall = false, useCache = false } = {}) {
 		const trimmedText = text.trim();
 
@@ -109,18 +87,17 @@
 		throw new TypeError("Invalid output: output must be of type object & of instance Blob");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
+	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>, opts: ExampleRunOpts = {}) {
 		text = sample.text;
-		if (sample.output) {
-			output = sample.output.url;
-		} else {
-			output = "";
+		if (opts.isPreview) {
+			if (sample.output) {
+				output = sample.output.url;
+			} else {
+				output = "";
+			}
+			return;
 		}
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput<WidgetExampleOutputUrl>) {
-		text = sample.text;
-		getOutput();
+		getOutput(opts.inferenceOpts);
 	}
 
 	function validateExample(sample: WidgetExample): sample is WidgetExampleTextInput<WidgetExampleOutputUrl> {
@@ -129,6 +106,7 @@
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -139,8 +117,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	{validateExample}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
index 18d702ff0..a61ceb433 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetAudioTrack from "../../shared/WidgetAudioTrack/WidgetAudioTrack.svelte";
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -37,21 +29,7 @@
 	let text = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			setTextAreaValue(textParam);
-			getOutput();
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			setTextAreaValue(demoText ?? "");
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
 		if (!trimmedText) {
@@ -110,17 +88,17 @@
 		throw new TypeError("Invalid output: output must be of type object & instance of Blob");
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput) {
-		setTextAreaValue(sample.text);
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput) {
+	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -131,8 +109,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isTextInput}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
index 5cc8c0a1e..eb6863fb1 100644
--- a/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetOuputTokens from "../../shared/WidgetOutputTokens/WidgetOutputTokens.svelte";
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	interface EntityGroup {
@@ -54,21 +46,7 @@
 	let warning: string = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			setTextAreaValue(textParam);
-			getOutput();
-		} else {
-			const [demoText] = getDemoInputs(model, ["text"]);
-			setTextAreaValue(demoText ?? "");
-			if (text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
 		if (!trimmedText) {
@@ -230,17 +208,17 @@
 		return a.type === b.type && a.start === b.start && a.end === b.end;
 	}
 
-	function previewInputSample(sample: WidgetExampleTextInput) {
+	function applyInputSample(sample: WidgetExampleTextInput, opts: ExampleRunOpts = {}) {
 		setTextAreaValue(sample.text);
-	}
-
-	function applyInputSample(sample: WidgetExampleTextInput) {
-		setTextAreaValue(sample.text);
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -251,8 +229,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isTextInput}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form>
diff --git a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
index 8227a2929..85bcf9dc9 100644
--- a/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/VisualQuestionAnsweringWidget/VisualQuestionAnsweringWidget.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetAndTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetFileInput from "../../shared/WidgetFileInput/WidgetFileInput.svelte";
 	import WidgetDropzone from "../../shared/WidgetDropzone/WidgetDropzone.svelte";
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
-	import { addInferenceParameters, getDemoInputs, callInferenceApi } from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi } from "../../shared/helpers";
 	import { isAssetAndTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -67,21 +65,19 @@
 		throw new TypeError("Invalid output: output must be of type Array<answer: string, score:number>");
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetAndTextInput) {
-		question = sample.text;
-		imgSrc = sample.src;
-	}
-
-	async function applyInputSample(sample: WidgetExampleAssetAndTextInput) {
+	async function applyInputSample(sample: WidgetExampleAssetAndTextInput, opts: ExampleRunOpts = {}) {
 		question = sample.text;
 		imgSrc = sample.src;
+		if (opts.isPreview) {
+			return;
+		}
 		const res = await fetch(imgSrc);
 		const blob = await res.blob();
 		await updateImageBase64(blob);
-		getOutput();
+		getOutput(opts.inferenceOpts);
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedQuestion = question.trim();
 
 		if (!trimmedQuestion) {
@@ -138,23 +134,10 @@
 			error = res.error;
 		}
 	}
-
-	onMount(() => {
-		(async () => {
-			const [text, src] = getDemoInputs(model, ["text", "src"]);
-			if (callApiOnMount && text && src) {
-				question = text;
-				imgSrc = src;
-				const res = await fetch(imgSrc);
-				const blob = await res.blob();
-				await updateImageBase64(blob);
-				getOutput({ isOnLoadCall: true });
-			}
-		})();
-	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -165,7 +148,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetAndTextInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
index fb342c0e2..8797bf54a 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleAssetAndZeroShotInput } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
@@ -10,7 +10,7 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
-	import { addInferenceParameters, callInferenceApi, getDemoInputs } from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, getWidgetExample } from "../../shared/helpers";
 	import { isAssetAndZeroShotInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -68,21 +68,19 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function previewInputSample(sample: WidgetExampleAssetAndZeroShotInput) {
-		candidateLabels = sample.candidate_labels;
-		imgSrc = sample.src;
-	}
-
-	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput) {
+	async function applyInputSample(sample: WidgetExampleAssetAndZeroShotInput, opts: ExampleRunOpts = {}) {
 		candidateLabels = sample.candidate_labels;
 		imgSrc = sample.src;
+		if (opts.isPreview) {
+			return;
+		}
 		const res = await fetch(imgSrc);
 		const blob = await res.blob();
 		await updateImageBase64(blob);
-		getOutput();
+		getOutput(opts.inferenceOpts);
 	}
 
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedCandidateLabels = candidateLabels.trim().split(",").join(",");
 
 		if (!trimmedCandidateLabels) {
@@ -145,20 +143,16 @@
 
 	onMount(() => {
 		(async () => {
-			const [src, candidateLabelsInput] = getDemoInputs(model, ["src", "candidate_labels"]);
-			if (callApiOnMount && src && candidateLabels) {
-				candidateLabels = candidateLabelsInput;
-				imgSrc = src;
-				const res = await fetch(imgSrc);
-				const blob = await res.blob();
-				await updateImageBase64(blob);
-				getOutput({ isOnLoadCall: true });
+			const example = getWidgetExample<WidgetExampleAssetAndZeroShotInput>(model, isAssetAndZeroShotInput);
+			if (callApiOnMount && example) {
+				await applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
 			}
 		})();
 	});
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -169,7 +163,6 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isAssetAndZeroShotInput}
 >
 	<svelte:fragment slot="top">
diff --git a/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
index de5a5ff53..dbb8b287e 100644
--- a/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
+++ b/js/src/lib/components/InferenceWidget/widgets/ZeroShowClassificationWidget/ZeroShotClassificationWidget.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
-	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetProps, ExampleRunOpts, InferenceRunFlags } from "../../shared/types";
 	import type { WidgetExampleZeroShotTextInput } from "../../shared/WidgetExample";
 
-	import { onMount } from "svelte";
-
 	import WidgetCheckbox from "../../shared/WidgetCheckbox/WidgetCheckbox.svelte";
 	import WidgetOutputChart from "../../shared/WidgetOutputChart/WidgetOutputChart.svelte";
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetTextarea from "../../shared/WidgetTextarea/WidgetTextarea.svelte";
 	import WidgetTextInput from "../../shared/WidgetTextInput/WidgetTextInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
-	import {
-		addInferenceParameters,
-		getDemoInputs,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isZeroShotTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -42,33 +34,7 @@
 	let warning: string = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [candidateLabelsParam, multiClassParam, textParam] = getSearchParams([
-			"candidateLabels",
-			"multiClass",
-			"text",
-		]);
-		if (candidateLabelsParam && !!multiClassParam && textParam) {
-			candidateLabels = candidateLabelsParam;
-			multiClass = multiClassParam === "true";
-			setTextAreaValue(textParam);
-			getOutput();
-		} else {
-			const [demoCandidateLabels, demoMultiClass, demoText] = getDemoInputs(model, [
-				"candidate_labels",
-				"multi_class",
-				"text",
-			]);
-			candidateLabels = (demoCandidateLabels as string) ?? "";
-			multiClass = demoMultiClass === "true";
-			setTextAreaValue(demoText ?? "");
-			if (candidateLabels && text && callApiOnMount) {
-				getOutput({ isOnLoadCall: true });
-			}
-		}
-	});
-
-	async function getOutput({ withModelLoading = false, isOnLoadCall = false } = {}) {
+	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 		const trimmedCandidateLabels = candidateLabels.trim().split(",").join(",");
 
@@ -88,8 +54,8 @@
 
 		if (shouldUpdateUrl && !isOnLoadCall) {
 			updateUrl({
-				candidateLabels: trimmedCandidateLabels,
-				multiClass: multiClass ? "true" : "false",
+				candidate_labels: trimmedCandidateLabels,
+				multi_class: multiClass ? "true" : "false",
 				text: trimmedText,
 			});
 		}
@@ -155,21 +121,19 @@
 		throw new TypeError("Invalid output: output must be of type <labels:Array; scores:Array>");
 	}
 
-	function previewInputSample(sample: WidgetExampleZeroShotTextInput) {
-		candidateLabels = sample.candidate_labels;
-		multiClass = sample.multi_class;
-		setTextAreaValue(sample.text);
-	}
-
-	function applyInputSample(sample: WidgetExampleZeroShotTextInput) {
+	function applyInputSample(sample: WidgetExampleZeroShotTextInput, opts: ExampleRunOpts = {}) {
 		candidateLabels = sample.candidate_labels;
 		multiClass = sample.multi_class;
 		setTextAreaValue(sample.text);
-		getOutput();
+		if (opts.isPreview) {
+			return;
+		}
+		getOutput(opts.inferenceOpts);
 	}
 </script>
 
 <WidgetWrapper
+	{callApiOnMount}
 	{apiUrl}
 	{includeCredentials}
 	{applyInputSample}
@@ -180,8 +144,8 @@
 	{modelLoading}
 	{noTitle}
 	{outputJson}
-	{previewInputSample}
 	validateExample={isZeroShotTextInput}
+	exampleQueryParams={["candidate_labels", "multi_class", "text"]}
 >
 	<svelte:fragment slot="top">
 		<form class="flex flex-col space-y-2">
diff --git a/js/src/routes/index.svelte b/js/src/routes/index.svelte
index 29acfd499..487fcebbb 100644
--- a/js/src/routes/index.svelte
+++ b/js/src/routes/index.svelte
@@ -242,7 +242,7 @@
 			pipeline_tag: "tabular-classification",
 			widgetData: [
 				{
-					structuredData: {
+					structured_data: {
 						fixed_acidity: [7.4, 7.8, 10.3],
 						volatile_acidity: [0.7, 0.88, 0.32],
 						citric_acid: [0.0, 0.0, 0.45],