377 lines
12 KiB
TypeScript
377 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import LightButton from "@/components/buttons/LightButton";
|
|
import IconClick from "@/components/IconClick";
|
|
import IMAGES from "@/config/images";
|
|
import { VOICES } from "@/config/locales";
|
|
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
|
import { TranslationHistorySchema } from "@/lib/interfaces";
|
|
import { tlsoPush, tlso } from "@/lib/browser/localStorageOperators";
|
|
import { getTTSAudioUrl } from "@/lib/browser/tts";
|
|
import { Plus, Trash } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useRef, useState } from "react";
|
|
import z from "zod";
|
|
import AddToFolder from "./AddToFolder";
|
|
import {
|
|
genIPA,
|
|
genLocale,
|
|
genTranslation,
|
|
} from "@/lib/actions/translatorActions";
|
|
import { toast } from "sonner";
|
|
import FolderSelector from "./FolderSelector";
|
|
import { useSession } from "next-auth/react";
|
|
import { createPair } from "@/lib/actions/services/pairService";
|
|
import { shallowEqual } from "@/lib/utils";
|
|
|
|
export default function TranslatorPage() {
|
|
const t = useTranslations("translator");
|
|
|
|
const session = useSession();
|
|
|
|
const taref = useRef<HTMLTextAreaElement>(null);
|
|
const [lang, setLang] = useState<string>("chinese");
|
|
const [tresult, setTresult] = useState<string>("");
|
|
const [genIpa, setGenIpa] = useState(true);
|
|
const [ipaTexts, setIpaTexts] = useState(["", ""]);
|
|
const [processing, setProcessing] = useState(false);
|
|
const { load, play } = useAudioPlayer();
|
|
const [history, setHistory] = useState<
|
|
z.infer<typeof TranslationHistorySchema>[]
|
|
>(tlso.get());
|
|
const [showAddToFolder, setShowAddToFolder] = useState(false);
|
|
const [addToFolderItem, setAddToFolderItem] = useState<z.infer<
|
|
typeof TranslationHistorySchema
|
|
> | null>(null);
|
|
const lastTTS = useRef({
|
|
text: "",
|
|
url: "",
|
|
});
|
|
const [autoSave, setAutoSave] = useState(false);
|
|
const [autoSaveFolderId, setAutoSaveFolderId] = useState<number | null>(null);
|
|
|
|
const tts = async (text: string, locale: string) => {
|
|
if (lastTTS.current.text !== text) {
|
|
const shortName = VOICES.find((v) => v.locale === locale)?.short_name;
|
|
if (!shortName) {
|
|
toast.error("Voice not found");
|
|
return;
|
|
}
|
|
try {
|
|
const url = await getTTSAudioUrl(text, shortName);
|
|
await load(url);
|
|
lastTTS.current.text = text;
|
|
lastTTS.current.url = url;
|
|
} catch (error) {
|
|
toast.error("Failed to generate audio");
|
|
console.error(error);
|
|
}
|
|
}
|
|
await play();
|
|
};
|
|
|
|
const translate = async () => {
|
|
if (!taref.current) return;
|
|
if (processing) return;
|
|
|
|
setProcessing(true);
|
|
|
|
const text1 = taref.current.value;
|
|
|
|
const llmres: {
|
|
text1: string | null;
|
|
text2: string | null;
|
|
locale1: string | null;
|
|
locale2: string | null;
|
|
ipa1: string | null;
|
|
ipa2: string | null;
|
|
} = {
|
|
text1: text1,
|
|
text2: null,
|
|
locale1: null,
|
|
locale2: null,
|
|
ipa1: null,
|
|
ipa2: null,
|
|
};
|
|
|
|
let historyUpdated = false;
|
|
|
|
// 检查更新历史记录
|
|
const checkUpdateLocalStorage = () => {
|
|
if (historyUpdated) return;
|
|
if (llmres.text1 && llmres.text2 && llmres.locale1 && llmres.locale2) {
|
|
setHistory(
|
|
tlsoPush({
|
|
text1: llmres.text1,
|
|
text2: llmres.text2,
|
|
locale1: llmres.locale1,
|
|
locale2: llmres.locale2,
|
|
}),
|
|
);
|
|
if (autoSave && autoSaveFolderId) {
|
|
createPair({
|
|
text1: llmres.text1,
|
|
text2: llmres.text2,
|
|
locale1: llmres.locale1,
|
|
locale2: llmres.locale2,
|
|
folder: {
|
|
connect: {
|
|
id: autoSaveFolderId,
|
|
},
|
|
},
|
|
})
|
|
.then(() => {
|
|
toast.success(
|
|
llmres.text1 + "保存到文件夹" + autoSaveFolderId + "成功",
|
|
);
|
|
})
|
|
.catch((error) => {
|
|
toast.error(
|
|
llmres.text1 +
|
|
"保存到文件夹" +
|
|
autoSaveFolderId +
|
|
"失败：" +
|
|
error.message,
|
|
);
|
|
});
|
|
}
|
|
historyUpdated = true;
|
|
}
|
|
};
|
|
// 更新局部翻译状态
|
|
const updateState = (stateName: keyof typeof llmres, value: string) => {
|
|
llmres[stateName] = value;
|
|
checkUpdateLocalStorage();
|
|
};
|
|
|
|
genTranslation(text1, lang)
|
|
.then(async (text2) => {
|
|
updateState("text2", text2);
|
|
setTresult(text2);
|
|
// 生成两个locale
|
|
genLocale(text1).then((locale) => {
|
|
updateState("locale1", locale);
|
|
});
|
|
genLocale(text2).then((locale) => {
|
|
updateState("locale2", locale);
|
|
});
|
|
// 生成俩IPA
|
|
if (genIpa) {
|
|
genIPA(text1).then((ipa1) => {
|
|
setIpaTexts((prev) => [ipa1, prev[1]]);
|
|
updateState("ipa1", ipa1);
|
|
});
|
|
genIPA(text2).then((ipa2) => {
|
|
setIpaTexts((prev) => [prev[0], ipa2]);
|
|
updateState("ipa2", ipa2);
|
|
});
|
|
}
|
|
})
|
|
.catch(() => {
|
|
toast.error("Translation failed");
|
|
})
|
|
.finally(() => {
|
|
setProcessing(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* TCard Component */}
|
|
<div className="w-screen flex flex-col md:flex-row md:justify-between gap-2 p-2">
|
|
{/* Card Component - Left Side */}
|
|
<div className="w-full md:w-1/2 flex flex-col-reverse gap-2">
|
|
{/* ICard1 Component */}
|
|
<div className="border border-gray-200 rounded-2xl w-full h-64 p-2">
|
|
<textarea
|
|
className="resize-none h-8/12 w-full focus:outline-0"
|
|
ref={taref}
|
|
onKeyDown={(e) => {
|
|
if (e.ctrlKey && e.key === "Enter") translate();
|
|
}}
|
|
></textarea>
|
|
<div className="ipa w-full h-2/12 overflow-auto text-gray-600">
|
|
{ipaTexts[0]}
|
|
</div>
|
|
<div className="h-2/12 w-full flex justify-end items-center">
|
|
<IconClick
|
|
src={IMAGES.copy_all}
|
|
alt="copy"
|
|
onClick={async () => {
|
|
await navigator.clipboard.writeText(
|
|
taref.current?.value || "",
|
|
);
|
|
}}
|
|
></IconClick>
|
|
<IconClick
|
|
src={IMAGES.play_arrow}
|
|
alt="play"
|
|
onClick={() => {
|
|
const t = taref.current?.value;
|
|
if (!t) return;
|
|
tts(t, tlso.get().find((v) => v.text1 === t)?.locale1 || "");
|
|
}}
|
|
></IconClick>
|
|
</div>
|
|
</div>
|
|
<div className="option1 w-full flex flex-row justify-between items-center">
|
|
<span>{t("detectLanguage")}</span>
|
|
<LightButton
|
|
selected={genIpa}
|
|
onClick={() => setGenIpa((prev) => !prev)}
|
|
>
|
|
{t("generateIPA")}
|
|
</LightButton>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Component - Right Side */}
|
|
<div className="w-full md:w-1/2 flex flex-col-reverse gap-2">
|
|
{/* ICard2 Component */}
|
|
<div className="bg-gray-100 rounded-2xl w-full h-64 p-2">
|
|
<div className="h-2/3 w-full overflow-y-auto">{tresult}</div>
|
|
<div className="ipa w-full h-1/6 overflow-y-auto text-gray-600">
|
|
{ipaTexts[1]}
|
|
</div>
|
|
<div className="h-1/6 w-full flex justify-end items-center">
|
|
<IconClick
|
|
src={IMAGES.copy_all}
|
|
alt="copy"
|
|
onClick={async () => {
|
|
await navigator.clipboard.writeText(tresult);
|
|
}}
|
|
></IconClick>
|
|
<IconClick
|
|
src={IMAGES.play_arrow}
|
|
alt="play"
|
|
onClick={() => {
|
|
tts(
|
|
tresult,
|
|
tlso.get().find((v) => v.text2 === tresult)?.locale2 || "",
|
|
);
|
|
}}
|
|
></IconClick>
|
|
</div>
|
|
</div>
|
|
<div className="option2 w-full flex gap-1 items-center flex-wrap">
|
|
<span>{t("translateInto")}</span>
|
|
<LightButton
|
|
selected={lang === "chinese"}
|
|
onClick={() => setLang("chinese")}
|
|
>
|
|
{t("chinese")}
|
|
</LightButton>
|
|
<LightButton
|
|
selected={lang === "english"}
|
|
onClick={() => setLang("english")}
|
|
>
|
|
{t("english")}
|
|
</LightButton>
|
|
<LightButton
|
|
selected={lang === "italian"}
|
|
onClick={() => setLang("italian")}
|
|
>
|
|
{t("italian")}
|
|
</LightButton>
|
|
<LightButton
|
|
selected={!["chinese", "english", "italian"].includes(lang)}
|
|
onClick={() => {
|
|
const newLang = prompt(t("enterLanguage"));
|
|
if (newLang) {
|
|
setLang(newLang);
|
|
}
|
|
}}
|
|
>
|
|
{t("other")}
|
|
</LightButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TranslateButton Component */}
|
|
<div className="w-screen flex justify-center items-center">
|
|
<button
|
|
className={`duration-150 ease-in text-xl font-extrabold border rounded-4xl p-3 border-gray-200 h-16 ${processing ? "bg-gray-200" : "bg-white hover:bg-gray-200 hover:cursor-pointer"}`}
|
|
onClick={translate}
|
|
>
|
|
{t("translate")}
|
|
</button>
|
|
</div>
|
|
|
|
{/* AutoSave Component */}
|
|
<div className="w-screen flex justify-center items-center">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={autoSave}
|
|
onChange={(e) => {
|
|
const checked = e.target.checked;
|
|
if (checked === true && !(session.status === "authenticated")) {
|
|
toast.warning("Please login to enable auto-save");
|
|
return;
|
|
}
|
|
if (checked === false) setAutoSaveFolderId(null);
|
|
setAutoSave(checked);
|
|
}}
|
|
className="mr-2"
|
|
/>
|
|
{t("autoSave")}
|
|
{autoSaveFolderId ? ` (${autoSaveFolderId})` : ""}
|
|
</label>
|
|
</div>
|
|
|
|
{history.length > 0 && (
|
|
<div className="m-6 flex flex-col items-center">
|
|
<h1 className="text-2xl font-light">{t("history")}</h1>
|
|
<div className="border border-gray-200 rounded-2xl m-4">
|
|
{history.toReversed().map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start"
|
|
>
|
|
<div className="flex-1 flex flex-col">
|
|
<p className="text-sm font-light">{item.text1}</p>
|
|
<p className="text-sm font-light">{item.text2}</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => {
|
|
setShowAddToFolder(true);
|
|
setAddToFolderItem(item);
|
|
}}
|
|
className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-8 h-8 flex justify-center items-center"
|
|
>
|
|
<Plus />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setHistory(
|
|
tlso.set(
|
|
tlso.get().filter((v) => !shallowEqual(v, item)),
|
|
) || [],
|
|
);
|
|
}}
|
|
className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-8 h-8 flex justify-center items-center"
|
|
>
|
|
<Trash />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{showAddToFolder && (
|
|
<AddToFolder setShow={setShowAddToFolder} item={addToFolderItem!} />
|
|
)}
|
|
{autoSave && !autoSaveFolderId && (
|
|
<FolderSelector
|
|
userId={Number(session.data!.user!.id)}
|
|
cancel={() => setAutoSave(false)}
|
|
setSelectedFolderId={(id) => setAutoSaveFolderId(id)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|