all widgets run onMount example inside WidgetWrapper

huggingface · Oct 27, 2023 · 37f2ccd · 37f2ccd
1 parent ada2b70
commit 37f2ccd
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 326 deletions.
diff --git 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, ExampleRunOpts } from "../types";
 	import type { WidgetExample } from "../WidgetExample";
+	import type { QueryParam } from "../../shared/helpers";
 
 	type TWidgetExample = $$Generic<WidgetExample>;
 
@@ -13,7 +14,7 @@
 	import WidgetHeader from "../WidgetHeader/WidgetHeader.svelte";
 	import WidgetInfo from "../WidgetInfo/WidgetInfo.svelte";
 	import WidgetModelLoading from "../WidgetModelLoading/WidgetModelLoading.svelte";
-	import { getModelLoadInfo, getWidgetExample } from "../../shared/helpers";
+	import { getModelLoadInfo, getQueryParamVal, getWidgetExample } from "../../shared/helpers";
 	import { modelLoadStates } from "../../stores";
 
 	export let apiUrl: string;
@@ -31,7 +32,7 @@
 	export let outputJson: string;
 	export let applyInputSample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void = () => {};
 	export let validateExample: (sample: WidgetExample) => sample is TWidgetExample;
-	export let runExampleOnMount = true;
+	export let exampleQueryParams: QueryParam[] = [];
 
 	let isMaximized = false;
 	let modelLoadInfo: ModelLoadInfo | undefined = undefined;
@@ -67,12 +68,18 @@
 			$modelLoadStates[model.id] = modelLoadInfo;
 
 			// run widget example
-			if (!runExampleOnMount) {
-				return;
-			}
-			const example = getWidgetExample<TWidgetExample>(model, validateExample);
-			if (callApiOnMount && example) {
-				applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
+			if (exampleQueryParams.length) {
+				const example = {} as TWidgetExample;
+				for (const key of exampleQueryParams) {
+					const val = getQueryParamVal(key);
+					example[key] = val;
+				}
+				applyInputSample(example);
+			} else {
+				const example = getWidgetExample<TWidgetExample>(model, validateExample);
+				if (callApiOnMount && example) {
+					applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
+				}
 			}
 		})();
 	});

diff --git a/js/src/lib/components/InferenceWidget/shared/helpers.ts b/js/src/lib/components/InferenceWidget/shared/helpers.ts
@@ -3,12 +3,33 @@ import { randomItem, parseJSON } from "../../../utils/ViewUtils";
 import type { WidgetExample } from "./WidgetExample";
 import type { ModelLoadInfo, TableData } from "./types";
 
-export function getSearchParams(keys: string[]): string[] {
+const VALID_QUERY_PARAMS = [
+	// string vals
+	"text",
+	"context",
+	"question",
+	"query",
+	"candidateLabels",
+	// table vals
+	"multiClass",
+	"table",
+	// boolean vals
+	"structuredData",
+];
+export type QueryParam = typeof VALID_QUERY_PARAMS[number];
+type QueryParamVal = string | null | boolean | (string | number)[][];
+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 (["text", "context", "question", "query", "candidateLabels"].includes(key)) {
+		return value;
+	} else if (["table", "structuredData"].includes(key)) {
+		const table = convertDataToTable((parseJSON(value) as TableData) ?? {});
+		return table;
+	} else if (key === "multiClass") {
+		return value === "true";
+	}
+	return value;
 }
 
 export function getWidgetExample<TWidgetExample extends WidgetExample>(
@@ -22,7 +43,7 @@ export function getWidgetExample<TWidgetExample extends WidgetExample>(
 }
 
 // Update current url search params, keeping existing keys intact.
-export function updateUrl(obj: Record<string, string | undefined>): void {
+export function updateUrl(obj: Record<QueryParam, string | undefined>): void {
 	if (!window) {
 		return;
 	}

diff --git a/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte b/js/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte
@@ -2,14 +2,12 @@
 	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, getWidgetExample } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -138,13 +136,6 @@
 		selectedSampleUrl = sample.src;
 		getOutput(opts.inferenceOpts);
 	}
-
-	onMount(() => {
-		const example = getWidgetExample<WidgetExampleAssetInput>(model, isAssetInput);
-		if (callApiOnMount && example) {
-			applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-		}
-	});
 </script>
 
 <WidgetWrapper

diff --git a/...c/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte b/...c/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte
@@ -2,18 +2,10 @@
 	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,
-		getWidgetExample,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
@@ -56,19 +48,6 @@
 	let outputJson: string;
 	let text = "";
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			text = textParam;
-			getOutput();
-		} else {
-			const example = getWidgetExample<WidgetExampleTextInput>(model, isTextInput);
-			if (callApiOnMount && example) {
-				applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-			}
-		}
-	});
-
 	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
