[Doc] add en readme for js (#479)

* add contributor

* add package readme

* refine ocr readme

* refine ocr readme

* add en readme about js

* fix bugs

* refine doc

examples/application/js/mini_program/README.md

@@ -1,3 +1,4 @@
+[English](README_en.md) | 简体中文
 
 # Paddle.js微信小程序Demo
 
@@ -100,27 +101,26 @@ wx.canvasGetImageData({
 
 <a name="4"></a>
 ## 4. 常见问题
-### 4.1 出现报错 `Invalid context type [webgl2] for Canvas#getContext`
 
-可以不管，不影响正常代码运行和demo功能
+- 4.1 出现报错 `Invalid context type [webgl2] for Canvas#getContext`
 
-### 4.2 预览看不到结果
+    **答:** 可以不管，不影响正常代码运行和demo功能
 
-建议尝试真机调试
+- 4.2 预览看不到结果
 
-### 4.3 微信开发者工具出现黑屏，然后出现超多报错
+    **答:** 建议尝试真机调试
 
-重启微信开发者工具
+- 4.3 微信开发者工具出现黑屏，然后出现超多报错
 
-### 4.4 模拟和真机调试结果不一致；模拟检测不到文本等
+    **答:** 重启微信开发者工具
 
-可以以真机为准；
+- 4.4 模拟和真机调试结果不一致；模拟检测不到文本等
 
-模拟检测不到文本等可以尝试随意改动下代码（增删换行等）再点击编译
+    **答:** 可以以真机为准；模拟检测不到文本等可以尝试随意改动下代码（增删换行等）再点击编译
 
 
-### 4.5 手机调试或运行时出现 长时间无反应等提示
+- 4.5 手机调试或运行时出现 长时间无反应等提示
 
-请继续等待，模型推理需要一定时间
+    **答:** 请继续等待，模型推理需要一定时间
 
 

examples/application/js/mini_program/README_en.md

@@ -0,0 +1,125 @@
+English | [中文](README.md)
+
+# Paddle.js WeChat mini-program Demo
+
+- [1. Introduction](#1)
+- [2. Project Start](#2)
+  * [2.1 Preparations](#21)
+  * [2.2 Startup steps](#22)
+  * [2.3 visualization](#23)
+- [3. Model inference pipeline](#3)
+- [4. FAQ](#4)
+
+<a name="1"></a>
+## 1 Introduction
+
+
+This directory contains the text detection, text recognition mini-program demo, by using [Paddle.js](https://github.com/PaddlePaddle/Paddle.js) and [Paddle.js WeChat mini-program plugin](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3&token=956931339&lang=zh_CN) to complete the text detection frame selection effect on the mini-program using the computing power of the user terminal.
+
+<a name="2"></a>
+## 2. Project start
+
+<a name="21"></a>
+### 2.1 Preparations
+* [Apply for a WeChat mini-program account](https://mp.weixin.qq.com/)
+* [WeChat Mini Program Developer Tools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
+* Front-end development environment preparation: node, npm
+* Configure the server domain name in the mini-program management background, or open the developer tool [do not verify the legal domain name]
+
+For details, please refer to [document.](https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)
+
+<a name="22"></a>
+### 2.2 Startup steps
+
+#### **1. Clone the demo code**
+````sh
+git clone https://github.com/PaddlePaddle/FastDeploy
+cd FastDeploy/examples/application/js/mini_program
+````
+
+#### **2. Enter the mini-program directory and install dependencies**
+
+````sh
+# Run the text recognition demo and enter the ocrXcx directory
+cd ./ocrXcx && npm install
+# Run the text detection demo and enter the ocrdetectXcx directory
+# cd ./ocrdetectXcx && npm install
+````
+
+#### **3. WeChat mini-program import code**
+Open WeChat Developer Tools --> Import --> Select a directory and enter relevant information
+
+#### **4. Add Paddle.js WeChat mini-program plugin**
+Mini Program Management Interface --> Settings --> Third Party Settings --> Plugin Management --> Add Plugins --> Search for `wx7138a7bb793608c3` and add
+[Reference document](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
+
+#### **5. Build dependencies**
+Click on the menu bar in the developer tools: Tools --> Build npm
+
+Reason: The node_modules directory will not be involved in compiling, uploading and packaging. If a small program wants to use npm packages, it must go through the process of "building npm". After the construction is completed, a miniprogram_npm directory will be generated, which will store the built and packaged npm packages. It is the npm package that the mini-program actually uses. *
+[Reference Documentation](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
+
+<a name="23"></a>
+### 2.3 visualization
+
+<img src="https://user-images.githubusercontent.com/43414102/157648579-cdbbee61-9866-4364-9edd-a97ac0eda0c1.png" width="300px">
+
+<a name="3"></a>
+## 3. Model inference pipeline
+
+```typescript
+// Introduce paddlejs and paddlejs-plugin, register the mini-program environment variables and the appropriate backend
+import * as paddlejs from '@paddlejs/paddlejs-core';
+import '@paddlejs/paddlejs-backend-webgl';
+const plugin = requirePlugin('paddlejs-plugin');
+plugin.register(paddlejs, wx);
+
+// Initialize the inference engine
+const runner = new paddlejs.Runner({modelPath, feedShape, mean, std});
+await runner.init();
+
+// get image information
+wx.canvasGetImageData({
+    canvasId: canvasId,
+    x: 0,
+    y: 0,
+    width: canvas.width,
+    height: canvas.height,
+    success(res) {
+        // inference prediction
+        runner.predict({
+            data: res.data,
+            width: canvas.width,
+            height: canvas.height,
+        }, function (data) {
+            // get the inference result
+            console.log(data)
+        });
+    }
+});
+````
+
+<a name="4"></a>
+## 4. FAQ
+
+- 4.1 An error occurs `Invalid context type [webgl2] for Canvas#getContext`
+
+    **A:** You can leave it alone, it will not affect the normal code operation and demo function
+
+- 4.2 Preview can't see the result
+
+    **A:** It is recommended to try real machine debugging
+
+- 4.3 A black screen appears in the WeChat developer tool, and then there are too many errors
+
+    **A:** Restart WeChat Developer Tools
+
+- 4.4 The debugging results of the simulation and the real machine are inconsistent; the simulation cannot detect the text, etc.
+
+    **A:** The real machine can prevail;
+    If the simulation cannot detect the text, etc., you can try to change the code at will (add, delete, newline, etc.) and then click to compile
+
+
+- 4.5 Prompts such as no response for a long time appear when the phone is debugged or running
+
+    **A:** Please continue to wait, model inference will take some time