Sync widgets demo

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

@@ -0,0 +1,56 @@
+<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"
+	focusable="false"
+	role="img"
+	preserveAspectRatio="xMidYMid meet"
+	width="1em"
+	height="1em"
+	viewBox="0 0 95 88"
+>
+	<path
+		fill="#fff"
+		d="M94.25 70.08a8.28 8.28 0 0 1-.43 6.46 10.57 10.57 0 0 1-3 3.6 25.18 25.18 0 0 1-5.7 3.2 65.74 65.74 0 0 1-7.56 2.65 46.67 46.67 0 0 1-11.42 1.68c-5.42.05-10.09-1.23-13.4-4.5a40.4 40.4 0 0 1-10.14.03c-3.34 3.25-7.99 4.52-13.39 4.47a46.82 46.82 0 0 1-11.43-1.68 66.37 66.37 0 0 1-7.55-2.65c-2.28-.98-4.17-2-5.68-3.2a10.5 10.5 0 0 1-3.02-3.6c-.99-2-1.18-4.3-.42-6.46a8.54 8.54 0 0 1-.33-5.63c.25-.95.66-1.83 1.18-2.61a8.67 8.67 0 0 1 2.1-8.47 8.23 8.23 0 0 1 2.82-2.07 41.75 41.75 0 1 1 81.3-.12 8.27 8.27 0 0 1 3.11 2.19 8.7 8.7 0 0 1 2.1 8.47c.52.78.93 1.66 1.18 2.61a8.61 8.61 0 0 1-.32 5.63Z"
+	/>
+	<path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" />
+	<path
+		fill="#FF9D0B"
+		d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"
+	/>
+	<path
+		fill="#3A3B45"
+		d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"
+	/>
+	<path
+		fill="#FF323D"
+		d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+	/>
+	<path
+		fill="#3A3B45"
+		fill-rule="evenodd"
+		d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z"
+		clip-rule="evenodd"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"
+	/>
+</svg>

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

@@ -28,6 +28,7 @@
 	import ZeroShotImageClassificationWidget from "./widgets/ZeroShotImageClassificationWidget/ZeroShotImageClassificationWidget.svelte";
 	import type { WidgetType } from "@huggingface/tasks";
 	import WidgetInfo from "./shared/WidgetInfo/WidgetInfo.svelte";
+	import { isLoggedIn as isLoggedInStore } from "./stores.js";
 
 	export let apiToken: WidgetProps["apiToken"] = undefined;
 	export let callApiOnMount = false;
@@ -85,6 +86,8 @@
 			  ? WIDGET_COMPONENTS[model.pipeline_tag as keyof typeof WIDGET_COMPONENTS]
 			  : undefined;
 
