DappWind

React Conf 2021 React大会总结

2021-12-13T18:54:16.000Z

本次react 大会我认为技术层的重点在react服务端渐进渲染和 react native desktop。

一. Suspense 和服务端渐进渲染

Suspense 是解决 加载中 的问题。

之前这种异步加载的加载中状态是使用state，手动来控制显示隐藏，多个接口请求时，还需要手动提升状态。

Suspense 封装了这个逻辑，其实这个之前已经可以用了，这次最大的改变是在服务端渲染中的支持，这可以解决之前诟病已久的“服务端渲染白屏”问题。

这个问题在我们的私募服务中尤其明显，当服务端的接口很慢时，服务端渲染白屏时间有时要1s，打开体验比不用SSR差很多，后续不得不把慢接口请求都放在了web端，进而实现骨架屏和渐进加载。

服务端渐进渲染 steam server render with Suspense

特性如下：

慢的组件不会拖慢整页的首屏时间
先展示初始html 再流式渲染剩余页面
代码分割跟服务端渲染完整融合起来

steaming HTML

与之前的妥协做法不同（先骨架屏然后交由web渲染），始终是服务端，并且是逐渐渲染的，HTML加载也是渐进式。接口在服务端请求自然会比客户端快。

另外一个特点是不用所有的组件都渲染完就能交互。

show me the code

具体这个steaming HTML怎么实现的大家可以看下这个介绍

https://github.com/reactwg/react-18/discussions/22

而 demo 则可以使用这个例子测试下, 效果很好

https://codesandbox.io/s/kind-sammet-j56ro

server components

这部分在 Hydrogen + React 18 中介绍。shopify的工程师结合react server components 开发了 Hydrogen 这个框架，实现他们的服务端渐进渲染。介绍了些特性。

比如首页初始js会非常小，以及一些特性的图示如下

demo

https://stackblitz.com/edit/shopify-hydrogen-ynuk8b?title=Hydrogen

二. react native desktop

另外一个重头戏就是RN的桌面端了。

facebook messager 和微软的 xbox 商店都使用RN来开发的。

facebook messager之前使用electron开发，列了一些之前不足：

需要维护electron
不支持OpenGL 需要转成 WebGL
Qt开发不便

使用RN开发的优点：

RN支持OpenGL 和原生windowAPI 原生播放器等

对比electron

包体积降低 80%
冷启动时间减低 60%
app崩溃率降低 50%

接下来是微软的开发介绍

微软主要介绍了xbox应用商店使用RN开发，包括桌面版、XSX XSS的主机版

以及选择 js 和 react rn进行开发的原因

xbox的 electron版和 rn版对比：

使用原生组件，视频等性能更好
内存占用从1.6G 降到到 350M
cpu从50%降低到30%

react-native-windows 官网

https://microsoft.github.io/react-native-windows/

三. 其他的一些主题：

keynote

总领介绍了react本次大会的内容。讲得非常好，推荐大家完整看下。

https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1

react docs

这部分介绍了react的可交互新文档

文档里多了 codesandbox 和 expo 可交互的例子。

不管是专家还是新手，都值得通看一遍。

react

https://beta.reactjs.org/

react native

https://reactnative.dev/

React Devtools 调试技巧

https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5

react 18 for app developers

介绍了如何升级到react 18, 以及一些特性的简介。

服务端 Suspense

react memo tab点击效果需要立即响应时，可以用这个来提高速度，在活动页的tab渲染中有过这个问题

cpu slowdown

react without memo

yarn forget
程序会自动化帮着加一些 memo，来提升性能。

On-device Machine Learning for React Native

介绍了RN如何使用机器学习
react-native-pytorch-core

React 18 for External Store Libraries

介绍了如何在三方库使用

The ROI of Designing with React

给设计师介绍react

机器学习入门

2020-09-01T16:35:14.000Z

我们总有一种感觉，机器学习门槛高、难入门。这是因为这里有太多晦涩的概念「神经网络」、「评估指标」、「优化算法」等让初学者老是有种盲人摸象的感觉。甚至连理解一个 Tensorflow 官方 Demo 都感觉吃力，因此不少开发者就有过「机器学习从入门到放弃」的经历。
本文站在全局视角，通过分析一个 TensorFlow 官方的 Demo 来达到俯瞰一个「机器学习」系统的效果，从而让读者看清这个头大象的全貌，帮助初学者入门「机器学习」。

如何理解机器学习系统

「机器学习」的目标就是利用已有答案来寻找规则，从而做出预测。
这与「传统系统」的区别在于：

「传统系统」的目标是获得答案
「机器学习」的目标是利用已有答案获得规则

详解一个机器学习 Demo

学习一项技能最好方法就是去使用它。这部分我们来看一个 TensorFlow Demo。TensorFlow 是 Google 推出的深度学习框架，基本信息我就不多做介绍了。

看到这部分代码的全貌，什么感觉？
我第一次读到的感觉是：「语法都能看懂，但就是不知道你这是要干啥！」

这个 Demo 实际上是要训练一个可以识别手写数字的模型（Model）, 要识别的手写数字长这样：

你也许一下子会有很多问号。手写数字？图片在哪？怎么识别？
别急，下面我来为大家详解这个 Demo。

数据准备

人工智能领域中的数据是什么？我们从 TensorFlow 这个框架的名字中就能看出来 – Tensor（张量）形成的 Flow（流）。
在「人工智能」领域，绝大部分数据都是以 Tensor 的形式存在，而 Tensor 可以直接理解成多维数组。

举个例子: 要把一张图片输入到人工智能模型中。
我们第一反应是要先把图片数字化，用 Base64 来表示这张图、或者用二进制等等。但是对于人工智能系统，最佳方式是把图片转换成 Tensor。
我们试试用 Tensor 来表示一张 像素 3*3 、背景为白色、对角线为黑色的图片：

运行代码之后，我们就得到了那张对角线是黑色的 33 图片。
这就是用一个四阶 Tensor 表示一张图片，Tensor 形状为 (1, 3, 3) 。
同理如果要表示 6000 张 2828 的图片，那么 Tensor 的形状就是 (6000, 28, 28)。

现在我们阅读第一部分的代码：

「MNIST」(Mixed National Institute of Standards and Technology database) 是美国国家标准与技术研究院收集整理的大型手写数字数据库，包含 60,000 个示例的训练集以及 10,000 个示例的测试集，里面的图片长这样。

这些图片都是通过空间的矩阵的方式存储的：

这样我们就明白这段代码的意思了，是从 mnist 中获取用于训练的的数据集集（ x_trian，y_train ），以及用于测试的数据集（ x_test，y_test ）。

x_trian 形状为 (6000, 28, 28) ，表示 6000 张 28*28的图片。
_trian 形状为 (6000,)，表示 x_train 对应的数字答案。

模型（model）是什么

得到了数据集之后，是不是可以开始训模型了？别急，我们要搞清楚模型是什么，Tensorflow 文档是这样定义模型:

在机器学习中，模型（ Model ）是一个具有可学习参数的函数，它将输入映射到输出。最优参数是通过在数据上训练模型获得的。一个训练有素的模型将提供从输入到所需输出的精确映射。

我来帮你们翻译一下这个定义：模型是个函数，这里面内置了很多参数，这些参数的值会直接影响模型的输出结果。有意思的是这些参数都是可学习的，它们可以根据训练数据的来进行调整来达到一组最优值，使得模型的输出效果最理想。

那么模型里参数又是什么？
Demo 当中模型传入的 4 个Layer 又是什么含义？

模型又是如何训练的？

神经网络（ Neural Network ）

神经网络（ Neural Network ）顾名思义，就是用神经元（ Neuron ）连接而成的网络（ Network ）。
那么什么是神经元？

机器学习中的神经元（ Neuron ）源于生物神经网络 – 通过电位变化表示“兴奋”的生物神经元。
在机器学习领域，一个神经元其实是一个计算单元。它需要被输入N 个信号后开始计算（兴奋），这些信号通过带权重（weights）的连接传递给了神经元，神经元通过加权求和，计算出一个值。然后这个值会通过激活函数（ activation function ）的处理，产生输出，通常是被压缩在 0~1 之间的数字。

