Theo's Typesafe Cult•2y ago

Issues Copying wasm files for Vercel/prod using create-t3-app

I'm trying to copy/load wasm files from a node package onnxruntime-web/dist using webpack so I can use it to inference a machine learning model I've trained. I t works locally but not on vercel. I haven't done any real web dev prior to 5 days ago. 1. Live App: https://my-t3-app-pi-three.vercel.app/ 2. Github: https://github.com/startwarfields/t3rra-viz The image is what the output is when I click the "Clicked Inference Component" on

npm run dev

npm run dev

My next.config.mjs has a webpack that tries to do this:

  webpack: (config, { isServer }) => {
    // Only perform the following steps for the client-side bundle
    if (!isServer) {
      // Copy the WebAssembly files from node_modules to the output directory
      const patterns = [
        {
          from: path.join('node_modules/onnxruntime-web/dist/*.wasm'),
          to: 'static/wasm',
        },
      ];

      config.plugins.push(new CopyWebpackPlugin({ patterns }));
    }

    return config;
  },

  webpack: (config, { isServer }) => {
    // Only perform the following steps for the client-side bundle
    if (!isServer) {
      // Copy the WebAssembly files from node_modules to the output directory
      const patterns = [
        {
          from: path.join('node_modules/onnxruntime-web/dist/*.wasm'),
          to: 'static/wasm',
        },
      ];

      config.plugins.push(new CopyWebpackPlugin({ patterns }));
    }

    return config;
  },

the full inference component is below for reference, but the line in question to load the wasm is:

    env.wasm.wasmPaths = process.env.NODE_ENV === 'production' ? 'static/wasm/' : '/';

    env.wasm.wasmPaths = process.env.NODE_ENV === 'production' ? 'static/wasm/' : '/';

import { InferenceSession, Tensor, env, } from 'onnxruntime-web';
import { useEffect } from 'react';

async function inference() {
  try {
    env.wasm.wasmPaths = process.env.NODE_ENV === 'production' ? 'static/wasm/' : '/';
    env.wasm.simd = true;
    const session = await InferenceSession.create('pipeline_xgboost.onnx');

    // prepare inputs. a tensor needs its corresponding TypedArray as data
    const input = Float32Array.from([5.5, 6.5, 4.3, 2.3]);
    const tensorA = new Tensor('float32', input, [1, 4]);

    const feeds: { [key: string]: Tensor } = { input: tensorA};


    const output  = await session.run(feeds)
    console.log(output.probabilities?.data);

  } catch (e) {
    console.error(`failed to inference ONNX model:.`, e);
  }
}
function InferenceComponent() {
  useEffect(() => {
      inference()
      .then(() => console.log('inference success'))
      .catch((error) => console.error(`failed to inference ONNX model`, error));

  }, []);

  return <div>Inference Component</div>;
}

export default InferenceComponent;

import { InferenceSession, Tensor, env, } from 'onnxruntime-web';
import { useEffect } from 'react';

async function inference() {
  try {
    env.wasm.wasmPaths = process.env.NODE_ENV === 'production' ? 'static/wasm/' : '/';
    env.wasm.simd = true;
    const session = await InferenceSession.create('pipeline_xgboost.onnx');

    // prepare inputs. a tensor needs its corresponding TypedArray as data
    const input = Float32Array.from([5.5, 6.5, 4.3, 2.3]);
    const tensorA = new Tensor('float32', input, [1, 4]);

    const feeds: { [key: string]: Tensor } = { input: tensorA};


    const output  = await session.run(feeds)
    console.log(output.probabilities?.data);

  } catch (e) {
    console.error(`failed to inference ONNX model:.`, e);
  }
}
function InferenceComponent() {
  useEffect(() => {
      inference()
      .then(() => console.log('inference success'))
      .catch((error) => console.error(`failed to inference ONNX model`, error));

  }, []);

  return <div>Inference Component</div>;
}

export default InferenceComponent;

startwarfields test app

Test Bench for Learning web development

GitHub

GitHub - startwarfields/t3rra-viz: let me cook

let me cook. Contribute to startwarfields/t3rra-viz development by creating an account on GitHub.

5 Replies

orangeslicesOP•2y ago

The production error Im getting is that it's not finding the wasm files

orangeslicesOP•2y ago

Possible Solution? https://discord.com/channels/966627436387266600/966629731086774302/1111183959326466078

nasso•2y ago

for non subs: https://github.com/vercel/next.js/issues/29362#issuecomment-971377869

GitHub

Rust WebAssembly module in an ES module wrapper from wasm-pack fail...

What version of Next.js are you using? 11.1.2 What version of Node.js are you using? 14.17.6 What browser are you using? Firefox, Chrome What operating system are you using? macOS How are you deplo...

orangeslicesOP•2y ago

Im finally able to continue this, ill see if the link is the solution I figured it out! It was actually a pathing issue The following code

  webpack: (config, { isServer }) => {
    // Only perform the following steps for the client-side bundle
    if (!isServer) {
      // Copy the WebAssembly files from node_modules to the output directory
      const patterns = [
        {
          from: path.join('node_modules/onnxruntime-web/dist/*.wasm'),
          to: 'static/wasm',
        },
      ];

      config.plugins.push(new CopyWebpackPlugin({ patterns }));
    }

    return config;
  },

  webpack: (config, { isServer }) => {
    // Only perform the following steps for the client-side bundle
    if (!isServer) {
      // Copy the WebAssembly files from node_modules to the output directory
      const patterns = [
        {
          from: path.join('node_modules/onnxruntime-web/dist/*.wasm'),
          to: 'static/wasm',
        },
      ];

      config.plugins.push(new CopyWebpackPlugin({ patterns }));
    }

    return config;
  },

Put the wasm assets in this directory

_next/static/wasm/onnxruntime-web/dist/

_next/static/wasm/onnxruntime-web/dist/

I checked Vercel's deployment logs to find the location of the files

orangeslicesOP•2y ago

https://t3rra-viz-startwarfields.vercel.app/ mission accomplished 😎

startwarfields test app

Test Bench for Learning web development

Gaming

Programming

Issues Copying wasm files for Vercel/prod using create-t3-app