学习日志-《掘金/知乎-前端智能化》笔记

前言

本文记录了学习掘金/知乎-前端智能化过程中的所有笔记。

2. 2021前端智能化的总结和展望-https://juejin.cn/post/6966404264633565215
3. 智能化效果图/流程图
4.  

   1. 前端智能化看“低代码/无代码” https://juejin.cn/post/6959794588898820127

   2. 今天的人们越来越难以被提前定制好的软件所满足。低代码/无代码开发则赋予人们创造软件的能力，进而帮助人们低成本、即时、高效的直接生产符合自己需求的软件，进而操作众多复杂的电子设备和数字世界建立联结。我认为，这是不可逆的趋势，也是低代码/无代码开发的大方向。

   3. 阿里的各种cook，以及他们的成果及收益

   4. 有哪些成熟的低代码/无代码开发平台？

   5. 低代码/无代码开发未来发展的方向一定是：AI 驱动的“人机协同编程”，将完整开发一个软件变成提供局部的软件功能，类似 Apple 的“捷径”一样，由用户决定这些局部软件功能如何组装成适合用户的软件并交付最终用户。AI 驱动提供两个方面的价值：降低开发成本，降低使用成本

   6. 目前的低代码是搭建

   7. 最初在 D2 上提出并分享“前端智能化”这个概念的时候，我就提出：识别、理解、表达 这个核心过程。我始终认为，达成 AI 驱动的“人机协同编程”关键路径就是：识别、理解、表达。因此，围绕 AI 识别、 AI 理解、 AI 表达我们和国内外知名大学展开了广泛

   8. 前端智能化：让前端跟上 AI 发展的浪潮

   9. 给前端靠谱的机器学习框架”开源github.com/alibaba/pipcook

5. 前端智能化—思维转变之路-https://juejin.cn/post/6844904104448393223
6. 机器学习加持的智能化方法（MaskRCNN 和 Yolo V3 ）能够良好解决传统编程用阈值无法解决的问题
7. 在 imgcook 项目里，为了识别控件我们就用前端技术在SimpleCook平台上生成，puppeteer 就是这里的关键技术，用 Headless 的浏览器渲染页面，然后用程序规则判断或人工标注的方式，把 imgcook、Text、Controller 对应的图像区域标注上 Label，数据集——正确答案的生产过程就结束了
8. 智能化思维的关键问题就是：组织正确答案、选择模型、训练模型，然后呢？用就完事儿了（pipcook）
9. 用智能化思维解决问题的时候，我们并不提供解题思路，模型自己从正确答案里提炼解题思路，一旦遇到新的情况我们可以把这些情况当作新答案喂给模型，模型就能自我进化了，再遇到类似问题自行解决，这个过程就实现了自我进化，我们唯一要做的就是形成这个进化的闭环：模型答案的评估、新答案生成正负样本、构造在线训练的通路。
10. 智能化的难点之一：codereview，unit test
11. 双十一模块 79.34% 的代码是怎样智能生成的-https://juejin.cn/post/6844904039851753479
12. 而到了 2019 年，软件开发行业本身却又在被 AI 所吞噬。你看：DBA 领域出现了 Question-to-SQL，针对某个领域只要问问题就可以生成 SQL 语句；基于机器学习的源码分析工具 TabNine 可以辅助代码生成；设计师行业也出了 P5 Banner 智能设计师“鹿班”，测试领域的智能化结合也精彩纷呈。那前端领域呢？
13. 竞品分析图表
14. 对设计稿的要求高，会导致设计师的成本加大，相当于前端的工作量转嫁给了设计师，导致推广难度会非常大。一种可行的办法是采用 CV（ComputerVision, 计算机视觉） 结合导出图层信息的方式，以去除设计稿的约束，（小目标识别精准度问题、复杂背景提取问题仍待解决）因此可引入机器学习
15. 目前用智能化的方式自动生成 HTML + CSS + 部分 JS + 部分 DATA 的主要分析如上，是Design to Code 的主要过程 ，内部项目名称叫做 D2C ，后续系列文章会使用此简称，集团内外的落地产品名称为 imgcook。
16. 前端智能化 D2C 能力概要分层 图
17. *识别不全面、识别准确度不高 **一直是 D2C 老生常谈的话题，也是我们的核心技术痛点
18. 2019 双十一落地 D2C 代码生成占据了 79.34%
19. 前端智能化在阿里云大数据研发平台中的实践-https://juejin.cn/post/6951596501961277448#heading-0
20. 主要是前端+AI，智能代码推荐，代码诊断，数据探查
21. 前端生产方式：过去 10 年回顾和未来 10 年展望-https://juejin.cn/post/6844904164548411400#heading-13
22. 前端智能化技术大图
23. d2~3 年内，前端智能化从业者数量翻倍，AI 在前端领域内或多或少有一些产品形态上的应用，终端开始浮现各种前端机器学习框架，用户产品在智能化体验方面的设计也有对应的倾斜，社区上也开始浮现出各种前端智能化的工程框架、训练框架和 AI 平台；
    3~5 年内，前端智能化从业者数量继续增长，传统前端已经被淘汰，前端领域内智能化在特定领域内小有成绩，可以解决特定领域内的一些业务或人力生产效率问题，终端智能体验会趋渐成熟，给用户带来的沉浸式体验增强，线上线下无屏化无差异体验趋近相同，社区上开始开源一些前端的智能化产品；
    5~10年内，前端智能化从业市场已趋近饱和，端智能体验设计者应该在市场上比较吃香（如沉浸式人机对抗游戏等），nocode 问题应该能彻底解决，但同时带来其他的消费诉求，可能会引入新的领域难题
