后端数据可视化【免费下载链接】voilaVoilà turns Jupyter notebooks into standalone web applications项目地址https://gitcode.com/gh_mirrors/vo/voila点击查看免费下载Voilà 的核心能力是把 Jupyter Notebook 渲染成独立的 Web 应用而voila-dashboards/jupyterlab-preview则是它的 JupyterLab 前端扩展让你在不离开 JupyterLab 的情况下通过工具栏按钮、命令面板或 View 菜单在右侧分屏或新浏览器标签页中即时预览 Notebook 的 Voilà 渲染结果。本文以该扩展的官方文档packages/jupyterlab-preview/README.md为骨架结合仓库源码src/index.ts、src/preview.tsx、schema/plugin.json等讲解其安装方式、命令与设置项、后端联动路由以及打包分发机制读完即可在自己的 JupyterLab 环境中把它用起来也能理解其内部实现脉络。扩展是什么在 JupyterLab 内预览 Voilà 渲染官方文档对该扩展的定位只有一句话A JupyterLab preview extension for Voilà即一个为 Voilà 提供的 JupyterLab 预览扩展。它在项目根目录 README.md 中有更具体的描述Voilà provides a JupyterLab extension that displays a Voilà preview of your Notebook in a side-pane.也就是说你可以在 JupyterLab 中打开 Notebook随时把当前 Notebook 以 Voilà 的渲染形态显示在侧边/分屏面板里实现编辑-预览的无缝循环。预览面板本质上是一个加载了voila/render/notebook路径页面的 IFrame见下文源码分析渲染结果与独立部署的 Voilà 应用一致包括交互式 Widget 和各类 MIME 类型输出。前置条件与版本要求原文档声明的唯一前置条件是JupyterLab 1.0需要补充的是该条件是最低版本门槛。当前仓库中 packages/jupyterlab-preview/package.json 的version为2.3.11其dependencies指向jupyterlab/application^4.0.0、jupyterlab/notebook^4.0.0、jupyterlab/settingregistry^4.0.0等 JupyterLab 4.x 系列包也就是说当前版本实际面向 JupyterLab 4.x 构建。同时项目根目录 README.md 明确说明自 JupyterLab 3.0 起该扩展会在pip install voila之后自动安装无需手动操作。安装方式随 voila 自动安装推荐在 JupyterLab 3.0 及以上环境中安装 Voilà 本体即可获得该扩展pip install voila安装后扩展会被打包进 voila 的 Python 包中详见下文打包与分发一节JupyterLab 启动时即可识别。从源码 / npm 单独安装如果需要从源码安装或希望单独升级该扩展官方文档给出的命令是jupyter labextension install voila-dashboards/jupyterlab-preview项目维护者也把该扩展独立发布到 npm用途有二见 RELEASE.md让第三方 JupyterLab 扩展可以将其声明为依赖让希望从源码构建的用户自行安装。开发模式安装若要在源码级调试该扩展可参照 docs/contribute.md 的开发流程# 以开发模式安装 voila Python 包 python -m pip install -e . # 将本地开发版扩展链接到 JupyterLab jupyter labextension develop . --overwrite # 只构建 jupyterlab-preview 这个子包 jlpm run build --scope voila-dashboards/jupyterlab-preview # 也可以启动 watch 模式改动自动生效 jlpm run watchpackages/jupyterlab-preview/package.json 中提供了配套的 npm scripts例如build先tsc编译 TypeScript再构建 labextension、build:labextension、watch并行监听源码与扩展构建等。功能详解命令、按钮与预览面板扩展的插件入口在 packages/jupyterlab-preview/src/index.ts插件 ID 为voila-dashboards/jupyterlab-preview:pluginautoStart: true表示 JupyterLab 启动后自动激活。两个核心命令插件注册了两个命令CommandIDs见 src/index.ts命令 ID显示名称行为notebook:render-with-voilaRender Notebook with Voilà保存当前 Notebook 后以split-right分屏模式在右侧打开 Voilà 预览notebook:open-with-voilaOpen with Voilà in New Browser Tab保存当前 Notebook 后用window.open在新浏览器标签页打开 Voilà 渲染页两个命令在执行前都会先调用context.save()保存 Notebook见 src/index.ts确保预览看到的是磁盘上的最新内容。isEnabled()只在当前聚焦的 widget 正是 Notebook时允许执行。工具栏按钮插件通过VoilaRenderButton类为每个 Notebook 面板注入一个工具栏按钮见 src/index.ts按钮className为voilaRendertooltip为Render with Voilà图标voilaIcon来自扩展自带的 style/voila.svg经LabIcon封装见 src/icons.ts点击后执行notebook:render-with-voila命令插入位置在cellType按钮之后panel.toolbar.insertAfter(cellType, voilaRender, button)。这是最直接的预览入口打开 Notebook → 点击工具栏的 Voilà 图标 → 右侧分屏出现预览。预览面板VoilaPreview预览 widget 定义在 packages/jupyterlab-preview/src/preview.tsx 中名为VoilaPreview继承DocumentWidgetIFrame, INotebookModel内容载体一个IFrame其url由getVoilaUrl(context.path)生成见 src/preview.tsx移除 sandbox构造时会移除 iframe 的sandbox属性iframe.removeAttribute(sandbox)以保证预览页功能完整历史版本曾以allow-popups、allow-modals等方式逐步放宽 sandbox见 CHANGELOG.md 相关条目日志转发监听window.onmessage把预览页通过 postMessage 发送的debug/info/warn/error消息按级别转发到浏览器控制台见 src/preview.tsx方便调试预览页中的问题路径联动监听context.pathChangedNotebook 重命名/移动后自动更新 iframe URL刷新按钮工具栏提供reload按钮图标为refreshIcon点击后先保存 Notebook 再刷新 iframe见 src/preview.tsx与 CHANGELOG 中保存后再刷新预览的行为一致Render on Save 复选框预览面板工具栏还有一个复选框勾选后每次 Notebook 保存context.fileChanged都会自动刷新预览见 src/preview.tsx。设置项renderOnSave扩展的设置 Schema 定义在 packages/jupyterlab-preview/schema/plugin.json{ properties: { renderOnSave: { title: Render Preview on Save, description: Render the Voilà preview automatically after saving the notebook, default: false, type: boolean } }, additionalProperties: false, type: object }renderOnSave默认值为false。插件在启动时读取该设置并写入预览工厂的defaultRenderOnSave见 src/index.ts即它决定新打开的预览面板默认是否在保存时自动刷新而每个面板上的复选框可以单独覆盖该行为。命令面板与菜单集成扩展在可用时还会把两个命令加入命令面板分类为Notebook Operations见 src/index.ts在 JupyterLab 的View菜单中追加一组命令入口rank 1000见 src/index.ts。会话状态恢复插件创建了WidgetTrackerVoilaPreviewnamespacevoila-preview并结合ILayoutRestorer注册恢复逻辑见 src/index.ts重启 JupyterLab 后之前打开的 Voilà 预览面板会依据docmanager:open命令与Voila Preview工厂自动恢复。预览工厂注册VoilaPreviewFactory继承ABCWidgetFactory见 src/preview.tsx其注册参数为new VoilaPreviewFactory(getVoilaUrl, { name: Voila Preview, fileTypes: [notebook], modelName: notebook });getVoilaUrl的实现见 src/index.ts为function getVoilaUrl(path: string): string { const baseUrl PageConfig.getBaseUrl(); return ${baseUrl}voila/render/${path}; }即以baseUrl为前缀拼接voila/render/notebook相对路径。后端联动voila/render 路由预览 URL 中的voila/render/路径并非凭空存在它由 Voilà 后端路由提供独立 Tornado 应用模式下路由注册在 voila/app.pyurl_path_join(self.server_url, r/voila/render/(.*))指向TornadoVoilaHandler负责把传入的 notebook 路径交给VoilaConfiguration与模板渲染作为 Jupyter Server 扩展运行时voila/server_extension.py 注册了同样的(.*)通配路由。因此预览扩展本质上是JupyterLab 前端 →voila/render/pathHTTP 路由 → Voilà 渲染管线链条的入口。值得一提的是Voilà 自身渲染的页面会通过 voila/utils.py 中的disabled_extensions机制禁用voila-dashboards/jupyterlab-preview与jupyter/collaboration-extension——可以推断这是为了避免预览扩展这类面向 JupyterLab 的扩展在 Voilà 独立应用中重复加载。打包与分发预构建扩展与 npm 双通道packages/jupyterlab-preview/package.json 的jupyterlab字段揭示了它的分发方式jupyterlab: { extension: true, schemaDir: schema, outputDir: ../../voila/labextensions/jupyterlab-preview, discovery: { ... } }关键点是outputDir指向../../voila/labextensions/jupyterlab-preview——扩展以预构建prebuilt扩展形式构建进 voila Python 包内部这正是pip install voila后自动可用的底层原因。Voilà 在生成页面配置时会通过 voila/utils.py 的get_voila_labextensions_path()把标准 JupyterLablabextensions目录与 voila 专属的labextensions目录合并进搜索路径。构建该扩展的具体命令来自 package.json 的 scripts# 仅编译 TypeScript 到 lib/ jlpm run build:lib # 构建 labextension开发模式 jlpm run build:labextension:dev # 完整构建 jlpm run build常见使用路径小结安装pip install voilaJupyterLab 3.0 自动附带该扩展或jupyter labextension install voila-dashboards/jupyterlab-preview预览在 Notebook 工具栏点击 Voilà 图标或在命令面板/View 菜单中执行 Render Notebook with Voilà预览将分屏显示在右侧独立标签页执行 Open with Voilà in New Browser Tab 在新标签页打开渲染结果自动化在 JupyterLab 设置中开启renderOnSave或勾选预览面板上的 Render on Save 复选框实现保存即刷新调试观察浏览器控制台——预览页通过 postMessage 发送的日志会被扩展按级别转发显示。该扩展是 Voilà 与 JupyterLab 生态衔接的关键一环从安装到命令注册、从 IFrame 预览面板到voila/render后端路由、再到预构建打包分发整条链路都可以在本文列出的仓库源码中逐一对应验证。如果你想进一步了解 Voilà 独立应用的模板定制可继续阅读 docs/customize.md若想了解贡献与开发流程可参考 docs/contribute.md 与 RELEASE.md。赞分享后端数据可视化【免费下载链接】voilaVoilà turns Jupyter notebooks into standalone web applications项目地址https://gitcode.com/gh_mirrors/vo/voila点击查看免费下载相关推荐EDK II性能测试报告模板标准化测试报告格式完全指南EDK II性能测试报告模板标准化测试报告格式完全指南 EDK II作为UEFI和PI规范的现代化固件开发环境其性能测试报告标准化对于固件开发者和测试工程师固件操作系统驱动开发嵌入式AirLLM 低显存推理完整指南4GB 显卡如何跑通 70B 大模型AirLLM 低显存推理完整指南4GB 显卡如何跑通 70B 大模型 场景是这样的你刚看中一个 70B 参数的开源大模型想立刻上手试试可手里的显卡只有人工智能大模型模型推理服务本地部署微调LoRAJupyterLab 扩展开发完全指南从插件机制到预构建扩展的源码级解析JupyterLab 扩展开发完全指南从插件机制到预构建扩展的源码级解析 JupyterLab 是一个由核心应用对象与一组扩展构成的计算环境几乎所有功能前端后端数据科学开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
