放棄下拉選單與硬編碼！我如何用純前端 Omni-Search 與 AI 學習閉環打造「大腦救星」度量衡轉換器

圖 2.1：捨棄複雜選單，採用具備 Fuzzy Matching 的全局單一 Omni-Search 輸入列

// 循序執行漸進式裁剪辨識，一旦命中即中斷向外擴大
for (let step = 0; step < scanRegions.length; step++) {
  const region = scanRegions[step];
  if (loadingText) {
    loadingText.innerText = region.desc;
  }
  
  // 裁剪出特定中心區塊 Canvas
  const croppedCanvas = cropImageToCanvas(img, region.w, region.h);
  const dataUrl = croppedCanvas.toDataURL('image/png');
  
  // 送入 Tesseract.js 本地辨識
  const result = await Tesseract.recognize(dataUrl, 'eng+chi_tra');
  const text = result.data.text || "";
  console.log(`對焦區域 ${step + 1} (${Math.round(region.w * 100)}% 範圍) 辨識結果:`, text);
  
  const cleanedText = text.replace(/\r?\n|\r/g, " ");
  const patternMatch = cleanedText.match(/([\d.]+)\s*([a-zA-Z\u4e00-\u9fa5μµ%°]*)$/);
  
  if (patternMatch) {
    const detectedValue = patternMatch[1];
    const detectedUnit = patternMatch[2];
    finalDetectedText = detectedValue + detectedUnit;
    console.log(`🎯 在階段 ${step + 1} 成功捕捉到目標：${finalDetectedText}`);
    break; // 💡 成功捕捉到數值與單位，立即停止向外擴大，完美隔絕外部背景噪音！
  }
}