Hi～ 我是前端学徒业枫（@Malpor），今日为咱们带来一篇硬核前端智能化教程，真手把手教你用机器学习打造一个纯前端作业的图标智能辨认东西。并附上github官网无缺代github下载码，一起来领CSS会前端智能化的魅力吧～
布景
现在的前端组件库都运用 Iconfont 来处理图标，跟着时刻算法规划与剖析推移，图标越来越多源码编辑器源码之家编程猫下载，图标的命名也形形色色，很难捆绑。开发者恢复规划稿时，常常要人肉从几百个图标中寻找对应的图标github中文社区。有时候连规划师都找不到，导CSS致重复增加图标。
最近发现在 AntDesign前端工程师 官网有以GitHub图搜图标的功用，用户对规算法的五个特性划稿或恣意图片中算法剖析的意图是的图标截图，点击/拖拽github怎样下载文件/粘贴上传，就能够查找到匹配度最高的几个图标：AntDesign Icon ，功用开发者文章
这个功用很好的处理了上面说到的问题，但还有些超源码本钱神兽宠店缺少：
- 截图最好是正方形的，不然拉伸后辨认率会下降（后源码编辑器编程猫下载面会说明）。
- 只能辨认 Ant前端开发需求学什么Design 的图标。
为了处理这些问题，咱们挑选自己打造一个前端图标辨认东西。下面将以咱们团队的开源组件库 Clo源码超市ud Design 为例，手把手教你打造纯前源码端的专算法的时刻复杂度取决于属图标辨陈涉世家翻译及原文认东西。算法剖析的意图是（无缺代码放在文末）
术语简介
简略介绍几个术语，了解的同学能够直接越过。
机器学习陈涉世家翻译及原文
机器学习研讨和构建的是一源码编前端开发辑器编程猫下载种特别算法（而非某一个特算法是什么定的算法），可源码本钱以让核算机自己在数据中github永久回家地址学习然后进行猜测。
所以，机器学习不是某种详细的算法，而是许多算法的总称。github官网
机器学习包括：线性回github官网归、贝叶斯、聚类、决策树、深度学习等等。前面 AntDesign 的模型是通算法的五个特性过深度学习的代表算法 CNN 练习得到的。
CNN 卷积神经网络
卷积神经网络（Convolutional Neural Networks, CNN）是一类包括卷积核算且具长沙市气候有深度结构的前馈神经网络（Feedf前端和后端哪个薪酬高orward Neural Netgithub直播途径永久回家works），最常用于剖析视觉图画。
CNN 能有用的将大数据量图片降维到小数算法的时刻复杂度取决于据量，且保存图画特征，非常适宜处长沙师范学院理图画数据。即使图画翻转、旋转或CSS变换位置也能有用辨认，常用来处理：图画分类检索、政策定位监测、人脸辨认等等。
开端行为吧
我源码站们要对图标进行辨认，归于机器学习中经典的“图画分类”问题。CNN(卷积神经网络) 能够有用的辨认前端图标，但是无法习陈涉世家翻译及原文气拉伸变形的场景。由于模型输入时要先把图画变换为正方形规范，截图规范不对会导致图画拉伸变形，算法导论下降辨认率，甚至辨认过失。
常用的前端工程师解法源码本钱有两种：
1、纯机器学习：通过增加不同拉伸状况的样本，让模型习仓鼠寿数气变形的图画。
2、机器学习 + 图画处理前端开发是干什么的：用图画处理算法对数据进行裁剪，确保图画挨近正方形。
第一种办法需求生成许多的操github直播途径永长沙师范学院久回家练数据，练习速度变慢，而且拉伸变形的状况很难遍历。第二种办法只需求进行简源码本钱略的图画处理就能够有前端面试题用进步辨认率，所以我挑选了它。那毕竟作业流应该是这样的：
接下来我会从 样本生成、模型练习、模型运用 三部分来介绍无缺的进程。
样本生成
图源码像分类的练习样本都是图片，咱们的图标则是 iconfont 渲染在页前端开发需求把握什么技能面中的。能够源码站天然想到算法剖析的意图是用 样本页面 + Puppeteer 截图来生成样本。但截图速度很慢，我也不想用 F算法的特征aas 服务，所以想了长沙师范学院个本地生成的办法：
首要人工把图标库的css部分转为js：
这样就能把图标当作文本制作在 canva源码本钱s 上，并用图画算法裁剪四周的空白区域：
// 用离屏 ca源码编辑器编程猫下载nvas 制作图标
offscreenCt前端和后端的差陈涉世家翻译及原文异x.fo前端nt = `20px NextIcon`;
off前端开发需求把握什么技能screenCtx.前端开发需求学什么fillText(labelMap[labelN算法剖析的意图是a长沙师范学院me]);
/超神圣骑士/ 用 getImageData 获取图片数据，核算需裁剪的坐标
const { x, y, width: w, height: h源码同github下载享网 } = getgithub永久回陈涉世家翻译及原文家地址CutPosition(canvasSize, canvasSize, off算法剖析的意图是screenCtx.getImageData(0, 0, canvasSize, canvasSize).data);
// 核算需裁剪的坐标
fgithub官网unctCSSion getCutPosition(width, heiCSSght, imgDat源算法的时刻复杂度取决于码a) {
let lOffset = width; let rOf前端工程师fset = 0; let tOffset = height; let bOffset =算法的有穷性是指 0;
// 遍长沙商贸旅游作业技能学院历像素，获取最小的非空白矩形区github中文官网网页域
for (let i = 0; i < width; i++) {
for (let j = 0; j < height; j++) {
const pos = (i + width * j) * 4;
if (notEmpty源码(imgData[pos], imgithub打不开gData[pos + 1], imgDa长沙师范学院ta[po前端开发需求把握什么前端技能s + 2], img算法Data[pos + 3])) {
// 调整 lOf算法的有穷性是指fset、r算法工程师Offset、CSStO前端和后端哪个薪酬高ffset、bOffset
// 略
}
}
}
// 假定形状CSS不是正方形，将其扩展为正方形
const算法的特征 r = (rOffs前端开发是干什么的et - lOffset) / (bOffset -前端工程师 tOffs源码站et)算法导论;
if (r ！== 1) {
// 略
}
retugi算法的有穷性是指th陈思思ub打不github下载开rn { x: lOffset, y: tOffset, widgithub算法的五个特性下载超神兽宠店th: rOffset - lOffset, height: bOffset - tOf算法规划与剖析fset };
}github中文官网网页
// 阈值 0 -源码本钱 255
const d = 5;
// 判别是否非空白像素
function notEmpty(r, g,仓鼠养殖八大忌讳 b, a) {
return r < 255算法的时刻复杂度是指什么 -长生十万年 d &&am前端和后端哪个薪酬高p; g < 255 - d &am算法剖析的意图是p;& b < 255 - d;
}
// 用 canvas 裁剪 & 缩放图画，导出为 base64
ctx.drawImage(offscgithub打不开reenCanvas, x, y, w, h, 0, 0, 96, 96);
canvas源码超市.toDataURL('image/jpeg');
生前端开github中文社区发需肄业什么成一张图片的逻辑就写完了。算法的时刻复杂度是指什么改造一下，遍历不同图标、不同字github中文社区号，能够得到全量的样本：
const f算法的五个特性ontStep = 1;
const fontSize = [github官网20, 96];
labels.map((lab前端框架elName) => {
// 遍历不同前端学什么的前端工程师字号制作图标
fo长沙市气候r (let i = fontSize[0]; i <= fontSize[1]; i += fontS前端面试题tep) {
// ...长沙商贸旅游作业技能学院before
offscreenCtx.f源码怎样做成app软件ont = `${i}px Nex前端学什么tIcon`;
// 其它逻辑
}
});
通过 Blob 将数据作为一个github永久回家地址 json 下载github打不开：
const resultData = /* 生满足量数据 */;
const aLink = document.createElem长沙市气候ent('a');
const blob = new Bl前端开发需求把握什么技能ob([JSON.stringify(resultData, null, 2)], { type : 'agithub直播平台永久回家p长沙市气候plication/json' });
aLink.源码github打不开之家download = 'icon.json';
aLink.前端hrefgithub中文社区仓鼠寿数 = URL.createObjecgithub怎样下载文件tURL(blob);
a源码长沙商贸旅行工作技能学院编辑器编程猫下载Link.click();
这样就得到了包括几万张（350个图标，每个分类约70张图）样本图片的大 json，大约前端长这样：
[
{
"name": "smi前端工程师le",
"data": [
{
"url"超神源码怎样做成app软件兽宠店: "data:image/jpeg;base6算法4,/9j/4AA超神兽宠店...IkB//9算法的时刻复杂度是指什么k=",
"size超神兽宠店": 20
},
{
"url":前端面试题 "data:image/jpeg;base64,/9j/4AA...JAf//Z",
"size": 2github中文社区1
},
...
]
},
]
毕竟写一个简略的 node 程序，把每个分类的样本依照练习前端工程师集70%，验证集20%，查验集10%的份额拆分打散并存储为图片文件算法剖析的意图是。
--- tra前端开发需求学什么in
|-- smile
|-- smile_3.jpg
|-- smile_7源码之家.jpg
|-- cry
|-算法的特征- cry_2前端工程师.jpg
|-- cry_8.jpg
...
--- validation
|-- smile
|-- cry
...
--- test
|-- sm前端开发需肄业什么ile
|算法规划与剖析-- cry
...
这样咱们就得到前端开发需求把握什么技能了无缺的练习样本，而且生成速度很快，作业一github中文社区遍只需1分钟左右。然后把三个目录一起打包成一个 zip 文件即可，由于下一步练习只支撑 zip 格局。前端和后端哪个薪酬高
模型练习
机器源码本钱学习东西有许多种，作为一个前端，我毕竟选超崇高骑士择运用 Pipcgithub直播途径永久回家ook 来练习。github官源码共享网网
Pipcook 项目是一个算法是什么开源东西集，它能让 Web 开发者更好地运用机器学习，然后敞开和加快前端智能算法的特征化年代！
Pipcook 的github中文官网网页设备和教程看官网（链接）即可，要注意现在只支撑 Mac &github下载amp; Linux，Wind算法导论ows 暂时无法运用（W算法剖析的意图是in前端面试题dows 能够运用 Tensorflow.js 练习）。
写一份 pipcook 的配备项：
{
"plugins": {
"dataCollect": {
"package": "@pipcook/plugins-i前端和后端哪个工资高mage-classification-data-c算法的五个特性ollectgit超神圣骑士hub中文官网网页",
"param源码超市s": {
"url前端开发": "file://绝对路径，源码同享网指向上一前端学什么步打包的文件.zip前端开发需求把握什么技能"
}
},
"dataAccess": {
"pa源码本钱c源码kage": "@github中文官网网页pipco超算法剖析的意图是神兽宠店ok/plugins-pascalvoc-data-access"
},
"dataProcess": {
"package": "@piCSSpcook/plugins-tfjs-image-classification-process",
"params": {
"resize": [224, 224]
}
},
"modelDegithub敞开私库fine": {
"package"前端和后端哪个薪github中文社区酬高: "@pipcook/plugithub直播平台永久回家gins-tfj算法是什么s-mobilenet-model-defin算法的特征e",
"params":github官网 {}
},
"modelTrain": {
"package算法工程师": "@pipcook/plugins-imag前端和后端的差异e-classificati前端框架on-tfjs-model-train",
"params": {
"batchSize": 64,
"epoch前端和后端的差异s": 12
}
},
"modelEvaluate": {
"package": "@pipcook/plugins-image-classification-tfjs-model-evaluate"
}
}
}
运用 Pipcook 配套的 Cli 东西开端练习：源码年代
$ pipcook run 上面前端开发需肄业什么写的配备项.json
看到呈现 Ep长沙商贸旅行工作技能学院ochs 和 Iteration 字样说明练习成功开端了。
...
ℹ [job]源码之家 running modelTrain start
ℹ start l前端面试题oading p算法导论lugin源github怎样下载文件码编辑器手机版下载 @p长生十万年ipcook/plugins-image-classification-前端tfjs-model-trai算法的时刻复杂度取决于n
ℹ @pipco源码之家ok/plugins-image-classification-tfjs-model-traigithub中文官网网页n plugin is loaded
ℹ Epoch 0/12 start
ℹ Iteration 0/303 result --- loss: 5.969481468200684 accuracy: 0
ℹ Iteration 30/303 result长沙市气候前端和后端哪个工资高 --- loss: 5.65574312210083 accuracy: 0.015625
ℹ Iteration 60/303 result --- loss算法导论: 5.前端结构293github中文算法的五个特性官网网页442726135254 accuracy源码本钱: 0.0625
ℹ Iteration 90/303 result --- loss: 4.970404624938965 accuracy: 0.03125
...
两万多张样本以上面的参数在我的 Mac 上练习大约需求两个小时，期间电脑的 c长沙师范学院p源码之家u 资源源码之家都会被占用，所以要找好闲暇的时刻练习。假前端定半途要停g源码编辑器ithub打不开下来，用 c仓鼠寿数ontrol + c 是没用的，需求先用 pipcook job list 检查使CSS命列表，再用 pipcook job stop <jobId> 来连续练习。
练习的时长与：样本的数据量、e仓鼠养殖八大忌讳pochs 和 batchSize前端 有关。
/* =============== 两个小时后… =============== */
练习完毕，能看到毕竟的损失率(越低越好)和准确率(越高越好)：
...
ℹ [job] running modelEvaluat源码本钱e start
ℹ start loading plugithub中文官网网页gin @pip源码编辑器cook/plugins超神兽宠店-image-classification-tfjs-model-evaluate长沙市气候
ℹ @pipcook/pgithub官网lugins算法剖析算法工程师的意图是-image-classification-tfjs-model-evaluate plugin前端开发需肄业什么 is loa源码编辑器编程猫下载ded
ℹ Eva陈涉世家翻译及原文lu算法剖析的意图是github打不开ate Result: loss: 0.05339580587460659 accuracy: 0.9850694444444444
...
假定损失率大于 0.2，准确率低于 0.8，那练习的CSS效果就不太好了，需求调整参数或样本，然后github怎样下载文件从头练习。
一起 pipcook 会在配备项 json 同目录下创立一个 o源码本钱u源码tput 文件夹，里边包括了咱们需求的模型：
output
|-- logs # 练习日志文件夹
|-- model # 模型文件夹，里源码之家边两个文件就是毕竟需求的产品
|-- weights.算法的时刻复杂度是指什么bin
|-- model.前端json
|-- metadata.json前端和后端的差异 # 元信息
|-github下载- package.json #算法 项目信源码编辑器息
|-- index.js # 默许进口文件
|-- boapkg.js # 辅佐文件
模型运用
由于用的 Pipcook 插件底层调git仓鼠寿数hub下载用 Tensorflow.js 进行练习，所以模CSS型能够直接在源码本钱前端页面作业。
咱们先前端工程师把生成的 model.CSSjson 和 w算法工程师eights.bin 放在同一目录下存好。然后找到 metadata.json 中的 output.dataset 字段，是长沙商贸旅行工作技能学院个 Json 字符串，反序列化后找到的 label算法规划与剖析Array 特征的值而且存下来：
// 现在这个次第是随机生成前端和后端的差异的，和样本陈涉世家翻译及原文生成时的次第不一样，不要稠浊了
const前端和后端的差异 labelArray =源码编辑器 ["col-before","h1",前端开发需求学什么"solid源码共享网Down","add-test",前端工程师...前端];
准备就绪，只需再写一些 Tegithub打不开nsorflow.js 代码就能够进行辨认了。
import *github永久回家地址 as tf算法剖析的意图是 from '@tensorflow/tfjs';
const modelUrl = 'model.json 的访问地址';
// 加载模型
model = await tf.loadLayersModel陈涉世家翻译及原文(前端学什么modelUrl);
// 对输入图画裁剪
const { x, y, width: w, height: h } = getCu源码超市tPosition(imgW, imgH, offscr源码站eenCtx.getImageData(0, 0, imgW, imgH).data, 'white');
ctx.dra算法的时刻复杂度取决于wImage(off长沙商贸旅行工作技能学院scre长沙市气候enCanvas, x, y, w, hgithub打不开, 0, 0, cutSize仓鼠养殖八大禁忌, cut长沙商贸旅游作业技能学院Size);
//github是干什么的 图画源码编辑器手机版下载转化为 tensor
const imgTensor = tf.im算法的时刻复杂度取决于age
.res源码本钱izeB算法的有穷性是指igithub中文社算法规划与剖析区linear(tf.bro算法剖析的意图是wser.fromPixels(can源码年代vas), [224, 224前端框架])
.reshape([1, 224, 224, 3]);
// 模型辨认
const pred = model.pred源码之家ict(imgTensor).arra源码站ySync()[0];
// 找出类似度最高的 5 项
const rgithub中文社区esult = pred.map((score, i仓鼠养殖八大禁忌) => ({ sc源码编辑器编程猫下载ore, l陈思思abel: labelArray[i] }))
.sort((a, b) => b.score - a.sc前端开发ore)
.slice(0,仓鼠寿数 5);
功德圆满
现在能够开端体会前端开发需肄业什么长沙市气候图标辨认的能力，享用机器学习带来的便当了。这是一个纯前端东西，无需额外后端服务，能够在静态网长沙市气候站上安算法的五个特性置，非常适算法的时刻复杂度取决于合在组件库网github打不开算法的时算法工程师间复杂度取决于站中查找图标的场景。团队有自己的图标库也彻底没问题，源码之家只需按github永久回家地址照进程长沙师范学院走，就能练习出专属的模型。
无缺代码见：github.com/ma算法规划与剖析plor/icon…
总结
从开端写代码到模型能用花了一个周末加两前端框架个晚上，而建立环境和练习模型的时刻占了很大份额。Pipcook 尽管运用简略，省去了许多作业，但入门也有不少坑：文档稀少，插件的参数只要看源码才理解，作业进程有一些潜规则需求不断试错。期源码怎样做成app软件望 Pipcook 的文档能及时更新和保护。
假定有什么疑问能够在谈论指出，欢迎咱们体会交陈涉世家翻译及原文流～
常见问题
- 图标库假定有 新增/批改 图标怎样办？答：需求从头练习模型。
参考资料
斯坦福《机器学习》课程
《Tensorflow.js 海量图标，毫秒级辨认！》
Tensorflogithub敞开私库w.js 官网
Pip源码本钱cook 官网
一文看懂机器学习
一文看懂卷积神经网络 CNN
参与咱们
咱们是阿里云的 TXD（体会技能github打不开）团队，诚招前端和规划师，22届的实习生校招也在炽热进行中，感兴趣的同学能够联络我了解更多信息：zhaoye.zzy@alibagithub打不开ba-incgithub打不开.com
