新增全语言翻译器
This commit is contained in:
91
src/app/translator/IPAForm.tsx
Normal file
91
src/app/translator/IPAForm.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import Button from "@/components/Button";
|
||||
import { EdgeTTS } from "edge-tts-universal";
|
||||
import { useRef, useState } from "react";
|
||||
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
||||
|
||||
export default function IPAForm(
|
||||
{ voicesData }: {
|
||||
voicesData: {
|
||||
locale: string,
|
||||
short_name: string
|
||||
}[]
|
||||
}
|
||||
) {
|
||||
const respref = useRef<HTMLParagraphElement>(null);
|
||||
const inputref = useRef<HTMLTextAreaElement>(null);
|
||||
const [reqEnabled, setReqEnabled] = useState<boolean>(true);
|
||||
const [textInfo, setTextInfo] = useState<{
|
||||
lang: string,
|
||||
ipa: string,
|
||||
locale: string,
|
||||
text: string
|
||||
} | null>(null);
|
||||
const { playAudio, pauseAudio, stopAudio } = useAudioPlayer();
|
||||
const readIPA = async () => {
|
||||
if (!textInfo) {
|
||||
respref.current!.innerText = '请先生成IPA。';
|
||||
return;
|
||||
}
|
||||
const voice = voicesData.find(v => v.locale.startsWith(textInfo.locale));
|
||||
if (!voice) {
|
||||
respref.current!.innerText = '暂不支持朗读' + textInfo.lang;
|
||||
return;
|
||||
}
|
||||
const tts = new EdgeTTS(textInfo.text, voice.short_name);
|
||||
const result = await tts.synthesize();
|
||||
playAudio(URL.createObjectURL(result.audio));
|
||||
}
|
||||
const generateIPA = () => {
|
||||
if (!reqEnabled) return;
|
||||
setReqEnabled(false);
|
||||
|
||||
respref.current!.innerText = '生成国际音标中，请稍等～';
|
||||
let timer: NodeJS.Timeout;
|
||||
(() => {
|
||||
let count = 0;
|
||||
timer = setInterval(() => {
|
||||
respref.current!.innerText = '正在生成国际音标（IPA），请稍等～';
|
||||
respref.current!.innerText += `\n(waiting for ${++count}s)`
|
||||
}, 1000);
|
||||
})();
|
||||
|
||||
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 => {
|
||||
setTextInfo({ ...data, text: text });
|
||||
respref.current!.innerText = `LANG: ${data.lang}\nIPA: ${data.ipa}`;
|
||||
})
|
||||
.catch(error => {
|
||||
respref.current!.innerText = `错误: ${error.message}`;
|
||||
})
|
||||
.finally(() => {
|
||||
setReqEnabled(true);
|
||||
clearInterval(timer);
|
||||
});
|
||||
}
|
||||
|
||||
return (<>
|
||||
<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="朗读IPA"></Button>
|
||||
</div>
|
||||
<div ref={respref} className="whitespace-pre-line w-64"></div>
|
||||
</>)
|
||||
};
|
||||
187
src/app/translator/page.tsx
Normal file
187
src/app/translator/page.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { ChangeEvent, useEffect, useState } from "react";
|
||||
import Button from "@/components/Button";
|
||||
import IconClick from "@/components/IconClick";
|
||||
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
||||
import { EdgeTTS } from "edge-tts-universal/browser";
|
||||
|
||||
export default function Home() {
|
||||
const [voicesData, setVoicesData] = useState<{
|
||||
locale: string,
|
||||
short_name: string
|
||||
}[] | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [targetLang, setTargetLang] = useState('Italian');
|
||||
const nullTextInfo = {
|
||||
source: {
|
||||
text: null,
|
||||
language: null,
|
||||
ipa: null,
|
||||
locale: null
|
||||
},
|
||||
target: {
|
||||
text: null,
|
||||
language: null,
|
||||
ipa: null,
|
||||
locale: null
|
||||
}
|
||||
};
|
||||
const [textInfo, setTextInfo] = useState<{
|
||||
source: {
|
||||
text: string | null,
|
||||
language: string | null,
|
||||
ipa: string | null,
|
||||
locale: string | null
|
||||
},
|
||||
target: {
|
||||
text: string | null,
|
||||
language: string | null,
|
||||
ipa: string | null,
|
||||
locale: string | null
|
||||
}
|
||||
}>(nullTextInfo);
|
||||
const [translating, setTranslating] = useState(false);
|
||||
const { playAudio } = useAudioPlayer();
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/list_of_voices.json')
|
||||
.then(res => res.json())
|
||||
.then(setVoicesData)
|
||||
.catch(() => setVoicesData(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
if (loading) return <div>加载中...</div>;
|
||||
if (!voicesData) return <div>加载失败</div>;
|
||||
|
||||
const tl = ['English', 'Italian', 'Japanese'];
|
||||
|
||||
const inputLanguage = () => {
|
||||
const lang = prompt('Input a language.')?.trim();
|
||||
if (lang) {
|
||||
setTargetLang(lang);
|
||||
}
|
||||
}
|
||||
|
||||
const translate = () => {
|
||||
if (translating) return;
|
||||
if (!textInfo.source.text || textInfo.source.text.length === 0) return;
|
||||
|
||||
setTranslating(true);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
text: textInfo.source.text,
|
||||
target: targetLang
|
||||
})
|
||||
fetch(`/api/translate?${params}`)
|
||||
.then(res => res.json())
|
||||
.then(setTextInfo)
|
||||
.finally(() => setTranslating(false));
|
||||
}
|
||||
|
||||
const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setTextInfo({
|
||||
source: {
|
||||
text: e.target.value,
|
||||
language: null,
|
||||
ipa: null,
|
||||
locale: null
|
||||
},
|
||||
target: {
|
||||
text: null,
|
||||
language: null,
|
||||
ipa: null,
|
||||
locale: null
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const readSource = async () => {
|
||||
if (!textInfo.source.text || textInfo.source.text.length === 0) return;
|
||||
|
||||
if (!textInfo.source.locale) {
|
||||
const params = new URLSearchParams({ text: textInfo.source.text });
|
||||
const res = await fetch(`/api/textinfo?${params}`);
|
||||
const info = await res.json();
|
||||
setTextInfo(
|
||||
{
|
||||
source: info,
|
||||
target: { ...textInfo.target }
|
||||
}
|
||||
);
|
||||
}
|
||||
const voice = voicesData.find(v => v.locale.startsWith(textInfo.source.locale!));
|
||||
if (!voice) {
|
||||
return;
|
||||
}
|
||||
const tts = new EdgeTTS(textInfo.source.text, voice.short_name);
|
||||
const result = await tts.synthesize();
|
||||
playAudio(URL.createObjectURL(result.audio));
|
||||
}
|
||||
const readTarget = async () => {
|
||||
if (!textInfo.target.text || textInfo.target.text.length === 0) return;
|
||||
|
||||
const voice = voicesData.find(v => v.locale.startsWith(textInfo.target.locale!));
|
||||
if (!voice) {
|
||||
return;
|
||||
}
|
||||
const tts = new EdgeTTS(textInfo.target.text, voice.short_name);
|
||||
const result = await tts.synthesize();
|
||||
playAudio(URL.createObjectURL(result.audio));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-screen flex flex-col md:flex-row md:justify-between gap-2 p-2">
|
||||
<div className="card1 w-full md:w-1/2 flex flex-col-reverse gap-2">
|
||||
<div className="textarea1 border-1 border-gray-200 rounded-2xl w-full h-64 p-2">
|
||||
<textarea onChange={handleInputChange} className="resize-none h-9/12 w-full focus:outline-0"></textarea>
|
||||
<div className="ipa w-full h-1/12 scroll-auto text-gray-600">
|
||||
{textInfo.source.ipa || ''}
|
||||
</div>
|
||||
<div className="h-2/12 w-full flex justify-end items-center">
|
||||
<IconClick onClick={async () => {
|
||||
if (textInfo.source.text && textInfo.source.text.length !== 0)
|
||||
await navigator.clipboard.writeText(textInfo.source.text);
|
||||
}} src={'/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="copy"></IconClick>
|
||||
<IconClick onClick={readSource} src={'/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="play"></IconClick>
|
||||
</div>
|
||||
</div>
|
||||
<div className="option1 w-full">
|
||||
<span>detect language</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card2 w-full md:w-1/2 flex flex-col-reverse gap-2">
|
||||
<div className="textarea2 bg-gray-100 rounded-2xl w-full h-64 p-2">
|
||||
<div className="h-9/12 w-full">{
|
||||
textInfo.target.text || ''
|
||||
}</div>
|
||||
<div className="ipa w-full h-1/12 scroll-auto text-gray-600">
|
||||
{textInfo.target.ipa || ''}
|
||||
</div>
|
||||
<div className="h-2/12 w-full flex justify-end items-center">
|
||||
<IconClick onClick={async () => {
|
||||
if (textInfo.target.text && textInfo.target.text.length !== 0)
|
||||
await navigator.clipboard.writeText(textInfo.target.text);
|
||||
}} src={'/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="copy"></IconClick>
|
||||
<IconClick onClick={readTarget} src={'/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="play"></IconClick>
|
||||
</div>
|
||||
</div>
|
||||
<div className="option2 w-full flex gap-1 items-center flex-wrap">
|
||||
<span>translate into</span>
|
||||
<Button onClick={() => { setTargetLang('English') }} label="English" selected={targetLang === 'English'}></Button>
|
||||
<Button onClick={() => { setTargetLang('Italian') }} label="Italian" selected={targetLang === 'Italian'}></Button>
|
||||
<Button onClick={() => { setTargetLang('Japanese') }} label="Japanese" selected={targetLang === 'Japanese'}></Button>
|
||||
<Button onClick={inputLanguage} label={'Other' + (tl.includes(targetLang) ? '' : ': ' + targetLang)} selected={!(tl.includes(targetLang))}></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="button-area w-screen flex justify-center items-center">
|
||||
<button onClick={translate} className={`text-xl font-extrabold border rounded-4xl p-3 border-gray-200 h-16 ${translating ? 'bg-gray-200' : 'bg-white hover:bg-gray-200 hover:cursor-pointer'}`}>
|
||||
{translating ? 'translating...' : 'translate'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user