nano-judgement.js

ES Modules（import）またはグローバル（window.NanoJudgement）からインスタンスを作成します。
📦 nano-judgement.js (ESM) をダウンロード

import { NanoJudgement } from './nano-judgement.js';

const judgement = new NanoJudgement({
  enableCache: true,          // キャッシュを有効化 (デフォルト: true)
  cacheStorage: 'session',    // 'session' (sessionStorage) または 'local' (localStorage)
  maxCacheGenerations: 1000,  // 最大1000世代のLRU保存 (古い順に自動破棄)
  includeReason: false,       // true にすると理由も出力 (Language Detector API で判定 & Translator API で翻訳)
  autoScan: false,            // JS側で手動制御する場合は false に設定可能
});

judgement.judge(choices, context, options) を呼び出します。選択肢には配列、または <select> 要素をそのまま渡せます。

// 選択肢の配列、または <select> 要素を指定可能
const choices = [
  { id: "A", name: "フルスクラッチ開発", description: "自由度が高いが納期1ヶ月以上" },
  { id: "B", name: "SaaS/ノーコード", description: "即日利用可能で安価だがカスタマイズに制約" },
  { id: "C", name: "外注特急依頼", description: "短納期だが費用が高額" }
];

const context = "予算はほぼゼロだが、来週までにプロトタイプを動かしたい";

// 判定実行 (Promise)
const result = await judgement.judge(choices, context, {
  includeReason: true,        // 理由を出力（Language Detector API で入力言語を判定し Translator API で自動翻訳）
});

console.log("最有力候補:", result.topChoice.name);  // "SaaS/ノーコード"
console.log("判定理由:", result.summaryReason);
console.log("キャッシュから復元:", result.fromCache); // true / false
console.log("全ランキング:", result.rankings);

attachLiveJudgement(element, choices, options) により、任意の入力枠に 2秒ルール＆25%変更チェック＆0文字即時停止の監視をプログラマブルに設定できます。

const textarea = document.querySelector('#customInput');
const selectEl = document.querySelector('#customSelect');

judgement.attachLiveJudgement(textarea, selectEl, {
  selectElement: selectEl,
  targetSelector: '#customResult'
});

judgement.preJudge(choices, context, options) をユーザーの入力中に呼んでおくと、裏側でバックグラウンド判定を開始します。
ボタン押下時に judgement.judge(...) を呼ぶと、先行判定が完了していれば待ち時間ゼロ（0ms）で即座に結果を取得でき、まだ判定中であれば二重実行せず進行中の判定完了を待機して即座に画面へ反映できます。

// ユーザーが入力枠にタイピングした時点で先行判定をキック（裏側で非同期実行）
textarea.addEventListener('input', () => {
  if (textarea.value.trim().length >= 5) {
    judgement.preJudge(choices, textarea.value);
  }
});

// 送信・判定ボタンが押されたとき
submitBtn.addEventListener('click', async () => {
  // 先行判定が完了していれば 0ms で即座に返却！
  // 先行判定中なら、二重実行せずその完了を待って即座に返却！
  const result = await judgement.judge(choices, textarea.value);
  showResult(result);
});

judgement.judge() の第2引数（Context）には、テキスト文字列だけでなく File や Blob オブジェクトをそのまま直接渡せます。
Chrome のマルチモーダル Prompt API 有効環境では、画像・音声の Blob / File そのものを Gemini Nano に直接入力して推論が行われます。テキストファイル（.txt, .json, .csv）の場合は内容が自動ロードされ、非対応環境でも安全にフォールバックします。

import { NanoJudgement } from './nano-judgement.js';
const judgement = new NanoJudgement();

// A. 画像ファイル（File オブジェクト）そのものを直接渡す
const fileInput = document.querySelector('#myFileInput');
const imageFile = fileInput.files[0]; // 例: 領収書.png, 障害画面.jpg
const result = await judgement.judge(choices, imageFile);
console.log("画像判定結果:", result.topChoice.name);

// B. 音声ファイル（File オブジェクト: .mp3, .wav, .m4a）そのものを直接渡す
const audioFileInput = document.querySelector('#myAudioInput');
const audioFile = audioFileInput.files[0]; // 例: call_recording.wav, voicemail.mp3
const audioResult = await judgement.judge('#supportPriority', audioFile);
console.log("音声仕訳結果:", audioResult.topChoice.name);

// C. テキストファイル（.txt, .json, .csv）そのものを直接渡す
const textFile = logFileInput.files[0]; // 例: server_error.log
const logResult = await judgement.judge('#priority', textFile);

