⬆️ Upgrade @huggingface/hub

app.ts

@@ -1,20 +1,7 @@
-import { createRepo, commit, AccessToken, CommitFile } from "@huggingface/hub";
+import { createRepo, commit, CommitFile, whoAmI } from "@huggingface/hub";
 
 const c = console;
 
-const ENDPOINT = "https://huggingface.co";
-
-async function whoami(token: string): Promise<{ name: string }> {
-	const path = `${ENDPOINT}/api/whoami-v2`;
-	const res = await fetch(path, {
-		headers: {
-			Authorization: `Bearer ${token}`,
-		}
-	});
-	return await res.json();
-}
-
-
 const FILES_TO_UPLOAD = [
 	"./mobilenet/model.json",
 	"./mobilenet/group1-shard1of2",
@@ -32,16 +19,16 @@ window.addEventListener("load", function () {
 	const repoNameEl = document.querySelector<HTMLInputElement>("#repo_name")!;
 	const button = document.querySelector("#submit")!;
 	const output = document.querySelector("#logs")!;
-	
+
 	const storedToken = window.localStorage.getItem("hf_token");
 	if (storedToken) {
 		tokenEl.value = storedToken;
 		/// ^to help in dev.
 	}
-	
+
 	repoNameEl.value = `tfjs-mobilenet-${Date.now() % 1_000}`;
 	/// "random" repo name
-	
+
 	button.addEventListener("click", async function () {
 		const token = tokenEl.value;
 		const repoName = repoNameEl.value;
@@ -51,52 +38,49 @@ window.addEventListener("load", function () {
 		}
 
 		button.setAttribute("disabled", "disabled");
+
+		const credentials = {
+			accessToken: token,
+		};
+
 		try {
-			const { name: username } = await whoami(token);
+			const { name: username } = await whoAmI({ credentials });
 			const name = `${username}/${repoName}`;
-			await createRepo({
+			const { repoUrl } = await createRepo({
 				repo: {
 					type: "model",
 					name,
 				},
-				credentials: {
-					accessToken: token as AccessToken,
-				}
+				credentials,
 			});
-			
+
 			const operations: CommitFile[] = await Promise.all(
-				FILES_TO_UPLOAD.map(async file => {
+				FILES_TO_UPLOAD.map(async (file) => {
 					return {
 						operation: "addOrUpdate",
 						path: filenameFromURL(file),
 						content: await (await fetch(file)).blob(),
-					}
-				}
-			));
+					};
+				})
+			);
 			const commitOutput = await commit({
 				repo: {
 					type: "model",
 					name,
 				},
-				credentials: {
-					accessToken: token as AccessToken,
-				},
+				credentials,
 				title: "upload model",
 				operations,
 			});
 			c.log(commitOutput);
-			
-			const fullUrl = `${ENDPOINT}/${name}`;
-			/// ^TODO(get it from the createRepo call)
+
 			button.insertAdjacentHTML(
 				"afterend",
-				`<div class="text-green-500 mb-6">🎉 Upload complete! Model page is <a target="_blank" class="text-bold underline" href="${fullUrl}">${fullUrl}</a></div>`
+				`<div class="text-green-500 mb-6">🎉 Upload complete! Model page is <a target="_blank" class="text-bold underline" href="${repoUrl}">${repoUrl}</a></div>`
 			);
 		} catch (err) {
-			output.append("\n"+err);
+			output.append("\n" + err);
 		}
 		button.removeAttribute("disabled");
 	});
 });
-
-

dist/app.js

@@ -1,15 +1,5 @@
-import { createRepo, commit } from "@huggingface/hub";
+import { createRepo, commit, whoAmI } from "@huggingface/hub";
 const c = console;
-const ENDPOINT = "https://huggingface.co";
-async function whoami(token) {
-    const path = `${ENDPOINT}/api/whoami-v2`;
-    const res = await fetch(path, {
-        headers: {
-            Authorization: `Bearer ${token}`,
-        }
-    });
-    return await res.json();
-}
 const FILES_TO_UPLOAD = [
     "./mobilenet/model.json",
     "./mobilenet/group1-shard1of2",
@@ -40,17 +30,18 @@ window.addEventListener("load", function () {
             return;
         }
         button.setAttribute("disabled", "disabled");
+        const credentials = {
+            accessToken: token,
+        };
         try {
-            const { name: username } = await whoami(token);
+            const { name: username } = await whoAmI({ credentials });
             const name = `${username}/${repoName}`;
-            await createRepo({
+            const { repoUrl } = await createRepo({
                 repo: {
                     type: "model",
                     name,
                 },
-                credentials: {
-                    accessToken: token,
-                }
+                credentials,
             });
             const operations = await Promise.all(FILES_TO_UPLOAD.map(async (file) => {
                 return {
@@ -64,16 +55,12 @@ window.addEventListener("load", function () {
                     type: "model",
                     name,
                 },
-                credentials: {
-                    accessToken: token,
-                },
+                credentials,
                 title: "upload model",
                 operations,
             });
             c.log(commitOutput);
-            const fullUrl = `${ENDPOINT}/${name}`;
-            /// ^TODO(get it from the createRepo call)
-            button.insertAdjacentHTML("afterend", `<div class="text-green-500 mb-6">🎉 Upload complete! Model page is <a target="_blank" class="text-bold underline" href="${fullUrl}">${fullUrl}</a></div>`);
+            button.insertAdjacentHTML("afterend", `<div class="text-green-500 mb-6">🎉 Upload complete! Model page is <a target="_blank" class="text-bold underline" href="${repoUrl}">${repoUrl}</a></div>`);
         }
         catch (err) {
             output.append("\n" + err);

index.html

@@ -7,7 +7,7 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"@huggingface/hub": "https://cdn.skypack.dev/@huggingface/hub@0.1.6"
+					"@huggingface/hub": "https://cdn.skypack.dev/@huggingface/hub@0.2.1"
 				}
 			}
 		</script>

package.json

@@ -1,18 +1,20 @@
 {
-  "name": "push-model-from-web",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@huggingface/hub": "^0.1.5"
-  },
-  "devDependencies": {
-    "prettier": "^2.8.4",
-    "tailwindcss": "^3.2.7"
-  }
+	"name": "push-model-from-web",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"build": "tsc"
+	},
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"@huggingface/hub": "^0.2.1"
+	},
+	"devDependencies": {
+		"@types/node": "^18.15.3",
+		"prettier": "^2.8.5",
+		"tailwindcss": "^3.2.7",
+		"typescript": "^5.0.2"
+	}
 }

tsconfig.json

@@ -6,6 +6,7 @@
 		"moduleResolution": "node",
 		"strictNullChecks": true,
 		"strictBindCallApply": true,
-		"lib": ["DOM", "ES2021"]
+		"lib": ["DOM", "ES2021"],
+		"skipLibCheck": true
 	}
-}
+}