HarmonyOS开发：机器翻译与多语言处理

核心要点：本文系统讲解HarmonyOS平台上的机器翻译与多语言处理技术，涵盖端侧翻译引擎设计、翻译缓存与质量优化、多语言文本处理流水线、语言检测与切换机制，以及在ArkTS中的完整工程实践。

一、背景与动机

你有没有遇到过这样的场景——你的APP要出海，需要支持英语、日语、韩语、阿拉伯语……光是翻译UI文案就让你头大，更别提用户生成内容（UGC）的实时翻译了。

或者更日常的情况：你在看一篇日文技术博客，虽然能猜个大概，但关键术语翻译不准，理解就偏了。这时候如果APP内置了翻译功能，选中文字就能翻译，体验是不是好很多？

机器翻译（Machine Translation, MT）是NLP领域最成熟的应用之一。从最早的规则翻译，到统计机器翻译（SMT），再到如今的神经机器翻译（NMT），翻译质量已经从"能看懂"进化到了"基本流畅"。

但端侧翻译和云端翻译有一个本质区别——隐私与延迟。云端翻译需要把用户文本发送到服务器，这在处理敏感内容（如聊天消息、私人笔记）时会引发隐私顾虑。端侧翻译则完全在本地完成，零延迟、零隐私泄露。

HarmonyOS的NLP能力包提供了端侧翻译的基础框架，配合MindSpore Lite的模型推理，我们可以构建一套完整的端侧翻译系统。接下来，我们就从翻译引擎设计开始，一步步搭建。

二、核心原理

2.1 神经机器翻译的核心架构

现代机器翻译的主流架构是Transformer-based Seq2Seq模型，它由编码器和解码器两部分组成：

• 编码器（Encoder）：将源语言文本编码为语义向量
• 解码器（Decoder）：将语义向量解码为目标语言文本
• 注意力机制（Attention）：让解码器在生成每个词时"关注"源语言中最相关的部分

在端侧，我们通常使用轻量化的Transformer变体或蒸馏模型，参数量控制在30M-100M之间。

2.2 端侧翻译的架构设计

flowchart TD
    A["📝 源语言文本"] --> B["🔍 语言检测"]
    B --> C{"已知语言对?"}
    C -->|"是"| D["📦 翻译缓存查询"]
    C -->|"否"| E["🌐 云端翻译降级"]
    
    D --> F{"缓存命中?"}
    F -->|"是"| G["✅ 返回缓存结果"]
    F -->|"否"| H["⚙️ 文本预处理"]
    
    H --> I["🧠 端侧模型推理"]
    I --> J["📝 后处理与格式化"]
    J --> K["💾 写入翻译缓存"]
    K --> L["✅ 返回翻译结果"]
    
    I -->|"NPU不可用"| M["💻 CPU推理降级"]
    M --> J
    
    I -->|"模型加载失败"| E
    
    classDef primary fill:#4FC3F7,stroke:#0288D1,color:#000
    classDef warning fill:#FFB74D,stroke:#F57C00,color:#000
    classDef error fill:#EF5350,stroke:#C62828,color:#fff
    classDef success fill:#66BB6A,stroke:#2E7D32,color:#fff
    classDef info fill:#CE93D8,stroke:#7B1FA2,color:#fff
    
    class A primary
    class B primary
    class C warning
    class D info
    class E error
    class F warning
    class G success
    class H primary
    class I info
    class J primary
    class K info
    class L success
    class M warning

2.3 翻译质量优化策略

端侧翻译模型通常比云端模型小，翻译质量会有差距。我们可以通过以下策略弥补：

1. 翻译缓存：相同或相似的翻译请求直接返回缓存结果
2. 领域适配：针对特定领域（如技术文档）微调翻译模型
3. 后处理纠错：用规则引擎修正翻译中的常见错误
4. 人机协同：对低置信度翻译提供人工修正入口

2.4 多语言文本处理的挑战

多语言处理不只是翻译，还包括：

• 语言检测：自动识别文本使用的语言
• 文本方向：阿拉伯语从右到左（RTL），日语竖排
• 字符编码：不同语言的字符集差异很大
• 断词规则：中文没有空格分词，泰语没有词边界
• 排版差异：德语单词很长，日语有混排（汉字+假名+罗马字）

三、代码实战

3.1 语言检测引擎

/**
 * 语言检测引擎
 * 基于字符分布和N-gram特征的语言识别
 */

