5.4 · 代码块执行（Code Block Execution）

代码块执行（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/5.4-code-block-execution

翻译时间：2026-06-09T16:08:31.306Z

翻译模型：deepseek-chat

原文字符数：10879

项目：Open WebUI (open-webui)

---

代码块执行

相关源文件

以下文件为本 wiki 页面的生成上下文：

• src/lib/apis/index.ts
• src/lib/components/chat/ContentRenderer/FloatingButtons.svelte
• src/lib/components/chat/Messages/CodeBlock.svelte
• src/lib/components/chat/Messages/ContentRenderer.svelte
• src/lib/components/chat/Messages/Markdown.svelte
• src/lib/components/chat/Messages/Markdown/AlertRenderer.svelte
• src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
• src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
• src/lib/components/chat/PyodideFileNav.svelte
• src/lib/components/common/ToolCallDisplay.svelte
• src/lib/stores/index.ts
• src/lib/utils/marked/extension.ts
• src/lib/workers/pyodide.worker.ts
• src/routes/+layout.svelte

目的与范围

Open WebUI 中的代码块执行系统支持在聊天消息中交互式渲染和执行代码。它支持多种语言的语法高亮、通过 Pyodide 在浏览器内执行 Python、通过 Jupyter 在服务端执行 Python，以及 Mermaid 图表和 Vega/Vega-Lite 可视化的专用渲染。该系统在聊天界面内直接提供"笔记本式"体验，包括 Pyodide 的持久化虚拟文件系统。

来源：src/lib/components/chat/Messages/CodeBlock.svelte:1-47、src/routes/+layout.svelte:213-220、src/lib/workers/pyodide.worker.ts:49-63

---

组件架构

CodeBlock.svelte 组件是代码渲染和执行的主要编排器。当 Markdown 解析过程中遇到 code 令牌时，由 MarkdownTokens.svelte 组件调用。

CodeBlock 组件流程

graph TB
    MarkdownTokens["MarkdownTokens.svelte<br/>令牌处理"]
    CodeBlock["CodeBlock.svelte<br/>主组件"]

    subgraph "渲染路径"
        Syntax["语法高亮<br/>highlight.js"]
        Editor["CodeEditor.svelte<br/>可编辑模式"]
    end

    subgraph "执行路径"
        PyCheck["checkPythonCode()<br/>启发式检测"]
        PyExec["executePython()<br/>执行路由"]
        Jupyter["executeCode()<br/>Jupyter API 调用"]
        PyWorker["executePythonAsWorker()<br/>PyodideWorker"]
    end

    subgraph "可视化路径"
        Mermaid["renderMermaid()<br/>initMermaid()"]
        Vega["renderVegaVisualization()<br/>vega/vega-lite"]
        SVGPanZoom["SvgPanZoom.svelte<br/>交互式显示"]
    end

    subgraph "输出显示"
        Output["输出区域<br/>stdout/stderr/result"]
        Images["图像文件<br/>base64 PNG 提取"]
    end

    MarkdownTokens -->|"token.type === 'code'"| CodeBlock

    CodeBlock -->|"edit=false"| Syntax
    CodeBlock -->|"edit=true"| Editor

    CodeBlock -->|"lang=mermaid"| Mermaid
    CodeBlock -->|"lang=vega/vega-lite"| Vega

    Mermaid --> SVGPanZoom
    Vega --> SVGPanZoom

    CodeBlock -->|"lang=python/py"| PyCheck
    PyCheck -->|"用户点击运行"| PyExec

    PyExec -->|"$config.code.engine === 'jupyter'"| Jupyter
    PyExec -->|"默认引擎"| PyWorker

    Jupyter --> Output
    PyWorker --> Output
    Output --> Images

来源：src/lib/components/chat/Messages/CodeBlock.svelte:142-221、src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte:154-179、src/lib/components/chat/Messages/CodeBlock.svelte:331-363

---

执行模式选择

执行行为由 executePython 函数决定，该函数根据应用配置将代码路由到基于浏览器的 Pyodide Worker 或后端 Jupyter 内核。

执行决策流程

graph TD
    Start["代码块已渲染"]
    CheckFeature{"$config.code<br/>.engine"}
    CheckLang{"lang 属于<br/>[python, py, '']"}
    CheckPython["checkPythonCode()<br/>启发式分析"]

    ShowButton["显示运行按钮"]
    HideButton["不显示运行按钮"]

    ExecuteJupyter["executeCode()<br/>Jupyter API 调用"]
    ExecutePyodide["executePythonAsWorker()<br/>Pyodide Worker"]

    Start --> CheckLang
    CheckLang -->|"lang='python' 或 'py'"| ShowButton
    CheckLang -->|"lang=''"| CheckPython
    CheckLang -->|"其他"| HideButton

    CheckPython -->|"true"| ShowButton
    CheckPython -->|"false"| HideButton

    ShowButton -->|"用户点击运行"| CheckFeature

    CheckFeature -->|"jupyter"| ExecuteJupyter
    CheckFeature -->|"default/pyodide"| ExecutePyodide

当未提供语言标签时，checkPythonCode 函数使用启发式模式匹配来检测 Python 语法。它会搜索诸如 def 、elif 、import 和 lambda 等关键字。

