Sync widgets demo

packages/widgets/src/lib/components/Icons/IconRefresh.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+	><path
+		d="M25.95 7.65l.005-.004c-.092-.11-.197-.206-.293-.312c-.184-.205-.367-.41-.563-.603c-.139-.136-.286-.262-.43-.391c-.183-.165-.366-.329-.558-.482c-.16-.128-.325-.247-.49-.367c-.192-.14-.385-.277-.585-.406a13.513 13.513 0 0 0-.533-.324q-.308-.179-.625-.341c-.184-.094-.37-.185-.56-.27c-.222-.1-.449-.191-.678-.28c-.19-.072-.378-.145-.571-.208c-.246-.082-.498-.15-.75-.217c-.186-.049-.368-.102-.556-.143c-.29-.063-.587-.107-.883-.15c-.16-.023-.315-.056-.476-.073A12.933 12.933 0 0 0 6 7.703V4H4v8h8v-2H6.811A10.961 10.961 0 0 1 16 5a11.111 11.111 0 0 1 1.189.067c.136.015.268.042.403.061c.25.037.501.075.746.128c.16.035.315.08.472.121c.213.057.425.114.633.183c.164.054.325.116.486.178c.193.074.384.15.57.235c.162.072.32.15.477.23q.268.136.526.286c.153.09.305.18.453.276c.168.11.33.224.492.342c.14.102.282.203.417.312c.162.13.316.268.47.406c.123.11.248.217.365.332c.167.164.323.338.479.512A10.993 10.993 0 1 1 5 16H3a13 13 0 1 0 22.95-8.35z"
+		fill="currentColor"
+	/></svg
+>

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

@@ -12,6 +12,7 @@
 
 	export let isLoading = false;
 	export let callApiOnMount: WidgetProps["callApiOnMount"];
+	export let classNames: string;
 	export let exampleQueryParams: WidgetExampleAttribute[] = [];
 	export let applyWidgetExample: (sample: TWidgetExample, opts?: ExampleRunOpts) => void;
 
@@ -117,7 +118,7 @@
 
 <svelte:window on:click={onClick} />
 