// 支持的语言枚举
enum Language {
  ZH = 'zh',     // 中文
  EN = 'en',     // 英语
  JA = 'ja',     // 日语
  KO = 'ko',     // 韩语
  FR = 'fr',     // 法语
  DE = 'de',     // 德语
  ES = 'es',     // 西班牙语
  RU = 'ru',     // 俄语
  AR = 'ar',     // 阿拉伯语
  PT = 'pt',     // 葡萄牙语
  UNKNOWN = 'unknown',
}

// 语言检测结果
interface LanguageDetectionResult {
  language: Language;
  confidence: number;    // 置信度 0-1
  alternatives: Array<{ language: Language; confidence: number }>;
  isRTL: boolean;        // 是否从右到左书写
}

export class LanguageDetector {
  // 语言特征模式
  private languagePatterns: Map<Language, {
    unicodeRanges: RegExp[];
    commonChars: string[];
    weight: number;
  }> = new Map();

  // RTL语言列表
  private rtlLanguages: Set<Language> = new Set([Language.AR]);

  constructor() {
    this.initPatterns();
  }

  // 初始化语言特征模式
  private initPatterns(): void {
    this.languagePatterns.set(Language.ZH, {
      unicodeRanges: [/[\u4e00-\u9fff]/g, /[\u3400-\u4dbf]/g],
      commonChars: ['的', '了', '是', '在', '我', '有', '和', '不', '人', '这'],
      weight: 1.0,
    });

    this.languagePatterns.set(Language.JA, {
      unicodeRanges: [/[\u3040-\u309f]/g, /[\u30a0-\u30ff]/g],  // 平假名+片假名
      commonChars: ['の', 'に', 'は', 'を', 'が', 'で', 'と', 'し', 'て', 'か'],
      weight: 1.0,
    });

    this.languagePatterns.set(Language.KO, {
      unicodeRanges: [/[\uac00-\ud7af]/g, /[\u1100-\u11ff]/g],  // 韩文音节+ Jamo
      commonChars: ['은', '는', '이', '가', '을', '를', '에', '의', '와', '과'],
      weight: 1.0,
    });

    this.languagePatterns.set(Language.AR, {
      unicodeRanges: [/[\u0600-\u06ff]/g, /[\u0750-\u077f]/g],
      commonChars: ['ا', 'ل', 'ي', 'م', 'و', 'ن', 'ر', 'ب', 'ت', 'ع'],
      weight: 1.0,
    });

    this.languagePatterns.set(Language.RU, {
      unicodeRanges: [/[\u0400-\u04ff]/g],
      commonChars: ['о', 'а', 'е', 'и', 'н', 'т', 'с', 'р', 'в', 'л'],
      weight: 1.0,
    });

    this.languagePatterns.set(Language.EN, {
      unicodeRanges: [/[a-zA-Z]/g],
      commonChars: ['the', 'is', 'at', 'of', 'on', 'and', 'a', 'to', 'in', 'it'],
      weight: 0.8,  // 英文字母在许多语言中都会出现，权重略低
    });

    this.languagePatterns.set(Language.FR, {
      unicodeRanges: [/[a-zA-ZàâéèêëïîôùûüçÀÂÉÈÊËÏÎÔÙÛÜÇ]/g],
      commonChars: ['le', 'de', 'un', 'être', 'et', 'à', 'en', 'les', 'des', 'la'],
      weight: 0.9,
    });

    this.languagePatterns.set(Language.DE, {
      unicodeRanges: [/[a-zA-ZäöüßÄÖÜ]/g],
      commonChars: ['der', 'die', 'und', 'in', 'den', 'von', 'zu', 'das', 'mit', 'ist'],
      weight: 0.9,
    });
  }

