鸿蒙开发:实现AI打字机效果

程序员一鸣
• 阅读 30

前言

代码案例基于Api13。

目前哪个行业最火,非AI莫属,deepseek发布之后,可以说,又把AI推上了一个新高度,在和AI进行询问会话的时候,我们可以发现,AI的回答都是以流式的效果进行展示的,也就是类似于打字机的效果,那么针对这种效果在实际的开发中是如何实现的呢?

具体的效果,根据业务情况而定,有两种模式,一种主动的流式输出,也就是数据以流式的形式进行返回,前端直接用组件加载即可,第二种就是刻意的流式展示,也就是在拿到数据之后,前端实现流式输出,进行打字机展示。

打字机的效果,一般都是在会话聊天之中,也就是列表之中,在实际的开发中,还要兼顾到,流式输出的数据加载是否会影响性能,页面闪烁,最新的聊天信息可展示等问题。

主动的流式输出

在一般的AI会话中,实现一个流式输出,一般会采用SSE或者WebSocket协议,像OpenAI官网,DeepSeek官网是采用SSE协议,当然,在实际的开发中,大家可以选择自己适用的技术即可。客户端发送问题之后,服务端检索到内容,就会时时的返回内容,具体是返回连接式的内容,还是逐字返回,需要和服务端进行定义。连接式返回,客户端只管加载,逐字返回,需要客户端拼接。

@Entry
@Component
struct Index {
  @State message?: string = ""
  intervalID?: number

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:模拟请求网络接口
   */
  doHttp(success: (message: string) => void) {
    let data = "具体的实现效果,根据业务情况而定,有两种模式,一种主动的流式输出,也就是数据以流式的形式进行返回,前端直接用组件加载即可,第二种就是刻意的流式展示,也就是在拿到数据之后,前端实现流式输出,进行打字机展示。"
    let position: number = 0
    //模拟请求流式输出
    this.intervalID = setInterval(() => {
      position = position + 2
      let message = data.substring(0, position)
      if (success != undefined) {
        success(message)
      }
      if (message.length >= data.length) {
        clearInterval(this.intervalID)
      }
    }, 100)
  }

  build() {
    Column() {
      Button("加载")
        .margin({ top: 10 })
        .onClick(() => {
          this.doHttp((message: string) => {
            this.message = message
          })
        })
      Text(this.message)
        .margin({ top: 20 })
        .width("100%")
    }.width("100%")
    .height("100%")
    .padding(10)
  }
}

我们可以看下演示的效果,实际的开发中,前端无须关注每次的返回字的长度。

鸿蒙开发:实现AI打字机效果

被动的流式展示

所谓的被动,就是在已有数据的情况下,如何实现打字机的效果,这个比较的简单,无非是开启一个定时,以每隔多少时间,输出多少字为主,时间和输出字的长度都可以自己调节,简单案例如下,当然了,这种方式一般很少应用于实际的开发,不过在客户端有类似打字机效果的情况下可以使用。

@Entry
@Component
struct Index {
  @State message?: string = ""
  intervalID?: number

  build() {
    Column() {
      Button("加载")
        .margin({ top: 10 })
        .onClick(() => {
          this.start()
        })
      Text(this.message)
        .margin({ top: 20 })
        .width("100%")
    }.width("100%")
    .height("100%")
    .padding(10)
  }

  private start() {
    let data = "具体的实现效果,根据业务情况而定,有两种模式,一种主动的流式输出,也就是数据以流式的形式进行返回,前端直接用组件加载即可,第二种就是刻意的流式展示,也就是在拿到数据之后,前端实现流式输出,进行打字机展示。"
    let position: number = 0
    this.intervalID = setInterval(() => {
      position = position + 2
      this.message = data.substring(0, position)
      if (this.message.length >= data.length) {
        clearInterval(this.intervalID)
      }
      console.log("======定时")
    }, 100)
  }
}

我们看下输出效果,是不是有那种打字机的效果了,需要注意的是,定时关闭。

鸿蒙开发:实现AI打字机效果

列表打印机效果

