鸿蒙 Next 对接 AI API 实现文字对话功能指南

在智能化浪潮下，为用户提供便捷的 AI 文字对话功能，成为众多鸿蒙 Next 应用提升用户体验的关键。接下来，我们将深入剖析如何在鸿蒙 Next 系统中对接 AI API，打造流畅的文字对话交互。

前期搭建

环境部署

首先，安装 DevEco Studio 这一鸿蒙原生应用开发的核心工具。它能提供智能代码补全等功能，极大提高开发效率。安装过程需严格遵循官方文档，确保每个环节正确无误。

项目初始化

在 DevEco Studio 内创建新的鸿蒙 Next 应用项目。创建时，依据应用定位，精准选择合适的模板与配置选项。例如，若应用定位为知识问答类，可选择简洁的表单式页面模板，方便用户输入问题与查看答案。

网络权限申请

在应用的\entry\src\main\module.json5配置文件中，明确声明网络访问权限，这是应用与 AI API 进行数据交互的基础。添加如下代码：

{
   
  "module": {
   
    "requestPermissions": [
      {
   
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

对接流程

选定 AI API 服务

目前，市场上有多种 AI API 服务可供选择。像华为云自然语言处理服务，凭借其与鸿蒙系统的良好兼容性，能提供稳定高效的自然语言处理能力；还有百度文心一言 API，具备强大的语义理解与文本生成功能。开发者需综合考量服务的功能特性、价格、性能以及与鸿蒙 Next 系统的适配度等因素，做出合适的选择。

集成 AI API 可使用 nodejs 转发

• 在\entry\src\main\resources\base\profile\main_pages.json文件中配置页面：

{
   
  "src": ["pages/Index"]
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 在\entry\src\main\ets\pages目录中添加Index.ets

import {
    router } from '@kit.ArkUI';
import {
    sendChat } from '../apis/chat';

const enterKeyCode = 2054;
const primaryColor = '#0ea5e9';

enum AiModel {
   
  // 文生图
  Text2Img = "ti",
  // 文字对话
  Text2Text = "tt",
}

interface IListItem<T> {
   
  id: T;
  name: string;
}


interface IMessage {
   
  itemAlign: ItemAlign;
  charts: string;
}

interface RoomParams {
   
  model: AiModel;
}

interface IAiModelItem extends IListItem<AiModel> {
   
  hello: string;
}

const aiModels: IAiModelItem[] = [
  {
   
    id: AiModel.Text2Text,
    name: "聊天",
    hello: '你好,我是文本生成图片的AI工具',
  },
  {
   
    id: AiModel.Text2Img,
    name: "文生图",
    hello: '请输入绘画的内容',
  }
];

@Entry
@Component
struct Room {
   
  @State buttonScale: number = 1;
  @State avatarUrl: string = '';
  @State model: IAiModelItem | undefined = undefined;
  @State title: string = '';
  @State bone: number = 0;
  @State messages: IMessage[] = [];
  @State charts: string = '';
  @State loading: boolean = false;
  handleMessage: () => void = () => {
   
    if (!this.charts) {
   
      return;
    }
    this.messages.unshift({
   
      itemAlign: ItemAlign.End,
      charts: this.charts,
    })
    this.loading = true;

    if (!this.model) {
   
      return;
    }
    const chat = this.charts;
    if (!chat) {
   
      AlertDialog.show({
    message: '内容输入异常,请联系管理员' });
      return;
    }
    sendChat({
   
      model: this.model.id,
      chat: chat
    }).then((res) => {
   
      this.charts = '';
      this.loading = false
      this.messages.unshift({
    itemAlign: ItemAlign.Start, charts: res })
    }).catch((e: string) => {
   
      console.log('发送失败' + e);
    })
  }

  onPageShow(): void {
   
    this.avatarUrl = '/images/logo.png';
    const params = router.getParams() as RoomParams;
    this.model = aiModels.find(item => item.id === params.model);
    const storage = preferences.getPreferencesSync(getContext(), {
    name: 'storage' });
    const user = storage.getSync('user', null) as IUser;
    if (user) {
   
      this.bone = user.bone;
    }
  }

  @Builder
  renderTextChat(text: string) {
   
    Text(text)
      .alignSelf(ItemAlign.Start)
      .backgroundColor('white')
      .padding(8)
      .borderRadius(8)
      .fontColor('black')
  }

  scroller: Scroller = new Scroller();

  build() {
   
    Column() {
   
      Row({
    space: 12 }) {
   
        Image('images/back.png').onClick(() => {
   
          router.back()
        }).width(24).height(24)
        if (this.avatarUrl) {
   
          Image(this.avatarUrl).width(32).height(32).borderRadius(50)
        }
        if (this.model) {
   
          Column({
    space: 4 }) {
   
            Text(this.model.name).fontWeight(FontWeight.Medium).fontSize(16);
          }.alignItems(HorizontalAlign.Start).flexGrow(1)
        }
        Text('举报').onClick(() => {
   
          router.replaceUrl({
   
            url: 'pages/Report'
          })
        })
      }
      .width('100%')
      .backgroundColor('#ffffff')
      .padding(8)
      .alignItems(VerticalAlign.Center)
      .position({
    left: 0, top: 0 })
      .zIndex(1)

      Scroll() {
   
        Column({
    space: 12 }) {
   
          if (this.loading) {
   
            this.renderTextChat('...')
          }
          ForEach(this.messages, (item: IMessage) => {
   
            if (item.itemAlign === ItemAlign.End) {
   
              Text(item.charts)
                .alignSelf(item.itemAlign)
                .backgroundColor(primaryColor)
                .padding(8)
                .borderRadius(8)
                .fontColor('white')
            }
            if (item.itemAlign === ItemAlign.Start) {
   
              if (this.model?.id === AiModel.Text2Text) {
   
                this.renderTextChat(item.charts);
              }
              if (this.model?.id === AiModel.Text2Img) {
   
                Column() {
   
                  Image(item.charts).width(200).height(200).borderRadius(4)
                }.alignSelf(ItemAlign.Start).borderRadius(8).backgroundColor('white').padding(8)
              }
            }
          })
          if (this.model) {
   
            this.renderTextChat(this.model.hello)
          }
        }.width('100%')
      }
      .width('100%')
      .padding({
   
        top: 128,
        bottom: 0,
        left: 12,
        right: 12
      })

      Column() {
   
        Row() {
   
          TextInput({
    text: this.charts, placeholder: this.bone + ' (签到领取)' })
            .onChange(v => {
   
              this.charts = v;
            })
            .backgroundColor('transparent')
            .defaultFocus(true)
            .onKeyEvent(e => {
   
              if (e.keyCode === enterKeyCode) {
   
                this.handleMessage();
              }
            })
            .flexGrow(1)
            .height(60)
          Image('/images/bone.svg')
            .onClick(this.handleMessage)
            .width(36)
            .animation({
    duration: 200, curve: Curve.Ease })
            .clickEffect({
    level: ClickEffectLevel.LIGHT, scale: 0.5 })
            .position({
    right: 0, top: 12 })
        }
        .width('100%')
        .borderRadius(20)
        .padding({
    right: 20 })
        .alignItems(VerticalAlign.Center)
        .backgroundColor('#ffffff')
        .justifyContent(FlexAlign.SpaceBetween)
        .shadow(ShadowStyle.OUTER_DEFAULT_XS)
      }
      .padding({
   
        left: 12,
        right: 12,
        top: 12,
        bottom: 12
      })
      .position({
    top: 48, left: 0 })
    }.width('100%').height('100%')
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 在\entry\src\main\ets\apis\chat目录下添加如下代码

// 引入包名
import {
    http } from "@kit.NetworkKit";
import {
    BusinessError } from "@kit.BasicServicesKit";
import {
    router } from "@kit.ArkUI";

const URL_BASE = "https://******/api";

// const URL_BASE = 'http://localhost:8081/api';

function sendHttp<R, T>(path: string, method: http.RequestMethod, data?: T): Promise<R> {
   
  // 每一个httpRequest对应一个HTTP请求任务，不可复用
  const httpRequest = http.createHttp();

  return new Promise((res, rej) => {
   
    httpRequest.request(
      // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
      URL_BASE + path,
      {
   
        method: method, // 可选，默认为http.RequestMethod.GET
        // 当使用POST请求时此字段用于传递请求体内容，具体格式与服务端协商确定
        extraData: data || null,
        expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
        usingCache: true, // 可选，默认为true
        priority: 1, // 可选，默认为1
        // 开发者根据自身业务需要添加header字段
        header: {
    "content-type": "application/json", auth: "huawei" },
        readTimeout: 60000, // 可选，默认为60000ms
        connectTimeout: 60000, // 可选，默认为60000ms
        usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
        usingProxy: false, //可选，默认不使用网络代理，自API 10开始支持该属性
      },
      (err: BusinessError, resp: http.HttpResponse) => {
   
        httpRequest.destroy();
        if (err) {
   
          console.log(err.message);
          rej(500);
          return;
        }
        if (resp.responseCode === 401) {
   
          router.replaceUrl({
    url: "pages/Index" });
          rej(401);
          return;
        }
        if (resp.responseCode !== 200) {
   
          console.log(resp.result + "");
          rej(resp.responseCode);
          httpRequest.destroy();
          return;
        }
        try {
   
          res(JSON.parse(resp.result as string));
        } catch (e) {
   
          res(resp.result as R);
        }
      }
    );
  });
}

interface IChatOption {
   
  model: AiModel;
  chat: string;
}

export function sendChat(data: IChatOption) {
   
  return sendHttp<string, IChatOption>("/ai", http.RequestMethod.POST, data);
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

服务器代码 以 nextjs + api 为例

import {
    NextApiRequest, NextApiResponse } from "next";

// *********************************************鸿蒙next********************************************

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   
  if (req.method !== "POST") return res.status(405);

  const {
    chat = "" } = req.body;
  if (!chat.trim()) {
   
    return res.status(400).send("no chat");
  }

  const resp = await axios.post(
    "https://ai.gitee.com/api/serverless/Qwen2.5-72B-Instruct/chat/completions",
    {
   
      stream: false,
      max_tokens: 512,
      temperature: 0.7,
      frequency_penalty: 1,
      messages: [
        {
   
          role: "user",
          content: chat,
        },
      ],
    },
    {
   
      headers: {
   
        Authorization: `Bearer 【此处是密钥】`,
        "Content-Type": "application/json",
      },
    }
  );
  const content = resp.data.choices[0]?.message.content;
  res.status(200).send(content);

  res.status(405).send(405);
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

至此就从服务端、客户端实现了调用AI api的功能

功能测试与优化

完成功能开发后，要在不同设备与网络环境下对应用进行全面测试。检查用户输入的文字能否准确传递给 AI API，AI 回复是否符合预期，多轮对话时上下文信息的传递是否正确，以及应用在长时间对话中的性能表现等。针对测试中发现的问题，如响应延迟、回复不准确等，及时优化代码与调整配置，确保为用户提供流畅、高效的文字对话服务。

通过以上步骤，开发者能够在鸿蒙 Next 系统中成功对接 AI API，实现强大的文字对话功能，为用户带来智能化的交互体验。在开发过程中，需充分利用鸿蒙系统资源，严格遵循开发规范，持续打磨细节，才能打造出优质的应用。