transformers.js: Transformer.js Library Returning Error in Browser

Describe the bug A clear and concise description of what the bug is.

I am building a text to text generation app using the Transformer.js library from Hugging Face. However, when I run the app, I get the message “undefined” returned in my div element, and the following error message in my Google Chrome browser console:

transformers@2.7.0:34 2023-11-08 09:38:48.730500 [W:onnxruntime:, graph.cc:3490 CleanUnusedInitializersAndNodeArgs] Removing initializer '/decoder/block.2/layer.2/DenseReluDense/act/Constant_1_output_0'. It is not used by any node and should be removed from the model.

Running the app in Firefox, I get the source map error message below:

Source map error: Error: request failed with status 404
Resource URL: https://cdn.jsdelivr.net/npm/@xenova/transformers@2.7.0
Source Map URL: transformers.min.js.map

How to reproduce Steps or a minimal working example to reproduce the behavior

I am building with VSCode on a Windows 10 PC, and below is my reproducible code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Generation</title>
    <style>
        .text-class {
            text-align: center;
        }

        #text-output {
            border-width: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="text-class"><strong>Text Generating App</strong></h1>
    <form id="myForm" class="text-class">
        <input type="text" id="inputText">
        <button type="submit" id="submitButton">Submit</button>
    </form>
    <br><br>
    <div id="text-output"></div>
    <script type="module">
        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.7.0';

        let inputText = document.getElementById("inputText");
        let button = document.getElementById("submitButton");
        let outputText = document.getElementById("text-output");

        button.addEventListener("click", async (e) => {
            // prevent default form submission
            e.preventDefault();
            // specify task
            let generator = await pipeline('text2text-generation');

            let output = await generator(inputText.value, {
                max_new_tokens: 100,
              });

            // show result
            outputText.innerHTML = output.text;

        })
    </script>

    
</body>
</html>

Expected behavior A clear and concise description of what you expected to happen.

I expect the generated text to be displayed in the div element on the website. Instead, it is “undefined” that is being printed. The javascript code was copied directly from the Hugging Face website.

Logs/screenshots If applicable, add logs/screenshots to help explain your problem.

Environment

Transformers.js version:
Browser (if applicable):
Operating system (if applicable):
Other:

Additional context Add any other context about the problem here.

About this issue

Original URL
State: closed
Created 8 months ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Thanks man!

Ifeanyi55 on Nov 8, 2023

The important part is knowing that await pipeline(...) creates a completely new session, and allocates new memory for the model. So, you should only be running that function once… wherever it may be 😃

In your original version, you created a new pipeline on every click (not ideal).

xenova on Nov 8, 2023

One last question, please. Is this library production-ready?

That’s the goal! 😉 Fortunately, since our API is based on the python transformers library, you shouldn’t see massive unexpected changes.

Also, you can always choose to freeze the library at a certain version that works for you (e.g., how Supabase uses v2.5.0 for computing embeddings in edge functions).

xenova on Nov 8, 2023

Thanks, will make that adjustment to my code. Thanks for all your help man! Will knock on your door again if I have any future issues building serverless AI applications with transformer.js, if you don’t mind 😄

Ifeanyi55 on Nov 8, 2023

Perhaps I have maxed out the browser memory because it is no longer returning any response 😄. I will change to a smaller model. WebGPU support will be a cool upgrade to the library.

Ifeanyi55 on Nov 8, 2023