...

messages/en-US.json

@@ -176,6 +176,7 @@
       "close": "Close",
       "success": "Text pair added to folder",
       "error": "Failed to add text pair to folder"
-    }
+    },
+    "autoSave": "Auto Save"
   }
 }

messages/zh-CN.json

@@ -176,6 +176,7 @@
       "close": "关闭",
       "success": "文本对已添加到文件夹",
       "error": "添加文本对到文件夹失败"
-    }
+    },
+    "autoSave": "自动保存"
   }
 }

src/app/(features)/translator/FolderSelector.tsx

@@ -0,0 +1,46 @@
+import Container from "@/components/cards/Container";
+import { useEffect, useState } from "react";
+import { folder } from "../../../../generated/prisma/browser";
+import { getFoldersByOwner } from "@/lib/services/folderService";
+import LightButton from "@/components/buttons/LightButton";
+
+interface FolderSelectorProps {
+  setSelectedFolderId: (id: number) => void;
+  username: string;
+  cancel: () => void;
+}
+
+const FolderSelector: React.FC<FolderSelectorProps> = ({
+  setSelectedFolderId,
+  username,
+  cancel,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [folders, setFolders] = useState<folder[]>([]);
+
+  useEffect(() => {
+    getFoldersByOwner(username)
+      .then(setFolders)
+      .then(() => setLoading(false));
+  }, []);
+
+  return (
+    <div
+      className={`bg-black/50 fixed inset-0 z-50 flex justify-center items-center`}
+    >
+      <Container className="p-6">
+        {(loading && <p>Loading...</p>) ||
+          (folders.length > 0 && (
+            <ul>
+              {folders.map((folder) => (
+                <li key={folder.id}>{folder.name}</li>
+              ))}
+            </ul>
+          )) || <p>No folders found</p>}
+        <LightButton onClick={cancel}>Cancel</LightButton>
+      </Container>
+    </div>
+  );
+};
+
+export default FolderSelector;

src/app/(features)/translator/page.tsx

@@ -8,16 +8,26 @@ import { useAudioPlayer } from "@/hooks/useAudioPlayer";
 import { TranslationHistorySchema } from "@/lib/interfaces";
 import { tlsoPush, tlso } from "@/lib/localStorageOperators";
 import { getTTSAudioUrl } from "@/lib/tts";
-import { letsFetch, shallowEqual } from "@/lib/utils";
+import { shallowEqual } from "@/lib/utils";
 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";
 
 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>("");
@@ -32,109 +42,108 @@ export default function TranslatorPage() {
   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 url = await getTTSAudioUrl(
-        text,
-        VOICES.find((v) => v.locale === locale)!.short_name,
-      );
-      await load(url);
-      lastTTS.current.text = text;
-      lastTTS.current.url = url;
+      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");
+      }
     }
-    play();
+    await play();
   };
 
   const translate = async () => {
+    if (!taref.current) return;
     if (processing) return;
+
     setProcessing(true);
 
-    if (!taref.current) return;
-    const text = taref.current.value;
+    const text1 = taref.current.value;
 
-    const newItem: {
+    const llmres: {
       text1: string | null;
       text2: string | null;
       locale1: string | null;
       locale2: string | null;
+      ipa1: string | null;
+      ipa2: string | null;
     } = {
-      text1: text,
+      text1: text1,
       text2: null,
       locale1: null,
       locale2: null,
+      ipa1: null,
+      ipa2: null,
     };
 
-    const checkUpdateLocalStorage = (item: typeof newItem) => {
-      if (item.text1 && item.text2 && item.locale1 && item.locale2) {
-        setHistory(tlsoPush(item as z.infer<typeof TranslationHistorySchema>));
+    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,
+          }),
+        );
+        historyUpdated = true;
       }
     };
