llm-hooks/dist/useTTS.js

A collection of useful React hooks for llm-related functionality

import { useState as g, useCallback as T } from "react";
import { TextSplitterStream as f, KokoroTTS as S } from "kokoro-js-zh";
import { useTranslation as _ } from "react-i18next";
const l = globalThis;
let t = l.__TTS || { model: null };
l.__TTS = t;
const v = ({ modelConfig: a = {
  modelName: "onnx-community/Kokoro-82M-v1.0-ONNX",
  dtype: "fp32",
  device: "webgpu"
} }) => {
  const [i, r] = g({
    isLoading: !1,
    isReady: !!t.model,
    error: null,
    progress: t.model ? 100 : 0
  }), { i18n: d } = _(), c = async () => {
    if (t.model) return t.model;
    r((e) => ({ ...e, isLoading: !0, error: null, progress: 0 }));
    try {
      const e = await S.from_pretrained(a.modelName, {
        dtype: a.dtype,
        device: a.device,
        progress_callback: (o) => {
          console.log(o), o.status === "progress" && o.file?.endsWith?.("onnx") && r((s) => ({ ...s, progress: o.progress || 0 }));
        },
        envConfig: {
          remoteHost: location.origin,
          remotePathTemplate: "{model}/",
          wasmPaths: `${location.origin}/onnx-wasm/`
        }
      });
      return t.model = e, r((o) => ({
        ...o,
        isLoading: !1,
        isReady: !0,
        progress: 100
      })), e;
    } catch (e) {
      throw r((o) => ({
        ...o,
        isLoading: !1,
        error: e instanceof Error ? e.message : "Failed to load TTS model"
      })), e;
    }
  }, m = T((e) => {
    const o = t.model;
    if (!o) throw new Error("TTS model not loaded. Call load() first.");
    const s = new f(), u = o.stream(s, {
      voice: d.language === "zh-CN" ? "zm_yunjian" : "af_maple"
    });
    console.log(o.list_voices());
    const p = (async () => {
      for await (const n of u)
        n.audio && e({ audio: n.audio.audio, text: n.text });
    })();
    return { splitter: s, ttsPromise: p };
  }, []);
  return {
    ...i,
    load: c,
    stream: m
  };
};
export {
  v as useTTS
};