过去两周，AI 行业最出圈的不是哪个产品，而是人。经常一觉醒来，社交媒体的时间线都在刷新换汤不换药的新闻：又双叒叕有哪位 AI 大牛被挖走了。

顶级 AI 人才，正成为 AI 赛道上最稀缺、也最具品牌效应的资产。

在这轮人才流动的风暴中心中，我们发现一个格外显眼的细节：这群主导过 ChatGPT、Gemini、Claude 等大模型研发的核心成员中，华人科学家的比例出奇地高。

这个这个变化并不是突然出现的，这几年兴起的 AI 浪潮中，美国的顶级 AI 人才中华人占比不断升高。 根据 MacroPolo 发布的《全球人工智能人才追踪调查报告 2.0》，来自中国的顶尖 AI 研究人员占比在 2019 年到 2022 年间，从 29% 提升到了 47%。

而在智谱研究发布的《ChatGPT 团队背景研究报告》，更是发现在 ChatGPT 核心的 87人团队中，有 9 人都是华人，占比超过 10%。因此，我们也重新梳理了近期在硅谷头部公司中广受关注的华人 AI 研究员画像，并试图从中总结出一些特征：

1️⃣ 顶尖名校出身，学术能力极强
他们大多本科就读于清华、北大、中科大、浙大等顶尖高校，计算机或数学背景居多；研究生阶段普遍进入 MIT、斯坦福、伯克利、普林斯顿、UIUC 等名校深造，几乎每人都有顶会高引论文傍身（NeurIPS、ICLR、SIGGRAPH 等），

2️⃣ 年轻高产，爆发周期集中于 2020 年之后
年龄多在 30～35 岁；硕博阶段恰逢深度学习的全球爆发期，学术基础扎实，熟悉工程体系和团队协作。不少人职业的第一站就是接触大厂或服务大规模人群的 AI 产品或平台，起点更高、节奏更快。

3️⃣ 强多模态背景，攻坚模型后训练
他们的研究方向普遍着重于跨模态（文本、语音、图像、视频、动作）的统一推理系统，包括 RLHF、蒸馏、对齐、人类偏好建模、语音语调评估等具体细节。

4️⃣ 即便频繁流动，但基本不会脱离生态
Google、Meta、微软、英伟达，Anthropic、OpenAI……他们的流动范围横跨 AI 初创与巨头，但研究主题、技术积累往往保持连贯性，基本不换赛道。

OpenAI→Meta

Shuchao Bi

Shuchao Bi 本科毕业于浙江大学数学系，后赴加州大学伯克利分校深造，先后获得统计学硕士学位，并攻读数学博士。

2013 – 2019 年，他在 Google 担任技术负责人，主要贡献包括构建多阶段深度学习推荐系统，显著提升 Google 广告收益（数十亿美元级别）。

2019 – 2024 年，他担任 Shorts 探索负责人，期间，联合创建并主导 Shorts 视频推荐与发现系统，并 组建并扩展大规模机器学习团队，覆盖推荐系统、评分模型、互动发现、信任与安全等方向。

2024 年加入 OpenAI 后，他主要领导多模态后训练组织，是 GPT-4o 语音模式与o4-mini的联合创造者

期间，他主要推进 RLHF、图像/语音/视频/文本推理、多模态智能体、多模态语音到语音（VS2S）、视觉-语言-行动基础模型（VLA）、跨模态评估系统等，也涉及多模态链式推理、语音语调/自然度评分、多模态蒸馏与自监督优化，其核心目标是通过后训练构建更通用的多模态 AI Agent。

Huiwen Chang

2013 年，Huiwen Chang 本科毕业于清华大学计算机系（姚班），后赴美国普林斯顿大学攻读计算机科学博士，研究方向聚焦于图像风格迁移、生成模型和图像处理，曾获微软研究院奖学金。

在加入 OpenAI 之前，她在 Google 担任高级研究科学家，累计工作超过六年，长期从事生成模型与计算机视觉研究，曾在 Google Research 发明 MaskGIT 和 Muse 文本生成图像架构。

早期的文本生成图像主要依赖扩散模型（如 DALL·E 2、Imagen），这些模型虽然生成质量高，但推理速度慢、训练开销大。而 MaskGIT 和 Muse 则采用了「离散化 + 并行生成」 的方式，大幅提升了效率。

MaskGIT 是非自回归图像生成的新起点，Muse 则是将这一方法推向文本图像生成的代表作。它们不像 Stable Diffusion 那样广为人知，但在学术与工程体系中，是非常重要的技术基石。

此外，她也是扩散模型顶级论文《Palette: Image-to-image diffusion models》的联合作者之一。

这篇论文发表于 SIGGRAPH 2022，提出了一种统一的图像到图像翻译框架，并在图像修复、着色、补全等多个任务上超过 GAN 和回归基线，至今已被引用超过 1700 次，成为该领域的代表性成果之一。

