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.document.addEventListener("DOMContentLoaded", () => {
	const tokenEl = document.querySelector<HTMLInputElement>("#token")!;
	const repoNameEl = document.querySelector<HTMLInputElement>("#repo_name")!;
	const button = document.querySelector("#submit")!;
	const output = document.querySelector("#logs")!;
	const form = document.getElementsByTagName("form")[0];

	const storedToken = window.localStorage.getItem("hf_token");
	if (storedToken) {
		tokenEl.value = storedToken;
		/// ^to help in dev.
	}

	repoNameEl.value = `hello-world-${Date.now() % 1_000}`;
	/// "random" repo name

	form.addEventListener("submit", async (event) => {
		event.preventDefault();

		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,
		};

		const result = await fetch("./mobilenet/model.json", {
			headers: {
				Range: "bytes=0-100",
			},
		});
		const text = await result.text();
		c.log(text);
		output.append("\n" + text);
		// 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");
	});
});