# PySvelte **本库完全不提供任何支持。它按“原样”提供，仅作为解决某种问题的一种示例。如果不自行编写 `config.py` 文件，许多功能将无法使用。** 如果我们想理解神经网络，那么必须要有有效的方法，能够将这些模型内部的大量信息转化为易读的形式。通常，这会以数据可视化的形式呈现。 遗憾的是，深度学习研究与数据可视化之间的工作流存在着尴尬的错位。绝大多数深度学习研究都是使用 Python 进行的，各种成熟的库使得表达神经网络以及在配备硬件加速器的分布式环境中训练它们变得十分容易。与此同时，Web 标准（HTML/Javascript/CSS）为数据可视化提供了丰富的环境。尝试使用 Javascript 训练模型，或使用 Python 进行数据可视化，都会面临极大的劣势。人们自然希望为每项任务使用最佳的工具。但同时兼顾两个生态系统也可能极具挑战性。 这个库正是为了弥合这些生态系统之间的鸿沟而做出的尝试。它提倡一种极具主见的工作流，以指导如何将可视化整合到深度学习的研究流程中。我们的设计目标包括： * 让基于 Web 标准和 [Svelte](https://svelte.dev/) 创建定制化的、专门的可视化并在 Python 中使用它们变得轻而易举。 * 鼓励可视化的模块化与可复用性。 * 方便地将持久化可视化发布为独立的、可共享的页面。 * 允许对 Web 技术一无所知的研究人员使用其同事创建的可视化。 ## 设置说明 本库中的许多功能（例如将可视化发布到 GCS/S3/AZ bucket），需要您在 `config.py` 中编写几个针对您自身研究环境的特定函数。 ## 基本用法 基本思路是，我们在 `src/` 文件夹中创建一个 Svelte 组件，例如 `src/Hello.svelte`： ```

Hello {name}!

``` 该可视化会自动变为可用，您可以在 Python 中通过 `pysvelte.Hello()` 进行调用，这还包含针对参数名称的 Tab 自动补全功能。 我们现在可以按如下方式使用它。 ``` import pysvelte pysvelte.Hello(name="World") ``` （一些细节说明：(1) 无需直接运行任何 npm 构建过程即可使用；为了让没有 Web 专业背景的人也能轻松使用可视化，pysvelte 会在 Python 端自动为您触发必要的构建。(2) 参数名称是强制要求的，因为在编辑 svelte 组件时，基于参数顺序来映射参数名称会非常脆弱。(3) 除了具有明确 Javascript 对应物的对象外，NumPy 数组也可以传递给组件，并会在 Javascript 端作为 SciJs NdArrays 暴露出来。） 在 jupyter 或 colab notebook 中，如果可视化是单元格中最后计算的内容，它应该会自动显示。您也可以使用 `.show()` 来显示不是最后一行的内容： ``` pysvelte.Hello(name="Alice").show() pysvelte.Hello(name="Bob").show() ``` 一旦您配置了 `config.py`，您也应该能够使用 `.publish()` 来发布您的可视化并轻松分享它们。默认情况下，新发布的可视化也可以分享到 slack 上，以便让您的同事更容易发现它们，并在结对编程时方便分享。 ``` pysvelte.Hello(name="World").publish("~~/hello_world.html") ``` 当您使用组件时返回的对象是 `pysvelte.Html()` 对象，这些对象可以相加。这对于创建页面非常有用。 ``` html = pysvelte.Html("

My Hellos Page

") html += pysvelte.Hello(name="Alice") html += pysvelte.Hello(name="Bob") html.publish("~~/hellos.html") ``` 我们想强调的最后一个功能是，Svelte 组件可以拥有配套的 Python 文件，比如这个 `src/Hello.py`。它可以用于添加文档字符串（会显示在 Tab 自动补全中）、参数类型签名，在 Python 端对数据进行验证以便于调试，甚至在将数据传递给 Javascript 之前修改数据。 ``` def init(name: str): """A visualization which says hello to a given name.""" assert len(name) > 0, "Name can not be empty." assert name[0] == name[0].upper(), "Name must be capitalized." ``` ## 示例组件 `src/AttentionMulti.svelte` 包含了一个我们内部开发的组件示例，我们使用它来可视化 Transformer self-attention 模块的 attention 模式。您可以在我们最近的论文中[查看该组件（的变体）渲染后的版本](https://transformer-circuits.pub/2021/framework/2L_HP_normal.html)。 有关文档，请参阅 `src/AttentionMulti.py`。 ## 了解更多 在 Javascript 方面，需要了解的主要内容有： * Web 标准（SVG、Canvas、CSS grid 等） * [Svelte](https://svelte.dev/) * [ndarray](https://github.com/scijs/ndarray)（用于 numpy 数组的 JS 版本） [D3](https://d3js.org/) 也非常有帮助！ ### 许可证 Copyright 2021 Anthropic Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at ``` http://www.apache.org/licenses/LICENSE-2.0 ``` Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

标签：Python, SBOM分析, Svelte, 前端工程, 数据可视化, 无后门, 深度学习, 调试辅助, 逆向工具