关于 AI 应用的前端具体实践

前言

本人目前就职于一家 AI 应用落地的初创公司,做了一些 AI 应用实际落地的相关开发,接下来我就分享一下我对这个方向的一些心得。

我们目前主要实现的是一款以对话为主要形式的校招求职小程序,前端的技术栈主要是 Vue 3 + uni-app + WebSocket。

因为对话涉及到渲染 Markdown 文本和 HTML 文本,直接渲染 HTML 不太合适,尝试过使用 rich-text 标签,效果也不理想,所以还使用了 mp-html。尽管如此,遇到一些需要深入自定义渲染样式的情况还是有些麻烦,会在下文中一一阐述。

聊天场景一些涉及到的功能点

对于对话列表,我们采用了 z-paging 这个库,使用了聊天记录模式 + 虚拟列表,保证在大量历史对话的场景下,能保证使用体验的顺畅。

对于消息通信,我们使用了 WebSocket 技术,确保消息收发及时,聊天顺畅。

关于 AI 对话中的自定义标签

后端给过来的数据,有一些是需要做特殊渲染的,比如一些模板、视频、链接、推荐问题等。 这些有的可以约定一个新字段来做区分。但是如果这些需要特殊渲染的部分和正文是互相穿插的,新字段的方式就不太好用了。 这时候就可以和后端约定,使用固定格式的标签:

html 复制代码
<p>test</p>
<AICD type="toPage" url="/pages/chat/index">跳转聊天列表</AICD>
<p>test</p>

引用文献/资料功能的实现

也是通过自定义标签来实现,大体是约定固定标签,然后单独渲染样式,再做一个一直闪烁的 CSS 动画。

在实现的时候遇到了一个问题,无法为自定义标签添加 CSS 动画,因为 mp-html 不支持太复杂的 CSS。 所以我用正则表达式匹配到固定标签,向 msg 对象中添加引用文献属性,在渲染时,如果有引用文献属性,则单独渲染一个 view 组件来处理。

js 复制代码
 handleContentThinkingAction(msg) {
   // 如果存在缓存,将新内容添加到缓存中
   if (this.taCache) {
     this.taCache += msg.content;

     // 检查缓存是否包含完整的 TA 标签
     if (this.taCache.includes('</TA>')) {
       // 尝试匹配完整的 TA 标签
       const taMatch = this.taCache.match(/<TA\s+max="(\d+)"\s+min="(\d+)">(.*?)<\/TA>/);
       if (taMatch) {
         const [_, max, min, text] = taMatch;
         msg.data.thinkingAction = {
           text: text,
           max: parseInt(max),
           min: parseInt(min)
         };
         // 移除 TA 标签部分,保留其他内容
         msg.content = this.taCache.replace(/<TA.*?<\/TA>/, '').trim();
         // 清除缓存
         this.taCache = '';
       } else {
         // 如果匹配失败,说明标签可能不完整,继续等待
         msg.content = '';
       }
     } else {
       // 如果缓存中还没有完整的 TA 标签,清空当前消息的 content
       msg.content = '';
     }
     return msg;
   }

   // 检查当前消息是否包含 TA 标签的开始
   if (msg.content) {
     // 如果当前消息包含完整的 TA 标签
     if (msg.content.includes('<TA') && msg.content.includes('</TA>')) {
       const taMatch = msg.content.match(/<TA\s+max="(\d+)"\s+min="(\d+)">(.*?)<\/TA>/);
       if (taMatch) {
         const [_, max, min, text] = taMatch;
         msg.data.thinkingAction = {
           text: text,
           max: parseInt(max),
           min: parseInt(min)
         };
         msg.content = msg.content.replace(/<TA.*?<\/TA>/, '').trim();
       }
     }
     // 如果只包含 TA 标签的开始部分
     else if (msg.content.includes('<TA') || msg.content.includes('<T')) {
       // 将内容存入缓存
       this.taCache = (this.taCache || '') + msg.content;
       msg.content = '';
       // 清空 currentContent,因为这部分内容不应该显示
       this.currentContent = '';
     }
   }

   return msg;
 },
css 复制代码
@keyframes text-highlight {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.thinking-action {
  color: #888;
  font-size: 26rpx;
  padding-bottom: 15rpx;
  background: linear-gradient(90deg, 
    #888 0%, 
    #000 20%, 
    #000 30%, 
    #888 50%, 
    #888 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
}

思链/思考动作

相对于引用文献功能来说就更简单些,自定义标签 + 简单的 CSS 修饰即可,但是要处理通过 WebSocket 通信时先返回部分自定义标签的情况(缓存 + 正则表达式判断)。

相关推荐
艾小码8 分钟前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥8 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北9 分钟前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel10 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue11 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny11 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI13 分钟前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy15 分钟前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python
guiyanakaung15 分钟前
CMP 如何优雅的实现跨软件的拖拽功能
前端·github
海上生明月丿19 分钟前
Vue 工程化
前端·javascript·vue.js