Sync widgets demo

packages/widgets/src/additional-svelte-typings.d.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-namespace, @typescript-eslint/no-unused-vars
+declare namespace svelteHTML {
+	// enhance attributes
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface HTMLAttributes<T> {
+		// If you want to use on:beforeinstallprompt
+		"on:cmdEnter"?: () => void;
+	}
+}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onCmdEnter } from "../../../../utils/ViewUtils.js";
 	import WidgetSubmitBtn from "../WidgetSubmitBtn/WidgetSubmitBtn.svelte";
 
 	export let flatTop = false;
@@ -19,6 +20,8 @@
 		type="text"
 		disabled={isLoading || isDisabled}
 		autocomplete="off"
+		use:onCmdEnter={{ disabled: isLoading || isDisabled }}
+		on:cmdEnter
 	/>
 	<WidgetSubmitBtn
 		classNames="rounded-l-none border-l-0 {flatTop ? 'rounded-t-none' : ''}"

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

@@ -6,21 +6,8 @@
 	export let isLoading: boolean;
 	export let label = "Compute";
 	export let onClick: () => void;
-
-	function onKeyDown(e: KeyboardEvent) {
-		if (isLoading || isDisabled) {
-			return;
-		}
-		// run inference on cmd+Enter
-		if (e.code === "Enter" && (e.metaKey || e.ctrlKey)) {
-			e.preventDefault();
-			onClick();
-		}
-	}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
 {#if !isDisabled}
 	<button
 		class="btn-widget h-10 w-24 px-5 {classNames}"

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

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { onCmdEnter } from "../../../../utils/ViewUtils.js";
 	import WidgetLabel from "../WidgetLabel/WidgetLabel.svelte";
 
 	export let label: string | undefined = undefined;
 	export let placeholder: string = "Your sentence here...";
+	export let isLoading = false;
 	export let isDisabled = false;
 	export let value: string;
 </script>
@@ -15,6 +17,8 @@
 			placeholder={isDisabled ? "" : placeholder}
 			disabled={isDisabled}
 			type="text"
+			use:onCmdEnter={{ disabled: isLoading || isDisabled }}
+			on:cmdEnter
 		/>
 	</svelte:fragment>
 </WidgetLabel>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { tick } from "svelte";
 
-	import { delay } from "../../../../utils/ViewUtils.js";
+	import { delay, onCmdEnter } from "../../../../utils/ViewUtils.js";
 	import WidgetLabel from "../WidgetLabel/WidgetLabel.svelte";
 
 	export let label: string = "";
@@ -103,6 +103,8 @@
 			dir="auto"
 			contenteditable
 			class:pointer-events-none={isLoading || isDisabled}
+			use:onCmdEnter={{ disabled: isLoading || isDisabled }}
+			on:cmdEnter
 			bind:this={containerSpanEl}
 			on:paste|preventDefault={handlePaste}
 			on:input={updateInnerTextValue}

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

@@ -268,6 +268,7 @@
 		{isDisabled}
 		onClickSubmitBtn={handleNewMessage}
 		submitButtonLabel="Send"
+		on:cmdEnter={handleNewMessage}
 	/>
 
 	<WidgetInfo {model} {error} />

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

@@ -141,6 +141,7 @@
 		onClickSubmitBtn={() => {
 			getOutput();
 		}}
+		on:cmdEnter={() => getOutput()}
 	/>
 
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />

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

@@ -142,7 +142,7 @@
 			Mask token: <code>{model.mask_token}</code>
 		</div>
 	{/if}
-	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
 	<WidgetSubmitBtn
 		classNames="mt-2"
 		{isLoading}

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

@@ -177,9 +177,11 @@
 		/>
 		<WidgetTextInput
 			bind:value={prompt}
+			{isLoading}
 			{isDisabled}
 			label="(Optional) Text-guidance if the model has support for it"
 			placeholder="Your prompt here..."
+			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetSubmitBtn
 			{isLoading}

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

@@ -141,6 +141,7 @@
 			onClickSubmitBtn={() => {
 				getOutput();
 			}}
+			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetTextarea
 			bind:value={context}
@@ -148,6 +149,7 @@
 			{isDisabled}
 			placeholder="Please input some context..."
 			label="Context"
+			on:cmdEnter={() => getOutput()}
 		/>
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />

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

@@ -149,18 +149,28 @@
 	<div class="flex flex-col space-y-2">
 		<WidgetTextInput
 			bind:value={sourceSentence}
+			{isLoading}
 			{isDisabled}
 			label="Source Sentence"
 			placeholder={isDisabled ? "" : "Your sentence here..."}
+			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetTextInput
 			bind:value={comparisonSentences[0]}
+			{isLoading}
 			{isDisabled}
 			label="Sentences to compare to"
 			placeholder={isDisabled ? "" : "Your sentence here..."}
+			on:cmdEnter={() => getOutput()}
 		/>
 		{#each Array(nComparisonSentences - 1) as _, idx}
-			<WidgetTextInput bind:value={comparisonSentences[idx + 1]} {isDisabled} placeholder="Your sentence here..." />
+			<WidgetTextInput
+				bind:value={comparisonSentences[idx + 1]}
+				{isLoading}
+				{isDisabled}
+				placeholder="Your sentence here..."
+				on:cmdEnter={() => getOutput()}
+			/>
 		{/each}
 		<WidgetAddSentenceBtn
 			isDisabled={nComparisonSentences === maxComparisonSentences || isDisabled}

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

@@ -117,7 +117,7 @@
 		validateExample={isTextInput}
 	/>
 	<div class="space-y-2">
-		<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+		<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
 		<WidgetSubmitBtn
 			{isLoading}
 			{isDisabled}

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

@@ -174,6 +174,7 @@
 		onClickSubmitBtn={() => {
 			getOutput();
 		}}
+		on:cmdEnter={() => getOutput()}
 	/>
 
 	<div class="mt-4">

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

@@ -213,6 +213,7 @@
 			{isDisabled}
 			size="big"
 			bind:renderTextOutput
+			on:cmdEnter={() => getOutput({ useCache })}
 		/>
 		{#if model.id === "bigscience/bloom"}
 			<WidgetBloomDecoding bind:decodingStrategy />

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

@@ -122,7 +122,13 @@
 <WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
 	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
 
-	<WidgetQuickInput bind:value={text} {isLoading} {isDisabled} onClickSubmitBtn={() => getOutput()} />
+	<WidgetQuickInput
+		bind:value={text}
+		{isLoading}
+		{isDisabled}
+		onClickSubmitBtn={() => getOutput()}
+		on:cmdEnter={() => getOutput()}
+	/>
 
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />
 

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

@@ -116,7 +116,7 @@
 		validateExample={isTextInput}
 	/>
 
-	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
 	<WidgetSubmitBtn
 		classNames="mt-2"
 		{isLoading}

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

@@ -237,7 +237,7 @@
 		validateExample={isTextInput}
 	/>
 
-	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} />
+	<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} on:cmdEnter={() => getOutput()} />
 	<WidgetSubmitBtn
 		classNames="mt-2"
 		{isLoading}

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

@@ -193,6 +193,7 @@
 			onClickSubmitBtn={() => {
 				getOutput();
 			}}
+			on:cmdEnter={() => getOutput()}
 		/>
 	</div>
 	<WidgetInfo {model} {computeTime} {error} {modelLoading} />

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

@@ -159,12 +159,20 @@
 		validateExample={isZeroShotTextInput}
 	/>
 	<div class="flex flex-col space-y-2">
-		<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} {isDisabled} placeholder="Text to classify..." />
+		<WidgetTextarea
+			bind:value={text}
+			bind:setValue={setTextAreaValue}
+			{isDisabled}
+			placeholder="Text to classify..."
+			on:cmdEnter={() => getOutput()}
+		/>
 		<WidgetTextInput
 			bind:value={candidateLabels}