2023 年 6 月起，她加入 OpenAI 多模态团队，联合开发了 GPT-4o 图像生成功能，继续推动图像生成、多模态建模等前沿方向的研究与落地。

Ji Lin

Ji Lin 主要从事多模态学习、推理系统与合成数据方向的研究。他是多个核心模型的贡献者，包括 GPT-4o、GPT-4.1、GPT-4.5、o3/o4-mini、Operator、以及 4o 图像生成模型等。

他本科毕业于清华大学电子工程专业（2014–2018），从麻省理工学院获得电子工程与计算机科学博士学位，导师为知名学者 Prof. Song Han。

博士阶段，他的研究方向聚焦于模型压缩、量化、视觉语言模型、稀疏推理等关键方向。

在 2023 年加入 OpenAI 之前，他曾在英伟达、Adobe 和 Google 担任实习研究员，并在 MIT 长期从事神经网络压缩与推理加速相关研究，积累了深厚的理论基础与工程实践经验。

学术方面，他在模型压缩、量化和多模态预训练等方向有多篇高影响力论文，Google 学术总引用数超过 17800，代表成果包括视频理解模型 TSM、硬件感知量化方法 AWQ、SmoothQuant 以及视觉语言模型 VILA。

他也是 GPT-4o 系统技术文档的核心作者之一（比如 GPT-4o 系统卡），并凭借 AWQ 论文获得 MLSys 2024 最佳论文奖。

Hongyu Ren

Hongyu Ren 本科在北京大学获得计算机科学与技术学士（2014–2018）学位，随后在斯坦福大学获得计算机科学博士（2018–2023）学位。

他曾获得苹果、百度以及软银 Masason 基金会 PhD Fellowship 等多项奖学金，研究方向聚焦于大语言模型、知识图谱推理、多模态智能与基础模型评估。

在加入 OpenAI 之前，他曾在 Google、微软以及英伟达有过多段实习经历，比如 2021 年在苹果担任实习研究员期间，参与 Siri 问答系统的搭建。

2023 年 7 月加入 OpenAI 后，Hongyu Ren 参与构建了 GPT-4o、4o-mini、o1-mini、o3-mini、o3 和 o4-mini 等多个核心模型，并领导后训练团队。

用他的话来说：「I teach models to think faster, harder and sharper.（我教模型更快、更努力、更敏锐地思考。）」

学术领域，他的 Google 学术总引用数超过 17742 次，高被引论文包括：《On the Opportunities and Risks of Foundation Models》（引用 6127 次）；《Open Graph Benchmark》（OGB）数据集（引用 3524 次）等。

Jiahui Yu

Jiahui Yu 本科毕业于中国科学技术大学少年班，获得计算机科学学士学位，随后在伊利诺伊大学香槟分校（UIUC）获得计算机科学博士学位。

他的研究重点包括深度学习、图像生成、大模型架构、多模态推理和高性能计算。

在 OpenAI 任职期间，Jiahui Yu 担任感知团队负责人，主导开发 GPT-4o 图像生成模块、GPT-4.1、o3/o4-mini 等重要项目，提出并落地了「Thinking with Images」感知体系。

在此之前，他曾在 Google DeepMind 工作近四年，期间是 PaLM-2 架构与建模的核心贡献者之一，并共同领导了 Gemini 多模态模型的开发，是 Google 多模态战略中最重要的技术骨干之一。

他还拥有在英伟达、Adobe、百度、Snap、旷视和微软亚洲研究院等多家机构的实习经历，研究内容涵盖 GAN、目标检测、自动驾驶、模型压缩、图像修复与大规模深度学习训练系统等多个方向。

Jiahui 在 Google 学术上总引用次数超过 34500 次，h 指数达 49，代表性研究成果包括图文对齐基础模型 CoCa、文本生成图像模型 Parti、神经网络可伸缩设计 BigNAS，以及广泛应用于 Adobe Photoshop 的图像修复技术 DeepFill v1 和 v2 等。

Shengjia Zhao

Shengjia Zhao 本科毕业于清华大学计算机系，曾在美国莱斯大学交换，后于斯坦福大学获得计算机科学博士学位，专注于大模型架构、多模态推理和对齐方向的研究。

2022 年，他加入 OpenAI，担任核心研发成员，深度参与 GPT-4 和 GPT-4o 的系统设计工作。曾主导 ChatGPT、GPT-4、所有 mini 模型、4.1 和 o3 的研发工作，还曾领导 OpenAI 合成数据团队。

他是《GPT-4 Technical Report》（被引超过 1.5 万次）和《GPT-4o System Card》（被引超过 1300 次）的联合作者，并参与了多个系统卡（如 OpenAI o1）的撰写，是推动 OpenAI 基础模型标准化与公开化的重要贡献者之一。

