mumble

mumble은 언어 학습용 음성 자료의 문장들을 대략 나누고, 구간을 반복해서 듣는 데 도움을 주는 브라우저 앱입니다. 정확한 자막 제작보다는 긴 음원을 학습하기 좋은 단위로 빠르게 쪼개는 데 초점을 둡니다.

전사와 음성 구간 처리는 whisper.cpp를 WASM으로 빌드해 브라우저 안에서 실행합니다. 프로젝트 루트에는 앱과 배포/테스트 코드만 두고, 원본 whisper.cpp 소스는 external/whisper.cpp에서 서브모듈로 관리합니다.

구조

app/          # 브라우저 WASM 앱
external/whisper.cpp/      # upstream whisper.cpp submodule
scripts/                   # 빌드 스크립트
tests/                     # Deno 정적 테스트
docs/changes/              # 변경 기록

현재 앱은 tiny-q8_0 모델과 Silero VAD 모델을 원격 URL에서 받아 브라우저 안에서 실행합니다. 모델 바이너리는 배포 산출물에 포함하지 않습니다.

whisper.cpp는 서브모듈 내부의 external/whisper.cpp/LICENSE를 따릅니다. 배포 산출물에는 같은 고지를 담은 THIRD_PARTY_NOTICES를 포함합니다.

준비

처음 받은 저장소라면 서브모듈을 초기화합니다.

deno task submodule:init

빌드

저장소 루트에서 빌드 스크립트를 실행합니다.

deno task build

스크립트는 .deps/emsdk 아래의 emsdk를 설치하거나 재사용하고 Emscripten 빌드를 설정합니다. 배포 가능한 산출물은 다음 경로에 생성됩니다.

build-em/bin/whisper.wasm/

주요 산출물은 다음과 같습니다.

build-em/bin/whisper.wasm/index.html
build-em/bin/whisper.wasm/main.js
build-em/bin/whisper.wasm/audio-utils.js
build-em/bin/whisper.wasm/server.ts

기본 모델 URL은 다음과 같습니다.

https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-tiny-q8_0.bin
https://huggingface.co/ggml-org/whisper-vad/resolve/main/ggml-silero-v6.2.0.bin

다른 기존 서빙 주소를 사용하려면 빌드 시 환경변수를 지정합니다.

MODEL_URL=https://example.com/models/ggml-tiny-q8_0.bin \
VAD_MODEL_URL=https://example.com/models/ggml-silero-v6.2.0.bin \
deno task build

외부 모델 URL은 브라우저에서 CORS로 가져올 수 있어야 합니다.

로컬 개발

개발 중에는 dev 태스크를 사용합니다.

deno task dev

이 태스크는 먼저 WASM 앱을 빌드한 뒤 build-em/bin/whisper.wasm 산출물 서버를 실행합니다. app/ 아래 파일이 바뀌면 서버를 멈추고 다시 빌드한 뒤 서버를 재시작합니다.

로컬 실행

pthread가 활성화된 WASM 빌드는 브라우저에서 COOP/COEP 헤더가 필요합니다. 생성된 Deno 서버로 빌드 산출물을 실행합니다.

deno task start

그 다음 아래 주소를 엽니다.

http://localhost:8000/

테스트

deno task test
deno task check