以上的效果都是以一个Text组件展示的情况,在实际的开发中,更多的是以左右会话形式,这时需要考虑的就多一点,比如会话定位在底部,流式展示时,不让列表闪烁等等问题,那么都是需要考虑的。

下面简单的实现一下聊天会话模式,所有的数据都是模拟的,UI简单的绘制了一下,在实际的开发中,肯定比较精细。

import { KeyboardAvoidMode } from '@kit.ArkUI'

@Observed
export class MessageBean {
  leftMessage?: string
  rightMessage?: string
}

@Component
struct ChatView {
  @ObjectLink messageBean: MessageBean;

  build() {
    Column() {
      if (this.messageBean.rightMessage != undefined) {
        Row() {
          Text(this.messageBean.rightMessage)
            .margin({ right: 10 })
          Image($r("app.media.startIcon"))
            .id("user_logo")
            .border({ color: Color.Red, width: 1, radius: 20 })
            .width(20)
            .height(20)
        }.width("100%")
        .justifyContent(FlexAlign.End)
        .padding({ right: 10 })
      } else {
        Row() {
          Image($r("app.media.startIcon"))
            .border({ color: Color.Red, width: 1, radius: 20 })
            .width(20)
            .height(20)
          Text(this.messageBean.leftMessage)
            .margin({ left: 10 })
        }.alignItems(VerticalAlign.Top)
        .padding({ right: 20 })
      }

    }
  }
}

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller()
  @State sendMessage: string = ""
  @State messageList: MessageBean[] = []
  intervalID?: number
  private isEnd: boolean = true

  aboutToAppear(): void {
    this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
  }

  /**
   *AUTHOR:AbnerMing
   *INTRODUCE:模拟请求网络接口
   */
  doHttp(success: (message: string) => void) {
    let data = "具体的实现效果,根据业务情况而定,有两种模式,一种主动的流式输出,也就是数据以流式的形式进行返回,前端直接用组件加载即可,第二种就是刻意的流式展示,也就是在拿到数据之后,前端实现流式输出,进行打字机展示。"
    let position: number = 0
    //模拟请求流式输出
    this.intervalID = setInterval(() => {
      position = position + 2
      let message = data.substring(0, position)
      if (success != undefined) {
        success(message)
      }
      if (message.length >= data.length) {
        this.isEnd = true //模拟结束
        clearInterval(this.intervalID)
      }
    }, 100)
  }

  build() {
    RelativeContainer() {
      List({ space: 10, scroller: this.scroller }) {
        ForEach(this.messageList, (item: MessageBean) => {
          ListItem() {
            ChatView({ messageBean: item })
          }
        })
      }.margin({ top: 10 })
      .alignRules({
        top: {
          anchor: "__container__",
          align: VerticalAlign.Top
        },
        bottom: {
          anchor: "layout_send",
          align: VerticalAlign.Top
        }
      })

      RelativeContainer() {
        TextInput({ placeholder: "请输入问题" })
          .onChange((text) => {
            this.sendMessage = text
          })
          .alignRules({
            left: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            },
            right: {
              anchor: "btn_send",
              align: HorizontalAlign.Start
            }
          })
        Button("发送")
          .id("btn_send")
          .margin({ left: 10 })
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          }).onClick(() => {
          //发送
          if (this.isEnd) {
            this.isEnd = false
            let bean = new MessageBean()
            bean.rightMessage = this.sendMessage
            this.messageList.push(bean)
            this.scroller.scrollEdge(Edge.Bottom)
            //模拟接口返回数据
            let leftBean = new MessageBean()
            this.messageList.push(leftBean)
            this.doHttp((content) => {
              leftBean.leftMessage = content
            })
          }

        })
      }
      .height(40)
      .id("layout_send")
      .padding({ left: 10, right: 10 })
      .backgroundColor(Color.White)
      .alignRules({
        bottom: {
          anchor: "__container__",
          align: VerticalAlign.Bottom
        }
      })
    }.width("100%")
    .height("100%")
  }
}

运行之后,我们简单测试一下:

鸿蒙开发:实现AI打字机效果

一般会话列表的形式,有一点需要注意,那就是历史记录。

相关总结

