HarmonyOS 鸿蒙Next [鸿蒙学习计划] 亲戚称谓计算器 + LLM

概述

本项目是是学习 华为开发者官网 后的一份练习 demo

实现了以下特性：

• 自定义组件：华为开发者官网
• 状态管理：华为开发者官网
• 应用架构设计基础——MVVM模式：华为开发者官网
• 应用架构设计基础——三层架构：华为开发者官网
• 网络请求：OpenHarmony包管理平台

接下来简要描述下开发流程，源码可以直接查看：Gitee

开发流程

参考三层架构准备项目目录

准备 UI

拆分 UI，实现计算显示部分组件 Display.ets 和 键盘部分 Ctrl.ets

Display.ets

@Component
export struct Display {
  @Prop result: string = '';
  @Prop calcString: string = '';

  build() {
    Column() {
      Column() {
        Text(this.result)
          .fontSize(25)
          .padding({ left: 16, right: 16 })
          .width('100%')
          .height('40%')
          .textAlign(TextAlign.End)
      }

      Column() {
        Text(this.calcString)
          .fontSize(35)
          .width('100%')
          .height('60%')
          .padding({ left: 16, right: 16 })
          .textAlign(TextAlign.End)
          .borderWidth({ bottom: 1 })
          .borderColor('#ccc')

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

Ctrl.ets

使用 Grid 组件布局：华为开发者官网

需要注意 = 按钮需要占用 2 行；

按钮点击的时候执行父组件传入的方法，用来接受用户点了什么按钮

@Component
export struct Ctrl {
  @Prop loading: boolean = false;
  btns: string[][] = [
    ['Item', '父', '父亲'],
    ['Item', '母', '母亲'],
    ['Function', '回退', 'back', 'gray'],
    ['Function', '清空', 'clear', 'black'],
    ['Item', '兄', '哥哥'],
    ['Item', '姐', '姐姐'],
    ['Item', '夫', '老公'],
    ['Item', '妻', '老婆'],
    ['Item', '弟', '弟弟'],
    ['Item', '妹', '妹妹'],
    ['Function', '互换', 'change', 'blue'],
    ['Function', '=', '=', 'red'],
    ['Item', '子', '儿子'],
    ['Item', '女', '女儿'],
    ['Function', '?', '?']
  ];
  onBtnClick?: (data: string[]) => void
  layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    onGetRectByIndex: (index: number) => {
      if (index === 11) {
        // 控制 = 按钮占有 2 行 
        return [2, 3, 2, 1]
      }

      return [index / 4 - 1, index / 4 - 1, 1, 1];
    }
  }

  build() {
    Grid(undefined, this.layoutOptions) {
      ForEach(this.btns, (data: string[]) => {
        GridItem() {

          if (data[1] === '=') {
            Button(data[1])
              .type(ButtonType.Normal)
              .onClick(() => {
                if (this.loading) return;
                this.onBtnClick?.(data)
              })
              .width('100%')
              .height('100%')
              .borderRadius(20)
              .opacity(this.loading ? 0.3 : 1)
              .backgroundColor(data[3])

          } else {
            Button(data[1])
              .type(ButtonType.Normal)
              .onClick(() => {
                if (this.loading) return;
                this.onBtnClick?.(data)
              })
              .width('100%')
              .height('100%')
              .borderRadius(20)
              .backgroundColor(data[3])
          }
        }
      }, (data: string) => data[2])
    }
    .columnsGap(10)
    .rowsGap(10)
    .rowsTemplate('1fr 1fr 1fr 1fr')
    .padding(10)
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .width('100%')
    .height('75%')
  }
}

组合他们

import { Display } from '../view/Display';
import { Ctrl } from '../view/Ctrl';
import { llm } from '[@ohos](/user/ohos)/commons';

@Preview
@Component
export struct Calculator {
  @State result: string = '';
  @State calc: string[] = [];
  @State loading: boolean = false;
  onBtnClick: (data: string[]) => string | void = (data: string[]) => {
    const type = data[0];
    const value = data[2];

    if (type === 'Function') {
      if (value === 'back') {
        this.calc.pop();
      }
      if (value === '=') {
        this.onCalc();
      }
      if (value === 'clear') {
        this.calc = [];
        this.result = '';
      }

    }

    if (type === 'Item') {
      this.calc.push(value);
    }
  }

  onCalc() {
    if (!this.calc.length) return;
    if (this.calc.length === 1) {
      this.result = this.calc[0]
    }

    this.askLLM();
  }

  askLLM() {
    this.loading = true;

    llm({
      system: '你是一个亲戚称谓计算器，请根据我的提问回复我 应该称呼对方为什么，比如爸爸的爸爸，请回复我 {"data":"爷爷"}',
      query: this.calc.join('的'),
      appKey: 'sk-xxx', // 请使用真实的大模型 appkey
    }).then((res) => {
      console.log('llm', res);

      this.calc = [JSON.parse(res as string).data]
      this.result = this.calc[0];
      this.loading = false;
    })

  }

  build() {
    Column() {
      Display({ result: this.result, calcString: this.calc.join('的') })
      Ctrl({ onBtnClick: this.onBtnClick, loading: this.loading })
    }.width('100%').height('100%')
  }
}

如何计算

我没有使用以下常见的本地称谓树的方式来表达称谓的数据结构

而是为了实践网络请求的场景，直接问大模型拿到结果

封装请求方法

import axios, { AxiosError, AxiosResponse } from '[@ohos](/user/ohos)/axios'

interface iParams {
  system: string,
  query: string,
  appKey: string,
}

interface iMsg {
  role: string,
  content: string
}

interface iInput {
  messages: iMsg[]
}

interface iData {
  model: string,
  input: iInput
}

interface iOutput {
  finish_reason: string,
  text: string
}

interface iRes {
  output: iOutput
}

export default (params: iParams) => {

  return axios.post<string, AxiosResponse<iRes>, iData>('https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation', {
    "model": "qwen-max",
    "input": {
      "messages": [
        {
          "role": "system",
          "content": params.system
        },
        {
          "role": "user",
          "content": params.query
        }
      ]
    },
  }, {
    headers: {
      'Authorization': `Bearer ${params.appKey}`,
      'Content-Type': 'application/json'
    }
  })
    .then((response: AxiosResponse<iRes>) => {
      console.info('axios success', JSON.stringify(response));
      return response.data.output.text;
    })
    .catch((error: AxiosError) => {
      console.info('axios error', JSON.stringify(error));
    });
}

请求大模型

llm({
  system: '你是一个亲戚称谓计算器，请根据我的提问回复我 应该称呼对方为什么，比如爸爸的爸爸，请回复我 {"data":"爷爷"}',
  query: this.calc.join('的'),
  appKey: 'sk-xxx'
})

构建运行