-    const innerStates = {
-      text2: false,
-      ipa1: !genIpa,
-      ipa2: !genIpa,
-    };
-    const checkUpdateProcessStates = () => {
-      if (innerStates.ipa1 && innerStates.ipa2 && innerStates.text2)
-        setProcessing(false);
-    };
-    const updateState = (stateName: keyof typeof innerStates) => () => {
-      innerStates[stateName] = true;
-      checkUpdateLocalStorage(newItem);
-      checkUpdateProcessStates();
+    // 更新局部翻译状态
+    const updateState = (stateName: keyof typeof llmres, value: string) => {
+      llmres[stateName] = value;
+      checkUpdateLocalStorage();
     };
 
-    // Fetch locale for text1
-    letsFetch(
-      `/api/v1/locale?text=${encodeURIComponent(text)}`,
-      (locale: string) => {
-        newItem.locale1 = locale;
-      },
-      console.log,
-      () => {},
-    );
-
-    if (genIpa)
-      // Fetch IPA for text1
-      letsFetch(
-        `/api/v1/ipa?text=${encodeURIComponent(text)}`,
-        (ipa: string) => setIpaTexts((prev) => [ipa, prev[1]]),
-        console.log,
-        updateState("ipa1"),
-      );
-    // Fetch translation for text2
-    letsFetch(
-      `/api/v1/translate?text=${encodeURIComponent(text)}&lang=${encodeURIComponent(lang)}`,
-      (text2) => {
+    genTranslation(text1, lang)
+      .then(async (text2) => {
+        updateState("text2", text2);
         setTresult(text2);
-        newItem.text2 = text2;
-        if (genIpa)
-          // Fetch IPA for text2
-          letsFetch(
-            `/api/v1/ipa?text=${encodeURIComponent(text2)}`,
-            (ipa: string) => setIpaTexts((prev) => [prev[0], ipa]),
-            console.log,
-            updateState("ipa2"),
-          );
-        // Fetch locale for text2
-        letsFetch(
-          `/api/v1/locale?text=${encodeURIComponent(text2)}`,
-          (locale: string) => {
-            newItem.locale2 = locale;
-          },
-          console.log,
-          () => {},
-        );
-      },
-      console.log,
-      updateState("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 (
@@ -259,6 +268,27 @@ export default function TranslatorPage() {
           {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;
+              }
+              setAutoSave(checked);
+            }}
+            className="mr-2"
+          />
+          {t("autoSave")}
+        </label>
+      </div>
+
       {history.length > 0 && (
         <div className="m-6 flex flex-col items-center">
           <h1 className="text-2xl font-light">{t("history")}</h1>
@@ -300,6 +330,13 @@ export default function TranslatorPage() {
           {showAddToFolder && (
             <AddToFolder setShow={setShowAddToFolder} item={addToFolderItem!} />
           )}
+          {autoSave && !autoSaveFolderId && (
+            <FolderSelector
+              username={session.data!.user!.name as string}
+              cancel={() => setAutoSave(false)}
+              setSelectedFolderId={(id) => setAutoSaveFolderId(id)}
+            />
+          )}
         </div>
       )}
     </>

src/app/(features)/translator_old/AddToFolder.tsx

@@ -0,0 +1,84 @@
+import LightButton from "@/components/buttons/LightButton";
+import Container from "@/components/cards/Container";
+import { TranslationHistorySchema } from "@/lib/interfaces";
+import { useSession } from "next-auth/react";
+import { Dispatch, useEffect, useState } from "react";
+import z from "zod";
+import { folder } from "../../../../generated/prisma/browser";
+import { getFoldersByOwner } from "@/lib/services/folderService";
+import { Folder } from "lucide-react";
+import { createTextPair } from "@/lib/services/textPairService";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+
+interface AddToFolderProps {
+  item: z.infer<typeof TranslationHistorySchema>;
+  setShow: Dispatch<React.SetStateAction<boolean>>;
+}
+
+const AddToFolder: React.FC<AddToFolderProps> = ({ item, setShow }) => {
+  const session = useSession();
+  const [folders, setFolders] = useState<folder[]>([]);
+  const t = useTranslations("translator.add_to_folder");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const username = session.data!.user!.name as string;
+    getFoldersByOwner(username)
+      .then(setFolders)
+      .then(() => setLoading(false));
+  }, [session.data]);
+
+  if (session.status !== "authenticated") {
+    return (
+      <div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
+        <Container className="p-6">
+          <div>{t("notAuthenticated")}</div>
+        </Container>
+      </div>
+    );
+  }
+  return (
+    <div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
+      <Container className="p-6">
+        <h1>{t("chooseFolder")}</h1>
+        <div className="border border-gray-200 rounded-2xl">
+          {(loading && <span>...</span>) ||
+            (folders.length > 0 &&
+              folders.map((folder) => (
+                <button
+                  key={folder.id}
+                  className="p-2 flex items-center justify-start hover:bg-gray-50 gap-2 hover:cursor-pointer w-full border-b border-gray-200"
+                  onClick={() => {
+                    createTextPair({
+                      text1: item.text1,
+                      text2: item.text2,
+                      locale1: item.locale1,
+                      locale2: item.locale2,
+                      folders: {
+                        connect: {
+                          id: folder.id,
+                        },
+                      },
+                    })
+                      .then(() => {
+                        toast.success(t("success"));
+                        setShow(false);
+                      })
+                      .catch(() => {
+                        toast.error(t("error"));
+                      });
+                  }}
+                >
+                  <Folder />
+                  {t("folderInfo", { id: folder.id, name: folder.name })}
+                </button>
+              ))) || <div>{t("noFolders")}</div>}
+        </div>
+        <LightButton onClick={() => setShow(false)}>{t("close")}</LightButton>
+      </Container>
+    </div>
+  );
+};
+
+export default AddToFolder;

src/app/(features)/translator_old/page.tsx

@@ -0,0 +1,307 @@
+"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/localStorageOperators";
+import { getTTSAudioUrl } from "@/lib/tts";
+import { letsFetch, shallowEqual } from "@/lib/utils";
+import { Plus, Trash } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
+import z from "zod";
+import AddToFolder from "./AddToFolder";
+
+export default function TranslatorPage() {
+  const t = useTranslations("translator");
+
+  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 tts = async (text: string, locale: string) => {
+    if (lastTTS.current.text !== text) {
+      const url = await getTTSAudioUrl(
+        text,
+        VOICES.find((v) => v.locale === locale)!.short_name,
+      );
+      await load(url);
+      lastTTS.current.text = text;
+      lastTTS.current.url = url;
+    }
+    play();
+  };
+
+  const translate = async () => {
+    if (processing) return;
+    setProcessing(true);
+
+    if (!taref.current) return;
+    const text = taref.current.value;
+
+    const newItem: {
+      text1: string | null;
+      text2: string | null;
+      locale1: string | null;
+      locale2: string | null;
+    } = {
+      text1: text,
+      text2: null,
+      locale1: null,
+      locale2: null,
+    };
+
+    const checkUpdateLocalStorage = (item: typeof newItem) => {
+      if (item.text1 && item.text2 && item.locale1 && item.locale2) {
+        setHistory(tlsoPush(item as z.infer<typeof TranslationHistorySchema>));
+      }
+    };
+    const innerStates = {
+      text2: false,
+      ipa1: !genIpa,
+      ipa2: !genIpa,
+    };
+    const checkUpdateProcessStates = () => {
+      if (innerStates.ipa1 && innerStates.ipa2 && innerStates.text2)
+        setProcessing(false);
+    };
+    const updateState = (stateName: keyof typeof innerStates) => () => {
+      innerStates[stateName] = true;
+      checkUpdateLocalStorage(newItem);
+      checkUpdateProcessStates();
+    };
+
+    // Fetch locale for text1
+    letsFetch(
+      `/api/v1/locale?text=${encodeURIComponent(text)}`,
+      (locale: string) => {
+        newItem.locale1 = locale;
+      },
+      console.log,
+      () => {},
+    );
+
+    if (genIpa)
+      // Fetch IPA for text1
+      letsFetch(
+        `/api/v1/ipa?text=${encodeURIComponent(text)}`,
+        (ipa: string) => setIpaTexts((prev) => [ipa, prev[1]]),
+        console.log,
+        updateState("ipa1"),
+      );
+    // Fetch translation for text2
+    letsFetch(
+      `/api/v1/translate?text=${encodeURIComponent(text)}&lang=${encodeURIComponent(lang)}`,
+      (text2) => {
+        setTresult(text2);
+        newItem.text2 = text2;
+        if (genIpa)
+          // Fetch IPA for text2
+          letsFetch(
+            `/api/v1/ipa?text=${encodeURIComponent(text2)}`,
+            (ipa: string) => setIpaTexts((prev) => [prev[0], ipa]),
+            console.log,
+            updateState("ipa2"),
+          );
+        // Fetch locale for text2
+        letsFetch(
+          `/api/v1/locale?text=${encodeURIComponent(text2)}`,
+          (locale: string) => {
+            newItem.locale2 = locale;
+          },
+          console.log,
+          () => {},
+        );
+      },
+      console.log,
+      updateState("text2"),
+    );
+  };
+
+  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>
+      {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}>
+                <div 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>
+            ))}
+          </div>
+          {showAddToFolder && (
+            <AddToFolder setShow={setShowAddToFolder} item={addToFolderItem!} />
+          )}
+        </div>
+      )}
+    </>
+  );
+}

