【Pinyin OCR】画像や選択中の中国語のピンインと意味を表示するChrome拡張機能

Demo

www.youtube.com

Feature

• 画像から中国語を読み取る
• ブラウザで選択中の文字を読み取る
• 中国語の拼音を表示
• 中国語の翻訳を表示
• 他言語が検出された場合は、中国語に翻訳して表示
• 選択した中国語の読み上げ

TODO

• デザイン改善
• Chrome Extensionへの投稿
• 文字データの貼り付け
• 翻訳先の言語の選択
• 読み上げ音声の選択
• 読み上げの禁止

Setup (for Developer)

1. GCPの準備(Backend) 実行にはTranslate API, Vision AIが必要です。また、デプロイ先はCloud Runを推奨します。dev.envをboilerplateを参考に入力してください。
2. 拡張機能の登録(Frontend) Backendのデプロイ先URLをsrc/env.tsを作成して入力します。yarn watchでdistフォルダを更新します。ChromeでDeveloper modeを有効にしてから、そのdistフォルダをLoad unpackedからロードします。

Usage

STEP1 画像から中国語を読み取る

Screenshotを撮りコピーします。拡張機能をクリックしポップアップを開いたら、ctrl+v等でペーストするかUPLOADボタンを押して画像をアップロードします。成功すると数秒で中国語が表示されます。

STEP2 Webサイトの文字を読み取る

画面の文字を選択した状態でポップアップを開くと、選択中の文字が表示されます。

STEP3 中国語を英語に翻訳する

中国語を選択すると、選択した部分の翻訳が表示されます。

STEP4 他言語を中国語に翻訳する

同様の手順で他言語を選択した状態でポップアップを開くと、中国語に翻訳された状態で表示されます。

STEP5 中国語の読み上げ

ポップアップを開いたタイミング、ポップアップ内で中国語を選択したタイミングの両方で再生されます。

Install

Chrome Web Storeへの登録が完了しました！ 他の拡張機能と同様にワンクリックでインストールできます。

Pinyin OCR - Chrome Web Store

Developerモードを有効にしdistフォルダーをLoad unpackedから読み込んでください。

• 参考

PC向けのGoogle Chromeに拡張機能/プラグインをインストールする方法

• ダウンロード

Source Code

• Backend
• Frontend