Demo 当中，第一个 Layer 就是把就是把 28*28 的图片展开成一个包含 784 个神经元一维数组。

...
# 第一个 Layer
# 神经元展开成一维数组
tf.keras.layers
.Flatten(input_shape=(28, 28)),
...

第二个 Layer：

...
tf.keras.layers
.Dense(128, activation='relu'),
...

Layer2 传入了参数 activation='relu'，意思是用 relu 作为激活函数。
我们先来理解下什么是「激活函数」，

当我们的大脑同时接收到大量信息时，它会努力理解并将信息分为 “有用 “和 “不那么有用 “的信息。在神经网络的情况下，我们需要一个类似的机制来将输入的信息分为「有用」或 “「不太有用」。
这对机器学习很重要，因为不是所有的信息都是同样有用的，有些信息只是噪音。这就是激活函数的作用，激活函数帮助网络使用重要的信息，抑制不相关的数据点。
例如 Demo 中，Layer1 输出 784 个神经元，并不是全部激活的。而只有激活神经元才能对 Layer2 产生刺激，而 layer4 输出10个神经元，其中第 2 个神经元激活，表示识别结果为 1 的概率是 99%。

所以 relu 是激活函数的一种，用于神经元的激活 – 根据上一个 Layer 给予的刺激算出神经元最后输出（显示）的那个数字。
Layer2 层有 128个神经元，这128个神经元会和 Layer1 中 728 个神经元相互连接，共将产生 728 * 128 =93184 权重（weights）各自不同的连接。Layer1 中神经元的输出将与连接到 layer2 的权重值进行加权求和，得到的结果会被带入 relu 函数，最终输出一个新的值作为 Layer2 中神经元的输出。

第三个 Layer

1 2	... tf.keras.layers.Dropout(0.2),

Dropout layer 的主要作用就是防止过度拟合。过渡拟合现象主要表现是：最终模型在训练集上效果好；在测试集上效果差。模型泛化能力弱。
Dropout 解决过度拟合的办法之一，就是随机丢弃一部神经元。Demo 中就是使用 Dropout 随机丢弃 20% 神经元。

第四个 Layer

...
tf.keras.layers
.Dense(10, activation='softmax')
...

Layer4 上有 10 个神经元，并使用 softmax作为激活函数，这 10个神经元的输出就是最终结的结果。下图为识别一个手写数字 1 的整个过程，各层神经元逐层激活，最终输出预测结果。

到这里，我们通过了解 4 个Layer之间的作用关系简单的了解了一个神经网络的运作方式。

模型训练补充

要读懂这段代码，我们要先通过一个类比来理解下什么是: 损失函数（ Loss Function ）、优化算法（ Optimization Algorithms ）、评价指标（ Evaluation Metrics ）
假如一名男士要开始锻炼身体，目标是胸围达到 120cm，且身材看起来匀称（别太壮）：

经过反复训练，他的胸围达到了 110cm，那么我们可以把Loss = |目标（120cm）- 当前（110cm）|作为一个最简单的损失函数（Loss Function）。而 Demo 中的 Loss Function 用的是 - 稀疏类别交叉熵（sparse_categorical_crossentropy），这个算法的特点就是擅长分类。
是否达成目标，不能仅仅使用损失函数来判断。身材匀称、美观也很重要，而评价指标（Evaluation Metrics ）的作用就给我们提供了一个评判标准。
接下来我们就要寻找产生 Loss 的规律，Loss 不仅仅是胸围小于 130cm 的损失，胸围大于 130cm 而导致美感损失也是 Loss 的一部分。因此想达到最佳效果，既不能练的太轻也不能练的太用力。我们给予训练要素不同的权重（ Weights ），蛋白质补充权重为w0、胸肌上沿训练强度w1、胸肌中部训练强度w2、胸肌下沿训练强度w3、有氧运动训练强度w4 ，等等的影响因素我们都加上不同的权重。最后得到一组 [w1, w2…wn] 。而通过不断调整[w1, w2…wn] 得出最佳胸肌锻炼的方法，就是优化算法（ Optimization Algorithms ）。
了神经网络的模型、层、权重、优化算法、损失函数以及评估指标等之后，我们就可以读懂 Demo 中那段代码了。现在尝试画一张神经网络的工作流程图，串一串一个神经网络的工作流程。

训练与测试

这部分很好理解，带入数据训练、测试就好。
说一下 epochs 。
在神经网络领域，一个 epoch 是指整个训练数据集的训练一个周期。
1 epoch = 1正向传播（ forward pass ）+ 1 反向传播（ backward pass ）*（我们可以简单的理解，正向传播目的是为了获得预测结果，反向传播目的是调整到最优的权重（weights），来让 Loss 最小化。）*

Demo 中 epochs = 5 是因为 1次 epoch 很可能得不到最优的权重（weights）。既然 1 次不能满足，那就 5 次，5 次还不满足就 10 次，直到效果最小化 Loss 的效果不再变化。

总结

如果认真阅读了本文，那么我相信你已经对人工智能已经有了一点整体的认识，本文给了你一个鸟瞰人工智能的视角，摆脱了盲人摸象的感觉。这虽然不是魔法，能立刻把你变成人工智能大神，但对基本架构的进一步理解会增强你对人工智能的自学能力。无论你是从事前端、后端、全栈等技术开发者，或者只是对人工智能感兴趣，我都希望本文可以带给你一个新的视角去理解人工智能，让你读有所思，思有所得，得有所想，想有所获，或有所益。

原文链接 https://github.com/netpi/explain-a-tensorflow-demo

机器学习生成CRM表单 - 5.Tenserflow服务部署

2020-06-13T16:32:24.000Z

在colab上开发测试完成后，投入到生产中，就要部署为服务了。采用通用restful api的形式，通过接口上传图片，json格式返回识别出的数据。

部署方式

服务框架

由于tf为python语言，所以直接用了python的轻量级框架flask，这里只提供一个接口，就是分析图片内CRM组件的接口。

# -*- coding: utf-8 -*
from flask import Flask, jsonify, request
from service.tf import tfServer

app = Flask(__name__)
ALLOWED_EXTENSIONS = set(['png', 'PNG', 'jpg', 'jpeg'])


@app.route('/')
def root():
    return 'D2C后台服务'


def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS


@app.route('/generate/form', methods=['POST'])
def generate_form():
    if request.files:
        file = request.files['file']
        if file and allowed_file(file.filename):
            file.save('images/'+file.filename)
            result = tfServer('images/'+file.filename)
            return jsonify({'success': 'true', 'data': result})
    return jsonify({'success': 'false', 'message': '请传文件-file'})


if __name__ == '__main__':
    # app.debug = True
    app.run(host="0.0.0.0", port=5000)

flask部分较为简单，服务启动在 0.0.0.0:5000 ，这里需设置host 0.0.0.0否则外网无法访问。

提供一个api接口 /generate/form 方法为POST, flask对于文件上传处理也比较方便，直接 request.files 就可以获取到文件名等信息。file.save 就可以报错到文件目录。对比 node koa 需要中间件 koa-body 处理文件上传，然后fs.createReadStream读取文件流，fs.createWriteStream 写到目标文件中。

allowed_file 函数用于对上传文件类型的简单判断，只允许几个图片的后缀。

随后就是调用colab上测试好的识别方法了，最后输出时通过 jsonify 包装一下。

图像识别服务

上述代码中的 tfServer('images/'+file.filename) 就是调用的service文件夹下的tfServer方法。

机器学习生成CRM表单 - 4.生成前端代码

2020-05-18T12:02:53.000Z

上文我们已经识别出了组件，组件文案。接下来就可以通过这些数据生成前端代码了。

这里沿用阿里DSL的格式，先将识别内容生成通用scheme,再把scheme根据不同的DSL转换为相应语言、框架的代码。这样做一方面提高通用性，另一方面，可以把scheme复制到编辑器中进行可视化编辑。

编辑器demo:

https://blog.dappwind.com/crm-editor/#/zh-CN/

以这个图片为例

表单项自动生成英文驼峰命名

根据元素前面的文字，调用有道翻译的api，翻译出英语，然后再转为驼峰法命名。

# 翻译 获取英文驼峰命名
import json
import requests
import re
 
