そんな今日この頃でして、、、

コード書いたり映画みたり。努力は苦手だから「楽しいこと」を探していきたい。

gemma4 e2bでブラウザ作業を便利にするChrome拡張作った

chromewebstore.google.com

transformer.jsとgemma4のe2b(e4b)モデルを使って、サーバへの通信を必要とせずローカル処理のみで閲覧しているページの情報を加工できるようなChrome拡張を作ってみた。


機能紹介

必要な箇所を選択してコンテキストメニューから起動

箇条書き部分を選択してテーブル化してもらった

  • 選択した文言の翻訳
  • 文章の要約
  • テーブルをマークダウン形式の表に変換(チャットへの転記なんかで便利なのでは)

といったLLMらしい機能に加えて、画像や音声、映像入力に対応したモデルであることを生かして

  • 音声の書き出し
  • 画像の文字列の抜き出し
  • 映像の内容の書き出し

といったことを完全にオンデバイスで実現!(性能的にはおもちゃみたいなもんだけど)

ページ内の再生音声を書き起こし


元々はOllamaと疎通して同じ機能を実現する拡張を作っていたのだけど、動作環境を選ぶし説明するのも面倒なので完全に個人用で使っていたもの。

それがgemma4がリリースされて色々いじってみたら、エッジモデルでも割とちゃんと動きそうじゃん!ということで作ってみた。

初手にモデルのダウンロードでそれなりに時間がかかるのと、WebGPUを使った処理になるので今時のそこそこ性能あるPCである必要はあるが、オンデバイスでここまで実用にたえる動作ができるのかと感動できると思う。


ネタ被り?

やっぱりみんな同じようなこと考えるよねーってことで、同じくgemma4とtransfomer.jsを使った拡張が近い日取りでリリースされている。

pc.watch.impress.co.jp

流石によくできていて、tool useによるブラウザ操作系が充実しているあたり「なるほどなあ」って思った。


さらにChrome公式にGeminiを組み込んだ機能を先日リリースされていて、プライバシー的なところを気にしなければこれはかなり便利に使える気がする。

gemini.google


ただ、これらはどちらかというと「ブラウザ操作」を便利にする方向性に見えるので、それに対しては今回作ったChrome拡張は「表示コンテンツの解析・変換」の方に軸足を置いてるところはちょっとした差別化ポイントかもしれない。


Gemma4のエッジモデルすごくね?

せっかくの機会なんでLLM雑語り。

gemma4リリースのちょっと前にwasmでのllm動作に興味があってちょっとしたサンプルチャットアプリをつくってみたんですよ。

blue1st.github.io

で、動かしてみるとパラメータ数1桁Bのモデルは変にループしたり外国語が混入したりで、「流石に実用レベルにはならんかー」てのが当時の印象だったんですな。


それが、gemma4がリリースされて(どちらかというとLLM性能というよりは映像入力に注目して)試しにサンプルアプリ作って動かしてみたところ、「あれ、意外と流暢に日本語でやり取りできる!?」という驚きがあり、今回のChrome拡張作成に繋がったわけですな。

blue1st.github.io