简介：随着机器学习的应用变得越来越宽，越来越多的JavaScript框架引擎可以在浏览器中运行模型推理。在项目中，前端同学可能会发现服务器上运行的一些Python算法模型边。他们希望将它们直接集成到自己的代码中，并使用JavaScript语言在浏览器中运行。本文基于Pyodide框架。从理论和实际战斗的角度来看，它有助于前端学生解决复杂模型移植的困难问题。
随着机器学习的应用变得越来越宽，越来越多的JavaScript框架引擎可以在浏览器中运行模型。在项目中，前端同学可能会发现某些在服务器端运行的Python算法模型。他们希望将它们直接集成到自己的代码中，并使用JavaScript语言在浏览器中运行。
对于某些简单的模型，推理的前处理和后处理相对容易。它不涉及复杂的科学计算。遇到此模型时，它可以通过最大的模型格式进行转换，然后直接使用推理框架运行。
该模型的很大一部分将涉及复杂的正向处理和后处理，包括大量矩阵操作，图像处理和其他Python代码。在这种情况下，总体想法是通过JavaScript语言手动翻译Python代码。这样做的问题是，这是耗时和艰苦的时间。
作为浏览器中的科学计算框架，Pyodide解决了这个问题：在浏览器中运行的本机Python代码在浏览器中和之后进行处理，以及大量的Numpy，Scipy矩阵，张量等。，对于移植，许多工作。本文基于Pyodide框架。从理论和实际战斗的角度来看，它有助于前端学生解决复杂模型移植的困难问题。
Pyodide是可以在浏览器中运行的WebAssembly（WASM）应用程序。它根据CPYTHON的源代码进行扩展。它使用emscripten编译为WASM，还将许多科学计算PYPI软件包汇总到WASM中，以便可以在浏览器中在浏览器中解释python的陈述以进行科学计算。因此，pyodide还必须遵循WAS的各种约束。浏览器中的毕迪德（Pyodide）如下所示：
1 WASM内存布局
这是WASM线性内存的布局：
数据数据段从0x400开始，并且功能表也在其中。起始地址是MemoryBase（在Emscripten缺陷1024中，即0x400），stackTop是堆栈地址的开始，堆栈地址启动stack_max.，我们实际关心的是JavaScript Moreme的互操作性和WASM内存的互操作性。
2 JavaScript和Python的相互访问
根据安全考虑，浏览器可防止WASM程序崩溃浏览器。通过在基于沙箱的执行环境中运行WASM，禁止使用JavaScript内存，而JavaScript代码可以访问WASM内存。由于BBEMORM在JavaScript的管理下，wasm存储器本质上是一个巨大的数组。- 道路内存访问”。
作为WASM格式的常见程序，当当然可以将Pyodide称为后，您只能直接访问WASM内存。
为了实现相互访问，Pyodide引入了代理，类似于指针：在JavaScript侧，Python内存的对象由pyproxy对象引用；在Python侧，JSProxy对象引用了JavaScript内存中的对象。
在JavaScript的侧面生成型型物体：
在Python侧生成Jsproxy对象：
互操作性的类型转换分为三个级别：下面：
其中一些在这里列出。有关详细信息，您可以检查文档（请参阅文章的底部）。
JavaScript的模块也可以引入Python，以便Python可以直接调用模块的接口和方法。
这是对Pyodide缺少的PYPI包装的很好补充。
我们从空白页开始。请使用浏览器打开测试页面（请参阅测试页面上的文章底部）。
1个初始化python
为了促进操作的操作，请加载JS需要JS并以动态方法执行Python代码。开放浏览器控制台并依次运行以下句子：
此时，安装了Python和PIP，均在存储器文件系统中。我们可以检查python的安装位置：
请注意，此文件系统在内存中是虚拟的，并且刷新页面丢失了。浏览器缓存未清洁。
2加载PYPI软件包
在毕迪德初始化之后，标准模块随着Python系统的直接导入。第三党模块需要使用microPip.install（）：
下图显示了行业中通常用于编译为WASM的两种方法。
编译WASM软件包的方法可以参考官方手册。一般步骤是拉动的官方汇编基本图像，将setup.cfg文件放在模块目录中，以及一些黑客句子和配置（如果是这样，则说出了什么话），然后将目标指定为编译。编译成功部署时，请注意2分：
以下是nginx/openresty示例的自行构建wasm服务器的配置：
回到我们的推理实例，现在使用PIP安装模型来推理Numpy和枕头数据包并导入：
通过这种方式，已经引入了Python所需的OPENCV和ONXRUNTIME软件包。
3使用
通常，Python中的图片数量来自JS。在这里，我们模拟图片，然后使用OpenCV进行调整大小。如上所述，Pyodide的官方OPENCV尚未编译。如果所涉及的OPENCV方法称为其他PYPI软件包的替代方法，则是最好的：例如，CV.Resize Resizizizizizizizizizizizizizizize cv.resize。可以用枕头库的替换来代替（请注意，枕头的恢复速度比OpenCV的大小慢）；CV.阈值可以用numpy.where.ther.otherwise替换，您只能在命令中调用opencv.js。
周期原理：除了简单的数字和字符串类型外，其他类型需要直接通过pyodide.to_js（）传输。返回值的采集相似。除了简单的数字和字符串类型外，其他类型还需要直接通过xx.to_py（）转换获得。
然后检测其针对面具的大纲：
4推理引擎的使用
最后，加载模型和推断，用onnx.js。有关详细的语法，请参阅官方的onnx.js文档。其他JS版本也可以参考其文档。
通过上述操作，我们确保在Python语法范围内执行所有操作，以便更容易修改原始Python文件：用调用我们自定义的调用JS的方法替换了无法实现的函数；在原始pythoncall中替换推理的推理引擎的JS版本；最后，将一个小调用Python的胶水代码添加到JavaScript的主要程序框架中以完成。
5安装一个长期的存储文件系统
有时我们需要保留一些数据以获取一些数据。我们可以使用Pyodide提供的持久文件系统（实际上由Emscripten提供），并查看手册（在文章的底部）。
该文件很长。
运行结果如下：
当然，上述陈述可以在Python的Python中运行。
持久文件系统有很多用途。例如，我们可以帮助我们在多线程（WebWorker）之间共享大数据；您可以将模型文件长时间存储到文件系统中，而无需每次通过网络加载。
6节轮袋
单个Python文件不需要打包。它直接用作巨大的字符串，并将其交给pyodide.runpythonasync（）运行。当有多个python文件时，我们可以将这些Python文件放入普通的车轮软件包中，将其部署到WebServer，然后直接安装Wheel Package与MicroPIP：
请注意，即使是一个空文件，您也需要拥有__init__.py文件。
目前，毕迪德（Pyodide）有以下缺陷：
尽管上面有各种各样的缺陷，但由于对1：1的代码移植效率和逻辑的高度可靠性保证，我们仍然可以将此方法应用于各种业务场景，以促进机器学习技术的应用到促进机器学习技术的应用。
作者|道克斯来源|阿里技术公共帐户