Summary: Hush, a secret gameplay that is unknown to Huawei Cloud, I will tell you in secret!
Double "Magic" Celebrate Double Festival
↑A picture of the opening, the story depends on editing
HUAWEI CLOUD’s one-stop development platform ModelArts and AppCube AppCube can actually be played together. This may be a scene that HUAWEI CLOUD officials did not expect. Since I started to experience the public beta AppCube AppCube in August, the journey has been bumpy. From mentioning bugs to AppCube, to waiting for the new version to be released, and then crossing the river step by step by feeling the stones, I have been exploring the combination of AppCube and ModelArts. The reason is very simple-I hope to develop AI applications with a low threshold and land AI applications with a low threshold. However, what is unsatisfactory is that when I used the low-code platform AppCube, I still copied a lot of code... But I still insisted on exploring. Today, on the occasion of the Mid-Autumn Festival and National Day, I finally ran through my first landing demo-- Named entity recognition. It can be said that this is an unprecedented experience !
origin
AppCube (hereinafter referred to as AppCube) is a low-code application development platform. Just like the Rubik's Cube, as its name implies, various modular elements can be arranged through any combination to create applications with different functions. AppCube is an aPaaS platform for online multi-tenant application development and operation.
It's such an awesome low-code platform that deeply attracted me. Before, she used her to complete the demo of the mask distribution system. At that time, it didn't seem to be called AppCube. After that, I was honored to participate in the public beta experience of AppCube AppCube. Through the in-depth experience of AppCube, I became more familiar with her. I also happened to be learning the one-stop AI development platform ModelArts. I learned some simple AI model training through ModelArts. And online deployment, and then also try to "land" these AI services-to complete the front-end development and deployment, fortunately to produce a small demo based on Koa.js experience- today, have you saved it? . Although it is very interesting, I still can't get rid of the dependence on free servers. When I encountered AppCube, I had a bold idea: Combine ModelArts and AppCube to realize the front-end application of AI online services! So, "JUST DO IT", embarked on a road of infinite pitting...
The first pit I encountered was indeed dug by the real HW engineer! All the friends who have called the ModelArts online service should know that we need to obtain the AK and Sk of the account before calling the interface, and the result of the call can be obtained normally after signing through the encryption algorithm. The whole process itself has no task problem. However, the online service of ModelArts can not be called through AppCube, and the Incorrect IAM authentication information is always returned, which means that the authentication cannot be performed normally. There are two reasons. One is The token after signing is incorrect. Second, the time of the client (AppCube) is inconsistent with the time of the server (ModelArts online service) and the difference is more than 15 minutes.
After repeated verifications, I confirmed that it was the latter, so I filed a work order on the evening of August 18th. By the evening of August 20th, it was basically determined that AppCube’s signer encryption algorithm was written in a problem, and then I was waiting for a long time to publish. ……By September 16th, the new version finally arrived and the pit was fixed.
Then, I started "three days of fishing and two days of surfing the net", and stepped on the second pit-AppCube's standard page does not support anonymous access, so I hurriedly thought of converting the standard page to the advanced page, but I encountered the first Three pits-because my standard page contains multi-language components, the converted advanced page still cannot be accessed anonymously. So, I started to turn to the development of advanced pages...
However, the advanced page is not as advanced as I thought, it is like a high level but the equipment still has to be built by yourself, yes, there is no basic layout in the advanced page, you need to develop your own components; the advanced page needs to develop a bridge by yourself, because of AppCube The security policy does not allow front-end pages to directly call back-end services.
At the end of September, basically toss in these pits...
Development on the ModelArts side
To me, opening (copying) sending (shell) an AI online service is like exploring the pocket. After all, the ModelArts platform provides various Copy capabilities: you can develop AI online services based on automatic learning; you can also based on presets Algorithms or subscription algorithms train and deploy AI models; you can also directly subscribe to models from the AI market to develop AI online services, and even load meta models directly from OBS. In short, maybe you don't have an AI foundation, and you can develop and deploy an AI online service through the one-stop AI development platform ModelArts. To make it easier, I use the OBS meta-model method to deploy a Bert named entity recognition online service in minutes .
Briefly introduce the operation process:
0. Preparation stage
- Register for a HUAWEI CLOUD account-this is a golden key that opens my "cloud" world.
- Visit "My Credentials" to obtain the "Access Key"-that is, AK/SK. This is also a golden key, which is my identity certificate for accessing Huawei Cloud through development tools.
- Open OBS and create a new bucket and folder-this is a 40G gold bucket, used to store the data, models, algorithms I copied...Y
- Open ModelArts-this is a one-stop AI development platform built by real money, but I was squandering free computing power (I am not good at learning, not learning, and wasting resources).
1. Open (copy) send (shell) stage
To download the model from the AI market dataset to OBS , please visit model-test: https://marketplace.huaweicloud.com/markets/aihub/datasets/detail/?content_id=23441bfe-8c6b-4d0c-8076-13252bde17c0 , click the download on the page Button, configure the OBS path, click Next to download the model to OBS
Import meta model from OBS
We need to enter the ModelArts platform and click Model Management-Model-Import-Select from Object Storage Service (OBS). Remember to select the meta model to select the parent of the model folder, which will automatically recognize the Tensorflow engine. Click Create Now to automatically build the model.
2. Deployment phase
Deployment is the easiest step. Wait for the model to be built and click Deploy-Online Service and Next to start the model deployment. Wait a moment, after the deployment is successful, the familiar online debugging and other steps.
AppCube side development
Through this exploration, I deeply realized the subtlety of AppCube-the new version of the ship you haven't played. Just like the pits mentioned above, the main reason is that their own technology is not hard, and they do not understand the gameplay and rules, and then they fall into the pit indefinitely. However, the goal is clear: a page with an input box, a submit button, and a result display, which can call AI services. Is it super simple? It was so simple that I thought it would be done in half an hour. As a result... If you don't say anything, it will be tears! Directly get started with advanced page development, I will be an advanced copy siege lion!
Advanced page development preparation
- Custom UI library
Before developing advanced pages, you need to learn about widgets, libraries, bridges, events, and actions. No way, cross the river by feeling the stones. If you are barefoot, it will be easy to scratch; first come with a MintUI (although it is outdated), if the advanced page needs to use front-end framework or component library, such as popular Vue, Bootstrap, ElementUI, etc. It needs to be made into Library assets and then uploaded to the environment for use. The advanced page this time is a custom Widget. I want to use MintUI to complete the front-end layout, so I need to upload the custom library and use the library in the Widget. Fortunately, the official document provides a textbook-like Demo: Manage and use the library , the steps are also simple:
- Download MintUI and upload to advanced page> library
- Reference MintUI in custom Widget:
packageinfo.json
"requires": [
{
"name": "global_Vue",
"version": "100.7"
},
{
"name":"bingobingotesthuaweicom_mintui", // 库文件名称和版本号在库详情页面获取 "version": "1.0"
}]- Toolkit download
The cool way to develop advanced pages is to use Scaffolding to develop widgets offline. Scaffolding is a scaffolding project provided by the AppCube system, which facilitates the creation of local asset projects for local development of Widgets, and uploads to the asset library after local commissioning. Widgets can also be downloaded locally through this tool.
By the way, the concept of Widget is very good. It feels like playing Flutter, everything is Widget! A system webpage you see in your browser is a page. Widget is a reusable high-level page component. A high-level page is assembled by one or more Widgets. If an advanced page is regarded as a complete pattern of a jigsaw puzzle, then the Widget is equivalent to every small piece of the puzzle. If we want to develop Widget locally, we need to use tools. This tool is a bit special. It is actually a front-end NPM package. I specifically checked. This package is not public. We need to download it from the official document: https:// obs-ap1-appengine.obs.cn-north-1.myhuaweicloud.com/usermanual/assets_starter.zip. If the subsequent copyright allows it, it should appear in the NPM public package. Said it is a tool, it is actually a bunch of code, relying on storybook to develop components. From the code structure and bin directory, the toolkit provides a mango command line. We can open a local component development environment through mango ui to facilitate subsequent development and debugging. Of course, you also need to set and get the client ID and client secret.
- Project preparation
AppCube has a development environment and a running environment. We enter the development environment through the AppCube console and create a new blank light application. From the point of view of the operation interface, AppCube supports light applications, industry applications, business large screens and mobile small programs. Currently there are four distribution channels for the applications built: AppCube warehouse distribution, Welink, Xunmeng, and download to local. Regarding some basic configurations of the project, I won't repeat them here. For details, please check the user guide of the official document .
Summary of Advanced Page Development
- Online script development and service flow
In theory, our front-end business does not directly call the back-end interface. In this exploration, we handed the AI online service to the back-end logic of APPCube for processing. The front-end business developed by APPCube calls the back-end business. AppCube's back-end business calls AI online services, so as to ensure that the sensitive data used in our transmission process, such as AKSK, is not leaked. Therefore, we need to write scripts and define service flows, public interfaces, etc., for details, please refer to official documents. As shown in the figure, we have defined three scripts: config--simple configuration of AKSK and AI online service addresses; singer--for signing, rewritten according to the Demo provided by AKSK to adapt to AppCube; getSinger--that is, the script that calls the service , Input body, and return the response to request AI online service.
The service flow is also very simple to define, just call the getSinger script, and then define a public interface based on the service flow in the following service to facilitate the front-end page call to the bridge.
- Custom Widget
When we use the above tools, executing mango ui can open the local development interface, such as: http://localhost:8000/app/list. We can develop standard page components, advanced page components and Vue advanced page components. Through settings, we can directly connect to the online environment of AppCube, and interact with the online environment, such as component upload and download, component settings, component compilation, etc.
- Custom bridge
Sometimes there are too many detours, and the road turns more and more bends. Why do you want to customize the bridge? Because you want to call the service in the custom advanced page, you may need a bridge! In short, from the beginning, the standard page did not support anonymous access, so I embarked on a road of no return. As of press time, there is still a hole that has not been filled, so although the Demo has been developed and the development environment can be debugged normally, there are still bugs in the running state that the script does not exist or are not activated. At present, the real HW engineers are fully technical support! Back to how to customize the bridge, three steps:
1. Get the demo code and modify it
// 核心代码
var widgetBridge = thisObj.getConnectorInstanceByName('BertDemo_getAKSK');
// ...
thisObj.callFlowConn("BertDemo_getAKSK", {
service: "/BertDemo__AKSK/0.0.1/getAKSKFlow"
},{},result =>{})2. Publish with custom Widget
3. Use in advanced page
release
The release process of AppCube is like the release process of software development: first compile, then release. Enter the application development page in the AppCube development environment, and click the compile button in the lower left corner to compile. After the compilation is successful, the page will display "Compile XXX Successfully". Close the window of successful compilation. Then click the publish button in the lower left corner and select "My Warehouse" on the "Publish Application" page.
After the release is successful, the page displays "The package has been successfully uploaded to my warehouse.". Click My Warehouse on the left side of the App development page, and you can see the published application under "Published". Click the home page button at the top to enter the home page, click "Manage" on the home page, and select "Application Management> My Warehouse" to view the published applications.
Click the user name in the upper right corner of the AppCube development environment and select "Run Environment". Select "My Warehouse" on the overview page to enter the "My Warehouse" page. Click "Install" and click "OK" in the pop-up confirmation box. Install the application; select "Overview" in the left menu, enter the "Overview" page, click "Apply", and enter the "Application List" page...
Although the steps are a bit cumbersome, there are detailed schematic diagrams in the document, follow step by step It will be familiar after a few more times.
It seems that AppCube is mainly for enterprise developers, and Copy Siege Lion seems to need to give up! Next, explore ModelArts and Hongmeng OS to see if you can get something out of it.
Click to follow and learn about Huawei Cloud's fresh technology for the first time~