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

Question

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

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

但是，我不知道如何将Jupyter笔记本嵌入到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的源代码。

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

Answer 2

你不能。

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

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