Kokoro-ONNX TTS モデルをブラウザで実行する-jsチュートリアル-php.cn

Kokoro-ONNX TTS モデルをブラウザで実行する

Linda Hamilton

リリース： 2025-01-17 14:31:10

オリジナル

926 人が閲覧しました

Running Kokoro- ONNX TTS Model in the Browser

人工知能と機械学習の進歩により、ブラウザ内でできることの限界が大幅に拡大しました。ブラウザ内でテキスト読み上げ (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 を実行するには、次のものが必要です:

最新ブラウザ。
JavaScript で ONNX モデルを実行するための ONNX.js ライブラリ。
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 テキスト読み上げデモを今すぐ試して、自分の目で確かめてください!