多样化输入与输出：AI大模型引领多语种翻译新篇章原创

SoraLuna

发布于 2024-9-7 00:24

浏览

0收藏

多样化输入与输出：AI大模型引领多语种翻译新篇章

在现代翻译工具中，灵活的输入与多语言的输出已经成为不可或缺的特性。通过AI大模型的支持，这款翻译工具不仅允许手动输入内容，还能生成句子或诗歌作为输入，系统会将这些内容翻译为多种目标语言，让用户体验到语言自由转换的强大功能。

界面设计预览

工具界面简洁直观，用户可以选择生成内容作为输入，或手动输入需要翻译的文本。翻译结果会显示在输出框中，支持多种语言切换。

效果预览：

输入框：允许用户手动输入内容，点击按钮后系统会进行翻译。

多样化输入与输出：AI大模型引领多语种翻译新篇章-鸿蒙开发者社区

按钮区域：提供多个随机颜色的按钮，点击按钮生成句子或诗歌作为输入，用户再选择目标语言进行翻译，如“英”、“日”、“韩”、“法”、“葡”。

多样化输入与输出：AI大模型引领多语种翻译新篇章-鸿蒙开发者社区

输出框：展示翻译后的文本结果。

多样化输入与输出：AI大模型引领多语种翻译新篇章-鸿蒙开发者社区

build() {
  Flex({
    direction: FlexDirection.Column,
    justifyContent: FlexAlign.SpaceBetween,
    alignItems: ItemAlign.Center
  }) {
    // 输出框
    Scroll() {
      Column() {
        Text(this.resultText)
          .fontColor(Color.White)
          .fontSize(16)
          .padding(15)
          .backgroundColor(SCROLL_COLOR)
          .borderRadius(15)
          .textAlign(TextAlign.Center)
          .width('80%')
          .height('60%');
      }
      .padding({ top: 10, bottom: 20 });
    }
    .scrollBarWidth(0)
    .scrollBarColor(Color.Transparent);

    // 按钮区域
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
      ForEach(this.buttonLabels, (label: string, index: number) => {
        CustomButton({
          buttonLabel: label,
          buttonColor: this.buttonColors[index]
        })
        .onClick(() => this.fetchChatResponse(this.buttonLabels[index]))
        .margin({ left: 10, right: 10, top: 5, bottom: 5 });
      });
    }
    .width('100%')
    .height('20%');

    // 输入框
    TextInput({ text: this.inputText, placeholder: '输入内容...' })
      .onChange((value) => this.inputText = value)
      .backgroundColor(TEXT_INPUT_COLOR)
      .fontColor(Color.White)
      .fontSize(16)
      .padding(15)
      .borderRadius(15)
      .width('80%')
      .height('10%')
      .margin({ top: 20 });
  }
  .padding(10);
}

多种输入方式：生成内容与手动输入结合

工具支持两种主要输入方式：

自动生成内容：点击按钮后，系统会生成与预设主题相关的句子或诗歌，这些内容将作为大模型的输入进行翻译。
手动输入：用户可以在输入框中输入自定义文本，点击翻译按钮后，将根据选择的目标语言进行翻译。

效果预览：

当用户点击“随机句子”或“随机诗歌”按钮时，系统生成的内容将作为输入，用户选择目标语言（如“英”、“日”、“韩”、“法”、“葡”），并点击翻译按钮，生成翻译结果。

多样化输入与输出：AI大模型引领多语种翻译新篇章-鸿蒙开发者社区

手动输入内容后，需点击相应的翻译按钮，系统会根据选择的语言进行翻译，并将结果显示在输出框中。

public async generateTextAndAccumulate(
  modelService: ModelIntegrationService,
  inputText: string,
  contentCategory: string
): Promise<string> {
  let accumulatedResult = '';
  this.resultText = ''; // 重置结果显示框

  await modelService.generateText(
    inputText,
    contentCategory,
    (partialResult: string) => {
      accumulatedResult += partialResult; // 累加每个分块的结果
      this.resultText += partialResult; // 实时更新结果显示框
    }
  );

  return accumulatedResult; // 返回累积的完整结果
}

多语种翻译输出：选择目标语言

工具支持多语种翻译，用户可以在“英”、“日”、“韩”、“法”、“葡”等目标语言之间自由切换。用户可以通过生成的句子或诗歌作为输入，选择任意目标语言进行翻译。

效果预览：

在输入内容或生成句子后，选择目标语言进行翻译。点击对应的语言按钮，翻译结果将显示在输出框中。
翻译过程中的结果会实时更新，用户可以逐步查看翻译进展。

多样化输入与输出：AI大模型引领多语种翻译新篇章-鸿蒙开发者社区

await modelService.generateText(
  inputText,
  contentCategory,
  (partialResult: string) => {
    accumulatedResult += partialResult;
    this.resultText += partialResult; // 实时更新显示框
  }
);

随机按钮与动态视觉效果

每次点击按钮时，系统会生成不同的内容。按钮的颜色和标签是随机生成的，为用户提供变化多样的视觉反馈，操作过程变得更加有趣和互动。

public getButtonColors(): string[] {
  const colors = [
    "#FEE2E2", "#C7D2FE", "#D1FAE5", "#FDE68A", "#BFDBFE",
    "#FBCFE8", "#A7F3D0", "#F9A8D4", "#FDE047", "#C084FC",
    "#F3B6F8", "#A0E4B0", "#FFE1A8", "#B5D3FC", "#E4C1F9"
  ];
  return this.shuffleArray(colors);
}