  // 检测文本语言
  detect(text: string): LanguageDetectionResult {
    if (!text || text.trim().length === 0) {
      return {
        language: Language.UNKNOWN,
        confidence: 0,
        alternatives: [],
        isRTL: false,
      };
    }

    const scores: Map<Language, number> = new Map();

    // 对每种语言计算匹配分数
    this.languagePatterns.forEach((pattern, lang) => {
      let score = 0;

      // Unicode范围匹配
      pattern.unicodeRanges.forEach(regex => {
        const matches = text.match(regex);
        if (matches) {
          score += (matches.length / text.length) * 50 * pattern.weight;
        }
      });

      // 常见字符匹配
      const lowerText = text.toLowerCase();
      pattern.commonChars.forEach(char => {
        if (lowerText.includes(char)) {
          score += 5 * pattern.weight;
        }
      });

      scores.set(lang, score);
    });

    // 排序获取最佳匹配
    const sorted = Array.from(scores.entries())
      .sort((a, b) => b[1] - a[1]);

    const bestLang = sorted[0]?.[0] || Language.UNKNOWN;
    const bestScore = sorted[0]?.[1] || 0;
    const totalScore = sorted.reduce((sum, [, s]) => sum + s, 0);

    // 计算置信度
    const confidence = totalScore > 0
      ? Math.min(1, bestScore / totalScore)
      : 0;

    // 备选语言
    const alternatives = sorted.slice(1, 4)
      .filter(([, s]) => s > 0)
      .map(([lang, s]) => ({
        language: lang,
        confidence: totalScore > 0 ? s / totalScore : 0,
      }));

    return {
      language: bestLang,
      confidence: Math.round(confidence * 100) / 100,
      alternatives,
      isRTL: this.rtlLanguages.has(bestLang),
    };
  }

  // 批量检测
  detectBatch(texts: string[]): LanguageDetectionResult[] {
    return texts.map(text => this.detect(text));
  }

  // 判断是否为CJK语言
  isCJKLanguage(lang: Language): boolean {
    return [Language.ZH, Language.JA, Language.KO].includes(lang);
  }

  // 获取语言显示名称
  getLanguageDisplayName(lang: Language): string {
    const names: Record<string, string> = {
      [Language.ZH]: '中文',
      [Language.EN]: 'English',
      [Language.JA]: '日本語',
      [Language.KO]: '한국어',
      [Language.FR]: 'Français',
      [Language.DE]: 'Deutsch',
      [Language.ES]: 'Español',
      [Language.RU]: 'Русский',
      [Language.AR]: 'العربية',
      [Language.PT]: 'Português',
      [Language.UNKNOWN]: '未知',
    };
    return names[lang] || lang;
  }
}

3.2 端侧翻译引擎

/**
 * 端侧翻译引擎
 * 支持缓存、降级、质量评估的翻译服务
 */

// 翻译请求
interface TranslateRequest {
  text: string;
  sourceLang: Language;
  targetLang: Language;
  domain?: string;        // 翻译领域（如'tech', 'medical'）
  priority?: 'low' | 'normal' | 'high';
}

// 翻译结果
interface TranslateResult {
  translatedText: string;
  sourceLang: Language;
  targetLang: Language;
  confidence: number;       // 翻译质量置信度
  fromCache: boolean;       // 是否来自缓存
  processingTime: number;   // 处理耗时(ms)
  engine: 'local' | 'cloud' | 'hybrid';
}

// 翻译缓存条目
interface CacheEntry {
  translatedText: string;
  confidence: number;
  timestamp: number;
  hitCount: number;
}

// 翻译引擎配置
interface TranslateEngineConfig {
  enableCache: boolean;
  cacheMaxSize: number;       // 缓存最大条目数
  cacheTTL: number;           // 缓存过期时间(ms)
  enableCloudFallback: boolean;
  maxTextLength: number;      // 单次翻译最大字符数
  preferredEngine: 'local' | 'cloud' | 'hybrid';
}

export class TranslateEngine {
  private config: TranslateEngineConfig;
  private cache: Map<string, CacheEntry> = new Map();
  private languageDetector: LanguageDetector;
  private modelLoaded: boolean = false;

  constructor(config?: Partial<TranslateEngineConfig>) {
    this.config = {
      enableCache: true,
      cacheMaxSize: 5000,
      cacheTTL: 86400000,  // 24小时
      enableCloudFallback: true,
      maxTextLength: 5000,
      preferredEngine: 'local',
      ...config,
    };
    this.languageDetector = new LanguageDetector();
  }

  // 初始化翻译模型
  async initialize(): Promise<boolean> {
    try {
      // 实际项目中应加载MindSpore Lite翻译模型
      // const model = await mindspore.loadModel('/data/models/translate_zh_en.ms');
      this.modelLoaded = true;
      console.info('翻译模型加载成功');
      return true;
    } catch (error) {
      console.error(`翻译模型加载失败: ${error}`);
      this.modelLoaded = false;
      return false;
    }
  }