マイクでの録音作業を行わなくても、既存の音声ファイル（.mp3, .wav, .m4a）をユーザーが選択またはドロップするだけで、オンデバイス判定が即座に実行されます。

const audioInput = document.querySelector('#audioInput');

audioInput.addEventListener('change', async () => {
  const audioFile = audioInput.files[0];
  if (!audioFile) return;

  // judge: 音声ファイルを直接渡してAI優先度判定 ＆ セレクトボックス自動連動
  const result = await judgement.judge('#supportPriority', audioFile, {
    includeReason: true // 理由も生成
  });

  console.log("ファイル名:", audioFile.name);
  console.log("AI判定結果:", result.topChoice.name);
  console.log("確信度スコア:", result.topChoice.confidence);
  console.log("判断理由:", result.summaryReason);
});

JavaScript コードを1行も書かずに、HTML属性を付与するだけでファイル選択（音声または画像）をセレクトボックスと自動連動させることができます。

<!-- 1. 音声ファイル（通話録音 .wav/.mp3）選択で即座にAI優先度判定 ＆ 連動 -->
<input type="file" accept="audio/*,.mp3,.wav,.m4a"
       data-nano-judgement
       data-judge-select="#supportPriority"
       data-judge-target="#audio-result">

<!-- 2. 画像ファイル選択で即座にAI仕訳＆セレクトボックス自動選択 -->
<input type="file" accept="image/*"
       data-nano-judgement
       data-judge-select="#expenseCategory"
       data-judge-target="#result-card">

<!-- 3. 領収書画像（クリックや差し替えで自動判定） -->
<img src="sample-receipt.png"
     data-nano-judgement
     data-judge-select="#expenseCategory"
     data-judge-target="#result-card">

画像や音声からの判定でも、デフォルト（パラメータ省略時）は速度優先のため根拠は生成・表示せず、値（最有力候補・確信度スコア）のみを高速に返却します。根拠を確認したい場合のみ、パラメータを明示的に指定します。

// 【デフォルト】速度優先: 値のみ高速返却（根拠なし・理由翻訳スキップ）
const fastResult = await judgement.judge(choices, fileOrSpeech);
console.log(fastResult.topChoice.name);  // "インフラ・サーバー開発費"（値のみ）
console.log(fastResult.summaryReason);   // undefined（生成スキップ）

// 【根拠を求める場合】includeReason: true を渡す（Language Detector API で入力言語を判定 ＆ Translator API で自動翻訳）
const detailedResult = await judgement.judge(choices, fileOrSpeech, {
  includeReason: true,
});
console.log(detailedResult.topChoice.name);  // "インフラ・サーバー開発費"
console.log(detailedResult.summaryReason);   // "領収書にAWSクラウド利用料が記載されているため"（根拠）

// HTML属性で根拠を求める場合は data-judge-reason="true" を付与
<button data-nano-judgement-speech 
        data-judge-select="#supportPriority"
        data-judge-reason="true">
  🎙️ 理由付きで音声判定
</button>

マイク録音中や画像解析中、判定完了時にカスタムイベントが発火するため、アニメーションやトースト表示などのUIフィードバックを簡単に実装できます。

const speechBtn = document.querySelector('[data-nano-judgement-speech]');

// 音声認識が開始された（マイク待機中）
speechBtn.addEventListener('nano-judgement-speech-start', () => {
  speechBtn.classList.add('recording-pulse');
  speechBtn.textContent = '🎙️ お話しください...';
});

// 判定完了時
speechBtn.addEventListener('nano-judgement-complete', (e) => {
  speechBtn.classList.remove('recording-pulse');
  speechBtn.textContent = '🎙️ 音声で話して判定';
  const { result, isSpeech, speechTranscript } = e.detail;
  if (isSpeech) {
    console.log('発話内容:', speechTranscript);
  }
});

// 音声認識エラー時（マイク不許可やタイムアウト等）
speechBtn.addEventListener('nano-judgement-speech-error', (e) => {
  speechBtn.classList.remove('recording-pulse');
  speechBtn.textContent = '🎙️ 音声で話して判定';
  alert('音声認識エラー: ' + e.detail.error.message);
});

ユーザーがレシート画像（PNG/JPEG/SVG）を画面上にドロップまたは選択すると、自動で Gemini Nano へ画像を直接渡し、勘定科目セレクトボックス（旅費交通費・消耗品費・会議接待費等）を瞬時に自動選択する完全な実装例です。

