Sync widgets demo

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

@@ -12,13 +12,14 @@
 	export let size: "small" | "big" = "small";
 
 	let containerSpanEl: HTMLSpanElement;
+	let isOnFocus = false;
 	const typingEffectSpeedMs = 12;
 	const classNamesInput = "whitespace-pre-wrap inline font-normal text-black dark:text-white";
 	const classNamesOutput = "whitespace-pre-wrap inline text-blue-600 dark:text-blue-400";
 
-	export async function renderTypingEffect(outputTxt: string): Promise<void> {
+	export async function renderTextOutput(outputTxt: string, typingEffect = true): Promise<void> {
 		const spanEl = document.createElement("span");
-		spanEl.contentEditable = "true";
+		spanEl.contentEditable = isDisabled ? "false" : "true";
 		spanEl.className = classNamesOutput;
 		containerSpanEl?.appendChild(spanEl);
 		await tick();
@@ -29,16 +30,21 @@
 		}
 		await tick();
 		// split on whitespace or any other character to correctly render newlines \n
-		for (const char of outputTxt.split(/(\s|.)/g)) {
-			await delay(typingEffectSpeedMs);
-			spanEl.textContent += char;
-			moveCaretToEnd();
+		if (typingEffect) {
+			for (const char of outputTxt.split(/(\s|.)/g)) {
+				await delay(typingEffectSpeedMs);
+				spanEl.textContent += char;
+				if (isOnFocus) {
+					moveCaretToEnd();
+				}
+			}
+		} else {
+			spanEl.textContent = outputTxt;
 		}
 		updateInnerTextValue();
 	}
 
 	function moveCaretToEnd() {
-		containerSpanEl?.focus();
 		if (containerSpanEl) {
 			const range = document.createRange();
 			range.selectNodeContents(containerSpanEl);
@@ -73,6 +79,11 @@
 		value = containerSpanEl?.textContent ?? "";
 	}
 
+	function onFocus() {
+		isOnFocus = true;
+		moveCaretToEnd();
+	}
+
 	export function setValue(text: string): void {
 		containerSpanEl.textContent = text;
 		updateInnerTextValue();
@@ -87,13 +98,16 @@
 				? 'min-h-[42px]'
 				: 'min-h-[144px]'} inline-block max-h-[500px] whitespace-pre-wrap rounded-lg border border-gray-200 shadow-inner outline-none focus:shadow-inner focus:ring focus:ring-blue-200 dark:bg-gray-925"
 			role="textbox"
-			contenteditable={!isLoading && !isDisabled}
 			style="--placeholder: '{isDisabled ? '' : placeholder}'"
 			spellcheck="false"
 			dir="auto"
+			contenteditable
+			class:pointer-events-none={isLoading || isDisabled}
 			bind:this={containerSpanEl}
 			on:paste|preventDefault={handlePaste}
 			on:input={updateInnerTextValue}
+			on:focus={onFocus}
+			on:blur={() => (isOnFocus = false)}
 		/>
 	</svelte:fragment>
 </WidgetLabel>

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

@@ -39,7 +39,7 @@
 	let outputJson: string;
 	let text = "";
 	let warning: string = "";
-	let renderTypingEffect: (outputTxt: string) => Promise<void>;
+	let renderTextOutput: (outputTxt: string, typingEffect?: boolean) => Promise<void>;
 	let inferenceTimer: any;
 	let setTextAreaValue: (text: string) => void;
 	let decodingStrategy: "sampling" | "greedy" = "sampling";
@@ -80,7 +80,12 @@
 			updateUrl({ text: trimmedValue });
 		}
 
-		const requestBody = { inputs: trimmedValue, parameters: {} as unknown };
+		const parameters = {} as any;
+		if (model?.pipeline_tag === "text-generation") {
+			// todo: until streaming is supported https://github.com/huggingface/huggingface.js/issues/410
+			parameters["max_new_tokens"] = 20;
+		}
+		const requestBody = { inputs: trimmedValue, parameters };
 		addInferenceParameters(requestBody, model);
 
 		if (model.id === "bigscience/bloom") {
@@ -133,7 +138,7 @@
 				if (outputWithoutInput.length === 0) {
 					warning = "No text was generated";
 				} else {
-					await renderTypingEffect(outputWithoutInput);
+					await renderTextOutput(outputWithoutInput);
 				}
 			}
 		} else if (res.status === "loading-model") {
@@ -165,7 +170,7 @@
 	function renderExampleOutput(output: string) {
 		// if output doesn't start with space, add space in front of output
 		const prefix = /^\s/.test(output) ? "" : " ";
-		renderTypingEffect(prefix + output);
+		renderTextOutput(prefix + output, false);
 	}
 
 	function applyWidgetExample(sample: WidgetExampleTextInput<WidgetExampleOutputText>, opts: ExampleRunOpts = {}) {
@@ -207,7 +212,7 @@
 			{isLoading}
 			{isDisabled}
 			size="big"
-			bind:renderTypingEffect
+			bind:renderTextOutput
 		/>
 		{#if model.id === "bigscience/bloom"}
 			<WidgetBloomDecoding bind:decodingStrategy />