  // 生成缓存键
  private getCacheKey(text: string, sourceLang: Language, targetLang: Language): string {
    return `${sourceLang}:${targetLang}:${text}`;
  }

  // 查询翻译缓存
  private queryCache(key: string): CacheEntry | null {
    if (!this.config.enableCache) return null;

    const entry = this.cache.get(key);
    if (!entry) return null;

    // 检查过期
    if (Date.now() - entry.timestamp > this.config.cacheTTL) {
      this.cache.delete(key);
      return null;
    }

    // 更新命中计数
    entry.hitCount++;
    return entry;
  }

  // 写入翻译缓存
  private writeCache(key: string, translatedText: string, confidence: number): void {
    if (!this.config.enableCache) return;

    // 缓存容量控制
    if (this.cache.size >= this.config.cacheMaxSize) {
      // 淘汰最久未使用的缓存
      const oldest = Array.from(this.cache.entries())
        .sort((a, b) => a[1].timestamp - b[1].timestamp)[0];
      if (oldest) {
        this.cache.delete(oldest[0]);
      }
    }

    this.cache.set(key, {
      translatedText,
      confidence,
      timestamp: Date.now(),
      hitCount: 0,
    });
  }

  // 执行翻译
  async translate(request: TranslateRequest): Promise<TranslateResult> {
    const startTime = Date.now();

    // 输入验证
    if (!request.text || request.text.trim().length === 0) {
      return {
        translatedText: '',
        sourceLang: request.sourceLang,
        targetLang: request.targetLang,
        confidence: 0,
        fromCache: false,
        processingTime: Date.now() - startTime,
        engine: 'local',
      };
    }

    if (request.text.length > this.config.maxTextLength) {
      throw new Error(`文本长度超过限制：${request.text.length} > ${this.config.maxTextLength}`);
    }

    // 自动检测源语言
    let sourceLang = request.sourceLang;
    if (sourceLang === Language.UNKNOWN) {
      const detection = this.languageDetector.detect(request.text);
      sourceLang = detection.language;
    }

    // 相同语言无需翻译
    if (sourceLang === request.targetLang) {
      return {
        translatedText: request.text,
        sourceLang,
        targetLang: request.targetLang,
        confidence: 1.0,
        fromCache: false,
        processingTime: Date.now() - startTime,
        engine: 'local',
      };
    }

    // 查询缓存
    const cacheKey = this.getCacheKey(request.text, sourceLang, request.targetLang);
    const cached = this.queryCache(cacheKey);
    if (cached) {
      return {
        translatedText: cached.translatedText,
        sourceLang,
        targetLang: request.targetLang,
        confidence: cached.confidence,
        fromCache: true,
        processingTime: Date.now() - startTime,
        engine: 'local',
      };
    }

    // 执行翻译
    let result: TranslateResult;

    if (this.modelLoaded && this.config.preferredEngine !== 'cloud') {
      // 端侧翻译
      result = await this.localTranslate(request.text, sourceLang, request.targetLang);
    } else if (this.config.enableCloudFallback) {
      // 云端翻译降级
      result = await this.cloudTranslate(request.text, sourceLang, request.targetLang);
    } else {
      // 无法翻译
      result = {
        translatedText: request.text,
        sourceLang,
        targetLang: request.targetLang,
        confidence: 0,
        fromCache: false,
        processingTime: Date.now() - startTime,
        engine: 'local',
      };
    }

    // 写入缓存
    if (!result.fromCache) {
      this.writeCache(cacheKey, result.translatedText, result.confidence);
    }

    return result;
  }

  // 端侧模型翻译
  private async localTranslate(
    text: string,
    sourceLang: Language,
    targetLang: Language
  ): Promise<TranslateResult> {
    const startTime = Date.now();

    // 实际项目中应调用MindSpore Lite推理
    // 这里用简化的翻译逻辑模拟
    const translatedText = await this.simulateTranslation(text, sourceLang, targetLang);

    // 翻译后处理
    const processedText = this.postProcess(translatedText, sourceLang, targetLang);

    return {
      translatedText: processedText,
      sourceLang,
      targetLang,
      confidence: 0.85,  // 端侧模型通常置信度略低
      fromCache: false,
      processingTime: Date.now() - startTime,
      engine: 'local',
    };
  }