<!-- 1. HTML構造: ドロップゾーン ＆ 勘定科目セレクトボックス -->
<div id="dropZone" style="border:2px dashed #38bdf8; padding:2rem; text-align:center; border-radius:12px; cursor:pointer;">
  <p>📂 領収書・レシート画像をここにドラッグ＆ドロップ、またはクリックして選択</p>
  <input type="file" id="receiptInput" accept="image/*" style="display:none;">
</div>

<select id="accountCategory" style="margin-top:1rem; padding:0.5rem; width:100%;">
  <option value="">-- AIが自動判定して選択します --</option>
  <option value="travel" data-description="電車・タクシー・新幹線・航空券等の移動交通費">旅費交通費</option>
  <option value="supplies" data-description="PC周辺機器・文房具・事務消耗品・コピー用紙">消耗品費</option>
  <option value="entertainment" data-description="取引先との会食・カフェでの商談打ち合わせ代">会議接待費</option>
  <option value="cloud" data-description="AWS/GCPサーバー利用料・SaaSサブスクリプション">通信開発費</option>
  <option value="other" data-description="上記いずれにも当てはまらないその他の経費">その他</option>
</select>

<div id="judgementResult"></div>

<!-- 2. JavaScript ロジック -->
<script type="module">
  import { NanoJudgement } from './nano-judgement.js';
  const judgement = new NanoJudgement();

  const dropZone = document.getElementById('dropZone');
  const fileInput = document.getElementById('receiptInput');
  const selectEl = document.getElementById('accountCategory');
  const resultDiv = document.getElementById('judgementResult');

  dropZone.addEventListener('click', () => fileInput.click());
  dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.style.background = 'rgba(56,189,248,0.1)'; });
  dropZone.addEventListener('dragleave', () => { dropZone.style.background = 'transparent'; });
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.style.background = 'transparent';
    if (e.dataTransfer.files?.length) handleImageFile(e.dataTransfer.files[0]);
  });
  fileInput.addEventListener('change', () => {
    if (fileInput.files?.length) handleImageFile(fileInput.files[0]);
  });

  async function handleImageFile(file) {
    resultDiv.innerHTML = '⏳ Gemini Nano が画像そのものを直接解析中...';
    try {
      // judge() の第2引数に File オブジェクトを直接投入！
      const result = await judgement.judge(selectEl, file, {
        target: resultDiv,    // 判定結果カードを自動描画
        includeReason: true   // 理由も合わせて表示
      });
      console.log('自動選択された科目:', selectEl.value);
    } catch (err) {
      resultDiv.innerHTML = '❌ エラー: ' + err.message;
    }
  }
</script>

ブラウザのカメラ（navigator.mediaDevices.getUserMedia）でレシートを写し、「撮影」ボタンを押した瞬間に canvas.toBlob() でバイナリを抽出し、そのままオンデバイスで判定する実装例です。

// 1. カメラストリームの開始
const video = document.querySelector('#cameraVideo');
const stream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: 'environment', width: 1280, height: 720 }
});
video.srcObject = stream;

// 2. シャッターを押して Canvas 経由で Blob 取得 ＆ 即時判定
document.querySelector('#captureBtn').addEventListener('click', () => {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0);

  // Blob 形式で直接画像を取り出し、judge() に渡す
  canvas.toBlob(async (imageBlob) => {
    const result = await judgement.judge('#expenseSelect', imageBlob);
    console.log('撮影レシートの判定結果:', result.topChoice.name);
    console.log('確信度:', result.topChoice.confidence);
  }, 'image/jpeg', 0.9);
});

ユーザーが「ログイン画面でエラー500が出て決済できない」と声に出して話すと、Chrome の Web Speech API がオンデバイスで即座に文字起こしし、Prompt API が緊急度（P0-緊急, P1-高, P2-中, P3-低, その他）をミリ秒単位で自動選択します。

<!-- 1. ボタンをクリックするだけでマイク起動 ＆ 自動判定（ノーコード版） -->
<button type="button"
        data-nano-judgement-speech
        data-judge-select="#ticketPriority"
        data-judge-target="#voiceResult"
        data-judge-reason="true">
  🎙️ 声で話して優先度を判定
</button>

<select id="ticketPriority">
  <option value="p0" data-description="本番システム停止、決済不能、全ユーザー影響">P0-最優先緊急</option>
  <option value="p1" data-description="主要機能の不具合だが回避策が存在する">P1-重要度高</option>
  <option value="p2" data-description="軽微な表示崩れや一般的な問い合わせ">P2-通常対応</option>
  <option value="other" data-description="上記に該当しないその他・要望">その他</option>
</select>

