Google ChromeにGemini Nanoを実装

# この記事の概要
Google Chrome Stable（普通の人が使うGoogle Chrome）でGemini Nanoが利用できるようになっていたことを知ったので、改めてインストールし直してみました。前回の記事は[こちら](https://qiita.com/portfoliokns3/items/75d864891fc9cd15cf5b)。

前回の記事を見ながらインストールし直したものの、何やらうまくいかず、色々試行錯誤して、2日掛かったので、同じように困っている人がいるんじゃないかと思った。加えて、自分がまたインストールし直す際に苦労しないようメモとして残しているものです。

# 実行環境
この記事で実装したPCの詳細は以下のとおりです。
OS：macOS
チップ:Apple M1
メモリ:16GB
google chrome: 130.0.6723.59（Official Build） （arm64）

ちなみにGemini Nanoをインストールするにあたって必要な条件があるらしいです。またPCストレージの空き容量が22GB以上必要みたいで、PCストレージが少なくなると、Gemini Nanoが自動的に削除される❓とか。そう言った話やこの記事で書かれていない内容は他の記事を見てください。

# 手順
## Google Chromeのインストール
大抵の人はGoogle Chromeを入れていると思いますが、これがないとそもそもGemini Nanoを使えません。

https://support.google.com/chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop

## chrome://flags/から2つの項目を設定
まずGoogle Chromeのアドレスバーに以下のアドレスを入力してアクセスする。
```
chrome://flags/
```
その後、次の2つの項目を設定し直し、その後、Chromeの再起動を行う。

|項目  |変更後の設定値  |
|---|---|
|Enables optimization guide on device  |Enabled BypassPerfRequirement  |
|Prompt API for Gemini Nano  |Enabled  |

再起動を行えば、以下のように設定されているはずです。
![スクリーンショット 2024-10-17 23.43.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/a5b1be31-e57c-1fbc-3d4e-79ef524beb3e.png)

## chrome://components/から"Optimization Guide On Device Model"を設定
ここが非常にわかりづらく、ここで2日近く手こずりました。ググって色々と記事を見ていると、この"Optimization Guide On Device Model"が出ないという人が大多数で、皆困っているらしい。

まずGoogle Chromeのアドレスバーに以下のアドレスを入力し、アクセスする。
```:URL
chrome://components/
```
おそらく大抵は"Optimization Guide On Device Model"が表示されていないと思います。これを表示するための手続きを行う必要があるみたい。
![スクリーンショット 2024-10-17 23.10.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/2a134dd3-0d37-53c5-db8d-9bd491fd0bc4.png)

まずは検証環境のコンソール(F12キー)に以下のコードを貼り付けて、"readily" or "no"を確認する。
```:確認コード
(await ai.assistant.capabilities()).available;
```
"readily"であれば、Gemini Nanoが使用できるらしいですが、私の場合はずっと"no"でした。
![スクリーンショット 2024-10-18 0.23.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/9b9e062e-8265-b6e2-15c1-400fb1c56d64.png)


次に、以下のコードをコンソールに貼り付けて、実行してみる。
```:セッションの生成？
await ai.assistant.create();
```
この時点でエラーが出るが、そのままChromeを再起動する（普通にcommand + Qでタスクキル→Chromeを起動）。

もう一度、"chrome://components"へアクセスし、"Optimization Guide On Device Model"が出ているかを確認する。表示されていれば、「アップデートを確認」を押す。

色々試行錯誤した結果、私はこの手順を踏んだ結果として、ようやく"Optimization Guide On Device Model"が表示されるようになりました🎉

その後は"Optimization Guide On Device Model"のアップデートを行い、コンポーネントをダウンロードする。
![スクリーンショット 2024-10-17 23.10.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/a4a53436-50cf-b122-2681-67b99c24675e.png)
![スクリーンショット 2024-10-17 23.12.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/a2308fc5-6568-a23e-1ecd-31cbf768b64e.png)

もう一度、以下のコマンドを実行すると"readily"が出てくると思います。
```
(await ai.assistant.capabilities()).available;
```

## 実行ができるかを確認
あとは以下のサンプルコードを実行してみて、回答が返って来れば成功🎉（ん❓あれ❓東京都の首都❓）

あとはこれを応用して、ローカル環境でテキスト生成AIが利用でき、自分好みのアプリを開発できます。
```:サンプルコード
const session = await ai.assistant.create();
const response = await session.prompt('東京都の首都は？');
console.log(response);
```
![スクリーンショット 2024-10-18 0.18.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/f8577e15-7556-c983-0241-84e1198b60d7.png)

# 実装してみた
https://github.com/portfoliokns/Gemini-Nano

試しに使ってみたものの、あまり精度がいいとは言えず、何にどう活用すべきなのか、いまだにわからないレベル😕
![スクリーンショット 2024-10-18 22.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/f68944a3-7fbd-3227-2acf-5098e4c4e23a.png)
![スクリーンショット 2024-10-18 22.32.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/00d791cf-ebe4-e4e6-755a-28f484c90d7a.png)
品目明❌→品目名⭕️
![スクリーンショット 2024-10-18 22.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/6c793e50-6382-5aa8-d29f-3b2f8e793e16.png)