AI를 사용한 클라이언트 측 번역

Maud Nalpas

Kenji Baheux

Alexandra Klepper

게시일: 2024년 5월 16일, 최종 업데이트: 2024년 11월 13일

설명하듯이	웹	확장 프로그램	Chrome 상태	의도
MDN	Chrome 138	Chrome 138	View	배송 의도

해외 시장으로 비즈니스를 확장하는 데는 비용이 많이 들 수 있습니다. 시장이 많을수록 지원해야 하는 언어가 많아지고, 언어가 많아지면 판매 후 지원 채팅과 같은 대화형 기능 및 흐름에 문제가 발생할 수 있습니다. 회사에 영어 사용 지원 상담원만 있는 경우 모국어가 아닌 사용자는 발생한 문제를 정확하게 설명하기 어려울 수 있습니다.

AI를 사용하여 여러 언어를 사용하는 사용자의 환경을 개선하면서 위험을 최소화하고 추가 언어를 사용하는 지원 상담원에 투자할 가치가 있는지 확인하려면 어떻게 해야 할까요?

일부 사용자는 브라우저의 기본 제공 페이지 번역 기능 또는 서드 파티 도구를 사용하여 언어 장벽을 극복하려고 합니다. 하지만 판매 후 지원 채팅과 같은 대화형 기능의 사용자 환경은 좋지 않습니다.

통합 번역 기능이 있는 채팅 도구의 경우 지연을 최소화하는 것이 중요합니다. 기기에서 언어를 처리하면 사용자가 메시지를 제출하기 전에 실시간으로 번역할 수 있습니다.

즉, 자동화된 도구로 언어 격차를 해소할 때는 투명성이 중요합니다. 대화가 시작되기 전에 이 번역을 허용하는 AI 도구를 구현했음을 명확히 하세요. 이렇게 하면 기대치를 설정하고 번역이 완벽하지 않은 경우 어색한 순간을 피할 수 있습니다. 자세한 내용은 정책에 연결하세요.

Chrome에 기본 제공되는 모델을 사용하여 클라이언트 측 Translator API 를 개발하고 있습니다.

데모 채팅

사용자가 모국어로 입력하고 지원 상담원이 실시간 번역을 받을 수 있는 고객 지원 채팅을 구축했습니다.

Translator API 사용

Translator API가 지원되는지 확인하려면 다음 기능 감지 스니펫을 실행하세요.

if ('Translator' in self) {
  // The Translator API is supported.
}

언어 쌍 지원 확인

번역은 요청 시 다운로드되는 언어 팩으로 관리됩니다. 언어 팩은 특정 언어의 사전과 같습니다.

• sourceLanguage: 텍스트의 현재 언어입니다.
• targetLanguage: 텍스트를 번역해야 하는 최종 언어입니다.

BCP 47 언어 약어를 문자열로 사용합니다. 예를 들어 스페인어의 경우 'es', 프랑스어의 경우 'fr'입니다.

모델 사용 가능 여부를 확인하고 and listen for the downloadprogress

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

다운로드에 실패하면 downloadprogress 이벤트가 중지되고 ready 프로미스가 거부됩니다.

번역기 만들기 및 실행

번역기를 만들려면 비동기 create() 함수를 호출합니다. 이 함수에는 sourceLanguage 필드와 targetLanguage 필드라는 두 개의 필드가 있는 옵션 매개변수가 필요합니다.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

번역기가 있으면 비동기 translate() 함수를 호출하여 텍스트를 번역합니다.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

다음 단계

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

미리보기 프로그램에 가입 하여 로컬 프로토타입으로 이 API와 기타 API를 테스트할 수 있습니다.