src/lib/actions/translatorActions.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import { getLLMAnswer } from "../ai";
+
+export const genIPA = async (text: string) => {
+  return (
+    "[" +
+    (
+      await getLLMAnswer(
+        `${text}\n请生成以上文本的严式国际音标，然后直接发给我，不要附带任何说明，不要擅自增减符号。`,
+      )
+    )
+      .replaceAll("[", "")
+      .replaceAll("]", "") +
+    "]"
+  );
+};
+
+export const genLocale = async (text: string) => {
+  return await getLLMAnswer(
+    `${text}\n推断以上文本的地区（locale），然后直接发给我，形如如zh-CN，不要附带任何说明，不要擅自增减符号。`,
+  );
+};
+
+export const genTranslation = async (text: string, targetLanguage: string) => {
+  return await getLLMAnswer(
+    `${text}\n请将以上文本翻译到${targetLanguage}，然后直接发给我，不要附带任何说明，不要擅自增减符号。`,
+  );
+};

src/lib/localStorageOperators.ts

@@ -10,6 +10,7 @@ const MAX_HISTORY_LENGTH = 50;
 export const tlso = getLocalStorageOperator<
   typeof TranslationHistoryArraySchema
 >("translator", TranslationHistoryArraySchema);
+
 export const tlsoPush = (item: z.infer<typeof TranslationHistorySchema>) => {
   const oldHistory = tlso.get();
   if (oldHistory.some((v) => shallowEqual(v, item))) return oldHistory;