網頁版語言偵測指南

MediaPipe 語言偵測器工作可讓您識別一段文字的語言。以下操作說明將說明如何針對網頁和 JavaScript 應用程式使用語言偵測工具。您可以前往 GitHub 取得這些操作說明中提及的程式碼範例。

如要查看這項工作的運作情形，請查看示範。如要進一步瞭解這項工作的功能、模型和設定選項，請參閱總覽。

程式碼範例

語言偵測工具的範例程式碼提供這項工作的完整實作 JavaScript 供您參考。這段程式碼可協助您測試這項工作，並開始建構自己的語言偵測工具功能。此外，只要使用網路瀏覽器，您就可以查看、執行及編輯語言偵測器範例程式碼。

設定

本節說明設定開發環境的重要步驟，以及專門用來使用語言偵測工具的程式碼專案。如需瞭解如何設定開發環境以使用 MediaPipe 工作 (包括平台版本需求)，請參閱「網頁版設定指南」。

JavaScript 套件

您可以透過 @mediapipe/tasks-text 套件取得語言偵測器程式碼。您可以從平台設定指南中提供的連結尋找及下載這些程式庫。

您可以使用下列指令，安裝具有以下程式碼的必要套件，以執行本機暫存：

npm install @mediapipe/tasks-text

如要將程式碼部署至伺服器，您可以使用 jsDelivr 等內容傳遞網路 (CDN) 服務，將程式碼直接新增至 HTML 網頁，如下所示：

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

型號

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

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

<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) 資料。這項工作會處理資料輸入的預先處理作業，包括權杖化和張量預先處理。所有預先處理作業都會在 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."。

如需處理並以視覺化方式呈現這項工作結果所需的程式碼範例，請參閱「網頁應用程式範例應用程式」。