ImJoy Jupyter 扩展

在此尝试演示：

使用ImJoy与Jupyter Notebook和JupyterLab

此扩展使用imjoy-rpc库，以启用ImJoy核心和插件之间的双向RPC调用。

该库有一个抽象的传输接口，可以支持不同类型的传输。目前，我们支持Jupyter comms消息，这是Jupyter笔记本中使用的自定义消息协议（例如，为jupyter小部件提供动力）。

要使用它，您需要安装Python中的imjoy-jupyter-extension，这将imjoy-rpc作为依赖项包含在内（见下文）。

为Jupyter Notebook或JupyterLab安装扩展

对于Jupyter Notebook

pip install -U imjoy-jupyter-extension

您可以通过运行以下命令来验证安装：

jupyter nbextension list

您应该在输出中看到类似imjoy_jupyter_extension/index enabled的内容。如果仍有问题，您可以尝试手动安装。

git clone https://github.com/imjoy-team/imjoy-jupyter-extension.git
cd imjoy-jupyter-extension
jupyter nbextension install imjoy_jupyter_extension --py # add --sys-prefix if using virtualenv or conda
jupyter nbextension enable imjoy_jupyter_extension --py # add --sys-prefix if using virtualenv or conda
jupyter nbextension list

对于Jupyter Lab

pip install -U imjoy-jupyter-extension

jupyter labextension install imjoy-jupyter-extension

在Jupyter笔记本中使用ImJoy插件

现在，您可以通过例如jupyter notebook命令启动jupyter笔记本，如果一切顺利，您应该能够在工具栏中看到ImJoy图标。

对于JupyterLab，通过jupyter lab命令启动，然后创建一个笔记本，您应该能够在工具栏中看到ImJoy按钮

现在在单元格中运行ImJoy插件，查看使用itk-vtk-viewer可视化图像的示例

import imageio
import numpy as np
from imjoy_rpc import api

class ImJoyPlugin():
    def setup(self):
        api.log('plugin initialized')

    async def run(self, ctx):
        viewer = await api.showDialog(src="https://kitware.github.io/itk-vtk-viewer/app/")

        # show a 3D volume
        image_array = np.random.randint(0, 255, [10,10,10], dtype='uint8')
        
        # show a 2D image
        # image_array = imageio.imread('imageio:chelsea.png')

        await viewer.setImage(image_array)

api.export(ImJoyPlugin())

使用以上代码，您创建了一个ImJoy插件。要运行它，请点击带有ImJoy图标的运行按钮。然后它会调用您插件的run函数。

• GIF演示： 可视化2D图像
• GIF演示： 可视化3D体积
• GIF演示： 加载ImageAnnotator

您还可以在ImJoy内部运行笔记本来实现反向操作，为此，请首先创建一个空的Jupyter笔记本。然后将URL复制并粘贴到“+插件”对话框中，按Enter键并安装插件。点击新安装的插件，您将在ImJoy中打开笔记本页面。

尝试将itk-vtk-viewer示例复制粘贴到一个单元格中并执行它。同样，如果您现在点击工具栏中的运行ImJoy按钮，您将在ImJoy内部打开查看器。

在笔记本中动态加载插件

在笔记本中加载插件有不同的方法，您可以从插件的源代码URL（例如，gist或GitHub文件URL）或托管网络应用程序（例如上面使用的itk-vtk-viewer应用程序）加载。除此之外，您还可以在笔记本中直接编写窗口插件。这对于调试GUI的窗口插件尤其实用。

您可以直接将包含插件源代码的字符串传递给api.getPlugin、api.createWindow(src=...)或api.showDialog(src=...)，但这不会在Jupyter笔记本单元格中获得语法高亮。一种解决方法（这也适用于Google Colab）是在一个以## ImJoy Plugin开头的单独单元格中编写插件代码，并用IPython.display.HTML()包裹源代码。例如

## ImJoy Plugin
from IPython.display import HTML
my_plugin_source = HTML('''
<docs lang="markdown">
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "Untitled Plugin",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.0",
  "cover": "",
  "description": "[TODO: describe this plugin with one sentence.]",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": [],
  "dependencies": [],
  "defaults": {"w": 20, "h": 10}
}
</config>

<script lang="javascript">
class ImJoyPlugin {
  async setup() {
    api.log('initialized')
  }

  async run(ctx) {

  }
}

api.export(new ImJoyPlugin())
</script>

<window lang="html">
  <div>
    <p>
    Hello World
    </p>
  </div>
</window>

<style lang="css">

</style>
''')

然后在另一个单元格中，您可以将插件源代码传递给api.getPlugin、api.createWindow(src=...)或api.showDialog(src=...)以创建一个实际插件

from imjoy_rpc import api
class ImJoyPlugin():
    async def setup(self):
        pass

    async def run(self, ctx):
        # for regular plugin
        # p = await api.getPlugin(my_plugin_source)

        # or for window plugin
        # await api.createWindow(src=my_plugin_source)
        await api.showDialog(src=my_plugin_source)

api.export(ImJoyPlugin())

开发

要开发JupyterLab扩展，请打开终端并运行

cd imjoy_jupyterlab_extension
npm run watch

在另一个终端窗口中运行

cd imjoy_jupyterlab_extension
npm run build
jupyter labextension link .
jupyter lab