+			{isLoading}
 			{isDisabled}
 			label="Possible class names (comma-separated)"
 			placeholder="Possible class names..."
+			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetCheckbox bind:checked={multiClass} label="Allow multiple true classes" />
 		<WidgetSubmitBtn

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

@@ -189,9 +189,11 @@
 		/>
 		<WidgetTextInput
 			bind:value={candidateLabels}
+			{isLoading}
 			{isDisabled}
 			label="Possible class names (comma-separated)"
 			placeholder="Possible class names..."
+			on:cmdEnter={() => getOutput()}
 		/>
 		<WidgetSubmitBtn
 			{isLoading}

packages/widgets/src/lib/utils/ViewUtils.ts

@@ -1,4 +1,5 @@
 import type { PipelineType } from "@huggingface/tasks";
+import type { ActionReturn } from "svelte/action";
 
 const ESCAPED = {
 	'"': """,
@@ -128,6 +129,33 @@ export function getPipelineTask(modelPipeline: PipelineType): PipelineType {
 	return modelPipeline === "text2text-generation" ? "text-generation" : modelPipeline;
 }
 
+/**
+ * Svelte action that will call inference endpoint when a user hits cmd+Enter on a current html element
+ */
+export function onCmdEnter(node: HTMLElement, opts: { disabled: boolean }): ActionReturn {
+	let currentOpts = opts;
+
+	function onKeyDown(e: KeyboardEvent) {
+		if ((node as HTMLInputElement)?.disabled || currentOpts.disabled) {
+			return;
+		}
+		// run inference on cmd+Enter
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			node.dispatchEvent(new CustomEvent("cmdEnter"));
+		}
+	}
+	node.addEventListener("keydown", onKeyDown);
+	return {
+		update(updatedOps: { disabled: boolean }) {
+			currentOpts = updatedOps;
+		},
+		destroy() {
+			node.removeEventListener("keydown", onKeyDown);
+		},
+	};
+}
+
 /**
 * For Tailwind:
 bg-blue-100 border-blue-100 dark:bg-blue-800 dark:border-blue-800