...

src/app/api/ipa/route.ts

@@ -1,14 +1,45 @@
-import { getIPA } from "@/utils";
+import { GoogleGenAI } from "@google/genai";
 import { NextRequest, NextResponse } from "next/server";
+import { env } from "process";
+
+const api_key = env.GEMINI_API_KEY;
+const ai = new GoogleGenAI(api_key ? { apiKey: api_key } : {});
+const prompt = `[TEXT]
+请推断以上文本的语言，并返回其宽式国际音标(IPA)，以JSON格式
+如：
+{
+"lang": "german",
+"ipa": "[ˈɡuːtn̩ ˈtaːk]"
+}
+注意：直接返回json文本，
+不要带markdown记号，
+ipa一定要加[]，
+lang的值是小写英语的语言名称`;
+
+async function getIPAFromGemini(text: string) {
+    const response = await ai.models.generateContent({
+        model: "gemini-2.5-flash",
+        contents: prompt.replace("[TEXT]", text),
+    });
+    if (response.text === undefined) return null;
+    return JSON.parse(response.text);
+}
+
+export async function ggetIPA(text: string): Promise<{ lang: string, ipa: string } | null> {
+    return {
+        lang: `(这是的${text}的lang)`,
+        ipa: `(这是的${text}的ipa)`
+    };
+}
 
 export async function GET(request: NextRequest) {
     const searchParams = request.nextUrl.searchParams;
 
     const text = searchParams.get('text');
-    if (!text) return NextResponse.json({ 'error': 400 }, { status: 400 });
+    if (!text) return NextResponse.json("查询参数错误", { status: 400 });
 
-    const r = await getIPA(text);
-    if (r === null) return NextResponse.json({ 'error': 424 }, { status: 424 });
+    const r = await getIPAFromGemini(text);
+    if (r === null) return NextResponse.json("Gemini Api请求失败", { status: 424 });
 
     return NextResponse.json({ r }, { status: 200 });
 }

src/app/ipa-reader/page.tsx

@@ -1,20 +1,38 @@
 "use client";
 
 import Button from "@/components/Button";
-import { getIPA, urlGoto } from "@/utils";
 import { useRef, useState } from "react";
 
 export default function Home() {
   const respref = useRef<HTMLParagraphElement>(null);
   const inputref = useRef<HTMLTextAreaElement>(null);
   const [ipa_result, set_ipa_result] = useState<{ lang: string, ipa: string } | null>(null);
+  const [genaiEnabled, setGenaiEnabled] = useState<boolean>(true);
 
   const generateIPA = () => {
+    if (!genaiEnabled) return;
+    setGenaiEnabled(false);
+
     const text = inputref.current!.value.trim();
     if (text.length === 0) return;
-    getIPA(text).then((result: { lang: string, ipa: string } | null) => {
-      set_ipa_result(result);
-    });
+
+    const params = new URLSearchParams({ text: text });
+    fetch(`/api/ipa?${params}`)
+      .then(response => {
+        if (response.ok) {
+          return response.json().then((data) => {
+            set_ipa_result(data);
+          });
+        } else {
+          return response.text()
+            .then(errorText => {
+              console.error(errorText);
+            });
+        }
+      })
+      .finally(() => {
+        setGenaiEnabled(true);
+      });
   }
   const readIPA = () => {
     const text = inputref.current!.value.trim();
@@ -33,8 +51,9 @@ export default function Home() {
           </textarea>
         </div>
         <div className="m-2 flex-row flex gap-2">
-          <Button onClick={generateIPA} label="生成IPA"></Button>
+          <Button onClick={generateIPA} label="生成IPA" disabled={!genaiEnabled}></Button>
           <Button onClick={readIPA} label="朗读"></Button>
+          {/* <Button onClick={() => { setGenaiEnabled(!genaiEnabled) }} label="test"></Button> */}
         </div>
         <div ref={respref} className="whitespace-pre-line">
           语言：{ipa_result?.lang}{'\n'}

src/components/Button.tsx

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

src/utils.ts

@@ -1,6 +1,3 @@
-import { GoogleGenAI } from "@google/genai";
-import { env } from "process";
-
 export function inspect(word: string) {
     const goto = (url: string) => {
         window.open(url, '_blank');
@@ -14,32 +11,3 @@ export function inspect(word: string) {
 export function urlGoto(url: string) {
     window.open(url, '_blank');
 }
-
-const api_key = env.GEMINI_API_KEY;
-const ai = new GoogleGenAI(api_key ? { apiKey: api_key } : {});
-const prompt = `[TEXT]
-请推断以上文本的语言，并返回其宽式国际音标(IPA)，以JSON格式
-如：
-{
-"lang": "german",
-"ipa": "[ˈɡuːtn̩ ˈtaːk]"
-}
-注意：直接返回json文本，
-不要带markdown记号，
-ipa一定要加[]，
-lang的值是小写英语的语言名称`;
-export async function getIPA(text: string) {
-    const response = await ai.models.generateContent({
-        model: "gemini-2.5-flash",
-        contents: prompt.replace("[TEXT]", text),
-    });
-    if (response.text === undefined) return null;
-    return JSON.parse(response.text);
-}
-
-export async function ggetIPA(text: string): Promise<{ lang: string, ipa: string } | null> {
-    return {
-        lang: `(这是的${text}的lang)`,
-        ipa: `(这是的${text}的ipa)`
-    };
-}