Sync widgets demo

packages/widgets/README.md

@@ -6,13 +6,26 @@ Open-source version of the inference widgets from huggingface.co
 
 **Demo page:** https://huggingface.co/spaces/huggingfacejs/inference-widgets
 
-You can also run the demo locally:
+## Publishing
+
+Because `@huggingface/widgets` depends on `@huggingface/tasks`, you need to publish `@huggingface/tasks` first, and then `@huggingface/widgets`. There should be a CI check to prevent publishing `@huggingface/widgets` if `@huggingface/tasks` hasn't been published yet.
+
+## Demo
+
+You can run the demo locally:
 
 ```console
 pnpm install
 pnpm dev
 ```
 
-## Publishing
+If you want to try the "Sign-in with HF" feature locally, you will need to https://huggingface.co/settings/applications/new an OAuth application with `"openid"` and `"inference-api"` scopes and `http://localhost:5173/auth/callback/huggingface` as the redirect URL.
+
+Then you can create a `.env.local` file with the following content:
+
+```env
+OAUTH_CLIENT_ID=...
+OAUTH_CLIENT_SECRET=...
+```
 
-Because `@huggingface/widgets` depends on `@huggingface/tasks`, you need to publish `@huggingface/tasks` first, and then `@huggingface/widgets`.
+If you want to try the "Sign-in with HF" feature in a Space, you can just duplicate https://huggingface.co/spaces/huggingfacejs/inference-widgets, it should work out of the box thanks to the metadata in the `README.md` file.

packages/widgets/package.json

@@ -38,6 +38,8 @@
 		"svelte": "^3.59.2"
 	},
 	"devDependencies": {
+		"@auth/core": "^0.18.3",
+		"@auth/sveltekit": "^0.3.14",
 		"@fontsource/ibm-plex-mono": "^5.0.8",
 		"@fontsource/source-sans-pro": "^5.0.8",
 		"@sveltejs/adapter-node": "^1.3.1",

packages/widgets/pnpm-lock.yaml

@@ -10,6 +10,12 @@ dependencies:
     version: link:../tasks
 
 devDependencies:
+  '@auth/core':
+    specifier: ^0.18.3
+    version: 0.18.3
+  '@auth/sveltekit':
+    specifier: ^0.3.14
+    version: 0.3.14(@sveltejs/kit@1.27.4)(svelte@3.59.2)
   '@fontsource/ibm-plex-mono':
     specifier: ^5.0.8
     version: 5.0.8
@@ -68,6 +74,35 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /@auth/core@0.18.3:
+    resolution: {integrity: sha512-YXQWxi3pKxngt+2vo3dq8+wDANlUH8nhQgX6EVdd3Enfe3vweBtHqzaWrtWzQnVb8wdGxdhxaoOlYroEBE+/yw==}
+    peerDependencies:
+      nodemailer: ^6.8.0
+    peerDependenciesMeta:
+      nodemailer:
+        optional: true
+    dependencies:
+      '@panva/hkdf': 1.1.1
+      cookie: 0.5.0
+      jose: 5.1.2
+      oauth4webapi: 2.4.0
+      preact: 10.11.3
+      preact-render-to-string: 5.2.3(preact@10.11.3)
+    dev: true
+
+  /@auth/sveltekit@0.3.14(@sveltejs/kit@1.27.4)(svelte@3.59.2):
+    resolution: {integrity: sha512-Ealyi4uM4V42tk4UhhRQ+iZKah0OOp12siXwgDsCj1uBOCeZwL97RkvdMDX7pg18zBP/h2qFAuMWjW5q7bSYxA==}
+    peerDependencies:
+      '@sveltejs/kit': ^1.0.0
+      svelte: ^3.54.0 || ^4.0.0
+    dependencies:
+      '@auth/core': 0.18.3
+      '@sveltejs/kit': 1.27.4(svelte@3.59.2)(vite@4.5.0)
+      svelte: 3.59.2
+    transitivePeerDependencies:
+      - nodemailer
+    dev: true
+
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -367,6 +402,10 @@ packages:
       fastq: 1.15.0
     dev: true
 
+  /@panva/hkdf@1.1.1:
+    resolution: {integrity: sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==}
+    dev: true
+
   /@polka/url@1.0.0-next.23:
     resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==}
     dev: true
@@ -1230,6 +1269,10 @@ packages:
     hasBin: true
     dev: true
 
+  /jose@5.1.2:
+    resolution: {integrity: sha512-X7TOC/d8KPvx4wPUuLHVgTSdoWw0UW5TQOUwhvCvj+ZPfsf9vUPhhksYPjNBWVGPQ/6yd/JrL1gQxBnIDwYdFg==}
+    dev: true
+
   /js-sdsl@4.4.2:
     resolution: {integrity: sha512-dwXFwByc/ajSV6m5bcKAPwe4yDDF6D614pxmIi5odytzxRlwqF6nwoiCek80Ixc7Cvma5awClxrzFtxCQvcM8w==}
     dev: true
@@ -1440,6 +1483,10 @@ packages:
       npm-normalize-package-bin: 2.0.0
     dev: true
 
