BrowserAI: 웹 GPU로 브라우저에서 로컬로 AI 모델 실행하기

1.8K 00

일반 소개

BrowserAI는 사용자가 브라우저에서 직접 네이티브 AI 모델을 실행할 수 있는 오픈 소스 도구입니다. Cloud-Code-AI 팀에서 개발한 이 도구는 라마, 딥서치, 코코로 등의 언어 모델을 지원합니다. 사용자는 서버나 복잡한 설정 없이도 브라우저를 통해 텍스트 생성, 음성 인식, 텍스트 음성 변환과 같은 작업을 수행할 수 있습니다. 웹 GPU 기술을 사용해 연산을 가속하고 모든 데이터를 로컬에서 처리해 개인정보를 보호하며, 브라우저AI는 사용이 간편하고 쉬워 개발자는 AI 앱 개발에 활용할 수 있고 일반 사용자도 AI 기능을 체험할 수 있습니다. 이 프로젝트는 깃허브에서 무료로 공개되어 있으므로 누구나 코드를 다운로드하여 사용하거나 개선할 수 있습니다.

BrowserAI 텍스트 대화

BrowserAI 음성 대화

BrowserAI 텍스트 음성 변환

기능 목록

서버 지원 없이 브라우저에서 로컬 AI 모델을 실행하세요.
사용자가 텍스트를 입력하고 자연어 응답을 받을 수 있도록 텍스트 생성이 지원됩니다.
음성 인식을 통해 오디오를 텍스트로 변환할 수 있습니다.
텍스트 음성 변환을 지원하여 텍스트를 재생 가능한 오디오로 변환합니다.
WebGPU로 가속화되어 네이티브에 가까운 성능으로 실행됩니다.
오프라인 기능이 제공되며 첫 번째 다운로드 후에는 인터넷 연결이 필요하지 않습니다.
오픈 소스 코드, 개발자가 모델과 기능을 사용자 지정할 수 있도록 지원합니다.

도움말 사용

설치 프로세스

BrowserAI는 기존 설치가 필요하지 않지만, 실행을 위해 환경과 코드를 준비해야 합니다. 정확한 단계는 다음과 같습니다:

브라우저 확인
- Chrome 113+ 또는 Edge 113+와 같은 WebGPU 지원 브라우저를 사용합니다. 브라우저의 주소 표시줄에 다음을 입력합니다. chrome://gpu WebGPU가 활성화되어 있는지 확인합니다.
- 컴퓨터 하드웨어가 16비트 부동 소수점(일부 모델에 필요)을 지원하는지 확인하고, 일반 CPU로도 실행할 수 있지만 GPU가 더 빠릅니다.
코드 다운로드
- https://github.com/Cloud-Code-AI/BrowserAI 방문하기.
- "코드" 버튼을 클릭하고 "ZIP 다운로드"를 선택하여 다운로드하거나 다음 명령을 사용합니다. git clone https://github.com/Cloud-Code-AI/BrowserAI.git.
- 파일의 압축을 풀거나 폴더로 이동합니다.
Node.js 및 종속성 설치하기
- 먼저 Node.js 공식 웹 사이트에서 다운로드하여 설치하고, 설치가 완료되면 다음을 입력합니다. node -v 버전을 확인합니다.
- 터미널을 열고 BrowserAI 폴더로 이동합니다(예 cd BrowserAI).
- 가져오기 npm install 종속성을 설치하는 데 몇 분 정도 걸릴 수 있습니다.
프로젝트 시작
- 터미널에 다음을 입력합니다. npm run dev를 클릭하고 로컬 서버를 시작합니다.
- 브라우저를 열고 다음을 입력합니다. http://localhost:3000(포트 번호는 터미널 프롬프트 참조)를 클릭하고 BrowserAI 인터페이스로 들어갑니다.

주요 기능 사용 방법

BrowserAI의 핵심은 브라우저에서 AI 모델을 실행하는 것으로, 아래에서 자세히 설명합니다.

기능 1: 텍스트 생성