  // 云端翻译
  private async cloudTranslate(
    text: string,
    sourceLang: Language,
    targetLang: Language
  ): Promise<TranslateResult> {
    const startTime = Date.now();

    // 实际项目中应调用华为翻译云服务API
    // const response = await fetch('https://translate-api.huawei.com/v2/translate', { ... });
    const translatedText = await this.simulateTranslation(text, sourceLang, targetLang);

    return {
      translatedText,
      sourceLang,
      targetLang,
      confidence: 0.95,  // 云端翻译通常置信度更高
      fromCache: false,
      processingTime: Date.now() - startTime,
      engine: 'cloud',
    };
  }

  // 模拟翻译（开发测试用）
  private async simulateTranslation(
    text: string,
    sourceLang: Language,
    targetLang: Language
  ): Promise<string> {
    // 简化的翻译映射表
    const translations: Record<string, Record<string, string>> = {
      'zh:en': {
        '你好': 'Hello',
        '谢谢': 'Thank you',
        '开发': 'Development',
        '框架': 'Framework',
        '组件': 'Component',
        '应用': 'Application',
        '系统': 'System',
        '数据': 'Data',
        '网络': 'Network',
        '安全': 'Security',
      },
      'en:zh': {
        'hello': '你好',
        'thank you': '谢谢',
        'development': '开发',
        'framework': '框架',
        'component': '组件',
        'application': '应用',
        'system': '系统',
        'data': '数据',
        'network': '网络',
        'security': '安全',
      },
    };

    const key = `${sourceLang}:${targetLang}`;
    const dict = translations[key] || {};

    // 逐词翻译
    const words = text.split('');
    const translated = words.map(word => dict[word.toLowerCase()] || word).join('');

    return new Promise(resolve => {
      setTimeout(() => resolve(translated), 50); // 模拟翻译延迟
    });
  }

  // 翻译后处理
  private postProcess(
    text: string,
    sourceLang: Language,
    targetLang: Language
  ): string {
    let result = text;

    // 修复标点符号（中文标点→英文标点）
    if (targetLang === Language.EN) {
      result = result
        .replace(/，/g, ', ')
        .replace(/。/g, '. ')
        .replace(/！/g, '! ')
        .replace(/？/g, '? ')
        .replace(/：/g, ': ')
        .replace(/；/g, '; ');
    }

    // 修复英文标点→中文标点
    if (targetLang === Language.ZH) {
      result = result
        .replace(/,\s*/g, '，')
        .replace(/\.\s*/g, '。')
        .replace(/!\s*/g, '！')
        .replace(/\?\s*/g, '？');
    }

    // 去除多余空格
    result = result.replace(/\s{2,}/g, ' ').trim();

    return result;
  }

  // 批量翻译
  async translateBatch(requests: TranslateRequest[]): Promise<TranslateResult[]> {
    return Promise.all(requests.map(req => this.translate(req)));
  }

  // 获取缓存统计
  getCacheStats(): { size: number; hitRate: number } {
    const totalHits = Array.from(this.cache.values())
      .reduce((sum, entry) => sum + entry.hitCount, 0);
    return {
      size: this.cache.size,
      hitRate: this.cache.size > 0 ? totalHits / (totalHits + this.cache.size) : 0,
    };
  }

  // 清除缓存
  clearCache(): void {
    this.cache.clear();
  }

  // 释放资源
  destroy(): void {
    this.clearCache();
    this.modelLoaded = false;
  }
}

3.3 多语言文本处理与翻译UI组件

/**
 * 多语言文本处理与翻译UI组件
 * 集成语言检测、翻译、多语言排版
 */
import { LanguageDetector, Language, LanguageDetectionResult } from './LanguageDetector';
import { TranslateEngine, TranslateRequest, TranslateResult } from './TranslateEngine';

@ObservedV2
class TranslationViewModel {
  @Trace inputText: string = '';
  @Trace translatedText: string = '';
  @Trace detectedLanguage: LanguageDetectionResult | null = null;
  @Trace sourceLang: Language = Language.AUTO as Language;
  @Trace targetLang: Language = Language.EN;
  @Trace isTranslating: boolean = false;
  @Trace translateResult: TranslateResult | null = null;
  @Trace translationHistory: Array<{ source: string; target: string; result: string }> = [];

  private languageDetector: LanguageDetector = new LanguageDetector();
  private translateEngine: TranslateEngine = new TranslateEngine();

