如何将交互式Jupyter笔记本嵌入HTML页面？

Question

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

目前，我已经启动了JupyterHub，并能够为单独的服务器生成新的服务器实例。

但是，我不知道如何将Jupyter笔记本嵌入到HTML页面中。我已经尝试过nbconvert，但那只给我提供了笔记本的静态渲染。我需要的是用户可以编辑和运行的动态笔记本。

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

我曾在Quantopian网站上看到类似的东西。（例如：Quantopian笔记本）。如何在前端实现类似的功能呢？

非常感谢任何帮助！

- mintchip36

Answer 1

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

• 请注意，当前浏览器需要正确配置您的应用程序（您的自定义Jupyter）的内容安全策略（CSP）才能运行。
• 您可以在浏览器中激活开发人员控制台（例如，在Chrome中）以检查可能发生的CSP错误。
• 在Github中有两个问题（一个和另一个），它们的响应向您展示如何处理该配置。

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

• 您可以使用mybinder检查"成本估算"的示例。 mybynder已配置为显示特定的Github存储库。 它启动了一个docker单用户Jupyter服务器，并在浏览器中显示交互式会话。 还有其他示例这里和这里。
• mybinder的源代码位于Github
• 我认为您也可以考虑Everware项目（目前处于beta版）。 源代码在Github中。

- Jaime

---

mybinder启动一个“binder”实例，但我不确定如何将其嵌入到静态网页中，比如作为一个窗口。 - axolotl

Answer 2

不行。

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

这是可能的。 如果Jupyter的内核（例如Python） 可以由JavaScript解释。 然后用户可以通过他们的Web浏览器评估代码。 但是，Jupyter尚未提供此功能。

- weakish