オフラインでもTypeScriptから使えるAI ~ Chromeに搭載されるGemini Nanoとは ~

1.1K Views

November 23, 24

#生成AI #機械学習 #Gemini Nano #Chrome #TypeScript

スライド概要

BASE株式会社 Fullstack AI Dev & Raycast summit のスポンサーLTです！ #FullstackAIDev2024

ChromeでオフラインでもAI使える未来、テンション上がりますね！！！（すべてのブラウザに搭載されるといいなぁ…！）

BASE BANKのチーム紹介資料もぜひ見てください！
https://speakerdeck.com/base/basebank

がっちゃん

@gatchan0807

スライド一覧

がっちゃんです。BASE（BASE BANK）でエンジニアをやっています。Webフロントエンドが好きです。Webはもーっと好きです！

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 3.04MB)

関連スライド

次元を超える事業家集団っぽいフロントエンドの話

がっちゃん >100

Changelogを読んで自分のエンジニアキャリアを作る

がっちゃん >100

PWACompatを本番導入してみた話 - PWANight #4 LT

がっちゃん >100

BASEのフロントエンド組織の人数が2.5倍になって起きた変化

がっちゃん >100

アプリケーションのデプロイを高速化するためにnode_modulesに手を出した話

がっちゃん >100

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.3M

各ページのテキスト

#FullstackAIDev2024 Speaker Profile がっちゃん古賀友輝 New Dept. > BASE BANK Div. > PAY.JP Dev Grp AIに対してのスタンス ● 個人ではGeminiをよく使ってます ● 仕事ではGitHub Copilot / Notion AIに助けられている人間 ● AIにデータはガンガン渡すよ…！派 X / GitHub : @gatchan0807 最近の悩み ● Gemini Advancedの謎なタイミングで出力制限に引っかかる問題 ● Geminiがトークン数増えすぎると、突然「あががばば<hhead><hhead>…」みたいな感じでぶっ壊れる問題 © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 2

10.

11.

https://speakerdeck.com/base/basebank

12.

13.

14.

#FullstackAIDev2024 SLMの時代の幕開けついにデバイス上で動かす（オフラインでも動く）言語モデルが実用化されはじめてきた Gemini Nano on Android Apple Intelligence https://ai.google.dev/gemini-api/docs/get-started/an https://developer.apple.com/jp/apple-intelligence/ droid_aicore © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 14

15.

#FullstackAIDev2024 おさらい - LLMとSLMの違い LLM : Large Language Model （大規模言語モデル） ● 生成AIの基礎技術になっている、機械学習モデルの一つ ● 大量のテキストデータを元に学習しているので作る時にも、使う時にもコンピュータリソースがめっちゃ必要 ○ ● © 2012-2024 BASE, Inc. なので、基本的にサーバーにモデルを設置して、APIを立ててリクエストする形になる（= オンラインでないと使えない）その分、利用者目線ではリッチな体験が得られたり、かんたんに使い始めることができる「オフラインでも TypeScriptから使える AI」 15

16.

#FullstackAIDev2024 おさらい - LLMとSLMの違い SLM : Small Language Model （小規模言語モデル） ● “ Small Language Model ” の略称がメインストリーム * ● 「LLMに比べて小規模」という意味なので、以下のような特徴がある ○ 応答速度が速い（アクセスするデータ範囲が狭く、応答が速くなりやすい） ○ 開発者目線：特定のタスクに対しての精度が高くしやすい ○ モデルを使う時に必要なコンピュータリソースが少ない ○ なので、デバイス上におくことができる。 * 諸説あり。 Specialized Language Model（特化型言語モデル）という説も © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 16

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

#FullstackAIDev2024 それ、もうちょっと詳しく教えて現状、Chrome上で組み込みで使えるAIはこんな感じ Translator API Language Detector API Summarizer API ラウザでテキストをリアルタイム特定のテキストで使用されている箇条書きリストなど）でさまざまなで翻訳言語を特定要約を生成ローカル AI モデルを使用し、ブ © 2012-2024 BASE, Inc. さまざまな長さと形式（文/段落/ 「オフラインでも TypeScriptから使える AI」 27

28.

29.

30.

#FullstackAIDev2024 Gemini Nano in Chromeの使い方個人で試した簡易アプリケーションとソースコード Googleのエンジニアが（ここは探索APIのPrompt APIでGemini Nanoを直用意したデモ環境もあり接使う形で実装） ● https://gatchan0807.github.io/sandbox-by-remi x-spa/gemini-nano/english-word-history ます https://chrome.dev/web-ai-demo s/prompt-api-playground/ ● https://github.com/gatchan0807/sandbox-by-re mix-spa/tree/main/app/features/gemini-nano © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 30

31.

32.

33.

#FullstackAIDev2024 Gemini Nano in Chromeのステータスオリジントライアル今はどこでもGoogle（Chrome）に登録した特定誰でも使えるドメインのサービスではユーザーが何わけではないもしなくても使えるよ！ EPP (Early Preview Program) 近い将来使えそう Googleに問い合わせてね！サポートエンジニアと一緒にこの機能を作っていこう！まだまだ気軽に使えなそう © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 33

34.

#FullstackAIDev2024 Gemini Nano in Chromeの使い所既存のフロントエンド処理のように、サーバーサイドの処理を補完する用途 ● Server-side AI: クラウド上にあるAI（HTTPリクエストをして利用するもの） ● Client-side AI: Chrome組み込みのAI（ブラウザAPIを呼び出して利用するもの）がメイン元々、Google I/Oでの発表時は「オンデバイスAI」という表記だったのですが、「Client-side AI」に表記を変わったのでこの概念が説明しやすくなりました © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 34

