在浏览器中轻松运行Python程序

wufei123 2025-01-26 阅读:19 评论:0

微软开源的markitdown项目，将office文件转换为markdown格式，迅速成为github热门项目。但其python程序特性限制了非技术用户的易用性。本文介绍如何利用webassembly技术，结合pyodide在浏览器中直接运...

微软开源的markitdown项目，将office文件转换为markdown格式，迅速成为github热门项目。但其python程序特性限制了非技术用户的易用性。本文介绍如何利用webassembly技术，结合pyodide在浏览器中直接运行markitdown，解决这一问题。

Pyodide是一个将Cpython移植到WebAssembly/Emscripten的开源项目，支持所有Python语法，并允许使用micropip在浏览器中安装和管理Python包，包括许多带有C扩展的常用包（如regex、pyyaml、lxml、numpy、pandas等）。Pyodide还提供强大的JavaScript⟺Python外部函数接口，实现两种语言的无缝衔接。

在浏览器环境中运行MarkItDown面临两个主要挑战：文件传输和依赖安装。

挑战与解决方案：

文件传输：通过将用户选择的文件传递到Worker中的Python运行时解决。
依赖安装：由于中国大陆对PyPI访问的限制，需要寻找替代方案，例如使用自定义的PyPI镜像。

最终，我们成功构建了一个完全在浏览器中运行的MarkItDown工具，可在office file to markdown体验。

以下是在Worker中运行Python的核心代码：

// eslint-disable-next-line no-undef
importScripts('https://testingcf.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js')


async function loadPyodideAndPackages() {
  // eslint-disable-next-line no-undef
  const pyodide = await loadPyodide()
  globalThis.pyodide = pyodide

  await pyodide.loadPackage('micropip')

  const micropip = pyodide.pyimport('micropip')

  // micropip.set_index_urls([
  // 'https://pypi.your.domains/pypi/simple',  
  // ])

  await micropip.install('markitdown==0.0.1a2')
}

const pyodideReadyPromise = loadPyodideAndPackages()

globalThis.onmessage = async (event) => {
  await pyodideReadyPromise

  const file = event.data
  try {
    console.log('file', file)
    const startTime = Date.now()
    globalThis.pyodide.FS.writeFile(`/${file.filename}`, file.buffer)

    await globalThis.pyodide.runPythonAsync(`
from markitdown import MarkItDown

markitdown = MarkItDown()

result = markitdown.convert("/${file.filename}")
print(result.text_content)

with open("/${file.filename}.md", "w") as file:
  file.write(result.text_content)
`)
    globalThis.postMessage({
      filename: `${file.filename}.md`,
      content: globalThis.pyodide.FS.readFile(`/${file.filename}.md`, { encoding: 'utf8' }),
      time: Date.now() - startTime,
    })
  }
  catch (error) {
    globalThis.postMessage({ error: error.message || 'convert error', filename: file.filename })
  }
}

在浏览器中轻松运行Python程序