  // 支持的语言列表
  readonly supportedLanguages: Array<{ code: Language; name: string; nativeName: string }> = [
    { code: Language.ZH, name: '中文', nativeName: '中文' },
    { code: Language.EN, name: '英语', nativeName: 'English' },
    { code: Language.JA, name: '日语', nativeName: '日本語' },
    { code: Language.KO, name: '韩语', nativeName: '한국어' },
    { code: Language.FR, name: '法语', nativeName: 'Français' },
    { code: Language.DE, name: '德语', nativeName: 'Deutsch' },
    { code: Language.ES, name: '西班牙语', nativeName: 'Español' },
    { code: Language.RU, name: '俄语', nativeName: 'Русский' },
    { code: Language.AR, name: '阿拉伯语', nativeName: 'العربية' },
  ];

  // 检测语言
  detectLanguage(): void {
    if (!this.inputText.trim()) {
      this.detectedLanguage = null;
      return;
    }
    this.detectedLanguage = this.languageDetector.detect(this.inputText);
  }

  // 执行翻译
  async translate(): Promise<void> {
    if (!this.inputText.trim()) return;

    this.isTranslating = true;

    try {
      const request: TranslateRequest = {
        text: this.inputText,
        sourceLang: this.sourceLang === Language.AUTO as Language
          ? (this.detectedLanguage?.language || Language.ZH)
          : this.sourceLang,
        targetLang: this.targetLang,
      };

      this.translateResult = await this.translateEngine.translate(request);
      this.translatedText = this.translateResult.translatedText;

      // 记录翻译历史
      this.translationHistory.unshift({
        source: this.inputText,
        target: this.translatedText,
        result: this.translateResult.fromCache ? '缓存' : '翻译',
      });

      if (this.translationHistory.length > 20) {
        this.translationHistory = this.translationHistory.slice(0, 20);
      }
    } finally {
      this.isTranslating = false;
    }
  }

  // 交换源语言和目标语言
  swapLanguages(): void {
    const temp = this.sourceLang;
    this.sourceLang = this.targetLang;
    this.targetLang = temp;

    // 同时交换文本
    const tempText = this.inputText;
    this.inputText = this.translatedText;
    this.translatedText = tempText;
  }
}

@Entry
@Component
struct MachineTranslationPage {
  private viewModel: TranslationViewModel = new TranslationViewModel();

