Working PoC

app.ts

@@ -1,22 +1,23 @@
 const c = console;
 
-// const ENDPOINT = "https://huggingface.co";
-const ENDPOINT = "http://localhost:5564";
+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}`,
-			Origin: `127.0.0.1:8000`
 		}
 	});
 	return await res.json();
 }
 
+/**
+ * @returns `str`: full URL to the newly created repo.
+ */
 async function createRepo(
 	token: string,
-	repoId: string,
+	repoName: string,
 	repoType: "model" | "dataset" | "space",
 ): Promise<string> {
 	const path = `${ENDPOINT}/api/repos/create`;
@@ -24,13 +25,59 @@ async function createRepo(
 		method: "POST",
 		headers: {
 			Authorization: `Bearer ${token}`,
+			"Content-Type": "application/json",
 		},
 		body: JSON.stringify({
-			name: repoId,
+			name: repoName,
 			type: repoType,
 		})
 	});
-	return (await res.json())["url"];
+	const output = await res.json();
+	if (!res.ok) {
+		throw new Error(`Error ${res.status}: ${output.error ?? output}`);
+	}
+	return output.url;
+}
+
+/**
+ * @returns `str`: URL to the newly uploaded blob.
+ */
+ async function uploadFile(
+	token: string,
+	repoId: string,
+	repoType: "model" | "dataset" | "space",
+	filename: string,
+	blob: Blob,
+): Promise<string> {
+	const prefix = (repoType === "dataset") ? "/datasets"
+		: (repoType === "space") ? "/spaces"
+		: "";
+	const path = `${ENDPOINT}/api${prefix}/${repoId}/upload/main/${filename}`;
+	const res = await fetch(path, {
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+		body: blob
+	});
+	const output = await res.json();
+	if (!res.ok) {
+		throw new Error(`Error ${res.status}: ${output.error ?? output}`);
+	}
+	return output.url;
+}
+
+
+const FILES_TO_UPLOAD = [
+	"./mobilenet/model.json",
+	"./mobilenet/group1-shard1of2",
+	"./mobilenet/group1-shard2of2",
+	"./mobilenet/coffee.jpg",
+	"./mobilenet/README.md",
+];
+
+function filenameFromURL(url: string): string {
+	return url.substring(url.lastIndexOf("/") + 1);
 }
 
 window.addEventListener("load", function () {
@@ -38,7 +85,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;
@@ -49,10 +105,18 @@ window.addEventListener("load", function () {
 
 		button.setAttribute("disabled", "disabled");
 		try {
-			// c.log(await createRepo(token, repoName, "model"));
-			c.log(await whoami(token));
+			const fullUrl = await createRepo(token, repoName, "model");
+			const repoId = fullUrl.replace(ENDPOINT, "").replace(/^\//, "");
+			for (const file of FILES_TO_UPLOAD) {
+				const blob = await (await fetch(file)).blob();
+				await uploadFile(token, repoId, "model", filenameFromURL(file), blob);
+			}
+			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>`
+			);
 		} catch (err) {
-			output.append(err);
+			output.append("\n"+err);
 		}
 		button.removeAttribute("disabled");
 	});

dist/app.js

@@ -1,35 +1,81 @@
 const c = console;
-// const ENDPOINT = "https://huggingface.co";
-const ENDPOINT = "http://localhost:5564";
+const ENDPOINT = "https://huggingface.co";
 async function whoami(token) {
     const path = `${ENDPOINT}/api/whoami-v2`;
     const res = await fetch(path, {
         headers: {
             Authorization: `Bearer ${token}`,
-            Origin: `127.0.0.1:8000`
         }
     });
     return await res.json();
 }
-async function createRepo(token, repoId, repoType) {
+/**
+ * @returns `str`: full URL to the newly created repo.
+ */
+async function createRepo(token, repoName, repoType) {
+    var _a;
     const path = `${ENDPOINT}/api/repos/create`;
     const res = await fetch(path, {
         method: "POST",
         headers: {
             Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
         },
         body: JSON.stringify({
-            name: repoId,
+            name: repoName,
             type: repoType,
         })
     });
-    return (await res.json())["url"];
+    const output = await res.json();
+    if (!res.ok) {
+        throw new Error(`Error ${res.status}: ${(_a = output.error) !== null && _a !== void 0 ? _a : output}`);
+    }
+    return output.url;
+}
+/**
+ * @returns `str`: URL to the newly uploaded blob.
+ */
+async function uploadFile(token, repoId, repoType, filename, blob) {
+    var _a;
+    const prefix = (repoType === "dataset") ? "/datasets"
+        : (repoType === "space") ? "/spaces"
+            : "";
+    const path = `${ENDPOINT}/api${prefix}/${repoId}/upload/main/${filename}`;
+    const res = await fetch(path, {
+        method: "POST",
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+        body: blob
+    });
+    const output = await res.json();
+    if (!res.ok) {
+        throw new Error(`Error ${res.status}: ${(_a = output.error) !== null && _a !== void 0 ? _a : output}`);
+    }
+    return output.url;
+}
+const FILES_TO_UPLOAD = [
+    "./mobilenet/model.json",
+    "./mobilenet/group1-shard1of2",
+    "./mobilenet/group1-shard2of2",
+    "./mobilenet/coffee.jpg",
+    "./mobilenet/README.md",
+];
+function filenameFromURL(url) {
+    return url.substring(url.lastIndexOf("/") + 1);
 }
 window.addEventListener("load", function () {
     const tokenEl = document.querySelector("#token");
     const repoNameEl = document.querySelector("#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() % 1000}`;
+    /// "random" repo name
     button.addEventListener("click", async function () {
         const token = tokenEl.value;
         const repoName = repoNameEl.value;
@@ -39,11 +85,16 @@ window.addEventListener("load", function () {
         }
         button.setAttribute("disabled", "disabled");
         try {
-            // c.log(await createRepo(token, repoName, "model"));
-            c.log(await whoami(token));
+            const fullUrl = await createRepo(token, repoName, "model");
+            const repoId = fullUrl.replace(ENDPOINT, "").replace(/^\//, "");
+            for (const file of FILES_TO_UPLOAD) {
+                const blob = await (await fetch(file)).blob();
+                await uploadFile(token, repoId, "model", filenameFromURL(file), blob);
+            }
+            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>`);
         }
         catch (err) {
-            output.append(err);
+            output.append("\n" + err);
         }
         button.removeAttribute("disabled");
     });

index.html

@@ -121,7 +121,6 @@
 				class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
 				placeholder="repo name"
 				required
-				value="tfjs-mobilenet"
 			/>
 
 			<p class="mt-8">

mobilenet/README.md

@@ -0,0 +1,12 @@
+---
+license: mit
+tags:
+  - image-classification
+  - tfjs
+---
+
+## TensorFlow.js version of Mobilenet
+
+Pushed from Web
+
+![](coffee.jpg)