@@ -181,6 +160,7 @@
 	{noTitle}
 	{outputJson}
 	validateExample={isTextInput}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<WidgetOutputConvo modelId={model.id} {output} />

diff --git a/...components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte b/...components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte
@@ -2,17 +2,9 @@
 	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,
-		getWidgetExample,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isTextInput } from "../../shared/inputValidation";
 
 	import { DataTable } from "./DataTable";
@@ -36,19 +28,6 @@
 	let outputJson: string;
 	let text = "";
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			text = textParam;
-			getOutput();
-		} else {
-			const example = getWidgetExample<WidgetExampleTextInput>(model, isTextInput);
-			if (callApiOnMount && example) {
-				applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-			}
-		}
-	});
-
 	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
@@ -149,7 +128,7 @@
 	{noTitle}
 	{outputJson}
 	validateExample={isTextInput}
-	runExampleOnMount={false}
+	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
@@ -2,19 +2,11 @@
 	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,
-		getWidgetExample,
-		callInferenceApi,
-		getSearchParams,
-		updateUrl,
-	} from "../../shared/helpers";
+	import { addInferenceParameters, callInferenceApi, updateUrl } from "../../shared/helpers";
 	import { isValidOutputLabels } from "../../shared/outputValidation";
 	import { isTextInput } from "../../shared/inputValidation";
 
@@ -38,19 +30,6 @@
 	let text = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [textParam] = getSearchParams(["text"]);
-		if (textParam) {
-			setTextAreaValue(textParam);
-			getOutput();
-		} else {
-			const example = getWidgetExample<WidgetExampleTextInput<WidgetExampleOutputLabels>>(model, validateExample);
-			if (example && callApiOnMount) {
-				applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-			}
-		}
-	});
-
 	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedText = text.trim();
 
@@ -154,7 +133,7 @@
 	{noTitle}
 	{outputJson}
 	{validateExample}
-	runExampleOnMount={false}
+	exampleQueryParams={["text"]}
 >
 	<svelte:fragment slot="top">
 		<form>

diff --git a/...lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte b/...lib/components/InferenceWidget/widgets/ObjectDetectionWidget/ObjectDetectionWidget.svelte
@@ -2,15 +2,13 @@
 	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, getWidgetExample } from "../../shared/helpers";
+	import { callInferenceApi, getBlobFromUrl } from "../../shared/helpers";
 	import { isAssetInput } from "../../shared/inputValidation";
 
 	import BoundingBoxes from "./SvgBoundingBoxes.svelte";
@@ -140,15 +138,6 @@
 		const blob = await getBlobFromUrl(imgSrc);
 		getOutput(blob, opts.inferenceOpts);
 	}
-
-	onMount(() => {
-		(async () => {
-			const example = getWidgetExample<WidgetExampleAssetInput>(model, isAssetInput);
-			if (callApiOnMount && example) {
-				await applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-			}
-		})();
-	});
 </script>
 
 <WidgetWrapper

diff --git a/...components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte b/...components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte
@@ -6,18 +6,10 @@
 		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,
-		getWidgetExample,
-		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,6 @@
 	let question = "";
 	let setTextAreaValue: (text: string) => void;
 
-	onMount(() => {
-		const [contextParam, questionParam] = getSearchParams(["context", "question"]);
-		if (contextParam && questionParam) {
-			question = questionParam;
-			setTextAreaValue(contextParam);
-			getOutput();
-		} else {
-			const example = getWidgetExample<WidgetExampleTextAndContextInput<WidgetExampleOutputAnswerScore>>(
-				model,
-				validateExample
-			);
-			if (example && callApiOnMount) {
-				applyInputSample(example, { inferenceOpts: { isOnLoadCall: true } });
-			}
-		}
-	});
-
 	async function getOutput({ withModelLoading = false, isOnLoadCall = false }: InferenceRunFlags = {}) {
 		const trimmedQuestion = question.trim();
 		const trimmedContext = context.trim();
@@ -161,6 +136,7 @@
 	{noTitle}
 	{outputJson}
 	{validateExample}
+	exampleQueryParams={["context", "question"]}
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">