# 下划线转驼峰
def str2Hump(text):
    arr = filter(None, text.lower().split(' '))
    res = ''
    j = 0
    for i in arr:
        if j == 0:
            res = i
        else:
            res = res + i[0].upper() + i[1:]
        j += 1
    return res
 
# 翻译函数，word 需要翻译的内容
def translate(word):
    word = re.sub(r'[^\w\s]','', word or '默认值')
    # 有道词典 api
    url = 'http://fanyi.youdao.com/translate?smartresult=dict&smartresult=rule&smartresult=ugc&sessionFrom=null'
    # 传输的参数，其中 i 为需要翻译的内容
    key = {
        'type': "AUTO",
        'i': word,
        "doctype": "json",
        "version": "2.1",
        "keyfrom": "fanyi.web",
        "ue": "UTF-8",
        "action": "FY_BY_CLICKBUTTON",
        "typoResult": "true"
    }
    # key 这个字典为发送给有道词典服务器的内容
    response = requests.post(url, data=key)
    # 判断服务器是否相应成功
    if response.status_code == 200:
        # 然后相应的结果
        result = json.loads(response.text)
        text = result['translateResult'][0][0]['tgt']
        return str2Hump(text)
    else:
        print("有道词典调用失败")
        # 相应失败就返回空
        return None

结果打印如下

表单项： 活动名称 ———— 驼峰命名：theNameOfTheEvent
表单项：位置———— 驼峰命名：location
表单项：可配置标题———— 驼峰命名：configurableTitle
表单项： 图片链接 ———— 驼峰命名：imageLinks
表单项：图片跳转链接———— 驼峰命名：picturesJumpLinks
表单项： 基金代码 ———— 驼峰命名：theFundCode

python数据导出

# 将预测结果传入之前的数组
for index in range(len(boxes_batch)):
    boxes_batch[index]['predict'] = predicted_name[index]

# 按照纵坐标排序，排序前是 nparray, 排序后已经是list了
boxes_batch = sorted(boxes_batch, key= lambda item: item['position'][0][1])

print(boxes_batch)
return boxes_batch

结果

[[[[663,170],[200,170],[200,123],[663,123]],"请输入活动名称","* 活动名称 :","Input"],[[[197,497],[197,449],[666,449],[666,497]],"必填","*图片跳转链接","Input"],[[[201,79],[201,31],[660,31],[660,79]],"请输入基金代码","* 基金代码 :","Input"],[[[197,427],[197,380],[665,380],[665,427]],"非必填，不配置不展示","可配置标题","Input"],[[[197,358],[197,307],[666,307],[666,358]],"","位置","Select"],[[[663,266],[200,266],[200,219],[663,219]],"请输入图片链接","* 图片链接 :","Input"]]

每个数组代表一个组件，里面有组件的位置，文案等

后续都放在js中处理，方便些。

生成schema

按照schema格式生成

const path = require('path');
const fs = require('fs');

const data = require('./colab_data');

const scheme = {
  "componentName": "Page",
  "props": {},
  "children": [{
    "componentName": "Form",
    "props": {
    },
    "children": [],  
  }],
}

data.map(item => {
  scheme.children[0].children.push({
    "componentName": "FormItem",
    "props": {
      "label": item[2],
      "name": "",
      "style": {}
    },
    "children": [{
      "componentName": item[3],
      "props": {
        "placeholder": item[1],
        "hasBorder": true
      }
    }]
  })
})

fs.writeFileSync(path.join(__dirname,'../test/data_out.js'), `module.exports = ${JSON.stringify(scheme)}`);

生成的scheme如下

{
  "componentName": "Page",
  "props": {},
  "children": [
    {
      "componentName": "Form",
      "props": {},
      "children": [
        {
          "componentName": "FormItem",
          "props": {
            "label": "* 基金代码 :",
            "name": "",
            "style": {}
          },
          "children": [
            {
              "componentName": "Input",
              "props": {
                "placeholder": "请输入基金代码",
                "hasBorder": true
              }
            }
          ]
        },
        {
          "componentName": "FormItem",
          "props": {
            "label": "* 活动名称 :",
            "name": "",
            "style": {}
          },
          "children": [
            {
              "componentName": "Input",
              "props": {
                "placeholder": "请输入活动名称",
                "hasBorder": true
              }
            }
          ]
        },
        {
          "componentName": "FormItem",
          "props": {
            "label": "* 图片链接 :",
            "name": "",
            "style": {}
          },
          "children": [
            {
              "componentName": "Input",
              "props": {
                "placeholder": "请输入图片链接",
                "hasBorder": true
              }
            }
          ]
        },
        {
          "componentName": "FormItem",
          "props": {
            "label": "位置",
            "name": "",
            "style": {}
          },
          "children": [
            {
              "componentName": "Select",
              "props": {
                "placeholder": "",
                "hasBorder": true
              }
            }
          ]
        },
        {
          "componentName": "FormItem",
          "props": {
            "label": "可配置标题",
            "name": "",
            "style": {}
          },
          "children": [
            {
              "componentName": "Input",
              "props": {
                "placeholder": "非必填，不配置不展示",
                "hasBorder": true
              }
            }
          ]
        },
        {
          "componentName": "FormItem",
          "props": {
            "label": "*图片跳转链接",
            "name": "",
            "style": {}
          },
          "children": [
            {
              "componentName": "Input",
              "props": {
                "placeholder": "必填",
                "hasBorder": true
              }
            }
          ]
        }
      ]
    }
  ]
}

随后调用scheme转前端代码的DSL，我们使用的是antd, 目前还没有好用的DSL，所以在Fusion Design上二次开发，最后生成代码如下

'use strict';

import React, { Component } from 'react';
import { Input } from 'antd';
import { Form } from 'antd';
import { Select } from 'antd';
import styles from './style.js';
const print = function(value) {
  console.log(value);
};
const FormItem = Form.Item;
class Page_0 extends Component {
  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };
    return (
      
        
          '* 基金代码 :'} name={''} {...formItemLayout}>
            '请输入基金代码'} hasBorder={true} />
          </FormItem>
          
            >
          </FormItem>
          
            >
          </FormItem>
          
            >
          </FormItem>
          
            >
          </FormItem>
        Form>
      </div>
    );
  }
}
export default Page_0;

原始原型图如下

智能生成页面渲染如下

机器学习生成CRM表单 - 3.文字识别并关联元素

2020-05-15T14:13:32.000Z

接上文，已经识别出页面元素，接下来需要识别出文字，并与元素关联

https://blog.dappwind.com/2020/05/13/index.html

元素的文字识别

使用 tesseract的效果好很多，所以采用 tesseract。

tesseract测试: https://github.com/yuxizhe/OCR/blob/master/tesseract.ipynb

如果用tesseract对整个图片进行文字识别的话，返回的是要么是全部的字符串，要么是每个字和每个字的坐标，很难与元素关联起来。

尝试了多种方式未果，后来决定采用对每个元素的图片进行单独识别，这样可以很方便的把文字与元素建立关联关系。

元素内文字的识别比较方便，直接调用识别即可。

表单元素前面的文字也是需要识别的，这里采用简单的方案，大概取元素前300px 生成一个图片，对这个图片进行文字识别，结果就是表单元素的介绍文字。

把方法编写成function如下

# 识别元素内及元素前的文字

def element_ocr(cropped, img, x, y, w, h):
  # 识别矩形中的文字
  inner_text = pytesseract.image_to_string(cropped, lang='chi_sim')
  print('元素内文字:  '+ inner_text)
  
  # 识别矩形前的文字 往前300
  textAreaBefore = img[y:y+h,max(0,x-300):x]
  cv2_imshow(textAreaBefore)

  # 识别前序文字
  before_text = pytesseract.image_to_string(textAreaBefore, lang='chi_sim')
  print('元素前区域文字：  '+before_text)

  return inner_text,before_text

结果打印如下

组件0: Input ：     before：*Bundle id:
组件1: Button ：     before：* 更新信息:
组件2: Input ：请输入版本号 (例如: 11.31)     before：* 版本号:
组件3: Input ：ioS     before：* 平台:
组件4: Input ：雪球     before：* APP名:
组件5: Button ：出 点击上传 ipa 文件     before：* 上传ipa 文件:
组件6: Input ：Public     before：* 包类型:

