[js_interop] Sample code to import a JS module (transformer.js) about sdk

[fvisticot]

I works !!

void main() async {
  try {
    final transformer = await importModule(transformers).toDart;
    final env = transformer.getProperty('env'.toJS) as JSObject;
    env.getProperty('allowLocalModels'.toJS);
    env.setProperty('allowLocalModels'.toJS, false.toJS);
    env.setProperty('useBrowserCache'.toJS, true.toJS);
    final pipe = await ((transformer.callMethod('pipeline'.toJS, 'sentiment-analysis'.toJS, 'Xenova/distilbert-base-uncased-finetuned-sst-2-english'.toJS)) as JSPromise<Callable>).toDart;
    final out = await (pipe.customCall('I like wine'.toJS) as JSPromise<JSAny>).toDart;
    print("RES: ${stringify(out)}");
  } catch (e) {
    print("Error: $e");
  }
  runApp(const MyApp());
}

extension type Callable._(JSObject _) implements JSObject {
@JS('_call')
external JSAny? customCall(JSAny? a);
}

@JS('JSON.stringify')
external String stringify(JSAny obj);

Debug service listening on ws://127.0.0.1:64705/8EYvmhS7W0s=/ws
[object Object]
Pipe ok
RES: [{"label":"POSITIVE","score":0.9996498823165894}]

[srujzs]

You can dynamically import the module use importModule in combination with callAsFunction to call the JS functions. For example (I'm assuming pipeline and pipe are JS functions):

import 'dart:js_interop';

const transformers = 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

void main() async {
  final pipeline = (await importModule(transformers).toDart) as JSFunction;
  final pipe = await (pipeline.callAsFunction(null, 'sentiment-analysis'.toJS) as JSPromise<JSFunction>).toDart;
  final out = await (pipe.callAsFunction(null, 'I like wine'.toJS) as JSPromise<JSAny?>).toDart;
}

[fvisticot]

I get this error: TypeError: Instance of 'LegacyJavaScriptObject': type 'LegacyJavaScriptObject' is not a subtype of type 'JavaScriptFunction'

From sourceCode: https://github.com/xenova/transformers.js/blob/main/src/pipelines.js
Pipeline extends a Callable

const transformers = 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
void main() async {
  try {
    final pipeline = (await importModule(transformers).toDart) as JSFunction;
    print("Pipeline: $pipeline");
    final pipe = await (pipeline.callAsFunction(null, 'sentiment-analysis'.toJS) as JSPromise<JSFunction>).toDart;
    final out = await (pipe.callAsFunction(null, 'I like wine'.toJS) as JSPromise<JSAny?>).toDart;
    print(out);
  } catch (e) {
    print(e);
  }
}

Callable:

export const Callable = /** @type {any} */ (class {
    /**
    * Creates a new instance of the Callable class.
    */
    constructor() {
        /**
         * Creates a closure that delegates to a private method '_call' with the given arguments.
         * @type {any}
         * @param {...any} args Zero or more arguments to pass to the '_call' method.
         * @returns {*} The result of calling the '_call' method.
         */
        let closure = function (...args) {
            return closure._call(...args)
        }
        return Object.setPrototypeOf(closure, new.target.prototype)
    }

    /**
     * This method should be implemented in subclasses to provide the
     * functionality of the callable object.
     *
     * @param {any[]} args
     * @throws {Error} If the subclass does not implement the `_call` method.
     */
    _call(...args) {
        throw Error('Must implement _call method in subclass')
    }
});

[srujzs]

Hmm, it looks like it isn't a JS function (hence the type error) and they use their own custom callable type instead, so we'd need JSObject. If _call is going to be called in the subclass eventually, we could just use that and avoid the () since we don't have an interop way yet to call arbitrary objects.

import 'dart:js_interop';

const transformers = 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

extension type Callable._(JSObject _) implements JSObject {
  @JS('_call')
  external JSAny? customCall(String arg);
}

void main() async {
    final pipeline = (await importModule(transformers).toDart) as Callable;
    final pipe = await (pipeline.customCall('sentiment-analysis') as JSPromise<Callable>).toDart;
    final out = await (pipe.customCall('I like wine') as JSPromise<JSAny?>).toDart;
}

[fvisticot]

Tx for your support !
It seems we are missing something...
I have continued to understand the source code and the pipeline is an (export) async function who is returning the right Pipeline regarding the task parameter (sentiment-analysis in our case).

I have updated the code to get a async function but I do not know how to call the method

Quick question: how do we know the import function with are importing with the importModule ? (the js file as multiple exports and we want to import the pipeline function)

try {
    final pipeline = ((await importModule(transformers).toDart) as JSPromise<JSFunction>).toDart;
    final pipe =  await <how to call pipeline function>('sentiment-analysis'.toJS) as Callable; 
    final out = await (pipe.customCall('I like wine'.toJS) as JSPromise<JSAny?>).toDart;
    print(out);
  } catch (e) {
    print(e);
  }

export async function pipeline(
    task,
    model = null,
    {
        quantized = true,
        progress_callback = null,
        config = null,
        cache_dir = null,
        local_files_only = false,
        revision = 'main',
    } = {}
) {
    // Helper method to construct pipeline

    // Apply aliases
    // @ts-ignore
    task = TASK_ALIASES[task] ?? task;

    // Get pipeline info
    const pipelineInfo = SUPPORTED_TASKS[task.split('_', 1)[0]];
    if (!pipelineInfo) {
        throw Error(`Unsupported pipeline: ${task}. Must be one of [${Object.keys(SUPPORTED_TASKS)}]`)
    }

    // Use model if specified, otherwise, use default
    if (!model) {
        model = pipelineInfo.default.model
        console.log(`No model specified. Using default model: "${model}".`);
    }

    const pretrainedOptions = {
        quantized,
        progress_callback,
        config,
        cache_dir,
        local_files_only,
        revision,
    }

    const classes = new Map([
        ['tokenizer', pipelineInfo.tokenizer],
        ['model', pipelineInfo.model],
        ['processor', pipelineInfo.processor],
    ]);

    // Load model, tokenizer, and processor (if they exist)
    const results = await loadItems(classes, model, pretrainedOptions);
    results.task = task;

    dispatchCallback(progress_callback, {
        'status': 'ready',
        'task': task,
        'model': model,
    });

    const pipelineClass = pipelineInfo.pipeline;
    return new pipelineClass(results);
}

[srujzs]

I have updated the code to get a async function but I do not know how to call the method

If pipeline is indeed a JS function (which it looks like it is), then you can just use callAsFunction like in the example above. callAsFunction lowers to something like <function>.call(...) which should work with JS functions. I'm confused on what the Callable class is for then if pipeline is a function. Maybe pipe is a Callable? That would be consistent with your latest Dart code.

Quick question: how do we know the import function with are importing with the importModule ? (the js file as multiple exports and we want to import the pipeline function)

Can you elaborate what you mean here? importModule calls the dynamic import function with the given module name.

[srujzs]

Cool! Looks like the result of pipeline was indeed a Callable. I'll go ahead and mark this as resolved.