Sync with hf internal (#228)

Author: Mishig Davaadorj

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

@@ -5,7 +5,8 @@
 	export let isLoading = false;
 	export let label =
 		"Drag image file here or click to browse from your computer";
-	export let onSelectFile: (file: File) => void;
+	export let onSelectFile: (file: File | Blob) => void;
+	export let onError: (e: string) => void;
 
 	let fileInput: HTMLInputElement;
 	let isDragging = false;
@@ -18,6 +19,46 @@
 			onSelectFile(file);
 		}
 	}
+
+	async function onDrop(e: DragEvent) {
+		isDragging = false;
+		const itemList = e.dataTransfer?.items;
+		if (!itemList) {
+			return;
+		}
+		const items: DataTransferItem[] = [];
+		for (let i = 0; i < itemList.length; i++) {
+			items.push(itemList[i]);
+		}
+		const uriItem = items.find(
+			(x) => x.kind === "string" && x.type === "text/uri-list"
+		);
+		const fileItem = items.find((x) => x.kind === "file");
+		if (uriItem) {
+			const url = await new Promise<string>((resolve) =>
+				uriItem.getAsString((s) => resolve(s))
+			);
+			/// Run through our own proxy to bypass CORS:
+			const proxiedUrl =
+				url.startsWith(`http://localhost`) ||
+				new URL(url).host === window.location.host
+					? url
+					: `https://widgets-cors-proxy.huggingface.co/proxy?url=${url}`;
+			const res = await fetch(proxiedUrl);
+			const file = await res.blob();
+
+			imgSrc = URL.createObjectURL(file);
+			onSelectFile(file);
+		} else if (fileItem) {
+			const file = fileItem.getAsFile();
+			if (file) {
+				imgSrc = URL.createObjectURL(file);
+				onSelectFile(file);
+			}
+		} else {
+			onError(`Unrecognized dragged and dropped file or element.`);
+		}
+	}
 </script>
 
 <input
@@ -41,11 +82,7 @@
 		isDragging = false;
 	}}
 	on:dragover|preventDefault
-	on:drop|preventDefault={(e) => {
-		isDragging = false;
-		fileInput.files = e.dataTransfer?.files ?? null;
-		onChange();
-	}}
+	on:drop|preventDefault={onDrop}
 >
 	{#if !imgSrc}
 		<span class="pointer-events-none text-sm">{label}</span>

widgets/src/lib/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte

@@ -70,7 +70,18 @@
 			return;
 		}
 
-		const requestBody = file ? { file } : { url: selectedSampleUrl };
+		if (!file && selectedSampleUrl) {
+			/// Run through our own proxy to bypass CORS:
+			const proxiedUrl =
+				selectedSampleUrl.startsWith(`http://localhost`) ||
+				new URL(selectedSampleUrl).host === window.location.host
+					? selectedSampleUrl
+					: `https://widgets-cors-proxy.huggingface.co/proxy?url=${selectedSampleUrl}`;
+			const res = await fetch(proxiedUrl);
+			file = await res.blob();
+		}
+
+		const requestBody = { file };
 
 		isLoading = true;
 

widgets/src/lib/InferenceWidget/widgets/FeatureExtractionWidget/DataTable.ts

@@ -0,0 +1,43 @@
+export class DataTable {
+	max: number;
+	min: number;
+	std: number;
+
+	constructor(public body: number[] | number[][]) {
+		const all = this.body.flat();
+		this.max  = Math.max(...all);
+		this.min  = Math.min(...all);
+		this.std  = this.max - this.min;
+	}
+
+	get isArrLevel0(): boolean {
+		return isArrLevel0(this.body);
+	}
+
+	get oneDim(): number[] {
+		return this.body as number[];
+	}
+	get twoDim(): number[][] {
+		return this.body as number[][];
+	}
+
+	bg(value: number): string {
+		if (value > this.min + this.std * 0.7) {
+			return "bg-green-100 dark:bg-green-800";
+		}
+		if (value > this.min + this.std * 0.6) {
+			return "bg-green-50 dark:bg-green-900";
+		}
+		if (value < this.min + this.std * 0.3) {
+			return "bg-red-100 dark:bg-red-800";
+		}
+		if (value < this.min + this.std * 0.4) {
+			return "bg-red-50 dark:bg-red-900";
+		}
+		return "";
+	}
+}
+
+function isArrLevel0(x: number[] | number[][]): x is number[] {
+	return typeof x[0] === "number";
+}

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

@@ -10,50 +10,7 @@
 		getSearchParams,
 		updateUrl,
 	} from "../../shared/helpers";
-
-	const isArrLevel0 = (x: number[] | number[][]): x is number[] => {
-		return typeof x[0] === "number";
-	};
-
-	class DataTable {
-		max: number;
-		min: number;
-		std: number;
-
-		constructor(public body: number[] | number[][]) {
-			const all = this.body.flat();
-			this.max = Math.max(...all);
-			this.min = Math.min(...all);
-			this.std = this.max - this.min;
-		}
-
-		get isArrLevel0() {
-			return isArrLevel0(this.body);
-		}
-
-		get oneDim(): number[] {
-			return this.body as number[];
-		}
-		get twoDim(): number[][] {
-			return this.body as number[][];
-		}
-
-		bg(value: number): string {
-			if (value > this.min + this.std * 0.7) {
-				return "bg-green-100 dark:bg-green-800";
-			}
-			if (value > this.min + this.std * 0.6) {
-				return "bg-green-50 dark:bg-green-900";
-			}
-			if (value < this.min + this.std * 0.3) {
-				return "bg-red-100 dark:bg-red-800";
-			}
-			if (value < this.min + this.std * 0.4) {
-				return "bg-red-50 dark:bg-red-900";
-			}
-			return "";
-		}
-	}
+	import { DataTable } from "./DataTable";
 
 	export let apiToken: WidgetProps["apiToken"];
 	export let apiUrl: WidgetProps["apiUrl"];

widgets/src/lib/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte

@@ -21,11 +21,11 @@
 	let output: Array<{ label: string; score: number }> = [];
 	let outputJson: string;
 
-	function onSelectFile(file: File) {
+	function onSelectFile(file: File | Blob) {
 		getOutput(file);
 	}
 
-	async function getOutput(file: File, withModelLoading = false) {
+	async function getOutput(file: File | Blob, withModelLoading = false) {
 		if (!file) {
 			return;
 		}
@@ -91,7 +91,7 @@
 >
 	<svelte:fragment slot="top">
 		<form>
-			<WidgetDropzone {isLoading} {onSelectFile} />
+			<WidgetDropzone {isLoading} {onSelectFile} onError={(e) => (error = e)} />
 		</form>
 	</svelte:fragment>
 	<svelte:fragment slot="bottom">