将文字显示在图片上

cv2 的 putText方法不支持直接显示中文，会出现问号乱码

参考这篇文章

https://www.cnblogs.com/vipstone/p/8998249.html

# 中文字体显示
from PIL import Image, ImageDraw, ImageFont

def cv2ImgAddText(img, text, left, top, textColor=(255, 0, 255), textSize=15):
    if (isinstance(img, np.ndarray)):  #判断是否OpenCV图片类型
        img = Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
    draw = ImageDraw.Draw(img)
    fontText = ImageFont.truetype(
        "/content/PingFang.ttc", textSize, encoding="utf-8")
    draw.text((left, top), text, textColor, font=fontText)
    return cv2.cvtColor(np.asarray(img), cv2.COLOR_RGB2BGR)

把展示识别结果的函数修改为

# 在图片上显示结果
# 通过ImageDataGenerator.flow 后 顺序会变化
def result_show_in_image(img, boxes, predicted_name):
  newImage = img.copy()
  for index in range(len(boxes)):
    item = boxes[index]
    box = item[0]
    name = predicted_name[index]
    text = '组件: ' + name + ' ：'+ item[1] + '     before：'+ item[2]
    print('组件'+ str(index) + ': ' + text)
    # 中文字体显示
    newImage = cv2ImgAddText(newImage, text, min(box[2][0],box[0][0]) + 10, max(box[2][1],box[0][1]) - 30)
    # cv2.putText(newImage, name, (min(box[2][0],box[0][0]) + 10, max(box[2][1],box[0][1]) - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (225,0,225), 1)
  cv2_imshow(newImage)

结果如下

机器学习生成CRM表单 - 2.opencv提取后模型分类

2020-05-14T07:10:37.000Z

opencv提取图片中的矩形

opencv 提取图片中的矩形代码

import cv2
import numpy as np
from google.colab.patches import cv2_imshow

