🎤
Chrome内蔵Gemini NanoとWeb Speech APIを用いた音声チャットボットの実装
はじめに
本記事では、Chrome内蔵のAIモデルGemini Nano」とWeb Speech APIを組み合わせて、音声対話が可能なチャットボットを実装する方法について解説します。
デモ
何はともあれ、以下のデモをまずはご覧ください（ChromeでGemini Nanoを有効にするには、「Chrome の 組み込み AI Gemini Nano を試してみる」を参考に設定してください）。
実際に動作している様子を動画に録ってみました。
主要な技術的ポイント
本デモの技術的なポイントは以下の通りです。
- Chrome内蔵のGemini Nanoの利用
- Web Speech APIによる音声認識と音声合成
Gemini Nanoの利用
Gemini Nanoは、Chrome 126以降に内蔵されているAIモデルです。以下のように利用しています：
const generate = async (message, language) => {
if (!window.ai) {
console.error("AIモジュールが利用できません");
return "AI is not available.";
}
try {
const session = await window.ai.createTextSession();
const prompt = `
ユーザーの言語: ${language}
ユーザー入力: ${message}
アシスタントの応答 (ユーザーと同じ語で、簡潔に):`;
const response = await session.prompt(prompt);
console.log("AIの応答:", response);
return response.trim();
} catch (error) {
console.error("AIエラー:", error);
return "An error occurred.";
}
};
この実装では、window.aiオブジェクトを使用してテキストセッションを作成し、プロンプトを送信してAIの応答を得ています。
Web Speech APIの利用
Web Speech APIを使用して、音声認識と音声合成を実現しています。
音声認識
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = 'ja-JP';
recognition.onresult = async (event) => {
const result = event.results[event.results.length - 1];
const transcript = result[0].transcript.trim();
console.log('認識されたテキスト:', transcript);
// ユーザーの発言をすぐに表示
addMessageToChat(transcript, true);
if (result.isFinal) {
const language = recognition.lang;
try {
console.log('AIに問い合わせ中...');
const reply = await generate(transcript, language);
console.log('AIの返答:', reply);
// AIの返答を表示
addMessageToChat(reply, false);
// 音声合成
const utterance = new SpeechSynthesisUtterance(reply);
utterance.voice = voices.find(v => v.name === $('#voice').value);
speechSynthesis.speak(utterance);
} catch (error) {
console.error('AIの応答生成エラー:', error);
addMessageToChat("An error occurred while generating the AI response.", false);
}
}
};
音声合成
const utterance = new SpeechSynthesisUtterance(reply);
utterance.voice = voices.find(v => v.name === $('#voice').value);
speechSynthesis.speak(utterance);
まとめ
Chrome内蔵のGemini NanoとWeb Speech APIを組み合わせることで、以下の特徴を持つチャットボットを実装できました：
- ブラウザだけで完結する軽量なAI機能
- リアルタイムの音声認識と音声合成
この実装方法は、ウェブアプリケーションにおける新しいインタラクションの可能性を広げるものです。ただし、現時点では実験的な機能であり、今後の更新に注目する必要があります。
Discussion