npm 包 ipyjana 使用教程

简介

ipyjana 是一款基于 TypeScript 开发的用于在浏览器中集成 Jupyter Notebooks 的 npm 包。它能够帮助开发者在前端项目中快速集成 Jupyter Notebooks,并且可以兼容大部分浏览器。

安装

你可以通过 NPM 安装 ipyjana:

npm install ipyjana --save

也可以通过 Yarn 安装:

yarn add ipyjana

快速开始

创建一个新的 Jupyter Notebook

在 HTML 中,你需要一个元素来承载 Notebook。默认情况下,ipyjana 将使用 CreateJS 作为回调库,因此你不需要使用其他库来加载 Notebook:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="notebook"></div>

    <script src="https://unpkg.com/ipyjana"></script>
    <script>
      const notebook = ipyjana.createNotebook({
        container: document.getElementById("notebook")
      });
    </script>
  </body>
</html>

这将在浏览器中创建一个新的 Notebook,其中包含一个新的代码单元格。

执行代码

为了通过 ipyjana 运行代码,你需要调用 eval 方法:

notebook.eval(`
  print("Hello World!")
`);

获取输出

你可以使用 onOutput 方法来获取代码单元格的输出:

notebook.onOutput((output: string) => {
  console.log(output);
});

加载 Notebook

你可以使用 loadNotebook 方法来加载一个 Notebook 文件:

notebook.loadNotebook("notebook.ipynb");

保存 Notebook

使用 saveNotebook 方法可以将修改后的 Notebook 保存到服务器:

notebook.saveNotebook("notebook.ipynb");

示例代码

在 Notebook 中使用 D3.js

以下示例演示了如何从 Jupyter Notebook 中使用 D3.js。首先,我们需要安装 D3.js:

npm install d3 --save

然后,我们需要在 Notebook 中导入 D3:

import IPython.display as display
from IPython.core.magic import register_line_magic

@register_line_magic
def jupyter_d3(line):
    display.HTML('''<script src="//d3js.org/d3.v3.min.js"></script>''')

%jupyter_d3

现在,在 Notebook 中,我们可以使用 D3.js:

%%javascript

const data = [4, 8, 15, 16, 23, 42];

d3.select("body")
  .selectAll("p")
    .data(data)
  .enter()
    .append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

这将在 Notebook 中显示一组数字,类似于这样:

在 Notebook 中使用 TensorFlow.js

以下示例演示了如何从 Jupyter Notebook 中使用 TensorFlow.js。首先,我们需要安装 TensorFlow.js:

npm install @tensorflow/tfjs --save

然后,我们需要在 Notebook 中导入 TensorFlow.js:

import IPython.display as display
from IPython.core.magic import register_line_magic

@register_line_magic
def jupyter_tf(line):
    display.HTML('''<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.8.0/dist/tf.min.js"></script>''')

%jupyter_tf

现在,在 Notebook 中,我们可以使用 TensorFlow.js:

%%javascript

async function myModel() {
  const model = tf.sequential({
    layers: [tf.layers.dense({inputShape: [784], units: 32, activation: 'relu'}), tf.layers.dense({units: 10, activation: 'softmax'})]
  });

  await model.compile({loss: 'categoricalCrossentropy', optimizer: 'adam'});
  
  return model;
}

const model = await myModel();

这将在 Notebook 中创建一个简单的神经网络模型,其中包含一个密集层,并在最后添加一个 softmax 分类器。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/60067381890c4f727758423a


纠错反馈