🌐
LLMを用いてi18n（多言語対応）を効率化する - ComfyUIでのLobe i18n導入事例をご紹介

2024/12/04に公開
i18n
 LLMとi18n対応（多言語対応）は相性が良い今回LLMを用いたi18n対応を実施した際の内容を書いていこうと思います。
LLMとi18n対応についての相性は抜群で 『翻訳クオリティは100点ではなく70点で良い』 という条件であれば大幅にi18n対応のコストを減らすことが可能です。
今回、ComfyUIというオープンソースのソフトウェアで、このLLMを用いたi18n対応を実施しましたので、その時の導入の流れをZennに書いていこうと思います。

 ComfyUIとは？なお、ComfyUIはAIを用いた画像生成や動画生成を行う上でよく利用されているソフトウェアの一つで、画像生成AIのモデルとして有名なStable DiffusionやFluxなどを使っている方なら、生成を行うためのツールとして利用したことがあるかもしれません。
https://www.comfy.org/
ComfyUIではPythonで書かれたバックエンドとVue (TypeScript)で書かれたフロントエンドのリポジトリがそれぞれ分離しており、私が今回対応したのはVue (TypeScript) で書かれたフロントエンドの話となります。
https://github.com/Comfy-Org/ComfyUI_frontend
今回のi18n対応ですが、事前にComfyUIのメンバーよりi18n対応に用いるライブラリとして Lobe i18n というライブラリが提案されていたので、そちらを用いてLLMで対応できる i18n の仕組みを導入しました。

 Lobe i18nとは？Lobe i18nはChatGPTのAPIを用いてi18n対応を行うためのTypeScriptで書かれたCLIツールとなります。

（ Lobe CLI Toolbox というリポジトリの packages の一つとして lobe-i18n があります）
https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n/README.md
ChatGPTを用いるため、利用には OpenAIのtoken (API key) が必要になります。
導入方法自体は簡単で他のnpmライブラリ同様に以下のコマンドでインストール
npm install --save-dev @lobehub/i18n-cli
次に以下のコマンドで利用するOpenAIのAPI tokenを設定します。
npx lobe-i18n --option
上記コマンドを実行すると、以下のようにCLI上でグラフィカルに設定ができるので、OpenAIのtoken (API key)を設定します。

（以下の画像のようになっていればOKです）
Lobe i18nでは設定にcosmiconfigを利用しています。
https://github.com/cosmiconfig/cosmiconfig
例えばプロジェクトルートなどに .i18nrc.js のような設定ファイルを置いておき、
const { defineConfig } = require('@lobehub/i18n-cli');

module.exports = defineConfig({
  entry: 'locales/en_US.json',
  entryLocale: 'en_US',
  output: 'locales',
  outputLocales: ['zh_CN', 'ja_JP'],
});
以下のコマンドを実行するだけで、 locales/en_US.json をベースにして 'zh_CN', 'ja_JP' の言語ファイルを自動的に生成してくれます。
npx lobe-i18n locale
一度翻訳を生成して各言語ごとのキーがそれぞれの言語ファイル (ここでは 'zh_CN', 'ja_JP')に存在している状態であれば自動的に翻訳処理はスキップしてくれるので、今後新しい言語を導入したいとなったときも今までに翻訳しているファイルは翻訳対象外となります。
また新たにキーを追加した場合も追加したキーのみ（この場合、ベースとなる en_US.json にのみ存在していて他のファイルには存在していないキーのこと）翻訳対象となるので、今後の運用自体も非常に楽です。

（OpenAI APIの利用コスト的にも嬉しい設計ですね）
またこのような特性を兼ね備えているため、例えば自動的に翻訳したテキストがイマイチで手作業で修正した場合も、当然その内容は今後の翻訳処理の際に上書きされることはありません。
というわけで、導入すれば i18n 関連の管理コストが減ると思ったので、こちらで紹介させていただきました。

 ComfyUIでのLobe i18n導入事例ここからは実際にComfyUIにLobe i18nを導入した際の内容について書いていきます。

もし実際にプロジェクトで導入を検討している方の参考になれば幸いです。

（といっても、既に上に書いた説明で事足りてしまいますが）
まずはライブラリのインストールとセットアップです。
# インストール
npm install --save-dev @lobehub/i18n-cli

# OpenAI API tokenのセット
npx lobe-i18n --option
次に設定ファイルを導入するのですが、ここで一つ躓くポイントがあります。

今のプロジェクトであれば以下のようにES Modulesで書きたい人は多いと思います。
import { defineConfig } from '@lobehub/i18n-cli';
ただし、Lobe i18n が依存しているライブラリである cosmiconfig はES Modulesに対応していません。

この問題についてはComfyUIの対応時は設定ファイルを .i18nrc.cjs にしてCommonJS形式のファイルとして扱うことで対応しました。
ES Modulesが当たり前になってきつつある現在では、ここは多分引っかかる人が多いと思うので書き残しておきます。
あとは npx lobe-i18n locale で設定ファイルを読み込んで、問題なく翻訳処理が行えることを確認できれば完了です。
導入事例といいつつ、内容としては非常に短く簡単でしたね。
実際に導入したPRは以下となります
https://github.com/Comfy-Org/ComfyUI_frontend/pull/1751
ComfyUIでは基本的に英語の言語ファイルである en.json をベースにしつつ、このLobe i18nを利用してサポートしている言語の翻訳を自動生成していく、という形で運用を進めていく流れとなっています。

もし違和感のある翻訳が生成されてしまった場合は都度都度そこだけ手作業で修正していけばいいだけなので、この運用はやりやすいと個人的には思っています。
もし i18n 対応を楽にしたいと考えている方は是非参考にしてみていただけると幸いです。
LLMとi18n対応（多言語対応）は相性が良い

ComfyUIとは？

Lobe i18nとは？

ComfyUIでのLobe i18n導入事例

Discussion
