import { createRepo, commit } from "@huggingface/hub"; const c = console; const ENDPOINT = "https://huggingface.co"; async function whoami(token) { 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) { 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() % 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, } }); const operations = 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, }, title: "upload model", operations, }); c.log(commitOutput); const fullUrl = `${ENDPOINT}/${name}`; /// ^TODO(get it from the createRepo call) button.insertAdjacentHTML("afterend", `
🎉 Upload complete! Model page is ${fullUrl}
`); } catch (err) { output.append("\n" + err); } button.removeAttribute("disabled"); }); });