javascript - 如何将交互式 Jupyter notebook 嵌入到 html 中？

Question

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

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

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

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

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

如有任何帮助，我们将不胜感激!

Answer 1

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

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

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

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