24. 前端想解决问题，还是得尽快上手机器学习。至于具体怎么上手在此就不做过多介绍了，网上的课程有很多，也可以看西瓜书上手，但关键是动手。可以先从 CV 领域入手，NLP 工程对个人来说单机部署有点难，得借助云（比如谷歌的 TPU 平台）。
25. Dumbo - 智能化 Dva 模块生成-https://juejin.cn/post/6955303774151786503
26. Dumbo 是一个利用图像识别算法，一键生成前端代码的智能开发平台。目前已经落地于多个阿里云控制台及中后台项目。首先，Dumbo 的基本链路为通过一张图片，利用智能化技术识别图片中各种信息数据，在通过DSL引擎转化为符合约定规范的 JSON 描述（即 Schema ），再通过可视化搭建平台进行人工微调修正，最后生成 React 模块代码。
27. 初步的实现中，最终的代码生成，会根据 Schema 节点，手动的去创建 AST 节点，最终根据 Schema 生成整张 AST，从而获得最终的代码。但是操纵 AST 的成本较高，再加上 AST 的可读性也几乎没有，对于某些需要优化的场景，AST 笨重且臃肿，所以此次方案摒弃 AST，参考集团的一些代码生成的经验，采用直接字符串拼接的方案。
28. 为什么会有“需求文档生成代码”？-https://mp.weixin.qq.com/s/_A0LATzlYsMtJQfPBGcHhA
29. 提到 D2C，我们先回顾下应用 D2C 能力的 Imgcook 产品今日的发展现状，从下图可以看到 Imgcook 的发展数字比较可观，且应用覆盖了 2020 年双 11 会场 90%+ 的模块开发，出码可用率达到 79.26%，且需求吞吐量提升 1.5~2 倍，给前端研发带来实质性的提效
30. PD 基于设计稿来完成 PRD 会更佳方便直接，将 PD 原来书写 PRD 的工作转变成基于设计稿来标注业务信息的工作
31. P2C会先生成一版标注稿，待产品经理（pd）标注后最后生成代码
32. P2C的流程图
33. canvas图像识取技术以及智能化设计的思考-https://juejin.cn/post/6970201565756030984
34. 获取图片的主要颜色（平均颜色r /= img.width * img.height）
35. 智能化时代的代码缺陷检查探索-https://juejin.cn/post/6935413169271603208
36. 国内外各大厂的代码检测实践
37. 业界鼓吹的「前端智能化」有什么落地案例吗？-https://www.zhihu.com/question/396472350
38. 阿里技术：前端智能化发展历程 重要
39. 阿里技术：Samplecook:样本制造引擎
40. 阿里技术：智能还原的核心链路构成了 D2C 的核心技术体系，并通过度量体系来衡量核心还原能力和研发提效效果。下层依托算法工程体系提供核心技术体系中智能化能力的底层服务，包括样本制造、算法工程服务、前端算法工程框架，上层通过 D2C 研发体系承接智能还原的后置链路，通过提供可视化干预能力满足用户二次迭代的需求，并通过将工程链路内置到 imgcook 平台实现一站式开发、调试、预览和发布来提升整体的工程效率。
41. 阿里技术：D2C 系统交付分级参考标准图
42. 知乎用户：前端物料推荐（组件识别），代码补全。-前端智能化落地
43. 前端智能化 ——从图片识别UI样式-https://zhuanlan.zhihu.com/p/207308196
44. 前端智能化，就是通过AI/CV技术，使前端工具链具备理解能力，进而辅助开发提升研发效率，比如实现基于设计稿智能布局和组件智能识别等。
45. 本文要介绍的是前端智能化的一类实践：通过计算机视觉和机器学习实现自动提取图片中的UI样式的能力。
46. 本文基于OpenCV-Python实现图像的样式检测，主要分为三步： 1. 从图片检测并分离组件区域； 2. 基于组件区域进行形状检测； 3. 对符合规则形状的组件进行样式计算。
47. 2020前端智能化趋势：tensorflow.js生态-https://zhuanlan.zhihu.com/p/100807794
48. 一些常见的图片/文字/音频识别的机器学习库
49. 一个前端智能化的实践-https://zhuanlan.zhihu.com/p/97881811
50. 之前设计稿生成代码需要给设计师提供大量的规范和要求，而设计师对这些要求有个人解读，设计师的设计习惯也千差万别，最终造成大量Bad Case让规范失效。机器学习借助计算机视觉对设计稿进行识别，无法直接用阈值和规范测量计算的一些视觉内容，可以借助机器学习进行识别从而辅助规则提升兼容性
51. D2C的流程图
52. 前端智能化是依托哪些技术实现的？-https://www.zhihu.com/question/418000417
53. 阿里技术：最初，前端智能化方向的提出是为了给前端技术带来变革，借助 AI 和机器学习的能力拓展前端，就像拥有望远镜人类就有了神话中的千里眼，拥有了 AI 前端也会在自身能力的基础上产生更强的“超能力”。随后，在保持这个目标推动的时候，发现很难落地。通过思考 AI 的能力特点、前端的生存现状，决定从“解决一线研发人员问题，提升一线研发人员幸福感。”为出发点，重构智能化的战略和战术体系。
54. 手把手教你D2C，走向前端智能化-https://zhuanlan.zhihu.com/p/75963201
55. imgcook的界面图片
56. imgcook如果没有组件库，解决的是页面重构问题
57. 前端代码智能化初探-https://zhuanlan.zhihu.com/p/108723699
58. 前端方向智能化产品-- Sophon代码智能提示插件-概率统计算法
59. 初识前端智能化-https://zhuanlan.zhihu.com/p/96960041
60. “前端智能”是在人工智能驱动下的前端技术，就像机器学习是人工智能的子集，前端智能是在前端领域实现智能化的途径和技术。
61. xx用户在xx场景下打开首页，模型还可能提供用户习惯的操作路径及获取服务的方式，以往粗放的：加载模版、拉取资源、获取样式、渲染页面的方式显然无法满足需求，所有步骤都会附加诸多条件，例如：加载白领女性年轻化模版、根据xx场景获取xx资源、根据xx场景获取xx样式……等一系列附加条件。千人千面的预加载？？