[Question] ESM module import in the browser (via jsdelivr)

[josephrocca]

Wondering how to import transformers.js as a module (as opposed to <script>) in the browser? I've tried this:

let { AutoTokenizer } = await import("https://cdn.jsdelivr.net/npm/@xenova/transformers@1.4.2/dist/transformers.min.js");

But it doesn't seem to export anything. I might be making a mistake here, but if not: Woudl it be possible to get a module-based js file for the browser?

---

Also, as an aside, can I suggest using a versioned URL in the readme? Or something like:

https://cdn.jsdelivr.net/npm/@xenova/transformers@X.Y.Z/dist/transformers.min.js

With a note telling them to replace X.Y.Z with the latest version. This allows you to make breaking changes in the future without breaking a bunch of sites. Often newbie devs don't realise that they have to swap for a versioned URL, and this can lead to "web rot" where old webpages eventuallly become broken or buggy.

[josephrocca]

(Also, I noticed that AutoModel, AutoModelForCausalLM, etc. are added to the global scope when I do the above await import(...), which makes sense, but AutoTokenizer isn't added?)

[kungfooman]

Right now we don't have a proper/published ES6 module, but @xenova worked it out mostly here:

https://github.com/xenova/transformers.js/tree/es6-rewrite

There isn't a lot more that needs change:

• global -> globalThis

Use it like:

        <script type="importmap">
            {
              "imports": {
                "transformers": "../transformers.js_es6/src/transformers.js",
                "fs": "../transformers.js_es6/src/fakefs.js",
                "url": "../transformers.js_es6/src/fakeurl.js",
                "path": "../transformers.js_es6/src/fakepath.js",
                "onnxruntime-node": "https://cdnjs.cloudflare.com/ajax/libs/onnxruntime-web/1.14.0/ort.es6.min.js"
              }
            }
        </script>            
        <script type="module">
            import * as index from "./index.mjs";
            import * as transformers from 'transformers';
            window.index = index;
            /** @type {HTMLFormElement} */
            const form = document.querySelector("#semanticHighlightForm");
            form.onsubmit = event => {
                semanticHighlight();
                event.preventDefault();
            }
            // For quick testing in f12/devtools like + debugging:
            // const tensor = new Tensor("float32", [1, 2, 3, 4], [2, 2]);
            Object.assign(window, {
                ...index,
                ...transformers,
                form
            });
        </script>
    </body>
</html>

Not 100% complete:

• work out the fake fs/url/path
• No fallback any longer for onnxruntime-node using onnxruntime-node if onnxruntime-node isn't installed

Just putting it out here; maybe you want to work it out more and share ideas to improve?

[josephrocca]

Okay, thanks, I can make do with a script style import for now.

Any idea why AutoTokenizer is not being exposed as a global?

[xenova]

But it doesn't seem to export anything. I might be making a mistake here, but if not: Woudl it be possible to get a module-based js file for the browser?

I was able to get it working in a slighly hacky way:

(async () => {
  // Import into global score
  await import("https://cdn.jsdelivr.net/npm/@xenova/transformers@1.4.2/dist/transformers.min.js");

  let url = 'https://huggingface.co/Xenova/transformers.js/resolve/main/quantized/gpt2/causal-lm-with-past/';
  let tokenizer = await AutoTokenizer.from_pretrained(url);

  let tokens = await tokenizer('I love Transformers.js!');
  console.log(tokens);
  
})();

(see jsfiddle demo here)

I think the import isn't working from the CDN because the original uses CommonJS imports/exports.

---

(Also, I noticed that AutoModel, AutoModelForCausalLM, etc. are added to the global scope when I do the above await import(...), which makes sense, but AutoTokenizer isn't added?)

Okay, thanks, I can make do with a script style import for now.

Any idea why AutoTokenizer is not being exposed as a global?

They should be 👀 (see above demo)

---

Also, as an aside, can I suggest using a versioned URL in the readme? Or something like:

https://cdn.jsdelivr.net/npm/@xenova/transformers@X.Y.Z/dist/transformers.min.js

With a note telling them to replace X.Y.Z with the latest version. This allows you to make breaking changes in the future without breaking a bunch of sites. Often newbie devs don't realise that they have to swap for a versioned URL, and this can lead to "web rot" where old webpages eventuallly become broken or buggy.

I do agree with this though... The library is quite experimental right now, and breaking changes (when upgrading to v2.0.0) will cause issues to apps that import in that way.

[josephrocca]

They should be (see above demo)

Ahh, I see what I did now. I executed this in the console:

let { AutoTokenizer } = await import("https://cdn.jsdelivr.net/npm/@xenova/transformers@1.4.2/dist/transformers.min.js");

and it didn't work, so then I tried this:

await import("https://cdn.jsdelivr.net/npm/@xenova/transformers@1.4.2/dist/transformers.min.js");
console.log(AutoTokenizer);

and it logged undefined, because of the fact that I declared AutoTokenizer with let above, overriding the global window.AutoTokenizer in this scope. 🤦 Sorry! Please feel free to close this if tracking the ESM support elsewhere.

[xenova]

No worries! :)

Sure, I'll close since ESM support is being tracked here.