Typings for all kinds of widget examples (#979)

* Typings for all kinds of widget examples * Add a //#region block * Tweaks * Fix some part of the CI already(?) cc @krampstudio @mishig25 for review 🙏 * Revert "Fix some part of the CI already(?)" This reverts commit 3e89028. * nvm, probably better like this * sorry this was wrong * 🤯 Use generics in Svelte (i guess...) * Proposal: widget types (#980) * wip * 🩹 Fix types in widgets * 🩹 Minimize diff * 💄 Lint * Update js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte Co-authored-by: Julien Chaumond <[email protected]> * 🧹 cleanup unwanted change * 🩹 wip: type safety * ✨ Typing & validation for ALL widgets * ♻️ Slightly less verbose version * 🩹 * 🩹 Import type? * 🩹 Alternative generic syntax to satisfy svelte-check --------- Co-authored-by: Julien Chaumond <[email protected]> * 💄 Lint & checks * Go for same syntax everywhere --------- Co-authored-by: Simon Brandeis <[email protected]> Co-authored-by: SBrandeis <[email protected]>
huggingface · Sep 29, 2023 · b2ba06d · b2ba06d
1 parent bf08e8d
commit b2ba06d
Show file tree

Hide file tree

Showing 31 changed files with 521 additions and 108 deletions.
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts b/js/src/lib/components/InferenceWidget/shared/WidgetExample.ts
@@ -0,0 +1,89 @@
+type TableData = Record<string, (string | number)[]>;
+
+//#region outputs
+export type WidgetExampleOutputLabels = Array<{ label: string; score: number; }>;
+export interface WidgetExampleOutputAnswerScore {
+	answer: string;
+	score:  number;
+}
+export interface WidgetExampleOutputText {
+	text: string;
+}
+export interface WidgetExampleOutputUrl {
+	url: string;
+}
+
+export type WidgetExampleOutput =
+	| WidgetExampleOutputLabels
+	| WidgetExampleOutputAnswerScore
+	| WidgetExampleOutputText
+	| WidgetExampleOutputUrl;
+//#endregion
+
+export interface WidgetExampleBase<TOutput> {
+	example_title?: string;
+	group?:         string;
+	output?:        TOutput;
+}
+
+export interface WidgetExampleTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	text: string;
+}
+
+export interface WidgetExampleTextAndContextInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleTextInput<TOutput> {
+	context: string;
+}
+
+export interface WidgetExampleTextAndTableInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
+	table: (string | number)[][];
+}
+
+export interface WidgetExampleAssetInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	src: string;
+}
+export interface WidgetExampleAssetAndPromptInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleAssetInput<TOutput> {
+	prompt: string;
+}
+
+export type WidgetExampleAssetAndTextInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleTextInput<TOutput>;
+
+export type WidgetExampleAssetAndZeroShotInput<TOutput = WidgetExampleOutput> = WidgetExampleAssetInput<TOutput> &
+	WidgetExampleZeroShotTextInput<TOutput>;
+
+export interface WidgetExampleStructuredDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	structuredData: TableData;
+}
+
+export interface WidgetExampleTableDataInput<TOutput = WidgetExampleOutput> extends WidgetExampleBase<TOutput> {
+	table: TableData;
+}
+
+export interface WidgetExampleZeroShotTextInput<TOutput = WidgetExampleOutput> extends WidgetExampleTextInput<TOutput> {
+	text:             string;
+	candidate_labels: string;
+	multi_class:      boolean;
+}
+
+export interface WidgetExampleSentenceSimilarityInput<TOutput = WidgetExampleOutput>
+	extends WidgetExampleBase<TOutput> {
+	source_sentence: string;
+	sentences:       string[];
+}
+
+//#endregion
+
+export type WidgetExample<TOutput = WidgetExampleOutput> =
+	| WidgetExampleTextInput<TOutput>
+	| WidgetExampleTextAndContextInput<TOutput>
+	| WidgetExampleTextAndTableInput<TOutput>
+	| WidgetExampleAssetInput<TOutput>
+	| WidgetExampleAssetAndPromptInput<TOutput>
+	| WidgetExampleAssetAndTextInput<TOutput>
+	| WidgetExampleAssetAndZeroShotInput<TOutput>
+	| WidgetExampleStructuredDataInput<TOutput>
+	| WidgetExampleTableDataInput<TOutput>
+	| WidgetExampleZeroShotTextInput<TOutput>
+	| WidgetExampleSentenceSimilarityInput<TOutput>;
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInputSamples/WidgetInputSamples.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-	import type { WidgetInputSample } from "../../../../interfaces/Types";
+	import type { WidgetExample } from "../WidgetExample";
+
+	type TWidgetExample = $$Generic<WidgetExample>;
 
 	import { slide } from "svelte/transition";
 
 	import IconCaretDownV2 from "../../../Icons/IconCaretDownV2.svelte";
 
 	export let classNames = "";
 	export let isLoading = false;