在学术表现上，他 Google 学术总引用数超过 21,000 次，h 指数为 25，曾获得过 ICLR 2022 Outstanding Paper Award、JP Morgan PhD Fellow、Qualcomm 创新奖学金（QinF）与 Google Excellence Scholarship 等多项奖项。

Google→Meta

Pei Sun

2009 年，Pei Sun在清华大学获得了学士学位，随后前往卡内基梅隆大学攻读硕士和博士学位，顺利完成硕士阶段学习，并在博士阶段选择退学。

他曾在 Google DeepMind 担任首席研究员，期间主攻 Gemini 模型的后训练、编程和推理工作，是 Gemini 系列模型（包括 Gemini 1、1.5、2 和 2.5）后训练、思维机制构建与代码实现的核心贡献者之一。

在加入 DeepMind 之前，Pei 曾在 Waymo 任职近七年，担任高级研究科学家，主导了 Waymo 两代核心感知模型的研发，是自动驾驶感知系统演进的中坚力量。

更早些时候，他曾在 Google 担任软件工程师五年多，后又加入分布式存储公司 Alluxio 任职工程师超过一年，参与系统架构研发。

Nexusflow→英伟达

Banghua Zhu

Banghua Zhu 本科毕业于清华大学电子工程系，后赴美国加州大学伯克利分校攻读电气工程与计算机科学博士，师从著名学者 Michael I. Jordan 和 Jiantao Jiao。

他的研究聚焦于提高基础模型的效率与安全性，融合统计方法与机器学习理论，致力于构建开源数据集和可公开访问的工具。他的兴趣方向还包括博弈论、强化学习、人机交互以及机器学习系统设计。

他代表性论文《Chatbot Arena》提出了人类偏好驱动的大模型评测平台，成为 LLM 领域的重要基准之一。

此外，他还在 RLHF、人类反馈对齐、开源对齐模型等方向有所贡献。其 Google 学术显示引用总数超过 3100，h 指数为 23，也是大模型竞技场「Chatbot Arena」、「Benchbuilder」、「Starling」等多个热门开源项目的核心作者之一。

他曾在 Microsoft 担任研究实习生，在 Google 担任学生研究员，曾联合创立 AI 初创公司 Nexusflow，今年 6 月，他宣布加入英伟达 Star Nemotron 团队担任首席研究科学家，此外将于今年秋季入职华盛顿大学的助理教授。

根据其发布内容，他将在英伟达参与模型后训练、评估、AI 基础设施和智能代理构建等项目，强调与开发者及学术界的深度协作，并计划将相关成果开源。

Jiantao Jiao

Jiantao Jiao 是加州大学伯克利分校电气工程与计算机科学系以及统计系的助理教授。

他于 2018 年获得斯坦福大学电气工程博士学位，目前是多个研究中心的联合负责人或成员，包括伯克利理论学习中心（CLIMB）、人工智能研究中心（BAIR Lab）、信息与系统科学实验室（BLISS）以及去中心化智能研究中心（RDI）。

他的研究集中于生成式 AI 与基础模型，对统计机器学习、优化理论、强化学习系统的隐私与安全、经济机制设计以及自然语言处理、代码生成、计算机视觉、自动驾驶与机器人等方向也颇有兴趣。

和 Banghua Zhu 一样，他也是 Nexusflow 联合创始人之一，目前已经正式加入英伟达，担任研究总监兼杰出科学家。

Jiao 的总引用次数达 7259，h 指数为 34，代表性论文包括《Theoretically principled trade-off between robustness and accuracy》，以及与 Banghua Zhu 等人合作的《Bridging Offline Reinforcement Learning and Imitation Learning: A Tale of Pessimism》，均发表在 NeurIPS 等顶会。

Claude→Cursor

Catherine Wu

Catherine Wu 曾在 Anthropic 担任 Claude Code 的产品经理，专注于构建可靠、可解释、可操控的 AI 系统。据 The Information 报道，Catherine Wu 已被 AI 编程初创公司 Cursor 挖角，出任产品负责人一职。

在加入 Anthropic 之前，她曾是知名风投公司 Index Ventures 的合伙人，任职近三年，期间深度参与多家顶尖创业公司的早期投资与战略支持。

她的职业起点并不在投资圈，而是扎根于一线技术岗位。

她曾在 Dagster Labs 担任工程经理，主导公司首个商业化产品的研发，也曾在 Scale AI 担任早期产品工程师，参与多个关键产品的构建与运营扩张。

更早之前，她在摩根大通实习，并于普林斯顿大学获得计算机科学学士学位，在校期间还曾赴苏黎世联邦理工学院进行交换学习。

特斯拉 | Phil Duan

