如何將交互式Jupyter筆記本嵌入到html中？

Question

我正在嘗試創建一個允許用戶創建和共享Jupyter筆記本的Web應用程序。

目前，我有JupyterHub啓動並運行，並能夠爲單個服務器產生新的服務器。

但是，我不知道如何將Jupyter筆記本嵌入到html頁面中。我試過nbconvert，但是這給了我一個靜態的noteboo渲染。我需要的是一個用戶可以編輯和運行的動態筆記本。

我打算將筆記本存儲在GitHub中，並允許用戶通過Web應用程序查看它們。

我在網站Quantopian上看到類似的東西。 （例如：Quantopian notebook）。我如何在事物的前端實現與此類似的東西？

任何幫助將不勝感激！

Answer 1

你不能。

• 無論是用戶瀏覽靜態版本靜態HTML （可以存放在任何地方提供了一個靜態的網站主機），或
• 直接JupyterHub服務讓用戶訪問。

這可以做到。 如果Jupyter（例如Python） 的內核可以被JavaScript解釋。 然後用戶可以通過他們的網絡瀏覽器評估代碼。 但Jupyter尚未提供此功能。

Answer 2

要嵌入Jupyter環境，你可以考慮使用一個iframe。

• 請注意，當前瀏覽器需要正確配置應用程序（您的自定義Jupter）的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。