내장 AI를 통한 언어 감지

Thomas Steiner

게시일: 2024년 9월 24일, 최종 업데이트: 2025년 5월 20일

텍스트를 한 언어에서 다른 언어로 번역하기 전에 먼저 지정된 텍스트에 사용된 언어를 확인해야 합니다. 이전에는 텍스트를 클라우드 서비스에 업로드하고 서버에서 번역한 다음 결과를 다운로드해야 했습니다.

Language Detector API는 클라이언트 측에서 작동하므로 사용자 개인 정보를 보호할 수 있습니다. 이 작업을 실행하는 특정 라이브러리를 제공할 수는 있지만 다운로드하려면 추가 리소스가 필요합니다.

언어 감지를 사용해야 하는 경우

언어 감지기 API는 주로 다음과 같은 시나리오에서 유용합니다.

• 번역할 수 있도록 입력 텍스트의 언어를 확인합니다.
• 유해성 감지와 같은 언어별 작업을 위해 올바른 모델을 로드할 수 있도록 입력 텍스트의 언어를 확인합니다.
• 온라인 소셜 네트워킹 사이트에서와 같이 올바르게 라벨을 지정할 수 있도록 입력 텍스트의 언어를 확인합니다.
• 입력 텍스트의 언어를 파악하여 앱의 인터페이스를 적절하게 조정할 수 있습니다. 예를 들어 벨기에 사이트에서 프랑스어를 사용하는 사용자에게만 관련 인터페이스를 표시할 수 있습니다.

시작하기

브라우저가 Language Detector API를 지원하는지 확인하기 위해 기능 감지를 실행합니다.

if ('LanguageDetector' in self) {
  // The Language Detector API is available.
}

모델 다운로드

언어 감지는 언어 감지라는 특정 작업에 맞게 미세 조정된 모델에 따라 달라집니다. API는 브라우저에 내장되어 있지만 모델은 사이트에서 API를 처음 사용하려고 할 때 주문형으로 다운로드됩니다. Chrome에서 이 모델은 다른 모델과 비교하여 매우 작습니다. 이 모델은 다른 Chrome 기능에서 사용하므로 이미 있을 수 있습니다.

모델을 사용할 준비가 되었는지 확인하려면 비동기 LanguageDetector.availability() 함수를 호출하세요. availability()에 대한 대답이 downloadable인 경우 다운로드 진행률을 수신 대기하고 사용자에게 알립니다. 다운로드에 시간이 걸릴 수 있기 때문입니다.

다운로드를 트리거하고 언어 감지기를 인스턴스화하려면 사용자 활성화를 확인하세요. 그런 다음 비동기 LanguageDetector.create() 함수를 호출합니다.

const detector = await LanguageDetector.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

언어 감지기 실행

Language Detector API는 순위 모델을 사용하여 지정된 텍스트에서 가장 많이 사용되는 언어를 확인합니다. 순위 지정은 머신러닝의 한 유형으로, 목표는 항목 목록을 정렬하는 것입니다. 이 경우 Language Detector API는 확률이 가장 높은 언어부터 가장 낮은 언어 순으로 순위를 매깁니다.

detect() 함수는 첫 번째 결과인 가장 가능성이 높은 답변을 반환하거나 신뢰도 수준으로 순위가 지정된 후보를 반복할 수 있습니다. 이는 {detectedLanguage, confidence} 객체 목록으로 반환됩니다. confidence 수준은 0.0 (신뢰도 가장 낮음)와 1.0 (신뢰도 가장 높음) 사이의 값으로 표현됩니다.

const someUserText = 'Hallo und herzlich willkommen!';
const results = await detector.detect(someUserText);
for (const result of results) {
  // Show the full list of potential languages with their likelihood, ranked
  // from most likely to least likely. In practice, one would pick the top
  // language(s) that cross a high enough threshold.
  console.log(result.detectedLanguage, result.confidence);
}
// (Output truncated):
// de 0.9993835687637329
// en 0.00038279531872831285
// nl 0.00010798392031574622
// ...

API playground

Google의 API Playground에서 Language Detector API를 실험해 보세요. 텍스트 영역에 다양한 언어로 작성된 텍스트를 입력합니다.

권한 정책, iframe, 웹 워커

기본적으로 Language Detector API는 최상위 창과 동일 출처 iframe에서만 사용할 수 있습니다. 권한 정책 allow="" 속성을 사용하여 API에 대한 액세스 권한을 교차 출처 iframe에 위임할 수 있습니다.

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Language Detector API by
  setting the `allow="language-detector"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="language-detector"></iframe>

Language Detector API는 웹 워커에서 사용할 수 없습니다. 이는 권한 정책 상태를 확인하기 위해 각 작업자에 대한 책임 문서를 설정하는 것이 복잡하기 때문입니다.

의견 공유

Language Detector API로 무엇을 빌드하고 있는지 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유해 주세요.

Chrome 구현에 관한 의견이 있으면 Chromium 버그를 신고하세요.