この記事は、Finatext Advent Calendar 2025 の17日目の記事です。
こんにちは、Finatextでフロントエンド開発に携わっているあんどです。
先日参加したイベント 冬のJavaScript祭り の菅原のびすけさんのセッションにて知って個人的に発見のあった、Google Chrome の組み込みAIであるGemini Nanoについて紹介させていただければと思います。
Gemini Nanoとは
Googleの提供モデルであるGeminiシリーズの中で、掲題の通りブラウザやスマートフォンなどの端末上で直接動作する最小クラスのオンデバイスAIモデルです。
何がすごいのか
ブラウザだけあれば動作するという、実行環境の用意が非常に平易であることに加え、以下の特徴があります。
オフライン利用が可能
モデルをダウンロードしてブラウザ上で動かすという形のため、オフラインでの利用を行うことができます。これにより、外部にLLMに渡す情報を送ることがないためセキュアかつ高速な動作が提供されます。
文書処理に特化したAPIの提供
文書のリライト・作成・校正・要約などの文書処理に特化した処理がAPIとして使用できます。
マルチモーダル
Prompt APIは音声・画像を取り扱うことができます。（セッションでこれを聞いてビックリしました！）
無料で無制限の使用が可能
Gemini Nanoが一度に扱えるトークン数は約750トークン（公式ブログ記載の内容より参照）であり、昨今のロングコンテキストを取り扱えるようなモデルには遠く及ばないものの、無制限に利用することが可能です。
超長大なテキストなどもSummarizer APIを用いた再帰的な要約を用いることで、取り扱いを行うことができます。
ブラウザで使用できる組み込みAIのAPI
以下の７種類のAPIが提供されています。
| API | 概要 |
|---|---|
| Translator API | 文章の翻訳 |
| Language Detector API | 文章の言語検出。与えられた文章からどの言語で記載されているのかを類推する |
| Summarizer API | 文章の要約 |
| Writer API | 文章のライティング。指定したテイストで文書生成を行う |
| Rewriter API | 文章の再ライティング。指定したテイストで文書修正を行う |
| Prompt API | Gemini Nanoの汎用利用。画像・音声に対応しているマルチモーダル |
| Proofreader API | 文章の校正 |
APIの状況
本記事執筆時点(2025年12月現在)でChromeの最新バージョンは 143.0.7499.110 となっており、既にChromeではTranslator API，Language Detector API、Summarizer APIが実験的な機能として使用できる状況です。
Writer API、Rewriter API、Prompt API、Proofreader APIを使用した機能を提供したい場合は、Chrome Origin Trialに参加する必要があります。
APIを動かしてみる
フラグの有効化
現時点でオリジントライアルに参加が必要なAPIを動作させるには、Chromeウェブブラウザのフラグを有効化する必要があります。
chrome://flags/#optimization-guide-on-device-model
chrome://flags/#prompt-api-for-gemini-nano
chrome://flags/#prompt-api-for-gemini-nano-multimodal-input
chrome://flags/#writer-api-for-gemini-nano
chrome://flags/#rewriter-api-for-gemini-nano
chrome://flags/#proofreader-api-for-gemini-nano
chromeのアドレスバーに入力すれば、有効・無効を切り替える画面が表示されます。
以下でAPIのライブデモが公開されています。動作させるには上述したフラグを有効化することが必要です。
マルチモーダル機能を試す
Prompt APIのマルチモーダルについては公式ブログの以下の項目で説明されています
カメラに写っている情報をリアルタイムで文章化してみる
画像認識を用いて簡単な視覚支援のような用途で使えるウェブアプリが簡単に作れそうなので試してみました。
これはごく単純に5秒間隔で画像の内容をLLMに質問しています。
画像認識精度・速度・回答速度ともにある程度の実用に耐えられるクオリティではないかと思います。使用初回はモデルのダウンロードが必要にはなりますが、これが通信なしブラウザのみで動くことには驚きがあります。
これをOpenAIなどのウェブAPIベースでAIを利用して実現するような場合だとこのような力技の連続リクエストを試みることは難しいのではないでしょうか。
実装内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リアルタイムカメラ画像解説</title>
</head>
<body>
<h1>リアルタイムカメラ画像解説</h1>
<p id="status_description">Language Model APIが有効になっていません。<br>
フラグ(chrome://flags/#prompt-api-for-gemini-nano)を有効にしてください。</p>
<p></p>
<video id="video" width="320" height="240" autoplay></video>
<canvas id="canvas" width="320" height="240" style="display: none;"></canvas>
<div>
<p id="explanation">解説が表示されます</p>
</div>
<script>
const statusDescription = document.getElementById('status_description');
const explanation = document.getElementById('explanation');
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let session = null;
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
video.srcObject = stream;
});
video.addEventListener('play', () => {
requestAnimationFrame(draw);
});
function draw() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
async function analyzingImages() {
draw();
session = await self.LanguageModel.create({
expectedInputs: [
{ type: 'image' },
{ type: 'text' }
]
});
// canvasをBlobに変換してからFileを作成
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg'));
const imageFile = new File([blob], 'image.jpeg', { type: 'image/jpeg' });
if (!imageFile) {
console.error('画像ファイルの作成に失敗しました');
return;
}
const promptParts = [
{
role: 'user',
content: [
{ type: 'text', value: "この画像に写っている要素を100文字程度で日本語で解説してください。" },
{ type: 'image', value: imageFile }
]
}
];
const stream = session.promptStreaming(promptParts);
explanation.textContent = '';
for await (const chunk of stream) {
explanation.textContent += chunk;
}
setTimeout(analyzingImages, 5000);
}
async function initializeLanguageModel() {
if (this.LanguageModel) {
statusDescription.textContent = "LanguageModel APIが使用可能です";
await analyzingImages();
return;
}
try {
const availability = await this.LanguageModel.availability();
if (availability === 'no') {
statusDescription.textContent = "LanguageModel APIが使用できません";
return;
}
} catch (error) {
console.error(error);
statusDescription.textContent = "LanguageModel APIの使用可否チェックで問題が発生しました";
return;
}
}
initializeLanguageModel();
</script>
</body>
</html>
公式ブログと、菅原のびすけさんの作成されたデモの実装を参考にさせていただきました。
まとめ
実際にデモを触ったり動かしたりしてみると、文書・画像認識・音声認識の圧倒的な処理速度に驚きました。一度手元で動かしてみる価値がある体験ではないかと思います。
現実的にはあまねく利用者の環境でブラウザの組み込みAIを動かせる環境というものはまだちょっと遠そうではありますが、個々人の所有しているスマートフォンやPCの高性能化が進んでいることや、APIの標準化を目指す動きもあるということなので、期待が高まります。
AIをセキュアかつ高速に無料で無制限で使えるというのは利用者としても開発者としてもぜひ求めたいところであるため、個人的にはぜひブラウザAIのAPIが標準的に利用できる未来が訪れてほしいなと思いました。
謝辞
菅原のびすけ(@n0bisuke)さん 記事作成にあたって発表内容を参考に記事を作成することをご快諾いただき誠にありがとうございました。
参考にさせていただいた記事・リポジトリ
Discussion