AWS Amplify Gen2とAmazon Translateを使ってリアルタイム翻訳機能を作ってみた

connpassで主催されていた秋にチャレンジにしたことLT会の登壇資料です。

Transcript

2. この秋に挑戦したことは・・・
4. 【 デ モ 】 AWS Amplify Gen2 と Amazon Translate を 使 っ て リ ア ル タ イ ム 翻 訳 機 能 を 作 っ て み た
5. 技術スタック Node.js React AWS Amplify Amazon Translate 実際に さわってみたい！！
6. AWS Amplify gen2の特徴 1. Webアプリケーションをホスティング a. 静的フロントエンドアプリケーションを簡単にでデプロイできる 2. TypeScriptによるフルスタック開発 a. BackendリソースをTypeScriptで定義する b. 多様なAWSサービスと連携できる 3. サンドボックス環境 a. ローカルから自分専用のAWSリソースを一時的に構築できる b. 変更を自動検知して反映される仕組み
7. どんなAWSサービスと連携できるの？ Amazon Cognito AWS AppSync AWS Lambda Amazon S3
8. どんなAWSサービスと連携できるの？
9. AI/MLサービスの連携でできること 1. テキストを音声に変換する 2. 音声をテキストに書き起こす 3. 言語を翻訳する 4. テキストを識別する 5. 画像からエンティティを識別する 6. 画像内のオブジェクトにラベルをつける 7. テキストを解釈する 挑戦してみる！
10. 実装手順 1. Reactプロジェクトを作成する・サンドボックス機能を起動する 2. Backendを実装する 1. Predictionsを設定して翻訳機能(Amazon Translate)を追加する 3. Frontendを実装する 1. Backendで定義したPredictionsを読み込む 2. 翻訳機能を呼び出すカスタムフックを実装する 3. 翻訳画面を実装する 4. サンドボックス機能で動作確認する
11. Reactプロジェクトを作成する/ サンドボックス機能を起動する とにかく、QuickStart を参考に、手順通り、 進めれば大丈夫！！
12. Backendを実装する backend.addOutput({ custom: { Predictions: { convert: { translateText: { defaults: { sourceLanguage: "ja", targetLanguage: "en", }, proxy: false, region: Stack.of(backend.auth.resources.authenticatedUserIamRole) .region, }, }, }, }, }); amplify/backend.ts フロントエンドへの連携として カスタムリソースを定義する!!!
13. Frontendを実装する（Backendリソース読み込み） Amplify.configure(outputs); // ---------- 下記を追加する ---------- Amplify.configure({ ...Amplify.getConfig(), Predictions: outputs.custom.Predictions, }); // ---------- ここまで ---------- ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <App /> </React.StrictMode> ); Backendで定義した Predictionsを読み込む!!! src/main.ts(抜粋)
14. Frontendを実装する（翻訳機能のカスタムフック) import { Predictions } from '@aws-amplify/predictions'; —------------------------省略---------------------------------- const result = await Predictions.convert({ translateText: { source: { text: sourceText, language: sourceLanguage, }, targetLanguage: targetLanguage, }, }); —------------------------省略---------------------------------- Predictions.convertメソッドを 使用してテキストを翻訳する!!! src/hooks/translate.tsx(抜粋) // Amplify提供のPredictions用のライブラリを追加する npm add --save-dev @aws-amplify/predictions
15. Frontendを実装する(翻訳画面) • UIコンポーネントを作成する ◦ ソース言語・ターゲット言語の選択コンポーネントを表示する ◦ テキスト入力フィールドを表示する(AmplifyのUIライブラリを活用する) • ステートを管理する ◦ コンポーネント表示に必要な値の状態を管理する • ハンドラーを実装する ◦ 入力テキストやターゲット言語の変更を検知し、翻訳機能のカスタムフックを実行 する • 翻訳結果を表示 ◦ 翻訳機能によって返されたテキスト結果を表示する 実装したいことを 言語化して、 コードに落とし込む
16. サンドボックス機能で動作確認する リアルタイムに 翻訳されてる！！ 言語選択でき る！！
17. 感想 • Amplifyを使ってAI/MLサービスと簡単に統合できた！ • Amplify gen2のサンドボックス機能すごすぎる！ • React/TypeScriptも併せて学びを得られた！
18. ご清聴 ありがとうございました！