웹용 언어 감지 가이드

MediaPipe 언어 감지기 작업을 사용하면 텍스트의 언어를 식별할 수 있습니다. 이러한 에 웹 및 JavaScript 앱용 언어 감지기를 사용하는 방법이 나와 있습니다. 이 지침에서 설명하는 코드 샘플은 GitHub

이 작업의 동작을 확인하려면 demo 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예

언어 감지기의 코드 예는 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 언어 감지기 기능 빌드를 시작해 보세요. 데이터를 보고, 실행하고, 로 이동하여 언어 감지기 예시 코드 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명하고 언어 감지기 사용을 위한 첫 번째 섹션을 확인하세요 일반적인 정보 다음과 같은 MediaPipe 작업을 사용하기 위한 개발 환경 설정 자세한 내용은 웹 설정 가이드

JavaScript 패키지

언어 감지기 코드는 @mediapipe/tasks-text 드림 패키지에서 찾을 수 있습니다. 다음 제공된 링크에서 이러한 라이브러리를 찾고 다운로드할 수 있습니다. 플랫폼 설정 가이드

<ph type="x-smartling-placeholder">

로컬 스테이징을 위해 다음 코드를 사용하여 필수 패키지를 설치할 수 있습니다. 사용하여 다음 명령어를 실행합니다.

npm install @mediapipe/tasks-text

서버에 배포하려면 콘텐츠 전송을 사용하면 됩니다. 네트워크(CDN) 서비스(예: 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 점수가 가장 높은 언어 예상 검색어의 최대 개수를 선택적으로 설정할 수 있습니다. 반환합니다. 이 값이 0보다 작으면 사용 가능한 모든 결과가 반환됩니다. 모든 양수 -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."

결과를 처리하고 시각화하는 데 필요한 코드의 예는 자세한 내용은 웹 샘플 앱