段鹏飞（Phil Duan）是特斯拉 AI 的首席软件工程师，现负责 Autopilot 下的 Fleet Learning 团队，致力于推动特斯拉自动驾驶系统（FSD）中「数据 + 感知」核心模块的建设。

他带领特斯拉团队开发高吞吐、快迭代的数据引擎，从数百万辆汽车中采集、处理并自动标注驾驶数据，强调数据质量、数量与多样性的协同优化。在感知方向，他主导构建多项关键神经网络，包括视觉基础模型、目标检测、行为预测、占据网络、交通控制和高精度泊车辅助系统等，是 Autopilot 感知系统的核心构建者之一。

他本科毕业于武汉理工大学，主修光信息科学与技术，随后攻读俄亥俄大学电气工程博士与硕士学位，研究方向为航空电子，并以博士论文荣获 2019 年 RTCA William E. Jackson Award，该奖项是美国航空电子与电信领域授予研究生的最高荣誉之一。

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博

还有人没看过关于 Meta 挖人的段子吗？

在昨日 Meta 高调官宣超级智能团队实验室之后，大批挖走OpenAI核心研究员之后，一向沉得住气的 Sam Altman 现在也坐不住了，向全体员工发出内部信：

有使命感的人将胜过唯利是图的雇佣兵。

据连线杂志报道，Altman 还在信中强调，留在 OpenAI 才是那些希望构建通用人工智能（AGI）研究者的正确选择，并暗示公司正在重新评估整个研究团队的薪酬结构。

对 Meta 的挖人行为，Altman 显得相当不屑，认为这种「开价挖人」的模式未来将带来严重的文化副作用。

我们已经从角落里的极客，成长为科技行业里最受关注的人（至少是这样）……AI 圈现在乌烟瘴气；Meta 的做法让人感觉不太体面；我觉得事情将来只会更加疯狂。我被解雇又回归时曾说，那不会是 OpenAI 历史上最疯狂的事；显然现在这事也还不是

在评价那些被 Meta 挖走的前同事时，Altman 的态度也没太客气：

「Meta 确实招到了一些优秀的人，但整体来看，他们并没有挖到那些顶尖人才，还得一路向下寻找；他们已经尝试招募很久了，我都记不清他们试图从我们这里挖走多少人去当他们的首席科学家。」Altman 写道，「我为整个行业的使命感感到骄傲，当然总会有一些唯利是图的人。」

他还放话称，OpenAI 股票的潜力远远超过 Meta。但巨大的回报应该建立在巨大成功之后，OpenAI将很快公布更多薪酬方面的举措，但会「确保公平性」，而不是只针对那些「被 Meta 盯上」的个别员工。

Altman还呼吁大家继续留在 OpenAI：

我对我们的研究路线从未如此有信心，我们在计算资源上做了前所未有的投入，我喜欢我们敢于下注，并相信我们会好好利用它。最重要的是，我认为我们拥有全世界最特别的团队和文化。我们确实还需要努力改进我们的文化；过去经历了疯狂的爆炸式增长。但我们的核心是正确的，我认为没有任何其他组织能做到这一点，我有信心我们能解决现有问题。

更重要的是，我们真的在乎如何以正确的方式构建AGI，其他公司更把它当作实现其他目标的手段。而这对我们来说始终是最重要的事，也将永远如此。等到 Meta 转向下一个流行项目，或忙于守护他们的社交护城河时，我们仍会在这里，一天又一天、一年又一年，努力比任何人都更好地完成我们的使命。其他许多项目将起起落落。

话虽如此，其实也真不怪研究人员转投 Meta。

无他，实在是扎克伯格给的太多的了。小扎不语，只是一味群发高薪合同。顶级 AI 研究员横在中间，像极了拿 offer 的你我他，嘴上说着不在乎钱，但手已经开始敲键盘回复小扎发来的邮件。

根据连线杂志获取的信息，扎克伯格为顶尖研究人员开出的薪酬高达 4 年 3 亿美元，首年总薪酬超过 1 亿美元，而目前，财大气粗的 Meta 已向 OpenAI 的员工至少发出了 10 份如此高额的报价，并承诺最先进的 GPU 资源「随便用」。

并且报道还提到，Meta 曾试图招募一位 OpenAI 的高级研究员担任首席科学家一职，但对方最终拒绝了邀请。据称，这些薪资方案虽然以股票为主，但第一年股票直接兑现，诱惑力拉满。

做个横向对比，微软 CEO Satya Nadella 在 2024 年获得的总薪酬为 7910 万美元，主要是股票形式；Uber CEO Dara Khosrowshahi 同期则大约为 3940 万美元，同样以股票为主。一个顶级 AI 研究员的年薪，现在轻松干掉硅谷大厂 CEO。

当然，在上周 Meta 全员大会上，CTO Andrew Bosworth 也回应了 OpenAI CEO Sam Altman 所称的「Meta 用 1 亿美元签约金挖角」一事，直指其夸大其词。

