bergamot-translator/wasm
Jelmer 8d5f877596
More portable WASM demo (#437)
* Replace most of the wasm demo page with code from the firefox extension

This code should be more generic and copy/pastable into other projects. Maybe one day it will be an npm package?

* Fix Ukrainian model support

* Add quality estimation output

Automatically enabled when the model(s) support it

* Little "Translating…" indicator

* Don't make Safari fail on something tiny

* Rewire lots of async state to be able to predictably know when the translator is working or not

Previously so much was lazy loaded that it was not easy to catch lack of SIMD support. Now I can just enable the interface only after it has properly loaded.

* No need for a two-stage setup for the worker. Just promise to call `initialize()`!

* More (correct) types and comments for code

* Keyboard shortcuts for input area for bold, italic and underline.

Enough to demo mark-up translation

* Fix `delete()`

* Move javascript glue code into its own npm package

* Add nodejs support and test to package

* More stand-alone build command

…for now, not really used by anything I think

* Ignore build packages

* Use local filesystem for build so it is automatically cached

* fix overflow on demo page

But this might break the mobile demo? I'll have to check into that

* Bring back integrity check, except for NodeJS for now

* Make `build` part of `prepare` so we always make sure we build a complete package

* Move worker code into its own folder

This way I can mark it as a commonjs module which will help cause nodejs treat the files the same as WebWorkers do right now. Firefox doesn't implement `{type: 'module'}` yet for WebWorkers.

* Add README

* Fix paths

* Add npm publish automation

* Make sure webpack ignores node compatibility code

* Add missing webpack:ignore around a worker

* Default to getting models from S3

* Separate "loading" and "translating" indicators

* Bump npm package version

* Add credits

* Don't block on the worker loading

* Not just Mozilla, but Bergamot!

* Make individual translation requests cancelable

* Swap button turns vertically when in skyscraper mode

* Make it easier to debug errors from inside the worker

* Don't bork on deleting a failed worker

* Don't bork on calling translate() with a failed worker

* Handle compilation error with more grace

* `contenteditable=true` seems to work better with some browser extensions

Looking at you, Vimium!

* Clean up abort promise

* Bump npm package version

* Remove `workerUrl` option in favour of better webpack support

With that option it was hard for Webpack to figure out dependencies, and it did not enter my worker script for rewriting. With the hardcoded url it does, and with a bit of `new webpack.DefinePlugin({'typeof self': JSON.stringify('object')}),` we can have webpack remove node-specific code on build!

* Bump version

Minor API change hehe

Co-authored-by: Nikolay Bogoychev <nheart@gmail.com>
2023-01-18 19:41:39 +00:00
..
bindings JS: Using supervised QE models for available language pairs (#378) 2022-03-15 15:55:28 +01:00
module More portable WASM demo (#437) 2023-01-18 19:41:39 +00:00
test_page More portable WASM demo (#437) 2023-01-18 19:41:39 +00:00
CMakeLists.txt Upgrade emsdk to 3.1.8 (#414) 2022-04-20 00:39:32 +01:00
import-gemm-module.js JS/WASM: Re-enable importing optimized gemm module for (#336) 2022-02-07 16:55:31 +01:00
node-test.js Expand the node-test.js example code with documentation (#434) 2023-01-18 19:09:47 +00:00
patch-artifacts-enable-wormhole.sh Improved wasm scripts and README (#128) 2021-05-04 10:18:45 +01:00
patch-artifacts-import-gemm-module.sh Import optimized gemm implementation (when available) for wasm target (#265) 2021-11-17 09:18:55 +01:00
project_version.js.in Modified wasm cmake file to include version information in built artifacts 2021-05-17 19:34:58 +02:00
README.md Expand the node-test.js example code with documentation (#434) 2023-01-18 19:09:47 +00:00

Using Bergamot Translator in JavaScript

All the instructions below are meant to run from the current directory.

Using JS APIs

See node-test.js for an annotated example of how to use the WASM module. Most of the code from it can also be used in a browser context.

Alternatively refer to the file test_page/js/worker.js that demonstrates how to use the bergamot translator in JavaScript via a <script> tag.

Demo

  • Download bergamot model files required for translation

    Use following instructions to download model files (make sure that git-lfs is installed and initialized before running these instructions):

    cd test_page
    git clone --depth 1 --branch main --single-branch https://github.com/mozilla/firefox-translations-models/
    mkdir models
    cp -rf firefox-translations-models/registry.json models
    cp -rf firefox-translations-models/models/prod/* models
    cp -rf firefox-translations-models/models/dev/* models
    gunzip models/*/*
    
  • Start the test webserver (ensure you have the latest nodejs installed)

    cd test_page
    bash start_server.sh ../../build-wasm
    

    Provide the folder containing the wasm artifacts as the first argument of start_server.sh script (../../build-wasm in this case).

  • Open any of the browsers below

    • Firefox Nightly +87: make sure the following prefs are on (about:config)

      dom.postMessage.sharedArrayBuffer.bypassCOOP_COEP.insecure.enabled = true
      javascript.options.wasm_simd = true
      javascript.options.wasm_simd_wormhole = true
      
    • Chrome Canary +90: start with the following argument

      --js-flags="--experimental-wasm-simd"
      
  • Browse to the following page:

    http://localhost:80
    
  • Perform translations:

    • Choose the source and target languages using From and To dropdowns.
    • Type a sentence to be translated in the From textbox.
    • See the result in the To textbox.