[Widgets] Handle display logic (#1019)

* [Model Widget] Handle display logic * format * when disabled, hide compute btn, no placehlders * correct placement of InferenceDisplayability labels * "Inference Examples" label * hide WidgetTimer when disabled on textGen widget * rm unused vars * fix a todo * rm unused var * filter examples with outputs when widget is disabled * format * rn * rn * use `<slot let:xyz>` syntax
huggingface · Nov 1, 2023 · 6cc444e · 6cc444e
1 parent 0539694
commit 6cc444e
Show file tree

Hide file tree

Showing 39 changed files with 541 additions and 175 deletions.
diff --git a/...rc/lib/components/InferenceWidget/shared/WidgetAddSentenceBtn/WidgetAddSentenceBtn.svelte b/...rc/lib/components/InferenceWidget/shared/WidgetAddSentenceBtn/WidgetAddSentenceBtn.svelte
@@ -4,6 +4,9 @@
 	export let onClick: (e: MouseEvent) => void;
 </script>
 
-<button class="btn-widget h-10 w-full px-5" disabled={isDisabled} on:click|preventDefault={onClick} type="submit">
-	{label}
-</button>
+{#if !isDisabled}
+	<!-- content here -->
+	<button class="btn-widget h-10 w-full px-5" disabled={isDisabled} on:click|preventDefault={onClick} type="submit">
+		{label}
+	</button>
+{/if}
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetDropzone/WidgetDropzone.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetDropzone/WidgetDropzone.svelte
@@ -5,6 +5,7 @@
 	export let accept = "image/*";
 	export let classNames = "";
 	export let isLoading = false;
+	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;
@@ -45,11 +46,19 @@
 	}
 </script>
 
-<input {accept} bind:this={fileInput} on:change={onChange} disabled={isLoading} style="display: none;" type="file" />
+<input
+	{accept}
+	bind:this={fileInput}
+	on:change={onChange}
+	disabled={isLoading || isDisabled}
+	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
-		{isDragging ? 'border-green-300 bg-green-50 text-green-500' : 'text-gray-500'} 
+		{isDisabled ? 'pointer-events-none' : ''}
+		{isDragging ? 'border-green-300 bg-green-50 text-green-500' : 'text-gray-500'}
 		{classNames}"
 	on:click={() => {
 		fileInput.click();
@@ -63,7 +72,7 @@
 	on:dragover|preventDefault
 	on:drop|preventDefault={onDrop}
 >
-	{#if !imgSrc}
+	{#if !imgSrc && !isDisabled}
 		<span class="pointer-events-none text-sm">{label}</span>
 	{:else}
 		<div class={isDragging ? "pointer-events-none" : ""}>

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetFileInput/WidgetFileInput.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetFileInput/WidgetFileInput.svelte
@@ -5,6 +5,7 @@
 	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;
 
@@ -19,35 +20,37 @@
 	}
 </script>
 
-<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}
-			style="display: none;"
-			type="file"
-		/>
-		{label}
-	</label>
-</div>
+{#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>
+{/if}
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetFooter/WidgetFooter.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetFooter/WidgetFooter.svelte
@@ -4,21 +4,24 @@
 
 	export let onClickMaximizeBtn: () => void;
 	export let outputJson: string;
+	export let isDisabled = false;
 
 	let isOutputJsonVisible = false;
 </script>
 
 <div class="mt-auto flex items-center pt-4 text-xs text-gray-500">
-	<button
-		class="flex items-center {outputJson ? '' : 'cursor-not-allowed text-gray-300'}"
-		disabled={!outputJson}
-		on:click={() => {
-			isOutputJsonVisible = !isOutputJsonVisible;
-		}}
-	>
-		<IconCode classNames="mr-1" />
-		JSON Output
-	</button>
+	{#if !isDisabled}
+		<button
+			class="flex items-center {outputJson ? '' : 'cursor-not-allowed text-gray-300'}"
+			disabled={!outputJson}
+			on:click={() => {
+				isOutputJsonVisible = !isOutputJsonVisible;
+			}}
+		>
+			<IconCode classNames="mr-1" />
+			JSON Output
+		</button>
+	{/if}
 	<button class="ml-auto flex items-center" on:click|preventDefault={onClickMaximizeBtn}>
 		<IconMaximize classNames="mr-1" />
 		Maximize

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetHeader/WidgetHeader.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetHeader/WidgetHeader.svelte
@@ -10,6 +10,7 @@
 	export let noTitle = false;
 	export let title: string | null = null;
 	export let pipeline: PipelineType | undefined;
+	export let isDisabled = false;
 
 	$: task = pipeline ? getPipelineTask(pipeline) : undefined;
 </script>
@@ -22,10 +23,14 @@
 			</div>
 		{:else}
 			<div class="flex items-center text-lg">
-				<IconLightning classNames="-ml-1 mr-1 text-yellow-500" />
-				Hosted inference API
+				{#if !isDisabled}
+					<IconLightning classNames="-ml-1 mr-1 text-yellow-500" />
+					Inference API
+				{:else}
+					Inference Examples
+				{/if}
 			</div>
-			<a target="_blank" href="https://huggingface.co/docs/api-inference">
+			<a target="_blank" href="https://huggingface.co/docs/hub/models-widgets#example-outputs">
 				<IconInfo classNames="ml-1.5 text-sm text-gray-400 hover:text-black" />
 			</a>
 		{/if}

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetInfo/WidgetInfo.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetInfo/WidgetInfo.svelte
@@ -2,11 +2,14 @@
 	import type { WidgetProps, ModelLoadInfo, LoadState } from "../types";
 
 	import IconAzureML from "../../../Icons/IconAzureML.svelte";
+	import { InferenceDisplayability } from "../../../../interfaces/InferenceDisplayability";
+	import IconInfo from "../../../Icons/IconInfo.svelte";
 
 	export let model: WidgetProps["model"];
 	export let computeTime: string;
 	export let error: string;
 	export let modelLoadInfo: ModelLoadInfo | undefined = undefined;
+	export let modelTooBig = false;
 
 	const state = {
 		Loadable: "This model can be loaded on the Inference API on-demand.",
@@ -66,8 +69,46 @@
 			</div>
 		{:else if computeTime}
 			Computation time on {getComputeTypeMsg()}: {computeTime}
-		{:else}
+		{:else if (model.inference === InferenceDisplayability.Yes || model.pipeline_tag === "reinforcement-learning") && !modelTooBig}
 			{@html getStatusReport(modelLoadInfo, state)}
+		{:else if model.inference === InferenceDisplayability.ExplicitOptOut}
+			<span class="text-sm text-gray-500">Inference API has been turned off for this model.</span>
+		{:else if model.inference === InferenceDisplayability.CustomCode}
+			<span class="text-sm text-gray-500">Inference API does not yet support model repos that contain custom code.</span
+			>
+		{:else if model.inference === InferenceDisplayability.LibraryNotDetected}
+			<span class="text-sm text-gray-500">
+				Unable to determine this model's library. Check the
+				<a class="color-inherit" href="/docs/hub/model-cards#specifying-a-library">
+					docs <IconInfo classNames="inline" />
+				</a>.
+			</span>
+		{:else if model.inference === InferenceDisplayability.PipelineNotDetected}
+			<span class="text-sm text-gray-500">
+				Unable to determine this model’s pipeline type. Check the
+				<a class="color-inherit" href="/docs/hub/models-widgets#enabling-a-widget">
+					docs <IconInfo classNames="inline" />
+				</a>.
+			</span>
+		{:else if model.inference === InferenceDisplayability.PipelineLibraryPairNotSupported}
+			<span class="text-sm text-gray-500">
+				Inference API does not yet support {model.library_name} models for this pipeline type.
+			</span>
+		{:else if modelTooBig}
+			<span class="text-sm text-gray-500">
+				Model is too large to load onto the free Inference API. To try the model, launch it on <a
+					class="underline"
+					href="https://ui.endpoints.huggingface.co/new?repository={encodeURIComponent(model.id)}"
+					>Inference Endpoints</a
+				>
+				instead.
+			</span>
+		{:else}
+			<!-- added as a failsafe but this case cannot currently happen -->
+			<span class="text-sm text-gray-500">
+				Inference API is disabled for an unknown reason. Please open a
+				<a class="color-inherit underline" href="/{model.id}/discussions/new">Discussion in the Community tab</a>.
+			</span>
 		{/if}
 	</div>
 	{#if error}

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetQuickInput/WidgetQuickInput.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetQuickInput/WidgetQuickInput.svelte
@@ -3,6 +3,7 @@
 
 	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;
@@ -13,14 +14,15 @@
 	<input
 		bind:value
 		class="form-input-alt min-w-0 flex-1 rounded-r-none {flatTop ? 'rounded-t-none' : ''}"
-		{placeholder}
+		placeholder={isDisabled ? "" : placeholder}
 		required={true}
 		type="text"
-		disabled={isLoading}
+		disabled={isLoading || isDisabled}
 	/>
 	<WidgetSubmitBtn
 		classNames="rounded-l-none border-l-0 {flatTop ? 'rounded-t-none' : ''}"
 		{isLoading}
+		{isDisabled}
 		label={submitButtonLabel}
 		onClick={onClickSubmitBtn}
 	/>

diff --git a/...ib/components/InferenceWidget/shared/WidgetShortcutRunLabel/WidgetShortcutRunLabel.svelte b/...ib/components/InferenceWidget/shared/WidgetShortcutRunLabel/WidgetShortcutRunLabel.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from "svelte";
 
 	export let isLoading: boolean;
+	export let isDisabled = false;
 
 	let shortcutLabel = "";
 
@@ -11,9 +12,11 @@
 	});
 </script>
 
-<kbd
-	class="hidden rounded border border-gray-200 bg-gray-100 py-0.5 px-1.5 text-xs leading-none text-gray-700 dark:bg-gray-800 dark:text-gray-300 md:inline {isLoading
-		? 'opacity-40'
-		: 'opacity-70'}"
-	>{shortcutLabel}
-</kbd>
+{#if !isDisabled}
+	<kbd
+		class="hidden rounded border border-gray-200 bg-gray-100 py-0.5 px-1.5 text-xs leading-none text-gray-700 dark:bg-gray-800 dark:text-gray-300 md:inline {isLoading
+			? 'opacity-40'
+			: 'opacity-70'}"
+		>{shortcutLabel}
+	</kbd>
+{/if}
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetSubmitBtn/WidgetSubmitBtn.svelte
@@ -8,7 +8,7 @@
 	export let onClick: () => void;
 
 	function onKeyDown(e: KeyboardEvent) {
-		if (isLoading) {
+		if (isLoading || isDisabled) {
 			return;
 		}
 		// run inference on cmd+Enter
@@ -21,15 +21,17 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
-<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>
+{#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>
+{/if}
diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetTableInput/WidgetTableInput.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetTableInput/WidgetTableInput.svelte
@@ -12,6 +12,7 @@
 	export let canAddRow = true;
 	export let canAddCol = true;
 	export let isLoading = false;
+	export let isDisabled = false;
 
 	let initialTable: (string | number)[][] = [[]];
 	let tableContainerEl: HTMLElement;
@@ -64,7 +65,7 @@
 				<tr>
 					{#each table[0] as header, x}
 						<th
-							contenteditable={canAddCol && !isLoading}
+							contenteditable={canAddCol && !isLoading && !isDisabled}
 							class="h-6 border-2 border-gray-100"
 							on:keydown={onKeyDown}
 							on:input={e => editCell(e, [x, 0])}
@@ -80,7 +81,7 @@
 						{#each row as cell, x}
 							<td
 								class={(highlighted[`${y}-${x}`] ?? "border-gray-100") + " h-6 border-2"}
-								contenteditable={!isLoading}
+								contenteditable={!isLoading && !isDisabled}
 								on:keydown={onKeyDown}
 								on:input={e => editCell(e, [x, y + 1])}>{cell}</td
 							>

diff --git a/js/src/lib/components/InferenceWidget/shared/WidgetTextInput/WidgetTextInput.svelte b/js/src/lib/components/InferenceWidget/shared/WidgetTextInput/WidgetTextInput.svelte
@@ -3,11 +3,18 @@
 
 	export let label: string | undefined = undefined;
 	export let placeholder: string = "Your sentence here...";
+	export let isDisabled = false;
 	export let value: string;
 </script>
 
 <WidgetLabel {label}>
 	<svelte:fragment slot="after">
-		<input bind:value class="{label ? 'mt-1.5' : ''} form-input-alt block w-full" {placeholder} type="text" />
+		<input
+			bind:value
+			class="{label ? 'mt-1.5' : ''} form-input-alt block w-full"
+			placeholder={isDisabled ? "" : placeholder}
+			disabled={isDisabled}
+			type="text"
+		/>
 	</svelte:fragment>
 </WidgetLabel>