Sync widgets demo

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

@@ -1,12 +1,11 @@
 <script lang="ts">
 	export let isDisabled = false;
 	export let label = "Add Sentence";
-	export let onClick: (e: MouseEvent) => void;
 </script>
 
 {#if !isDisabled}
 	<!-- content here -->
-	<button class="btn-widget h-10 w-full px-5" disabled={isDisabled} on:click|preventDefault={onClick} type="submit">
+	<button class="btn-widget h-10 w-full px-5" disabled={isDisabled} on:click|preventDefault type="submit">
 		{label}
 	</button>
 {/if}

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

@@ -3,6 +3,7 @@
 	import IconSpin from "../../../Icons/IconSpin.svelte";
 	import { getBlobFromUrl } from "../../shared/helpers.js";
 	import { isLoggedIn } from "../../stores.js";
+	import { createEventDispatcher } from "svelte";
 
 	export let accept = "image/*";
 	export let classNames = "";
@@ -10,8 +11,8 @@
 	export let isDisabled = false;
 	export let imgSrc = "";
 	export let label = "Drag image file here or click to browse from your device";
-	export let onSelectFile: (file: File | Blob) => void;
-	export let onError: (e: string) => void;
+
+	const dispatch = createEventDispatcher<{ run: File | Blob; error: string }>();
 
 	let fileInput: HTMLInputElement;
 	let isDragging = false;
@@ -20,7 +21,7 @@
 	function onChange() {
 		const file = fileInput.files?.[0];
 		if (file) {
-			onSelectFile(file);
+			dispatch("run", file);
 		}
 	}
 
@@ -43,14 +44,14 @@
 			const url = await new Promise<string>((resolve) => uriItem.getAsString((s) => resolve(s)));
 			const file = await getBlobFromUrl(url);
 
-			onSelectFile(file);
+			dispatch("run", file);
 		} else if (fileItem) {
 			const file = fileItem.getAsFile();
 			if (file) {
-				onSelectFile(file);
+				dispatch("run", file);
 			}
 		} else {
-			onError(`Unrecognized dragged and dropped file or element.`);
+			dispatch("error", "Unrecognized dragged and dropped file or element.");
 		}
 	}
 </script>

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

@@ -3,13 +3,14 @@
 	import IconFile from "../../../Icons/IconFile.svelte";
 	import { isLoggedIn } from "../../stores.js";
 	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
+	import { createEventDispatcher } from "svelte";
 
 	export let accept: string | undefined;
 	export let classNames = "";
 	export let isLoading = false;
 	export let isDisabled = false;
 	export let label = "Browse for file";
-	export let onSelectFile: (file: File | Blob) => void;
+	const dispatch = createEventDispatcher<{ run: File | Blob }>();
 
 	let fileInput: HTMLInputElement;
 	let isDragging = false;
@@ -23,7 +24,7 @@
 
 		const file = fileInput.files?.[0];
 		if (file) {
-			onSelectFile(file);
+			dispatch("run", file);
 		}
 	}
 </script>

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

@@ -8,7 +8,6 @@
 	export let flatTop = false;
 	export let isLoading: boolean;
 	export let isDisabled = false;
-	export let onClickSubmitBtn: (e?: MouseEvent) => void;
 	export let placeholder = "Your sentence here...";
 	export let submitButtonLabel: string | undefined = undefined;
 	export let value: string = "";
@@ -42,8 +41,8 @@
 			{isLoading}
 			{isDisabled}
 			label={submitButtonLabel}
-			onClick={onClickSubmitBtn}
 			withParentLoginPopover={true}
+			on:run
 			on:logInPopover={() => (popOverOpen = true)}
 		/>
 	</div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { WidgetProps } from "../../..//InferenceWidget/shared/types.js";
-	import { onDestroy, onMount } from "svelte";
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import IconMagicWand from "../../..//Icons/IconMagicWand.svelte";
 	import Recorder from "./Recorder.js";
 
@@ -8,9 +8,8 @@
 	export let classNames = "";
 	export let model: WidgetProps["model"];
 	export let updateModelLoading: (isLoading: boolean, estimatedTime?: number) => void;
-	export let onRecordStart: () => void = () => null;
-	export let onRecordStop: () => void = () => null;
-	export let onError: (err: string) => void = () => null;
+
+	const dispatch = createEventDispatcher<{ start: void; stop: void; error: string }>();
 
 	let isRecording = false;
 	let recorder: Recorder;
