【鸿蒙】大模型对话应用(四):页面发起请求实现对话能力

Demo介绍

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

DecEco Studio版本:DevEco Studio 3.1.1 Release

HarmonyOS SDK版本:API9

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

定义接口响应数据

根据大模型对话应用(一)中接口返回JSON格式,定义大模型接口返回数据

export class ALiYunResponse {
  request_id: string
  output: ALiYunResp_output
  usage: ALiYunResp_usage
}

class ALiYunResp_output {
  text: string
}

class ALiYunResp_usage {
  output_tokens: string
  input_tokens: string
}

输入框发送消息

在 ChatPageALiYun.ets文件,struct ChatPage { ... } 结构中,定义两个变量 submitMsg 和 textInputMsg

  • submitMsg:提交消息绑定变量,用于保存输入框输入文本信息,
  • textInputMsg:输入框输入信息绑定变量,可控制在发送消息后,清除文本输入框内容
@State submitMsg: string = ''
@State textInputMsg: string = ''

完善输入文本框TextInput的 .onChange() 方法和.onSubmit() 方法

.onChange()方法中,当输入框内容变化时,同步更新this.submitMsg和this.textInputMsg的值

.onSubmit()方法中,当输入框内容提交时,表示消息发送。

  1. 将 this.textInputMsg 变量置空,会驱动输入框显示内容更新为空
  2. 将输入框输入的文本加入页面展示的聊天列表集合this.messageArr 之中,页面展示我方发送 的消息
  3. 页面展示聊天消息的列表滑动至底端,展示最新消息
  4. 使用输入框输入的文本作为参数,调用大模型http接口,发起对话请求
  5. 调用大模型http接口成功后,将接口返回的对话文本加入页面展示的聊天列表集合this.messageArr 之中,页面展示对方(大模型)应答的消息
  6. 页面展示聊天消息的列表滑动至底端,展示最新消息
@Builder function inputBox(scroller: Scroller, messageArr: MessageVO[]) {
  Row() {
    Stack() {
      TextInput({placeholder: '有问题尽管问我~', text: this.textInputMsg})
        .height(50)
        .enterKeyType(EnterKeyType.Send)
        .onChange((text) => {
          this.submitMsg = text
          this.textInputMsg = text
        })
        .onSubmit(() => {
          this.textInputMsg = '' // 点击发送后 输入框置空
          this.messageArr.push(new MessageVO(MessageRoleEnum.Mine, this.submitMsg)) // 立刻展示我方对话
          scroller.scrollEdge(Edge.Bottom) // 消息发送后 将列表滚动到底端
          // 发送http请求
          ALiYunHttpUtils.request(this.submitMsg, (responseText: string) => {
            this.messageArr.push(new MessageVO(MessageRoleEnum.Other, responseText)) // 展示对方对话
            scroller.scrollEdge(Edge.Bottom) // 消息显示后 将列表滚动到底端
          })
        })
      Image($r('app.media.ic_public_send'))
        .margin({right:10})
        .height(35)
        .onClick(() => {
          // 参照文本输入框TextInput 的onSubmit事件实现
        })
    }
    .alignContent(Alignment.End)
    .height('10%')
  }
  .width('90%')
}

ALiYunHttpUtils处理回调

完善先前写好的ALiYunHttpUtils,为request() 方法入参添加一个回调函数,用于更新页面数据

import http from '@ohos.net.http';
import hilog from '@ohos.hilog';
import { ALiYunResponse } from '../model/ALiYunResponse';
class ALiYunHttpUtils {

  request(question: string, callback: Function) {
    hilog.info(0x0000, 'testTag', 'ALiYunHttpUtils request invoke. question: %{public}s', question);
    // 1 createHttp接口创建请求
    let httpRequest = http.createHttp();
    // 2 发起请求
    httpRequest.request(
      // 请求地址
      "https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation",
      // 请求options: HttpRequestOptions
      {
        // 请求方式
        method: http.RequestMethod.POST,
        // 请求头
        header: {
          "Content-Type": "application/json",
          // 这里的Authorization 就是刚才工作台查看的 API-KEY
          "Authorization": "sk-0bxxxxxxxxx1c3"
        },
        // 请求体
        extraData: {
          "model": "qwen-plus", // 指定用于对话的通义千问模型名
          "input": {
            "messages": [
              {
                "role": "user",
                "content": question // 请求发起方传入的问题
              }
            ]
          }
        }
      }, (err, data: http.HttpResponse) => {
        if (err) {
          hilog.error(0x0000, 'testTag', 'Failed to request ALiYun. Cause: %{public}s', JSON.stringify(err) ?? '');
          httpRequest.destroy();
        } else {
          hilog.info(0x0000, 'testTag', 'Request ALiYun success. data: %{public}s', JSON.stringify(data.result));
          let resp: ALiYunResponse = JSON.parse(data.result.toString())
          hilog.info(0x0000, 'testTag', 'Request ALiYunHttpUtils-Result. data: %{public}s', JSON.stringify(resp.output.text));
          httpRequest.destroy();
          callback(resp.output.text)
        }
      })
  }
}
export default new ALiYunHttpUtils;

预览效果

打开预览器,在输入文本框中输入内容后,敲击Enter键,可与大模型进行简单的对话

【鸿蒙】大模型对话应用(四):页面发起请求实现对话能力_第1张图片

真机(pad)调试效果:

petal_20240203_171933

 

至此,一个简单的对话Demo就实现完成了;

本项目仅实现了很基础的简单功能,仍有许多细节需要完善,如:等待接口返回过程的加载交互动效、接口异常处理、数据持久化、对话头像的设置等。

有更精巧、更兼容的实现方案,欢迎大家评论指正~

你可能感兴趣的:(鸿蒙应用开发,harmonyos,华为,鸿蒙,鸿蒙应用,ArkUI)