Amplify Predictions(Amazon Translate)でマルチ言語翻訳サイトを作る
こんにちわ。 ZUMA です。
Amplify Predictions カテゴリの Amazon Translate と Next.js を使ってマルチ言語翻訳サイトを作ってみます。
最終的な成果物はこのようになります。
Amazon Translate は 言語翻訳サービスで同様サービスとして DeepL API、Google Cloud Translation などがあります。
以下 Amplify Predictions の公式ドキュメントですが、そもそもの情報が少なかったり、日本語記事が少なかったので今回テーマとして取り上げてみました。
Amazon Translate では実に 75 言語が対応しています。
今回は全言語に対応したマルチ言語翻訳サイトを作ってみます。
実行環境
- Node
- 16.13.0
- npm
- 8.1.0
- Next.js
- 13.0.5
- Amplify CLI
- 10.5.1
Next.js プロジェクトを作成する
以下コマンドを実行して Next.js プロジェクトを作成します。
npx create-next-app@latest --ts --use-npm --eslint nextjs-amplify-text-to-translate
プロジェクトルートディレクトリへ移動します。
cd nextjs-amplify-text-to-translate
以下 Amplify 関連パッケージをインストールします。
npm install aws-amplify @aws-amplify/predictions
Amplify を設定する
Amplify Predictions カテゴリを使用する為には Amplify Auth カテゴリを追加する必要があります。
まずは Auth カテゴリを追加します。
Amplify Auth カテゴリを追加する
前提として amplify configure で Amplify で使用する AWS リソースにアクセス可能な IAM ユーザーは作成済みとします。
また、 amplify init で Amplify の初期化済みとします。
プロジェクトルートで以下のコマンドを実行して Amplify Auth カテゴリを追加します。
amplify add auth
Cognito の設定は最低限メールアドレスとパスワードのみの認証とします。
Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration?
❯ Default configuration
Default configuration with Social Provider (Federation)
Manual configuration
I want to learn more.
How do you want users to be able to sign in?
Username
❯ Email
Phone Number
Email or Phone Number
I want to learn more.
Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
Yes, I want to make some additional changes.
✅ Successfully added auth resource nextjscognitomiddlewe0c8d7ed locally
✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Amplify Predictions カテゴリを追加する
以下コマンドを追加して Amplify Predictions カテゴリを追加します。
amplify add predictions
以下設問は Convert を選択します。
? Please select from one of the categories below
Identify
❯ Convert
Interpret
Infer
Learn More
以下設問は Translate text into a different language を選択します。
? What would you like to convert? (Use arrow keys)
❯ Translate text into a different language
Generate speech audio from text
Transcribe text from audio
翻訳元/翻訳先の言語は後で動的に変更出来るように実装します。
翻訳元の言語はとりあえず日本語に設定します。
? What is the source language?
Hungarian
Indonesian
Italian
❯ Japanese
Korean
Malay
Norwegian
翻訳先はとりあえず英語に設定します。
? What is the target language?
Czech
Danish
Dutch
❯ English
Finnish
French
German
今回未認証のゲストユーザーもアクセス出来るようにします。
? Who should have access?
Auth users only
❯ Auth and Guest users
回答が完了すると aws-exports.js に以下項目が追加されます。
"predictions": {
"convert": {
"translateText": {
"region": "ap-northeast-1",
"proxy": false,
"defaults": {
"sourceLanguage": "ja",
"targetLanguage": "en"
}
}
}
}
以下のコマンドで作成した Amplify Auth と Predications カテゴリをクラウドにプロビジョニングします。
amplify push -y
フロントエンドで Amplify Configure を設定する
以下公式ドキュメントを参考に Amplify Configure 設定をします。
import { Amplify } from 'aws-amplify';
import {
Predictions,
AmazonAIPredictionsProvider
} from '@aws-amplify/predictions';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Amplify.addPluggable(new AmazonAIPredictionsProvider());
Amplify.addPluggable でエラーが発生した場合
Next.js の __app.tsx で Amplify.addPluggable を呼び出した所、以下のエラーが発生しました。
Error: Pluggable with name AmazonAIPredictionsProvider has already been added.
エラーについてはこちらの issues で議論されていますが、まだ対応されていないようです。
現状 work around として Amplify.addPluggable で発生するエラー を try - catch で握りつぶすと動作します。
Amplify.configure(awsconfig);
try {
Amplify.addPluggable(new AmazonAIPredictionsProvider());
} catch (error) {}
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
翻訳カスタムフックを実装する
以下 が今回の肝である Amplify Predictions を使用した翻訳カスタムフックの実装となります。
翻訳を実行する translateLanguage 関数と翻訳結果の値 translatedText を返却します。
Predictions.convert を呼び出すだけで Amazon Translate を使用した翻訳が実行できます。
後述する翻訳言語選択プルダウンで選択した翻訳元、翻訳先の Language code をそれぞれ sourceLanguage、targetLanguage に設定しています。
翻訳画面を実装する
デザインは create-next-app で出力される CSS を利用します。
以下翻訳言語選択プルダウンの実装となります。
Select タグの options に Amplify Translate に対応する全言語の言語ラベルと Language code を設定します。
以下翻訳元入力テキストエリアの実装です。
useTranslateLanguage hook を呼び出して入力値をリアルタイムに翻訳に掛けます。
以下プルダウンとテキストエリアの親コンポーネントです。
言語選択プルダウンのデフォルト値は翻訳元を日本語、翻訳先を英語の Language code に設定します。
最後に index.tsx をから入力フォームを呼び出して実装完了です。
Amazon Translate の利用料金
Amazon Translate の利用料金 は 無料枠を利用する場合、1 か月 200 万文字が 12 か月間無料です。
以降は 100 万文字あたり 15USD で 1 文字あたり 0.000015USD でした。
たとえば、1 か月に 70 万文字を処理するように送信した場合、10.5USD が請求されます。
75 言語が対応しています。
他の翻訳サービスの利用料金も調べてみました。
DeepL API は Free プランで 1 か月 50 万文字まで無料、Pro プランで基本料金 630 円/月に加え、重量課金で 1 文字あたり 0.0025 円でした。
対応言語は 27 言語でした。
Google Cloud Translation は 1 か月 50 万文字まで無料、50 万文字以降は、100 万文字あたり 20 USD でした。
たとえば、1 か月に 70 万文字を処理するように送信した場合、4USD が請求されます。
対応言語は 134 言語でした。
まとめ
Amplify Predictions カテゴリの Amazon Translate と Next.js を使ってマルチ言語翻訳サイトを作ってみました。
翻訳ロジックの実装は Amplify Predictions カテゴリを追加して、Predictions.convert を呼び出すだけで実装できます。
Next.js で Amplify.addPluggable の呼び出しでエラーが発生した場合は、現状取り急ぎ work around として Amplify.addPluggable で発生するエラー を try - catch で握りつぶすと動作します。
お手軽に Amplify の AI カテゴリを試すことが出来るので、他の AI サービスもブンブン素振りしていきたいと思います。
Discussion