公式発表Hugging Face

Hugging Face、ブラウザ上でLLMの構造化出力を実現する「Transformers.js v4.3」を公開

Hugging Faceは、ブラウザ上でLLMを実行できるJavaScriptライブラリ「Transformers.js」の最新版v4.3をリリースし、開発者から強く要望されていた「構造化出力(Structured Output)」のサポートを開始しました。新たに提供される専用パッケージにより、開発者はサーバーを介さず、ユーザーのデバイス上で完全にローカルかつ確実にフォーマットされたJSONやテキストを生成できるようになります。

AI解析: gemini-3.5-flash

元動画: Structured Output in the browser with Transformers.js 4.3

3秒でわかる要点

  1. 1Transformers.js v4.3にブラウザ上で動作する構造化出力機能が追加されました
  2. 2新パッケージによりJSON Schemaや正規表現に完全準拠したテキスト生成をローカルで実現します
  3. 3トークン生成プロセスに割り込む方式のためパースエラーを原理的に排除できます

何が発表されたのか

Hugging Faceは、ブラウザ上で機械学習モデルを直接実行できるJavaScriptライブラリ「Transformers.js」の最新バージョンである「v4.3」において、開発者コミュニティから最も要望の多かった機能の一つである「構造化出力(Structured Output)」のサポートを開始しました。本機能は、新たに公開された専用のnpmパッケージである「@huggingface/transformers-structured-output」を通じて提供されます。これは研究段階の実験的なプロジェクトではなく、すでに一般提供(GA)が開始されている実用的なアップデートです。

従来のブラウザ向けローカルLLM(大規模言語モデル)の実行環境では、モデルが出力するテキストの構造を制御することが難しく、意図しないフォーマットで出力された結果、アプリケーション側でのJSONパースエラーが頻発するという課題がありました。今回のアップデートは、この課題を根本から解決する仕組みをブラウザ環境に提供するものです。

発表された機能・アップデートの全容

新パッケージ「@huggingface/transformers-structured-output」の提供

Hugging Faceは、構造化出力を実現するための独立したヘルパーパッケージとして「@huggingface/transformers-structured-output」をnpm上で公開しました。このパッケージの最大の特徴は、ランタイムの依存関係(runtime dependencies)を一切持たない軽量な設計である点です。ブラウザ環境やNode.js環境を問わず、既存のプロジェクトに容易に組み込むことができます。動画内で示されたドキュメントによると、このパッケージはTransformers.js本体とは切り離された独立したユーティリティとして動作し、開発者は必要なスキーマ定義をインポートしてプロセッサを初期化するだけで、構造化出力を有効にできます。

トークン生成プロセスへの直接介入(フック)

本機能の技術的な核心は、LLMのテキスト生成プロセス(generation process)に対してリアルタイムに介入する仕組みにあります。具体的には、モデルが次のトークン(単語の断片)を予測して出力するたびに、このパッケージがプロセスにフックし、出力される可能性のあるトークン群を監視します。そして、指定されたJSON Schemaや正規表現のルールに違反するトークンの選択確率を強制的にゼロへと書き換えます。

(編集部注:これは一般に「ロジット・プロセッサ(Logits Processor)」と呼ばれる技術をブラウザ側で実装したものです。出力されたテキストを後から検証するのではなく、生成される一歩手前の段階で不適切な候補を排除するため、無駄な生成処理が発生せず、100%確実に指定フォーマットに準拠させることができます。)

JSON Schemaによる厳密なオブジェクト定義

開発者は、標準的なJSON Schema(Draft 2020-12等)を用いて、LLMに出力させたいデータの構造を厳密に定義できます。動画内のスライドに示されたコード例では、オブジェクトのプロパティとして文字列型の「answer」と、ブール値型の「success」を定義し、これらを必須フィールド(required)として指定する例が紹介されています。さらに、追加のプロパティ(additionalProperties)を許可しない(false)に設定することで、LLMは必ずこの構造に沿ったJSON文字列のみを生成するようになります。括弧の閉じ忘れや、キー名のスペルミス、型違反などは原理的に発生しません。

正規表現(Regex)によるテキストパターンの強制

JSONのような複雑なオブジェクト構造だけでなく、よりシンプルなテキストパターンの強制もサポートしています。動画内では、正規表現(Regex)を用いた制約の例が紹介されています。例えば、日付フォーマット(YYYY-MM-DD形式)を指定する正規表現をプロセッサに渡すことで、LLMは自由な文章を生成することを禁じられ、指定された日付形式に完全に一致する文字列のみを生成します。これにより、特定のコード体系、電話番号、郵便番号、あるいはあらかじめ定義された選択肢(Enum)のいずれかのみを出力させたいといった、フロントエンドの入力バリデーションに直結する処理をLLMに直接実行させることが可能になります。