+	$isLoggedInStore = isLoggedIn;
+
 	// prettier-ignore
 	$: widgetProps = ({
 		apiToken,

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
 	import IconSpin from "../../../Icons/IconSpin.svelte";
 	import { getBlobFromUrl } from "../../shared/helpers.js";
+	import { isLoggedIn } from "../../stores.js";
 
 	export let accept = "image/*";
 	export let classNames = "";
@@ -13,6 +15,7 @@
 
 	let fileInput: HTMLInputElement;
 	let isDragging = false;
+	let popOverOpen = false;
 
 	function onChange() {
 		const file = fileInput.files?.[0];
@@ -23,6 +26,12 @@
 
 	async function onDrop(e: DragEvent) {
 		isDragging = false;
+
+		if (!$isLoggedIn) {
+			popOverOpen = true;
+			return;
+		}
+
 		const itemList = e.dataTransfer?.items;
 		if (!itemList || isLoading) {
 			return;
@@ -54,36 +63,43 @@
 	style="display: none;"
 	type="file"
 />
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	class="relative cursor-pointer rounded border-2 border-dashed px-3 py-7 text-center
+
+<LogInPopover bind:open={popOverOpen}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		class="relative cursor-pointer rounded border-2 border-dashed px-3 py-7 text-center
 		{isDisabled ? 'pointer-events-none' : ''}
 		{isDragging ? 'border-green-300 bg-green-50 text-green-500' : 'text-gray-500'}
 		{classNames}"
-	on:click={() => {
-		fileInput.click();
-	}}
-	on:dragenter={() => {
-		isDragging = true;
-	}}
-	on:dragleave={() => {
-		isDragging = false;
-	}}
-	on:dragover|preventDefault
-	on:drop|preventDefault={onDrop}
->
-	{#if !imgSrc && !isDisabled}
-		<span class="pointer-events-none text-sm">{label}</span>
-	{:else}
-		<div class={isDragging ? "pointer-events-none" : ""}>
-			<slot />
-		</div>
-	{/if}
-	{#if isLoading}
-		<div
-			class="absolute top-1/2 left-1/2 flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full border border-gray-100 bg-white shadow"
-		>
-			<IconSpin classNames="text-purple-500 animate-spin h-6 w-6" />
-		</div>
-	{/if}
-</div>
+		on:click={() => {
+			if (!$isLoggedIn) {
+				popOverOpen = true;
+				return;
+			}
+			fileInput.click();
+		}}
+		on:dragenter={() => {
+			isDragging = true;
+		}}
+		on:dragleave={() => {
+			isDragging = false;
+		}}
+		on:dragover|preventDefault
+		on:drop|preventDefault={onDrop}
+	>
+		{#if !imgSrc && !isDisabled}
+			<span class="pointer-events-none text-sm">{label}</span>
+		{:else}
+			<div class={isDragging ? "pointer-events-none" : ""}>
+				<slot />
+			</div>
+		{/if}
+		{#if isLoading}
+			<div
+				class="absolute top-1/2 left-1/2 flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full border border-gray-100 bg-white shadow"
+			>
+				<IconSpin classNames="text-purple-500 animate-spin h-6 w-6" />
+			</div>
+		{/if}
+	</div>
+</LogInPopover>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import IconSpin from "../../../Icons/IconSpin.svelte";
 	import IconFile from "../../../Icons/IconFile.svelte";
+	import { isLoggedIn } from "../../stores.js";
+	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
 
 	export let accept: string | undefined;
 	export let classNames = "";
@@ -11,8 +13,14 @@
 
 	let fileInput: HTMLInputElement;
 	let isDragging = false;
+	let popOverOpen = false;
 
 	function onChange() {
+		if (!$isLoggedIn) {
+			popOverOpen = true;
+			return;
+		}
+
 		const file = fileInput.files?.[0];
 		if (file) {
 			onSelectFile(file);
@@ -21,36 +29,45 @@
 </script>
 
 {#if !isDisabled}
-	<div
-		class={classNames}
-		on:dragenter={() => {
-			isDragging = true;
-		}}
-		on:dragover|preventDefault
-		on:dragleave={() => {
-			isDragging = false;
-		}}
-		on:drop|preventDefault={(e) => {
-			isDragging = false;
-			fileInput.files = e.dataTransfer?.files ?? null;
-			onChange();
-		}}
-	>
-		<label class="btn-widget {isDragging ? 'ring' : ''} {isLoading ? 'text-gray-600' : ''}">
-			{#if isLoading}
-				<IconSpin classNames="-ml-1 mr-1.5 text-gray-600 animate-spin" />
-			{:else}
-				<IconFile classNames="-ml-1 mr-1.5" />
-			{/if}
-			<input
-				{accept}
-				bind:this={fileInput}
-				on:change={onChange}
-				disabled={isLoading || isDisabled}
-				style="display: none;"
-				type="file"
-			/>
-			{label}
-		</label>
-	</div>
+	<LogInPopover bind:open={popOverOpen}>
+		<button
+			class={classNames}
+			on:click={(e) => {
+				if (!$isLoggedIn) {
+					popOverOpen = true;
+					e.preventDefault();
+					return;
+				}
+			}}
+			on:dragenter={() => {
+				isDragging = true;
+			}}
+			on:dragover|preventDefault
+			on:dragleave={() => {
+				isDragging = false;
+			}}
+			on:drop|preventDefault={(e) => {
+				isDragging = false;
+				fileInput.files = e.dataTransfer?.files ?? null;
+				onChange();
+			}}
+		>
+			<label class="btn-widget {isDragging ? 'ring' : ''} {isLoading ? 'text-gray-600' : ''}">
+				{#if isLoading}
+					<IconSpin classNames="-ml-1 mr-1.5 text-gray-600 animate-spin" />
+				{:else}
+					<IconFile classNames="-ml-1 mr-1.5" />
+				{/if}
+				<input
+					{accept}
+					bind:this={fileInput}
+					on:change={onChange}
+					disabled={isLoading || isDisabled}
+					style="display: none;"
+					type="file"
+				/>
+				{label}
+			</label>
+		</button>
+	</LogInPopover>
 {/if}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { WidgetProps } from "../types.js";
-	import { identity } from "svelte/internal";
-	import { widgetStates, updateWidgetState } from "../../stores.js";
+	import { widgetStates, updateWidgetState, isLoggedIn } from "../../stores.js";
 	import IconCode from "../../..//Icons/IconCode.svelte";
 	import IconMaximize from "../../..//Icons/IconMaximize.svelte";
+	import LogInPopover from "../../../../components/LogInPopover/LogInPopover.svelte";
 
 	export let model: WidgetProps["model"];
 	export let outputJson: string;
@@ -12,6 +12,7 @@
 	$: isMaximized = $widgetStates?.[model.id]?.isMaximized;
 
 	let isOutputJsonVisible = false;
+	let popOverOpen = false;
 </script>
 
 <div class="mt-auto flex items-center pt-4 text-xs text-gray-500">
@@ -28,18 +29,26 @@
 			JSON Output
 		</button>
 	{/if}
-	<button
-		class="ml-auto flex items-center"
-		type="button"
-		on:click|preventDefault={() => updateWidgetState(model.id, "isMaximized", !isMaximized)}
-	>
-		<IconMaximize classNames="mr-1" />
-		{#if !isMaximized}
-			Maximize
-		{:else}
-			Minimize
-		{/if}
-	</button>
+	<LogInPopover bind:open={popOverOpen} classNames="ml-auto">
+		<button
+			class="flex items-center"
+			type="button"
+			on:click|preventDefault={() => {
+				if (!$isLoggedIn) {
+					popOverOpen = true;
+					return;
+				}
+				updateWidgetState(model.id, "isMaximized", !isMaximized);
+			}}
+		>
+			<IconMaximize classNames="mr-1" />
+			{#if !isMaximized}
+				Maximize
+			{:else}
+				Minimize
+			{/if}
+		</button>
+	</LogInPopover>
 </div>
 {#if outputJson && isOutputJsonVisible}
 	<pre

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

@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { createEventDispatcher } from "svelte";
 	import { onCmdEnter } from "../../../../utils/ViewUtils.js";
 	import WidgetSubmitBtn from "../WidgetSubmitBtn/WidgetSubmitBtn.svelte";
+	import { isLoggedIn } from "../../stores.js";
+	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
 
 	export let flatTop = false;
 	export let isLoading: boolean;
@@ -9,25 +12,39 @@
 	export let placeholder = "Your sentence here...";
 	export let submitButtonLabel: string | undefined = undefined;
 	export let value: string = "";
+
+	let popOverOpen = false;
+
+	const dispatch = createEventDispatcher<{ cmdEnter: void }>();
 </script>
 
-<div class="flex h-10">
-	<input
-		bind:value
-		class="form-input-alt min-w-0 flex-1 rounded-r-none {flatTop ? 'rounded-t-none' : ''}"
-		placeholder={isDisabled ? "" : placeholder}
-		required={true}
-		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' : ''}"
-		{isLoading}
-		{isDisabled}
-		label={submitButtonLabel}
-		onClick={onClickSubmitBtn}
-	/>
-</div>
+<LogInPopover bind:open={popOverOpen}>
+	<div class="flex h-10">
+		<input
+			bind:value
+			class="form-input-alt min-w-0 flex-1 rounded-r-none {flatTop ? 'rounded-t-none' : ''}"
+			placeholder={isDisabled ? "" : placeholder}
+			required={true}
+			type="text"
+			disabled={isLoading || isDisabled}
+			autocomplete="off"
+			use:onCmdEnter={{ disabled: isLoading || isDisabled }}
+			on:cmdEnter={() => {
+				if (!$isLoggedIn) {
+					popOverOpen = true;
+					return;
+				}
+				dispatch("cmdEnter");
+			}}
+		/>
+		<WidgetSubmitBtn
+			classNames="rounded-l-none border-l-0 {flatTop ? 'rounded-t-none' : ''}"
+			{isLoading}
+			{isDisabled}
+			label={submitButtonLabel}
+			onClick={onClickSubmitBtn}
+			withParentLoginPopover={true}
+			on:logInPopover={() => (popOverOpen = true)}
+		/>
+	</div>
+</LogInPopover>

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

@@ -1,24 +1,48 @@
 <script lang="ts">
+	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
 	import IconSpin from "../../..//Icons/IconSpin.svelte";
+	import { isLoggedIn } from "../../stores.js";
+	import { createEventDispatcher } from "svelte";
 
 	export let classNames = "";
 	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 }>();
+
+	function _onClick() {
+		if (!$isLoggedIn) {
+			if (withParentLoginPopover) {
+				// tell parent element to show log in pop over
+				dispatch("logInPopover");
+			} else {
+				popOverOpen = true;
+			}
+			return;
+		}
+
+		onClick();
+	}
 </script>
 
 {#if !isDisabled}
-	<button
-		class="btn-widget h-10 w-24 px-5 {classNames}"
-		disabled={isDisabled || isLoading}
-		on:click|preventDefault={onClick}
-		type="submit"
-	>
-		{#if isLoading}
-			<IconSpin classNames="text-gray-600 animate-spin" />
-		{:else}
-			{label}
-		{/if}
-	</button>
+	<LogInPopover bind:open={popOverOpen}>
+		<button
+			class="btn-widget h-10 w-24 px-5 {classNames}"
+			disabled={isDisabled || isLoading}
+			on:click|preventDefault={_onClick}
+			type="submit"
+		>
+			{#if isLoading}
+				<IconSpin classNames="text-gray-600 animate-spin" />
+			{:else}
+				{label}
+			{/if}
+		</button>
+	</LogInPopover>
 {/if}

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

@@ -1,24 +1,39 @@
 <script lang="ts">
+	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
+	import { createEventDispatcher } from "svelte";
 	import { onCmdEnter } from "../../../../utils/ViewUtils.js";
 	import WidgetLabel from "../WidgetLabel/WidgetLabel.svelte";
+	import { isLoggedIn } from "../../stores.js";
 
 	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;
+
+	let popOverOpen = false;
+
+	const dispatch = createEventDispatcher<{ cmdEnter: void }>();
 </script>
 
-<WidgetLabel {label}>
-	<svelte:fragment slot="after">
-		<input
-			bind:value
-			class="{label ? 'mt-1.5' : ''} form-input-alt block w-full"
-			placeholder={isDisabled ? "" : placeholder}
-			disabled={isDisabled}
-			type="text"
-			use:onCmdEnter={{ disabled: isLoading || isDisabled }}
-			on:cmdEnter
-		/>
-	</svelte:fragment>
-</WidgetLabel>
+<LogInPopover bind:open={popOverOpen}>
+	<WidgetLabel {label}>
+		<svelte:fragment slot="after">
+			<input
+				bind:value
+				class="{label ? 'mt-1.5' : ''} form-input-alt block w-full"
+				placeholder={isDisabled ? "" : placeholder}
+				disabled={isDisabled}
+				type="text"
+				use:onCmdEnter={{ disabled: isLoading || isDisabled }}
+				on:cmdEnter={() => {
+					if (!$isLoggedIn) {
+						popOverOpen = true;
+						return;
+					}
+					dispatch("cmdEnter");
+				}}
+			/>
+		</svelte:fragment>
+	</WidgetLabel>
+</LogInPopover>

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

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { tick } from "svelte";
+	import { createEventDispatcher, tick } from "svelte";
 
 	import { delay, onCmdEnter } from "../../../../utils/ViewUtils.js";
 	import WidgetLabel from "../WidgetLabel/WidgetLabel.svelte";
+	import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
+	import { isLoggedIn } from "../../stores.js";
 
 	export let label: string = "";
 	export let placeholder: string = "Your sentence here...";
@@ -13,10 +15,13 @@
 
 	let containerSpanEl: HTMLSpanElement;
 	let isOnFocus = false;
+	let popOverOpen = 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";
 
+	const dispatch = createEventDispatcher<{ cmdEnter: void }>();
+
 	export async function renderTextOutput(outputTxt: string, typingEffect = true): Promise<void> {
 		const spanEl = document.createElement("span");
 		spanEl.contentEditable = isDisabled ? "false" : "true";
@@ -90,29 +95,37 @@
 	}
 </script>
 
-<WidgetLabel {label}>
-	<svelte:fragment slot="after">
-		<!-- `whitespace-pre-wrap inline-block` are needed to get correct newlines from `el.textContent` on Chrome -->
-		<span
-			class="{label ? 'mt-1.5' : ''} block w-full resize-y overflow-auto py-2 px-3 {size === 'small'
-				? '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"
-			style="--placeholder: '{isDisabled ? '' : placeholder}'"
-			spellcheck="false"
-			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}
-			on:focus={onFocus}
-			on:blur={() => (isOnFocus = false)}
-		/>
-	</svelte:fragment>
-</WidgetLabel>
+<LogInPopover bind:open={popOverOpen}>
+	<WidgetLabel {label}>
+		<svelte:fragment slot="after">
+			<!-- `whitespace-pre-wrap inline-block` are needed to get correct newlines from `el.textContent` on Chrome -->
+			<span
+				class="{label ? 'mt-1.5' : ''} block w-full resize-y overflow-auto py-2 px-3 {size === 'small'
+					? '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"
+				style="--placeholder: '{isDisabled ? '' : placeholder}'"
+				spellcheck="false"
+				dir="auto"
+				contenteditable
+				class:pointer-events-none={isLoading || isDisabled}
+				use:onCmdEnter={{ disabled: isLoading || isDisabled }}
+				on:cmdEnter={() => {
+					if (!$isLoggedIn) {
+						popOverOpen = true;
+						return;
+					}
+					dispatch("cmdEnter");
+				}}
+				bind:this={containerSpanEl}
+				on:paste|preventDefault={handlePaste}
+				on:input={updateInnerTextValue}
+				on:focus={onFocus}
+				on:blur={() => (isOnFocus = false)}
+			/>
+		</svelte:fragment>
+	</WidgetLabel>
+</LogInPopover>
 
 <style>
 	span[contenteditable]:empty::before {

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

@@ -2,6 +2,8 @@ import type { ModelData, WidgetExampleAttribute } from "@huggingface/tasks";
 import { parseJSON } from "../../../utils/ViewUtils.js";
 import { ComputeType, type ModelLoadInfo, type TableData } from "./types.js";
 import { LoadState } from "./types.js";
+import { isLoggedIn } from "../stores.js";
+import { get } from "svelte/store";
 
 const KEYS_TEXT: WidgetExampleAttribute[] = ["text", "context", "candidate_labels"];
 const KEYS_TABLE: WidgetExampleAttribute[] = ["table", "structured_data"];
@@ -102,10 +104,10 @@ export async function callInferenceApi<T>(
 	if (waitForModel) {
 		headers.set("X-Wait-For-Model", "true");
 	}
-	if (useCache === false) {
+	if (useCache === false && get(isLoggedIn)) {
 		headers.set("X-Use-Cache", "false");
 	}
-	if (isOnLoadCall) {
+	if (isOnLoadCall || !get(isLoggedIn)) {
 		headers.set("X-Load-Model", "0");
 	}
 

packages/widgets/src/lib/components/InferenceWidget/stores.ts

@@ -6,6 +6,8 @@ export const modelLoadStates = writable<Record<ModelData["id"], ModelLoadInfo>>(
 
 export const widgetNoInference = writable<Record<ModelData["id"], boolean>>({});
 
+export const isLoggedIn = writable<boolean>(false);
+
 export const widgetStates = writable<Record<ModelData["id"], WidgetState>>({});
 
 const tgiSupportedModels = writable<Set<string> | undefined>(undefined);

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

@@ -21,7 +21,7 @@
 	import WidgetQuickInput from "../../shared/WidgetQuickInput/WidgetQuickInput.svelte";
 	import WidgetWrapper from "../../shared/WidgetWrapper/WidgetWrapper.svelte";
 	import { addInferenceParameters, updateUrl } from "../../shared/helpers.js";
-	import { widgetStates, getTgiSupportedModels } from "../../stores.js";
+	import { widgetStates, getTgiSupportedModels, isLoggedIn } from "../../stores.js";
 	import type { Writable } from "svelte/store";
 	import { isChatInput, isTextInput } from "../../shared/inputValidation.js";
 	import { isValidOutputText } from "../../shared/outputValidation.js";
@@ -152,10 +152,10 @@
 		error = "";
 		try {
 			const opts = {
-				dont_load_model: isOnLoadCall,
+				dont_load_model: isOnLoadCall || !$isLoggedIn,
 				includeCredentials,
 				signal: abort?.signal,
-				use_cache: useCache,
+				use_cache: useCache || !$isLoggedIn,
 				wait_for_model: withModelLoading,
 			} satisfies Options;
 

packages/widgets/src/lib/components/LogInPopover/LogInPopover.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Popover from "../Popover/Popover.svelte";
+	import IconHuggingFace from "../Icons/IconHuggingFace.svelte";
+	import { isLoggedIn } from "../InferenceWidget/stores.js";
+
+	export let open = false;
+	export let classNames = "";
+
+	let anchorElement: HTMLElement;
+</script>
+
+<div bind:this={anchorElement} class={classNames}>
+	<slot />
+</div>
+
+{#if open && !$isLoggedIn}
+	<Popover classNames="w-80" {anchorElement} on:close={() => (open = false)}>
+		<div class="flex items-center gap-x-3 text-sm leading-tight">
+			<IconHuggingFace classNames="text-5xl" />
+			Please login with your Hugging Face account to run the widgets.
+		</div>
+		<div class="flex text-sm items-center gap-x-2.5 mt-2">
+			<a
+				href="https://huggingface.co/login{typeof window !== 'undefined'
+					? `?next=${encodeURIComponent(window.location.href)}`
+					: ''}"
+				class="bg-black text-white px-3 py-1 rounded-full dark:!bg-gray-100 dark:!text-black">Log In</a
+			>
+			<span class="text-gray-400">or</span>
+			<a
+				href="https://huggingface.co/join{typeof window !== 'undefined'
+					? `?next=${encodeURIComponent(window.location.href)}`
+					: ''}"
+				class="py-1 rounded-full underline decoration-gray-400 underline-offset-2">Create a free account</a
+			>
+		</div>
+	</Popover>
+{/if}

packages/widgets/src/lib/components/Popover/Popover.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { onMount, tick, createEventDispatcher } from "svelte";
+	import { fade } from "svelte/transition";
+	import { debounce, portalToBody } from "../../utils/ViewUtils.js";
+
+	export let classNames = "";
+	export let anchorElement: HTMLElement;
+	export let alignment: "start" | "center" | "end" | "auto" = "auto";
+	export let placement: "top" | "bottom" | "auto" | "prefer-top" | "prefer-bottom" = "auto";
+	export let waitForContent = false;
+	export let size: "sm" | "md" = "md";
+	export let invertedColors = false;
+	export let touchOnly = false;
+
+	let popoverElement: HTMLDivElement;
+
+	/// sizes of the arrow and its padding, needed to position the popover position correctly
+	const ARROW_PADDING = 24;
+	const ARROW_SIZE = 10;
+
+	/// to prevent the toast from being too close to the edge of the screen
+	const HIT_ZONE_MARGIN = 80;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	let computedAlignment = alignment === "auto" ? "center" : alignment;
+	let computedPlacement = placement === "auto" ? "bottom" : placement;
+
+	let left: number;
+	let top: number;
+	let width: number;
+	let height: number;
+
+	let popoverShift: number;
+	let isTouchOnly = false;
+	let isActive = true;
+
+	function updatePlacement(anchorBbox: DOMRect, pageHeight: number) {
+		if (pageHeight > 0) {
+			if (placement === "auto") {
+				/// check if the anchor is closer to the top or bottom of the page
+				computedPlacement = anchorBbox.top > pageHeight / 2 ? "top" : "bottom";
+			} else if (placement === "prefer-top") {
+				/// check if the toast has enough space to be placed above the anchor
+				const popoverHeight = popoverElement.getBoundingClientRect().height;
+				computedPlacement = anchorBbox.top > popoverHeight + HIT_ZONE_MARGIN ? "top" : "bottom";
+			} else if (placement === "prefer-bottom") {
+				/// check if the toast has enough space to be placed below the anchor
+				const popoverHeight = popoverElement.getBoundingClientRect().height;
+				computedPlacement =
+					anchorBbox.top + anchorBbox.height + popoverHeight + HIT_ZONE_MARGIN > pageHeight ? "top" : "bottom";
+			}
+		}
+	}
+
+	function updateAlignment(anchorBbox: DOMRect, pageWidth: number) {
+		if (alignment === "auto" && pageWidth > 0) {
+			const popoverWidth = popoverElement.getBoundingClientRect().width;
+			if (anchorBbox.left + popoverWidth > pageWidth - HIT_ZONE_MARGIN) {
+				computedAlignment = "end";
+			} else {
+				computedAlignment = "start";
+			}
+		}
+	}
+
+	async function updatePosition() {
+		if (anchorElement && !waitForContent) {
+			await tick();
+
+			const bbox = anchorElement.getBoundingClientRect();
+			updateAlignment(bbox, window.innerWidth);
+			updatePlacement(bbox, window.innerHeight);
+
+			left = bbox.left + window.scrollX;
+			top = bbox.top + window.scrollY;
+			width = bbox.width;
+			height = bbox.height;
+
+			/// shift the popover so the arrow is exaclty at the middle of the anchor
+			popoverShift = width / 2 - ARROW_SIZE / 2 - ARROW_PADDING;
+		}
+	}
+
+	const debouncedShow = debounce(() => (isActive = true), 250);
+
+	function hide() {
+		if (!popoverElement?.matches(":hover")) {
+			isActive = false;
+		}
+	}
+	const debouncedHide = debounce(hide, 250);
+
+	onMount(() => {
+		isTouchOnly = touchOnly && window.matchMedia("(any-hover: none)").matches;
+
+		if (!isTouchOnly) {
+			updatePosition();
+			if (anchorElement) {
+				anchorElement.addEventListener("mouseover", debouncedShow);
+				anchorElement.addEventListener("mouseleave", debouncedHide);
+				return () => {
+					anchorElement.removeEventListener("mouseover", debouncedShow);
+					anchorElement.removeEventListener("mouseleave", debouncedHide);
+				};
+			}
+		}
+	});
+</script>
+
+<svelte:window on:resize={() => dispatch("close")} on:scroll={() => dispatch("close")} />
+
+<div class={isTouchOnly ? "hidden sm:contents" : "contents"} use:portalToBody>
+	<div
+		class="pointer-events-none absolute bg-transparent hidden"
+		class:hidden={!isActive}
+		style:top="{top}px"
+		style:left="{left}px"
+		style:width="{width}px"
+		style:height="{height}px"
+	>
+		<div
+			bind:this={popoverElement}
+			in:fade={{ duration: 100 }}
+			on:mouseleave={debouncedHide}
+			class="pointer-events-auto absolute z-10 transform
+				{computedPlacement === 'top' ? 'bottom-full -translate-y-3' : 'top-full translate-y-2.5'}
+				{computedAlignment === 'start' ? 'left-0' : computedAlignment === 'end' ? 'right-0' : 'left-1/2 -translate-x-1/2'}
+				{classNames}"
+		>
+			<div
+				class="absolute z-0 rotate-45 transform
+					{size === 'sm' ? 'h-2 w-2' : 'h-2.5 w-2.5 rounded-sm'}
+					{invertedColors ? 'bg-black dark:bg-gray-800' : 'border bg-white shadow  dark:bg-gray-800'}
+					{computedPlacement === 'top' ? 'top-full -translate-y-1' : 'bottom-full translate-y-1'}
+					{computedAlignment === 'start' ? 'left-6' : computedAlignment === 'center' ? 'left-1/2' : 'right-6'}"
+			/>
+			<div
+				class="shadow-alternate-xl relative z-5 border font-normal leading-tight transition-opacity
+					{size === 'sm' ? 'rounded px-2 py-1.5' : 'rounded-xl p-4'}
+					{invertedColors ? 'border-black bg-black text-white dark:bg-gray-800' : 'bg-white text-black dark:bg-gray-925'}
+				"
+			>
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -156,6 +156,42 @@ export function onCmdEnter(node: HTMLElement, opts: { disabled: boolean }): Acti
 	};
 }
 
+/**
+ * A debounce function that works in both browser and Nodejs.
+ */
+export function debounce<T extends unknown[]>(callback: (...rest: T) => unknown, limit: number): (...rest: T) => void {
+	let timer: ReturnType<typeof setTimeout>;
+
+	return function (...rest) {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			callback(...rest);
+		}, limit);
+	};
+}
+
+/**
+ * Teleports the children of a node to another node....
+ */
+export function portal(node: HTMLElement, targetNode: HTMLElement): { destroy: () => void } {
+	const portalChildren = [...node.children];
+	targetNode.append(...portalChildren);
+	return {
+		destroy() {
+			for (const portalChild of portalChildren) {
+				portalChild.remove();
+			}
+		},
+	};
+}
+
+/**
+ * Teleports the children of a node under the body element
+ */
+export function portalToBody(node: HTMLElement): { destroy: () => void } {
+	return portal(node, document.body);
+}
+
 /**
 * For Tailwind:
 bg-blue-100 border-blue-100 dark:bg-blue-800 dark:border-blue-800

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

@@ -6,6 +6,7 @@
 	import ModeSwitcher from "$lib/components/DemoThemeSwitcher/DemoThemeSwitcher.svelte";
 	import { onMount } from "svelte";
 	import { browser } from "$app/environment";
+	import { isLoggedIn } from "$lib/components/InferenceWidget/stores.js";
 
 	export let data;
 	let apiToken = data.session?.access_token || "";
@@ -627,6 +628,12 @@
 			<input class="form-input" type="text" bind:value={apiToken} placeholder="hf_..." on:change={storeHFToken} />
 		</label>
 	{/if}
+	<label>
+		<div class="text-xl font-semibold">
+			isLoggedIn <span class="text-sm">(simulate isLoggedIn store by toggling)</span>
+		</div>
+		<input type="checkbox" bind:checked={$isLoggedIn} />
+	</label>
 
 	<div>
 		<h1 class="mb-8 text-4xl font-semibold">Showcase of all types of inference widgets running</h1>