브라우저에서 Kokoro- ONNX TTS 모델 실행

인공 지능과 기계 학습의 발전으로 브라우저 내에서 가능한 작업의 범위가 크게 확장되었습니다. 브라우저에서 직접 TTS(텍스트 음성 변환) 모델을 실행하면 개인 정보 보호, 속도 및 편의성을 위한 새로운 기회가 열립니다. 이 블로그 게시물에서는 JavaScript 구현을 사용하여 브라우저에서 Kokoro-82M ONNX TTS 모델을 실행하는 방법을 살펴보겠습니다. 궁금하다면 내 데모인 Kitt AI Text-to-Speech에서 테스트해 볼 수 있습니다.

왜 브라우저에서 TTS 모델을 실행하나요?

전통적으로 TTS 모델은 서버에서 실행되며 입력을 보내고 합성된 음성을 수신하려면 인터넷 연결이 필요합니다. 그러나 WebGPU 및 ONNX.js의 향상된 기능을 통해 이제 Kokoro-82M ONNX와 같은 고급 모델을 브라우저에서 직접 실행할 수 있습니다. 이는 많은 이점을 제공합니다:

• 개인정보: 텍스트 데이터는 기기 외부로 유출되지 않습니다.
• 낮은 대기 시간: 서버 통신 지연을 제거합니다.
• 오프라인 액세스: 인터넷에 연결되어 있지 않아도 작동합니다.

Kokoro-82M ONNX 개요

Kokoro-82M ONNX 모델은 온디바이스 추론에 최적화된 가벼우면서도 효과적인 TTS 모델입니다. 작은 설치 공간을 유지하면서 고품질 음성 합성을 제공하므로 브라우저 환경에 적합합니다.

프로젝트 설정

전제조건

브라우저에서 Kokoro-82M ONNX를 실행하려면 다음이 필요합니다.

WebGPU/WebGL을 지원하는
1. 최신 브라우저.
2. JavaScript에서 ONNX 모델을 실행하기 위한 ONNX.js 라이브러리입니다.
3. Kokoro.js 스크립트는 Kokoro-82M 모델의 로드 및 처리를 단순화합니다.

설치

package.json에 필요한 종속성을 포함하여 프로젝트를 설정할 수 있습니다.

<code>{
  "dependencies": {
    "@huggingface/transformers": "^3.3.1"
  }
}</code>

다음으로 이 저장소에서 사용할 수 있는 Kokoro.js 스크립트가 있는지 확인하세요.

모델 로딩

브라우저에서 Kokoro-82M ONNX 모델을 로드하고 사용하려면 다음 단계를 따르세요.

<code class="language-javascript">this.model_instance = StyleTextToSpeech2Model.from_pretrained(
    this.modelId,
    {
        device: "wasm",
        progress_callback,
    }
);
this.tokenizer = AutoTokenizer.from_pretrained(this.modelId, {
   progress_callback,
});</code>

추론 실행

모델을 로드하고 텍스트를 처리한 후 추론을 실행하여 음성을 생성할 수 있습니다.

<code class="language-javascript">const language = speakerId.at(0); // "a" 或 "b"
const phonemes = await phonemize(text, language);
const { input_ids } = await tokenizer(phonemes, { truncation: true });
const num_tokens = Math.max(
   input_ids.dims.at(-1) - 2, // 无填充；
   0
);
const offset = num_tokens * STYLE_DIM;
const data = await getVoiceData(speakerId as keyof typeof VOICES);
const voiceData = data.slice(offset, offset + STYLE_DIM);
const inputs = {
   input_ids,
   style: new Tensor("float32", voiceData, [1, STYLE_DIM]),
   speed: new Tensor("float32", [speed], [1]),
};

const { waveform } = await model(inputs);
const audio = new RawAudio(waveform.data, SAMPLE_RATE).toBlob();</code>

데모

이 내용은 내 라이브 데모인 Kitt AI Text to Speech에서 확인할 수 있습니다. 이 데모는 Kokoro-82M ONNX가 제공하는 실시간 텍스트 음성 변환 합성을 보여줍니다.

결론

브라우저에서 Kokoro-82M ONNX와 같은 TTS 모델을 실행하는 것은 개인 정보를 보호하고 대기 시간이 짧은 애플리케이션의 도약을 의미합니다. 단 몇 줄의 JavaScript 코드와 ONNX.js의 강력한 기능을 사용하여 사용자를 즐겁게 하는 고품질의 반응형 TTS 애플리케이션을 만들 수 있습니다. 접근성 도구, 음성 지원 또는 대화형 애플리케이션을 구축하는 경우 브라우저 내 TTS가 게임 체인저가 될 수 있습니다.

지금 Kitt AI 텍스트 음성 변환 데모를 사용해보고 직접 확인해 보세요!

참고자료

1. Hugging Face Transformers.js 문서
2. ModNet 모델
3. 웹GPU API
4. React 문서
5. 참조코드

위 내용은 브라우저에서 Kokoro- ONNX TTS 모델 실행의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!