제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자 및 AI 인프라 구축자

- 중간 수준 이상의 JavaScript/TypeScript 경험자

- 클라우드 의존성 회피를 원하는 개발자

핵심 요약

• Chrome 138 이상에서 Gemini Nano 모델을 브라우저 내부에서 사용 가능
• LanguageDetector, Translator, Summarizer API를 통해 텍스트 기반 AI 기능 구현
• 모델 다운로드 상태 확인(unavailable, downloadable, downloading, available) 후 사용

섹션별 세부 요약

1. AI 모델 브라우저 내 사용

• Gemini Nano 모델을 Chrome 브라우저에 내장하여 클라우드 연결 없이 사용 가능
• Canary 버전 및 Feature Flag를 통해 기능 활성화 필요
• 현재는 텍스트 처리만 지원, 이미지/비디오 생성은 제외

2. LanguageDetector API

• 언어 감지 기능 제공 (예: "Hello world!" → "en" 99.7% 확신도)
• API 사용 전 상태 확인 (self.LanguageDetector 존재 여부 확인)
• 모델 다운로드 상태(availability() 메서드)에 따라 처리 로직 분기

3. Translator API

• 언어 번역 기능 (예: 영어 → 이탈리아어)
• 번역 전 언어 지원 여부 확인 (Translator.availability() 사용)
• 모델 자동 다운로드 및 진행률 모니터링 (monitor() 메서드 활용)

4. Summarizer API

• 텍스트 요약 기능 (작은/큰 텍스트 모두 지원)
• 모델 다운로드 상태 확인 후 create() 메서드로 인스턴스 생성
• sharedContext, type 파라미터로 요약 방식 조절 가능

결론

• Chrome 138 이상에서 AI 기능 사용 시, @types/dom-chromium-ai 패키지 사용하여 TypeScript 개발자 경험 향상
• 대규모 텍스트 처리 시, 번역/요약 작업을 작은 단위로 분할하고 사용자 피드백 제공
• 모델 다운로드 상태 관리가 필수적 (예: downloadprogress 이벤트 리스닝)