+  /oauth4webapi@2.4.0:
+    resolution: {integrity: sha512-ZWl8ov8HeGVyc9Icl1cag76HvIcDAp23eIIT+UVGir+dEu8BMgMlvZeZwqLVd0P8DqaumH4N+QLQXN69G1QjSA==}
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -1604,11 +1651,28 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /preact-render-to-string@5.2.3(preact@10.11.3):
+    resolution: {integrity: sha512-aPDxUn5o3GhWdtJtW0svRC2SS/l8D9MAgo2+AWml+BhDImb27ALf04Q2d+AHqUUOc6RdSXFIBVa2gxzgMKgtZA==}
+    peerDependencies:
+      preact: '>=10'
+    dependencies:
+      preact: 10.11.3
+      pretty-format: 3.8.0
+    dev: true
+
+  /preact@10.11.3:
+    resolution: {integrity: sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==}
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /pretty-format@3.8.0:
+    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
+    dev: true
+
   /publint@0.1.9:
     resolution: {integrity: sha512-O53y7vbePxuGFmEjgcrafMSlDpOJwOkj8YdexOt7yWlv7SB3rXoT3mHknyMJ3lf2UFH5Bmt6tnIkHcOTR6dEoA==}
     engines: {node: '>=16'}

packages/widgets/src/app.d.ts

@@ -7,6 +7,16 @@ declare global {
 		// interface PageData {}
 		// interface Platform {}
 	}
+
+	export interface Session {
+		access_token?: string;
+	}
+}
+
+declare module "@auth/core/types" {
+	export interface Session {
+		access_token?: string;
+	}
 }
 
 export {};

packages/widgets/src/hooks.server.ts

@@ -0,0 +1,59 @@
+import { env } from "$env/dynamic/private";
+import { skipCSRFCheck } from "@auth/core";
+import { SvelteKitAuth } from "@auth/sveltekit";
+import type { Handle } from "@sveltejs/kit";
+import { sequence } from "@sveltejs/kit/hooks";
+
+const handleSSO =
+	env.OAUTH_CLIENT_ID && env.OAUTH_CLIENT_SECRET
+		? SvelteKitAuth({
+				// Should be fine as long as your reverse proxy is configured to only accept traffic with the correct host header
+				trustHost: true,
+				/**
+				 * SvelteKit has built-in CSRF protection, so we can skip the check
+				 */
+				skipCSRFCheck: skipCSRFCheck,
+				providers: [
+					{
+						name: "Hugging Face",
+						id: "huggingface",
+						type: "oidc",
+						clientId: env.OAUTH_CLIENT_ID,
+						clientSecret: env.OAUTH_CLIENT_SECRET,
+						issuer: "https://huggingface.co",
+						wellKnown: "https://huggingface.co/.well-known/openid-configuration",
+						/** Add "inference-api" scope and remove "email" scope */
+						authorization: { params: { scope: "openid profile inference-api" } },
+						checks: ["state" as never, "pkce" as never],
+					},
+				],
+				secret: env.OAUTH_CLIENT_SECRET,
+				/**
+				 * Get the access_token without an account in DB, to make calls to the inference API
+				 */
+				callbacks: {
+					async jwt({ token, account }) {
+						if (account) {
+							return {
+								...token,
+								access_token: account.access_token,
+							};
+						}
+						return token;
+					},
+					async session({ session, token }) {
+						return {
+							...session,
+							access_token: token.access_token,
+						};
+					},
+				},
+		  })
+		: null;
+
+const handleGlobal: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event);
+	return response;
+};
+
+export const handle = handleSSO ? sequence(handleSSO, handleGlobal) : handleGlobal;

packages/widgets/src/routes/+layout.server.ts

@@ -0,0 +1,11 @@
+import { env } from "$env/dynamic/private";
+import type { LayoutServerLoad } from "./$types.js";
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	const session = await locals.getSession();
+
+	return {
+		access_token: session?.access_token,
+		supportsOAuth: !!env.OAUTH_CLIENT_ID && !!env.OAUTH_CLIENT_SECRET,
+	};
+};

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

@@ -5,17 +5,27 @@
 	import InferenceWidget from "$lib/components/InferenceWidget/InferenceWidget.svelte";
 	import ModeSwitcher from "$lib/components/DemoThemeSwitcher/DemoThemeSwitcher.svelte";
 	import { onMount } from "svelte";
+	import { browser } from "$app/environment";
 
-	let apiToken = "";
+	export let data;
+	let apiToken = data.access_token || "";
 
 	function storeHFToken() {
 		window.localStorage.setItem("hf_token", apiToken);
 	}
 
+	/**
+	 * If we are in an iframe, we need to open the auth page in a new tab
+	 * to avoid issues with third-party cookies in a space
+	 */
+	const isIframe = browser && window.self !== window.parent;
+
 	onMount(() => {
-		const token = window.localStorage.getItem("hf_token");
-		if (token) {
-			apiToken = token;
+		if (!data.supportsOAuth) {
+			const token = window.localStorage.getItem("hf_token");
+			if (token) {
+				apiToken = token;
+			}
 		}
 	});
 
@@ -526,10 +536,24 @@
 <div class="flex flex-col gap-6 py-12 px-4">
 	<ModeSwitcher />
 
-	<label>
-		<div class="text-xl font-semibold">First, Enter HF token</div>
-		<input class="form-input" type="text" bind:value={apiToken} placeholder="hf_..." on:change={storeHFToken} />
-	</label>
+	{#if data.supportsOAuth}
+		{#if !data.access_token}
+			<form class="contents" method="post" action="/auth/signin/huggingface" target={isIframe ? "_blank" : ""}>
+				<button type="submit" title="Sign in with Hugging Face">
+					<img
+						src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
+						alt="Sign in with Hugging Face"
+						class="h-12 w-auto"
+					/>
+				</button>
+			</form>
+		{/if}
+	{:else}
+		<label>
+			<div class="text-xl font-semibold">First, Enter HF token</div>
+			<input class="form-input" type="text" bind:value={apiToken} placeholder="hf_..." on:change={storeHFToken} />
+		</label>
+	{/if}
 
 	<div>
 		<h1 class="mb-8 text-4xl font-semibold">Showcase of all types of inference widgets running</h1>