#获取图片内矩形函数
def cv_get_block(location):
  img = cv2.imread(location)
  # img resize to 700
  img = cv2.resize(img, (700,int(700/img.shape[1]*img.shape[0])), interpolation=cv2.INTER_AREA)

  # 转为灰度
  gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
  # 边缘检测
  binary = cv2.Canny(gray,50,100)

  #cv2_imshow(binary)

  #检测轮廓
  # RETR_EXTERNAL  表示只检测最外层轮廓
  contours, hier = cv2.findContours(binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

  # 裁剪出的图片
  croppedImage = []
  # 位置信息和文案信息
  positionAndText = []

  for c in contours:  #遍历轮廓
      rect = cv2.minAreaRect(c)  #生成最小外接矩形

      # 计算最小面积矩形的坐标
      # 这个返回坐标点顺序是随机的
      box = cv2.boxPoints(rect)
      box = np.int0(box)  # 将坐标规范化为整数

      h = int(abs(box[3, 1] - box[1, 1]))
      w = int(abs(box[3, 0] - box[1, 0]))
      y = min(box[2][1],box[0][1])
      x = min(box[2][0],box[0][0])

      # 去除太小太大 的矩形，只保留合适的
      if (h > 500 or w > 600):
          continue
      if (h < 20 or w < 60):
          continue
      
      #print(h,w)
      #print(box)
      # 取出图片
      # image[y:y+h, x:x+w]  
      cropped = img[y-5:y+h+5, x-5:x+w+5]

      print('\n 元素识别：')
      cv2_imshow(cropped)

      # 识别矩形中的文字
      inner_text, before_text = element_ocr(cropped, img, x, y, w, h)
      
      # 传出
      positionAndText.append([box,inner_text,before_text])
      
      # 格式化为正方形
      cropped = resize_image(cropped)
      croppedImage.append(cropped)
      # 绘制矩形
      cv2.drawContours(img, [box], 0, (255, 0, 255), 1)
  #cv2_imshow(img)

  # 输出 array 而不是list 
  # 'Input data in `NumpyArrayIterator` should have rank 4. You passed an array with shape', (224, 224, 3))
  # 因为 ImageDataGenerator.flow 输入为 NumpyArray
  return np.array(croppedImage), np.array(positionAndText), img

代码中的关键函数

找轮廓 findContours

findContours 找轮廓

https://docs.opencv.org/2.4/modules/imgproc/doc/structural_analysis_and_shape_descriptors.html?highlight=findcontours#findcontours

本例中使用

1
2
3

# 边缘检测
binary = cv2.Canny(gray,50,100)
contours, hier = cv2.findContours(binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

最小外接矩形 minAreaRect

minAreaRect 最小外接矩形

1	rect = cv2.minAreaRect(c) #生成最小外接矩形

boxPoints 返回矩形坐标

cv2.boxPoints 返回的坐标顺序：
注意：需要注意的是，这个函数返回的坐标是没有严格顺序的，不能根据index来确定，所以取坐标位置时，要用min,max等函数

1 2	h = abs(box[3, 1] - box[1, 1]) w = abs(box[3, 0] - box[1, 0])

image 裁剪图片

image[y:y+h, x:x+w]
因为因为boxPoints返回坐标点顺序是随机的，无法使用顺序计算，需要用min max 取一下

# 取出图片
# image[y:y+h, x:x+w]
# 因为boxPoints返回坐标点顺序是随机的，无法使用顺序计算
cropped = img[
    min(box[2][1],box[0][1])-5:max(box[2][1],box[0][1])+5,
    min(box[2][0],box[0][0])-5:max(box[2][0],box[0][0])+5]

截取的图片进一步处理

使用 ImageDataGenerator.flow

https://keras.io/api/preprocessing/image/

图片的shape是 (224, 224, 3)

flow输入要求为

NumPy array of rank 4 or a tuple. If tuple, the first element should contain the images and the second element another NumPy array or a list of NumPy arrays that gets passed to the output without any modifications. Can be used to feed the model miscellaneous data along with the images. In case of grayscale data, the channels axis of the image array should have value 1, in case of RGB data, it should have value 3, and in case of RGBA data, it should have value 4.

flow 要求的输入shape是4阶 NumPy array，python中 list 和 num array 是不一样的，所以

需要 np.array(croppedImage) 把list 转为 array

注意：还有需要注意的一点是，ImageDataGenerator 返回的数组并不是按照输入的顺序，这点比较坑，需要用label传递对应关系。因为预测完后，还需要这个元素的坐标，才能正确对应。所以这里把坐标传到了label中，得到预期的对应关系。

# create a data generator
datagen = ImageDataGenerator(rescale=(1/255))
# 矩形元素 通过ImageDataGenerator 图像进一步处理
# 需要注意的是，通过flow输出的数据是乱序的，并不会严格安装输入的顺序，所以对应关系要存储在label中
input_data = datagen.flow(images, boxes)
image_batch, boxes_batch = next(input_data)

加载训练好的模型

# 加载模型
html_model = tf.keras.models.load_model('/content/model/')

# 预测元素
predicted_batch = html_model.predict(image_batch)

# 结果归一
predicted_id = np.argmax(predicted_batch, axis=-1)

class_name = np.array(['Input', 'Select', 'Button'])
# 结果对应上名字
predicted_name = class_name[predicted_id]
print(predicted_name)
# 图示结果
result_show(image_batch, predicted_name)

结果

结果如下

待提高

可见识别准确度还有提高的空间，因为模型只训练了一次，数据也少，后续可以进一步提高模型的准确度。

代码

完整代码如下

https://github.com/yuxizhe/HTML-UI-datasets-generate/blob/master/cv%E5%90%8E%E5%88%86%E7%B1%BB.ipynb

机器学习生成CRM表单 - 1.模型训练

2020-05-13T10:08:03.000Z

表单自动生成机器学习模型训练

数据获取

按照HTML表单元素分类，进行截图。因为这里不是目标识别，只是分类，所以自动生成作用不太大。

目录按照如下编排，每个类别建立一个文件夹，里面放相应的截图图片，方便后续处理，对图片形状大小不做要求。

main_directory/
...class_a/
......a_image_1.jpg
......a_image_2.jpg
...class_b/
......b_image_1.jpg
......b_image_2.jpg

数据输入处理

图像预处理

将图片文件预处理后生成浮点数张量，步骤如下：

（1）读取图像文件
（2）将文件解码为RGB像素网格
（3）将像素网格转换为浮点数张量
（4）将像素值（0-255）缩放到（0-1）区间

可以使用python手写这些代码，keras有个预处理函数，可以实现上述步骤。

https://keras.io/api/preprocessing/image/#flow_from_directory-method

我们这样使用

1
2
3

# create a data generator
datagen = ImageDataGenerator(rescale=(1/255))
train_data = datagen.flow_from_directory('图片目录', target_size=(224,224))

target_size 参数会对图片进行预处理，处理为目标大小。这里有个问题，因为我们的html表单元素大部分是长方形的，而这个图像处理是不保持宽高比的，所以元素的形状会改变为正方形，必然会造成信息丢失。

其实很多人发现这个问题并提了PR

https://stackoverflow.com/questions/42467734/keras-how-to-use-imagedatagenerator-without-deforming-aspect-ratio

https://github.com/keras-team/keras-preprocessing/pull/81

https://github.com/keras-team/keras/pull/4987

但是3年过去没和进去。（有空可以提个PR增加这个功能）

所以目前解决方案需要自己处理。

ImageDataGenerator 保持宽高比扩充图片为正方形

参考这篇文章,把填充的内容改为白色

https://blog.csdn.net/u010397980/article/details/84889093

import os
import cv2
import glob
import numpy as np
 
def mkdir(path):
    if not os.path.exists(path):
        os.mkdir(path)
def process_image(img):
    size = img.shape
    h, w = size[0], size[1]
    #长边缩放为min_side 
    scale = max(w, h) / float(min_side)
    new_w, new_h = int(w/scale), int(h/scale)
    resize_img = cv2.resize(img, (new_w, new_h))
    # 填充至min_side * min_side
    if new_w % 2 != 0 and new_h % 2 == 0:
        top, bottom, left, right = (min_side-new_h)/2, (min_side-new_h)/2, (min_side-new_w)/2 + 1, (min_side-new_w)/2
    elif new_h % 2 != 0 and new_w % 2 == 0:
        top, bottom, left, right = (min_side-new_h)/2 + 1, (min_side-new_h)/2, (min_side-new_w)/2, (min_side-new_w)/2
    elif new_h % 2 == 0 and new_w % 2 == 0:
        top, bottom, left, right = (min_side-new_h)/2, (min_side-new_h)/2, (min_side-new_w)/2, (min_side-new_w)/2
    else:
        top, bottom, left, right = (min_side-new_h)/2 + 1, (min_side-new_h)/2, (min_side-new_w)/2 + 1, (min_side-new_w)/2
    pad_img = cv2.copyMakeBorder(resize_img, int(top), int(bottom), int(left), int(right), cv2.BORDER_CONSTANT, value=[255,255,255]) #从图像边界向上,下,左,右扩的像素数目
    #print pad_img.shape
    #cv2.imwrite("after-" + os.path.basename(filename), pad_img)
    return pad_img

def resize(data_dir):
    save_dir = data_dir + "_pad_" + str(min_side)
    mkdir(save_dir)
    num = 0
    for label in os.listdir(data_dir):
        num += 1
        print("%d/%d, label:%s" %(num, len(os.listdir(data_dir)), label))
        mkdir(os.path.join(save_dir, label))
        for img in glob.glob(os.path.join(data_dir, label, "*.png")):
            #print img
            image = cv2.imread(img)
            if type(image) == type(None):
                print("damaged image %s, del it" %(img))
                os.remove(img)
                continue
            img_pad = process_image(image)
            cv2.imwrite(os.path.join(save_dir, label, os.path.basename(img)), img_pad)

打印出处理后的图片

def show_batch(image_batch, label_batch):
  plt.figure(figsize=(10,10))
  for n in range(5):
      ax = plt.subplot(5,5,n+1)
      plt.imshow(image_batch[n].squeeze())
      # plt.title(CLASS_NAMES[int(label_batch[n])])
      plt.axis('off')
image_batch, label_batch = next(train_data)

show_batch(image_batch, label_batch)

训练

把训练方案都列出来

1.全连接训练模型

# 方法一：全连接的训练
model = keras.Sequential([
    keras.layers.Flatten(input_shape=(224, 224)),
    keras.layers.Dense(1000, activation='relu'),
    keras.layers.Dense(100, activation='relu'),
    keras.layers.Dense(6)
])
model.summary()

最基础的入门训练模型

2.卷积神经网络训练模型 CNN

model = models.Sequential()
model.add(layers.Conv2D(32, (3, 3), activation='relu', input_shape=(100, 100, 1)))
model.add(layers.MaxPooling2D((2, 2)))
model.add(layers.Conv2D(64, (3, 3), activation='relu')) 
model.add(layers.MaxPooling2D((2, 2)))
model.add(layers.Conv2D(64, (3, 3), activation='relu'))

model.add(layers.Flatten())
model.add(layers.Dense(500, activation='relu'))
model.add(layers.Dense(3, activation='softmax'))
model.summary()

上面两个模型的介绍可以参考《python》深度学习这本入门书，介绍的很详细。

3.迁移学习训练模型

本来直接照着《python深度学习》，一步一步进行搭建model，进行训练，但是比较慢且效果不太好。

然后在谷歌的在线 tf.js 图片分类的demo页试用了下，

https://teachablemachine.withgoogle.com/train/image

发现训练超级快而且准确，这是什么原因呢？

在github打开了网页源码：

https://github.com/googlecreativelab/teachable-machine-v1/blob/master/src/ai/WebcamClassifier.js#L346-L348

发现其用了训练好的模型 mobilenet。

1	import * as mobilenet from '@tensorflow-models/mobilenet';

这才想起来用的是模型复用-迁移学习。

迁移学习

迁移学习介绍

以人打比方，训练好的模型，相当于一个能熟练掌握C语言的程序员，迁移学习，就是在这个模型上训练新的内容，相当于让这个有丰富C语言开发经验的人去新学习js，肯定会比没有编程经验的人学得快，即比新写模型训练快而准。

tf 的机器学习训练教程

https://www.tensorflow.org/tutorials/images/transfer_learning_with_hub

注意tf的版本要使用比较新的版本，否则会报错，使用tf-nightly。

从tfpub引入训练好的模型， headless model, 就是没有最后分类层的。方便我们迁移训练。

feature_extractor_url = "https://tfhub.dev/google/tf2-preview/mobilenet_v2/feature_vector/2" 
feature_extractor_layer = hub.KerasLayer(feature_extractor_url, input_shape=(224, 224, 3))
# 关闭mobilenet的训练
feature_extractor_layer.trainable = False

建立模型

model = tf.keras.Sequential([
  feature_extractor_layer,
  layers.Dense(3)
])
model.summary()

其实就是加了个最后的分类，这个例子里最后是分为3类

训练

predictions = model(image_batch)
model.compile(
  optimizer=tf.keras.optimizers.Adam(),
  loss=tf.keras.losses.CategoricalCrossentropy(from_logits=True),
  metrics=['acc'])
model.fit_generator(train_data, epochs=10, steps_per_epoch=20, validation_data=valid_data, validation_steps=8)

虽然看起来最后的模型只有简单的两层，但训练效果却很好

保存模型

import time
t = time.time()

export_path = "/content/model/{}".format(int(t))
model.save(export_path, save_format='tf')

使用保存的模型

1 2	reloaded = tf.keras.models.load_model(export_path) reloaded_result_batch = reloaded.predict(image_batch)

智能生成前端代码

2020-04-20T14:27:03.000Z

背景

2017 年，一篇关于图像转代码的 Pix2Code 论文掀起了业内激烈讨论的波澜，讲述如何从设计原型直接生成源代码。随后社区也不断涌现出基于此思想的类似 Screenshot2Code 的作品，2018 年微软 AI Lab 开源了草图转代码工具 Sketch2Code，同年年底，设计稿智能生成前端代码的新秀 Yotako 也初露锋芒，机器学习首次以不可小觑的姿态正式进入了前端开发者的视野。

最近，阿里的imgcook工具，吸引了人们的眼球，基本实现了从设计稿到各种前端代码的自动生成。前面那些项目，使我们对智能生成代码还是保持观望态度，而这个项目的上线，让我们确定了D2C的可行性。

应用

线上页面生成

目前阿里imgcook已经上线，我们整理了使用介绍文档：设计稿生成前端业务代码。对于不需要经常修改的活动页，可以尝试使用并生成代码。对于imgcook是否始终保持免费或者是否能开源，我们保持观望的态度，即使做到开源，相关的模型和组件其实也无法直接使用。不过目前没有自主搭建这方面的强烈需求，可以先用着这个服务。而且短时间很难自主实现这个繁杂的工程。

CRM后台页面生成

不过，相对于复杂的线上页面，CRM后台的页面相对简单，组件基本固定，没有大量的不确定组件识别问题。在前端智能化领域，特别是中后台智能方向上，表单表格的识别是非常重要的一环。因为表单表格的开发工作，占据了中后台前端开发工作量中的绝大部分，如果能够通过智能的手段，从设计稿图片秒级生成表单表格代码，那么将会是巨大的生产力提升。目前imgcook没有开放出这部分，而雪球有大量的CRM，这个是我们目前可以做的方向。

目标

对于CRM后台需求，实现从原型稿截图生成antd前端代码，目标如下图（来自imgcook的博客，只是个动图，功能没有对外开放）：

整体方案

1.检测出所有的组件类型及其坐标。
2.通过文字识别技术和自动翻译技术识别出所有文字及其坐标并翻译为英文。
3.通过代码转换器从上述组件信息和文字信息中提取表单/表格的布局、label、type 、字段等各种属性。

组件检测方案

方案1.机器学习目标识别

样本集生成

机器学习的最重要的是数据集的收集和处理，HTML元素如果采用人工标注来收集处理，会浪费大量人力与时间。因此编写了个代码来自动生成HTML UI 组件数据集。

HTML-COCO-datasets-generate

https://github.com/yuxizhe/HTML-COCO-datasets-generate

可批量自动生成图片，每张图上包括25个 HTML 元素，相应的标注为coco数据格式，放都在 json中。

实现方式：

react 项目负责生成网页
puppeteer 负责生成图片并js生成coco格式标注信息

我们批量生成100张训练图片，10张验证图片，10张测试图片。

每个生成的图片示意如下面两

目标检测

目标检测框架可以理解成是把目标检测算法整合在一起的一个库。其实TensorFlow 不是一个目标检测框架，但它提供目标检测的 API： Object Detection API。

目标检测框架主要有：Detectron、maskrcnn-benchmark、mmdetection、Detectron2。目前使用较广的是Facebook AI 研究院于 2019 年 10 月 10 日开源的 Detectron2 目标检测框架。效果不错。

我们使用 Detectron2。

Detectron2目标检测

在官方例子上修改，在谷歌colab上进行训练，显卡为 NVIDIA® Tesla® P100 16G。模型选择及参数如下，显卡内存占用约5G，5分钟训练完成

cfg = get_cfg()
cfg.merge_from_file(model_zoo.get_config_file("COCO-Detection/faster_rcnn_R_50_C4_1x.yaml"))
cfg.DATASETS.TRAIN = ("my_dataset_train","my_dataset_valid")
cfg.DATASETS.TEST = ()
cfg.DATALOADER.NUM_WORKERS = 2
cfg.MODEL.WEIGHTS = model_zoo.get_checkpoint_url("COCO-Detection/faster_rcnn_R_50_C4_1x.yaml")
cfg.SOLVER.IMS_PER_BATCH = 2
cfg.SOLVER.BASE_LR = 0.00025
cfg.SOLVER.MAX_ITER = 500
cfg.MODEL.ROI_HEADS.BATCH_SIZE_PER_IMAGE = 128
cfg.MODEL.ROI_HEADS.NUM_CLASSES = 4

完整训练程序及结果如下

https://github.com/yuxizhe/HTML-COCO-datasets-generate/blob/master/detectron2_html.ipynb

能正确识别出训练目标

通过不断改进和训练，对于自身生成的组件能识别的不错，但是对于真实原型图识别效果有错误出现，如下图所示。后续可改为在真实原型图上标注的方式，获得样本数据集，提高训练结果准确性。

方案2.openCV 识别矩形 + 机器学习图像分类

用机器学习需要大量的训练样本和人力投入，观察上述检测结果，发现其对组件矩形边框这个必要条件都忽略了。因为我们的对象是CRM原型图，所有组件基本都是矩形，所以直接用openCV 提取出所有的矩形，再进行分类。会比上面的机器学习快。

分类问题的复杂度比目标检测容易很多。

import cv2
import numpy as np
from google.colab.patches import cv2_imshow
for i in range(8):
  img = cv2.imread('/content/pic/crm/'+str(i + 1)+'.png')
  # img resize to 700
  img = cv2.resize(img, (700,int(700/img.shape[1]*img.shape[0])), interpolation=cv2.INTER_AREA)
  #cv2_imshow(img)
  # 转为灰度
  gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
  # 边缘检测
  binary = cv2.Canny(gray,50,100)
  #ret,binary = cv2.threshold(gray, 240, 255, cv2.THRESH_BINARY)

  cv2_imshow(binary)

  #检测轮廓
  # RETR_EXTERNAL  表示只检测最外层轮廓
  #print(cv2.MinAreaRect2(binary))
  contours, hier = cv2.findContours(binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
  #print(contours)
  trueBoxes = []
  for c in contours:  #遍历轮廓
      rect = cv2.minAreaRect(c)  #生成最小外接矩形
      box_ = cv2.boxPoints(rect)
      h = abs(box_[3, 1] - box_[1, 1])
      w = abs(box_[3, 0] - box_[1, 0])
      #print("宽，高",w,h)
      #只保留需要的轮廓
      if (h > 500 or w > 600):
          continue
      if (h < 10 or w < 50):
          continue
      #print("宽，高",w,h)
      trueBoxes.append(box_)
      box = cv2.boxPoints(rect)  # 计算最小面积矩形的坐标
      box = np.int0(box)  # 将坐标规范化为整数
      # 绘制矩形
      cv2.drawContours(img, [box], 0, (255, 0, 255), 3)
  cv2_imshow(img)
  print("矩形元素个数", len(trueBoxes))
  #print(trueBoxes)

使用opencv 识别效果如下

分离出矩形后，再进行图像分类即可，TensorFlow可以很方便实现。

文字识别方案

可以调用收费api或者开源库来识别，这里分别使用开源库 cnocr 和 tesseract 对我们的原型图识别测试，代码及结果如下

cnocr: https://github.com/yuxizhe/OCR/blob/master/cnocr.ipynb

tesseract: https://github.com/yuxizhe/OCR/blob/master/tesseract.ipynb

使用 tesseract 的效果好很多，所以采用 tesseract。

Practice of Flutter Desktop

2020-03-18T12:41:18.000Z

Practice of Flutter Desktop

https://flutter.dev/desktop

Background

We were going to build a cross-platform desktop app, there are two choices: native and electron. Because I have used Flutter before, I remember that Flutter can also build cross-platform desktop apps, so I want to have a try.

The introduce and practice of flutter can be found in the article:

https://blog.dappwind.com/2019/09/01/index.html

Demo

I have already compiled a flutter desktop example, you can download and have an experience.

macOS:

https://file.dappwind.com/snb_store_flutter.zip

windows:

Experience

Very smooth and the interactive experience comparable to a mobile APP.

Development efficiency

Needed to be written in Dart language.

Most of the Flutter UI frameworks are currently designed for the mobile. If you want to use it on the desktop, you need to modify some style codes. We cannot use web UI frameworks such as Ant Design directly.

But if in the future your mobile app is also written in flutter, lots of code reuse can be achieved. Taking “xuegao” as an example, the original app flutter code can directly generate a desktop app without any change.

Progress

project is still under development, the mac version has been merged into the main branch. Windows or Linux platforms, which are in technical preview. You can try Windows and Linux platform support by reading the Desktop shells page in the Flutter wiki.

Ecology

The current flutter ecology is not as good as npm, and the desktop version has not been used by large companies. There are few third-party packages, but some basic packages can be found, For example, the stock chart

https://pub.dev/packages/syncfusion_flutter_charts

Package size

The empty project generation package is about 60M, the “xuegao” installation package is 67M, and after zip compression is 20M

https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar

Currently supports mac navigation bar settings and shortcut keys.

Windows is still under development:

https://github.com/google/flutter-desktop-embedding/issues/105

System notification

Not found

File operations

Support, need permission

Auto update

Not provided by the official, you need to set up on your own.

https://github.com/google/flutter-desktop-embedding/issues/469

Flutter桌面端调研

2020-03-17T12:41:18.000Z

Flutter桌面端调研

官方文档

https://flutter.dev/desktop

背景

我们要做桌面版的客户端，有原生和RN两种选择。因为之前开发过flutter，记得flutter也支持桌面端，所以就试用了下。

flutter的介绍及开发见这篇文章

https://blog.dappwind.com/2019/09/01/index.html

打包好的Demo例子

雪糕应用广场桌面端

mac版下载:

https://tx-1256842980.cos.ap-beijing.myqcloud.com/test/snb_store_flutter.zip

windows:

体验

很流畅，交互效果媲美app。

开发效率

需要用dart语言写。

目前materal UI大部分是为移动端设计的，如果想桌面端使用的话，需要修改。无法使用常见的web ui框架。

不过如果以后app也接入flutter的话，可以实现大量的代码复用。以“雪糕”为例，原有的app代码直接可以生成桌面版。

项目进度

还在开发中，mac版已合入主分支，windows版还未合入主分支，但是也可以预览。

生态

目前生态还在完善，市面上还没有人用到。第三方包比不上web端的多，但基本能找到。比如行情图 https://pub.dev/packages/syncfusion_flutter_charts

体积大小

空项目生成包大概60M，雪糕生成包67M，zip压缩后20M

菜单栏设置

https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar

目前支持mac 导航栏设置、支持快捷键。

windows的还在开发中：

https://github.com/google/flutter-desktop-embedding/issues/105

系统通知

暂时没有找到

文件操作

支持，需要权限

应用更新

官方没有提供，需自行设计

https://github.com/google/flutter-desktop-embedding/issues/469

Flutter在雪球应用广场的实践

2019-09-01T10:27:47.000Z

背景

雪球目前有3个App，雪球、蛋卷基金、雪盈证券，每个app又有各种版本比如feat、rc、sep等等。在开发阶段打出包后，如何能让开发同学测试同学，设计同学，产品经理等快速找到，并方便的安装到手机上？很旧之前是有个网页提供下载，但是年久失修，没有分类不支持搜索，安装也不太方便。所以就有了重构雪球应用广场的需求。

整个重构包括打包优化，后台接口，与前台界面。这里主要介绍前台界面。

19年7月，开始做这个app，大概一个月的时间，从入门学习到公司内部上线，完成3端开发，Android iOS web。也体现出了flutter的优势。

app样子如下:

Flutter

最近flutter异常火热，Flutter是Google开源的跨端UI工具包，能一套代码提供ios android web三端的应用。我们基础研发平台也一直想在雪球内部试用下，当个快速试错者，帮助大家快速踩坑。正好借这个重构的契机，所以选取了flutter的跨端开发框架。结果证明确实很香，没让我们失望。

我们看这个图，除了手机端和web端之外，flutter也是支持电脑端应用和嵌入式应用的开发，除了想跟React Native PK 之外，还想跟桌面端开发框架electron及嵌入式C语言PK下。另外也是谷歌另一个新系统Fuchsia的主要开发方式。

Flutter的优点

为什么这么多厂商使用flutter，根据我近段时间开发flutter的新得体会，列出几点。

1.跨平台，渲染一致，一套代码，多端使用

首先是他的跨平台真的做的很好，不同平台渲染一致性很高，真正做到了一套代码多端运行，而不是像之前的跨端方案一套代码多端修改适配。

这个图是雪糕应用在不同系统下的样子，UI几乎无差别，开发的时候不需要关注平台，android和ios的适配基本没花多长时间。

当时令我眼前一亮的一点是他竟然能把这种一致性延申到了web上。因为当时开发的时候，flutter还是1.7版本，官方还不支持web h5, 所以对能否做出web版没抱任何希望，当时想的是单独开发一套出h5版, 后来客户端开发完后，尝试性用内测分支flutter_web 适配了下，发现还是可以用的。UI体验与客户端差不多，除了有些bug与卡顿。所以既然web也能支持，我想他们之后说的桌面端和嵌入式也很期待。现在1.9 版本 web已经支持了，不用像我开发时，做大量的安装和适配工作了。

注：在今年（2020）我们桌面版选型时，我试用了下flutter桌面版的生成，只需升级下flutter版本，没有任何代码改动就打出了flutter桌面版，界面效果很优秀。文章如下链接。

https://blog.dappwind.com/2020/03/17

2.开发效率高

之前客户端同学一直羡慕我们前端同学开发效率高，代码改动后只要保存下，就能直接在界面上看到效果。 flutter也支持热重载这个功能。可以提高开发效率。

另外就是编辑器的代码补全，每个组件代码前面都有个一个电灯泡，可以直接选择添加哪些代码片段，并不是简单的代码很智能，减少了手动敲重复代码，提高开发效率。

3.UI可深度定制，

第三点就是UI可深度定制，性能媲美原生应用，可以通过下面这个视频看一下。

Flutter 的优点是怎么实现的

为什么会有这些优点，我们简单看一下flutter的框架，底层不调用原生组件，都是用skia引擎画出，所以能有很高的跨平台一致性，UI深度定制性，性能好。

Dart语言

而开发热重载则是Dart语言的一个优势。Dart支持两种模式

JIT (Just-In-Time - 实时编译) 解释模式

AOT (Ahead-Of-Time - 预先编译) 编译模式

debug模式下使用的是解释模式，跟js一样，所以支持热重载，发布打包时，会先编译，性能比js好得多。所以也是flutter性能媲美原生的原因。

1.Dart 的性能更好。

Dart在 JIT模式下，速度与 JavaScript基本持平。但是 Dart支持 AOT，当以 AOT模式运行时，JavaScript便远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助。

2.Native Binding。

在 Android上，v8的 Native Binding可以很好地实现，但是 iOS上的 JavaScriptCore不可以，所以如果使用 JavaScript，Flutter 基础框架的代码模式就很难统一了。而 Dart的 Native Binding可以很好地通过 Dart Lib实现。

3.Dart是类型安全的语言，拥有完善的包管理和诸多特性。

Google召集了如此多个编程语言界的设计专家开发出这样一门语言，旨在取代 JavaScript，所以 Fuchsia OS内置了 Dart。Dart可以作为 embedded lib嵌入应用，而不用只能随着系统升级才能获得更新，这也是优势之一。

4.Dart 2.5 支持了ML代码补全，调用C语言等功能

Flutter项目结构

Flutter编程思想

一切皆 Widget
Widget 是 Flutter 应用用户界面的基本构建单元，每个 widget 都与最终的用户界面的展示紧密相关。不同于其他框架和平台 —— 将视图 (views)、视图控制器 (view controllers)、布局 (layouts) 等其他属性分开，Flutter 拥有统一的对象模型：widget。
一个 widget 可以定义：

一个结构元素（比如一个按钮或者菜单）
一个风格元素（比如一个字体或者配色方案）
布局的一个方面（比如 padding）
等等……

是声明式UI，一切都是widget, 一切都是小组件。
触摸操作也是组件。

下面是一个widget组件的例子，雪糕里有很多不同的app图标，大小，种类，有无边框会有些区别。所以封装成了组件，暴露参数为 app内容，宽度，有无边框。

边框和背景图为最外层widget，里面有个文字的widegt.

这就是全部的icon组件代码。

Flutter 插件/包管理

类似前端 npm , 我问了下客户端的同事，引用第三方的包时，需要直接上github上搜索，并手动下载。比较麻烦，这个pub.dev就采取了前端开发包管理的方式，是个单独的网站，直接搜索，然后添加到pubspec.yaml里面就行。会自动安装。

雪糕用到的插件如下：

以分享插件为例

雪糕主要功能及其实现方式

1.顶部动画及导航栏 - NestedScrollView / headerSliverBuilder / SliverPersistentHeaderDelegate 画出

2.网络请求及页面间数据通信 - http / JSON / event_bus

3.应用内下载及安装 - android: flutter_downloader & path_provider / iOS: url_launcher / web: dart open

4.搜索功能 - SearchDelegate

5.页面框架 - Scaffold / ListView

6.封装组件 - 列表组件 / 卡片组件 / icon组件

7.判断系统环境 - device_info

这个地方罗列了一些主要的效果与功能，我们选取两个来具体说下，

首先是顶部动画和导航栏

我们的设计师设计了非常好看的顶部效果和导航栏样式，使用flutter自带的materal design的UI组件不能满足需求。导航栏背景是个可以动的图片背景，一直延伸到系统状态栏。并且顶部滑动效果，背景多个元素是差速移动的，另外，卡片是压在背景上方，上滑到某一位置后，卡片开始被收到状态栏背景下方。并且还要适配机型与屏幕。

由于刚开始用flutter, 看到设计稿时感觉flutter做不到这个效果，完全没有头绪，后来弄了好几天，换了3个方案，基本实现了这个动效

没有用flutter提供的appbar 相当于自己画了一个。因为flutter有stack层叠的概念，将差速移动的各个元素放在不同图层，每个的定位都加一个运动曲线公式。

代码大概结构如下 stack 元素堆叠了 5个 positioned 图层

开发时还遇到了 listview滚动与appbanner 滚动事件冲突的问题，也是花费了些时间解决，又遇到类似问题的同学可以参考下git代码。

另外介绍下雪糕内安装app的实现方式

安装app ios 与 android很不一样，ios安装直接safari打开一个plist链接。所以用到了url_launcher 这个插件，他会打开链接进而进行安装。

安卓需要先下载再安装，安卓下载涉及到队列数据库等等设置，可以参考flutter_downloader 的说明文档。

打包

RN对比

RN采用原生组件，与系统内的一致性强，但是ios跟android有些差异

第三方包活跃

RN list有些性能问题

Flutter遇到的问题

1.SliverAppBar 与 scroll controler 冲突

SliverAppBar will not collapse when ListView is scrolled
来自 https://github.com/flutter/flutter/issues/26243

https://stackoverflow.com/questions/46817189/sliverappbar-and-listview-with-controller/46853315#46853315

Listview tabbarview 在 customscrollview 中
List 滚动不会引起 appbar滚动

解决：

NestedScrollView 中的 headerSliverBuilder

NestedScrollView 不只可以用 SliverAppBar 还可以接受 SliverPersistentHeader

而 SliverPersistentHeader 中可处理滑动，结合NotificationListener可实现滚动效果。

2.Future 异步需在页面切换走后停止，否则setState报错

https://stackoverflow.com/questions/49340116/setstate-called-after-dispose
1
2
3
4
5
if (this.mounted){
 setState((){
  //Your state change code goes here
 });
}

3.Text hero

颜色会变红，字体会变，会换行

https://github.com/flutter/flutter/issues/10246
https://github.com/flutter/flutter/issues/30647

Text hero
设置颜色、设置字体、设置宽度，依旧效果不太好。

ES APM 监控报警

2019-06-24T07:51:40.000Z

一.背景

日志数据和apm数据被es处理后，能配置出可视化的查询图表，能及时了解server和网站的实时运行情况，但是还是需要人工定时查看。所以对es采集处理后的分类数据和图表，实现自动监控和报警的功能

二.方案

1.es 自己的watcher alert 功能

es 的 basic 授权license不带 watcher功能，需要购买 GOLD license

https://www.elastic.co/subscriptions

2.单独的开源alert服务

https://github.com/daaru00/es-alert

https://github.com/Akagi201/esalert

缺点：无可视化配置界面，用的人不多

3.采用grafana alert

grafana 自带一个go的server服务，可实现可视化报警配置，可以很方便的配置成钉钉群报警机器人。

三.配置

1.grafana 添加es 为database

index name 跟kibana的index一样即可

点击测试，提示成功。

2.配置查询语句，生成图表

查询语句可以在kibana中测试，没问题后再复制到grafana,grafana的数据展示还支持函数处理，感觉比kibana强大方便些，而且更快。

3.配置报警

每个图表可以配置单独的报警，选择方便的钉钉机器人即可。

Gulp老项目升级为webpack打包及相关优化

2019-05-25T07:26:33.000Z

概览

vue 和 js 改为webpack打包
- 升级babel
- 引入webpack config
- 添加webpack loader
- 生成入口列表 entry
- 结合到gulp流程
- 增加可视化打包分析
开发模式热更新
- webpack-dev-server
vue 拆分多入口实现按需加载按需引用vue-component
- vue 文件入口为指定入口
- vue-web
- vue-mobile
- vue-article
- vue-home
- vue-stock
vue 公共资源抽离vue-common
- 增加splitChunks
- chunks 设置只抽取vue部分
js 引用方式修改为从vue引入
- 减少体积
- 不用手动控制js加载
拆分vue路由
lodash 按需引用去除全局lodash
- 减小体积
- 避免冲突
js资源 preload
- 加快速度
vue warning 解决
- 之前的打包方式不会有warning提示
confirm modal 拆分（暂缓）
- 新增的考虑拆分
poliyfill
- 单独引用 30k

背景

snowman项目采用pug渲染 + vue渲染结合，vue渲染部分js资源未按需加载，页面加载全部的js

一. vue 和 js 改为webpack打包

1.升级babel

"devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
}

.babelrc 改用preset-env

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "Android >= 4.0",
            "ios >= 9",
            "ie 9"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    ["import", {
      "libraryName": "lodash",
      "libraryDirectory": "",
      "camel2DashComponentName": false,
    }]
  ]
}