性能・ベンチマーク

本動画内では、具体的な処理速度(ミリ秒単位のレイテンシ)やメモリ消費量などのベンチマーク数値は提示されていません。しかし、技術的なアプローチから、そのパフォーマンス特性を以下のように整理できます。

評価項目 特性・仕組み メリット(編集部注)
生成効率 トークン生成時のロジット制御 不正なトークンの生成を未然に防ぐため、後から再生成(リトライ)するコストがゼロになります。
メモリ使用量 依存関係なしの軽量パッケージ ランタイム依存関係がないため、ブラウザのメモリフットプリントへの影響は極めて軽微です。
実行環境 WebGPU / WASM デバイスのローカルGPU(WebGPU)を活用することで、サーバー通信を伴わずに高速な推論と構造化を同時に行います。

競合サービスとの比較

現在、多くの開発者がLLMの構造化出力を実現するために、OpenAIなどの商用APIが提供する機能を利用しています。これらと、今回のTransformers.js v4.3によるローカル実行環境との違いを比較します。

比較項目 Transformers.js v4.3(本発表) OpenAI Structured Outputs(競合・編集部注) Anthropic Tool Use(競合・編集部注)
実行場所 ユーザーのブラウザ(ローカルデバイス) 運営会社のクラウドサーバー 運営会社のクラウドサーバー
通信コスト 無料(初期のモデルダウンロードのみ) 従量課金(トークン数に応じたAPI利用料) 従量課金(トークン数に応じたAPI利用料)
ネットワーク接続 不要(オフライン動作可能) 必須(常時インターネット接続が必要) 必須(常時インターネット接続が必要)
プライバシー 極めて高い(データがデバイス外に出ない) 規約に準ずる(サーバーへの送信が必要) 規約に準ずる(サーバーへの送信が必要)
処理速度 ユーザーのデバイス性能に依存 サーバーの混雑状況やネットワーク遅延に依存 サーバーの混雑状況やネットワーク遅延に依存
スキーマ準拠度 100%(トークンレベルでの強制) 100%(JSON Mode / Structured Outputs) 高い(プロンプトおよびAPI側での制御)

(編集部注:OpenAIやAnthropicなどのAPIは非常に強力ですが、ユーザー数が増えるほどAPIコストが膨らむという課題があります。Transformers.jsを用いたブラウザ内完結のアプローチは、コスト面およびプライバシー面で圧倒的な優位性を持っています。)

料金・提供プラン

本機能は、オープンソースのライブラリおよびパッケージとして提供されているため、完全に無料で利用可能です。

  • ライセンス: オープンソース(Transformers.jsおよび関連パッケージはApache 2.0などの寛容なライセンスで提供されています)。
  • API利用料: なし。ユーザーのデバイスのリソース(CPU/GPU)を使用して推論を行うため、開発者がサーバー維持費やAPI利用料を支払う必要はありません。
  • 提供開始時期: すでにnpm上で @huggingface/transformers-structured-output としてリリースされており、今日からすべての開発者が利用可能です。

日本から使う方法

日本の開発者がこの機能をプロジェクトに導入するための具体的な手順は以下の通りです。

  1. パッケージのインストール Node.jsがインストールされた開発環境において、以下のコマンドを実行してパッケージを追加します。

    npm install @huggingface/transformers-structured-output
    

    あわせて、本体である @huggingface/transformers のバージョンが 4.3.0 以上であることを確認してください。

  2. スキーマの定義とプロセッサの初期化 JavaScript(またはTypeScript)のコード内で、出力させたいJSON Schemaを定義し、プロセッサをインスタンス化します。

    import { StructuredOutputProcessor } from '@huggingface/transformers-structured-output';
    
    const schema = {
      type: "object",
      properties: {
        answer: { type: "string" },
        success: { type: "boolean" }
      },
      required: [
    

動画のタイムテーブル

  • 0:00Transformers.js v4.3における構造化出力の追加
  • 0:13新しいnpmパッケージ「@huggingface/transformers-structured-output」の紹介
  • 0:23トークン生成プロセスへのフックによる構造化の仕組み
  • 0:32JSON Schemaを用いた構造化出力の定義方法
  • 0:36正規表現(Regex)を用いたテキストパターンの制約
  • 0:42npmでの提供と開発者コミュニティへのフィードバック要請

記事で紹介したツール

この機能を、いま自分の環境で試す

記事の内容は公式発表の要約です。実際の使い勝手は触ってみないと分かりません。多くは無料枠から始められます。

公式サイトで試す

提供: OpenAI

本記事は元動画の映像・音声をAIが解析して自動生成したものです。誤りが含まれる可能性があるため、正確な仕様・料金は公式発表をご確認ください。元動画を見る(解析モデル: gemini-3.5-flash)