#HarmonyOS NEXT体验官# 打造飞速智能体验：鸿蒙系统上的大模型交互新境界 原创

打造飞速智能体验：鸿蒙系统上的大模型交互新境界

在人工智能的世界里，很多开发者可能会认为只有借助昂贵的硬件设备才能实现大模型的高速响应。然而，今天我要带你探索一种完全不同的思路——如何在鸿蒙系统上，通过巧妙的设计与优化策略，实现大模型的极速交互体验。让你见识即便在资源有限的情况下，也能打造出快如闪电的智能应用。

智能按钮：让交互更加灵动

在用户体验设计中，按钮的响应速度和视觉效果至关重要。我们通过以下代码，实现了动态生成和展示按钮的功能，并通过随机化颜色和精美的阴影效果，赋予每个按钮独特的个性，使得界面交互更加灵动。

@Component
struct CustomButton {
  @Prop buttonTexts: string[];
  @Prop index: number;
  @Prop buttonColor: string;

  build() {
    Button(this.buttonTexts[this.index])
      .width('match_content')
      .height('match_content')
      .backgroundColor(this.buttonColor)
      .fontColor("#1E293B")
      .fontSize(18)
      .borderRadius(25) // 调整圆角半径，使按钮更圆润
      .shadow({ color: 'rgba(0, 0, 0, 0.2)', offsetX: 0, offsetY: 5, radius: 10 }) // 使用正确的shadow参数
      .padding({
        top: 12,
        bottom: 12,
        left: 20,
        right: 20
      })
      .margin({ bottom: 10 }); // 增加按钮之间的间隔
  }
}

通过这一段代码，按钮不仅响应迅速，还带来了视觉上的享受。无论是光滑的圆角还是柔和的阴影，这些细节都使得用户每次点击都充满了期待和惊喜。

实时流式交互：打造诗意的用户体验

为了让用户获得更为沉浸的体验，我们设计了一种流式输出的方式，让大模型生成的内容如诗句般逐字呈现在屏幕上。以下是实现这一效果的核心代码：

private interactWithModelAndStream(instruction: string, buttonCount: number): Promise<string> {
    return new Promise((resolve, reject) => {
      let fullResult = '';

      this.resultText = '';
      this.modelService.interactWithModel(
        instruction,
        http.RequestMethod.POST,
        60000,
        {},
        (chunk: string) => {
          this.resultText += chunk;
          fullResult += chunk;
        }
      );

      setTimeout(() => {
        resolve(fullResult);
      }, 10000);
    });
}

这种流式输出的方式，确保了每一个字符的出现都充满了节奏感与美感，让用户仿佛在欣赏一首由代码演绎的诗歌。每当新的内容生成时，用户既能感受到技术带来的速度，又能体会到艺术般的表现力。

高效数据交互：让速度飞起来

在与大模型的交互过程中，速度至关重要。为了确保数据能够快速且准确地传递，我们对数据请求和处理流程进行了精细化的优化。

export function makeHttpRequest(
  url: string,
  method: http.RequestMethod,
  body: RequestBody,
  timeout: number = 60000,
  customHeaders: HttpHeaders = {},
  onDataReceive: (chunk: string) => void
): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    let httpRequest = http.createHttp();

    // 手动合并 header 对象
    let headers: HttpHeaders = {
      'Content-Type': 'application/json; charset=utf-8'
    };

    // 使用 Object.keys 遍历并合并 customHeaders
    Object.keys(customHeaders).forEach(key => {
      headers[key] = customHeaders[key];
    });

    let options: http.HttpRequestOptions = {
      method: method,
      extraData: body,
      connectTimeout: timeout,
      readTimeout: timeout,
      expectDataType: http.HttpDataType.STRING,
      usingCache: true,
      priority: 1,
      usingProtocol: http.HttpProtocol.HTTP1_1,
      usingProxy: false,
      header: headers // 使用合并后的 header
    };

    httpRequest.on('dataReceive', (data: ArrayBuffer) => {
      const chunk = utf8ArrayToStr(new Uint8Array(data));

      try {
        const jsonResponse: ChatResponse = JSON.parse(chunk);
        if (jsonResponse.message && jsonResponse.message.content) {
          onDataReceive(jsonResponse.message.content);
        }
      } catch (error) {
        console.error('Failed to parse JSON:', error);
        onDataReceive(chunk); // 如果解析 JSON 失败，仍然将原始数据传递出去
      }
    });

    httpRequest.on('dataEnd', () => {
      resolve();
    });

    httpRequest.requestInStream(url, options).catch((err: BusinessError) => {
      reject(err);
    });
  });
}

通过这一优化，数据请求在最短的时间内被处理并传输，使得大模型的响应几乎是瞬时的。这种速度提升让我们在不依赖高端硬件的情况下，实现了超乎寻常的性能表现。

构建完美闭环：从问题生成到结果展示

在应用中，我们设计了一个完整的闭环，从生成问题、用户选择到最终展示结果，每一个环节都紧密相连，确保了用户体验的连贯性和流畅度。

private generateQuestionsPrompt(selectedTopic1: string): string {
    const selectedTopic =
      selectedTopic1 ? selectedTopic1 : this.predefinedTopics[Math.floor(Math.random() * this.predefinedTopics.length)];

    return `
        请根据以下主题生成${this.buttonCount}个相关的问题：
        每个问题不超过15字，以换行符分隔。
        只用中文，不得含有数字、序号或特殊字符：

        主题：
        ${selectedTopic}

        注意：问题必须与主题相关，简洁明了。
    `;
}

这一代码段展示了如何智能生成与主题相关的问题，并以用户友好的方式进行展示。配合流式输出和高效数据交互，整个流程如行云流水般自然顺畅。

最后的点睛之笔：个性化的视觉效果

为了增强用户体验，我们还对界面进行了精心的设计，包括按钮颜色的随机化处理，让每次交互都能带来新鲜感。

private getButtonColors(): string[] {
    const colors = [
      "#FEE2E2", "#C7D2FE", "#D1FAE5", "#FDE68A", "#BFDBFE",
      "#FBCFE8", "#A7F3D0", "#F9A8D4", "#FDE047", "#C084FC"
    ];

    const shuffledColors = colors.sort(() => Math.random() - 0.5);
    return shuffledColors;
}

通过这种随机化策略，用户每次进入应用时，都能享受到不同的视觉效果，使得体验更加多样化和个性化。

总结：

通过这一系列的代码和设计，我们在鸿蒙系统上实现了一个飞速、智能且富有诗意的用户体验。关键在于，我们并没有依赖强大的硬件，而是通过精细的代码优化和创新的交互设计，让大模型的表现达到了一个新的高度。这不仅打破了传统的认知，更为未来的智能应用开发提供了无限的可能。

无论你是开发者还是技术爱好者，相信这些技术亮点都会给你带来启发和思考。让我们一起期待更多更酷炫的智能应用登场吧！