meta: proposals for customized UI plugin for Pipboard

[rickycao-qy]

As discussed with @yorkie @wordcount , we would allow users to develop user-interface plugins to extend the ability of Pipboard. This issue will discuss the specification for ui-plugin.

Built-in Pipboard

Pipcook will provide a built-in web launcher and we name it as Pipboard as discussed in #29 , Basically default Pipboard will provide access to build pipeline, check logs and models. The basic structure is shown as below:

Customized UI Plugin

Customized user-interface plugin still belongs to pipcook plugin ecosystem (refer to #17 ). Currently plugins are categorized into:

• data collect
• data access
• data process
• model load
• model train
• model evaluate
• model deploy

Now for UI plugin, we will add the 8th category:

• user interface

After the UI plugin is used, Pipboard will incorporate its user-interface into itself. For example, if a plugin called 'customize-demo' is developed, Pipboard will be shown as below and the content area will show contents of this plugin.

UI Plugin Developer Guide

The specification for UI plugin is as follows:

• MUST be a NPM package
• MUST have the structure as follows:
  • build (front-end codes after built with package tool)
  • src [optional] (your source codes for user interface)
  • config.json (config file. Configure your plugin name to be shown in tab)
  • package.json
  • index.js
• SHOULD have a readme for us to understand

In case the UI will need to do some basic operations on local file system, we will provide several basic APIs to achieve this:

• API to get info about local models
• API to get info about local training history logs
• API to read a file from local system
• API to write a file from local system

How to use UI Plugin

The user can follow these steps to use a specific plugin

• install UI plugin npm package into working space
• use command interface

pipcook board --plugin=<npm package name>

I will provide a example plugin later on

Please help me have a review on this proposal @yorkie @wordcount

[yorkie]

Now for UI plugin, we will add the 8th category:

I think the UI should be an ability for plugins.

MUST have the structure as follows:

1. Why do we have an index.js?
2. Rename the config.json to plugin.json?

In case the UI will need to do some basic operations on local file system, we will provide several basic APIs to achieve this:

We SHOULD point out where do we provide these HTTP APIs.

How to use UI Plugin

I think user don't need to specify the plugin parameter, pipboard is able to load automatically.

[yorkie]

Meeting Summary:

1. Rename the UI plugin, it's confused with our current plugins, maybe "Pipboard Extension"?
2. Remove the index.js, and a new way to fetch the extension name by @utkobe
3. Yes
4. @utkobe'll answer this in details later.

[yorkie]

In details, we have the following pages and functionalities to be achieved:

• Tab "Pipeline"
  • list page
  • new/detail page
    • plugin selectors & pages
    • view pipeline logs
    • view pipeline samples
    • save/delete this pipeline
• Tab "Tutorials"
  • write "minist tutorial"
  • write "pipeline tutorial"
  • write "image classification tutorial"
  • write "text classification tutorial"
• Tab "Extensions"
  • extensions
    • facets
    • tensorboard
    • imgcook sample generator
  • write extension developer documentation
• Tab "MLApp Viewer"
  • view pipelines by application
  • render model relationships
  • mlapp console

To make extension works exactly, the below features/injections are needed:

• support model visualization type as:

  {
    "event": "model.visualization",
    "handler": "/path/to/your/main.js"
  }

• support sample visualization type as:

  {
    "event": "sample.visualization",
    "handler": "/path/to/your/script.js"
  }

• Support customized sample view:

  {
    "event": "sample.view",
    "filter": { "datatype": "image", "tasktype": "classification" },
    "handler": "/path/to/your/script.js"
  }

• support customized plugin configuration:

  {
    "event": "plugin.configuration",
    "handler": "/path/to/your/configuration/handler"
  }

Then let's see what's a Pipboard extension looks like:

{
  "name": "@pipcook/pipboard-tensorboard-extension",
  "pipboard": {
    "observe": [{
      "event": "model.visualization",
      "handler": "tensorboard.js#onselect"
    }, {
      "event": "pipeline.start",
      "handler": "tensorboard.js#onpipelinestart
    }]
  }
}

And tensorboard.js:

import pipboard from '@pipboard/pipboard-extension-api';

export onselect = (enabled, pipeline) => {
  if (enabled) {
    pipboard.getPluginByType('model-define').enableTensorboard('/path/to/your/log');
  }
};

export onpipelinestart = (options, pipeline) => {
  const tensorboard = pipboard.createWindow('/path/to/your/page/url');
  tensorboard.show();
}