dist/app.js

import { createRepo, commit, whoAmI } from "@huggingface/hub";
const c = console;
const FILES_TO_UPLOAD = [
    `${window.location.origin}/mobilenet/model.json`,
    `${window.location.origin}/mobilenet/group1-shard1of2`,
    `${window.location.origin}/mobilenet/group1-shard2of2`,
    `${window.location.origin}/mobilenet/coffee.jpg`,
    `${window.location.origin}/mobilenet/README.md`,
];
function filenameFromURL(url) {
    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 = await Promise.all(FILES_TO_UPLOAD.map(async (file) => {
                return {
                    operation: "addOrUpdate",
                    path: filenameFromURL(file),
                    // upload remote file
                    content: new URL(file),
                };
            }));
            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) {
            console.error(err);
            output.append("\n" + err);
        }
        button.removeAttribute("disabled");
    });
});