U-ZERO TechBlogPublicationへの投稿
🐥

WebLLMの可能性：キツい言葉をマイルドに

U-HISAPI
に公開
webllm
tech

※これはU-ZERO Advent Calendar 2025の3日目の記事です。前日の記事はこちら。
https://zenn.dev/u_zero/articles/468c8838bdf1c6

はじめに

AIモデルの最新トレンド：小型化とオープン化の波

スケーリング則によると、学習データのサイズ、計算量、パラメータ数が増えれば増えるほどLLMの性能が向上するとされ、AI各社のフラッグシップモデルは大規模化にしのぎを削っています。

しかし、Stanford HAIの『AI Index Report 2025』によると、モデルの大規模化の一方で以下のような傾向が読み取れます。

  • 小型モデルの高性能化: MMLUベンチマークが60%を超える最小モデルは、2022年ではPaLMの5,400億パラメータだったのに対し、2024年では、Phi-3-miniが38億パラメータで同じパフォーマンスを達成しました。これは2年間でモデルサイズが142分の1に削減されたことを意味します。
  • オープンウェイトモデルの高性能化: オープンウェイトモデル（重みを公開しているモデル）の性能がクローズドモデル（非公開のモデル）に追いついています。クローズドモデルとオープンウェイトモデルの性能差が、2024年1月の8.0%から2025年2月までにわずか1.7%にまで縮小しました。

従来のLLMは巨大で計算量も重く、大規模なサーバーやGPUが必要でした。しかし、小型で効率の良いオープンウェイトモデルが台頭したことで、クラウドではなくユーザーの端末内で動作する 「オンデバイスAI」 の実現性が高まっています。

オンデバイスAIのメリット

オンデバイスAIにはクラウドAIにはないメリットがあります。

  • プライバシー保護: サーバーにリクエストを送信しないため、個人情報や機密データでも安全に処理できます。
  • コスト削減: サーバー側のGPUインフラや推論コストが不要です。ユーザーが増えてもサーバーの負荷が増えることがありません。
  • 低レイテンシー: ネットワークによる遅延がないため、リアルタイムの応答が可能です。

WebLLMとは

https://webllm.mlc.ai/

WebLLMは、LLMをブラウザ内で直接実行できるライブラリです。OpenAI APIに似たインターフェイスなので、OpenAIの感覚で、簡単にオンデバイスAI環境を構築できます。

ブラウザで実行できるということは、前述のオンデバイスAIのメリットに加えて、以下のメリットがあります。

  • インストール不要: ブラウザだけでLLMが動くので、アプリのインストールが不要です。
  • マルチプラットフォーム: ブラウザがWebGPUに対応していれば、OSなど特定の環境に依存しません。

高速実行を支える技術

WebGPU

WebGPUは、ブラウザからGPUに直接アクセスするための新しいAPIで、Chrome 113以降など、主要なブラウザで対応しています。これにより、ブラウザ上でも高速な推論（ネイティブ実装の約80%の性能）を実現しています。

MLC (Machine Learning Compilation)

MLC (Machine Learning Compilation)は、LLMをローカルで実行できるように、変換、最適化する仕組みです。WebLLMはMLCで最適化されたモデルを利用します。https://mlc.ai/models にあるプリビルドされたモデルを使うか、自前のモデルをMLCで変換することができます。

実演：WebLLMを活用した「フィードバックのマイルド変換」デモ

U-ZEROでは、エンゲージメント向上を目的としたさまざまなプロダクトを開発しています。会社や上司・部下・同僚にフィードバックをすることもその一つです。今回は、WebLLMの「サーバーに送信されない」というメリットを活かし、入力したフィードバックをマイルドに変換するデモを作成しました。

