Demo
Feature
- 画像から中国語を読み取る
- ブラウザで選択中の文字を読み取る
- 中国語の拼音を表示
- 中国語の翻訳を表示
- 他言語が検出された場合は、中国語に翻訳して表示
- 選択した中国語の読み上げ
TODO
- デザイン改善
- Chrome Extensionへの投稿
- 文字データの貼り付け
- 翻訳先の言語の選択
- 読み上げ音声の選択
- 読み上げの禁止
Setup (for Developer)
- GCPの準備(Backend) 実行にはTranslate API, Vision AIが必要です。また、デプロイ先はCloud Runを推奨します。dev.envをboilerplateを参考に入力してください。
- 拡張機能の登録(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への登録が完了しました！ 他の拡張機能と同様にワンクリックでインストールできます。
Developerモードを有効にしdistフォルダーをLoad unpackedから読み込んでください。
- 参考
PC向けのGoogle Chromeに拡張機能/プラグインをインストールする方法
- ダウンロード
Source Code
- Backend
- Frontend
