クライアントサイドのLLMにめっちゃ期待している話(とGemini Nanoの紹介)

## サーバーサイドLLMの課題

現状LLMをアプリに組み込む場合、サーバーサイドで実装することがほとんどかと思います。そのようになる理由は、多くの場合下記のいずれかなのではないでしょうか。

- 外部のLLMサービスにリクエストを送信するためのAPIキーを流出させないため
- 外部のLLMサービスを利用する場合、そのRate Limitを考慮した設計をする必要があるため
- LLMの実行に十分な量のGPUを積んだサーバーが必要なため

しかし、これらの問題を解決するためにサーバーサイドでLLMの機能を作成すると、次のような問題に遭遇します。

- 外部のAPIを使用する場合も、自社でホスティングする場合も、費用が高い
- 外部のAPIを使用する場合、ユーザーの入力が学習に使用されないことをドキュメントベースでしか確認できない
- 1回1回の実行時間が長いため、非同期にしたいからと安易に非同期ジョブシステムを採用した場合にjob workerのリソースを大きく占有してしまう可能性がある

## クライアントLLMへの期待

しかし、ブラウザやモバイルアプリのクライアント側でコードからLLMが使えたらどうでしょう？
もちろん費用はタダですし、LLMが端末依存なため、リクエスト数を気にする必要もAPIキーの流出を気にする必要もありません。PoC作成も今よりずっと楽になります。
また、通信も不要なため、通信環境の悪化を起因とするユーザー体験の低下にも繋がりません。
また、ユーザーの入力も各自の端末内の処理で完結できるため、ユーザーに与えるプライバシー的な不安も軽減できます！

本当夢しかないですね！！

今日はそんなクライアントLLMのうち、Google Chromeに搭載されているGemini Nanoについて紹介します！

:::note warn

筆者が上記のような期待を抱いているのは事実ですが、クライアントLLMはサーバーサイドLLMを完全に代替する銀の弾丸ではありません。例えば、クライアントLLMは複雑なユースケースが苦手だったり、そもそもLLMを組み込んだブラウザの導入にはまだ時間がかかるといったデメリットもあります。
実際に利用を考える際はユースケースに合わせた適切な技術選定が必要です。
また、GoogleのドキュメントではクライアントLLMとサーバーサイドLLMを組み合わせるパターン(ハイブリッド AI)も紹介されています。
https://developer.chrome.com/docs/ai/built-in?hl=ja#hybrid-ai

:::

## Chrome版 Gemini Nanoの使い方と機能紹介

Gemini NanoはGoogle Chromeに埋め込まれているGoogle製のLLMです。2024年現在ではフラグをONにしないと使用できない機能となっており、使用のためには所定の手順が必要です。
https://developer.chrome.com/docs/ai?hl=ja

ここではGoogle Chrome version 131時点でのGemini Nanoの使い方と機能について紹介します。

:::note warn

Genimi Nanoの利用方法・各種機能の使い方はChromeのバージョンによって大きく異なります。
そのため、version 131以外とは全く利用方法が異なる場合があることにご留意ください。

:::

### Gemini Nanoの利用方法

#### Chromeの設定変更を行う

Chromeで`chrome://flags/`にアクセスし、下記の項目の設定変更を行う

| 設定 | 設定値 | 
| ---- | ---- |
|  Enables optimization guide on device | Enabled BypassPerfRequirement |
| Prompt API for Gemini Nano | Enabled |
| Summarization API for Gemini Nano | Enabled |
| Writer API for Gemini Nano | Enabled |
| Rewriter API for Gemini Nano | Enalbed |

#### Gemini Nanoのモデルのダウンロード

1. Chromeのconsoleで下記のコマンドを実行する(エラーが出る場合がありますが無視して大丈夫です)

```javascript
await ai.languageModel.create()
```

2. Chromeでchrome://componentsにアクセスする

3. `Optimization Guide On Device Model` の`アップデートを確認`をクリックし、しばらく待つ

Chromeのコンソールで`(await ai.languageModel.capabilities()).available`を実行して`'readily'`と返されれば準備完了です！

### Prompt API

LLMに任意の文字列を渡して会話できる機能です！
下記のように利用できます。

```javascript
const model = await ai.languageModel.create()
await model.prompt("hello")
```

例えば、helloと入力した際のレスポンスは下記のような内容でした

> "Hello there! Welcome to the fascinating world of **artificial intelligence (AI)**.  I'm here to guide you through its wonders and help you explore its potential.\n\nFirst, let's start with the basics. Can you tell me in your own words what you understand about AI? \n"

また、Streaming用の機能も実装されており、次のように利用できます。