来源：src/lib/components/chat/Messages/CodeBlock.svelte:107-140、src/lib/components/chat/Messages/CodeBlock.svelte:149-221

---

Pyodide Worker 实现

Pyodide 允许使用 WebAssembly 在浏览器沙箱中完全运行 Python 代码。Open WebUI 利用持久化的 Web Worker 来维护跨执行的虚拟文件系统（IDBFS）。

Pyodide Worker 生命周期

1. 初始化：在 +layout.svelte 中通过 getOrCreateWorker 创建 Worker，并存储在 pyodideWorker Svelte store 中以确保持久性。
2. 文件系统持久化：Worker 将 IDBFS 挂载到 /mnt，并创建 /mnt/uploads。它使用 syncfs 在启动时从 IndexedDB 加载数据，并在执行后保存数据。
3. 包检测：在执行之前，executePythonAsWorker 扫描代码中的常见导入（例如 numpy、pandas、matplotlib），并准备一个供 micropip 安装的包列表。
4. 执行：通过 postMessage 将代码发送到 pyodide.worker.ts。
5. Matplotlib 补丁：Worker 修补 matplotlib.pyplot.show，将图表捕获为 base64 编码的 PNG 字符串，然后打印到 stdout。

来源：src/routes/+layout.svelte:213-240、src/lib/workers/pyodide.worker.ts:27-74、src/lib/workers/pyodide.worker.ts:192-220、src/lib/components/chat/Messages/CodeBlock.svelte:223-246

包映射表

导入模式	Pyodide 包
import requests	requests
import numpy	numpy
import pandas	pandas
import matplotlib	matplotlib
import scikit-learn	scikit-learn
import beautifulsoup4	beautifulsoup4
import tiktoken	tiktoken

来源：src/lib/components/chat/Messages/CodeBlock.svelte:224-238、src/routes/+layout.svelte:228-238

---

文件系统管理

PyodideFileNav.svelte 组件提供了一个用户界面，用于管理存储在 Pyodide Worker 持久化文件系统中的文件。

文件系统数据流

graph LR
    UI["PyodideFileNav.svelte"]
    Store["pyodideWorker Store"]
    Worker["pyodide.worker.ts"]
    FS["Emscripten FS (IDBFS)"]

    UI -->|"sendWorkerMessage({type: 'fs:list'})"| Store
    Store -->|"postMessage"| Worker
    Worker -->|"FS.readdir()"| FS
    FS -->|"IndexedDB 同步"| Worker

导航器支持目录列表（fs:list）、文件读取（fs:read）、删除（fs:delete）和目录创建（fs:mkdir）。默认目录为 /mnt/uploads。

来源：src/lib/components/chat/PyodideFileNav.svelte:148-171、src/lib/workers/pyodide.worker.ts:123-172、src/lib/stores/index.ts:80

---

输出处理与图像提取

系统会自动检测并提取代码生成的图像（例如通过 Matplotlib 生成的图像）。

1. 检测：组件遍历 stdout 和 result 行。
2. 提取：如果某行以 data:image/png;base64 开头，则将其添加到 files 数组中。
3. 清理：从文本输出中移除 base64 字符串，以保持控制台整洁。
4. 渲染：提取的图像在代码块的输出区域中渲染。

来源：src/lib/components/chat/Messages/CodeBlock.svelte:158-211、src/lib/components/chat/Messages/CodeBlock.svelte:275-317

---

图表与可视化渲染

特殊的语言标签会触发专用的渲染引擎，而非标准的语法高亮。

支持的可视化引擎

• Mermaid：使用 renderMermaidDiagram 渲染流程图、时序图等。
• Vega / Vega-Lite：使用 renderVegaVisualization 渲染统计可视化。

所有渲染的图表都包裹在 SvgPanZoom.svelte 组件中，允许用户交互式地平移和缩放生成的 SVG 内容。

来源：src/lib/components/chat/Messages/CodeBlock.svelte:331-363、src/lib/components/chat/Messages/CodeBlock.svelte:425-429

---

UI 控件与编辑

CodeBlock 组件提供了一个用于管理代码的工具栏。

功能	代码实体	描述
折叠	collapseCodeBlock	切换代码内容的可见性。
运行	executePython	触发 Python 执行（对 python/py 代码块可见）。
复制	copyCode	使用 copyToClipboard 将代码复制到剪贴板。
编辑	CodeEditor.svelte	提供一个文本区域，用于直接在聊天中修改代码。
保存	saveCode	持久化编辑后的代码并触发 onSave 回调。

来源：src/lib/components/chat/Messages/CodeBlock.svelte:79-105、src/lib/components/chat/Messages/CodeBlock.svelte:526-537

---

与 Markdown 管道的集成

MarkdownTokens.svelte 组件充当自然语言响应与代码执行空间之间的桥梁。

graph TD
    Response["AI 响应文本"]
    Marked["marked.lexer()"]
    Tokens["Markdown 令牌"]
    CodeToken["令牌 (type: 'code')"]
    CodeBlockComp["CodeBlock.svelte"]

    Response --> Marked
    Marked --> Tokens
    Tokens -->|"迭代"| CodeToken
    CodeToken -->|"渲染"| CodeBlockComp

来源：src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte:154-179、src/lib/components/chat/Messages/Markdown.svelte:62-71