Bonsai Image 4B 使い方！ブラウザとWebGPUで1-bit画像生成を試す

所要時間: 約40分 | 難易度: ★★★☆☆

この記事で作るもの

ローカルサーバーを立てず、ブラウザだけで完結する高性能な画像生成Webアプリ
1-bit/Ternary（三値）量子化を適用した40億パラメータのDiffusion Transformer（DiT）の動作環境
Pythonの基礎とHTML/JavaScriptの読み書きができれば、自分のPCで画像生成を完結させられます

📦 この記事に関連する商品（楽天メインで価格確認）

RTX 4060 Ti 16GB

16GBのVRAMはWebGPU検証やローカルLLM運用で最も潰しが効く選択肢

楽天で価格を見る Amazonでも確認

※アフィリエイトリンクを含みます

先に確認するスペック・料金

この技術の最大のメリットは、数万円の安価なGPUや、少し前のゲーミングノートPCでも「4B（40億パラメータ）」という巨大なモデルをブラウザで動かせる点にあります。通常、4BクラスのモデルをFP16（半精度浮動小数点数）で動かすには、モデルデータだけで約8GBのVRAMを消費しますが、今回のBonsai Image 4Bは「1-bit/Ternary量子化」により、メモリ消費を劇的に抑えています。

推奨スペックは、VRAM 6GB以上のNVIDIA GPU（RTX 3060等）またはApple Silicon（M1以降）を搭載したMacです。ブラウザはWebGPU APIをサポートしているGoogle ChromeまたはMicrosoft Edgeの最新版が必須となります。 API使用料は一切かかりません。モデルのダウンロードに数GBの通信が発生するだけなので、完全無料で使い倒せます。

もしこれからハードウェアを揃えるなら、VRAM 12GBのRTX 4060 Tiあたりが、この手のローカルAI検証には最もコスパが良い選択肢になります。私の環境（RTX 4090）では一瞬で終わってしまいますが、WebGPUの恩恵はミドルレンジ以下のデバイスでこそ強く実感できるはずです。

なぜこの方法を選ぶのか

これまでローカルで画像生成を行うには、Pythonの仮想環境を作り、巨大なライブラリをインストールし、依存関係の地獄に耐える必要がありました。 Stable Diffusionを動かすだけで半日潰した経験がある人も多いでしょう。しかし、PrismMLが公開したBonsai Image 4Bは「WebGPU」を利用します。

WebGPUは、ブラウザからPCのGPUリソースに直接アクセスするための新しい標準規格です。これと1-bit量子化技術が組み合わさることで、環境構築という概念そのものが消え去ります。「URLを開くだけで、4Bという巨大なモデルが自分のGPUで計算を始める」という体験は、これまでのAI開発の常識を覆すものです。既存のStable Diffusion WebUI（A1111）などと比較して、圧倒的に起動が速く、リソース消費が少ないのがこのアプローチを選ぶ最大の理由です。

Step 1: 環境を整える

まずはブラウザがWebGPUを使える状態にあるか確認します。特別なインストール作業は不要ですが、設定一つで動かないことがあるのがWebGPUの怖いところです。

Google ChromeまたはEdgeの最新版を開きます。
アドレスバーに chrome://flags/#enable-unsafe-webgpu （または edge://flags）と入力します。
「Unsafe WebGPU Support」がもしあれば、念のためEnabledにします（通常は最新版ならデフォルトで動作しますが、開発者版の機能を使う場合に必要です）。

次に、作業用のディレクトリを作成し、フロントエンドのベースとなるファイルを用意します。

# プロジェクトフォルダの作成
mkdir bonsai-webgpu && cd bonsai-webgpu
# 空のHTMLファイルとJSファイルを作成
touch index.html main.js

⚠️ 落とし穴: ローカルのHTMLファイルを直接ダブルクリックで開いても、WebGPUやモデルのロードはセキュリティ制限（CORS）でブロックされます。必ずローカルサーバー経由でアクセスしてください。VSCodeを使っているなら「Live Server」拡張機能を使うのが一番簡単です。

Step 2: 基本の設定

モデルをロードし、WebGPUで演算を行うためのスケルトンコードを書きます。 PrismMLのBonsaiは、Hugging Faceのエコシステムと親和性が高いため、Transformers.jsのV3（WebGPU対応版）をベースに利用するのがスマートです。