所谓高额待遇仅适用于极少数高级岗位。「我非常清楚他为什么这么说：因为我们确实成功吸引了一些 OpenAI 的人才，而他对此显然并不高兴。」他强调，所谓的「1 亿美元报价」不是一次性奖金，而是包含股票激励、签约奖励等多个组成部分。

这也应了那句话，算力可以堆，数据可以靠爬虫，但对想赢下 AGI 终局的公司来说，人才始终是最贵的资源。

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博

前言：当图片遇见AI

大家好！今天我们要探索一个非常酷炫的前端技术——图片识别。想象一下，用户上传一张图片，我们的前端应用不仅能显示预览，还能通过AI识别图片内容并生成详细描述。这听起来像是未来科技，但其实用React和一些现代API就能轻松实现！

作为前端开发者，我们正处在一个令人兴奋的时代。计算机视觉和自然语言处理的进步让我们可以在浏览器中实现以前只能在科幻电影中看到的功能。本文将带你一步步构建这样一个应用，同时分享一些我在开发过程中的心得和最佳实践。

项目概述

我们要构建的应用具有以下功能：

1. 用户可以选择并上传本地图片
2. 实时显示图片预览
3. 将图片发送到AI API进行分析
4. 显示AI生成的图片描述

听起来很简单？让我们深入细节，看看如何优雅地实现这些功能。

技术栈选择

• React：我们的前端框架，提供组件化和状态管理
• FileReader API：处理本地文件读取
• Moonshot AI：提供图片识别能力
• Vite：项目构建工具，支持环境变量管理

严格模式：React的安全网

// StrictModel react 默认启动的严格模式
// 执行一次，测试一次 两次

在React 18+中，严格模式(Strict Mode)默认启用。这是一个非常有用的开发工具，它会：

• 故意双重调用组件函数（仅在开发环境）
• 检查过时的API使用
• 检测意外的副作用

这解释了为什么你可能会在控制台看到某些日志出现两次。这不是bug，而是React在帮助我们提前发现潜在问题。

开发建议：始终保留严格模式，它能帮你捕获许多难以追踪的问题，特别是在使用useEffect时。

环境变量：安全地管理API密钥

console.log(import.meta.env.VITE_API_KEY)

在现代前端开发中，我们经常需要使用API密钥等敏感信息。Vite提供了优雅的环境变量解决方案：

1. 创建.env文件在项目根目录
2. 变量必须以VITE_前缀开头
3. 通过import.meta.env访问

安全提示：永远不要将.env文件提交到版本控制！将其添加到.gitignore中。

状态管理：React的核心

const [content, setContent] = useState('')
const [imgBase64Data, setImgBase64Data] = useState('')
const [isValid, setIsValid] = useState(false)

React的useState hook是我们管理组件状态的主要工具。在这个应用中，我们维护三个状态：

1. content：存储AI返回的图片描述
2. imgBase64Data：存储图片的Base64编码
3. isValid：控制提交按钮的禁用状态

设计原则：保持状态最小化，只存储必要的数据。派生数据应该在渲染时计算。

图片预览：即时反馈的重要性

const updateBase64Data = (e) => {
  const file = e.target.files[0];
  if(!file) return;
  
  const reader = new FileReader();
  reader.readAsDataURL(file);
  
  reader.onload = () => {
    setImgBase64Data(reader.result)
    setIsValid(true)
  }
}

图片上传和处理可能很慢，良好的用户体验要求我们提供即时反馈。这里我们使用FileReader API来实现：

1. 用户选择文件后，触发onChange事件
2. 通过e.target.files[0]获取文件对象
3. 创建FileReader实例
4. 使用readAsDataURL方法将文件转换为Base64字符串
5. 转换完成后，更新状态

Base64小知识：Base64是一种用64个字符表示二进制数据的编码方案。它可以将图片数据转换为字符串，方便在JSON中传输。

无障碍访问：为所有人构建

<label htmlFor="fileInput">文件：</label>
<input 
  type="file"
  id='fileInput'
  className='input'
  accept='.jpeg,.jpg,.png,.gif'
  onChange={updateBase64Data}
/>

无障碍访问(A11Y)经常被忽视，但它对用户体验至关重要。这里我们：

1. 使用label与input通过htmlFor和id关联
2. 为输入添加明确的标签
3. 限制可接受的图片格式

无障碍提示：屏幕阅读器依赖正确的标签关联来向视障用户描述表单控件。不要忽视这些细节！

与AI API交互：异步编程的艺术

