复杂推理模型从服务器移植到Web浏览器的理论和实战

简介： 随着机器学习的应用面越来越广，能在浏览器中跑模型推理的Javascript框架引擎也越来越多了。在项目中，前端同学可能会找到一些跑在服务端的python算法模型，很想将其直接集成到自己的代码中，以Javascript语言在浏览器中运行。本文就基于pyodide框架，从理论和实战两个角度，帮助前端同学解决复杂模型的移植这一棘手问题。

作者 | 道仙
来源 | 阿里技术公众号

一 背景

随着机器学习的应用面越来越广，能在浏览器中跑模型推理的Javascript框架引擎也越来越多了。在项目中，前端同学可能会找到一些跑在服务端的python算法模型，很想将其直接集成到自己的代码中，以Javascript语言在浏览器中运行。

对于一部分简单的模型，推理的前处理、后处理比较容易，不涉及复杂的科学计算，碰到这种模型，最多做个模型格式转化，然后用推理框架直接跑就可以了，这种移植成本很低。

而很大一部分模型会涉及复杂的前处理、后处理，包括大量的矩阵运算、图像处理等Python代码。这种情况一般的思路就是用Javascript语言将Python代码手工翻译一遍，这么做的问题是费时费力还容易出错。

Pyodide作为浏览器中的科学计算框架，很好的解决了这个问题：浏览器中运行原生的Python代码进行前、后处理，大量numpy、scipy的矩阵、张量等计算无需翻译为Javascript，为移植节省了很多工作。本文就基于pyodide框架，从理论和实战两个角度，帮助前端同学解决复杂模型的移植这一棘手问题。

二 原理篇

Pyodide是个可以在浏览器中跑的WebAssembly（wasm）应用。它基于CPython的源代码进行了扩展，使用emscripten编译成为wasm，同时也把一大堆科学计算相关的pypi包也编译成了wasm，这样就能在浏览器中解释执行python语句进行科学计算了。所以pyodide也必然遵循wasm的各种约束。Pyodide在浏览器中的位置如下图所示：

1 wasm内存布局

这是wasm线性内存的布局：

Data数据段是从0x400开始的， Function Table表也在其中，起始地址为memoryBase（Emscripten中默认为1024，即0x400），STACKTOP为栈地址起始，堆地址起始为STACK_MAX。而我们实际更关心的是Javascript内存与wasm内存的互相访问。

2 Javascript与Python的互访

浏览器基于安全方面的考虑，防止wasm程序把浏览器搞崩溃，通过把wasm运行在一个沙箱化的执行环境中，禁止了wasm程序访问Javascript内存，而Javascript代码却可以访问wasm内存。因为wasm内存本质上是一个巨大的ArrayBuffer，接受Javascript的管理。我们称之为“单向内存访问”。

作为一个wasm格式的普通程序，pyodide被调用起来后，当然只能直接访问wasm内存。

为了实现互访，pyodide引入了proxy，类似于指针：在Javascript侧，通过一个PyProxy对象来引用python内存里的对象；在Python侧，通过一个JsProxy对象来引用Javascript内存里的对象。

在Javascript侧生成一个PyProxy对象࿱