-<div class="ml-auto flex gap-x-1">
+<div class={classNames}>
 	<!-- Example Groups -->
 	{#if exampleGroups.length > 1}
 		<WidgetExamplesGroup

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

@@ -1,13 +1,17 @@
 <script lang="ts" generics="TWidgetExample extends WidgetExample">
+	import { fade } from "svelte/transition";
+
 	import { updateWidgetState } from "../../stores.js";
 	import { TASKS_DATA } from "@huggingface/tasks";
 	import type { WidgetExample, WidgetExampleAttribute } from "@huggingface/tasks";
 	import type { WidgetProps, ExampleRunOpts } from "../types.js";
 	import { getPipelineTask } from "../../../../utils/ViewUtils.js";
 	import IconInfo from "../../..//Icons/IconInfo.svelte";
+	import IconRefresh from "../../..//Icons/IconRefresh.svelte";
 	import IconLightning from "../../..//Icons/IconLightning.svelte";
 	import PipelineTag from "../../../PipelineTag/PipelineTag.svelte";
 	import WidgetExamples from "../WidgetExamples/WidgetExamples.svelte";
+	import { createEventDispatcher } from "svelte";
 
 	export let model: WidgetProps["model"];
 	export let noTitle = false;
@@ -18,7 +22,9 @@
 	export let validateExample: ((sample: WidgetExample) => sample is TWidgetExample) | undefined = undefined;
 	export let callApiOnMount: WidgetProps["callApiOnMount"] = false;
 	export let exampleQueryParams: WidgetExampleAttribute[] = [];
+	export let showReset = false;
 
+	const dispatch = createEventDispatcher<{ reset: void }>();
 	const pipeline = model?.pipeline_tag;
 
 	$: task = pipeline ? getPipelineTask(pipeline) : undefined;
@@ -62,7 +68,7 @@
 		{/if}
 	{/if}
 </div>
-<div class="mb-0.5 flex w-full max-w-full flex-wrap items-center justify-between text-sm text-gray-500">
+<div class="mb-0.5 flex w-full max-w-full flex-wrap items-center text-sm text-gray-500">
 	{#if pipeline && task}
 		<div class="flex gap-4 items-center mb-1.5">
 			<a
@@ -75,7 +81,21 @@
 		</div>
 	{/if}
 
-	{#if validExamples.length && applyWidgetExample}
-		<WidgetExamples {validExamples} {isLoading} {applyWidgetExample} {callApiOnMount} {exampleQueryParams} />
-	{/if}
+	<div class="flex gap-2 ml-auto">
+		{#if showReset && !isDisabled}
+			<button class="flex items-center mb-1.5 text-gray-400" on:click={() => dispatch("reset")} transition:fade>
+				<IconRefresh />
+			</button>
+		{/if}
+		{#if validExamples.length && applyWidgetExample}
+			<WidgetExamples
+				classNames="flex gap-x-1 peer:"
+				{validExamples}
+				{isLoading}
+				{applyWidgetExample}
+				{callApiOnMount}
+				{exampleQueryParams}
+			/>
+		{/if}
+	</div>
 </div>

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

@@ -4,11 +4,13 @@
 	import { isFullyScrolled, scrollToMax } from "../../../../utils/ViewUtils.js";
 	import WidgetOutputConvoBubble from "../WidgetOuputConvoBubble/WidgetOutputConvoBubble.svelte";
 	import type { ChatMessage } from "@huggingface/tasks";
+	import { widgetStates } from "../../stores.js";
 
 	export let modelId: string;
 	export let messages: ChatMessage[];
 
 	let wrapperEl: HTMLElement;
+	$: isMaximized = $widgetStates?.[modelId]?.isMaximized;
 
 	afterUpdate(() => {
 		if (wrapperEl && !isFullyScrolled(wrapperEl)) {
@@ -17,7 +19,10 @@
 	});
 </script>
 
-<div bind:this={wrapperEl} class="h-64 overflow-y-auto rounded-t-lg border border-b-0 leading-tight">
+<div
+	bind:this={wrapperEl}
+	class="overflow-y-auto rounded-t-lg border border-b-0 leading-tight {isMaximized ? 'flex-1' : 'h-64'}"
+>
 	<div class="p-3 pt-6 text-center text-sm text-gray-400 text-balance">
 		Input a message to start chatting with
 		<strong>{modelId}</strong>.

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

@@ -18,6 +18,7 @@
 		required={true}
 		type="text"
 		disabled={isLoading || isDisabled}
+		autocomplete="off"
 	/>
 	<WidgetSubmitBtn
 		classNames="rounded-l-none border-l-0 {flatTop ? 'rounded-t-none' : ''}"

packages/widgets/src/lib/components/InferenceWidget/shared/inputValidation.ts

@@ -14,7 +14,7 @@ import type {
 	WidgetExampleZeroShotTextInput,
 } from "@huggingface/tasks";
 
-function isObject(arg: unknown): arg is Record<string, unknown> {
+export function isObject(arg: unknown): arg is Record<string, unknown> {
 	return !!arg && arg?.constructor === Object;
 }
 function isStrArray(arg: unknown): arg is string[] {

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

@@ -22,9 +22,8 @@
 	import { addInferenceParameters, updateUrl } from "../../shared/helpers.js";
 	import { widgetStates, getTgiSupportedModels } from "../../stores.js";
 	import type { Writable } from "svelte/store";
-	import { isChatInput, isTextInput } from "../../shared/inputValidation.js";
+	import { isChatInput, isObject, isTextInput } from "../../shared/inputValidation.js";
 	import { isValidOutputText } from "../../shared/outputValidation.js";
-	import WidgetExamples from "../../shared/WidgetExamples/WidgetExamples.svelte";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];
@@ -49,6 +48,7 @@
 	let compiledTemplate: Template;
 	let tokenizerConfig: TokenizerConfig;
 	let inferenceClient: HfInference | undefined = undefined;
+	let abort: AbortController | undefined = undefined;
 
 	// Check config and compile template
 	onMount(() => {
@@ -146,7 +146,10 @@
 		};
 		addInferenceParameters(input, model);
 
+		isLoading = true;
+		abort = new AbortController();
 		text = "";
+		error = "";
 		try {
 			if ($tgiSupportedModels?.has(model.id)) {
 				console.debug("Starting text generation using the TGI streaming API");
@@ -155,11 +158,14 @@
 					content: "",
 				} satisfies ChatMessage;
 				const previousMessages = [...messages];
-				const tokenStream = inferenceClient.textGenerationStream({
-					...input,
-					model: model.id,
-					accessToken: apiToken,
-				});
+				const tokenStream = inferenceClient.textGenerationStream(
+					{
+						...input,
+						model: model.id,
+						accessToken: apiToken,
+					},
+					{ signal: abort?.signal }
+				);
 				for await (const newToken of tokenStream) {
 					if (newToken.token.special) continue;
 					newMessage.content = newMessage.content + newToken.token.text;
@@ -171,13 +177,20 @@
 				input.parameters.max_new_tokens = 100;
 				const output = await inferenceClient.textGeneration(
 					{ ...input, model: model.id, accessToken: apiToken },
-					{ includeCredentials, dont_load_model: !withModelLoading }
+					{ includeCredentials, dont_load_model: !withModelLoading, signal: abort?.signal }
 				);
 				messages = [...messages, { role: "assistant", content: output.generated_text }];
 				await tick();
 			}
 		} catch (e) {
-			error = `Something went wrong while requesting the Inference API: "${(e as Error).message}"`;
+			if (!!e && typeof e === "object" && "message" in e && typeof e.message === "string") {
+				error = e.message;
+			} else {
+				error = `Something went wrong with the request.`;
+			}
+		} finally {
+			isLoading = false;
+			abort = undefined;
 		}
 	}
 
@@ -218,10 +231,28 @@
 	function validateExample(sample: WidgetExample): sample is Example {
 		return (isTextInput(sample) || isChatInput(sample)) && (!sample.output || isValidOutputText(sample.output));
 	}
+
+	async function clearConversation() {
+		error = "";
+		abort?.abort();
+		messages = [];
+		text = "";
+		await tick();
+	}
 </script>
 
 <WidgetWrapper {apiUrl} {includeCredentials} {model} let:WidgetInfo let:WidgetHeader let:WidgetFooter>
-	<WidgetHeader {noTitle} {model} {isLoading} {isDisabled} {callApiOnMount} {applyWidgetExample} {validateExample} />
+	<WidgetHeader
+		{noTitle}
+		{model}
+		{isLoading}
+		{isDisabled}
+		{callApiOnMount}
+		{applyWidgetExample}
+		{validateExample}
+		on:reset={clearConversation}
+		showReset={!!messages.length}
+	/>
 	<WidgetOutputConvo modelId={model.id} {messages} />
 
 	<WidgetQuickInput

packages/widgets/src/routes/+page.svelte

@@ -31,19 +31,21 @@
 
 	const models: ModelData[] = [
 		{
-			id: "HuggingFaceH4/zephyr-7b-beta",
+			id: "mistralai/Mistral-7B-Instruct-v0.2",
 			pipeline_tag: "text-generation",
 			tags: ["conversational"],
 			inference: InferenceDisplayability.Yes,
 			config: {
+				architectures: ["MistralForCausalLM"],
+				model_type: "mistral",
 				tokenizer_config: {
-					bos_token: "<s>",
 					chat_template:
-						"{% for message in messages %}\n{% if message['role'] == 'user' %}\n{{ '<|user|>\n' + message['content'] + eos_token }}\n{% elif message['role'] == 'system' %}\n{{ '<|system|>\n' + message['content'] + eos_token }}\n{% elif message['role'] == 'assistant' %}\n{{ '<|assistant|>\n'  + message['content'] + eos_token }}\n{% endif %}\n{% if loop.last and add_generation_prompt %}\n{{ '<|assistant|>' }}\n{% endif %}\n{% endfor %}",
+						"{{ bos_token }}{% for message in messages %}{% if (message['role'] == 'user') != (loop.index0 % 2 == 0) %}{{ raise_exception('Conversation roles must alternate user/assistant/user/assistant/...') }}{% endif %}{% if message['role'] == 'user' %}{{ '[INST] ' + message['content'] + ' [/INST]' }}{% elif message['role'] == 'assistant' %}{{ message['content'] + eos_token}}{% else %}{{ raise_exception('Only user and assistant roles are supported!') }}{% endif %}{% endfor %}",
+					use_default_system_prompt: false,
+					bos_token: "<s>",
 					eos_token: "</s>",
-					pad_token: "</s>",
 					unk_token: "<unk>",
-					use_default_system_prompt: true,
+					pad_token: undefined,
 				},
 			},
 			widgetData: [