【鸿蒙】大模型对话应用(一):大模型接口对接与调试

Demo介绍

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

DecEco Studio版本:DevEco Studio 3.1.1 Release

HarmonyOS API版本:API9

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

官方接口文档

此链接为当前时间(2024-1-26)文档链接地址,可能发生迁移变更,以官方为准。

阿里云通义千文API接口文档地址:通义千问API如何使用_模型服务灵积(DashScope)-阿里云帮助中心

百度智能云千帆大模型API接口文档地址:鉴权介绍 - 千帆大模型平台 | 百度智能云文档

新建项目

API9,Stage模型(需要联网)【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第1张图片

资源同步下载结束后,打开预览器,可正常预览页面

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第2张图片

实现API接口调用

新建http目录,在其中并在此目录下新建两个ts文件,分别实现调用阿里云和百度的API接口

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第3张图片

申请网络权限

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第4张图片

1、对接阿里云API

开通服务并获得API-KEY

请参照:如何开通DashScope并创建API-KEY_模型服务灵积(DashScope)-阿里云帮助中心

开通完成后,可在工作台拿到接口请求的鉴权信息:API-KEY,发起http时请求头header需要携带

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第5张图片

参照文档实现请求方法

根据接口文档构造请求体,发起http请求,完成大模型对话

接口文档:通义千问API如何使用_模型服务灵积(DashScope)-阿里云帮助中心

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第6张图片

实现ALiYunHttpUtils 类的 request 方法。


import http from '@ohos.net.http';
import hilog from '@ohos.hilog';
class ALiYunHttpUtils {

  request(question: string) {
    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-0bxxxxxxxxxxxxxxxxc3" // 脱敏处理
        },
        // 请求体
        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.error(0x0000, 'testTag', 'Request ALiYun success. data: %{public}s', JSON.stringify(data.result));
          httpRequest.destroy();
        }
      })
  }
  
}
export default new ALiYunHttpUtils;
调用http请求方法

在index页面加载的时候,调用ALiYunHttpUtils.request方法

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第7张图片

刷新页面触发请求

刷新或重启Preview预览器,index页面重新加载,会执行aboutToAppear方法;

打开Log控制台,可看到请求结果

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第8张图片

2、对接百度API

创建应用

登录平台,创建应用,可得到应用的API Key 和 Secret Key;这两个信息在调用鉴权信息接口时会用到。

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第9张图片

开通服务(计费)

添加应用后,会默认预置一部分服务,可在【在线服务】菜单页查看;

大部分服务都需要付费开通,有几个免费的本人不太会用(尴尬。。)有免费的策略各位也可以分享一下 嘿嘿~

开通了一个计费的,个人测试使用,调用不会很频繁

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第10张图片

鉴权认证

根据鉴权接口文档,实现鉴权接口请求

文档地址:获取access_token - 千帆大模型平台 | 百度智能云文档【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第11张图片

实现BaiduHttpUtils类的 request 方法。

注意:此处BaiduHttpUtils.request方法仅完成了鉴权接口调用,还未进行真正的对话

import hilog from '@ohos.hilog';
import http from '@ohos.net.http';
class BaiduHttpUtils {

  request(question: string) {
    hilog.info(0x0000, 'testTag', 'BaiduHttpUtils request invoke. question: %{public}s', question);

    // 先鉴权
    // 1 createHttp接口创建请求
    let httpRequest = http.createHttp();

    // 2 发起请求
    httpRequest.request(
      // 请求地址
      // 参数grant_type 固定值client_credentials
      // 参数client_id 应用的API Key
      // 参数client_secret 应用的Secret Key
      "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=asxxxxxxxxxxHo&client_secret=ihxxxxxxxxgG",
      {
        method: http.RequestMethod.POST,
        header: {
          "Content-Type": "application/json"
        }
      }, (err, data: http.HttpResponse) => {
        if (err) {
          hilog.error(0x0000, 'testTag', 'Failed to request BaiDu. Cause: %{public}s', JSON.stringify(err) ?? '');
          httpRequest.destroy();
        } else {
          hilog.error(0x0000, 'testTag', 'Request BaiDu success. data: %{public}s', JSON.stringify(data.result));
          httpRequest.destroy();
        }
      }
    )
  }

}
export default new BaiduHttpUtils;

在index页面加载的时候,调用BaiduHttpUtils.request方法

鉴权通过后,可在接口返回中获取后续对话接口所需要的鉴权信息access_token

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第12张图片

发起对话请求

拿到access_token后,可根据上述开通的服务对应的接口文档,发起对话请求

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第13张图片

实现BaiduHttpUtils类的 chatRequest方法,在鉴权结束后调用

import hilog from '@ohos.hilog';
import http from '@ohos.net.http';
class BaiduHttpUtils {

  request(question: string) {
    hilog.info(0x0000, 'testTag', 'BaiduHttpUtils request invoke. question: %{public}s', question);

    // 先鉴权
    // 1 createHttp接口创建请求
    let httpRequest = http.createHttp();

    // 2 发起请求
    httpRequest.request(
      // 请求地址
      // 参数grant_type 固定值client_credentials
      // 参数client_id 应用的API Key
      // 参数client_secret 应用的Secret Key
      "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=asxxxxxxxxHo&client_secret=ihxxxxxxxxgG",
      {
        method: http.RequestMethod.POST,
        header: {
          "Content-Type": "application/json"
        }
      }, (err, data: http.HttpResponse) => {
        if (err) {
          hilog.error(0x0000, 'testTag', 'Failed to request BaiDu. Cause: %{public}s', JSON.stringify(err) ?? '');
          httpRequest.destroy();
        } else {
          hilog.error(0x0000, 'testTag', 'Request BaiDu success. data: %{public}s', JSON.stringify(data.result));
          httpRequest.destroy();

          // 携带认证信息 发起对话请求
          let respToken: BaiDuToken = JSON.parse(data.result.toString())
          this.chatRequest(respToken.access_token, question)
        }
      }
    )
  }

  chatRequest(token: string, question: string) {
    // 通常情况不建议把token打印出来 此处为了方便调试
    hilog.info(0x0000, 'testTag', 'BaiduHttpUtils chaRequest invoke. token: %{public}s, question: %{public}s', token, question);

    // 1 createHttp接口创建请求
    let httpRequest = http.createHttp();

    // 2 发起请求
    httpRequest.request(
      // 请求地址
      "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=" + token,
      {
        method: http.RequestMethod.POST,
        header: {
          "Content-Type": "application/json"
        },
        extraData: {
          "messages": [
            {
              "role": "user",
              "content": question
            }
          ]
        }
      }, (err, data: http.HttpResponse) => {
      if (err) {
        hilog.error(0x0000, 'testTag', 'Failed to request BaiDu. Cause: %{public}s', JSON.stringify(err) ?? '');
        httpRequest.destroy();
      } else {
        hilog.error(0x0000, 'testTag', 'Request BaiDu success. data: %{public}s', JSON.stringify(data.result));
        httpRequest.destroy();
      }
    })

  }

}
export default new BaiduHttpUtils;

class BaiDuToken {
  access_token: string
  expires_in: number
  session_key: string
  // ...
}
刷新页面触发请求

刷新或重启Preview预览器,index页面重新加载,会执行aboutToAppear方法;

打开Log控制台,可看到请求结果

【鸿蒙】大模型对话应用(一):大模型接口对接与调试_第14张图片

至此,两个大模型的API接口对接完成,下一步可以开始设计对话页面。

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