【鸿蒙】大模型对话应用(二):对话界面设计与实现

Demo介绍

本demo对接阿里云和百度的大模型API,实现一个简单的对话应用。

DecEco Studio版本:DevEco Studio 3.1.1 Release

HarmonyOS SDK版本:API9

关键点:ArkTS、ArkUI、UIAbility、网络http请求、列表布局、层叠布局

对话页面设计

参照各种聊天类软件设计,一个简单的对话页面大致可分为三部分:对话框头,对话框,输入框

【鸿蒙】大模型对话应用(二):对话界面设计与实现_第1张图片

在src/main/ets/pages目录下新建页面,完成对话页面UI实现;

注意:一定是新建page;新建ets文件或复制已有的page,都会导致页面的路由文件src/main/resources/base/profile/main_pages.json中 无法生成新页面的路由。

【鸿蒙】大模型对话应用(二):对话界面设计与实现_第2张图片

@Entry
@Component
struct ChatPage {
  build() {
    Row() {
      Column() {
        // 1 对话框头
        headerText("Hello 文心一言")
        // 2 对话框
        chatList()
        // 3 输入框
        inputBox()
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Builder function headerText(title: string) {
  
}

@Builder function chatList() {

}

@Builder function inputBox() {

}

对话框头设计实现

使用 @Builder 注解自定义UI结构 headerText

其中仅一个文本组件,文本字体最小20,最大40,文本限制占一行;是为了适配手机竖屏时,字体大小固定可能导致错行或展示异常;

对话框头高度占全屏比为10%

@Builder function headerText(title: string) {
  Text(title)
    .minFontSize(20).maxFontSize(40).maxLines(1)
    .fontWeight(FontWeight.Bold)
    .height('10%')
}

预览效果:

【鸿蒙】大模型对话应用(二):对话界面设计与实现_第3张图片

对话框设计实现

对话框中,每条消息又由:①对话消息、②对话头像,两部分实现

先定义消息体类结构:

  • role,消息发起角色;分为我方(MessageRoleEnum.Mine)和对方(MessageRoleEnum.Other)
  • message,消息文本
export class MessageVO {
  role: MessageRoleEnum
  message: string

  constructor(role: MessageRoleEnum, message: string) {
    this.role = role
    this.message = message
  }
}

export enum MessageRoleEnum {
  // 我方
  Mine,
  // 对方
  Other
}

定义测试数据

import { MessageRoleEnum, MessageVO } from '../model/MessageVO'
class TextTest {
  static readonly Text: MessageVO[] = [
    {
      role: MessageRoleEnum.Mine,
      message: '请介绍一下你自己'
    },
    {
      role: MessageRoleEnum.Other,
      message: "我是百度公司开发的人工智能语言模型,我的中文名是文心一言,英文名是ERNIE-Bot," +
      "可以协助您完成范围广泛的任务并提供有关各种主题的信息,比如回答问题,提供定义和解释及建议。如果您有任何问题,请随时向我提问。"
    },
    {
      role: MessageRoleEnum.Mine,
      message: '我在上海,周末可以去哪里玩?'
    },
    {
      role: MessageRoleEnum.Other,
      message: '上海是一个充满活力和文化氛围的城市,有很多适合周末游玩的地方。以下是几个值得推荐的地方:\n\n1. 上海科技馆:上海科技馆是中国大陆最大的科技馆之一'
    }
  ]
}

使用列表组件(List)完成布局构建

说明:ArkUI提供了一种轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

下面代码中chatList 为对话框的UI布局结构;

chatLine_mine chatLine_other 分别为:消息源是自己 和 消息源是对方(大模型)时的UI结构,唯一不同的就是图像在左(对方)还是在右(我方);

chatLine_image_style 修饰对话框中头像样式;

chatLine_text_style 修饰对话框中消息文本的样式。

@Builder function chatList() {
  List({space: 15, scroller: this.scroller}) {
    ForEach(TextTest.Text, (item: MessageVO) => {
      if (item.role === MessageRoleEnum.Mine) {
        chatLine_mine(item.message)
      } else {
        chatLine_other(item.message)
      }
    })
  }
  .alignListItem(ListItemAlign.Center)
  .height('80%')
}

@Builder function chatLine_mine(msg:string) {
  Row({space: 5}) {
    Text(msg).chatLine_text_style()
    Image($r("app.media.icon")).chatLine_image_style()
  }
  .alignItems(VerticalAlign.Top)
}
@Builder function chatLine_other(msg:string) {
  Row({space: 5}) {
    Image($r("app.media.icon")).chatLine_image_style()
    Text(msg).chatLine_text_style()
  }
  .alignItems(VerticalAlign.Top)
}

@Extend(Image) function chatLine_image_style() {
  .width(50)
  .aspectRatio(1)
}
@Extend(Text) function chatLine_text_style() {
  .fontSize(20)
  .fontColor(Color.White)
  .width('70%')
  .lineHeight(25)
  .backgroundColor('rgb(64,64,64)')
  .padding(12)
  .border({radius: 10})
}

预览效果:

【鸿蒙】大模型对话应用(二):对话界面设计与实现_第4张图片

输入框设计实现

使用层叠布局(Stack)完成一个简单的输入框;

其中【发送】按钮图标,是一个png格式图片,放在src/main/resources/base/media 目录下;

API9中,输入框组件(TextInput)API不支持原生的 [ 清除输入框文本按钮 ] ,可以使用层叠布局配合TextInput 组件的 text 属性实现。

@Builder function inputBox() {
  Row() {
    Stack() {
      TextInput({placeholder: '有问题尽管问我~'})
        .height(50)
        .enterKeyType(EnterKeyType.Send)
      Image($r('app.media.ic_public_send'))
        .margin({right:10})
        .height(35)
    }
    .alignContent(Alignment.End)
    .height('10%')
  }
  .width('90%')
}

预览效果:

【鸿蒙】大模型对话应用(二):对话界面设计与实现_第5张图片

头像图标为项目创建默认生成的src/main/resources/base/media/icon.png,可自己更换

发送图标可在华为官网图标库获取:HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟

至此,对话的UI页面就构建完成了;

使用相同的步骤,可以构建出相同的两个页面,一个用于和阿里云大模型对话,一个用于和百度云大模型对话。

下一步,可以通过页面跳转或跨Ability调用的方式,从首页进入不同大模型的对话页面;

之后可以通过请求大模型接口,更新页面数据,驱动页面渲染,实现与大模型的对话效果。

参考文档(鸿蒙官方开发指南):文档中心

你可能感兴趣的:(鸿蒙应用开发,harmonyos,华为,鸿蒙,鸿蒙应用,ArkUI,线性布局,层叠布局)