Workflow error help

Ask us anything
1

Hi all!

I’m trying to implement a workflow that depends on an external library. I used @raydeck 's awesome tool https://weweb-embed.statechange.ai/ and method to add the import statement on page load, and I have custom JS in a workflow action to call a function from the imported library.

Here’s where things get weird: the code I am trying to run works perfectly as expected in my VS Code live server. Here it is:

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';

// Create text generation pipeline
const generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');

// Define the prompt and list of messages
const prompt = "Tell me a funny joke."

// Generate text
const output = await generator(prompt, { max_new_tokens: 100 });
console.log(output);

When I try it in WeWeb though, my on page load workflow runs successfully but when I click the button that triggers the custom JS workflow, I get this error:

name: "SyntaxError"
stack: "SyntaxError: Unexpected token '<', ") at h (https://cdn.jsdelivr.net/npm/@xenova/transformers:100:6827) at async Promise.all (index 0) at async c (https://cdn.jsdelivr.net/npm/@xenova/transformers:82:1508) at async lt.from_pretrained (https://cdn.jsdelivr.net/npm/@xenova/transformers:82:44884) at async Promise.all (index 0) at async https://cdn.jsdelivr.net/npm/@xenova/transformers:76:22204 at async R (https://cdn.jsdelivr.net/npm/@xenova/transformers:76:21885) at async eval (eval at executeCode (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:370508), :2:19) at async executeCode (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:370502)"
message: "Unexpected token '<', "

Does anyone have an idea of what might be causing this error?

Thanks!
GD

2

I looked into this! You need to set two environment variables ( for transformers to properly download in this environment:

import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';
env.allowLocalFiles = false
env.useBrowserCache = false

// Create text generation pipeline
const generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');

//and away you go...

Note that the models take a while to download. My preference is to load the pipeline on startup, and set a loading variable in weweb to indicate whether the model is loaded up. Attach the generator to the window. Use the loading variable to decide whether to show a spinner or your AI-enhanced component via conditional rendering. Note that you can reference the generator (as wwLib.getFrontWindow().generator) from whatever workflow (e.g. a button press, form submission etc) you like, which makes implementing the model into your interaction much easier!

1 Like
3

Thanks for the reply! Yes, after much troubleshooting I did figure out that the environment variables were the issue and got it to work, thank you!

Excellent point re: loading, I was wondering how to handle that gracefully so thank you for explaining your strategy - it makes a ton of sense. To clarify, you mean you load the model on page load? And then how exactly do you get the confirmation that it’s finished loading? I imagine it’s via a response to await, but how do you access that? Sorry I know that’s a generic JS question rather than a WeWeb question but I’m still struggling to wrap my mind around async stuff

Thank you so much!