QCon上海2023 参会内容分享：LLM 时代的大前端技术趋势-外链论坛

wrjc1hod 发表于 2024-6-29 17:02:06

QCon上海2023 参会内容分享：LLM 时代的大前端技术趋势

转载源自 | 得物技术
目录
1、引言
2、参会内容分享

LLM 赋能声明式前端框架调试的实践与思考
WebNN，Web 端侧推理的将来
利用 LLM 改善开发过程里答疑体验

3、圆桌会专题分享鸿蒙的状况及关联数据
HarmonyOS NEXT 与 AOSP
鸿蒙生态的原生开发框架 ArkUI
关于圆桌会专题的总结4、分享感想
1、引言
QCon 全世界软件研发大会是由于极客邦科技旗下 InfoQ 中国主办的综合性技术盛会，每年在伦敦、北京、纽约、圣保罗、上海、旧金山召开。自 2007 年 3 月份起始举办败兴，已然有超万名有数年从业经验的技术人员参加过 QCon 大会。QCon 内容源于实践并面向社区，演讲嘉宾依据热点专题，面向 5 年以上工作经验的技术团队负责人、架构师、工程总监、研发人员分享技术创新和实践。这次 QCon 全世界软件研发者大会上海站为期 2 天，总共有 17 个主题专场，重点包含 GenAI 和通用大模型应用探索、LLM 时代的性能优化、LLM 时代的大前端技术、加速生成式 AI 落地的最佳实践等，几乎所有的专场都离不开 AI 这个热门专题，能够说是一次以 AI 为主题的技术分享盛宴。此次做为参会者听了 LLM 时代的大前端技术的主题分享，对前端行业与 AI 的结合有了有些不同样的认知，拓宽了技术视野，收获非常多。本文亦重点对这个主题的内容进行分享。
2、参会内容分享
这次大会重点参与了 LLM 时代的大前端技术这个专题下的 4 场分享，与会的分享嘉宾结合详细的应用场景分享了她们在 LLM 时代的大前端技术发展趋势中的机遇和挑战。
1. 实践与思考
by 涂旭辉华为公共研发部 /Web 前端技术专家
此场分享的内容重点是 LLM 在前端调试领域的场景，结合 record&replay 对声名式框架进行交互式调试。研发者经过调试聊天框与模型互动，大模型对缺陷库进行学习加强程序分析推理能力并基于时间戳给出调试意见，研发者结合经验执行调试给出反馈，能够帮忙研发者有效准确定位问题根因，为研发者带来全新研发调试范式。起初我还很好奇，AI 辅助编码亦就算了，此刻还来个 AI 自动调试，并分析问题根因，帮助研发者处理问题。听了嘉宾的分享，增长了不少见识。
1.1 为何要在前端调试行业运用 AI 
分享嘉宾前期做了不少调研，AI 赋能前端的方向重点发力点有：AI 生成页面、 加强 AI 能力调用的 DSL 设计和 AI 辅助研发，唯独在 debug 行业无很好的实践，如下图所示：
<img src="https://q2.itc.cn/q_70/images03/20240329/cb432041f26f4a7daa4d1c7c4bdf82cb.png" style="width: 50%; margin-bottom: 20px;">
因此分享嘉宾结合了机构的实质应用场景，探索了 AI 在前端 debug 行业的实践。详细实践过程中触及的重点技术：程序切片和大模型智能定位分析。这儿不对技术的详细实现过程展开分享，整体的技术架构如下：
<img src="https://q0.itc.cn/q_70/images03/20240329/5f35d4ce444544f4b8091065855195cc.png" style="width: 50%; margin-bottom: 20px;">
其重点执行流程如下：前端模块是供给组件状态及源码执行
程序分析模块进行切片记录调试过程状态
大模型模块推理能力加强程序分析
缺陷变异技术构建优秀缺陷库
大模型基于时间戳给出调试意见，研发者执行调试给出的反馈1.2 AI 在调试行业的应用场景 
分享嘉宾对传统调试工具和 AI 调试工具做了对比，如下图所示：
<img src="https://q2.itc.cn/q_70/images03/20240329/dfac79b446134198ac04839e1c75f6e8.png" style="width: 50%; margin-bottom: 20px;">
<img src="https://q3.itc.cn/q_70/images03/20240329/25d047cf35e54a7a8af2eb97c68d390e.png" style="width: 50%; margin-bottom: 20px;">
能够看到传统的调试工具基于浏览器本身供给的调试能力能够分析问题的原由，AI 调试工具经过录制的视频，结合大模型对程序片段的分析，最后定位到问题的原由，乃至能够定位到详细的代码行数，如下是人机交互的 UI 展示：
<img src="https://q4.itc.cn/q_70/images03/20240329/0f55e32708af41179be3a52cbe1695d6.png" style="width: 50%; margin-bottom: 20px;">
1.3 个人的有些总结 
在嘉宾分享过程中，我始终在思考，经过这么繁杂的技术实现和交互来做 AI 智能调试真的有必要吗，在分享结束之后，我亦问了一个问题：在录制周期的成本其实是很大的，必须实时上报代码片段，操作频繁的话，这个上报的数据就很大，这么大的数据怎样存储？大模型智能分析依赖于回放，那样针对有些必须紧急修复的问题，这个过程势必比较长，这么做真的合适吗？嘉宾给的回答是，详细场景详细分析，AI 智能调试有其适用场景，针对短时就能定位的场景不合适，针对长期很难定位的问题，经过 AI 智能分析还是比较合适的，并且她们亦做过数据分析对比，针对长期难以定位的问题，AI 智能分析的处理效率会高于人工的处理效率。
2.WebNN，Web 端侧推理的将来
by 胡宁馨 & 张敏英特尔 SA TG Web 平台工程
2.1 什么是 WebNN
WebNN 是 Web Neural Network API简叫作，做为一种准许经过浏览器进行神经网络推理硬件加速的办法。由 W3C 颁布的公开工作草案以及始终在研发的 Web 神经网络 API。WebNN 在设计时就思虑到了有些用例，例如人检测、人脸识别、超分辨率、图像字幕、情感分析、噪声抑制等。除了经过 CPU 和 GPU 进行推理之外，Web Neural Network API (WebNN) 供给了 Web 应用拜访此类专有 AI 加速器 NPU 的途径，以得到卓越性能及更低功耗。做为 Java ML 框架的后端，WebNN 将会在几乎不更改前端代码的前提下，为 Web 研发者及她们的制品带来相较于 Wasm，WebGL 更为优异的性能体验。这次嘉宾分享的是关于 WebNN API 的 W3C 标准进度，对 CNN，Transformer 以及更广泛的生成式 AI (Generative AI) 模型的支持状况和计划，以及在 Chrome，Edge 等浏览器的实现发展。
2.2 WebNN 标准规范发展
<img src="https://q9.itc.cn/q_70/images03/20240329/51c1ef62370349a8bd61b0babfcb1421.png" style="width: 50%; margin-bottom: 20px;">
WebNN 草案位置：https://www.w3.org/TR/2023/CRD-webnn-20231219/
2.3 WebNN 工作组 
<img src="https://q9.itc.cn/q_70/images03/20240329/023cbb399473453dbf078bf6d709cdd2.png" style="width: 50%; margin-bottom: 20px;">
2.4 WebNN 的编程模型及在 Chromium 中的实现 
<img src="https://q9.itc.cn/q_70/images03/20240329/7a7a7787002141cea0c823a0545ad1a5.png" style="width: 50%; margin-bottom: 20px;">
<img src="https://q1.itc.cn/q_70/images03/20240329/2a1ed26b25e4470db535995b97c6bd12.png" style="width: 50%; margin-bottom: 20px;">
WebNN 针对区别的模型供给了区别的 ML 框架，例如 ONNX 模型，能够经过如下方式引入：

