如何将交互式 Jupyter 笔记本嵌入到 html 中？

Question

我正在尝试创建一个允许用户创建和共享 Jupyter 笔记本的 Web 应用程序。

目前，我已启动并运行 JupyterHub，并且能够为各个服务器生成新服务器。

但是，我不知道如何将 Jupyter 笔记本嵌入到 html 页面中。我试过 nbconvert，但这给了我一个笔记本的静态渲染。我需要的是一个用户可以编辑和运行的动态笔记本。

我计划将笔记本存储在 GitHub 中，并允许用户通过 Web 应用程序查看它们。

我在 Quantopian 网站上看到过类似的东西。 （例如：Quantopian notebook）。我如何在事物的前端实现类似的东西？

任何帮助将不胜感激！

Answer 1

要嵌入 Jupyter 环境，您可以考虑使用iframe。

• 请注意，当前的浏览器需要正确配置您的应用程序（您的自定义 Jupyter）的 Content Security Policy (CSP) 才能运行。
• 您可以在浏览器（例如 Chrome）中激活开发者控制台以检查可能出现的 CSP 错误。
• Github 中有两个问题（the one 和 the other），它们的响应向您展示了如何处理该配置。

要在 Github 中读取和存储笔记本，您可能需要检查其他项目，例如 mybinder 和 Everware，和/或修改源代码您的自定义 Jupyter。

• 您可以使用 mybinder 检查"cost estimation" example。 mybynder 配置为显示特定的 Github 存储库。它启动一个 docker 单用户 Jupyter 服务器，并在您的浏览器中显示一个交互式会话。还有其他示例here 和here。
• mybinder的源码在Github
• 我想你也可以考虑Everware project（目前处于测试阶段）。源代码在Github。

Answer 2

你不能。

• 用户要么将静态版本视为静态 html （您可以在任何提供静态站点主机的地方托管它），或
• 让用户直接访问 JupyterHub 服务。

这是可以做到的。 如果 Jupyter 的内核（例如 Python） 可以被 JavaScript 解释。 然后用户可以通过他们的网络浏览器评估代码。 但是 Jupyter 还没有提供这个功能。