WebLLMを使ってブラウザ完結かつローカルLLMでFunction callingを試してみる

CRANK

前の記事wllama（Wasm binding for llama.cpp）を使ってローカルLLMを使ったダッシュボードを作った Chat — System + User を結合し、ストリーム出力（ask() in Chat.tsx）OpenAI 互換 Function Call — tools 配列 → tool_calls JSON（weatherTool 切替トグル）DL 進捗バー — initProgressCallback で重みロード％を表示（エンジン初期化ブロック）クライアントキャッシュ削除 — IndexedDB & CacheStorage をワンクリックで削除（clearCache()）モード切替 UI — ラジオボタンで Chat / Function を選択（Chat.tsx 冒頭 JSX）内部構成実行パスService‑Worker モードでは IndexedDB を CacheStorage に置き換え、fetch ストリームで読み込みを最適化。コード解剖（TypeScript + React）主要部分のみ抜粋。全文はリポジトリ参照。定数 & エンジン初期化const MODEL_ID = "Hermes-2-Pro-Mistral-7B-q4f16_1-MLC"; const eng = await CreateMLCEngine(MODEL_ID, { initProgressCallback: ({ progress }) => setProgress(progress), }); await eng.reload(MODEL_ID); Chat と Function‑Call の切替const baseReq = mode === "func" ? { messages: [{ role…