<!-- 2. JavaScript でマイク音声認識とAI判定を完全に制御する場合 -->
<script type="module">
  import { NanoJudgement } from './nano-judgement.js';
  const judgement = new NanoJudgement();

  const micBtn = document.querySelector('#customMicBtn');
  micBtn.addEventListener('click', async () => {
    micBtn.textContent = '🎙️ 音声を聞き取り中...';
    try {
      const result = await judgement.judgeFromSpeech('#ticketPriority', {
        speechLang: 'ja-JP',     // 日本語認識
        speechTimeoutMs: 8000,   // 8秒無音でタイムアウト
        includeReason: true      // 理由も生成
      });

      console.log('マイクが認識した日本語テキスト:', result.speechTranscript);
      console.log('Gemini Nano が判定した選択肢:', result.topChoice.name);
      console.log('確信度スコア:', result.topChoice.confidence);
      console.log('判断理由 (日本語自動翻訳済):', result.summaryReason);
    } catch (err) {
      console.warn('音声認識エラー:', err.message);
    } finally {
      micBtn.textContent = '🎙️ 声で話して優先度を判定';
    }
  });
</script>

コールセンターの通話録音ファイルや、会議のボイスメモ音声ファイルをそのまま File オブジェクトとして渡し、問い合わせ種別や感情・対応要否を直接判定させることができます。

// 1. 音声ファイル選択イベント
const audioInput = document.querySelector('#audioFileInput'); // <input type="file" accept="audio/*">

audioInput.addEventListener('change', async () => {
  const audioFile = audioInput.files[0];
  if (!audioFile) return;

  // 判定候補の定義（問い合わせ種別）
  const categories = [
    { id: 'billing', name: '請求・決済に関するクレーム', description: '過大請求、二重引き落とし、返金要求' },
    { id: 'technical', name: '技術的トラブル・障害', description: 'ログインできない、アプリがクラッシュする' },
    { id: 'inquiry', name: '一般的なサービス質問', description: '料金プラン、営業時間、契約変更の手順' },
    { id: 'other', name: 'その他・該当なし', description: '間違い電話や上記に該当しない要件' }
  ];

  // 音声ファイルを直接 judge() に投入
  const result = await judgement.judge(categories, audioFile, {
    includeReason: true
  });

  console.log('音声ファイル名:', audioFile.name);
  console.log('音声仕訳結果:', result.topChoice.name);
  console.log('根拠・理由:', result.summaryReason);
});

自動判定対象の要素は、判定の完了や中断などのライフサイクルに合わせて標準カスタムイベント（CustomEvent）を発火します。

const textarea = document.querySelector('textarea[data-nano-judgement]');

// 1. 判定が完了したとき (nano-judgement-complete)
textarea.addEventListener('nano-judgement-complete', (e) => {
  const { result, fromCache, selectElement } = e.detail;
  console.log('判定完了:', result.topChoice.name);
  console.log('キャッシュ利用:', fromCache);

  // トースト通知を出したり、フォームの別フィールドを連動更新可能
});

// 2. 入力枠が0文字になった、または中断されたとき (nano-judgement-cancelled)
textarea.addEventListener('nano-judgement-cancelled', (e) => {
  const { reason } = e.detail;
  if (reason === 'empty_input') {
    console.log('入力が空（0文字）になったため判定が即時破棄・リセットされました');
  }
});

クライアントPCのCPU/GPU負荷とトークン消費を最小化するため、以下のインテリジェント制御を内包しています。

• 1. 入力枠が0文字になった際の即時停止（Abort & Destroy）:
  スペースや改行を除去した結果が 0文字になった瞬間、進行中の待機タイマーを解除し、AbortController で判定を中断。さらに session.destroy() でネイティブAIセッションを即座に破棄して結果表示もクリアします。
• 2. スペース・句読点正規化キャッシュ（Normalized Cache）:
  キャッシュ保存および照合時に半角・全角スペースや「、」「。」「！」等の句読点を除去して正規化。誤字修正や句読点の追記による不要な再判定を防ぎます。
• 3. 前方一致推論（Prefix Heuristic Cache）:
  10文字以上の文章で、末尾の 5文字以内の微修正であれば、直前のキャッシュ結果を即座に類推活用して 0ms で判定結果を表示します。
• 4. 1000世代のLRUキャッシュ（Least Recently Used）:
  キャッシュは最大 1,000 世代まで保存。上限を超えた古いキャッシュは自動的に破棄され、ストレージ容量圧迫を防ぎます。