サンプルコード

  1. モデル初期化

    const engine = await CreateMLCEngine("gemma-2-2b-jpn-it-q4f16_1-MLC", {
  initProgressCallback: (progress) => {
    setLoadProgress(progress.text);  // 進捗表示
  },
});

    使用可能なモデルの完全なリストはsrc/config.tsにあります。この中で、日本語が得意そうなものをいくつか試してみました。

    モデルID 必要VRAM 低リソース対応[1]
    gemma-2-2b-jpn-it-q4f16_1-MLC 1.9GB ⭕
    gemma-2-9b-it-q4f16_1-MLC 6.4GB ❌
    gemma-2-2b-it-q4f16_1-MLC 1.9GB ❌
    Llama-3.2-3B-Instruct-q4f16_1-MLC 2.3GB ⭕
    Llama-3.1-8B-Instruct-q4f16_1-MLC 5.0GB ❌

    主観的な評価になりますが、今回の用途では、gemma-2-2b-jpn-it-q4f16_1-MLCが精度とサイズのバランスが良いように感じました。

  2. ストリーミングレスポンス

    const response = await engine.chat.completions.create({
  messages: [
    {
      role: "system",
      content:  "あなたは日本語の言葉遣いを改善する専門家です。"  +
      "必ず日本語で回答してください。"  +
      "乱暴な言葉や批判的な表現を、丁寧でマイルドな建設的表現に変換してください。"
    },
    {
      role: "user",
      content:  `以下の文章をマイルドに変換してください：\n\n${text}`
    }
  ],
  stream: true,  // リアルタイム表示
});

for await (const chunk of response) {
  // トークンごとに表示更新
  const content = chunk.choices[0]?.delta?.content || "";
  result += content;
  setOutputText(result);
}

デモの特徴

  • プライバシー保護: このデモでは、入力内容が一切サーバーに送信されません。すべての処理がブラウザ内で完結するため、個人的な意見も安心して入力できます。
  • リアルタイム変換とUXの向上: タイピング停止後1秒で自動変換を開始するようにしました。従来のサーバー型LLMでは、ネットワークレイテンシーやAPIコストといった制約からリアルタイム変換は困難でしたが、WebLLMにはこれらの制約はありません。ユーザーは文章の途中でも、結果をすばやく確認できます。
  • ストリーミング表示: 変換結果は、トークン単位でリアルタイムに更新されます。ChatGPTのタイピング効果のように、体感的な待ち時間を短縮しています。

これなら、うっかり乱暴な言葉を使ってしまっても、人間関係を損なうことはありません。

まとめ：WebLLMの「メリット」と「実用化の課題」

デモを作成してみて、WebLLMの良さを体感することができました。しかし、現時点では課題の方が多く、U-ZEROのプロダクトに導入するという判断は難しいと考えています。

WebLLMのメリット

  • プライバシー保護
  • コスト削減
  • 低レイテンシー

WebLLMの課題

  1. ブラウザ互換性の課題: WebLLMを利用するには、WebGPU対応ブラウザが必要です。現状では約20%[2]のユーザーが利用できない環境にあります。
  2. 初回ロード時間の課題: モデルのダウンロードには数分かかります。2回目以降はキャッシュを利用するため早くなるものの、ユーザー体験の低下や離脱率の増加につながる可能性があります。
  3. メモリ制約の課題: ブラウザでは、割り当てられたVRAMに上限があるため、大型モデルを使用することができません。この制約は、特にVRAM容量が少なく、システムメモリを共有するモバイルデバイスではさらに厳しくなります。
  4. モデル品質の課題: ブラウザで動作する小型モデルの品質は、急速に向上したとはいえ、最新の大型モデルには及びません。

導入の判断基準：どのようなケースでWebLLMを選ぶべきか？

WebLLMは、プライバシー保護、コスト削減、およびリアルタイム性の高い応答が重要となる場合に適しています。一方、複雑な推論や高度な品質、大規模なデータ処理が必要な場合は、従来のサーバー側LLMが有利です。実用的なアプローチとして、WebLLMの瞬時の処理とサーバー側の高品質な実行を組み合わせたハイブリッド型も有効な選択肢になりそうです。

ところで、このようなデモを作っておいてなんですが、フィードバックを行う際は、非難するのではなく、相手の成長を願って建設的なメッセージを伝えることが不可欠です。

AIに頼らず、常に丁寧で前向きなフィードバックを心がけましょう。

https://books.kobunsha.com/book/b10130390.html

脚注

  1. https://github.com/mlc-ai/web-llm/blob/main/src/config.ts の分類に基づきます ↩︎

  2. caniuse.com 2025年12月現在 ↩︎

U-ZERO TechBlog
U-ZERO TechBlogPublication

Discussion