node入口babel升级

require('@babel/register')({
  presets: ['@babel/preset-env']
});
require('@babel/polyfill');

2.引入webpack config

webpack.common.js

webpack.dev.js

webpack.prod.js

entry 打包入口

1 2	'vue-web': './src/vue/web.js', 'vue-mobile': './src/vue/mobile.js',

3.添加webpack loader

rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      // this applies to

DappWind

React Conf 2021 React大会总结

一. Suspense 和 服务端渐进渲染

服务端渐进渲染 steam server render with Suspense

show me the code

server components

二. react native desktop

三. 其他的一些主题：

keynote

react docs

React Devtools 调试技巧

react 18 for app developers

react without memo

On-device Machine Learning for React Native

React 18 for External Store Libraries

The ROI of Designing with React

机器学习入门

如何理解机器学习系统

详解一个机器学习 Demo

数据准备

模型（model）是什么

神经网络 （ Neural Network ）

模型训练补充

训练与测试

总结

机器学习生成CRM表单 - 5.Tenserflow服务部署

部署方式

服务框架

图像识别服务

机器学习生成CRM表单 - 4.生成前端代码

表单项 自动生成 英文驼峰命名

python数据导出

生成schema

机器学习生成CRM表单 - 3.文字识别并关联元素

元素的文字识别