@@ -21,35 +20,35 @@
 		try {
 			isRecording = !isRecording;
 			if (isRecording) {
-				onRecordStart();
+				dispatch("start");
 				await recorder.start();
 			} else {
-				onRecordStop();
+				dispatch("stop");
 				txt = "";
 				updateModelLoading(false);
 				recorder.stop();
 			}
 		} catch (e) {
 			isRecording = false;
-			onRecordStop();
+			dispatch("stop");
 			updateModelLoading(false);
 			if (e instanceof Error) {
 				switch (e.name) {
 					case "NotAllowedError": {
-						onError("Please allow access to your microphone & refresh the page");
+						dispatch("error", "Please allow access to your microphone & refresh the page");
 						break;
 					}
 					case "NotFoundError": {
-						onError("No microphone found on your device");
+						dispatch("error", "No microphone found on your device");
 						break;
 					}
 					default: {
-						onError(`${e.name}: ${e.message}`);
+						dispatch("error", `${e.name}: ${e.message}`);
 						break;
 					}
 				}
 			} else {
-				onError(String(e));
+				dispatch("error", String(e));
 			}
 		}
 	}
@@ -57,18 +56,25 @@
 	function renderText(_txt: string) {
 		warning = "";
 		txt = _txt;
-		onError("");
+		dispatch("error", "");
 		updateModelLoading(false);
 	}
 
 	function renderWarning(_warning: string) {
 		warning = _warning;
-		onError("");
+		dispatch("error", "");
 		updateModelLoading(false);
 	}
 
 	onMount(() => {
-		recorder = new Recorder(model.id, apiToken, renderText, renderWarning, onError, updateModelLoading);
+		recorder = new Recorder(
+			model.id,
+			apiToken,
+			renderText,
+			renderWarning,
+			(err: string) => dispatch("error", err),
+			updateModelLoading
+		);
 	});
 
 	onDestroy(() => {

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

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { onDestroy, onMount } from "svelte";
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconMicrophone from "../../..//Icons/IconMicrophone.svelte";
 
 	import Recorder from "./Recorder.js";
 
 	export let classNames = "";
-	export let onRecordStart: () => void = () => null;
-	export let onRecordStop: (blob: Blob) => void = () => null;
-	export let onError: (err: string) => void = () => null;
+
+	const dispatch = createEventDispatcher<{ start: void; stop: Blob; error: string }>();
 
 	let isRecording = false;
 	let recorder: Recorder;
@@ -28,30 +27,30 @@
 			isRecording = !isRecording;
 			if (isRecording) {
 				await recorder.start();
-				onRecordStart();
+				dispatch("start");
 			} else {
 				const blob = await recorder.stopRecording();
-				onRecordStop(blob);
+				dispatch("stop", blob);
 			}
 		} catch (e) {
 			isRecording = false;
 			if (e instanceof Error) {
 				switch (e.name) {
 					case "NotAllowedError": {
-						onError("Please allow access to your microphone & refresh the page");
+						dispatch("error", "Please allow access to your microphone & refresh the page");
 						break;
 					}
 					case "NotFoundError": {
-						onError("No microphone found on your device");
+						dispatch("error", "No microphone found on your device");
 						break;
 					}
 					default: {
-						onError(`Encountered error "${e.name}: ${e.message}"`);
+						dispatch("error", `Encountered error "${e.name}: ${e.message}"`);
 						break;
 					}
 				}
 			} else {
-				onError(String(e));
+				dispatch("error", String(e));
 			}
 		}
 	}

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

@@ -8,12 +8,11 @@
 	export let isDisabled = false;
 	export let isLoading: boolean;
 	export let label = "Compute";
-	export let onClick: () => void;
 	export let withParentLoginPopover = false;
 
 	let popOverOpen = false;
 
-	const dispatch = createEventDispatcher<{ logInPopover: void }>();
+	const dispatch = createEventDispatcher<{ logInPopover: void; run: void }>();
 
 	function _onClick() {
 		if (!$isLoggedIn) {
@@ -26,7 +25,7 @@
 			return;
 		}
 
-		onClick();
+		dispatch("run");
 	}
 </script>
 

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

@@ -1,20 +1,23 @@
 <script lang="ts">
 	import type { HighlightCoordinates } from "../types.js";
 