```javascript
const model = await ai.languageModel.create() // 宣言済みなら不要
const stream = await model.promptStreaming("hello")
for await (const chunk of stream){ console.log(chunk) }
```

注意点として、現状は日本語には対応していないようで、日本語は入力すると次のようなエラーが出てしまいます(version 131以前は返事が返ってきていたのですが。。:sob: )。

> Uncaught NotSupportedError: The model attempted to output text in an untested language, and was prevented from doing so.

### Summarization API

LLMに渡した文章を要約してくれる機能です！
下記のように利用できます。
```javascript
const summarizer = await ai.summarizer.create()
await summarizer.summarize("some long text")
```

例えば、[wikipediaのwhite houseのページ](https://en.wikipedia.org/wiki/White_House)から引用した下記の文章を渡すと
```
"The White House is the official residence and workplace of the president of the United States. Located at 1600 Pennsylvania Avenue NW in Washington, D.C., it has served as the residence of every U.S. president since John Adams in 1800 when the national capital was moved from Philadelphia. The \"White House\" is also used as a metonym to refer to the Executive Office of the President of the United States.The residence was designed by Irish-born architect James Hoban in the Neoclassical style. Hoban modeled the building on Leinster House in Dublin, a building which today houses the Oireachtas, the Irish legislature. Constructed between 1792 and 1800, its exterior walls are Aquia Creek sandstone painted white. When Thomas Jefferson moved into the house in 1801, he and architect Benjamin Henry Latrobe added low colonnades on each wing to conceal what then were stables and storage. In 1814, during the War of 1812, the mansion was set ablaze by British forces in the burning of Washington, destroying the interior and charring much of the exterior. Reconstruction began almost immediately, and President James Monroe moved into the partially reconstructed Executive Residence in October 1817. Exterior construction continued with the addition of the semicircular South Portico in 1824 and the North Portico in 1829.Because of crowding within the executive mansion itself, President Theodore Roosevelt had all work offices relocated to the newly constructed West Wing in 1901. Eight years later, in 1909, President William Howard Taft expanded the West Wing and created the first Oval Office, which was eventually moved and expanded. In the Executive Residence, the third floor attic was converted to living quarters in 1927 by augmenting the existing hip roof with long shed dormers. A newly constructed East Wing was used as a reception area for social events; Jefferson's colonnades connected the new wings. The East Wing alterations were completed in 1946, creating additional office space. By 1948, the residence's load-bearing walls and wood beams were found to be close to failure. Under Harry S. Truman, the interior rooms were completely dismantled and a new internal load-bearing steel frame was constructed inside the walls. On the exterior, the Truman Balcony was added. Once the structural work was completed, the interior rooms were rebuilt.The present-day White House complex includes the Executive Residence, the West Wing, the East Wing, the Eisenhower Executive Office Building, which previously served the State Department and other departments (it now houses additional offices for the president's staff and the vice president), and Blair House, a guest residence. The Executive Residence is made up of six stories: the Ground Floor, State Floor, Second Floor, and Third Floor, and a two-story basement. The property is a National Heritage Site owned by the National Park Service and is part of the President's Park. In 2007, it was ranked second on the American Institute of Architects list of America's Favorite Architecture."
```

次のように要約されました。

```
"* The White House is the official residence and workplace of the U.S. president, located in Washington, D.C. \n* Designed by James Hoban in the Neoclassical style, it has been rebuilt after being set ablaze by British forces in 1814.\n* The White House complex includes six stories and various wings such as the West Wing, East Wing, Eisenhower Executive Office Building, and Blair House.\n* It's a National Heritage Site owned by the National Park Service and a popular architectural landmark. \n* It's considered one of America's favorite architecture by the American Institute of Architects. \n"
```

こちらもstreaming用の機能が実装されており、次のように利用可能です。
```javascript
const summarizer = await ai.summarizer.create() // 宣言済みなら不要
const sumStream = await summarizer.summarizeStreaming(text)
for await (const chunk of sumStream){ console.log(chunk) }
```

### その他

他にも

- Writer API
- Rewriter API

の2つの機能が存在するのですが、自分の手元で試した言語(日本語、英語、中国語、フランス語)はすべてNotSupportedErrorになってしまいました。
そのため、この記事では紹介しません。

## まとめ

現状は日本語が対応してなかったり、利用するための手順が必要だったりと、実用的とは到底言えない段階にあるGemini Nanoですが、これ含めクライアントLLMが誰でも利用できるようになれば開発者も利用者も今よりハッピーになれそうじゃないですか！！
PoC作成の難易度も今よりずっと低くなりそうです！
(もちろん、用途によりますが)

クライアントLLMの進化から今後も目が離せませんね！！