Wasm을 npm 패키지에 묶는 방법

개시하다

지금까지WebWorkder로 각종 기계 학습 모형을 시작하는 npm 포장제작됐지만최근엔TensorflowLite(TFTLite)의모델을옮기는일도많아졌다.공식Tensorflowjs에서도 TFTLite의 모델알파 버전을 개발하고 있지만 현재는 TFTLite를 WebAssiembly(wasm)의 형식으로 번역하여 조작할 필요가 있다고 생각합니다TFT의wasm화.또 OpenCV와ffmpeg를wasm로 컴파일해 사용하는 예도 늘었다.
이런wasm을 포함하는 npm 패키지를 제공하려면 npm install 이후 이wasm 파일을 복사하는 등 추가 작업을 해야 하기 때문에 번거롭습니다.이전 보도에서도 같은 과제의식WebWorker과 tensorflowjs의 모형을 묶는 방법을 소개했지만, 이 글에서wasm 파일을 묶는 방법을 소개하고 싶다.

전제 조건

이번에는 홈페이지 5 시스템을 전제로4 과는 안 해봤어요.
이번에 묶은wasm은 오픈cv의wasm입니다.TFTLite의wasm은 작동 방법은 같지만 모델 파일을 처리해야 하기 때문에 초점에서 멀어지기 때문에 이번에는 피했다.
opencv의wasm이emscripten에서 생성되었습니다.wasm의 생성 방법은 오픈cv의 공식을 확인하세요.

npm 패키지 만들기

우선emscripten에서 생성된wasm 파일과 js 파일[1]을 npm 패키지의 경로에 설정하십시오.
여기에 리소스라는 폴더 밑에 놓으십시오.또한 아래의 예는simd판도 만들었다.
다음 모델 파일을 묶는 규칙입니다.config.js로 설정합니다.
웹팩5부터 url-loader와file-loader가 필요 없고 설정이 간단해졌습니다.
가장 좋은 것은wasm을 asset/inline로 하는 것이다.

$ ls resources/
custom_opencv-simd.js  custom_opencv-simd.wasm  custom_opencv.js  custom_opencv.wasm

npm 패키지의 코드는 다음과 같다.

        rules: [
            { test: [/\.ts$/], loader: "ts-loader" },
            { test: /\.wasm$/, type: "asset/inline" },
        ],

(1)에서 wasm 파일을 가져왔습니다.
(2) (2')로 js 파일을 가져옵니다.
(3)wasm의 데이터를 파일로 읽기 (3').
(4) (4')에서 실례wasm.
그게 다야.방법을 알면 간단해.

npm 패키지로 응용 프로그램 만들기

일반적으로만 사용하면 포장을 가져와 new로 사용할 수 있습니다.

import * as tf from '@tensorflow/tfjs';

import opencvWasm from "../resources/custom_opencv.wasm";           // <------ (1)
import opencvWasmSimd from "../resources/custom_opencv-simd.wasm";  // <------ (1)


export class CustomOpenCV {
    opencvLoaded = false;
    wasm: Wasm | null = null;

    init = async (useSimd: boolean) => {
        const browserType = getBrowserType();
        if (useSimd && browserType !== BrowserType.SAFARI) {
            const modSimd = require("../resources/custom_opencv-simd.js"); // <------ (2)
            const b = Buffer.from(opencvWasmSimd.split(",")[1], "base64"); // <------ (3)
            this.wasm = await modSimd({ wasmBinary: b });                  // <------ (4)
        } else {
            const mod = require("../resources/custom_opencv.js");          // <------ (2')
            const b = Buffer.from(opencvWasm.split(",")[1], "base64");     // <------ (3')
            this.wasm = await mod({ wasmBinary: b });                      // <------ (4')
        }
    };

    predict = async (targetCanvas: HTMLCanvasElement, th1: number, th2: number, apertureSize: number, l2gradient: boolean) => {
        <snip>
    };
}

창고.

여기에 기재된 내용은 아래 창고에 보관한다.
https://github.com/w-okada/bundle-wasm
Readme에 따라 명령을 실행하십시오.
코드량도 적어 10분 정도 이동하면서 이해할 수 있다.

최후

여기까지wasm의 묶음 방법을 소개했다.
tensorflowjs(wasm backend)와ffmpeg.wasm 등에서wasm 파일은 CDN에서 다운로드할 수 있다.
어떤 방법이 더 만족스러운지 사례라고 생각하고 각자 판단해 주세요.
각주
나는 js 파일을 어떻게 불러야 할지 모르겠지만, 공식적으로는ground 코드인 것 같다.https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm ↩︎