Spaces:
Running
Running
File size: 1,656 Bytes
68185ce |
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 |
/**
* Speak text using the browser's speech synthesis API.
* @param {string} text - The text to speak.
* @param {string} [voice] - The name of the voice to use (optional).
* @return {void}
*/
export function speak(text, voice = undefined) {
const utter = new window.SpeechSynthesisUtterance(text);
if (voice) {
const voices = window.speechSynthesis.getVoices();
const match = voices.find((v) => v.name === voice);
if (match) utter.voice = match;
}
window.speechSynthesis.speak(utter);
}
export default (input, output) =>
React.createElement(
"div",
{ className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
React.createElement(
"div",
{ className: "flex items-center mb-2" },
React.createElement(
"div",
{
className:
"w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
},
"🔊",
),
React.createElement(
"h3",
{ className: "text-blue-900 font-semibold" },
"Speech Synthesis",
),
),
React.createElement(
"div",
{ className: "text-sm space-y-1" },
React.createElement(
"p",
{ className: "text-blue-700 font-medium" },
`Speaking: "${input.text || "Unknown text"}"`,
),
input.voice &&
React.createElement(
"p",
{ className: "text-blue-600 text-xs" },
`Voice: ${input.voice}`,
),
React.createElement(
"p",
{ className: "text-blue-600 text-xs" },
typeof output === "string" ? output : "Speech completed successfully",
),
),
);
|