...

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'}