65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import Button from "@/components/Button";
|
||
import { useRef, useState } from "react";
|
||
|
||
export default function Home() {
|
||
const respref = useRef<HTMLParagraphElement>(null);
|
||
const inputref = useRef<HTMLTextAreaElement>(null);
|
||
const [reqEnabled, setReqEnabled] = useState<boolean>(true);
|
||
|
||
const generateIPA = () => {
|
||
if (!reqEnabled) return;
|
||
setReqEnabled(false);
|
||
|
||
respref.current!.innerText = '正在生成国际音标（IPA），请稍等～'
|
||
|
||
const text = inputref.current!.value.trim();
|
||
if (text.length === 0) return;
|
||
|
||
const params = new URLSearchParams({ text: text });
|
||
fetch(`/api/ipa?${params}`)
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
return response.json().then(resj => {
|
||
throw new Error(`HTTP ${response.status}: ${resj.error} ${resj.message}`);
|
||
})
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
respref.current!.innerText = `LANG: ${data.lang}\nIPA:${data.ipa}`;
|
||
})
|
||
.catch(error => {
|
||
respref.current!.innerText = `错误: ${error.message}`;
|
||
})
|
||
.finally(() => {
|
||
setReqEnabled(true);
|
||
});
|
||
}
|
||
const readIPA = () => {
|
||
const text = inputref.current!.value.trim();
|
||
if (text.length === 0) return;
|
||
// urlGoto(`https://fanyi.baidu.com/gettts?lan=uk&text=${text}&spd=3`);
|
||
respref.current!.innerText = '暂不支持朗读';
|
||
}
|
||
return (
|
||
<div className="flex w-screen justify-center">
|
||
<div className="mt-8 bg-gray-100 shadow-xl rounded-xl p-4 flex items-center flex-col">
|
||
<h1 className="text-5xl mb-4">IPA Reader</h1>
|
||
<div className="flex flex-row">
|
||
<textarea ref={inputref}
|
||
placeholder="输入任意语言的文本"
|
||
className="w-64 h-32 border-gray-300 border rounded focus:outline-blue-400 focus:outline-2">
|
||
</textarea>
|
||
</div>
|
||
<div className="m-2 flex-row flex gap-2">
|
||
<Button onClick={generateIPA} label="生成IPA"></Button>
|
||
<Button onClick={readIPA} label="朗读"></Button>
|
||
</div>
|
||
<div ref={respref} className="whitespace-pre-line"></div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|