-	export let inputSamples: WidgetInputSample[];
-	export let applyInputSample: (sample: Record<string, any>) => void;
-	export let previewInputSample: (sample: Record<string, any>) => void;
+	export let inputSamples: TWidgetExample[];
+	export let applyInputSample: (sample: TWidgetExample) => void;
+	export let previewInputSample: (sample: TWidgetExample) => void;
 
 	let containerEl: HTMLElement;
 	let isOptionsVisible = false;

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { WidgetProps, ModelLoadInfo } from "../types";
-	import type { WidgetInputSample } from "../../../../interfaces/Types";
+	import type { WidgetExample } from "../WidgetExample";
+
+	type TWidgetExample = $$Generic<WidgetExample>;
 
 	import { onMount } from "svelte";
 
@@ -26,22 +28,27 @@
 	};
 	export let noTitle = false;
 	export let outputJson: string;
-	export let applyInputSample: (sample: Record<string, any>) => void = () => {};
-	export let previewInputSample: (sample: Record<string, any>) => void = () => {};
+	export let applyInputSample: (sample: TWidgetExample) => void = () => {};
+	export let previewInputSample: (sample: TWidgetExample) => void = () => {};
+	export let validateExample: (sample: WidgetExample) => sample is TWidgetExample;
 
 	let isMaximized = false;
 	let modelLoadInfo: ModelLoadInfo | undefined = undefined;
 	let selectedInputGroup: string;
 
-	const inputSamples: WidgetInputSample[] = (model?.widgetData ?? [])
+	const inputSamples = (model.widgetData ?? [])
+		.filter(validateExample)
 		.sort((sample1, sample2) => (sample2.example_title ? 1 : 0) - (sample1.example_title ? 1 : 0))
 		.map((sample, idx) => ({
 			example_title: `Example ${++idx}`,
 			group: "Group 1",
 			...sample,
 		}));
 