35.

#FullstackAIDev2024 機能の事例・アイデア ● Google I/Oでは「Adobe」「CyberAgent」のデモ画面が公開 ○ Adobeの方はブラウザ上のPhotoShopで画像の背景生成 ○ ● CyberAgentの方はアメーバブログの編集画面で記事タイトルの生成 AI機能をClient-side AIで作り、お試し・無料版として提供する形 ○ 有料のAI機能を買う前に試せるフリーミアム体験を作るというビジネス価値がありそうな利用アイデア ● Google主催の組み込みAIを使い方を考えるハッカソンがあるので、アイデア募集中…！ © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 35

36.

#FullstackAIDev2024 機能の事例・アイデア Translator API Language Detector API Summarizer API ラウザでテキストをリアルタイム特定のテキストで使用されている箇条書きリストなど）でさまざまなで翻訳言語を特定要約を生成オフラインでも、チャット欄の表示や送信内翻訳が必要かの判定を柔軟かつ簡易的な要約を無料で提供して、容が母国語になるような翻訳機能精度高く実現させる機能記事の内容への興味をより高める機能ローカル AI モデルを使用し、ブ © 2012-2024 BASE, Inc. さまざまな長さと形式（文/段落/ 「オフラインでも TypeScriptから使える AI」 36

37.

#FullstackAIDev2024 Gemini Nano in Chromeの注意点 ⚠ ● ストレージ要件が結構大きい物を要求するので、ダウンロード中の体験を作り込むのと、 PCスペックの但し書きは大事そう ● ○ 最低でもPCに22GBの空き領域がないとダウンロードできない ○ ダウンロード済みでも、空き容量が 10GBを切ったタイミングで自動的に削除される 2024年11月現在、Prompt APIからの出力が英語しか許されておらず英語以外を出そうとするとエラーになる ○ 英語以外が出そうになったタイミングで throwしてくるので、エラーハンドリングが必要 ○ ただ、現在それ以外の言語のテストや生成結果の品質担保を準備しているところなので、いずれ問題なく日本語も出せるようになる見込み ○ © 2012-2024 BASE, Inc. たまにすり抜けてヒンディー語の単語とか出ることはある（？）「オフラインでも TypeScriptから使える AI」 37

38.

39.

#FullstackAIDev2024 まとめ① ● iOS / Androidにデバイス上で動く小規模の AIが来るように、 Chromeにも小規模 AIが来る！ ○ これは JavaScript / TypeScript から使えるので、気軽に試しやすい！ ● ただ、モデルサイズは一定大きく、制約も多いので銀の弾丸にはならない ● 小規模モデルは非構造な自然言語を扱うのが上手なので（それ以外のチューニングは今後に期待）翻訳 / 言語判定 / 要約の機能などが早期にプロダクトに組み込みやすそう ○ © 2012-2024 BASE, Inc. 自分たちでプロンプトをいじる形の実装は、今のところ満足にはできなさそう「オフラインでも TypeScriptから使える AI」 39

40.

#FullstackAIDev2024 まとめ② ● AIモデルをデバイスにあらかじめアプリのように落としておく未来もそう遠くはなさそう ○ ● プロダクト（ビジネス）の意思決定時にこういうのも選択肢に入ると良い👍 RaycastからGemini Nano in ChromeをChrome拡張経由で使えないかな？ってちょびっと調べてみたけどダメだった 😢 ○ RaycastからはServer-side AIを使うのが一般的になりそう ○ ローカルでLlamaとかを立てて、そこにリクエストする形ならできるので、 macOSアプリでLlamaをボタンひとつで起動できるものとかがあると嬉しいな… © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 40

41.

42.

#FullstackAIDev2024 Recruitment Information BASE BANKで一緒に働くメンバーを大募集中！ Our Mission 個人やスモールチームの金融をかんたんにし、挑戦がめぐる世の中に BASE BANKチーム紹介資料はこちらフルサイクルエンジニア、 OKRと野望制度、 Go / Python / Next.js / Vue.js、YELL BANK以外にも金融関連の複数事業を提供し、新規サービスも開発中！面白いよ！ぜひNetworkingの時間などにお気軽にお声がけください！ © 2012-2024 BASE, Inc. 「オフラインでも TypeScriptから使える AI」 42

43.

#FullstackAIDev2024 appendix スライド内の各図の参照元 / 引用元 : ● Gemini Nano in Chromeの最新 API仕様 ○ ● Google I/O 2024 Developer Keynote ○ ● https://developer.chrome.com/docs/ai?hl=ja 「Client-Side AI」についての解説 ○ ● https://www.youtube.com/live/ddcZnW1HKUY?si=O7Hm-ytDJLSA76mC Gemini Nano in Chromeの情報が集まったポータルページ ○ ● https://docs.google.com/document/d/1VG8HIyz361zGduWgNG7R_R8Xkv0OOJ8b5C9QKeCjU0c/edit?tab=t.0 https://developer.chrome.com/docs/ai/client-side?hl=ja 各種APIのステータスがまとまった表 ○ © 2012-2024 BASE, Inc. https://developer.chrome.com/docs/ai/built-in-apis?hl=ja 「オフラインでも TypeScriptから使える AI」 43