太原0元网站建设,如何做网站安全扫描,盘锦网络推广,网络营销实践总结报告Demo介绍
本demo对接阿里云和百度的大模型API#xff0c;实现一个简单的对话应用。
DecEco Studio版本#xff1a;DevEco Studio 3.1.1 Release
HarmonyOS SDK版本#xff1a;API9
关键点#xff1a;ArkTS、ArkUI、UIAbility、网络http请求、列表布局、层叠布局 对话页…Demo介绍
本demo对接阿里云和百度的大模型API实现一个简单的对话应用。
DecEco Studio版本DevEco Studio 3.1.1 Release
HarmonyOS SDK版本API9
关键点ArkTS、ArkUI、UIAbility、网络http请求、列表布局、层叠布局 对话页面设计
参照各种聊天类软件设计一个简单的对话页面大致可分为三部分对话框头对话框输入框 在src/main/ets/pages目录下新建页面完成对话页面UI实现 注意一定是新建page新建ets文件或复制已有的page都会导致页面的路由文件src/main/resources/base/profile/main_pages.json中 无法生成新页面的路由。 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%)
}
预览效果 对话框设计实现
对话框中每条消息又由①对话消息、②对话头像两部分实现
先定义消息体类结构
role消息发起角色;分为我方MessageRoleEnum.Mine和对方MessageRoleEnum.Othermessage消息文本
export class MessageVO {role: MessageRoleEnummessage: stringconstructor(role: MessageRoleEnum, message: string) {this.role rolethis.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元素复用机制BuilderBuilder所装饰的函数遵循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})
}
预览效果 输入框设计实现
使用层叠布局Stack完成一个简单的输入框
其中【发送】按钮图标是一个png格式图片放在src/main/resources/base/media 目录下 API9中输入框组件TextInputAPI不支持原生的 [ 清除输入框文本按钮 ] 可以使用层叠布局配合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%)
}
预览效果 头像图标为项目创建默认生成的src/main/resources/base/media/icon.png可自己更换
发送图标可在华为官网图标库获取HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 至此对话的UI页面就构建完成了
使用相同的步骤可以构建出相同的两个页面一个用于和阿里云大模型对话一个用于和百度云大模型对话。
下一步可以通过页面跳转或跨Ability调用的方式从首页进入不同大模型的对话页面
之后可以通过请求大模型接口更新页面数据驱动页面渲染实现与大模型的对话效果。 参考文档鸿蒙官方开发指南文档中心
