我是一名具备信息与计算科学背景的前端工程师,有着丰富的工作经验。我精通 HTML/CSS/Javascript、React/React Native、Next.js、Node.js、Taro、Java、Spring Boot、Typescript、PHP、Linux/C/Shell,了解 Vue、Python、Go、Rust等技术。
迪士尼度假区智能 AI 客服应用 - ASR/TTS/数字人(2024.01 - 2024.06)
本项目开发了一款智能 AI 客服应用,集成多种先进技术,实现语音识别、智能应答、数字人语音输出及动画展示的无缝结合,显著提升用户体验。
前端开发与架构
使用 React 和 Next.js 构建响应迅速的用户界面。
采用 react three fiber 渲染和控制 3D 数字人模型,增强视觉效果和互动体验。
采用模块化和组件化开发方式,提高代码的复用性和可维护性。
音频与动画处理
集成 howler.js 实现音频的高效播放和管理。
利用 Recorder core 优化语音输入、录音和播放,解决移动设备上的音量和播放问题。
使用 WebGL 和 Three.js 渲染数字人模型,支持眨眼、口型同步、微表情等动画效果,提升真实感。
交互逻辑与兼容性优化
实现挥手、打断对话、重复回答等交互逻辑,增强用户互动体验。
处理 visibilitychange 事件,当页面隐藏到后台时,中断 AI 客服语音并关闭录音。
解决浏览器和设备的兼容性问题,优化 UI 和音频播放效果。
后台服务集成
接入后端 API,实现语音转文字、文字转语音及智能应答功能。
通过 WebSocket 实现与后端服务的实时通信,优化流式数据处理和响应速度。
携程市场营销内容平台前端应用 - Trip.com Blog/Destinations/Rank(2020.06 - 2023.12)
技术栈
使用 Next.js、Styled Components、Mobx、Express 等技术实现页面服务端渲染及多语言国际站点应用。
前端开发与维护
负责 Trip.com Destinations/Rank/Blog H5/PC/RN 页面开发及维护。
参与产品评审、任务安排、线上问题处理及上线工作。
实施 SEO 优化和页面性能调优,处理 4xx/5xx 链接问题。
设置每日定时任务查询 ES 数据并创建图表页面展示。
性能优化与 SEO 改进
优化 webpack 打包、升级 next.js 并进行二次开发。
控制 CSS 和 JS 文件的 preload 加载顺序,优化 LCP、CLS、TBT、TTI 等性能指标。
根据专家建议优化 meta、helmet tdk、ogp tags、结构化数据及内容展示。
后台编辑页面开发及站点链接问题跟踪
二次开发 braft editor 富文本编辑器,增加图片展示时间段和视频链接检测等功能。
增加目的地、景点等商品卡片,定制 Table、Button、Coupon、Calendar 等文章组件。
使用 Java 查询 Elasticsearch 收集的站点请求日志数据并存入 Redis 缓存。
启用定时任务查询并报告昨日站点 4xx/5xx 链接数据。
携程攻略社区行中前端应用 - 旅行直播/日程/高铁游/旅拍 (2017.04 - 2018.06)
旅行直播及相关 H5/RN 页面开发
带队完成旅行直播、日程、高铁游、图文、旅拍等 H5/RN 页面的开发及维护。
负责直播/视频 H5 分享页、Web OBS 直播推流及短视频上传页、百度地图展示高铁线路 H5 页面的开发。
独立搭建攻略社区首个 Node.js SSR 站点,并开发内容图文、旅拍等 H5 页面。
直播/视频分享页开发
使用网易的 Nepjs 开发直播/视频分享页,解决视频在手机端各浏览器的兼容性问题。
支持直播、录播、视频三种类型,在视频层上展示 IM 消息及动态呈现打赏礼物。
视频上传功能实现
开发视频上传页,与网易后端、直播后端交互完成视频上传功能。
视频通过网易的 Web SDK 存储至云端,直播后端记录上传情况。
高铁游 H5 页面及 Node.js SSR 站点开发
使用百度地图 JS SDK 开发高铁游 H5 页面,快速迭代并验证技术可行性,为后续高铁游产品提供支持。
使用 React, Redux, SSR 服务端渲染技术,独立搭建 Node.js SSR 站点,实现 H5、SEO、Hybrid 三套渲染方案并行开发,增加 Node API Proxy 聚合调用后端 SOA 服务。