图片文字识别 + 翻译器：构建图文翻译助手（OCR + 翻译 + TTS） HarmonyOS 5.0.0或以上

小白追梦

1365人浏览 · 2025-05-14 13:57:47

小白追梦 · 2025-05-14 13:57:47 发布

看到外文菜单、路牌、手册看不懂？
拍张照，自动识别文字、翻译、读出来——这才叫 AI！

本篇带你构建一个鸿蒙图文翻译助手，整合：

✅ OCR 提取图片中文字
✅ 文本翻译（本地或接口）
✅ 语音播报译文（多语种 TTS）
✅ 支持图片选择 + 结果展示 + 多语言切换

✅ 技术模块（HarmonyOS 5+）

功能	模块
图像 OCR	`@ohos.ai.cv.text`
翻译 API	自建翻译表 / 第三方接口（如百度翻译）
多语言 TTS 播报	`@ohos.ai.tts`
图像加载/选择	ArkTS 文件系统 + UI 控件

🎯 目标场景

拍下英文菜单 → 翻译成中文并语音播报
拍摄韩文/日文路标 → 识别 → 翻译 → 听译文
识别中文图文 → 翻成英文朗读给外国朋友听
学习辅助工具：拍书学习外文、跟读训练等

📦 Step1：OCR 识别图像中文字

import text from '@ohos.ai.cv.text'

let ocrClient: text.TextDetector

async function initOCR() {
  ocrClient = await text.createTextDetector()
}

async function extractTextFromImage(path: string): Promise<string> {
  const result = await ocrClient.detectText(path)
  return result.map(r => r.text).join('\n')
}

📦 Step2：翻译文本（简易词典 or API）

本地词典版示例：

function translateText(text: string, targetLang: string): string {
  const dict: Record<string, string> = {
    'Hello': '你好',
    'Coffee': '咖啡',
    'Open': '打开',
    'Close': '关闭'
  }

  return text
    .split(/\s+/)
    .map(word => dict[word] ?? word)
    .join(' ')
}

⚠️ 若接入在线翻译 API（如百度/腾讯翻译），需调用 HTTPS 接口并传入 appId、key。

📦 Step3：TTS 语音播报译文

import tts from '@ohos.ai.tts'
import media from '@ohos.multimedia.media'

async function speak(text: string, lang: string) {
  const client = await tts.createTTSClient()
  await client.setLanguage(lang) // 如 'en'、'zh'、'ja'

  const path = `/data/user/tts_${Date.now()}.wav`
  await client.synthesizeToFile(text, path)

  const player = await media.createAVPlayer()
  await player.setSource({ uri: path, mediaType: media.MediaType.AUDIO })
  await player.prepare()
  await player.play()
}

📦 Step4：UI 整合组件

@Entry
@Component
struct OCRTranslate {
  @State imgPath: string = '/data/media/sample_en.jpg'
  @State srcText: string = ''
  @State dstText: string = ''
  @State loading: boolean = false

  async process() {
    this.loading = true
    await initOCR()
    this.srcText = await extractTextFromImage(this.imgPath)
    this.dstText = translateText(this.srcText, 'zh')
    await speak(this.dstText, 'zh')
    this.loading = false
  }

  build() {
    Column({ space: 16 }) {
      Image(this.imgPath).width('100%').height(240)
      Button(this.loading ? '翻译中…' : '识图翻译并播报')
        .onClick(() => this.process())

      Text('原文：').fontSize(16)
      Text(this.srcText).fontSize(14).lineHeight(22)

      Text('译文：').fontSize(16).margin({ top: 10 })
      Text(this.dstText).fontSize(14).lineHeight(22)
    }
    .padding(20)
  }
}

✅ 拓展能力建议

功能方向	实现方式
多语言支持	`setLanguage('en') / 'ja' / 'ko'`
接入翻译接口	百度翻译 / 腾讯翻译 API
拍照识图	结合摄像头模块，实时拍照送入识别流程
翻译历史记录	保存每次识别结果 + 时间到 JSON 文件
教学/辅助训练	结合 TTS 输出与分词展示 → 实现背词训练工具