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

SoraLuna
发布于 2024-9-7 00:24
浏览
1收藏

多样化输入与输出: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);
}

总结

这款翻译工具通过生成内容作为输入并结合多语种翻译输出,为用户提供了灵活且个性化的翻译体验。用户可以自由选择自动生成的句子或诗歌,或通过手动输入文本进行翻译,并在多种语言之间自由切换。无论是生成内容还是手动输入,翻译结果都将在输出框中实时显示,每次操作都充满了语言的创造与互动。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-9-7 00:29:04修改
1
收藏 1
回复
举报
回复
    相关推荐