加快了TTS的速度，将IPA生成设置为可选项

public/changelog.txt

@@ -1,3 +1,4 @@
+2025.10.08 加快了TTS的速度，将IPA生成设置为可选项
 2025.10.07 新增文本朗读器，优化了视频播放器UI
 2025.10.06 更新了主页面UI，移除IPA生成与文本朗读功能，新增全语言翻译器
 2025.10.05 新增IPA生成与文本朗读功能

src/app/api/ipa/route.ts

@@ -0,0 +1,64 @@
+import { callZhipuAPI } from "@/utils";
+import { NextRequest, NextResponse } from "next/server";
+
+async function getIPA(text: string) {
+    console.log(`get ipa of ${text}`);
+    const messages = [
+        {
+            role: 'user', content: `
+请推断以下文本的语言，生成对应的宽式国际音标（IPA）以及locale，以JSON格式返回
+[${text}]
+结果如：
+{
+    "ipa": "[ni˨˩˦ xɑʊ˨˩˦]",
+    "locale": "zh-CN"
+}
+注意：
+直接返回json文本，
+ipa一定要加[]，
+locale如果可能有多个，选取最可能的一个，其中使用符号"-"，
+locale如果推断失败，就返回{"locale": "en-US"}
+`
+        }];
+    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');
+
+        if (!text) {
+            return NextResponse.json(
+                { error: "查询参数错误", message: "text参数是必需的" },
+                { status: 400 }
+            );
+        }
+
+        const textInfo = await getIPA(text);
+        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/api/locale/route.ts

@@ -0,0 +1,62 @@
+import { callZhipuAPI } from "@/utils";
+import { NextRequest, NextResponse } from "next/server";
+
+async function getLocale(text: string) {
+    console.log(`get locale of ${text}`);
+    const messages = [
+        {
+            role: 'user', content: `
+请推断以下文本的的locale，以JSON格式返回
+[${text}]
+结果如：
+{
+    "locale": "zh-CN"
+}
+注意：
+直接返回json文本，
+locale如果可能有多个，选取最可能的一个，其中使用符号"-"，
+locale如果推断失败，就返回{"locale": "en-US"}
+`
+        }];
+    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');
+
+        if (!text) {
+            return NextResponse.json(
+                { error: "查询参数错误", message: "text参数是必需的" },
+                { status: 400 }
+            );
+        }
+
+        const textInfo = await getLocale(text.slice(0, 30));
+        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/api/translate/route.ts

@@ -6,28 +6,18 @@ async function translate(text: string, target_lang: string) {
     const messages = [
         {
             role: 'user', content: `
-请推断以下文本的语言、locale，生成宽式国际音标（IPA），并翻译到${target_lang}，同样需要语言、locale、IPA信息，以JSON格式返回
+请推断以下文本的语言、locale，并翻译到目标语言[${target_lang}]，同样需要locale信息，以JSON格式返回
 [${text}]
 结果如：
 {
-    "source": {
+    "source_locale": "zh-CN",
-        "text": "你好。",
+    "target_locale": "de-DE",
-        "lang": "mandarin",
+    "target_text": "Halo"
-        "ipa": "[ni˨˩˦ xɑʊ˨˩˦]",
-        "locale": "zh-CN"
-    },
-    "target": {
-        "text": "Hallo.",
-        "lang": "german",
-        "ipa": " [haˈloː]",
-        "locale": "de-DE"
-    }
 }
 注意：
 直接返回json文本，
-ipa一定要加[]，
+locale如果可能有多个，选取最可能的一个，其中使用符号"-"，
-lang的值是小写字母的英文的语言名称，
+locale如果推断失败，就当作是en-US
-locale如果可能有多个，选取最可能的一个，其中使用符号"-"
 `
         }];
     try {

src/app/text-speaker/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/Button";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
@@ -7,12 +8,13 @@ import { getTTSAudioUrl } from "@/utils";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 export default function Home() {
+    const [ipaEnabled, setIPAEnabled] = useState(false);
     const [speed, setSpeed] = useState(1);
     const [pause, setPause] = useState(true);
     const [autopause, setAutopause] = useState(true);
     const textRef = useRef('');
     const localeRef = useRef<string | null>(null);
-    const [ipa, setIPA] = useState<string | null>(null);
+    const [ipa, setIPA] = useState<string>('');
     const objurlRef = useRef<string | null>(null);
     const [processing, setProcessing] = useState(false);
 
@@ -56,6 +58,20 @@ export default function Home() {
         if (processing) return;
         setProcessing(true);
 
+        if (ipa.length === 0 && ipaEnabled && textRef.current.length !== 0) {
+            const params = new URLSearchParams({
+                text: textRef.current
+            });
+            fetch(`/api/ipa?${params}`)
+                .then(res => res.json())
+                .then(data => {
+                    setIPA(data.ipa);
+                }).catch(e => {
+                    console.error(e);
+                    setIPA('');
+                })
+        }
+
         if (pause) {
             // 如果没在读
             if (textRef.current.length === 0) {
@@ -70,12 +86,11 @@ export default function Home() {
                     // 第一次播放
                     console.log('downloading text info');
                     const params = new URLSearchParams({
-                        text: textRef.current
+                        text: textRef.current.slice(0, 30)
                     });
                     try {
-                        const textinfo = await (await fetch(`/api/textinfo?${params}`)).json();
+                        const textinfo = await (await fetch(`/api/locale?${params}`)).json();
                         localeRef.current = textinfo.locale;
-                        setIPA(textinfo.ipa);
 
                         const voice = voicesData.find(v => v.locale.startsWith(localeRef.current!));
                         if (!voice) throw 'Voice not found.';
@@ -98,7 +113,6 @@ export default function Home() {
 
                         setPause(true);
                         localeRef.current = null;
-                        setIPA(null);
 
                         setProcessing(false);
                     }
@@ -116,7 +130,7 @@ export default function Home() {
     const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
         textRef.current = e.target.value.trim();
         localeRef.current = null;
-        setIPA(null);
+        setIPA('');
         if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
         objurlRef.current = null;
         stopAudio();
@@ -142,6 +156,7 @@ export default function Home() {
                 {ipa}
             </div>
             <div className="w-full flex flex-row gap-2 justify-center items-center">
+                <Button label="generate ipa" selected={ipaEnabled} onClick={() => setIPAEnabled(!ipaEnabled)}></Button>
                 <IconClick size={45} onClick={() => {
                     setAutopause(!autopause); if (objurlRef) { stopAudio(); } setPause(true);
                 }} src={

src/app/translator/page.tsx

@@ -8,40 +8,21 @@ import IMAGES from "@/config/images";
 import { getTTSAudioUrl } from "@/utils";
 
 export default function Home() {
+  const [ipaEnabled, setIPAEnabled] = useState(true);
   const [voicesData, setVoicesData] = useState<{
     locale: string,
     short_name: string
   }[] | null>(null);
   const [loading, setLoading] = useState(true);
   const [targetLang, setTargetLang] = useState('Italian');
-  const nullTextInfo = {
+
-    source: {
+  const [sourceText, setSourceText] = useState('');
-      text: null,
+  const [targetText, setTargetText] = useState('');
-      language: null,
+  const [sourceIPA, setSourceIPA] = useState('');
-      ipa: null,
+  const [targetIPA, setTargetIPA] = useState('');
-      locale: null
+  const [sourceLocale, setSourceLocale] = useState<string | null>(null);
-    },
+  const [targetLocale, setTargetLocale] = useState<string | null>(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();
 
@@ -66,68 +47,140 @@ export default function Home() {
 
   const translate = () => {
     if (translating) return;
-    if (!textInfo.source.text || textInfo.source.text.length === 0) return;
+    if (sourceText.length === 0) return;
 
     setTranslating(true);
 
+    setTargetText('');
+    setSourceLocale(null);
+    setTargetLocale(null);
+    setSourceIPA('');
+    setTargetIPA('');
+
     const params = new URLSearchParams({
-      text: textInfo.source.text,
+      text: sourceText,
       target: targetLang
     })
     fetch(`/api/translate?${params}`)
       .then(res => res.json())
-      .then(setTextInfo)
+      .then(obj => {
-      .finally(() => setTranslating(false));
+        setSourceLocale(obj.source_locale);
+        setTargetLocale(obj.target_locale);
+        setTargetText(obj.target_text);
+
+        if (ipaEnabled) {
+          const params = new URLSearchParams({
+            text: sourceText
+          });
+          fetch(`/api/ipa?${params}`)
+            .then(res => res.json())
+            .then(data => {
+              setSourceIPA(data.ipa);
+            }).catch(e => {
+              console.error(e);
+              setSourceIPA('');
+            })
+          const params2 = new URLSearchParams({
+            text: obj.target_text
+          });
+          fetch(`/api/ipa?${params2}`)
+            .then(res => res.json())
+            .then(data => {
+              setTargetIPA(data.ipa);
+            }).catch(e => {
+              console.error(e);
+              setTargetIPA('');
+            })
+        }
+      }).catch(r => {
+        console.error(r);
+        setSourceLocale('');
+        setTargetLocale('');
+        setTargetText('');
+      }).finally(() => setTranslating(false));
   }
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setTextInfo({
+    setSourceText(e.target.value.trim());
-      source: {
+    setTargetText('');
-        text: e.target.value.trim(),
+    setSourceLocale(null);
-        language: null,
+    setTargetLocale(null);
-        ipa: null,
+    setSourceIPA('');
-        locale: null
+    setTargetIPA('');
-      },
-      target: {
-        text: null,
-        language: null,
-        ipa: null,
-        locale: null
-      }
-    });
   }
 
   const readSource = async () => {
-    if (!textInfo.source.text || textInfo.source.text.length === 0) return;
+    if (sourceText.length === 0) return;
 
-    if (!textInfo.source.locale) {
+    if (sourceIPA.length === 0 && ipaEnabled) {
-      const params = new URLSearchParams({ text: textInfo.source.text });
+      const params = new URLSearchParams({
-      const res = await fetch(`/api/textinfo?${params}`);
+        text: sourceText
+      });
+      fetch(`/api/ipa?${params}`)
+        .then(res => res.json())
+        .then(data => {
+          setSourceIPA(data.ipa);
+        }).catch(e => {
+          console.error(e);
+          setSourceIPA('');
+        })
+    }
+
+    if (!sourceLocale) {
+      try {
+        const params = new URLSearchParams({
+          text: sourceText.slice(0, 30)
+        });
+        const res = await fetch(`/api/locale?${params}`);
         const info = await res.json();
-      setTextInfo(
+        setSourceLocale(info.locale);
-        {
+
-          source: info,
+        const voice = voicesData.find(v => v.locale.startsWith(info.locale));
-          target: { ...textInfo.target }
-        }
-      );
-    }
-    const voice = voicesData.find(v => v.locale.startsWith(textInfo.source.locale!));
         if (!voice) {
           return;
         }
 
-    const url = await getTTSAudioUrl(textInfo.source.text, voice.short_name);
+        const url = await getTTSAudioUrl(sourceText, voice.short_name);
+        await playAudio(url);
+        URL.revokeObjectURL(url);
+      } catch (e) {
+        console.error(e);
+        setSourceLocale(null);
+        return;
+      }
+    } else {
+      const voice = voicesData.find(v => v.locale.startsWith(sourceLocale!));
+      if (!voice) {
+        return;
+      }
+
+      const url = await getTTSAudioUrl(sourceText, voice.short_name);
       await playAudio(url);
       URL.revokeObjectURL(url);
     }
+  }
 
   const readTarget = async () => {
-    if (!textInfo.target.text || textInfo.target.text.length === 0) return;
+    if (targetText.length === 0) return;
 
-    const voice = voicesData.find(v => v.locale.startsWith(textInfo.target.locale!));
+    if (targetIPA.length === 0 && ipaEnabled) {
+      const params = new URLSearchParams({
+        text: targetText
+      });
+      fetch(`/api/ipa?${params}`)
+        .then(res => res.json())
+        .then(data => {
+          setTargetIPA(data.ipa);
+        }).catch(e => {
+          console.error(e);
+          setTargetIPA('');
+        })
+    }
+
+    const voice = voicesData.find(v => v.locale.startsWith(targetLocale!));
     if (!voice) return;
 
-    const url = await getTTSAudioUrl(textInfo.target.text, voice.short_name);
+    const url = await getTTSAudioUrl(targetText, voice.short_name);
     await playAudio(url);
     URL.revokeObjectURL(url);
   }
@@ -139,32 +192,33 @@ export default function Home() {
           <div className="textarea1 border-1 border-gray-200 rounded-2xl w-full h-64 p-2">
             <textarea onChange={handleInputChange} className="resize-none h-8/12 w-full focus:outline-0"></textarea>
             <div className="ipa w-full h-2/12 overflow-auto text-gray-600">
-              {textInfo.source.ipa || ''}
+              {sourceIPA}
             </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)
+                if (sourceText.length !== 0)
-                  await navigator.clipboard.writeText(textInfo.source.text);
+                  await navigator.clipboard.writeText(sourceText);
               }} src={IMAGES.copy_all} alt="copy"></IconClick>
               <IconClick onClick={readSource} src={IMAGES.play_arrow} alt="play"></IconClick>
             </div>
           </div>
-          <div className="option1 w-full">
+          <div className="option1 w-full flex flex-row justify-between items-center">
             <span>detect language</span>
+            <Button label="generate ipa" selected={ipaEnabled} onClick={() => setIPAEnabled(!ipaEnabled)}></Button>
           </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-8/12 w-full">{
-              textInfo.target.text || ''
+              targetText
             }</div>
             <div className="ipa w-full h-2/12 overflow-auto text-gray-600">
-              {textInfo.target.ipa || ''}
+              {targetIPA}
             </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)
+                if (targetText.length !== 0)
-                  await navigator.clipboard.writeText(textInfo.target.text);
+                  await navigator.clipboard.writeText(targetText);
               }} src={IMAGES.copy_all} alt="copy"></IconClick>
               <IconClick onClick={readTarget} src={IMAGES.play_arrow} alt="play"></IconClick>
             </div>