app.ts

import { createRepo, commit, CommitFile, whoAmI } from "@huggingface/hub";

const c = console;

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");

		const credentials = {
			accessToken: token,
		};

		try {
			const { name: username } = await whoAmI({ credentials });
			const name = `${username}/${repoName}`;
			const { repoUrl } = await createRepo({
				repo: {
					type: "model",
					name,
				},
				credentials,
			});

			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,
				title: "upload model",
				operations,
			});
			c.log(commitOutput);

			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);
		}
		button.removeAttribute("disabled");
	});
});