Exécution du modèle Kokoro-ONNX TTS dans le navigateur

Les progrès de l'intelligence artificielle et de l'apprentissage automatique ont considérablement repoussé les limites de ce qui est possible dans le navigateur. L'exécution de modèles de synthèse vocale (TTS) directement dans le navigateur ouvre de nouvelles opportunités en matière de confidentialité, de rapidité et de commodité. Dans cet article de blog, nous explorerons comment exécuter le modèle Kokoro-82M ONNX TTS dans un navigateur à l'aide d'une implémentation JavaScript. Si vous êtes curieux, vous pouvez le tester dans ma démo : Kitt AI Text-to-Speech.

Pourquoi exécuter des modèles TTS dans le navigateur ?

Traditionnellement, les modèles TTS sont exécutés sur un serveur et nécessitent une connexion Internet pour envoyer des entrées et recevoir la parole synthétisée. Cependant, grâce aux améliorations apportées à WebGPU et ONNX.js, vous pouvez désormais exécuter des modèles avancés comme le Kokoro-82M ONNX directement dans le navigateur. Cela apporte de nombreux avantages :

• Confidentialité : Vos données texte ne quittent jamais votre appareil.
• Faible latence : éliminez les retards de communication du serveur.
• Accès hors ligne : fonctionne même sans connexion Internet active.

Présentation du Kokoro-82M ONNX

Le modèle Kokoro-82M ONNX est un modèle TTS léger mais efficace optimisé pour l'inférence sur l'appareil. Il fournit une synthèse vocale de haute qualité tout en conservant un faible encombrement, ce qui le rend adapté aux environnements de navigateur.

Paramètres du projet

Prérequis

Pour exécuter Kokoro-82M ONNX dans votre navigateur, vous avez besoin de :

1. Navigateurs modernes avec prise en charge WebGPU/WebGL.
2. La Bibliothèque ONNX.js pour exécuter des modèles ONNX en JavaScript.
3. Script Kokoro.js, qui simplifie le chargement et le traitement des modèles Kokoro-82M.

Installation

Vous pouvez configurer votre projet en incluant les dépendances nécessaires dans package.json :

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

Ensuite, assurez-vous d'avoir le script Kokoro.js, qui est disponible dans ce référentiel.

Chargement du modèle

Pour charger et utiliser le modèle Kokoro-82M ONNX dans votre navigateur, suivez ces étapes :

<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>

Exécuter l'inférence

Après avoir chargé le modèle et traité le texte, vous pouvez exécuter l'inférence pour générer de la parole :

<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>

Démo

Vous pouvez le voir dans ma démo en direct : Kitt AI Text to Speech. Cette démo présente la synthèse texte-parole en temps réel optimisée par Kokoro-82M ONNX.

Conclusion

L'exécution de modèles TTS comme le Kokoro-82M ONNX dans le navigateur représente un pas en avant pour les applications préservant la confidentialité et à faible latence. Avec seulement quelques lignes de code JavaScript et la puissance d'ONNX.js, vous pouvez créer des applications TTS réactives et de haute qualité qui raviront vos utilisateurs. Que vous créiez des outils d'accessibilité, des assistants vocaux ou des applications interactives, la TTS intégrée au navigateur pourrait changer la donne.

Essayez dès maintenant la démo de synthèse vocale de Kitt AI et voyez par vous-même !

Références

1. Documentation Transformers.js Hugging Face
2. Modèle ModNet
3. API WebGPU
4. Documentation React
5. Code de référence

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!