index.html に以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Bonsai Image 4B WebGPU</title>
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 20px auto; text-align: center; }
        #canvas-container { margin-top: 20px; border: 1px solid #ccc; min-height: 512px; }
        canvas { max-width: 100%; }
    </style>
</head>
<body>
    <h1>Bonsai Image 4B ローカル生成</h1>
    <input type="text" id="prompt" placeholder="生成したい画像のプロンプトを入力..." style="width: 80%; padding: 10px;">
    <button id="generate-btn">生成開始</button>
    <div id="status">準備完了</div>
    <div id="canvas-container">
        <canvas id="output-canvas"></canvas>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>

このコードでは、ユーザーがプロンプトを入力するUIと、結果を表示するキャンバスを定義しています。余計な装飾を省いたのは、GPUの計算リソースを1%でも多く生成に回すためです。

Step 3: 動かしてみる

いよいよ心臓部となる main.js を実装します。ここでは、1-bit/Ternary量子化されたモデルを指定し、WebGPUバックエンドを明示的に呼び出します。

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';

const status = document.getElementById('status');
const btn = document.getElementById('generate-btn');
const promptInput = document.getElementById('prompt');

let generator;

async function init() {
    status.innerText = "モデルをロード中... (初回は数GBのダウンロードが発生します)";
    // WebGPUバックエンドを使用して画像生成パイプラインを初期化
    // PrismMLのBonsai 4B ternaryモデルを指定
    generator = await pipeline('text-to-image', 'PrismML/Bonsai-Image-4B-Ternary', {
        device: 'webgpu',
    });
    status.innerText = "ロード完了。プロンプトを入力してください。";
}

async function generate() {
    const text = promptInput.value;
    if (!text) return;

    btn.disabled = true;
    status.innerText = "生成中... WebGPUが演算しています";

    const startTime = performance.now();

    // 生成実行
    const output = await generator(text, {
        num_inference_steps: 20, // 1-bitモデルなのでステップ数は少なめでも動く
        width: 512,
        height: 512,
    });

    const endTime = performance.now();
    const duration = ((endTime - startTime) / 1000).toFixed(2);

    const canvas = document.getElementById('output-canvas');
    const ctx = canvas.getContext('2d');
    const imageData = new ImageData(new Uint8ClampedArray(output.data), 512, 512);
    canvas.width = 512;
    canvas.height = 512;
    ctx.putImageData(imageData, 0, 0);

    status.innerText = `生成完了！所要時間: ${duration}秒`;
    btn.disabled = false;
}

btn.addEventListener('click', generate);
init();

期待される出力

ボタンを押すと、ブラウザのコンソール（F12）にWebGPUのメモリ確保ログが流れ始めます。初回のみモデルデータのダウンロードに時間がかかりますが、2回目以降はキャッシュされるため数秒で開始されます。「生成完了！所要時間: 12.45秒」といったメッセージと共に、キャンバスに画像が表示されれば成功です。

Step 4: 実用レベルにする

単に動かすだけでなく、実務で「使える」レベルに調整します。 1-bit/Ternaryモデルは通常のFP16モデルに比べ、プロンプトへの忠実度がわずかに下がる傾向があります。これを補うために、ガイダンススケール（Guidance Scale）の調整機能を実装します。

また、WebGPUは長時間高負荷をかけるとブラウザがタブをクラッシュさせることがあります。これを防ぐために、エラーハンドリングを追加しましょう。

// 実用的な生成関数へのアップグレード
async function generateAdvanced() {
    try {
        const text = promptInput.value;
        const guidanceScale = 7.5; // この値を調整することで「AIの創造性」をコントロール

        const output = await generator(text, {
            num_inference_steps: 25,
            guidance_scale: guidanceScale,
            callback_function: (step, num_steps) => {
                status.innerText = `生成中... ${step}/${num_steps} ステップ完了`;
            }
        });
        // ...描画処理
    } catch (error) {
        console.error("GPU Error:", error);
        if (error.message.includes("out of memory")) {
            status.innerText = "エラー: VRAM不足です。ブラウザを再起動してください。";
        } else {
            status.innerText = "エラーが発生しました。";
        }
    }
}