将文字显示在图片上

机器学习生成CRM表单 - 2.opencv提取后模型分类

opencv提取图片中的矩形

找轮廓 findContours

最小外接矩形 minAreaRect

boxPoints 返回矩形坐标

image 裁剪图片

截取的图片进一步处理

加载训练好的模型

结果

待提高

代码

机器学习生成CRM表单 - 1.模型训练

表单自动生成 机器学习 模型训练

数据获取

数据输入处理

图像预处理

ImageDataGenerator 保持宽高比 扩充图片为正方形

训练

1.全连接训练模型

2.卷积神经网络训练模型 CNN

3.迁移学习训练模型

迁移学习

迁移学习介绍

建立模型

训练

保存模型

智能生成前端代码

背景

应用

线上页面生成

CRM后台页面生成

目标

整体方案

组件检测方案

方案1.机器学习目标识别

样本集生成

目标检测

Detectron2目标检测

方案2.openCV 识别矩形 + 机器学习图像分类

文字识别方案

Practice of Flutter Desktop

Practice of Flutter Desktop

Background

Demo

一. Suspense 和服务端渐进渲染

神经网络（ Neural Network ）

表单项自动生成英文驼峰命名

表单自动生成机器学习模型训练

ImageDataGenerator 保持宽高比扩充图片为正方形

三. vue 拆分多入口实现按需加载