コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > Chrome > 【検証】Chromeの新AI翻訳機能「Translator API」を使ってみた！驚きの翻訳スピードと使い勝手

【検証】Chromeの新AI翻訳機能「Translator API」を使ってみた！驚きの翻訳スピードと使い勝手

Chrome Translator API

Using Chrome AI for Translation

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

ChromeのTranslator APIについてはAI を組み込んだ翻訳をご覧ください。

私はChromeのブラウザに生成AIを組み込む取り組みについて、いくつかのブログ記事を書いてきました。これはまだかなり試験的なプロセスですが（Chromeエンジニアによるイントロダクションのポストでアクセス権を申請して詳細を確認できることを覚えておいてください）、時間とともに改善されています。前回の投稿（「ChromeのAIを使ったテキストの書き換え」）で言及したように、Chromeチームは一般的な質疑応答だけでなく、特定の目的に特化したAPIをリリースしています。前回の記事ではRewriter APIの例を示しましたが、さらなる例として、現在はデバイス上での翻訳機能をテストできるようになりました。

これまでこの分野で私が共有してきた他の機能と同様に、実装としてはかなり初期段階と考えるべきです。しかし、機能を有効化する際のハードル（開発サイクルの後半ではより簡単になる予定です）を一度乗り越えてしまえば、翻訳機能は驚くほど簡単です。

最上位レベルでは、window.translationオブジェクトがあります。これが存在する場合、どの言語からどの言語への翻訳を行いたいのかを指定できます。現在、例えば英語からフランス語への翻訳をリクエストすると、そのサポートのダウンロードプロセスが開始されます。実環境では（つまり、この機能がより広く利用可能になった時）、サイトの利用時に機能を使用することを見込んで、ユーザーの最初の訪問時にこれを実行することが考えられます。言い換えれば、実際に使用する前にサポートを「事前ロード」することを考えておく必要があります。

翻訳機能が利用可能かどうかを確認するには、canTranslateを使用します：

let pair = {
    sourceLanguage:'en', 
    targetLanguage:'fr'
}

let canTranslate = await translation.canTranslate(pair);

ソース言語とターゲット言語を指定する必要があることに注意してください。もし双方向の翻訳が必要な場合は、値を逆にして2回呼び出す必要があります。

翻訳の準備ができている場合は「ready」、ダウンロード後は「after-download」、無効な言語ペアの場合は「no」が返されます。必要に応じてダウンロードを監視するイベントをチェックすることもできるので、理論的には準備が整い次第、サイトで機能を即座に有効化することが可能です。

canTranslateの結果が良好な場合、翻訳オブジェクトを作成できます：

translator = await translation.createTranslator(pair);

セットアップにはある程度の複雑さがありますが、それほど悪くないと思います。翻訳オブジェクトを取得してしまえば、APIは非常にシンプルです：

let result = await translator.translate(inputText);

実用例

実際の使用例として、私はAdobe PDF Embedライブラリを使用してウェブページにPDFを表示するCodePenを作成しました（残念ながら、おそらく皆さんには動作しないと思われるので、スクリーンショットを共有します）：

PDFの右側に、シンプルなメッセージを追加しました：「PDFのテキストを選択すると、フランス語に翻訳します。」

そして、Embed APIの機能を使用して選択イベントを監視しています。重要な部分は以下の通りです：

adobeDCView.registerCallback(
    AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
    async function(event) {
        let selection = await apis.getSelectedContent();
        console.log(selection);
        if(selection.type === "text" && selection.data.length) translate(selection.data);
    }, eventOptions
);

これが以下の翻訳関数を呼び出します：

async function translate(s) {
    console.log(`call transation on ${s}`);    
    resultDiv.innerHTML = '<i>Working on translation...</i>';
    let result = await translator.translate(s);
    console.log(result);
    
    resultDiv.innerHTML = `<strong>Translated Text:</strong><br/>${result}`;
}

私は「It is never too early or too late to start planning your legacy. We have the perfect life insurance plan for you to make it easy to start securing your family's financial future.」というテキストを選択し、以下の翻訳を得ました：

"Il n'est jamais trop tôt ou trop tard pour commencer à planifier votre héritage. Nous avons le plan d'assurance-vie parfait pour vous permettre de commencer à garantir l'avenir financier de votre famille."

私は高校フランス語の全てを覚えているわけではないので、これは...まあ、大丈夫そうですかね？:) 正直なところ、最高の翻訳は出版時にプロフェッショナルに依頼し、原文の文脈を適切に反映させることなどを確実にすることでしょう。しかし、これをデバイス上でリアルタイムに、（私の非科学的な計測では）1秒で実行できるというのは、本当にすごいことだと思います。

完全なデモは以下で確認できます：

See the Pen PDF Selection Translate with Nano by Raymond Camden (@cfjedimaster) on CodePen.

©コハム