bouzidanas/pynote-notebook-editor

查看全新的 [交互式面试编程准备系列](https://pynote-notebook.vercel.app/?open=coding-prep)！ # PyNote Notebook 编辑器 # [实时教程](https://pynote-notebook.vercel.app/?open=tutorial) | [GitHub](https://github.com/bouzidanas/pynote-notebook-editor) ## 什么是 PyNote？ **PyNote** 是一个无服务器、零配置的 Python notebook 环境，它使用 WebAssembly (Pyodide) 完全在您的 Web 浏览器中运行。它无需后端 kernel 或云基础设施，确保所有代码都在您的本地机器上执行，从而保障隐私和速度。它具有一个自定义的 UI Python 模块 (`pynote_ui`)，允许 Python 代码直接在 notebook 输出中渲染原生的交互式 Web 组件（如滑块、按钮和布局）以及高性能的可视化图表。 **主要特点** - **零配置：** 访问 [pynote-notebook.vercel.app](https://pynote-notebook.vercel.app/) 即可立即开始编写 Python。无需登录，无需账户，无需安装。 - **无服务器：** Python 通过 WebAssembly 在您的浏览器中运行。无需连接远程 kernel，也无需搭建（或付费）后端。 - **私密性：** 您的代码和数据永远不会离开您的机器。 - **沙盒化：** WebAssembly 为 Python 执行提供了天然的安全边界。代码在浏览器沙盒中的单独 worker 线程内运行，无法访问您的文件系统，也无法直接操作页面，这让打开不受信任的 notebook 变得不再那么令人担忧。 - **交互性：** 使用 `pynote_ui` 直接从 Python 构建滑块、开关、表单和布局。无需前端代码，且组件是实时对象：从 Python 设置属性，UI 就会原地更新，无需重新运行 cell。 - **响应式：** marimo 风格的响应式模式会跟踪各个 cell 依赖于哪些变量，并自动重新运行依赖的 cell。当您需要手动控制时，还提供另外三种执行模式（Sequential、Hybrid、Concurrent）。 - **可定制主题：** 颜色、字体、间距、边框、阴影，应有尽有。您的主题可以保存到 notebook 文件本身中，因此无论它走到哪里都会带上这套外观。 - **专为演示而生：** 具有演示模式、每个 cell 的代码可见性设置，以及分作用域样式（即同一标题下的所有元素共享主题组件）。 - **图表：** 基于 Observable Plot 构建的声明式绘图 API。图表会自动遵循 notebook 主题。 - **真正的代码编辑器：** 带有类型信息的自动补全、签名帮助、悬停提示、多光标编辑、查找和替换、行操作等。 - **WYSIWYG markdown 编辑器：** 以富文本方式 (Milkdown) 编辑 markdown cell，支持格式化工具栏、表格、题注，以及在光标处拆分 cell。 - **内置文件管理：** 用于浏览器内文件系统的 Files and Data 面板。可以直接从 Python 中上传、组织和读取文件。 - **绝不丢失：** 会话在标签页关闭和刷新后依然存在，并且撤销/重做功能也涵盖添加、移动和删除 cell 等结构性更改。 - **支持手机操作：** 响应式布局，带有移动端 cell 操作抽屉，方便在小屏幕上进行编辑。 - **在实践中学习：** 应用内置了作为 notebook 的交互式 [教程](https://pynote-notebook.vercel.app/?open=tutorial)。按 `Ctrl-\` 查看键盘快捷键。 ## 我认为 PyNote 的特别之处 1. **现代技术栈**（构建工具）： * **SolidJS**：用于响应式 javascript 框架（细粒度的响应性和高性能） * **Pyodide**：用于直接在浏览器中运行 Python 解释器和科学计算栈（NumPy、Pandas） * **DaisyUI**：用于基于 Tailwind CSS 的现代、无障碍且*可定制主题*的 UI 组件。 * **Tailwind CSS**：用于一致、响应式的样式和主题设置 * **CodeMirror**：用于健壮的、IDE 级别的代码编辑器 * **Milkdown**：用于强大的 WYSIWYG Markdown 编辑器 * **Observable Plot**：用于轻量、强大且声明式的图表库（非常适合 SolidJS） 2. **专为演示而生！** 这是最重要的一点。 PyNote 并不打算取代重型的计算环境。如果您要训练大型机器学习模型，您需要 GPU 和真正的服务器。 但 PyNote 旨在 ***演示*** 方面表现出色。UI 是使用 [daisyUI](https://daisyui.com/) 构建的，这是一个用于 Tailwind CSS 的组件库，它提供语义类名和 ***强大的主题系统***。这使我们开箱即用地获得了经过润色的一致组件，同时保持一切均可自定义。您可以为整个 notebook 调整以下内容： * 颜色（背景色、前景色、主色、次要颜色、强调色、H1-4 标题等）、字体和间距（行距、区块、标题、cell 等） * **分作用域样式**，即同一标题下的所有内容共享主题元素 目标是：让 notebook 看起来足够精美，以便发布、分享、演示，并用于博客、文档和文章中。当文件导出功能完成后，您将能够把 notebook 的精简版本保存为独立的小型应用，嵌入到网站、博客或文档中。此外还将提供其他导出选项，如 python 和 markdown。 3. **拥有许多很酷的功能：** * **Marimo 风格的响应式模式！** 计划在不久的将来增加更强大的响应性（正在测试中）。 * **另外 3 种执行模式！** Sequential、Hybrid、Concurrent * 主题是完全可定制的（或者在发布时将会如此），可以应用于整个应用、仅限当前会话，甚至可以存储到 notebook 元数据本身中，以便 notebook 随身携带其演示效果和外观。 * 演示模式 * 会话持久化。即使您关闭了标签页，也不会丢失进度。您可以设置应用主题、执行模式、代码可见性选项以及其他选项，仅应用于当前会话。 ## 设置与使用 要在本地运行该项目： 1. 克隆仓库：`git clone 2. 导航到项目目录：`cd pynote-notebook-editor` 3. 安装依赖：`npm install` 4. 启动开发服务器：`npm run dev` 5. 打开浏览器并访问 `http://localhost:5173` 即可查看 应用的运行！ ## 开源发布 当此应用准备好发布时，它将被开源。但目前仓库是公开的，如果您想体验一下，PyNote 已经 [上线](https://pynote-notebook.vercel.app/) 了！

标签：AI工具, Python, SOC Prime, Syscall, WebAssembly, Web开发, 交互式笔记本, 开发工具, 数据可视化, 数据科学, 无后门, 资源验证, 逆向工具