-	const inputGroups: { group: string; inputSamples: WidgetInputSample[] }[] = [];
+	const inputGroups: {
+		group: string;
+		inputSamples: TWidgetExample[];
+	}[] = [];
 	for (const inputSample of inputSamples) {
 		const isExist = inputGroups.find(({ group }) => group === inputSample.group);
 		if (!isExist) {
@@ -80,7 +87,7 @@
 		</p>
 	{:else}
 		{#if isMaximized}
-			<button class="absolute top-6 right-12" on:click={onClickMaximizeBtn}>
+			<button class="absolute right-12 top-6" on:click={onClickMaximizeBtn}>
 				<IconCross classNames="text-xl text-gray-500 hover:text-black" />
 			</button>
 		{/if}

diff --git a/js/src/lib/components/InferenceWidget/shared/inputValidation.ts b/js/src/lib/components/InferenceWidget/shared/inputValidation.ts
@@ -0,0 +1,87 @@
+import type {
+	WidgetExample,
+	WidgetExampleAssetAndPromptInput,
+	WidgetExampleAssetAndTextInput,
+	WidgetExampleAssetAndZeroShotInput,
+	WidgetExampleAssetInput,
+	WidgetExampleSentenceSimilarityInput,
+	WidgetExampleStructuredDataInput,
+	WidgetExampleTableDataInput,
+	WidgetExampleTextAndContextInput,
+	WidgetExampleTextAndTableInput,
+	WidgetExampleTextInput,
+	WidgetExampleZeroShotTextInput,
+} from "./WidgetExample";
+
+export function isTextInput<TOutput>(sample: WidgetExample<TOutput>): sample is WidgetExampleTextInput<TOutput> {
+	return "text" in sample;
+}
+
+export function isTextAndContextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleTextAndContextInput<TOutput> {
+	return isTextInput(sample) && "context" in sample;
+}
+
+export function isAssetInput<TOutput>(sample: WidgetExample<TOutput>): sample is WidgetExampleAssetInput<TOutput> {
+	return "src" in sample;
+}
+
+export function isAssetAndPromptInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleAssetAndPromptInput<TOutput> {
+	return isAssetInput(sample) && "prompt" in sample && typeof sample.prompt === "string";
+}
+
+export function isAssetAndTextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleAssetAndTextInput<TOutput> {
+	return isAssetInput(sample) && isTextInput(sample);
+}
+
+export function isStructuredDataInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleStructuredDataInput<TOutput> {
+	return "structuredData" in sample;
+}
+
+export function isTableDataInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleTableDataInput<TOutput> {
+	return "table" in sample;
+}
+
+function _isZeroShotTextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is Exclude<WidgetExampleZeroShotTextInput<TOutput>, "text"> {
+	return "candidate_labels" in sample && "multi_class" in sample;
+}
+
+export function isZeroShotTextInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleZeroShotTextInput<TOutput> {
+	return isTextInput(sample) && _isZeroShotTextInput(sample);
+}
+
+export function isSentenceSimilarityInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleSentenceSimilarityInput<TOutput> {
+	return "source_sentence" in sample && "sentences" in sample;
+}
+
+export function isTextAndTableInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleTextAndTableInput<TOutput> {
+	return (
+		isTextInput(sample)
+		&& "table" in sample
+		&& Array.isArray(sample.table)
+		&& sample.table.every(r => Array.isArray(r) && r.every(c => typeof c === "string" || typeof c === "number"))
+	);
+}
+
+export function isAssetAndZeroShotInput<TOutput>(
+	sample: WidgetExample<TOutput>
+): sample is WidgetExampleAssetAndZeroShotInput<TOutput> {
+	return isAssetInput(sample) && _isZeroShotTextInput(sample);
+}
diff --git a/js/src/lib/components/InferenceWidget/shared/outputValidation.ts b/js/src/lib/components/InferenceWidget/shared/outputValidation.ts
@@ -0,0 +1,22 @@
+import type {
+	WidgetExampleOutputLabels,
+	WidgetExampleOutputAnswerScore,
+	WidgetExampleOutputText,
+	WidgetExampleOutputUrl,
+} from "./WidgetExample";
+
+export function isValidOutputLabels(arg: unknown): arg is WidgetExampleOutputLabels {
+	return Array.isArray(arg) && arg.every(x => typeof x.label === "string" && typeof x.score === "number");
+}
+
+export function isValidOutputAnswerScore(arg: unknown): arg is WidgetExampleOutputAnswerScore {
+	return !!arg && typeof arg === "object" && typeof arg["answer"] === "string" && typeof arg["score"] === "number";
+}
+
+export function isValidOutputText(arg: unknown): arg is WidgetExampleOutputText {
+	return !!arg && typeof arg === "object" && typeof arg["text"] === "string";
+}
+
+export function isValidOutputUrl(arg: unknown): arg is WidgetExampleOutputUrl {
+	return !!arg && typeof arg === "object" && typeof arg["url"] === "string" && arg["url"].startsWith("https://");
+}
diff --git a/...onents/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte b/...onents/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../shared/types";
+	import type { WidgetExample, WidgetExampleAssetInput, WidgetExampleOutputLabels } from "../../shared/WidgetExample";
 
 	import { onMount } from "svelte";
 
@@ -10,6 +11,8 @@
 	import WidgetSubmitBtn from "../../shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { getResponse, getBlobFromUrl, getDemoInputs } from "../../shared/helpers";
+	import { isValidOutputLabels } from "../../shared/outputValidation";
+	import { isAssetInput } from "../../shared/inputValidation";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -112,30 +115,35 @@
 		}
 	}
 
-	function isValidOutput(arg: any): arg is { label: string; score: number }[] {
-		return Array.isArray(arg) && arg.every(x => typeof x.label === "string" && typeof x.score === "number");
-	}
-
 	function parseOutput(body: unknown): Array<{ label: string; score: number }> {
-		if (isValidOutput(body)) {
+		if (isValidOutputLabels(body)) {
 			return body;
 		}
 		throw new TypeError("Invalid output: output must be of type Array<label: string, score:number>");
 	}
 
-	function applyInputSample(sample: Record<string, any>) {
+	function applyInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
 		file = null;
-		filename = sample.example_title;
+		filename = sample.example_title!;
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
-	function previewInputSample(sample: Record<string, any>) {
-		filename = sample.example_title;
+	function previewInputSample(sample: WidgetExampleAssetInput<WidgetExampleOutputLabels>) {
+		filename = sample.example_title!;
 		fileUrl = sample.src;
-		output = [];
-		outputJson = "";
+		if (isValidOutputLabels(sample.output)) {
+			output = sample.output;
+			outputJson = "";
+		} else {
+			output = [];
+			outputJson = "";
+		}
+	}
+
+	function validateExample(sample: WidgetExample): sample is WidgetExampleAssetInput<WidgetExampleOutputLabels> {
+		return isAssetInput(sample) && (!sample.output || isValidOutputLabels(sample.output));
 	}
 
 	onMount(() => {
@@ -161,12 +169,13 @@
 	{noTitle}
 	{outputJson}
 	{previewInputSample}
+	{validateExample}
 >
 	<svelte:fragment slot="top">
 		<form>
 			<div class="flex flex-wrap items-center">
 				<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
-				<span class="mt-1.5 mr-2">or</span>
+				<span class="mr-2 mt-1.5">or</span>
 				<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
 			</div>
 			{#if fileUrl}