const update = async () => {
  if(!imgBase64Data) return;
  
  const endpoint = 'https://api.moonshot.cn/v1/chat/completions';
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}`
  }
  
  setContent('正在生成...')
  
  const response = await fetch(endpoint, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      model: 'moonshot-v1-8k-vision-preview',
      messages: [
        {
          role: 'user',
          content: [
            {
              type: 'image_url',
              image_url: {
                url: imgBase64Data
              }
            },
            {
              type: 'text',
              text: '请详细描述这张图片的内容'
            }
          ]
        }
      ]
    })
  })
  
  const data = await response.json()
  setContent(data.choices[0].message.content)
}

这是与Moonshot AI API交互的核心代码。让我们分解这个异步过程：

1. 首先检查是否有图片数据
2. 设置API端点和请求头（包含认证）
3. 立即更新状态显示"正在生成..."（即时反馈）
4. 使用fetch发起POST请求
5. 请求体包含图片数据和提示文本
6. 解析响应并更新状态

异步编程选择：我们使用async/await而不是.then链，因为它提供了更线性的代码结构，更易于理解和维护。

错误处理：被忽视的重要部分

虽然示例代码中没有展示，但在生产环境中，我们必须添加错误处理：

try {
  const response = await fetch(endpoint, { /* ... */ });
  if (!response.ok) throw new Error('网络响应不正常');
  const data = await response.json();
  setContent(data.choices[0].message.content);
} catch (error) {
  setContent('识别失败: ' + error.message);
  console.error('API调用失败:', error);
}

最佳实践：总是处理网络请求可能失败的情况，并向用户提供友好的错误信息。

性能优化：减少不必要的渲染

React组件在状态变化时会重新渲染。对于我们的应用，可以做一些优化：

1. 使用useCallback记忆事件处理函数
2. 对于大型图片，考虑压缩后再上传
3. 添加防抖或节流（如果适用）

const updateBase64Data = useCallback((e) => {
  // ...原有逻辑
}, []);

性能提示：React DevTools的Profiler工具可以帮助你识别性能瓶颈。

样式与布局：不只是功能

虽然本文主要关注功能实现，但良好的UI同样重要。我们的CSS可能包含：

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.preview img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.input {
  margin: 10px 0;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

UI原则：确保应用在不同设备上都能良好显示（响应式设计），并为交互元素提供视觉反馈。

扩展思路：让应用更强大

这个基础应用可以扩展许多有趣的功能：

1. 多图片分析：允许用户上传多张图片并比较结果
2. 自定义提示：让用户输入自己的问题而不仅是描述图片
3. 历史记录：保存之前的识别结果
4. 图片编辑：添加简单的裁剪或滤镜功能

总结：前端开发的未来

通过这个项目，我们看到了现代前端开发的强大能力。借助React和现代浏览器API，我们能够：

1. 处理本地文件
2. 提供实时预览
3. 与AI服务交互
4. 创建响应式和无障碍的界面

图片识别只是计算机视觉在前端的冰山一角。随着WebAssembly和WebGPU等技术的发展，前端将能够处理更复杂的AI任务。

最后的思考：作为开发者，我们不仅要关注功能的实现，还要考虑用户体验、性能和可访问性。每一个细节都可能影响用户对我们产品的感受。

希望这篇文章能激发你对智能前端的兴趣！如果你有任何问题或想法，欢迎在评论区讨论。Happy coding! 🚀

---

附录：完整代码

import { useState, useCallback } from 'react'
import './App.css'

function App() {
  const [content, setContent] = useState('')
  const [imgBase64Data, setImgBase64Data] = useState('')
  const [isValid, setIsValid] = useState(false)

  const updateBase64Data = useCallback((e) => {
    const file = e.target.files[0];
    if(!file) return;
    
    const reader = new FileReader();
    reader.readAsDataURL(file);
    
    reader.onload = () => {
      setImgBase64Data(reader.result)
      setIsValid(true)
    }
  }, [])

  const update = async () => {
    if(!imgBase64Data) return;
    
    try {
      const endpoint = 'https://api.moonshot.cn/v1/chat/completions';
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}`
      }
      
      setContent('正在生成...')
      
      const response = await fetch(endpoint, {
        method: 'POST',
        headers,
        body: JSON.stringify({
          model: 'moonshot-v1-8k-vision-preview',
          messages: [
            {
              role: 'user',
              content: [
                {
                  type: 'image_url',
                  image_url: {
                    url: imgBase64Data
                  }
                },
                {
                  type: 'text',
                  text: '请详细描述这张图片的内容'
                }
              ]
            }
          ]
        })
      })
      
      if (!response.ok) throw new Error('网络响应不正常');
      const data = await response.json()
      setContent(data.choices[0].message.content)
    } catch (error) {
      setContent('识别失败: ' + error.message)
      console.error('API调用失败:', error)
    }
  }

  return (
    <div className='container'>
      <div>
        <label htmlFor="fileInput">文件：</label>
        <input 
          type="file"
          id='fileInput'
          className='input'
          accept='.jpeg,.jpg,.png,.gif'
          onChange={updateBase64Data}
        />
        <button onClick={update} disabled={!isValid}>提交</button>
      </div>
      <div className="output">
        <div className="preview">
          {imgBase64Data && <img src={imgBase64Data} alt="预览" />}
        </div>
        <div>
          {content}
        </div>
      </div>
    </div>
  )
}

export default App

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：琉易

这一篇是系列文章：

搭建自动化 Web 页面性能检测系统 —— 设计篇

搭建自动化 Web 页面性能检测系统 —— 实现篇

搭建自动化 Web 页面性能检测系统 —— 部署篇

页面性能对于用户体验、用户留存有着重要影响，当页面加载时间过长时，往往会伴随着一部分用户的流失，也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素，也是一个网站口碑的重要评判标准。

系统架构图（简略）

本篇重点讲解 AI 分析模块的设计与实践。

AI 分析模块的设计与实现

输入与输出

• 输入：Lighthouse 检查产生的 JSON 数据
  • 由于每次检测产生的 JSON 数据较大，一般有 350KB ~ 500KB，而大模型往往是根据输入 Tokens 进行计费，且并不是单纯的按量计费，类似于生活中常见的阶梯计费；另外模型支持的输入也有限，一般为 32k Tokens 或 64k Tokens。所以我们将 JSON 数据传输给大模型前需要进行精简。
  • 保留检测结果中的关键数据，如：环境数据（environment）、每一项检测指标的详细结果（audits）、检测时的配置参数（configSettings）、汇总各类指标的最终得分（categories）。
• 输出：自然语言优化建议列表
  • 如：建议将图片资源启用 lazy-load
  • 如：减小某个图片文件的大小以减少传输时间

核心组成

• JSON 清洗与摘要
• Prompt 定义
• openai 接口集成
• 流式处理

Prompt 设计要点

构建一个高质量的 Prompt 是成功的关键，以下是一个例子：

你是一个网页性能优化专家。我将提供一个通过 Google Lighthouse 生成的 JSON 报告，请你根据报告中的内容：
1. 每个关键指标给出两三条优化建议，需要结合 json 中的实际数据进行举例。
2. 回答的内容使用 markdown 格式。
3. 专业名词需要使用中文。

实际测试中 Kimi 的 moonshot-v1-auto 模型回答更快，百炼平台的模型输入输出 Tokens 限制更宽泛，但是输出速度略慢；百炼平台的免费额度更多，OpenAI 费用较高且部署后会有访问的问题。

关键技术点

Lighthouse 报告数据结构解析

JSON 数据清洗与摘要是大模型调用能否成功的关键，清洗后的结果是 Prompt 的数据来源，如果内容较多可能会超出模型输入 Tokens 的限制从而导致调用失败。

• audits 中会包含各种指标近百种，我们可以删除一些内容较多但对分析用处不大的数据，如：offscreen-images、screenshot-thumbnails 等。
• Lighthouse 生成的 JSON 数据会直接保存瀑布图等图片的 Base64 格式数据，这些图片数据占用 Tokens 明显。

经过清洗，尽量将输入的 Tokens 控制在 100k 以内。

流式输出

openai 是一个 npm 包，通过这个 npm 包可以快速的对接各种大模型的 API 调用服务。

// 流式输出
const stream = await client.chat.completions.create({
    model: 'moonshot-v1-auto',
    messages: [
        {
            role: 'system',
            content: `你是一个网页性能优化专家。我将提供一个通过 Google Lighthouse 生成的 JSON 报告，请你根据报告中的内容：
1. 每个关键指标给出两三条优化建议，需要结合 json 中的实际数据进行举例。
2. 回答的内容使用 markdown 格式。
3. 专业名词需要使用中文。`,
        },
        { role: 'user', content: jsonData },
    ],
    temperature: 0.3,
    stream: true,
});

// 当启用流式输出模式（stream=True），SDK 返回的内容也发生了变化，我们不再直接访问返回值中的 choice
// 而是通过 for 循环逐个访问返回值中每个单独的块（chunk）
for await (const chunk of stream) {
    if (abortSignal?.aborted) {
        console.log(`${taskIdLogStr}任务中止, kimi chat`);
        break;
    }

    // 在这里，每个 chunk 的结构都与之前的 completion 相似，但 message 字段被替换成了 delta 字段
    const delta = chunk.choices[0].delta;
    if (delta.content) {
        onData(delta.content);
    }
}

@ApiOperation({ summary: '分析检测结果' })
    @HttpCode(HttpStatus.OK)
    @Post('reportChat')
    @RawResponse()
    async reportChat(@Body() query: ReportChatReqDto, @Res() res: Response) {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    res.flushHeaders();

    const abortController = new AbortController();

    // 👇 监听客户端断开连接（如 Abort）
    res.on('close', () => {
        abortController.abort();
    });

    try {
        await this.AIService.reportChat(
            query,
            (content: string) => {
                res.write(`data: ${JSON.stringify({ content })}\n\n`);
            },
            abortController.signal
        );
        res.write(`data: [DONE]\n\n`);
    } catch (error) {
        res.write(`data: [ERROR] ${error.message || 'stream error'}\n\n`);
        abortController.abort();
    } finally {
        res.end();
    }
}

非流式输出

// 非流式输出
const completion = await client.chat.completions.create({
    model: 'moonshot-v1-auto',
    messages: [
        {
            role: 'system',
            content: `你是一个网页性能评分分析专家。我将提供一个产品的性能评分数据，帮我分析得分趋势和较大的得分变化。回答的内容不要带格式符号，尤其是 **。`,
        },
        { role: 'user', content: jsonData },
    ],
    temperature: 0.3,
});

return completion.choices[0].message.content;

实现的功能点

检测报告的智能分析与建议

由于保存的是 html 文件，我们可以通过正则将 html 文件中的 JSON 数据提取出来，用于后续的清洗与分析。

结合清洗后的 JSON 数据给出优化建议。

数据周报的趋势分析

将过去一周的分数给到大模型，由大模型分析解读得分的变化趋势。

后续规划

• JSON 数据清洗更精确，确定好哪些是关键性能指标
• 将 Lighthouse 的具体评分规则同步给大模型
• 优化 Prompt，更换更合适的大模型
• 结合埋点数据
  • 分析页面性能与用户停留时长的关系
  • 分析用户跳出率与页面性能的关系
  • 结合采集到的埋点数据分析页面性能对业务指标的影响

🚀 打造极致聊天体验：uz-chat——全端AI聊天组件来了！

🌟 插件介绍

uz-chat是一款基于uni-app开发的全端AI聊天组件，可无缝对接DeepSeek、OpenAI等主流AI服务。它不仅支持基础的消息展示，还内置了打字机效果、Markdown渲染和平滑滚动等高级特性，让你的应用瞬间拥有专业级聊天体验！

✨ 核心功能亮点

1️⃣ 全端兼容，一次开发多端运行

• 完美支持H5、小程序、App等多平台
• 基于uni-app生态，无缝集成现有项目

2️⃣ 流畅的消息交互体验

• 🎉 实时滚动：新消息自动平滑滚动到底部
• ⌨️ 打字机效果：模拟AI思考和输入过程
• 📋 消息操作：支持复制、编辑消息内容

3️⃣ 强大的内容渲染

• ✍️ Markdown支持：代码高亮、表格、列表等格式化展示
• 💻 代码块展示：支持多种编程语言语法高亮
• 📝 富文本内容：满足复杂消息展示需求

4️⃣ 灵活的自定义能力

• 支持自定义头像、昵称
• 可扩展的消息类型插槽
• 丰富的样式定制选项

🚀 快速上手

安装方式

在DCloud插件市场导入聊天消息组件uni_modules版本，无需额外import即可使用。

基础用法

<template>
  <uz-chat 
    @sendMessage="sendMessage"
    :isSending="isSending"
    :messages="messages"
    v-model:modelValue="inputMessage"
    :offset-height="topHeight + 'rpx'"
  ></uz-chat>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isSending = ref(false)
const messages = ref([])
const inputMessage = ref('')

// 发送消息处理
const sendMessage = async (msg: string) => {
  // 实现消息发送逻辑
}
</script>

对接AI服务

// 对接DeepSeek等AI服务示例
async function createChatCompletion(messages) {
  const openai = new OpenAI({
    baseURL: 'https://api.deepseek.com',
    apiKey: process.env.DEEPSEEK_API_KEY
  })
  
  return openai.chat.completions.create({
    messages: messages,
    model: 'deepseek-chat',
    stream: true
  })
}

🛠️ 技术特性

• 高效渲染：采用虚拟列表技术，支持大量消息展示
• 性能优化：消息滚动节流处理，避免卡顿
• 类型安全：完整的TypeScript类型定义
• 轻量化设计：核心功能打包体积小

📈 未来规划

• 支持上拉加载更多历史消息
• 支持语音消息
• 自定义表情包功能
• 暗黑模式

🤝 如何获取

• 插件市场地址：ext.dcloud.net.cn/plugin?name…
• 版本：v1.0.0

💡 写在最后

uz-chat致力于为开发者提供开箱即用的高质量聊天组件，无论是构建AI助手、在线客服还是社交聊天应用，它都能满足你的需求。现在就集成uz-chat，为你的应用增添专业的聊天体验吧！

如果觉得这个组件对你有帮助，欢迎在掘金、CSDN等平台分享你的使用体验，也欢迎提交issue和PR参与项目贡献！