Google Chrome ローカルで LLM と音声合成！キャラクター会話システム local-chat-vrm を公開し、Google I/O 2025 で展示しました

SaaS のいらない会話をしよう

こんにちは、kougen です。普段は ChatRoid や VRoid Hub のエンジニアとして開発をしています。

近年の ChatGPT などの LLM (Large Language Model) 関連サービスの発展に伴い、多くの人が LLM を利用するようになりました。それに伴い LLM にキャラクター性をつけて楽しんでいる人も増えているかと思います。頻繁にジョークを挟んでくる友人から頼れる真面目な先生まで、様々なキャラクター性を楽しんでいる人もいるのではないでしょうか。

ChatRoid チームでは以前から LLM を利用した3Dキャラクターとの交流の可能性を探索しています。過去には ChatVRM というアプリケーションを OSS (Open Source Software) として公開しています。これは ChatGPT の他に音声合成の Koeiro API を利用することで、キャラクターと会話ができる Web アプリケーションです。

inside.pixiv.blog

しかし ChatVRM では、ChatGPT や Koeiro API といった SaaS (Software as a Service) の API キーは利用者が用意する必要がありました。ユーザーの利便性を高めるためにサービス運営者が API キーを用意する場合でも、フロントエンドアプリケーションに API キーを埋め込むことは推奨されません。ユーザーがフロントエンドアプリケーションを解析することで、 API キーを特定し悪用することが可能なためです。

もちろん SaaS を使う専用サーバーを立てて、専用サーバー経由で SaaS を利用することで、この問題は解決できます。しかし今回は LLM や音声合成をローカルで行うことで、そもそも各種 SaaS を利用しないで済むようにするという別のアプローチを試しました。

ブラウザローカルでの LLM と音声合成

技術の進歩によってブラウザローカルでクオリティーの高い LLM や音声合成の利用が比較的簡単にできるようになってきています。

今回はこれらの技術を活用して ChatVRM の処理を完全にブラウザで完結できるようにした local-chat-vrm を作りました。またこのアプリケーションを Google I/O 2025 のデモブースで展示しました。

ローカルでの LLM には Google Chrome にビルドインされている Gemini Nano を利用しています。現状ビルドインの LLM としては Google Chrome 以外のブラウザでは利用できませんが、シンプルなインターフェースで利用できる点が特徴です。

またローカルでの音声合成には kokoro TTS を利用しました。比較的軽量なモデルで高速かつクオリティの高い音声合成が可能で、WebGPU を利用した JavaScript ライブラリが利用できる点が特徴です。

当時利用したコードは GitHub 上に公開しています。

github.com

デモ環境は以下になりますが、Google Chrome にビルドインされている Gemini Nano Multimodal を利用するため、事前準備が必要になります。事前準備の詳細な手順は後述の早期プレビュープログラムに参加してご確認ください。

https://pixiv.github.io/local-chat-vrm/

README に従ってソースコードを書き換えることで、文字起こしに Web Speech API のSpeechSynthesis を利用する形で通常の Google Chrome でも動作確認することができます。ただし通常の Google Chrome にビルドインされている Gemini Nano の仕様も定期的に大きく変化しているため、こちらも最新の仕様では動かない可能性があります。本記事の内容はあくまで参考程度にしていただき、最新の仕様は各種ドキュメントをご確認ください。また英語以外の言語は利用できません。

以下では各技術要素について詳しく解説していきます。

利用した技術

Google Chrome にビルドインされている Gemini Nano

ドキュメントはこちらです。 developer.chrome.com Google が開発している LLM である Gemini の軽量版である Gemini Nano を Google Chrome 上で動かすことができます。

以下では2025年5月23日段階で利用可能な手順を解説しますが、関数の利用方法は日々変化しています。最新の情報は以下を参照してください。 developer.chrome.com

Google Chrome で chrome://flags/#prompt-api-for-gemini-nano を開きます。
Prompt API for Gemini Nanoで [Enabled] を選択します。
[再起動] をクリックするか、Chrome を再起動します。
コンソールに await LanguageModel.availability({}); と入力します。これにより、available が返されます。これにより、available が返された場合に利用可能です。

downloadable が返ってきた場合は await LanguageModel.create({}); をコンソール上で実行してください。しばらく待ってレスポンスが返ってきた後に await LanguageModel.availability({}); を実行すると available が返ってきます。

この状態でブラウザローカルでGeminiを利用することができます。以下は参考コードです。

// キャラクターの基本設定
// 今回はアニメファンであるという設定を入れています
const systemPrompt = "You will now act as a close friend of the user and engage in conversation. You are a huge anime fan. Please provide only one most appropriate response. Talk casually. Don't use formal language.";

// ユーザーからの質問
const prompt = "What do you do on your days off?";

if(await LanguageModel.availability({}) !== "available") {
    throw Error("Language model is not available.");
}

const session = await window.LanguageModel.create({
  initialPrompts: [{ role: "system", content: systemPrompt }],
});

// 結果をストリームで取得
const stream = session.promptStreaming(prompt);

let response = "";
for await (const chunk of stream) {
  response += chunk;
}
console.log(response);

この例の場合は以下のようなレスポンスが返ってきます。