• 5. 2秒ルール＆25%変化チェック:
  文字入力後2秒以内の編集は別キーで都度安全にキャッシュ。2秒経過後は、元の文章から 25% 以上変更された場合のみ進行中の判定を中断して最新テキストで再実行します。
• 6. 前方一致後のバックグラウンド再検証 (Stale-While-Revalidate):
  前方一致で即座に応答（0ms）した後、タイピング停止（デバウンス800ms）を検知すると裏側で最新文章に対する本判定を自動実行してキャッシュを最新化。最有力候補の変化・ランキング順序の変化・いずれかのスコアが20%以上変動した場合のみ画面を自動更新し、チラつきを防ぎつつ高い判定精度を維持します。
• 7. 8文字以上入力時の1〜3文字縮小による前方一致＆一時回答:
  入力文字列が8文字以上で通常の前方一致に一致するキャッシュがなかった場合、末尾を1文字、2文字、3文字減らして前方一致キャッシュを探索。見つかった場合は一時回答として即時表示（0ms）した上で、ユーザーのタイピング停止を待って裏側で最新の全文に対する本判定を実行・反映します。

判定が完了すると、ライブラリは以下の構造化された JavaScript オブジェクト（Promise<JudgementResult>）を出力します。すべての選択肢の確信度・理由・キャッシュ状況が綺麗に整理されています。

// 判定完了時に JavaScript が出力するオブジェクトの具体例
{
  "topChoice": {
    "id": "B",
    "name": "ノーコード/SaaSの利用",
    "description": "即日利用可能で安価だが、細かいカスタマイズに制約がある"
  },
  "rankings": [
    {
      "id": "B",
      "name": "ノーコード/SaaSの利用",
      "confidence": 0.82,    // 確信度 (0.00 〜 1.00、降順で自動ソート)
      "reason": "予算がほぼゼロかつ1週間以内のプロトタイプ作成には即日導入可能なSaaSが最も適合します。"
    },
    {
      "id": "A",
      "name": "フルスクラッチ開発",
      "confidence": 0.12,
      "reason": "開発期間が1ヶ月以上かかるため来週のピッチ期日に間に合いません。"
    },
    {
      "id": "C",
      "name": "外注専門ベンダーへ特急依頼",
      "confidence": 0.06,
      "reason": "予算ゼロの条件と相容れません。"
    }
  ],
  "summaryReason": "来週の投資家ピッチという短納期と予算ゼロの制約に基づき、SaaS/ノーコードツールの活用が最も現実的で高い適合率を示しています。",
  "fromCache": false,            // キャッシュから復元されたか (true / false)
  "inferredFromCache": false,    // 前方一致推論キャッシュか (true / false)
  "context": "スタートアップ企業で予算はほぼゼロだが来週の投資家向けピッチまでに実働するプロトタイプが必要", // スペース・句読点除去後
  "rawContext": "スタートアップ企業で予算はほぼゼロだが、来週の投資家向けピッチまでに実働するプロトタイプが必要。"
}

nano-judgement.js は画面への直接的な HTML 描画を行いません（画面描画は HTML / UI 層の責任）。
ライブラリは AI 判定・翻訳・キャッシュ・ライフサイクル管理に特化し、以下の 3 つのイベントおよび属性連携を通じて HTML 側に状態を通知します。

nano-judgement.js から送られるカスタムイベントを HTML 側で購読し、結果表示領域（#myResult）に結果カードやスピナーを描画する実装コードです。

// 1. 判定開始時: HTML側でローディングスピナーを表示
document.addEventListener('nano-judgement-start', (event) => {
  const target = event.detail.element.getAttribute('data-judge-target');
  if (target) {
    document.querySelector(target).innerHTML = '<div class="spinner">判定中...</div>';
  }
});

// 2. 判定完了時: HTML側で結果カードやグラフを描画
document.addEventListener('nano-judgement-complete', (event) => {
  const { result, fromCache, element } = event.detail;
  const target = element.getAttribute('data-judge-target');
  if (!target) return;

  const topPct = Math.round(result.rankings[0].confidence * 100);
  const container = document.querySelector(target);
  container.innerHTML = `
    <div class="result-card">
      <div>最有力: <strong>${result.topChoice.name}</strong> (${topPct}%)</div>
      <div>理由: ${result.summaryReason || '（理由なし）'}</div>
    </div>
  `;
});

// 3. 0文字リセット時: HTML側で描画エリアをクリア
document.addEventListener('nano-judgement-cancelled', (event) => {
  const target = event.detail.element.getAttribute('data-judge-target');
  if (target) {
    document.querySelector(target).innerHTML = '';
  }
});