需要注意的是,内容一般都是以markdown的形式输出,也就是真实的数据中,内容都是有样式的,比如加粗,图片,表格等等,所以,不能以单一的Text组件进行展示,需要针对markdown文本适配。

打字机的效果,更多的是在服务端的数据输出,客户端,最主要的是针对数据的渲染。

点赞
收藏
评论区
推荐文章
不才 不才
3年前
md-loader
mdloader组件文档是如何渲染出来文档用于描述系统功能,而组件文档描述组件的功能,对于前端组件为了直观体现一般会有一个预览模块,而一般组件文档都是采用markdown编写,而md是文本内容且并没有渲染组件代码的能力,那么这是如何做的呢?简单的说就是“自定义结构”,像elementui中对代码的描述为,中间的YOUCODE可以放简单的vue组件代码。这种
Wesley13 Wesley13
3年前
Markdown简介
Markdown是什么  Markdown是一种完全由标点符号标记的纯文本,这些标点符号被Markdown赋予表达含义以使得文本看上去可以代表特定的语义,比如:井号标记代表标题、星号标记代表强调、两个星号标记代表加粗。  Markdown设计之初只是让写作文档和阅读文档变得更容易,因Markdo
Stella981 Stella981
3年前
Markdown语法
Markdown基本语法\TOC\优点:1、因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。2、操作简单。比如:word编辑时标记个标题,先选中内容,再点击导航栏的标题按钮,选择几级标题。要三个步骤。而Markdown只需要在标题内容前加即可缺点:1、需要记一
Stella981 Stella981
3年前
Markdown
MarkdownMarkdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。现在所写的语法就是Markdown语法目录语法结构(语法结构)表格(表格)图片插入(图片插入)工具(工具)
少湖说 少湖说
6个月前
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter实战:混合开发鸿蒙Flutter混合开发主要有两种形式。1.基于har将fluttermodule打包成har包,在原生鸿蒙项目中,以har包的方式引入。其优点是主项目开发者可以不关注Flutter实现,不需要安装配置Flutter开发环
少湖说 少湖说
6个月前
鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙
鸿蒙Flutter实战:现有Flutter项目支持鸿蒙背景原来使用Flutter开发的项目,需要适配鸿蒙。环境搭建见文章[鸿蒙Flutter适配指南],搭建开发环境,使用fvm管理多版本SDK。模块化原有项目保持模块化,拆分为apps/common/com
少湖说 少湖说
6个月前
鸿蒙Flutter实战:10-常见问题集合
鸿蒙Flutter实战:10常见问题集合1.学习路径应该是怎样的,需要掌握哪些技术才具备鸿蒙Flutter开发能力1.1学习和掌握Flutter开发技术,这块需要在Flutter社区学历1.2学习鸿蒙基础概念和知识,推荐学习,,,2.MatePad应用适配
什么是虚拟展馆3D全景,它有什么优势?华锐互动
首先需要用全景拍摄的模式拍出真实的展馆全景图;其次,要高清展示的馆内产品的图片,开发介绍视频语音功能,不同方位的热点展示这些内容;再者需要开发全景漫游功能,让参观者可以随时随地在虚拟场景中自由浏览;最后就是部署到服务器上。1、运用3d全景虚拟技实现将现实产品还原到线上,实现360度旋转展示,用户可以在手机、ipad、电脑等设备进行无死角浏览。2、变静态为动态
使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理
背景在上一篇文章中,我们已经了解到华为即将发布的鸿蒙操作系统,以及各个互联网厂商开展鸿蒙应用开发的消息。其中,Taro作为一个重要的前端开发框架,也积极适配鸿蒙的新一代语言框架——ArkTS。本文将深入探讨Taro适配鸿蒙ArkTS框架的工作原理,接下来我
京东云开发者 京东云开发者
9个月前
动态化-鸿蒙跨端方案介绍
一、背景👉华为在2023.9.25官方发布会上宣布,新的鸿蒙系统将不再兼容安卓应用,这意味着,包括京东金融APP在内的所有安卓应用,在新的鸿蒙系统上将无法运行,需要重新开发专门适用于新鸿蒙系统的专版APP。二、原生适配方案原生适配方案就是将京东金融APP