  build() {
    Column() {
      // 标题栏
      this.TitleBar()

      // 语言选择栏
      this.LanguageSelector()

      // 输入区域
      this.InputArea()

      // 翻译结果
      this.OutputArea()

      // 翻译信息
      this.TranslationInfo()

      // 翻译历史
      this.HistoryArea()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#1A1A2E')
  }

  @Builder
  TitleBar() {
    Row() {
      Column() {
        Text('机器翻译与多语言处理')
          .fontSize(22)
          .fontWeight(FontWeight.Bold)
          .fontColor('#E0E0E0')
        Text('端侧翻译 · 隐私安全 · 零延迟')
          .fontSize(13)
          .fontColor('#9E9E9E')
          .margin({ top: 4 })
      }
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .padding({ left: 20, right: 20, top: 16, bottom: 8 })
  }

  // 语言选择
  @Builder
  LanguageSelector() {
    Row() {
      // 源语言
      Column() {
        Text('源语言')
          .fontSize(12)
          .fontColor('#9E9E9E')
        Text(this.getLanguageName(this.viewModel.sourceLang))
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#4FC3F7')
      }
      .alignItems(HorizontalAlign.Center)
      .layoutWeight(1)

      // 交换按钮
      Button() {
        Text('⇄')
          .fontSize(24)
          .fontColor('#E0E0E0')
      }
      .width(48)
      .height(48)
      .backgroundColor('#16213E')
      .borderRadius(24)
      .onClick(() => {
        this.viewModel.swapLanguages();
      })

      // 目标语言
      Column() {
        Text('目标语言')
          .fontSize(12)
          .fontColor('#9E9E9E')
        Text(this.getLanguageName(this.viewModel.targetLang))
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#CE93D8')
      }
      .alignItems(HorizontalAlign.Center)
      .layoutWeight(1)
    }
    .width('100%')
    .padding({ left: 20, right: 20, top: 8, bottom: 8 })
    .alignItems(VerticalAlign.Center)
  }

  // 输入区域
  @Builder
  InputArea() {
    Column() {
      // 语言检测指示
      if (this.viewModel.detectedLanguage !== null) {
        Row() {
          Circle().width(8).height(8)
            .fill(this.viewModel.detectedLanguage!.confidence > 0.7 ? '#66BB6A' : '#FFB74D')
          Text(`检测到: ${this.viewModel.detectedLanguage!.language} ` +
            `(置信度: ${(this.viewModel.detectedLanguage!.confidence * 100).toFixed(0)}%)`)
            .fontSize(12)
            .fontColor('#9E9E9E')
            .margin({ left: 6 })
        }
        .margin({ bottom: 8 })
      }

      TextArea({ placeholder: '输入要翻译的文本...' })
        .width('100%')
        .height(120)
        .fontSize(16)
        .fontColor('#E0E0E0')
        .backgroundColor('#16213E')
        .borderRadius(12)
        .padding(12)
        .onChange((value: string) => {
          this.viewModel.inputText = value;
          this.viewModel.detectLanguage();
        })

      // 翻译按钮
      Button('翻译')
        .width('100%')
        .height(48)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#4FC3F7')
        .fontColor('#1A1A2E')
        .borderRadius(12)
        .margin({ top: 12 })
        .enabled(!this.viewModel.isTranslating)
        .onClick(() => {
          this.viewModel.translate();
        })
    }
    .width('100%')
    .padding({ left: 20, right: 20, top: 8, bottom: 16 })
  }

  // 翻译结果
  @Builder
  OutputArea() {
    if (this.viewModel.translatedText) {
      Column() {
        Row() {
          Text('翻译结果')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor('#E0E0E0')

          Blank()

          // 复制按钮
          Button() {
            Text('复制')
              .fontSize(13)
              .fontColor('#4FC3F7')
          }
          .height(32)
          .backgroundColor('#16213E')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
        }
        .width('100%')

        Text(this.viewModel.translatedText)
          .fontSize(18)
          .fontColor('#E0E0E0')
          .lineHeight(28)
          .margin({ top: 12 })
          .width('100%')
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#0F3460')
      .borderRadius(16)
      .margin({ left: 20, right: 20, top: 8 })
    }
  }

  // 翻译信息
  @Builder
  TranslationInfo() {
    if (this.viewModel.translateResult !== null) {
      Row() {
        // 引擎类型
        Text(`引擎: ${this.viewModel.translateResult!.engine === 'local' ? '端侧' : '云端'}`)
          .fontSize(12)
          .fontColor('#9E9E9E')

        Text('|')
          .fontSize(12)
          .fontColor('#444')
          .margin({ left: 8, right: 8 })

        // 置信度
        Text(`置信度: ${(this.viewModel.translateResult!.confidence * 100).toFixed(0)}%`)
          .fontSize(12)
          .fontColor(this.viewModel.translateResult!.confidence > 0.8 ? '#66BB6A' : '#FFB74D')

        Text('|')
          .fontSize(12)
          .fontColor('#444')
          .margin({ left: 8, right: 8 })

        // 缓存标记
        if (this.viewModel.translateResult!.fromCache) {
          Text('📦 缓存命中')
            .fontSize(12)
            .fontColor('#66BB6A')
        }

        // 耗时
        Text(`耗时: ${this.viewModel.translateResult!.processingTime}ms`)
          .fontSize(12)
          .fontColor('#9E9E9E')
      }
      .width('100%')
      .padding({ left: 20, right: 20, top: 8 })
    }
  }

  // 翻译历史
  @Builder
  HistoryArea() {
    if (this.viewModel.translationHistory.length > 0) {
      Column() {
        Text('翻译历史')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#E0E0E0')
          .margin({ bottom: 12 })

        List() {
          ForEach(this.viewModel.translationHistory.slice(0, 10),
            (item: { source: string; target: string; result: string }) => {
            ListItem() {
              Column() {
                Text(item.source.length > 40 ? item.source.substring(0, 40) + '...' : item.source)
                  .fontSize(13)
                  .fontColor('#E0E0E0')
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })

                Text('→')
                  .fontSize(12)
                  .fontColor('#4FC3F7')
                  .margin({ top: 4 })

                Text(item.target.length > 40 ? item.target.substring(0, 40) + '...' : item.target)
                  .fontSize(13)
                  .fontColor('#CE93D8')
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .margin({ top: 4 })
              }
              .width('100%')
              .padding(12)
              .backgroundColor('#16213E')
              .borderRadius(10)
            }
            .margin({ bottom: 8 })
          })
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .padding({ left: 20, right: 20, top: 16, bottom: 20 })
      .layoutWeight(1)
    }
  }

  // 获取语言显示名称
  private getLanguageName(lang: Language): string {
    const langItem = this.viewModel.supportedLanguages.find(l => l.code === lang);
    return langItem ? `${langItem.name} (${langItem.nativeName})` : '自动检测';
  }
}

四、踩坑与注意事项

4.1 端侧翻译模型的尺寸与质量权衡

问题：端侧翻译模型通常只有30M-100M参数，翻译质量远不如云端大模型（如Google Translate的数十亿参数模型）。特别是对于低资源语言对（如中→阿拉伯语），端侧模型可能完全不可用。

解决方案：

• 优先支持高频语言对（中英、中日、英法等），低频语言对降级到云端
• 使用知识蒸馏技术，将大模型的知识压缩到小模型中
• 对特定领域（如技术文档）做领域微调，提升垂直场景的翻译质量
• 实现"端侧初译 + 云端精译"的混合模式

4.2 翻译缓存的一致性问题

问题：翻译模型更新后，缓存中的旧翻译可能不再准确。比如模型从v1升级到v2，但缓存中还是v1的翻译结果。

解决方案：

• 为缓存条目附加模型版本号，模型更新时清除旧缓存
• 设置合理的TTL（建议24小时），定期刷新缓存
• 对高优先级翻译请求跳过缓存，直接使用最新模型

4.3 长文本翻译的分句处理

问题：翻译模型通常对输入长度有限制（如512 token），长文本需要分句翻译后再拼接。但分句翻译会丢失上下文信息，导致翻译不连贯。

解决方案：

• 使用滑动窗口分句，保留前后句作为上下文
• 分句翻译后进行后处理，修复拼接处的不连贯
• 对关键文档（如合同、法律文件）建议使用云端整篇翻译

4.4 RTL语言的排版问题

问题：阿拉伯语、希伯来语等从右到左（RTL）书写的语言，在UI排版时需要特殊处理。如果直接用LTR布局显示RTL文本，文字顺序会错乱。

解决方案：

• 使用HarmonyOS的direction属性设置文本方向
• 检测到RTL语言时，自动翻转布局方向
• 注意双向文本（Bidirectional Text）的处理，如阿拉伯语中嵌入英文

// RTL文本处理示例
Text(translatedText)
  .direction(this.viewModel.detectedLanguage?.isRTL ? Direction.Rtl : Direction.Ltr)
  .textAlign(this.viewModel.detectedLanguage?.isRTL ? TextAlign.End : TextAlign.Start)

五、HarmonyOS 6适配

5.1 API变更

5.2 迁移指南

// HarmonyOS 5.0：仅云端翻译
import { translate } from '@kit.AiKit';

const result = await translate.cloud({
  text: inputText,
  source: 'zh',
  target: 'en',
});

// HarmonyOS 6.0：端云混合翻译
import { nlp } from '@kit.AiKit';

const translator = nlp.createTranslator({
  mode: 'hybrid',  // 'local' | 'cloud' | 'hybrid'
  languagePairs: ['zh-en', 'zh-ja', 'en-fr'],  // 需要的语言对
  offlineModels: true,  // 允许使用离线模型
});

// 下载离线翻译包
await translator.downloadModel('zh-en');

const result = await translator.translate(inputText, {
  source: 'zh',
  target: 'en',
  quality: 'high',  // 'fast' | 'balanced' | 'high'
});

translator.destroy();

5.3 新特性适配建议

• 离线翻译包：在WiFi环境下预下载常用语言对的离线模型，确保无网络时也能翻译
• 语音翻译：结合语音识别实现实时语音翻译，适合旅游、会议场景
• 翻译质量评估：对低质量翻译自动标记，提示用户可能需要人工校对

六、总结

核心思想：机器翻译不是"一个模型搞定一切"，而是"端云协同、缓存加速、质量兜底"的工程体系。端侧翻译保护隐私、降低延迟，云端翻译保证质量、覆盖更多语言对，两者结合才是最优解。

实践建议：

1. 先实现云端翻译验证业务逻辑，再逐步引入端侧翻译优化体验
2. 翻译缓存是性价比最高的优化，优先实现
3. 对翻译质量要求高的场景（如法律、医疗），始终使用云端翻译+人工校对
4. 离线翻译包是出海APP的刚需，务必在WiFi下预下载