절차
1. 시작 후 인터페이스에 모델 선택 상자가 표시되며, 기본적으로 기본적으로 llama-3.2-1b-instruct 및 기타 옵션.
2. '모델 로드'를 클릭하고 모델이 로드될 때까지 기다립니다(컴퓨터 성능에 따라 몇 초에서 몇 분 정도 소요).
3. 입력 상자에 "오늘 날씨가 어때요?"와 같은 텍스트를 입력합니다. 를 입력하고 "생성"을 클릭합니다.
4. 시스템은 "외출하기 좋은 날입니다."와 같은 응답을 생성합니다. .
팁 및 유용한 정보
- 소형 모델(예 TinyLlama-1.1B)는 로딩이 빠르며 저사양 컴퓨터에 적합합니다.
- "50단어 기술 기사 작성"과 같이 보다 정확한 답변을 위해 구체적인 질문을 입력하세요.
애플리케이션 시나리오
- 기사 초안을 작성하거나, 대화를 생성하거나, 모델 언어 능력을 테스트하세요.

기능 2: 음성 인식

절차
1. 다음과 같이 음성 인식을 지원하는 모델을 선택합니다. whisper-tiny-en.
2. '모델 로드'를 클릭하여 모델을 로드합니다.
3. "녹음 시작"을 클릭하고 마이크에 대고 "안녕하세요, 브라우저AI"와 같이 말합니다.
4. "녹음 중지"를 클릭하고 몇 초간 기다리면 인터페이스에 "안녕하세요, 브라우저AI"와 같은 녹취된 텍스트가 표시됩니다.
팁 및 유용한 정보
- 마이크가 제대로 작동하는지, 배경 소음이 거의 없는지 확인하여 더 나은 결과를 얻으세요.
- 선택적 매개 변수 return_timestamps 각 단락의 타임스탬프를 확인합니다.
애플리케이션 시나리오
- 회의를 녹음하거나 음성 메모를 필사하거나 음성 입력 애플리케이션을 개발하세요.

기능 3: 텍스트 음성 변환

절차
1. 옵션 kokoro-tts 모델을 클릭하고 '모델 로드'를 클릭합니다.
2. "BrowserAI 환경에 오신 것을 환영합니다."와 같은 텍스트를 입력합니다.
3. 음성 선택(예 af_bella) 및 속도(기본값 1.0)를 선택하고 '텍스트 음성 변환'을 클릭합니다.
4. 오디오를 생성하여 자동으로 재생하거나 파일을 다운로드하세요.
팁 및 유용한 정보
- 문구가 더 자연스럽고 느린 속도(예: 0.8)가 더 선명합니다.
- 다양한 음성 옵션을 테스트하여 가장 적합한 음색을 찾아보세요.
애플리케이션 시나리오
- 음성 안내를 만들고, 팟캐스트 클립을 생성하거나, 동영상을 더빙하세요.

기능 4: 개발자 사용자 지정

절차
1. 사용하려는 모델 파일(예: Hugging Face)을 다운로드하여 프로젝트 디렉토리에 넣습니다( README.md).
2. 컴파일러 src/index.ts를 클릭하고 모델 경로를 추가합니다.
3. 움직여야 합니다. npm run dev를 클릭하고 새 모델을 로드합니다.
팁 및 유용한 정보
- 모델이 WebGPU 및 WebAssembly와 호환되는지 확인합니다.
- 코드를 모르는 경우 GitHub에서 이슈를 제기하세요.
애플리케이션 시나리오
- 새로운 모델을 테스트하고 맞춤형 AI 애플리케이션을 개발합니다.

샘플 코드에서는

텍스트 생성

프로젝트에 BrowserAI를 소개합니다:

import { BrowserAI } from '@browserai/browserai';
const ai = new BrowserAI();
await ai.loadModel('llama-3.2-1b-instruct');
const response = await ai.generateText('你好，今天天气如何？');
console.log(response);

음성-텍스트 변환

오디오 녹음 및 트랜스크립션:

const ai = new BrowserAI();
await ai.loadModel('whisper-tiny-en');
await ai.startRecording();
const audio = await ai.stopRecording();
const text = await ai.transcribeAudio(audio);
console.log(text);