크롬 브라우저에 내장된 AI API를 사용해서 웹페이지 요약해보기

낱글, 입문

2024. 11. 13. PM 2:44:14

#AI #인공지능 #크롬 #chrome #Gemini

크롬 127 이상 버전부터 크롬 브라우저에 기기탑재(On-Device) AI가 적용됩니다. AI 모델은 Gemini Nano로 굉장히 작지만 성능이 제법 좋지요. 사용해보니 몇 가지 아쉬운 점은 있지만, 기기탑재 AI가 성큼 우리 곁에 온 걸 체감했습니다.

크롬 127 버전 이상 설치

구글 크롬 개발 버전이나 카나리 버전 을 설치합니다.

버전이 127 이상이어야 합니다.

window.ai 사용을 위한 활성화 설정

window.ai 기능을 사용하는 설정이 아직은 기본으로 활성화되어 있지 않아요. 활성화하겠습니다. 먼저 Prompt API for Gemini Nano 기능을 사용 가능하게 설정합니다.

브라우저 주소란에 chrome://flags/#prompt-api-for-gemini-nano를 붙여넣고 엔터를 누른 뒤 오른쪽에 있는 메뉴에서 Enabed를 선택합니다.

이번엔 Enables optimization guide on device 기능을 활성화하는데, "Enabled BypassPrefRequirement"를 선택합니다.

마지막으로 컴포넌트에서 AI 모델을 최신 버전으로 내려받을 차례입니다. 브라우저 주소에 chrome://components를 입력하면 크롬의 구성요소들이 여럿 나오는데 그 중에서 "Optimization Guide On Device Model"를 찾으세요. 이 구성요소가 목록에 없다면 조금 기다려야 합니다. 1~2일 기다려야 한다고 하는데, 제 경우는 10여 분 뒤에 생겼어요.

이 요소가 있거나 생기면 "Check for update" 버튼을 누릅니다. 그럼 모델을 내려받는 데 시간이 좀 걸립니다. 잠시 스쿼트나 팔굽혀펴기라도 합니다.

AI API 사용해보기

사용 가능한지 확인하기

크롬의 콘솔을 엽니다. 맥OS에서는 Option + ⌘ + J 단축키를, 윈도우와 리눅스는 Shift + CTRL + J 단축키를 누르세요. 콘솔에서 다음 JavaScript를 실행해보세요.

await ai.canCreateTextSession();

AI API를 사용할 수 있으면 'readily' 텍스트가 반환되고, 사용할 수 없으면 'no'라는 텍스트가 반환됩니다.

'readily'가 나와 사용할 수 있다면 바로 사용해보겠습니다.

아참, 참고로 ai 객체는 전역공간, 즉 window에 있습니다. document 객체가 원래는 window 객체에 있어서 window.document인데, window를 생략하고 document로 바로 접근하듯이, ai 객체도 window.ai에 있는 걸 ai로 줄여쓴 겁니다. 그래서 이름이 window.ai지요.

프롬프트 하기

AI 프롬프트를 하려면 먼저 텍스트 세션을 만들어야 합니다.

const s = await ai.createTextSession();

await 예약어를 잊지 마세요.

세션을 만들었으니 프롬프트를 해보겠습니다.

await s.prompt("지금 몇 시인지를 24시간제로 알려줘");

마찬가지로 await 키워드를 잊지 마시고요. 코드를 실행하면 적당한 응답을 받습니다.

음... 초장부터 거짓말을 하지만, 어쨌든 동작합니다.

웹 페이지 본문 요약하기

Hello World 말고 실용성 있는 실습을 해보겠습니다. 푸딩캠프 커피챗 페이지에 접속합니다. 콘솔창에 다음 코드를 붙여 넣습니다.

function getMainContent() {
    const mainContent = document.querySelector('main') ?? document.querySelector('article') ?? document.body;
    
    return mainContent?.innerText ?? '';
}

이 함수는 main 태그를 뒤져보고, 없으면 article 태그를 뒤져보고, 그래도 없으면 문서의 body 태그를 찾습니다. 그런 뒤 해당 태그의 요소(Element)에 있는 innerText, 즉, HTML 태그가 없는 텍스트에 접근해 반환하거나 빈 문자열을 반환하지요.

함수를 실행해보니 기대한대로 동작합니다. 이제 이 텍스트를 요약해볼까요?

let result = await s.prompt(`다음 내용을 3줄로 요약해줘.
---
${getMainContent()}`);

코드를 실행하면 곧바로 응답이 떨어지지만, 실제로는 연산을 하고 있는 상태입니다. await 예약어 보이죠?

잠시 기다린 뒤에 result를 출력해봅니다.

굉장히 작은 AI 모델인데도 상당히 쓸만하게 동작을 하네요.

맥북 에어 M2에서 동작시켜보니 두 가지 문제(?)가 있어 실용성이 아주 높진 않아 보입니다.

느림
배터리 소모량이 매우 큼

하지만 AI 성능(NPU)이 보강된 M4부터는 기기탑재(On-Device) AI가 상당히 쾌적하게 동작할 것이라 예상해봅니다.

세션 종료

컴퓨터 자원을 많이 사용하는 API이니 더이상 사용하지 않으면 앞서 연 세션을 닫아서 컴퓨터 자원을 반환시켜야 합니다.

s.destroy();

다른 API와 달리 await을 걸어줄 필요는 없습니다.

이외

ai API 스펙은 Built-in AI Early Preview Program 문서의 Full API surface에 나와있습니다. 아직 초기 단계라 그런지 아주 간단합니다. Full API surface를 보러 가실 거라면 가는 김에 저 문서를 쭉 읽어보시길 추천드립니다. 이 컨텐츠는 "Build-in AI Early Preview Program" 문서를 간추린 것이거든요.

참고 및 관련 자료

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.