Create a Chinese plugin for ModelArts JupyterLab

How to keep output? It’s something that’s been bothering me. Think about it, the original is because there is no input, right, is not learning new knowledge every day; The consequences are self-evident – working for seven years experience value close to zero! Today, I happened to see the source of a small tool, which opened my mind. Therefore, I want to create an exclusive Chrome plug-in for ModelArts JupyterLab! Of course, this method is theoretically suitable for any custom Chinese (or multi-language) plug-in, see Copy siege lion how to Copy!

Summary background

• What is ModelArts? ModelArts is huawei cloud one-stop AI development platform, covering the whole process of data preparation, training, evaluation and deployment in AI application development and the whole scene of end, side and cloud. Small white developers can easily develop their own AI applications from zero to one with The help of ModelArts. For example, Copy Siege Lion Lion used ModelArts to complete the video synthesis of “Ant Tooth Black” without any effort. Daishen Engineers can use ModelArts to “refine and refine”, and there are also some high-end applications, such as “automatic driving” achieved by @Tianyi_Li. Of course, with the help of ModelArts, AI has realized the enabling in all walks of life. For example, the automatic learning ability of ModelArts is used to build and improve the sound model to realize the eavesdropping monitoring of rainforest and the AI application of rainforest protection. With the help of ModelArts’ massive data preprocessing and intelligent labeling, large-scale distributed training and deep learning, high quality personalized content can be accurately reached… If you want to get a taste of ModelArts, I hope my history blog post is useful — Cloud Enjoy MindTalks 13th Issue :ModelArts makes AI application development easier.

• What is a JupyterLab? JupyterLab is the next generation of Project Jupyter’s Web-based user interface, A Web-based interactive development environment for Jupyter Notebook, code, and data, while Project Jupyter exists to develop open source software, open standards, and services for interactive computing across multiple programming languages. Often used in data science, scientific computing, and machine learning workflows, it is often used as an aid to AI application development and data analysis. ModelArts JupyterLab is a commonly used development environment. You can use it to learn mathematics in machine learning (PS: This big lion plans to learn from Lao Qi), play crawler or data visualization… But for me, “English is very pool”, I was completely confused by the English operation interface of JupyterLab, especially after I opened the Google Translate plug-in. Opinion? Running? Target? God translate! How to do?

  

• Sometimes inspiration comes from “crossing boundaries”. Recently, I planned to implement a public welfare small program for wildlife protection. I need to draw the prototype and design the UI by myself. I have learned that the most popular and recommended tool is Figma. Of course, the same is in English, but the domestic hardcore players have written a Small plug-in in Chinese -FigmaCN, this is the Chinese Figma plug-in, by the designer manual translation verification. By downloading and viewing the source code of FigmaCN, I learned that it was so easy to “develop” Chinese Chrome plug-in, so I had the idea of Chinese ModelArts JupyterLab, and I just checked the information. JupyterLab 3.0+ already has Chinese plug-ins can be used, is contributed by a enthusiastic foreigner – Jupyterlab-language-pack-zh-CN, but it seems that the experience is still to be optimized. However, The JupyterLab on ModelArts is the 2.0 version for the time being, so I have the idea of making Chinese plug-ins by myself, hoping to learn more skills through the Chinese version of JupyterLab. Just Do IT!

  

The document first

To paraphrase the old saying, “Every road is the first document.” Development does not look at the documentation, that is really cattle; Development does not write a document, is really cattle! When I want to develop Chrome add-ons, probably the best first step is to look at the official development documentation – the Extension Development Documentation. In my years of HW development, when you read the documentation, you’ll probably see a “Hello World”; Of course, Chrome plug-in development is no exception. You’ll probably need to master the three keys to WEB development –HTML, CSS, and JavaScript, according to the documentation, And take a look at the open-source library GoogleChrome/ Chrome-extensions-samples to get started on our “Hello World tour” for chrome.

The main Chrome plugin has been updated to V3, and the MV3 extension provides security, privacy, and performance enhancements. You can also use the more modern open Web technologies used in MV3, such as Service Workers and Promise. Therefore, we developed based on the third generation Chrome plugin.

Create a new directory called Hello World, which contains three files: background-js, hello.html and manifest.json. .html is a page file; This is a simple plug-in prototype. The specific code is as follows:

Simple code, the implementation of the function is to install the plug-in to open hello. HTML, to preview the effect of the need to open the local browser plug-in application developer mode. ① Chrome :// Extensions Navigate to. You can also access this page by clicking on the Chrome menu in the upper right corner of the feature box, hovering over “More Tools,” and then selecting Extensions. ② Check the box next to “Developer Mode”. ③ Click Load Decompressed Extension and select a directory for the Hello Extension extension.

Writing a plug-in

Json (MV3 /manifest) /manifest (MV3 /manifest)

"Name ": "My Extension", // The plug-in name" version": "versionString", // the plug-in versionCopy the code

The ICONS field defines ICONS, content_scripts injects content scripts, and background injects background scripts. It is worth noting that MV3, compared to MV2, Remote code like JavaScript or Wasm files can no longer be loaded, which means all of our logic has to be done locally (for now). So my configuration file looks like this:

{
  "name": "StartAI"."version": "0.1"."manifest_version": 3."short_name": "StartAI"."description": "ModelArts tool set, JupyterLab Chinese plug-in, learn AI use ModelArts, learn AI on huaweicloud.ai."."homepage_url": "http://huaweicloud.ai"."icons": {
    "16": "images/icon16.png"."24": "images/icon24.png"."32": "images/icon32.png"."48": "images/icon48.png"."128": "images/icon128.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{"matches": ["*://notebook01-modelarts-cnnorth4.huaweicloud.com/*"]."js": ["js/content.js"]."run_at": "document_end"."all_frames": true}}]Copy the code

Content_scripts is our core logic. When the browser matches a url to a site in the matches field, it waits for the page to load and executes our core logic. From the configuration file above, we can probably guess the directory structure of our plug-in:

Hello - world ├ ─ images │ ├ ─ icon128. PNG │ ├ ─ icon16. PNG │ ├ ─ icon24. PNG │ ├ ─ icon32. PNG │ └ ─ icon48. PNG ├ ─ js │ └ ─ Content.js ├─ background.js ├─ manifest.jsonCopy the code

When the plugin is successfully installed, a new TAB is opened to display what we want to display, such as the boot page:

chrome.runtime.onInstalled.addListener(async() = > {// Open the local page
  // let url = chrome.runtime.getURL("hello.html");
  // let tab = await chrome.tabs.create({ url });
  // console.log(`Created tab ${tab.id}`);
  chrome.tabs.create({
    url: "http://huaweicloud.ai"}); });Copy the code

After clicking the Update button in the plug-in center, the page we set will be opened. When matching our preset website, the plug-in will be activated and the icon will be lit up obviously. Look for a long time, it seems that the original Chrome plug-in development is so simple!

Then comes the core logic — Localization. The idea is to use the MutationObserver to monitor when the DOM changes. Any changes in the DOM, such as the addition or deletion of nodes, the change of attributes, and the change of text content, can be captured by the API, so that when we operate on the page, Can dynamically translate our matching content in real time. The code implementation is as follows:

// contant.js

// Define a temporary empty array
let allData = [];
// Both Chinese and English match
const jsonData = {
    / / "" : {
    // "domain": "jupyterlab",
    // "language": "zh-CN",
    // "plural_forms": "nplurals=1; plural=0;" .
    / / "version" : "3.0.0 b4"
    // },
   "\nConnected: %1": [
       "\n\u5df2\u8fde\u63a5: %1"]."\nCreated: %1": [
       "\n\u521b\u5efa\u65f6\u95f4\uff1a%1"]./ /... Is omitted 2400 lines, see https://github.com/jupyterlab/language-packs
}

// Process data like :[["File", "File"],["Edit"," Edit"]]
allData = Object.keys(jsonData).map(item= >([item,jsonData[item][0]]))

// Introduce the observer MutationObserver
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

// Observer configuration (what changes need to be observed)
let MutationObserverConfig = {
  childList: true.subtree: true.attributeFilter: ["data-label"].characterData: true};// Create an observer instance and pass in the callback function
let observer = new MutationObserver(function (mutations) {
  let treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ALL,
    {
      acceptNode: function (node) {
        if (node.nodeType === 3 || node.hasAttribute("data-label")) {
          return NodeFilter.FILTER_ACCEPT;
        } else {
          returnNodeFilter.FILTER_SKIP; }}},false
  );

  // Map Chinese
  let dataMap = new Map(a);for (i in jsonData) {
    if(i && ! dataMap.has(i)) { dataMap.set(i, jsonData[i][0]);
    }
  }
   allData.forEach(([key, val]) = > {
     if (key && !dataMap.has(key)) {
       dataMap.set(key, val);
     }
   });
  let currentNode = treeWalker.currentNode;

  / / replace
  while (currentNode) {
    if (currentNode.nodeType === 3) {
      let key1 = currentNode.textContent;
      if (dataMap.has(key1)) currentNode.textContent = dataMap.get(key1);
    } else {
      let key2 = currentNode.getAttribute("data-label");
      if (dataMap.has(key2))
        currentNode.setAttribute("data-label", dataMap.get(key2)); } currentNode = treeWalker.nextNode(); }});// Start observing the target node
observer.observe(document.body, MutationObserverConfig);

Copy the code

[“Notebook”:[” Notebook”]]] will cause an exception in the plugin, which will cause the page to be stuck. The specific reason is not found yet. It is probably because of an infinite loop. Accidentally stepped over the hole.

release

For the final launch, I don’t want to talk too much about it, mainly because I don’t want to advertise to Google, because the launch costs a nominal $5, so you might need a global credit card. The steps are as follows: Uploading an application is a simple process:

• Compress the root directory of your application (the folder containing the manifest.json file) into a. Zip file.
• Pay money to open qualifications.
• Go to the console and click Add New project.
• Acceptance of terms and service agreements.
• Use the Select File dialog box to find the. Zip file on your system and select it.
• Other information maintenance and testing.

As of press time, Copy has not found a credit card yet, so it will be registered and published after Notebook’s one-click sharing feature is developed.

summary

On the whole, I got a lot. One is to solve the current need, two is to produce a “hydrology” article, and three is to contribute a PR (Markdown special) to Google.

Source address: Hu-qi /StartAI (github.com/hu-qi/Start…)

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign