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("#token")!; const repoNameEl = document.querySelector("#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 = `tfjs-mobilenet-${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, }; 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", `
🎉 Upload complete! Model page is ${repoUrl}
` ); } catch (err) { output.append("\n" + err); } button.removeAttribute("disabled"); }); });