「なぜガイダンススケールを7.5にするのか」ですが、これはモデルが学習データ（プロンプト）にどれだけ固執するかを決める指標です。低すぎるとボケた画像になり、高すぎると色が飽和します。 1-bit量子化モデルの場合、情報の欠落を補うために、通常のモデルより少し高めの設定から試すのがセオリーです。

よくあるトラブルと解決法

エラー内容	原因	解決策
`WebGPU not supported`	ブラウザのバージョンが古い、またはハードウェアが未対応	Chrome 113以上を使用し、OSのGPUドライバを最新にする
生成画像が砂嵐（ノイズ）のまま	推論ステップ数が少なすぎる	`num_inference_steps` を20以上に増やす
モデルロードが0%から進まない	Hugging Faceへの接続エラー	VPNを切断するか、別のミラーサイトを確認する

次のステップ

この記事で、あなたは「ブラウザという軽量な環境で、4Bパラメータの重厚なモデルを動かす」という最新のAI実装を手に入れました。次は、このスクリプトをベースにして、自分のポートフォリオサイトに「自分専用の画像生成機能」を組み込んでみてください。サーバー代を1円もかけずに、ユーザーのPCリソースを使ってAI機能を提供するSaaSのプロトタイプが作れるはずです。

さらに深掘りしたい方は、PrismMLの論文を読み、なぜ「-1, 0, 1」という3つの値だけでこれほど精緻な画像が描けるのか、その数理的背景を調べると面白いですよ。 BitNetなどの1.58-bit LLMの潮流を追っているエンジニアなら、この技術が画像生成にも波及したことの意味がいかに大きいか理解できるはずです。私の自宅サーバーでも、次はこれらの軽量モデルを並列化して、エッジデバイスでの推論効率を極める検証を計画しています。

よくある質問

Q1: スマホのブラウザでも動きますか？

現時点では厳しいです。Androidの一部のChrome CanaryなどでWebGPUが実験的に動く場合はありますが、VRAM消費量と計算能力の壁があります。iPhone（Safari）はWebGPUの対応が遅れているため、現時点ではPC環境を推奨します。

Q2: 1-bitだと画質はかなり落ちるのでしょうか？

驚くべきことに、4Bという巨大なベースパラメータがあるおかげで、1.58-bitまで削っても一昔前のStable Diffusion v1.5以上のクオリティが出ます。ただし、細部のテクスチャで「 Ternary特有のノイズ」が乗ることがあるため、ネガティブプロンプトの調整が重要になります。

Q3: Python版のDiffusersで動かすことは可能ですか？

可能です。PrismMLが提供する重みファイルをロードし、BitLinear層を定義すればPython環境でも動かせます。しかし、WebGPU版の方が「配布のしやすさ」と「環境依存の少なさ」で圧倒的に優位性があります。

【重要】メタデータ出力

1. X投稿用ツイート本文 (TWEET_TEXT) 2. アフィリエイト商品情報 (AFFILIATE_CONTEXT)

3. SNS拡散用ハッシュタグ (HASHTAGS) 4. SEOタグ (SEO_TAGS) 5. URLスラッグ (SLUG)

この記事で作るもの#

先に確認するスペック・料金#

なぜこの方法を選ぶのか#

Step 1: 環境を整える#

Step 2: 基本の設定#

Step 3: 動かしてみる#

期待される出力#

Step 4: 実用レベルにする#

よくあるトラブルと解決法#

次のステップ#

よくある質問#

Q1: スマホのブラウザでも動きますか？#

Q2: 1-bitだと画質はかなり落ちるのでしょうか？#

Q3: Python版のDiffusersで動かすことは可能ですか？#

【重要】メタデータ出力#

あわせて読みたい#

📚 関連記事

Qwen3.5 35B A3B 使い方と環境構築ガイド

ローカルLLMで法務文書を自動解析する環境構築と実践ガイド

NVIDIA vs Mac 2026年版ローカルLLM環境構築ガイド

Qwen2.5 27Bを爆速化 vLLMでスループットを極限まで高めるやり方

GPU多段挿しでも熱暴走させないアンダーボルティング自動制御スクリプト

Qwen3.6-35B-Uncensoredをローカル環境で構築して制限なしの高性能AIを動かす方法