3、HarmonyOS Next 应用开发实践——类 ChatGPT APP Demo 开发

一、实践案例简介

• 自 2022 年底 OpenAI 发布 ChatGPT 以来，以 ChatGPT 为代表的预训练大语言模型逐渐走入大家的生活。
• AI + 聊天的形式大大降低了接触人工智能算法的门槛。随着大语言模型的发展，ChatGPT、Cluade、文心一言、智谱清言等等也陆续推出了各自的手机 APP，更加方便大家的日常使用。
• 今天就来介绍一下如何在 HarmonyOS Next 系统上开发一个类似 ChatGPT 的 APP，基于文心一言提供的免费 API，实现类似的 AI 聊天对话助手。

二、应用效果演示

• 简单的聊天演示如下：
  

三、功能拆解

• 开始实践之前，首先需要拆解一下项目的功能需求，本项目主要包含两部分：前台的界面显示交互及后台的接口请求。
  1. 后台接口：
     • 了解接口调用的详情
     • 发送网络请求
     • 流式接收和处理返回数据
  2. 前台界面：
     • 模型选择
     • 聊天记录显示
     • 流式返回显示
     • 输入框及发送按钮
     • 前后台交互

四、后台接口调用实现

1. 首先我们先来了解一下如何通过 JavaScript 来调用文心一言的 API，最简单的方式还是通过阅读文心千帆官网的文档，开始之前还是推荐去看一下文档（当然需要先注册账号并开通其中免费的模型服务如 ernie_speed 等，在控制台获取 AK / SK），这边简单总结一下调用流程，首先获取一个访问凭证 AccessToken，然后请求对话接口，根据文档参数发送 HTTP 请求即可。简单的 JavaScript + Node.js 调用代码如下：

   const request = require('request')
   const AK = "SOmgjX****sokFdx"
   const SK = "WlSl7I****iaUiPc"
   
   async function main() {
        
       var options = {
        
           'method': 'POST',
           'url': 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie_speed?access_token=' + await getAccessToken(),
           'headers': {
        
                   'Content-Type': 'application/json'
           }
       };
   
       request(options, function (error, response) {
        
           if (error) throw new Error(error);
           console.log(response.body);
       });
   }
   
   /**
    * 使用 AK，SK 生成鉴权签名（Access Token）
    * @return string 鉴权签名信息（Access Token）
    */
   function getAccessToken() {
        
   
       let options = {
        
           'method': 'POST',
           'url': 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + AK + '&client_secret=' + SK,
       }
       return new Promise((resolve, reject) => {
        
           request(options, (error, response) => {
        
               if (error) {
         reject(error) }
               else {
         resolve(JSON.parse(response.body).access_token) }
           })
       })
   }
   main();
   

2. 知道如何在 js + node 环境中调用文心一言的接口之后，还需要了解 HarmonyOS Next 系统中发送 HTTP 请求的方法，在 HarmonyOS Next 中发送网络请求，需要事先向系统申请网络访问权限，然后通过官方提供的系统网络请求接口进行请求发送。

   • 应用需要在 module.json5 配置文件的 requestPermissions 标签中声明权限。

     {
            
       "module": {
            
         ...
         "requestPermissions": [
           {
            
             "name": "ohos.permission.INTERNET", // 网络权限
             "reason": "$string:Use_internet_reason", // 申请原因（需使用资源字符串使用string类资源引用。格式为$string: ***。可参考权限使用理由的文案内容规范。）
             "usedScene": {
             // 使用场景
               "abilities": [ 
                 "EntryAbility" // Ability
               ],
               "when": "inuse" // 使用时机
             }
           }
         ]
       }
     }
     

   • 接口的调用流程如下：

     1. 从 @kit.NetworkKit 中导入 http 命名空间。

     2. 调用 createHttp() 方法，创建一个 HttpRequest 对象。

     3. 调用该对象的 on() 方法，订阅 http 响应头事件，此接口会比 request 请求先返回。可以根据业务需要订阅此消息。

     4. 调用该对象的 request() 或 requestInStream() 方法，传入http 请求的 url 地址和可选参数，发起网络请求。

     5. 按照实际业务需要，解析返回结果。

     6. 调用该对象的 off() 方法，取消订阅http响应头事件。

     7. 当该请求使用完毕时，调用 destroy() 方法主动销毁。

   • 示例代码如下：

     // 引入包名
     import {
             http } from '@kit.NetworkKit';
     import {
             BusinessError } from '@kit.BasicServicesKit';
     
     // 每一个httpRequest对应一个HTTP请求任务，不可复用
     let httpRequest = http.createHttp();
     // 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
     // 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
     httpRequest.on('headersReceive', (header) => {
            
       console.info('header: ' + JSON.stringify(header));
     });
     httpRequest.request(
       // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
       "EXAMPLE_URL",
       {
            
         method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
         // 开发者根据自身业务需要添加header字段
         header: {
            
           'Content-Type': 'application/json'
         },
         // 当使用POST请求时此字段用于传递请求体内容，具体格式与服务端协商确定
         extraData: "data to send",
         expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
         usingCache: true, // 可选，默认为true
         priority: 1, // 可选，默认为1
         connectTimeout: 60000, // 可选，默认为60000ms
         readTimeout: 60000, // 可选，默认为60000ms
         usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
         usingProxy: false, // 可选，默认不使用网络代理，自API 10开始支持该属性
         caPath:'/path/to/cacert.pem'