Ausführen des Kokoro-ONNX TTS-Modells im Browser

Fortschritte in der künstlichen Intelligenz und im maschinellen Lernen haben die Grenzen dessen, was im Browser möglich ist, erheblich erweitert. Das Ausführen von Text-to-Speech-Modellen (TTS) direkt im Browser eröffnet neue Möglichkeiten für Datenschutz, Geschwindigkeit und Komfort. In diesem Blogbeitrag erfahren Sie, wie Sie das Kokoro-82M ONNX TTS-Modell mithilfe einer JavaScript-Implementierung in einem Browser ausführen. Wenn Sie neugierig sind, können Sie es in meiner Demo testen: Kitt AI Text-to-Speech.

Warum TTS-Modelle im Browser ausführen?

Traditionell werden TTS-Modelle auf einem Server ausgeführt und erfordern eine Internetverbindung, um Eingaben zu senden und synthetisierte Sprache zu empfangen. Mit den Verbesserungen an WebGPU und ONNX.js können Sie jetzt jedoch erweiterte Modelle wie Kokoro-82M ONNX direkt im Browser ausführen. Das bringt viele Vorteile mit sich:

• Datenschutz: Ihre Textdaten verlassen niemals Ihr Gerät.
• Geringe Latenz: Eliminieren Sie Verzögerungen bei der Serverkommunikation.
• Offline-Zugriff: Funktioniert auch ohne aktive Internetverbindung.

Kokoro-82M ONNX-Übersicht

Das Kokoro-82M ONNX-Modell ist ein leichtes und dennoch effektives TTS-Modell, das für Inferenz auf dem Gerät optimiert ist. Es bietet eine hochwertige Sprachsynthese bei geringem Platzbedarf und eignet sich daher für Browserumgebungen.

Projekteinstellungen

Voraussetzungen

Um Kokoro-82M ONNX in Ihrem Browser auszuführen, benötigen Sie:

1. Moderne Browser mit WebGPU/WebGL-Unterstützung.
2. Die ONNX.js-Bibliothek zum Ausführen von ONNX-Modellen in JavaScript.
3. Kokoro.js-Skript, das das Laden und Verarbeiten von Kokoro-82M-Modellen vereinfacht.

Installation

Sie können Ihr Projekt einrichten, indem Sie die erforderlichen Abhängigkeiten in package.json einschließen:

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

Stellen Sie als Nächstes sicher, dass Sie über das Kokoro.js-Skript verfügen, das in diesem Repository verfügbar ist.

Modell wird geladen

Um das Kokoro-82M ONNX-Modell in Ihrem Browser zu laden und zu verwenden, befolgen Sie diese Schritte:

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

Inferenz ausführen

Nachdem Sie das Modell geladen und den Text verarbeitet haben, können Sie eine Inferenz ausführen, um Sprache zu generieren:

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

Demo

Sie können dies in meiner Live-Demo sehen: Kitt AI Text to Speech. Diese Demo zeigt die Echtzeit-Text-zu-Sprache-Synthese mit Kokoro-82M ONNX.

Fazit

Die Ausführung von TTS-Modellen wie dem Kokoro-82M ONNX im Browser stellt einen Fortschritt für Anwendungen dar, die die Privatsphäre schützen und eine geringe Latenz aufweisen. Mit nur wenigen Zeilen JavaScript-Code und der Leistungsfähigkeit von ONNX.js können Sie hochwertige, reaktionsfähige TTS-Anwendungen erstellen, die Ihre Benutzer begeistern. Unabhängig davon, ob Sie Barrierefreiheitstools, Sprachassistenten oder interaktive Anwendungen entwickeln, könnte TTS im Browser bahnbrechend sein.

Probieren Sie jetzt die Text-to-Speech-Demo von Kitt AI aus und überzeugen Sie sich selbst!

Referenzen

1. Umarmendes Gesicht Transformers.js-Dokumentation
2. ModNet-Modell
3. WebGPU-API
4. React Documentation
5. Referenzcode

Das obige ist der detaillierte Inhalt vonAusführen des Kokoro-ONNX TTS-Modells im Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!