Haha, well, I don't actually *have* days off in the same way people do. I'm always here and ready to chat. But if I *did*, I'd probably be watching anime or reading manga.  Maybe I'd even try my hand at drawing something, or maybe just binge-watch a whole season of something I've been looking forward to. What about you?  What do you like to do when you have free time?

日本語に直訳すると以下のようになります。

はは、実は、普通の人と同じように「休日」はないんです。いつもここにいるし、いつでもお話しできます。でももしあったら、たぶんアニメを見たり、マンガを読んだりしてるでしょう。もしかしたら、絵を描いてみたり、ずっと楽しみにしていた作品のシーズンを一気見したりするかもしれません。あなたは？自由な時間がある時、何をするのが好きですか？

基本設定の情報が少なかったため、休日のない可哀想なキャラクターが生まれてしまいましたが、細かい設定はプロンプトを追加することで修正可能です。

また日本語でのレスポンスには対応していないため、プロンプトや質問に日本語が含まれているとエラーになる場合があります。利用の際はご注意ください。

Google Chrome にビルドインされている Gemini Nano Multimodal

音声認識にはGemini Nanoのマルチモーダル版を利用していました。

プレビュー版の機能を利用しているため、この関数の仕様は頻繁に変化しています。そのため local-chat-vrm での実装に関する詳細な説明は割愛します。

最新の詳細な利用方法は Google Chrome にビルドインされている Gemini Nano の早期プレビュープログラムに参加してご確認ください。

developer.chrome.com

Kokoro TTS

Kokoro TTS は軽量かつクオリティの高い TTS (Text to Speech) モデルです。Kokoro TTSには JavaScript ライブラリがあるため、ブラウザから比較的簡単に呼び出すことができます。 github.com

これらの特徴は今回のようにブラウザローカル環境で全てを完結したい場合に適しています。

インストールは以下のコマンドで可能です。

npm i kokoro-js

kokoro-js をインストールした上で以下のような実装をすることでオーディオファイルを取得できます。

import { KokoroTTS } from "kokoro-js";

const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
const text = "Hello!";
const voice_name = "af_heart";

const tts = await KokoroTTS.from_pretrained(model_id, {
  dtype: "fp32",
  device: "webgpu",
});
const audio = await tts.generate(text, { voice: voice_name });

local-chat-vrm では LLM による文字生成と同時に音声生成を行うことを想定していたため、WebWorker 経由でこれらの処理を呼び出しています。

Google I/O 2025 での展示

以上のように作成した local-chat-vrm は Google I/O 2025 でデモ展示されました。この機会を通して多くの人にブラウザローカルで楽しめるキャラクターとの会話を体験していただけました。

課題

技術デモレベルでは比較的簡単に利用できるようになったブラウザローカルでの LLM や音声合成ですが、今回のデモアプリケーションを一般向けのアプリケーションにするには、いくつかの課題があります。

まず Google Chrome にビルドインされている Gemini Nano は現段階ではトライアルの機能になるため、インターフェースや仕様が安定しないという点があります。ただし Google による Gemini 関連の開発は現在活発に行われているため、これが解決するのは時間の問題であると考えられます。

次に安定版の Google Chrome にビルドインされている Gemini Nano が出た場合もブラウザによって使える環境と使えない環境が生じるため、使えない環境でのフォールバックやサポートを考える必要がある点も課題です。ビルドインの LLM が使えない環境ではサービスの提供をしないのか、WebLLM のような WebAssembly を使った LLM ライブラリを使うのか、SaaS を利用するのか、様々な選択肢が考えられます。

また今回デモのために用意していただいた PC はハイスペックだったので問題にはなりませんでしたが、通常スペックの PC ではレスポンスに3秒以上かかることがある点も課題です。3秒という時間は会話体験のレスポンス時間としては非常に遅いです。体験の種類に応じて適切に SaaS との使い分けやモデル選択をすることが今後必要になると考えられます。

さらに各種 LLM および音声合成のモデルは軽量モデルではあるものの、ダウンロードに時間がかかることも課題です。ローカルキャッシュのない初回の場合、環境によっては1分以上待たされる場合もあります。ゲームのアセットローディングとしては、よくある程度の時間ですが、Web アプリケーションとしては非常に長いローディング時間です。今回のデモでは初回ロードはスタッフが行う想定だったため、シンプルなローディング表示のみにしました。しかし一般のユーザーがこの画面に到達した場合、ここで離脱される可能性が高いです。一般向けの Web アプリケーションにする際の見せ方に関しては、今後様々な形が提案されるのではないでしょうか。

まとめ

本記事では、ブラウザローカル環境での LLM と音声合成を活用したキャラクター会話システム local-chat-vrm について解説しました。Google Chrome にビルドインされている Gemini Nano とKokoro TTS を組み合わせることで、比較的簡単に SaaS に依存しない会話システムを実現しました。また、このアプリケーションは Google I/O 2025 で展示しました。現状では環境依存の問題やレスポンス時間、初期ロード時間などの課題がありますが、今後の技術発展とともに改善が期待される部分もあります。

LLM や音声合成の活用の可能性は今後も広がっていくと考えられます。ChatRoid チームは今後も様々な可能性を探索していきたいと考えています。