app.ts

import { createRepo, commit, AccessToken, CommitFile } 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",
	"./mobilenet/group1-shard2of2",
	"./mobilenet/coffee.jpg",
	"./mobilenet/README.md",
];

function filenameFromURL(url: string): string {
	return url.substring(url.lastIndexOf("/") + 1);
}

window.addEventListener("load", function () {
	const tokenEl = document.querySelector<HTMLInputElement>("#token")!;
	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;
		if (!token || !repoName) {
			alert("You need a token and a repo name");
			return;
		}

		button.setAttribute("disabled", "disabled");
		try {
			const { name: username } = await whoami(token);
			const name = `${username}/${repoName}`;
			await createRepo({
				repo: {
					type: "model",
					name,
				},
				credentials: {
					accessToken: token as AccessToken,
				}
			});
			
			const operations: CommitFile[] = await Promise.all(
				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,
				},
				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>`
			);
		} catch (err) {
			output.append("\n"+err);
		}
		button.removeAttribute("disabled");
	});
});