ailia.js : ブラウザ上で機械学習モデルを実行可能にするライブラリ

Kazuki Kyakuno
axinc
Published in
8 min readAug 23, 2023

ブラウザ上で機械学習モデルを推論することができるailia.jsのご紹介です。ailia.jsを使用することで、ブラウザ上で任意の機械学習モデルを実行可能です。

ailia.jsについて

ailia.jsはブラウザでONNXを推論するためのランタイムです。wasmを使用しており、JavaScriptからailiaの全てのAPIを使用可能です。

ailia meets web assembly

ailia.jsのデモ

下記のURLからデモを実行可能です。画像もしくはWEBカメラに対して、顔検出、手検出、物体検出を試すことが可能です。

ailia.jsによるブラウザでの顔検出

ailia.jsのAPI

ailia.jsのAPIの使用方法は下記のページを参照してください。

ailia.jsを読み込んだ後、ONNXをダウンロードしてインスタンスを作成し、run APIで推論を実行可能です。

import {Ailia} from './ailia.js';
import {readFileAsync, distinguishModelFiles, readImageData} from './demoUtils.js';

await Ailia.initialize();
let ailia = new Ailia();

modelfiles.addEventListener('change', async () => {
await loadModel();
myResult.innerText = '';
});

async function loadModel() {
if (modelFiles.files.length !== 2) {
return;
}

let {modelFile, weightsFile} = distinguishModelFiles(modelFiles.files);

if (modelFile === undefined) {
console.log('Error: could not find a model file with the extension .onnx.prototxt');
return;
}
if (weightsFile === undefined) {
console.log('Error: could not find a weights file with the extension .onnx');
return;
}

console.log(`model file: ${modelFile.name}`);
console.log(`weights file: ${weightsFile.name}`);

let [modelFileContents, weightsFileContents] = await Promise.all([
readFileAsync(modelFile),
readFileAsync(weightsFile)
]);

let loadStatus = ailia.loadModelAndWeights(modelFileContents, weightsFileContents);
if (loadStatus) {
console.log('model files loaded');
document.querySelector('button.myButton').removeAttribute("hidden");
}
}

function buttonClicked() {
return new Promise((resolve) =>
document.querySelector('.myButton').addEventListener('click', () => resolve())
);
}

await buttonClicked();
console.log('button clicked');

let inputPicturePath = 'testmnist.jpg';
let inputPicData = await readImageData(inputPicturePath);

let preprocessFactory = function (inputPictureData) {
let preprocessingFunc = function (inputBuffers) {
for (let y = 0; y<inputPictureData.height; ++y) {
const lineOffset = y * inputPictureData.width;
for (let x = 0; x<inputPictureData.width; ++x) {
let red = inputPictureData.data[(lineOffset + x) * 4];
inputBuffers.byIndex[0].buffer.Float32[lineOffset + x] = red - 128;
}
}
};
return preprocessingFunc;
};

let postprocessCb = function (outputBuffers) {
let result = [];
for (const floatValue of outputBuffers.byIndex[0].buffer.Float32) {
result.push(floatValue);
}
return result;
};


try {

let result = ailia.run(preprocessFactory(inputPicData), postprocessCb, [[1, 1, inputPicData.width, inputPicData.height]]);

for (const [index, resultItem] of Object.entries(result)) {
console.log(`prediction score of ${index}: ${resultItem}`);
}

} catch (e) {
console.log(e);
} finally {
ailia.destroy();
}

ailia.jsのビルド設定

ailia.jsはSIMD無効のailia_s.wasmと、SIMD有効のailia_simd_s.wasmの2バージョンでビルドしています。ailia.jsの中で、自動的にSIMDの有効・無効が切り替わります。

BlazeFaceの例だと、M2 MacとChromeで、SIMD無効の場合21ms、SIMD有効の場合は8msで推論可能です。

Windows、macOS、AndroidはSIMDが使用可能です。iOSは16.2の段階ではSIMDは使用できません。

ブラウザがSIMDに対応しているかどうかは、下記のコードで判定可能です。このコードはwebassembly-featureをベースに記述しています。

function simd(){
const buf = new Uint8Array([0,97,115,109,1,0,0,0,1,6,1,96,1,123,1,123,3,2,1,0,10,10,1,8,0,32,0,32,0,253,44,11]);
return WebAssembly.validate(buf);
}

ブラウザにおけるAI推論の応用例

ブラウザにおけるAI推論は、WebRTCなどのネットワークコミュニケーションにおける、カメラやマイクの前処理や後処理に利用されています。

具体的に、ビデオチャットによる背景切り抜きや、マイクのノイズ除去、アバターチャットにおけるVAD(Voice Activity Detection)などでブラウザでのAI推論が利用されています。

また、ブラウザベースの業務SaaSにおける、顔検知および顔認証、QRコード検知などでもAI推論は活用可能です。

ailia.jsの評価版

現在、ailia SDK 1.2.15に対応するailia.jsを個別に提供中です。ご興味あるお客様はax株式会社までご連絡ください。また、ailia.jsは、ailia SDK 1.2.16から、ailia SDKの標準パッケージに含まれる予定です。

ax株式会社はAIを実用化する会社として、クロスプラットフォームでGPUを使用した高速な推論を行うことができるailia SDKを開発しています。ax株式会社ではコンサルティングからモデル作成、SDKの提供、AIを利用したアプリ・システム開発、サポートまで、 AIに関するトータルソリューションを提供していますのでお気軽にお問い合わせください。

--

--

Kazuki Kyakuno
axinc
Editor for

CTO — ax Inc. , Managing Director — AXELL