新增全语言翻译器

public/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M120-220v-80h80v80h-80Zm0-140v-80h80v80h-80Zm0-140v-80h80v80h-80ZM260-80v-80h80v80h-80Zm100-160q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480Zm40 240v-80h80v80h-80Zm-200 0q-33 0-56.5-23.5T120-160h80v80Zm340 0v-80h80q0 33-23.5 56.5T540-80ZM120-640q0-33 23.5-56.5T200-720v80h-80Zm420 80Z"/></svg>

public/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>

src/app/api/textinfo/route.ts

@@ -1,55 +1,27 @@
+import { callZhipuAPI } from "@/utils";
 import { NextRequest, NextResponse } from "next/server";
-import { env } from "process";
 
-const API_KEY = env.ZHIPU_API_KEY;
+async function getTextinfo(text: string) {
-
+    console.log(`get textinfo of ${text}`);
-async function callZhipuAPI(messages: { role: string, content: string }[], model = 'glm-4.5-flash') {
-    const url = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';
-
-    const response = await fetch(url, {
-        method: 'POST',
-        headers: {
-            'Authorization': 'Bearer ' + API_KEY,
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            model: model,
-            messages: messages,
-            temperature: 0.2,
-            thinking: {
-                type: 'disabled'
-            }
-        })
-    });
-
-    if (!response.ok) {
-        throw new Error(`API 调用失败: ${response.status}`);
-    }
-
-    return await response.json();
-}
-
-async function getIPAFromLLM(text: string) {
-    console.log(text);
     const messages = [
         {
             role: 'user', content: `
-请推断下面文本的语言，并返回其宽式国际音标(IPA)，以JSON格式
+请推断以下文本的语言、locale，生成宽式国际音标（IPA），以JSON格式返回
-[[TEXT]]
+[${text}]
 结果如：
 {
-"lang": "german",
+    "text": "你好。",
-"ipa": "[ˈɡuːtn̩ ˈtaːk]",
+    "lang": "mandarin",
-"locale": "de-DE"
+    "ipa": "[ni˨˩˦ xɑʊ˨˩˦]",
+    "locale": "zh-CN"
 }
 注意：
 直接返回json文本，
 ipa一定要加[]，
 lang的值是小写字母的英文的语言名称，
 locale如果可能有多个，选取最可能的一个，其中使用符号"-"
-`.replace('[TEXT]', text)
+`
-        }
+        }];
-    ];
     try {
         const response = await callZhipuAPI(messages);
         let to_parse = response.choices[0].message.content.trim() as string;
@@ -69,25 +41,21 @@ export async function GET(request: NextRequest) {
 
         if (!text) {
             return NextResponse.json(
-                { error: "查询参数错误", message: "text 参数是必需的" },
+                { error: "查询参数错误", message: "text参数是必需的" },
                 { status: 400 }
             );
         }
 
-        const ipaData = await getIPAFromLLM(text);
+        const textInfo = await getTextinfo(text);
-
+        if (!textInfo) {
-        if (!ipaData) {
             return NextResponse.json(
                 { error: "服务暂时不可用", message: "LLM API 请求失败" },
                 { status: 503 }
             );
         }
-
+        return NextResponse.json(textInfo, { status: 200 });
-        return NextResponse.json(ipaData, { status: 200 });
-
     } catch (error) {
         console.error('API 错误:', error);
-
         return NextResponse.json(
             { error: "服务器内部错误", message: "请稍后重试" },
             { status: 500 }

src/app/api/translate/route.ts

@@ -0,0 +1,73 @@
+import { callZhipuAPI } from "@/utils";
+import { NextRequest, NextResponse } from "next/server";
+
+async function translate(text: string, target_lang: string) {
+    console.log(`translate "${text}" into ${target_lang}`);
+    const messages = [
+        {
+            role: 'user', content: `
+请推断以下文本的语言、locale，生成宽式国际音标（IPA），并翻译到${target_lang}，同样需要语言、locale、IPA信息，以JSON格式返回
+[${text}]
+结果如：
+{
+    "source": {
+        "text": "你好。",
+        "lang": "mandarin",
+        "ipa": "[ni˨˩˦ xɑʊ˨˩˦]",
+        "locale": "zh-CN"
+    },
+    "target": {
+        "text": "Hallo.",
+        "lang": "german",
+        "ipa": " [haˈloː]",
+        "locale": "de-DE"
+    }
+}
+注意：
+直接返回json文本，
+ipa一定要加[]，
+lang的值是小写字母的英文的语言名称，
+locale如果可能有多个，选取最可能的一个，其中使用符号"-"
+`
+        }];
+    try {
+        const response = await callZhipuAPI(messages);
+        let to_parse = response.choices[0].message.content.trim() as string;
+        if (to_parse.startsWith('`')) to_parse = to_parse.slice(7, to_parse.length - 3);
+        if (to_parse.length === 0) throw Error('ai啥也每说');
+        return JSON.parse(to_parse);
+    } catch (error) {
+        console.error(error);
+        return null;
+    }
+}
+
+export async function GET(request: NextRequest) {
+    try {
+        const searchParams = request.nextUrl.searchParams;
+        const text = searchParams.get('text');
+        const target_lang = searchParams.get('target');
+
+        if (!text || !target_lang) {
+            return NextResponse.json(
+                { error: "查询参数错误", message: "text参数, target参数是必需的" },
+                { status: 400 }
+            );
+        }
+
+        const textInfo = await translate(text, target_lang);
+        if (!textInfo) {
+            return NextResponse.json(
+                { error: "服务暂时不可用", message: "LLM API 请求失败" },
+                { status: 503 }
+            );
+        }
+        return NextResponse.json(textInfo, { status: 200 });
+    } catch (error) {
+        console.error('API 错误:', error);
+        return NextResponse.json(
+            { error: "服务器内部错误", message: "请稍后重试" },
+            { status: 500 }
+        );
+    }
+}

src/app/ipa-reader/page.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import IPAForm from "./IPAForm";
-
-
-
-export default function Home() {
-
-
-  const [voicesData, setVoicesData] = useState<{
-    locale: string,
-    short_name: string
-  }[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  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>;
-  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>
-        <IPAForm voicesData={voicesData}></IPAForm>
-      </div>
-    </div>
-  );
-}

src/app/page.tsx

@@ -43,9 +43,9 @@ function LinkGrid() {
     <div className="grid grid-cols-1 grid-rows-6 md:grid-cols-3">
 
       <LinkArea
-        href="/ipa-reader"
+        href="/translator"
-        name="IPA朗读器"
+        name="翻译器"
-        description="生成任何已知语言的国际音标（IPA），大声朗读"
+        description="翻译到任何语言，并标注国际音标（IPA）"
         color="#a56068"></LinkArea>
       <LinkArea
         href="/word-board"

src/app/translator/IPAForm.tsx

@@ -1,7 +1,7 @@
 import Button from "@/components/Button";
 import { EdgeTTS } from "edge-tts-universal";
 import { useRef, useState } from "react";
-import useAudioPlayer from "./useAudioPlayer";
+import { useAudioPlayer } from "@/hooks/useAudioPlayer";
 
 export default function IPAForm(
     { voicesData }: {

src/app/translator/page.tsx

@@ -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>
+    </>
+  );
+}

src/components/Button.tsx

@@ -1,22 +1,19 @@
 export default function Button({
   label,
   onClick,
-  className,
+  className = '',
-  disabled
+  selected = false
 }: {
   label:
-  string, onClick?: () => void,
+  string,
+  onClick?: () => void,
   className?: string,
-  disabled?: boolean
+  selected?: boolean
 }) {
   return (
     <button
       onClick={onClick}
-      className={`px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300 ${className || ''}`}
+      className={`px-2 py-1 rounded shadow-2xs font-bold hover:bg-gray-300 hover:cursor-pointer ${selected ? 'bg-gray-300' : "bg-white"} ${className}`}
-      style={{
-        opacity: disabled ? 0.0 : 1,
-        cursor: disabled ? 'none' : 'pointer'
-      }}
     >
       {label}
     </button>

src/components/IconClick.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+
+interface IconClickProps {
+  src: string;
+  alt: string;
+  onClick?: () => void;
+}
+export default function IconClick(
+  { src, alt, onClick = () => { } }: IconClickProps) {
+  return (<>
+    <div onClick={onClick} className="hover:cursor-pointer hover:bg-gray-200 rounded-3xl p-1">
+      <Image
+        src={src}
+        width={32}
+        height={32}
+        alt={alt}
+      ></Image>
+    </div>
+  </>);
+}

src/hooks/useAudioPlayer.ts

@@ -1,6 +1,7 @@
 import { useRef, useEffect } from "react";
 
-export default function useAudioPlayer() {
+
+export function useAudioPlayer() {
     const audioRef = useRef<HTMLAudioElement | null>(null);
     useEffect(() => {
         audioRef.current = new Audio();
@@ -36,4 +37,4 @@ export default function useAudioPlayer() {
         pauseAudio,
         stopAudio
     };
-};
+}

src/utils.ts

@@ -1,3 +1,5 @@
+import { env } from "process";
+
 export function inspect(word: string) {
     const goto = (url: string) => {
         window.open(url, '_blank');
@@ -11,3 +13,30 @@ export function inspect(word: string) {
 export function urlGoto(url: string) {
     window.open(url, '_blank');
 }
+const API_KEY = env.ZHIPU_API_KEY;
+export async function callZhipuAPI(messages: { role: string; content: string; }[], model = 'glm-4.5-flash') {
+    const url = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';
+
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Authorization': 'Bearer ' + API_KEY,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            model: model,
+            messages: messages,
+            temperature: 0.2,
+            thinking: {
+                type: 'disabled'
+            }
+        })
+    });
+
+    if (!response.ok) {
+        throw new Error(`API 调用失败: ${response.status}`);
+    }
+
+    return await response.json();
+}
+