網頁版語言偵測指南

MediaPipe 語言偵測工具工作可讓您找出一段文字的語言。這些操作說明會示範如何在網頁和 JavaScript 應用程式中使用語言偵測器。如需上述指示中所述的程式碼範例，請前往 GitHub。

您可以前往 demo」。進一步瞭解功能、模型和設定選項請參閱總覽。

程式碼範例

語言偵測器的範例程式碼提供了方便您參考。這個程式碼可協助您測試這項工作即可開始自行建構語言偵測工具功能。您可以查看、執行然後編輯語言偵測工具範例程式碼只要使用網路瀏覽器即可。

設定

本節說明設定開發環境的重要步驟，以及專門使用 Language Detector 的程式碼專案如需設定開發環境以使用 MediaPipe 工作，包括：平台版本需求，請參閱網頁版設定指南。

JavaScript 套件

如需語言偵測器程式碼，請前往 @mediapipe/tasks-text敬上套件。你可以透過平台設定指南。

您可以使用下列程式碼安裝必要套件進行本機測試使用以下指令：

npm install @mediapipe/tasks-text

如要部署至伺服器，可以使用內容傳遞工具 jsDelivr 等直接將程式碼新增到 HTML 網頁，如下所示：

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/index.js"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe 語言偵測器工作需要一個與此相容的已訓練模型工作。如要進一步瞭解語言偵測器可用的已訓練模型，請參閱：工作總覽的「模型」一節。

選取並下載模型，然後將模型儲存在專案目錄中：

<dev-project-root>/app/shared/models

使用 baseOptions 物件 modelAssetPath 指定模型路徑參數，如下所示：

baseOptions: {
        modelAssetPath: `/app/shared/models/language_detector.tflite`
      }

建立工作

使用其中一個語言偵測工具 LanguageDetector.createFrom...() 函式來準備執行推論的工作。您可以使用 createFromModelPath() 內含已訓練模型檔案的相對或絕對路徑。程式碼以下範例說明如何使用 createFromOptions() 函式。如要瞭解如何設定工作，請參閱設定選項。

下列程式碼示範如何建構及設定這項工作。

async function createDetector() {
  const textFiles = await FilesetResolver.forTextTasks(
      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  languageDetector = await languageDetector.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-models/language_detector/language_detector/float32/1/language_detector.tflite`
      },
    }
  );
}
createDetector();

設定選項

這項工作包含以下網頁和 JavaScript 設定選項應用程式：

選項名稱	說明	值範圍	預設值
`maxResults`	將最高分數的語言預測結果 (選用) 設為傳回。如果此值小於零，則會傳回所有可用的結果。	任何正數	`-1`
`scoreThreshold`	設定預測分數門檻，此門檻會覆寫模型中繼資料 (如有)低於這個值的結果遭到拒絕。	任何浮點值	未設定
`categoryAllowlist`	設定允許的語言代碼清單 (選用)。如果非空白如果語言代碼中沒有對應的語言代碼，則系統會過濾掉。這個選項會與 `categoryDenylist` 和同時使用這兩種方法都會發生錯誤。	任何字串	未設定
`categoryDenylist`	設定不允許的語言代碼清單 (選用)。如果非空白的語言預測結果如果包含此集合中的語言代碼，系統就會加以篩選。這個選項與 `categoryAllowlist` 和同時使用這兩種方法都會發生錯誤。	任何字串	未設定

準備資料

語言偵測工具支援文字 (string) 資料。該工作會處理資料輸入預先處理，包括代碼化和 Tensor 預先處理所有預先處理作業都在 detect 函式中處理。不需要以便事先對輸入文字進行額外預先處理

const inputText = "The input text for the detector.";

執行工作

語言偵測工具會使用 detect 函式觸發推論。語言用偵測，這意味著會傳回輸入文字的可能語言。

下列程式碼示範如何使用工作執行處理程序模型：

// Wait to run the function until inner text is set
const detectionResult = languageDetector.detect(inputText);

處理及顯示結果

語言偵測工具工作會輸出 LanguageDetectorResult，由清單組成以及這些預測結果的機率以下範例是這項工作的輸出資料範例：

LanguageDetectorResult:
  LanguagePrediction #0:
    language_code: "fr"
    probability: 0.999781

透過對輸入文字執行模型來取得這個結果： "Il y a beaucoup de bouches qui parlent et fort peu de têtes qui pensent."。

舉例說明如何處理請參閱網頁應用程式範例應用程式。