import{ InferenceSession } from"onnxruntime-web"
引入之后就能够基于此模型去研发有些应用场景的功能了。
2.5 个人的有些总结 
WebNN 供给了一种 web 应用拜访专有 AI 加速器 NPU 的途径，能够恰当的利用硬件资源在 web 端运行大模型，能够得到卓越性能及更低功耗。随着草案的提出以及后续支持的模型越来越多，基于 Chromium 内核的 webview 在区别设备里面的应用场景会越来越广泛。做为前端开发还是必须认识下其后续的发展，拓展更加多业务场景的运用视野。
3. 利用 LLM 改善开发过程里答疑体验
by 段潇涵字节跳动开发⼯程师
3.1 切入点：开发答疑设备人 
在开发行业，不论是提出问题的一方还是解答问题的工程师，答疑工作都是一个避不开的要紧环节。平时答疑遇到的体验问题如下：

提问者视角：等待排队对即时性的影响，认识新技术时通读文档的成本问题
值班人视角：接到太多的简单重复问题，常用知识沉淀的成本问题

此次分享嘉宾从开发答疑设备人为切入点，聚焦于开发答疑这一场景，探讨怎样利用 LLM 技术帮助值班人员提高回复效率，同期帮忙提问者更快地找到问题的处理方法，从而整体优化答疑体验。
3.2 利用 LLM 改善答疑体验思路 
利用 LLM 改善答疑体验思路重点如下：建设知识库，涵盖已有沉淀的实践文档、手册文档、组件库文档站等内容，为常用的咨询类问题利用 LLM + 知识库自动供给回复
利用 LLM 供给答疑过程总结，帮忙值班人员快速沉淀 FAQ
经过自动回复前置拦截 → 未处理进入人工答疑 → 自动沉淀 FAQ 闭环，逐步完善，提高自动答疑的覆盖范围<img src="https://q5.itc.cn/q_70/images03/20240329/0fde195b2012424894fa6bd9f487d8ac.png" style="width: 50%; margin-bottom: 20px;">
<img src="https://q7.itc.cn/q_70/images03/20240329/2fd899cfd8b94af1a61615a5e6ebf240.png" style="width: 50%; margin-bottom: 20px;">
分享嘉宾分享了两种建设智能客服的思路：RAG和 FineTuning。RAG 的优良重点是方便集成现有知识，方便动态更新知识，尽可能消除模型幻觉；FineTuning 的优良重点是定制模型生成内容的风格以及优化模型效果。在业务场景探索之后，分享嘉宾对这两个技术理念进行融合供给了更优的处理思路。
3.3 公司内的落地演进过程 
这儿详细演进过程不做细节分享了，重点对其中内容消费中遇到的文本切割方法的实现思路做个分享，还是特别有借鉴道理的。
方法一：固定 Token 长度的切割
<img src="https://q6.itc.cn/q_70/images03/20240329/7852de396a974c29ad291bd3c37ecadb.png" style="width: 50%; margin-bottom: 20px;">

