web-dev-qa-db-ja.com

インタラクティブなJupyterノートブックをHTMLに埋め込むにはどうすればよいですか？

ユーザーがJupyterノートブックを作成および共有できるWebアプリケーションを作成しようとしています。

現在、私はJupyterHubを稼働させており、個々のサーバーに対して新しいサーバーを生成することができます。

ただし、JupyterノートブックをHTMLページに埋め込む方法がわかりません。私はnbconvertを試しましたが、それは私にnotebooの静的なレンダリングを与えます。ユーザーが編集して実行できる動的なノートブックが必要です。

ノートブックをGitHubに保存し、ユーザーがWebアプリケーションを通じてノートブックを表示できるようにする予定です。

私はこれに似たものをウェブサイトQuantopianで見ました。 （例： Quantopian notebook ）。フロントエンド側でこれに似たものをどのように達成できますか？

どんな助けでも大歓迎です！

javascripthtmlfrontendweb-frontend
12
mintchip36

Jupyter環境を組み込むには、iframeの使用を検討してください。

  • 現在のブラウザーを実行するには、アプリケーション（カスタムJupyter）の コンテンツセキュリティポリシー（CSP） を正しく構成する必要があることに注意してください。
  • ブラウザー（Chromeなど）で開発者コンソールをアクティブにして、発生する可能性のあるCSPエラーを確認できます。
  • Githubには2つの問題（ 一方 および 他方 ）があり、その応答はその構成の処理方法を示しています。

ノートブックをGithubに読み込んで保存するには、おそらく-などの他のプロジェクトをチェックする必要があります mybinder および Everware 、および/またはカスタムJupyterのソースコードを変更します。

  • Mybinderを使用して "コスト見積もり"の例 を確認できます。 mybynderは、特定のGithubリポジトリを表示するように構成されています。 DockerシングルユーザーJupyterサーバーを起動し、ブラウザーにインタラクティブセッションを表示します。他の例 here および here があります。
  • Mybinderのソースコードは Github にあります
  • Everwareプロジェクト （現時点ではベータ版）も検討できると思います。ソースコードは Github にあります。
5
Jaime

できません。

  • ユーザーが静的バージョンを静的htmlとして表示する（静的サイトのホストが提供されている場所ならどこでもホストできます）、または
  • ユーザーがJupyterHubサービスに直接アクセスできるようにします。

これは可能でした。 Jupyterのカーネル（Pythonなど）をJavaScriptで解釈できるかどうか。次に、ユーザーはWebブラウザを介してコードを評価できます。ただし、Jupyterはまだこの機能を提供していません。

0
weakish