使用Pyodide在浏览器中跑python
关于pyodide的详细介绍可参见官网：https://pyodide.org/en/stable/index.html
本文的目的是记录如何在浏览器中运行之前用python写的b样条曲线生成算法（算法可见：https://github.com/Larissa1990/bezier_and_bspline_generator ）
1.把.py文件打包为wheel
新建一个名为bsplineGenerator的文件夹，把bspline_generator.py文件放入该文件夹中。此外，在该文件夹中新建__init__.py文件，代码如下：
from .bspline_generator import generateBspline
在bsplineGenerator文件夹外，新建一个名为setup.py的文件，代码如下：
from setuptools import setup,find_packages setup( name="bsplineGenerator", version="0.0.1", description="generate a bspline curve via control points", author="larissa", packages=find_packages(), install_requires=[ 'numpy' ] )
确保已经安装有wheel后，在cmd中输入如下命令：
python setup.py sdist bdist_wheel
会发现在当前文件夹下，生成了build和dist两个文件夹，其中dist中包含两个文件：
- bsplineGenerator-0.0.1-py3-none-any.whl
- bsplineGenerator-0.0.1.tar.gz
使用pip安装这个whl就可以了，即：
pip install dist/bsplineGenerator-0.0.1-py3-none-any.whl
在VS CODE中“from bsplineGenerator import generateBspline”测试一下。
2.把.whl文件发布在本地服务器上
新建个名为wheels的文件夹，然后把bsplineGenerator-0.0.1-py3-none-any.whl粘贴到该文件夹下。在wheels内新建名为cors_server.py的文件，代码如下：
from http.server import SimpleHTTPRequestHandler, HTTPServer from socketserver import ThreadingMixIn class CORSRequestHandler(SimpleHTTPRequestHandler): def end_headers(self): self.send_header('Access-Control-Allow-Origin', '*') self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS') self.send_header('Access-Control-Allow-Headers', 'x-api-key, Content-Type') super().end_headers() class ThreadedHTTPServer(ThreadingMixIn, HTTPServer): """Handle requests in a separate thread.""" def run(server_class=ThreadedHTTPServer, handler_class=CORSRequestHandler, port=8000): server_address = ('', port) httpd = server_class(server_address, handler_class) print(f'Serving on port {port}') httpd.serve_forever() if __name__ == '__main__': run()
在cmd中运行以下命令：python cors_server.py
3.在ASP.NET CORE WEB中使用Pyodide加载.whl
新建一个ASP.NET CORE WEB项目，Index.cshtml代码如下：
@page @model IndexModel @{ ViewData["Title"] = "Home page"; } <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script> </head> <body> <p> Install package test! </p> <script> async function main(){ let pyodide=await loadPyodide(); await pyodide.loadPackage("micropip"); const micropip=pyodide.pyimport("micropip"); await micropip.install("http://localhost:8000/bsplineGenerator-0.0.1-py3-none-any.whl"); await pyodide.runPython(` from bsplineGenerator import generateBspline controlPoints=[[1.5, 0], [2, 1], [2.5, 0], [3, -1],[3.5,0],[4,1],[4.5,0]] x,y=generateBspline(controlPoints,3) print(x) `); } main(); </script> </body> </html>
调试项目，在新打开的浏览器中启动控制台(shift+ctrl+j)，如果显示浏览器安全问题，则点击空白处，并输入“thisisunsafe"。初次加载whl，时间会比较长。等它缓冲完了，就能看到在控制台输出值了。
Refs:
[1] https://blog.csdn.net/qq_37541097/article/details/136548480
[2] chatgpt
[3] 还有其他的博客园,CSDN文章
