DuckDB-wasm×wllamaでJSONを可視化＆要約する軽量ダッシュボードを作った

リポジトリ

https://github.com/tesla0225/wasm-llm-poc

Star いただけると励みになります 🙌

---

何をしているか

• DuckDB‑wasm で JSON → SQL 集計
  https://www.npmjs.com/package/@duckdb/duckdb-wasm
• Vega‑Lite で棒グラフ（中身はD3.js）
  https://vega.github.io/vega-lite/
• wllama (Gemma 2B 日本語) で 3 行要約
  https://www.npmjs.com/package/@wllama/wllama/v/1.5.0
• モデルはあるふさんの以下を推奨
  https://huggingface.co/alfredplpl/gemma-2-2b-jpn-it-gguf
• 依存はすべて npm、モデルは gguf を /public/models に置くだけ

---

流れ

1. フォルダ選択 → JSON 取込
2. グラフが即レンダリング
3. 数秒後に LLM 要約が表示

---

依存ライブラリ

pnpm add react react-dom vega-embed apache-arrow
pnpm add @duckdb/duckdb-wasm @wllama/wllama
pnpm add -D vite typescript @types/react @types/react-dom

• DuckDB‑wasm 0.9.2
• @wllama/wllama 2.3.1 + gemma-2-2b-jpn-it.Q4_K_M.gguf (~1.6 GB)

---

実装ポイント

DuckDB: JSON をテーブル化

// 1本目でスキーマ確定
await db.registerFileText('f0.json', await first.text());
await conn.query(`
  CREATE OR REPLACE TEMP TABLE tmp AS
  SELECT * FROM read_json_auto('f0.json');
`);

// 2本目以降 INSERT

Vega‑Lite: 10 行でグラフ

await embed(chartRef.current, {
  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
  data: { values: data },
  mark: 'bar',
  encoding: {
    x: { field: 'category', type: 'nominal', sort: '-y' },
    y: { field: 'n', type: 'quantitative' }
  },
  width: 400,
});

wllama: 要約

const res = await llm.createCompletion(
  `以下の集計結果を 3 行で要約してください。\n${JSON.stringify(data)}`,
  { nPredict: 128, stream: false }
);
setSummary(typeof res === 'string' ? res : res.content);

感想

現状でブラウザ完結で何ができるかを検証したかったので、一応動いてよかった

よかったらフォローお願いします

https://x.com/tesla0225