-	import { onMount, tick } from "svelte";
+	import { createEventDispatcher, onMount, tick } from "svelte";
 
 	import { scrollToMax } from "../../../../utils/ViewUtils.js";
 	import IconRow from "../../..//Icons/IconRow.svelte";
 
-	export let onChange: (table: (string | number)[][]) => void;
+	type Table = (string | number)[][];
+
 	export let highlighted: HighlightCoordinates;
-	export let table: (string | number)[][] = [[]];
+	export let table: Table = [[]];
 	export let canAddRow = true;
 	export let canAddCol = true;
 	export let isLoading = false;
 	export let isDisabled = false;
 
-	let initialTable: (string | number)[][] = [[]];
+	const dispatch = createEventDispatcher<{ change: Table }>();
+
+	let initialTable: Table = [[]];
 	let tableContainerEl: HTMLElement;
 
 	onMount(() => {
@@ -23,7 +26,7 @@
 
 	async function addCol() {
 		const updatedTable = table.map((row, colIndex) => [...row, colIndex === 0 ? `Header ${table[0].length + 1}` : ""]);
-		onChange(updatedTable);
+		dispatch("change", updatedTable);
 		await scrollTableToRight();
 	}
 
@@ -34,7 +37,7 @@
 
 	function addRow() {
 		const updatedTable = [...table, Array(table[0].length).fill("")];
-		onChange(updatedTable);
+		dispatch("change", updatedTable);
 	}
 
 	function editCell(e: Event, [x, y]: [number, number]) {
@@ -43,7 +46,7 @@
 		const updatedTable = table.map((row, rowIndex) =>
 			rowIndex === y ? row.map((col, colIndex) => (colIndex === x ? value : col)) : row
 		);
-		onChange(updatedTable);
+		dispatch("change", updatedTable);
 	}
 
 	function onKeyDown(e: KeyboardEvent) {
@@ -54,7 +57,7 @@
 
 	function resetTable() {
 		const updatedTable = initialTable;
-		onChange(updatedTable);
+		dispatch("change", updatedTable);
 	}
 </script>
 

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

@@ -162,21 +162,19 @@
 	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
 
 	<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
-		<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
+		<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" on:run={(e) => onSelectFile(e.detail)} />
 		<span class="mr-2 mt-1.5">or</span>
-		<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
+		<WidgetRecorder
+			classNames="mt-1.5"
+			on:start={() => onRecordStart()}
+			on:stop={(e) => onSelectFile(e.detail)}
+			on:error={(e) => onRecordError(e.detail)}
+		/>
 	</div>
 	{#if fileUrl}
 		<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
 	{/if}
-	<WidgetSubmitBtn
-		classNames="mt-2"
-		isDisabled={isRecording || isDisabled}
-		{isLoading}
-		onClick={() => {
-			getOutput();
-		}}
-	/>
+	<WidgetSubmitBtn classNames="mt-2" isDisabled={isRecording || isDisabled} {isLoading} on:run={() => getOutput()} />
 	{#if warning}
 		<div class="alert alert-warning mt-2">{warning}</div>
 	{/if}

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

@@ -160,21 +160,19 @@
 	/>
 
 	<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
-		<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" {onSelectFile} />
+		<WidgetFileInput accept="audio/*" classNames="mt-1.5 mr-2" on:run={(e) => onSelectFile(e.detail)} />
 		<span class="mr-2 mt-1.5">or</span>
-		<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
+		<WidgetRecorder
+			classNames="mt-1.5"
+			on:start={() => onRecordStart()}
+			on:stop={(e) => onSelectFile(e.detail)}
+			on:error={(e) => onRecordError(e.detail)}
+		/>
 	</div>
 	{#if fileUrl}
 		<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
 	{/if}
-	<WidgetSubmitBtn
-		classNames="mt-2"
-		isDisabled={isRecording || isDisabled}
-		{isLoading}
-		onClick={() => {
-			getOutput();
-		}}
-	/>
+	<WidgetSubmitBtn classNames="mt-2" isDisabled={isRecording || isDisabled} {isLoading} on:run={() => getOutput()} />
 
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -168,9 +168,14 @@
 
 	<div class="flex flex-wrap items-center {isDisabled ? 'pointer-events-none hidden opacity-50' : ''}">
 		{#if !isRealtimeRecording}
-			<WidgetFileInput accept="audio/*" classNames="mt-1.5" {onSelectFile} />
+			<WidgetFileInput accept="audio/*" classNames="mt-1.5" on:run={(e) => onSelectFile(e.detail)} />
 			<span class="mx-2 mt-1.5">or</span>
-			<WidgetRecorder classNames="mt-1.5" {onRecordStart} onRecordStop={onSelectFile} onError={onRecordError} />
+			<WidgetRecorder
+				classNames="mt-1.5"
+				on:start={() => onRecordStart()}
+				on:stop={(e) => onSelectFile(e.detail)}
+				on:error={(e) => onRecordError(e.detail)}
+			/>
 		{/if}
 		{#if model?.library_name === "transformers"}
 			{#if !isRealtimeRecording}
@@ -181,9 +186,9 @@
 				{apiToken}
 				{model}
 				{updateModelLoading}
-				onRecordStart={() => (isRealtimeRecording = true)}
-				onRecordStop={() => (isRealtimeRecording = false)}
-				onError={onRecordError}
+				on:start={() => (isRealtimeRecording = true)}
+				on:stop={() => (isRealtimeRecording = false)}
+				on:error={(e) => onRecordError(e.detail)}
 			/>
 		{/if}
 	</div>
@@ -191,14 +196,7 @@
 		{#if fileUrl}
 			<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
 		{/if}
-		<WidgetSubmitBtn
-			classNames="mt-2"
-			isDisabled={isRecording || isDisabled}
-			{isLoading}
-			onClick={() => {
-				getOutput();
-			}}
-		/>
+		<WidgetSubmitBtn classNames="mt-2" isDisabled={isRecording || isDisabled} {isLoading} on:run={() => getOutput()} />
 		{#if warning}
 			<div class="alert alert-warning mt-2">{warning}</div>
 		{/if}

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

@@ -266,8 +266,8 @@
 		flatTop={true}
 		{isLoading}
 		{isDisabled}
-		onClickSubmitBtn={handleNewMessage}
 		submitButtonLabel="Send"
+		on:run={() => handleNewMessage()}
 		on:cmdEnter={handleNewMessage}
 	/>
 

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

@@ -138,9 +138,7 @@
 		bind:value={text}
 		{isLoading}
 		{isDisabled}
-		onClickSubmitBtn={() => {
-			getOutput();
-		}}
+		on:run={() => getOutput()}
 		on:cmdEnter={() => getOutput()}
 	/>
 

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

@@ -143,14 +143,7 @@
 		</div>
 	{/if}
 	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
-	<WidgetSubmitBtn
-		classNames="mt-2"
-		{isLoading}
-		{isDisabled}
-		onClick={() => {
-			getOutput();
-		}}
-	/>
+	<WidgetSubmitBtn classNames="mt-2" {isLoading} {isDisabled} on:run={() => getOutput()} />
 
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -128,8 +128,8 @@
 		{isLoading}
 		{isDisabled}
 		{imgSrc}
-		{onSelectFile}
-		onError={(e) => (error = e)}
+		on:run={(e) => onSelectFile(e.detail)}
+		on:error={(e) => (error = e.detail)}
 	>
 		{#if imgSrc}
 			<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
@@ -149,7 +149,7 @@
 		{isLoading}
 		{isDisabled}
 		label="Browse for image"
-		{onSelectFile}
+		on:run={(e) => onSelectFile(e.detail)}
 	/>
 	{#if warning}
 		<div class="alert alert-warning mt-2">{warning}</div>

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

@@ -248,8 +248,8 @@
 		{isLoading}
 		{isDisabled}
 		{imgSrc}
-		{onSelectFile}
-		onError={(e) => (error = e)}
+		on:run={(e) => onSelectFile(e.detail)}
+		on:error={(e) => (error = e.detail)}
 	>
 		{#if imgSrc}
 			<Canvas {imgSrc} {highlightIndex} {mousemove} {mouseout} {output} />
@@ -265,7 +265,7 @@
 		{isLoading}
 		{isDisabled}
 		label="Browse for image"
-		{onSelectFile}
+		on:run={(e) => onSelectFile(e.detail)}
 	/>
 	{#if warning}
 		<div class="alert alert-warning mt-2">{warning}</div>

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

@@ -152,8 +152,8 @@
 			{isLoading}
 			{isDisabled}
 			{imgSrc}
-			{onSelectFile}
-			onError={(e) => (error = e)}
+			on:run={(e) => onSelectFile(e.detail)}
+			on:error={(e) => (error = e.detail)}
 		>
 			{#if imgSrc}
 				<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
@@ -173,7 +173,7 @@
 			{isLoading}
 			{isDisabled}
 			label="Browse for image"
-			{onSelectFile}
+			on:run={(e) => onSelectFile(e.detail)}
 		/>
 		<WidgetTextInput
 			bind:value={prompt}
@@ -183,13 +183,7 @@
 			placeholder="Your prompt here..."
 			on:cmdEnter={() => getOutput()}
 		/>
-		<WidgetSubmitBtn
-			{isLoading}
-			{isDisabled}
-			onClick={() => {
-				getOutput();
-			}}
-		/>
+		<WidgetSubmitBtn {isLoading} {isDisabled} on:run={() => getOutput()} />
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -123,8 +123,8 @@
 		{isLoading}
 		{isDisabled}
 		{imgSrc}
-		{onSelectFile}
-		onError={(e) => (error = e)}
+		on:run={(e) => onSelectFile(e.detail)}
+		on:error={(e) => (error = e.detail)}
 	>
 		{#if imgSrc}
 			<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
@@ -144,7 +144,7 @@
 		{isLoading}
 		{isDisabled}
 		label="Browse for image"
-		{onSelectFile}
+		on:run={(e) => onSelectFile(e.detail)}
 	/>
 	{#if warning}
 		<div class="alert alert-warning mt-2">{warning}</div>

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

@@ -160,8 +160,8 @@
 		{isLoading}
 		{isDisabled}
 		{imgSrc}
-		{onSelectFile}
-		onError={(e) => (error = e)}
+		on:run={(e) => onSelectFile(e.detail)}
+		on:error={(e) => (error = e.detail)}
 	>
 		{#if imgSrc}
 			<BoundingBoxes {imgSrc} {mouseover} {mouseout} {output} {highlightIndex} />
@@ -177,7 +177,7 @@
 		{isLoading}
 		{isDisabled}
 		label="Browse for image"
-		{onSelectFile}
+		on:run={(e) => onSelectFile(e.detail)}
 	/>
 	{#if warning}
 		<div class="alert alert-warning mt-2">{warning}</div>

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

@@ -138,9 +138,7 @@
 			bind:value={question}
 			{isLoading}
 			{isDisabled}
-			onClickSubmitBtn={() => {
-				getOutput();
-			}}
+			on:run={() => getOutput()}
 			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetTextarea

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

@@ -174,17 +174,11 @@
 		{/each}
 		<WidgetAddSentenceBtn
 			isDisabled={nComparisonSentences === maxComparisonSentences || isDisabled}
-			onClick={() => {
+			on:click={() => {
 				nComparisonSentences++;
 			}}
 		/>
-		<WidgetSubmitBtn
-			{isLoading}
-			{isDisabled}
-			onClick={() => {
-				getOutput();
-			}}
-		/>
+		<WidgetSubmitBtn {isLoading} {isDisabled} on:run={() => getOutput()} />
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -118,13 +118,7 @@
 	/>
 	<div class="space-y-2">
 		<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
-		<WidgetSubmitBtn
-			{isLoading}
-			{isDisabled}
-			onClick={() => {
-				getOutput();
-			}}
-		/>
+		<WidgetSubmitBtn {isLoading} {isDisabled} on:run={() => getOutput()} />
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -171,9 +171,7 @@
 		bind:value={query}
 		{isLoading}
 		{isDisabled}
-		onClickSubmitBtn={() => {
-			getOutput();
-		}}
+		on:run={() => getOutput()}
 		on:cmdEnter={() => getOutput()}
 	/>
 
@@ -182,7 +180,7 @@
 			<WidgetOutputTableQA {output} {isAnswerOnlyOutput} />
 		{/if}
 		{#if table.length > 1 || table[0].length > 1}
-			<WidgetTableInput {highlighted} onChange={onChangeTable} {table} {isDisabled} />
+			<WidgetTableInput {highlighted} on:change={(e) => onChangeTable(e.detail)} {table} {isDisabled} />
 		{/if}
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />

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

@@ -197,20 +197,14 @@
 				{highlighted}
 				{isLoading}
 				{isDisabled}
-				onChange={onChangeTable}
+				on:change={(e) => onChangeTable(e.detail)}
 				table={tableWithOutput}
 				canAddCol={false}
 				bind:scrollTableToRight
 			/>
 		{/if}
 	</div>
-	<WidgetSubmitBtn
-		{isLoading}
-		{isDisabled}
-		onClick={() => {
-			getOutput();
-		}}
-	/>
+	<WidgetSubmitBtn {isLoading} {isDisabled} on:run={() => getOutput()} />
 
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 	<WidgetFooter {model} {isDisabled} {outputJson} />

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

@@ -222,7 +222,7 @@
 			<WidgetSubmitBtn
 				{isLoading}
 				{isDisabled}
-				onClick={() => {
+				on:run={() => {
 					getOutput({ useCache });
 				}}
 			/>

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

@@ -126,7 +126,7 @@
 		bind:value={text}
 		{isLoading}
 		{isDisabled}
-		onClickSubmitBtn={() => getOutput()}
+		on:run={() => getOutput()}
 		on:cmdEnter={() => getOutput()}
 	/>
 

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

@@ -117,14 +117,7 @@
 	/>
 
 	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
-	<WidgetSubmitBtn
-		classNames="mt-2"
-		{isLoading}
-		{isDisabled}
-		onClick={() => {
-			getOutput();
-		}}
-	/>
+	<WidgetSubmitBtn classNames="mt-2" {isLoading} {isDisabled} on:run={() => getOutput()} />
 
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -238,14 +238,7 @@
 	/>
 
 	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
-	<WidgetSubmitBtn
-		classNames="mt-2"
-		{isLoading}
-		{isDisabled}
-		onClick={() => {
-			getOutput();
-		}}
-	/>
+	<WidgetSubmitBtn classNames="mt-2" {isLoading} {isDisabled} on:run={() => getOutput()} />
 	{#if warning}
 		<div class="alert alert-warning mt-2">{warning}</div>
 	{/if}

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

@@ -163,8 +163,8 @@
 			{isLoading}
 			{isDisabled}
 			{imgSrc}
-			{onSelectFile}
-			onError={(e) => (error = e)}
+			on:run={(e) => onSelectFile(e.detail)}
+			on:error={(e) => (error = e.detail)}
 		>
 			{#if imgSrc}
 				<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
@@ -184,15 +184,13 @@
 			{isLoading}
 			{isDisabled}
 			label="Browse for image"
-			{onSelectFile}
+			on:run={(e) => onSelectFile(e.detail)}
 		/>
 		<WidgetQuickInput
 			bind:value={question}
 			{isLoading}
 			{isDisabled}
-			onClickSubmitBtn={() => {
-				getOutput();
-			}}
+			on:run={() => getOutput()}
 			on:cmdEnter={() => getOutput()}
 		/>
 	</div>

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

@@ -175,13 +175,7 @@
 			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetCheckbox bind:checked={multiClass} label="Allow multiple true classes" />
-		<WidgetSubmitBtn
-			{isLoading}
-			{isDisabled}
-			onClick={() => {
-				getOutput();
-			}}
-		/>
+		<WidgetSubmitBtn {isLoading} {isDisabled} on:run={() => getOutput()} />
 		{#if warning}
 			<div class="alert alert-warning mt-2">{warning}</div>
 		{/if}

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

@@ -164,8 +164,8 @@
 			{isLoading}
 			{isDisabled}
 			{imgSrc}
-			{onSelectFile}
-			onError={(e) => (error = e)}
+			on:run={(e) => onSelectFile(e.detail)}
+			on:error={(e) => (error = e.detail)}
 		>
 			{#if imgSrc}
 				<img src={imgSrc} class="pointer-events-none mx-auto max-h-44 shadow" alt="" />
@@ -185,7 +185,7 @@
 			{isLoading}
 			{isDisabled}
 			label="Browse for image"
-			{onSelectFile}
+			on:run={(e) => onSelectFile(e.detail)}
 		/>
 		<WidgetTextInput
 			bind:value={candidateLabels}
@@ -195,13 +195,7 @@
 			placeholder="Possible class names..."
 			on:cmdEnter={() => getOutput()}
 		/>
-		<WidgetSubmitBtn
-			{isLoading}
-			{isDisabled}
-			onClick={() => {
-				getOutput();
-			}}
-		/>
+		<WidgetSubmitBtn {isLoading} {isDisabled} on:run={() => getOutput()} />
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />