大家好我是鸭鸭。有人做了一个能打视频电话的 AI 姑娘找来 54 个人陪她聊了聊今年最期待什么。每人一分钟。挂断以后再问你觉得刚才那位是真人吗26 个人说是。这家公司叫 Tavus。10 月 1 日它公布了 Griffin 的研究预览版Griffin-Lite。那个姑娘的脸、声音还有跟人聊的内容都是实时生成的。参与者事先被告知自己会匹配到另一位参与者。直到聊完才问对面有没有可能不是真人。测试之外Tavus 还放了几个演示。有个人叫 Rudy正在跟 AI Vanessa 分享自己升职的消息。他还没讲完Vanessa 已经有了回应。两边的声音叠了一下接着往下聊没断。升职这种事确实不用一个人讲完另一个人再排队祝贺。Griffin 讲话的时候还在听、还在看。你插一句它能停下来你还在说它也能先点个头给点回应。不用每次都把一句话组织完整讲完了再等着对面交作业。另一个演示是 Sagar 在焊电路板。他在这边动手AI 在视频那头跟着看。进展到下一步需要提醒了它再开口。中间安静一点也不用急着填满。看教程时视频里的老师已经往下讲了你手里这一步还没弄完。暂停倒回去再看一遍。手上要是正拿着工具还得先腾出手。视频那头要是有人能看着你等你做完再接着往下教那这通电话我还真想打一回。不过现在还约不上。Griffin-Lite 只给少数受邀的人测试没上 Tavus 的常规平台和 API。等它开放了先不聊今年最期待什么了。找个手上没忙完的活儿看看她能不能等我把这一步做完。鸭鸭给你分享一道题当大模型API响应延迟超过1秒时前端可以采取哪些优化策略保证用户体验回答重点大模型 API 动辄 2-5 秒的响应时间用户干等着界面没反应肯定受不了。前端优化的核心就是让用户感知不到等待主要靠三板斧立即反馈、流式输出、状态兜底。立即反馈是指用户点发送的瞬间界面就要有动静。消息气泡先出来哪怕内容是空的加个 loading 动画或者骨架屏让用户知道系统在干活。这招叫乐观 UI核心思路是把用户反馈和网络请求解耦不等后端响应就先更新界面。流式输出是大模型场景的标配。OpenAI、Claude 这些 API 都支持 SSE 流式返回后端每生成一个 token 就往前端推一次前端拿到就渲染用户看到的就是文字一个一个蹦出来的打字机效果。心理学上这叫进度反馈用户看着文字在动等 5 秒也不觉得烦。// 流式响应处理核心逻辑constresponseawaitfetch(/api/chat,{method:POST,body:JSON.stringify({message})})constreaderresponse.body.getReader()constdecodernewTextDecoder()while(true){const{done,value}awaitreader.read()if(done)breakconstchunkdecoder.decode(value)// 逐块追加到界面appendToMessage(chunk)}状态兜底是保底策略。设置 30 秒超时超了就提示响应超时请重试网络断了要能检测到并给出提示请求失败要有重试按钮。这些边界情况处理不好用户体验直接崩盘。扩展知识乐观 UI 的实现细节乐观 UI 不是简单地先显示再请求要考虑失败回滚的问题。用户发了一条消息界面上已经显示出去了结果请求失败了这时候要把那条消息标成发送失败给个重试按钮。// 完整的乐观 UI 实现constsendMessageasync(content){consttempIdDate.now()// 1. 立即更新本地状态显示用户消息dispatch({type:ADD_MESSAGE,payload:{id:tempId,content,status:sending}})try{constresponseawaitapi.chat(content)// 2. 成功后更新状态dispatch({type:UPDATE_MESSAGE,payload:{id:tempId,status:sent}})// 3. 添加 AI 回复dispatch({type:ADD_MESSAGE,payload:{id:response.id,content:response.text,role:assistant}})}catch(error){// 4. 失败后标记状态不删除消息dispatch({type:UPDATE_MESSAGE,payload:{id:tempId,status:failed,error:error.message}})}}流式输出的打字机效果优化原始的 SSE 数据是一坨一坨来的直接渲染会显得很生硬。优化方法是加一个缓冲队列控制渲染节奏每 30-50ms 渲染一个字符让打字效果更流畅自然。classTypeWriter{constructor(element,speed30){this.elementelementthis.speedspeedthis.queue[]this.isTypingfalse}add(text){this.queue.push(...text.split())if(!this.isTyping)this.type()}type(){if(this.queue.length0){this.isTypingfalsereturn}this.isTypingtruethis.element.textContentthis.queue.shift()setTimeout(()this.type(),this.speed)}}请求取消和防抖用户可能手快连点好几下或者问到一半想换个问题。这时候要能取消正在进行的请求不然前一个请求的响应回来会覆盖掉后面的。用 AbortController 实现请求取消再加个防抖控制触发频率。letcontrollernullconstsendWithCancelasync(message){// 取消上一个请求if(controller)controller.abort()controllernewAbortController()try{constresponseawaitfetch(/api/chat,{method:POST,body:JSON.stringify({message}),signal:controller.signal})// 处理响应...}catch(error){if(error.nameAbortError){console.log(请求已取消)return}throwerror}}骨架屏和加载状态的设计骨架屏不是随便画几个灰色块就行要模拟真实内容的布局。AI 回复的骨架屏应该是几行不等长的灰条模拟文字段落的样子。加载状态可以用三个跳动的点或者用一个呼吸灯效果的图标比转圈圈看着舒服。本地缓存减少重复请求相同的问题没必要每次都调 API可以做一层本地缓存。用问题内容的 hash 作为 key把回答存到 localStorage 或者 IndexedDB 里。下次问同样的问题直接从缓存取响应时间从几秒变成几毫秒。当然要注意缓存的时效性太老的缓存要清掉。相关文档:React 官方文档 Suspense: https://react.dev/reference/react/SuspenseFetch API 流式处理: https://developer.mozilla.org/docs/Web/API/Streams_APIRedux 异步数据流: https://redux.js.org/tutorials/fundamentals/part-6-async-logic篇幅有限更多 AI 大模型相关面试题可以进入面试鸭进行查阅。