File size: 1,935 Bytes
d73cf2d 97ac0b3 d73cf2d 97ac0b3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { useEffect, useState } from "react";
import { AutoModel, AutoProcessor } from "@huggingface/transformers";
export default function App() {
const [model, setModel] = useState(null);
const [processor, setProcessor] = useState(null);
const [text, setText] = useState("Hello! This is a test of Chatterbox Turbo.");
const [loading, setLoading] = useState(false);
useEffect(() => {
async function loadModel() {
setLoading(true);
const m = await AutoModel.from_pretrained(
"spacekaren/chatterbox-turbo-webgpu",
{
device: "webgpu",
dtype: "q4f16",
}
);
const p = await AutoProcessor.from_pretrained(
"spacekaren/chatterbox-turbo-webgpu"
);
setModel(m);
setProcessor(p);
setLoading(false);
}
loadModel();
}, []);
async function generateSpeech() {
if (!model || !processor) return;
setLoading(true);
const inputs = await processor(text);
const audio = await model.generate(inputs);
const blob = new Blob([audio], { type: "audio/wav" });
const url = URL.createObjectURL(blob);
const audioEl = new Audio(url);
audioEl.play();
setLoading(false);
}
return (
<div className="min-h-screen flex flex-col items-center justify-center p-6 gap-4">
<h1 className="text-2xl font-bold">Chatterbox Turbo WebGPU TTS</h1>
<textarea
className="w-full max-w-xl p-3 border rounded-xl"
rows={4}
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button
onClick={generateSpeech}
disabled={loading || !model}
className="px-6 py-3 bg-black text-white rounded-2xl shadow"
>
{loading ? "Loading / Generating..." : "Generate Speech"}
</button>
<p className="text-sm opacity-70">
Runs fully in-browser using WebGPU (~539MB model)
</p>
</div>
);
}
|