处理的问题：模型上下文长度限制问题；
存在的问题：文本语义被切断、全文语义丢失问题。

方法二：段落切割
<img src="https://q4.itc.cn/q_70/images03/20240329/102009e0674147c690782d9394f28937.png" style="width: 50%; margin-bottom: 20px;">处理的问题：模型上下文长度限制问题；文本语义被切断问题。
存在的问题：全文语义丢失问题；上下文相关丢失问题。方法三：滑动窗口切割
<img src="https://q6.itc.cn/q_70/images03/20240329/ab0bb1090e2f445793a4517e1bcd6142.png" style="width: 50%; margin-bottom: 20px;">

处理的问题：模型上下文长度限制问题；文本语义被切断问题；上下文相关丢失问题
存在的问题：全文语义丢失问题；消耗更加多的存储空间；检索结果必须消除重叠内容

方法四：下⽂相关、结构补全⽅式切割
<img src="https://q2.itc.cn/q_70/images03/20240329/677f56d682d34997bbe8c93dd285fc41.png" style="width: 50%; margin-bottom: 20px;">处理的问题：模型上下文长度限制问题；文本语义被切断问题；上下文相关丢失问题；利用模型提炼文档摘要。最后的实现：经过结合 RAG 和 FineTuning 的最优解
<img src="https://q4.itc.cn/q_70/images03/20240329/7729ed0018294c79b23f5834f58bc04d.png" style="width: 50%; margin-bottom: 20px;">
3.4 个人的有些总结 
嘉宾分享的内容虽然比较平常，然则真正从 0 到 1 去训练这般的设备人还是必须把握非常多大模型关联的知识，平时运用 ChatGPT 答疑习惯了之后，对详细实现无太多的感知，真正听完别人分享之后，认识其原理细节，才认识到实现有其必定的繁杂性。从嘉宾分享过程中，亦学到了另一一种品质，便是办事情的思路要有条理且清晰，经过持续的实践来验证其可行性，使得技术实现能够达到最优解。具备这种品质当然离不开扎实的基本功和行业专业知识技能，学没止境，后续必须学习的地区还有非常多。
3、圆桌会专题分享
在分享大会的第1天上午有幸参与了由 InfoQ 的技术运营组织的圆桌会专题，专题的内容重点围绕鸿蒙操作系统的发展状况以及日前各大机构与华为的对接状况，参会人员来自安全、美团、百度、华为、阿里和字节的客户端开发和分部负责人，当然亦包含咱们机构客户端的开发朋友。我特别有幸受机构技术运营叶兰的邀请参与了整场圆桌会的讨论，认识了鸿蒙操作系统及生态的有些发展。会后我亦查阅了关联的资料以及华为研发者中心关联的文档，来加深对专题内容的印象。觉得特别有必要给前端开发朋友分享下鸿蒙生态的状况及关联的技术框架，或许针对前端开发来讲是一个不错的技术发展方向。
1.1 鸿蒙的状况及关联数据
如下图所示是 2023 年 8 月 4 日在华为研发者大会上分享的关于 HarmonyOS 的理念及研发者预览版的信息：
<img src="https://q9.itc.cn/q_70/images03/20240329/f6ac29b0455845cd9230739b9b13abc7.png" style="width: 50%; margin-bottom: 20px;">
上面知道说到 2023 年 8 月对公司研发者开放，2024 年 Q1 对所有研发者开放。以下是摘自网站上关于 HarmonyOS 的有些信息：在 2023 年 12 月 19 日的开源产业生态大会上，华为终端 BG 软件部总裁龚体介绍，鸿蒙生态设备总量超过 7 亿台，其中华为自有设备 3 亿多台。他预计，到 2024 年，鸿蒙生态设备数量逐步达到 8 亿台至 10 亿台。
IDC 数据表示，截止 2023 年 11 月，华为手机在国内手机市场的份额达到了 14%。天风国际分析师郭明錤此前预测，2024 年华为手机出货量有望将最少达到 6000 万部，预计会增长近一倍。
在 2023 年 12 月 29 日公开的新年致辞中，华为轮值董事长胡厚崑提及，“与伙伴一起加快移动应用鸿蒙化，实现鸿蒙生态的历史性跨越。”
在 2024 年 1 月 1 日，华为终端 BG、首席运营官何刚更新了自己的博客，并透露了 2024 年的一个要紧方向：“今天，是 2024 年的第1天，这一年将是鸿蒙生态全面进化的重要一年。”
在 2024 年 1 月 2 日，华为常务董事、终端 BG CEO、智能汽车处理方法 BU 董事长余承东颁布全员信直言，“2024 年是原生鸿蒙的重要一年，要加快推进各类鸿蒙原生应用的研发，集中打赢技术底座和三方生态两大最艰巨的战斗。”
自 2023 年 11 月 23 日起，HarmonyOS 官方博客每一到两天就会宣布一家起步鸿蒙原生应用研发的厂商信息，从阿里钉钉、支付宝、同花顺，到外链论坛：http://www.fok120.com/、新浪、360，再到麦当劳、爱奇艺、京东等，短短两月时间内，就有超百家头部互联网应用厂商牵手鸿蒙。从 2023 年下半年败兴，华为针对鸿蒙生态的建设显著加快了推进进程，截止到日前已然有非常多的 APP 是基于鸿蒙原生 APP 研发并且已然投放运用。
1.2 HarmonyOS NEXT 与 AOSP
在认识鸿蒙技术框架之前先简单介绍下什么是 AOSP。AOSP 是一个由谷歌守护的开源操作系统研发项目。针对过往鸿蒙研发者来讲，基于 AOSP 将安卓应用针对鸿蒙适配后就可兼容运用，这亦是初期为何非常多人吐槽说 HarmonyOS 是套壳的 Android 系统的原由，由于 HarmonyOS 和 Android 都是基于底层 AOSP 二次研发的。但鸿蒙原生应用将基于华为自研的鸿蒙研发框架或底座进行研发，HarmonyOS NEXT 将再也不含有 AOSP 的代码。换言之，将来鸿蒙将全面“脱钩”安卓，形成一套自己的独立生态。
1.3 鸿蒙生态的原生研发框架 ArkUI
ArkUI 是华为方舟研发框架的简叫作，为 HarmonyOS 应用的 UI 研发供给了完整的基本设备，包含简洁的 UI 语法、丰富的 UI 功能，以及实时界面预览工具等，能够支持研发者进行可视化界面研发。分享嘉宾的汇总如下：
<img src="https://q4.itc.cn/q_70/images03/20240329/49df820aa01647efb1c5c00e8bb89f75.png" style="width: 50%; margin-bottom: 20px;">
从分享嘉宾的内容来看，鸿蒙生态的原生研发框架语言 ArkTS，是基于 JS/TS 进一步演化而来的，在 JS/TS 基本上，扩展了声明式 UI 语法，对于前端开发来讲，很容易就能够上手。ArkUI 官方文档链接：方舟研发框架（ArkUI）概述
1.3.1 声明式语法扩展 
<img src="https://q2.itc.cn/q_70/images03/20240329/3e46007e99e6487f9f632878d337ff39.png" style="width: 50%; margin-bottom: 20px;">
从组件定义的代码来看，类似于 JS 里面的 class 类型组件的定义，同期用了注解 / 装饰器模式来扩展其功能。
1.3.2 ArkUI 运行机制概览 
<img src="https://q4.itc.cn/q_70/images03/20240329/b256d7c16bd14e8aa174f88020d6327a.png" style="width: 50%; margin-bottom: 20px;">
从上图能够看到，经过 ArkTS 编写的声明式语法在编译之后，和 Java 代码非常类似，基本上是同样的。编译之后的代码，在方舟引擎里面运行，经过 ArkUI 渲染引擎呈现最后的页面展示。
1.3.3 ArkUI 跨设备 UI 适配 
<img src="https://q3.itc.cn/q_70/images03/20240329/79cc3075dcef4594bd7f78a11decddad.png" style="width: 50%; margin-bottom: 20px;">
ArkUI 内部供给了原生的响应式组件，其实现原理包含栅格布局、媒介查找等，跟前端 H5 在移动设备的响应式布局原理基本上是同样的。
1.3.4 ArkUI-X 跨平台能力 
<img src="https://q6.itc.cn/q_70/images03/20240329/49994b24592e47609d8d7acb1fb94b9a.png" style="width: 50%; margin-bottom: 20px;">
鸿蒙原生应用 ArkUI 框架供给了 XComponent 定义插件的方式，来扩展其生态。XComponent 定义的插件可独立编译和颁布，没冗余的数据拷贝，并且插件和框架渲染是解耦的。
1.4 关于圆桌会专题的总结
此次圆桌会关于鸿蒙话题的讨论，参与的人员都说了和华为那边对接的进度以及对鸿蒙系统的看法，其实从她们的表述来看，对接的并不是那样的顺利，过程中有非常多的问题。每一个机构客户端技术栈存在非常多的差异性，例如美团那边重点以动态化为主，安全那边重点以 RN 为主，倘若都让鸿蒙去适配区别厂商的实现亦不太现实。会上亦讨论了关于鸿蒙生态的崛起给开发带来的有些机会，例如日前市场上对鸿蒙开发的招聘诉求，倘若鸿蒙操作系统真能在国内发展起来，那样对技术开发是一个很不错的机会，尤其是针对 TS 技术把握的比较好的前端开发朋友，毕竟国内那样多的应用倘若都要转成鸿蒙系统的原生 APP 的话，对这个技术把握的诉求市场是非常大的。此次圆桌会收获真的很大，之前只是听说过鸿蒙操作系统，经过此次圆桌会的讨论，对鸿蒙的生态有了进一步的认识。
4、分享感受
做为参会者参与此次 QCon 上海站的软件研发者大会，收获真的非常多。此次大会不仅参与了 LLM 在大前端的有些应用场景，亦在会场线下认识了有些展厅展示 AI 制品的应用场景，拓宽了对 AI 技术的视野。虽然非常多还听得不是很明白，然则针对有些实现有了初步的认识，后续再遇到，只必须花些时间去熟悉关联内容就能够了。经过此次分享大会，和有些分享嘉宾的交流，亦进一步认识到在前端这个行业，技术栈逐步成熟之后，当非常多机构都在降本增效的时候，做为前端开发该怎样提高自己的竞争力。AIGC、鸿蒙开发、高性能处理方法或许都是不错的发展机遇，多把握有些技术，多实践前沿的技术，总是对的，机遇亦总会留给哪些有准备的人。期盼以后机构还能继续供给这般的机会给到技术开发朋友，由于非常多前沿的技术以及技术实现框架流程，真的只能从分享嘉宾的演示文档里面才可挖掘出来。亦期盼机构的技术开发朋友能够做为分享嘉宾参与到此类大会里面，分享公司内部基于有些业务场景的处理方法，提高机构的技术影响力。
活动举荐 
探索软件研发的新境界！QCon 全世界软件研发大会迎来全新升级，现已华丽转型为【QCon 全世界软件研发大会暨智能软件研发生态展】。这不仅是一场技术盛宴，更加是深度交流与创新展示的交汇点。咱们诚邀您于 2024 年 4 月 11 日至 13 日，莅临北京·国测国际会议会展中心，一起见证并参与这场融合技术分享、深度研讨与前沿展览的综合性盛会。让咱们携手开启智能软件研发的新篇章！
QCon 精华内容上线 92%，全面覆盖“人工智能 +”的典型案例！今天是会议 9折购票倒计时周期，最后3天。联系票务经理 17310043226 。查看「阅读原文」可认识大会最新日程，期待与各位研发者现场交流。<a style="color: black;">返回外链论坛：http://www.fok120.com/，查看更加多</a>

责任编辑：网友投稿

JameBond 发表于 2024-8-22 13:42:51

感谢楼主分享，祝愿外链论坛越办越好！

情迷布拉格 发表于 2024-8-23 01:30:55

你的话深深触动了我，仿佛说出了我心里的声音。

4zhvml8 发表于 2024-10-24 12:56:55

期待与你深入交流，共探知识的无穷魅力。

m5k1umn 发表于 2024-10-30 03:08:31

感谢楼主的分享！我学到了很多。

qzmjef 发表于 2024-11-14 08:26:48

回顾历史，我们不难发现：无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。

页: [1]

外链论坛's Archiver

QCon上海2023 参会内容分享：LLM 时代的大前端技术趋势