크롬이 이번엔 로컬 AI를 맘대로 돌릴 수 있는 기능을 크롬에 추가했습니다.
그래서 컴퓨터에 GPU가 달려있다면 크롬 설치폴더에 이런 무거운 파일이 생겼을겁니다.
크롬 설치폴더에 추가된 4GB짜리 파일은 악성사이트 감별을 위한 AI 모델이라고 합니다.
하드 용량이 아까우면 크롬 설정에서 '온디바이스 AI' 항목을 off로 해두면 됩니다.
이번엔 2기가짜리 파일을 또 추가했는데 로컬 LLM 구동을 위한 Gemma 4 소형모델입니다.
이게 있으면 웹개발시 Gemma 4 모델을 자바스크립트로 돌릴 수 있어가지고
웹개발시 재밌는 기능들을 앞으로 만들 수 있게 되었습니다.
Gemma 4 사용은
사용해보려면 크롬 Canary라고 개발자용 크롬에서만 지금 먼저 이용이 가능합니다.
크롬 Canary 다운받아서 설치하고
주소창에 chrome://flags 입력해서 Gemma 4 어쩌구 부분을 Enabled로 바꿔주면 준비 끝입니다.
<script type="module">
const availability = await LanguageModel.availability()
console.log(availability)
</script>
우선 html 파일에 이렇게 코드짜면 AI기능 쓸 수 있는 컴퓨터인지 확인이 가능합니다.
VRAM 4GB, 하드용량 20GB 이상인 컴퓨터에서만 이용이 가능합니다.
const session = await LanguageModel.create({
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`)
})
},
})
자바스크립트로 LanguageModel.create() 실행하면 Gemma 4 모델 다운로드가 가능합니다.
monitor() 넣으면 다운로드 진행상황 체크도 가능함
근데 이상한건 다운받을 때 유저동의를 구하는 부분이 안보입니다.
const result = await session.prompt('너는 누구냐 깝ㄴㄴ')
alert(result)
이러면 AI 모델에 질문을 넣을 수 있습니다.
생각보다 한국어도 잘하고 동작속도도 미친듯이 빠른 편입니다.
const session = await LanguageModel.create()
const stream = session.promptStreaming(`클로드를 비난해봐`)
let pTag = document.querySelector('.content')
for await (const chunk of stream) {
pTag.innerText += chunk
}
이러면 답변 스트리밍도 가능합니다.
하나하나 글자를 차례로 뱉어줌
이거 말고도 TranslatorAPI, Summarizer API, Writer API 등의 기능도 추가했는데
사용법은 비슷한 편이라 우선 위에 적어둔 Prompt API만 알아둬도 상관없습니다.
예시1. 악플 검사
사용예시를 들자면
유저가 작성한 댓글의 악플 검사를 해야할 경우 원래는 서버에서 AI를 돌리든 해야하는데
그걸 유저 브라우저에서 처리할 수 있게된 것임
let constraint = {
type: 'object',
properties: {
classification: {
type: 'string',
enum: ['badComment', 'goodComment']
}
}
}
const result = await session.prompt(`댓글내용: ` + content, { responseConstraint: constraint })
alert(result)
그런 기능을 만들고 싶으면 위처럼 JSON 형식으로 답변을 출력하라고 해도 됩니다.
기술적으로 별거는 아니고 프롬프트에
"답변시 { classification: 어쩌구 }로 답해라" 이런게 추가되는 식으로 동작합니다.
어쨌든 이러면 악플검사가 브라우저에서도 가능한데
AI 로직을 사상최초로 유저에게 전가하는 MZ식 웹개발도 가능해졌습니다.
이러면 서버비를 쌀먹할 수 있을 것 같습니다.
당연히 자바스크립트로 위조가 가능한데 그럼에도 불구하고 크롬 개발자들이 공식적으로 추천하던 기능이긴 합니다.
예시2. AI 채팅인데 무료라니
최근에 라이자랑 AI 채팅을 할 수 있는 서비스가 너무 비싸서 화제가 된 적이 있는데
크롬 로컬 AI를 이용하면 공짜 채팅서비스도 만들 수 있지 않을까요?
유저 GPU를 갈궈서 공짜인 것이지만 유저들은 그딴건 상관안하니까요.
그래서 Codex로 하나 만들어봤는데 그럭저럭 답변은 한글로 잘 해줍니다.
TTS도 하나 만들어서 붙이고 그럴 수 있을 것 같은데
근데 지금은 소형모델이라 똑똑하진 않아서 나중가면 쓸만해질 수 있을 것 같습니다.
예시 3. 최고 빠른 에이전트
에이전트같은걸 써가지고 웹사이트에서 작업 대리를 시키는 분들이 있는데
커서같은 에이전트 프로그램에서 시키게 되면 오버헤드가 많습니다.
AI회사랑 통신하는 과정이 너무 많아서 그렇습니다.
하지만 에이전트를 브라우저에 로컬 AI로 심어버리면 오버헤드가 줄고 굉장히 빠르게 작업 처리가 가능합니다.
- 툴도 맘대로 만들 수 있고
- 자바스크립트 for 반복문으로 루프구현도 가능하고
- 크롬 확장기능으로 만들면 모든 사이트에 적용 가능합니다.
물론 아직 모델이 똑똑하진 않아서 간단한 작업정도만 괜찮겠군요.
문제점
1. 파이어폭스는 이런거 도입을 반대하는 입장이라 브라우저간 호환성은 기대하면 안됩니다.
2. AI모델 다운로드시 유저 동의가 필요없는 것 같은데 몰래 AI를 돌려서 좀비PC처럼 쓰는 케이스가 나오지 않을까요.
3. 하드용량을 너무 많이 요구한다는 단점도 있는데 싫으면 크롬설정에서 '온디바이스 AI' 부분을 꺼두면 됩니다.
그러니 개인적으로는 일단 재밌는걸 만들어볼 수 있으니 html이랑 자바스크립트로 한 번 만져보도록 합시다.
