How to recompile JavaScript code targeting the browser to target non-browser environments?

[guest271314]

I've been working on a fork of https://github.com/diffusion-studio/vits-web for a few days now.

The relevant JavaScript code piper.js, here bundled with deno https://gist.github.com/guest271314/3ba6e158d06a92ea62b7957e46c118f8 appears to have been compiled by Emscripten.

I don't have the source code.

In piper.js there are references to XMLHttpRequest() and window.location.pathname which are not defined in a node or deno environment.

Can Emscripten accept code output by Emscripten and recompile to a non-browser target to remove occurrences of XMLHttpRequest(), e.g., by substituting fetch() and import.meta.url, so that the code can be run in a non-browser environment?

[sbc100]

There is no way to re-compile the JS code no.

However we have a way to take the wasm file and generate new JS for it. Is not very widely used so it might have some issues, but you can do emcc --post-link <mywasm>.wasm -o newjs.js. It will probably help if you know which -s settings were used to build the original so you can use the same ones.

[guest271314]

I think I found the origin of the code here rhasspy/piper#352 (comment), then following links here ken107/piper-browser-extension#2 (comment), and here rhasspy/piper#504 (comment).

So it appears possible to build this without onyx-runtimeweb.js, and without Emscripten, which would be ideal, for the ability to run the same .wasm code/file in the browser, in various JavaScript engines and runtimes, and using a WASM runtime.

I just need a semblance of a roadmap to do this without Emscripten or Rust (because I'm developing on Linux using a temporary file system so building Rust and installing crates is prohibitive due to over 1 GB needed for Rust toolchain).

This is what the Emscripten result looks like that I would prefer to substitute using WebAssembly.compile() or other WebAssembly object method to run the code. Any help, if in scope and possible here, will be helpful.

const piperPhonemizeWasm = new URL("./piper_phonemize.wasm", import.meta.url).href; 
const piperPhonemizeData = new URL("./piper_phonemize.data", import.meta.url).href; 

async function tts(config) {
  const input = JSON.stringify([
    {
      text: config.text.trim(),
    },
  ]);

  ort.env.wasm.numThreads = 2; // navigator.hardwareConcurrency;
  ort.env.wasm.wasmPaths = "./";
  const modelConfig = config.voiceId.json;
  const modelArrayBuffer = config.voiceId.arraybuffer;

  const phonemeIds = await new Promise(async (resolve) => {
    const module = await createPiperPhonemize({
      print: (data) => {
        resolve(JSON.parse(data).phoneme_ids);
      },
      printErr: (message) => {
        throw new Error(message);
      },
      locateFile: (url) => {
        if (url.endsWith(".wasm")) return piperPhonemizeWasm;
        if (url.endsWith(".data")) return piperPhonemizeData;
        return url;
      },
    });
    module.callMain([
      "-l",
      modelConfig.espeak.voice,
      "--input",
      input,
      "--espeak_data",
      "/espeak-ng-data",
    ]);
  });
  const sampleRate = modelConfig.audio.sample_rate;
  const noiseScale = modelConfig.inference.noise_scale;
  const lengthScale = modelConfig.inference.length_scale;
  const noiseW = modelConfig.inference.noise_w;
  const session = await ort.InferenceSession.create(modelArrayBuffer);
  const feeds = {
    input: new ort.Tensor("int64", phonemeIds, [1, phonemeIds.length]),
    input_lengths: new ort.Tensor("int64", [phonemeIds.length]),
    scales: new ort.Tensor("float32", [noiseScale, lengthScale, noiseW]),
  };
  if (Object.keys(modelConfig.speaker_id_map).length) {
    Object.assign(feeds, {
      sid: new ort.Tensor("int64", [0]),
    });
  }
  const {
    output: { data: pcm },
  } = await session.run(feeds);
  return pcm;
  /*
  return new Blob([pcm2wav(pcm, 1, sampleRate)], {
    type: "audio/x-wav",
  });
  */
}

[sbc100]

It would be much easier if you could limit yourself to JS engines such as Deno and Node and the Web, since then you can use the emscripten-generated JS code. If you really want to run your wasm file in standalone wasm engines then I would recommend instead using wasi-sdk, which is designed for that.

[sbc100]

If you are targetting JS engines then I highly recommend using the emscripten-generated loader code. Trying to write the loader code yourself can be a big project, depending on which APIs your module depends on.

[guest271314]

Looking at environment options https://emscripten.org/docs/tools_reference/settings_reference.html?highlight=environment would shell be the most appropriate to target generic JavaScript engine/runtime that can be run in d8, js, node, deno, bun, tjs`, and the browser?

I'll try this out in a bit. I don't have Emscripten on my machine right now and I'm already down to less than 500 MB of available space on the machine right now.

[guest271314]

@sbc100 I'm getting all kinds of errors trying to repoduce those build steps.

I did notice that on Chromium 128 for whatever reason the proof-of-concept page https://piper.wide.video/poc.html for the build steps is listing a .wasm file in Sources => Page. I am able to compile with WebAssembly.compile() though not sure which functions do what in the exports object.

piper_phonemize.wasm.zip

[sbc100]

As I said, trying to write the loader code yourself can be a big project, depending on which APIs your module depends on.

If you really want to go that route (as I say, not recommended) then step 1 would be to use use wasm-dis or wasm-objump to see what import the wasm module requires? You can then look at the JS library files in emscripten's src directory to see how emscripten would implement each of those JS imports and try to copy those or use them for inspiration.

Again better to use emcc --post-link -o myfile.js myfile.wasm to generated the JS and just use that.

[guest271314]

Ran out of space building Emscripten using a modified version of the linked build script. I'll keep trying until I figure something out. Thanks.

tar: emscripten/node_modules/no-case/LICENSE: Cannot write: No space left on device
tar: emscripten/node_modules/no-case/package.json: Cannot write: No space left on device
tar: emscripten/node_modules/no-case/README.md: Cannot write: No space left on device
tar: emscripten/node_modules/no-case/dist/index.js.map: Cannot write: No space left on device
tar: emscripten/node_modules/no-case/dist/index.js: Cannot write: No space left on device
tar: emscripten/node_modules/no-case/dist/index.d.ts: Cannot write: No space left on device
tar: emscripten/node_modules/no-case/dist/index.spec.js.map: Cannot write: No space left on device
# ...