【鸿蒙】大模型对话应用(三):跨Ability跳转页面

news/2024/7/21 12:23:31 标签: harmonyos, 华为, 鸿蒙, 鸿蒙应用, ArkUI, UIAbility

Demo介绍

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

DecEco Studio版本:DevEco Studio 3.1.1 Release

HarmonyOS SDK版本:API9

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

页面跳转

在前序大模型对话应用(一)(二)中完成了接口的调试和页面的构建;

想要从应用首页跳转到百度和阿里云的大大模型对话页面,可以通过 router.pushUrl 方法直接进行页面之间的跳转;

也可以通过跨Ability拉起其他Ability的方式,从EntryAbility(默认的入口Ability)中启动新的Ability;为了可以同时与两个大模型进行对话而不相互影响,本demo才用拉起新的Ability方式进行实现。

新建Ability

ets目录下新建ability,命名为 ALiYunAbility

新建成功后,会自动创建对应的目录和UIAbility(此处是ALiYunAbility);

ALiYunAbility 中 onWindowStageCreate方法是窗口页面展示时(可以简单的这么理解)会触发的系统回调函数;其中 windowStage.loadContent 会指明加载展示的具体页面。

同时src/main/module.json5 文件中,会自动生成对应ability的配置信息:

用同样的方式,可以创建百度云模型对话的Ability(BaiDuYunAbility):

添加点击事件,拉起Ability

在首页src/main/ets/pages/Index.ets 中添加两个按钮(Button组件),分别实现点击事件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({space: 20}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('拉起文心一言').fontSize(25)
          .onClick(() => {

          })
        
        Button('拉起通义千问').fontSize(25)
          .onClick(() => {

          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

复习一下拉起一个Ability的三个步骤:

  1. 获取UIAbility上下文 UIAbilityContext
  2. 构建want参数,描述跳转Ability信息
  3. 调用UIAbilityContext.startAbility(want:Want) 方法完成Ability的启动

根据上述步骤完善首页(Index.ets)按钮点击事件:

Index.ets代码:

import common from '@ohos.app.ability.common'
import Want from '@ohos.app.ability.Want'
@Entry
@Component
struct Index {
  private context = getContext(this) as common.UIAbilityContext
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({space: 20}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('拉起文心一言').fontSize(25)
          .onClick(() => {
            let want: Want = {
              deviceId: "",
              bundleName: "com.example.intelligenttalk",
              moduleName: "entry",
              abilityName: "BaiDuYunAbility"
            }
            this.context.startAbility(want)
          })

        Button('拉起通义千问').fontSize(25)
          .onClick(() => {
            let want: Want = {
              deviceId: "",
              bundleName: "com.example.intelligenttalk",
              moduleName: "entry",
              abilityName: "ALiYunAbility"
            }
            this.context.startAbility(want)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面预览效果:

Preview预览器无法实现跨Ability跳转,此处需要使用模拟器(本机/远程均可)或真机调试。

src/main/ets/pages 目录下新建一个Page(注意是新建,复制已有的ets文件不会自动生成路由配置文件),命名为ChatPageALiYun,与ChatPage区分;并将ChatPage的代码复制过来。修改一下对话框头的文本即可。

 修改两个UIAbility文件,指定加载页面

使用模拟器或真机调试

点击首页, [ 拉起文心一言 ] 按钮,页面将发生跳转,此处展示远程模拟器的页面截图效果。(本地模拟器、远程模拟器、真机设备均可达到调试效果)

点击首页, [ 拉起通义千问 ] 按钮,页面将发生跳转,此处展示远程模拟器的页面截图效果。(本地模拟器、远程模拟器、真机设备均可达到调试效果)

打开任务栏,可以看到一个应用启用了三个不同的功能界面

完成在一个Ability中启动另一个Ability的功能后,我们实现了页面的跳转;目前跳转的对话页面,展示的对话内容是固定的。

那么下一步将在跳转至对话页面后,将输入框的输入文本内容,作为调用大模型接口的参数,向大模型发起请求;将大模型接口返回的信息作为对话内容展示在页面中,完成对话效果。

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


http://www.niftyadmin.cn/n/5357608.html

相关文章

2024/1/31 备战蓝桥杯 3-2 栈

目录 后缀表达式 P1449 后缀表达式 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 栈 P1044 [NOIP2003 普及组] 栈 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 后缀表达式 P1449 后缀表达式 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:模拟stl的…

怎样选择多线程多进程和多协程?

有这么多可以实现并发的方式方法,那么,我们怎么确定在合适的时机采用合适的实现方法呢?这就需要我们对各个实现并发的方式方法有一个全面的概念性的理解,以及他们的内在执行逻辑优缺点有一个清晰的认识! 如下图所示,首先我们需要对单进程、多进程、多线程及多协程之间有…

CISAW和CISP-PTE证书选择指南

📣在信息安全领域,选择合适的证书可以为你的职业生涯增添光彩。很多从事信息渗透行业的朋友经常讨论CISP-PTE和CISAW之间的选择问题。今天就从4个方面带你详细了解这两张证书,帮你做出明智的选择! 1️⃣证书的行业前景 &#x1f4…

IDEA 取消参数名称提示、IDEA如何去掉变量类型提醒

一、IDEA 取消参数名称显示 取消显示形参名提示 例如这样的提示信息 二、解决方法 1、File—>Setting–>Editor—>Inlay Hints—>Java 去掉 Show Parameter hints for 前面的勾即可,然后Apply—>Ok 2、右键Disable Hints

【AI视野·今日Robot 机器人论文速览 第七十七期】Mon, 15 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Mon, 15 Jan 2024 Totally 14 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers Learning Joint Space Reference Manifold for Reliable Physical Assistance Authors Amirreza Razmjoo, Tilen Brecelj, Kri…

机器学习复习(6)——numpy的数学操作

加减法运算 # 创建两个不同的数组 a np.arange(4) #list(0,1,2,3 b np.array([5,10,15,20]) # 两个数组做减法运算 b-a 运行结果: 计算数组的平方 #b*2代表数组b每个元素乘以2 #b**2代表数组b每个元素的2次方 b**2 运行结果: 计算数组的正弦值 #…

100.相同的树

100.相同的树 给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的。 示例 1: 输入:p [1,2,3], q [1,2,3] 输出:…

C#使用RabbitMQ-3_发布订阅模式(扇形交换机)

简介 发布订阅模式允许一个生产者向多个消费者发送消息。在RabbitMQ中实现发布订阅模式通常涉及以下几个关键组件: 生产者:负责生产并发送消息到RabbitMQ的Exchange(路由器)。Exchange:作为消息的中转站,…