add udio songs

app/[locale]/(default)/_components/crumb/index.tsx

@@ -13,10 +13,10 @@ export default function ({ navs }: { navs: Nav[] }) {
   return (
     <Breadcrumb className="mb-8 text-base-content">
       <BreadcrumbList>
-        {navs.map((nav: Nav) => {
+        {navs.map((nav: Nav, idx: number) => {
           return (
             <>
-              <BreadcrumbItem className="cursor-pointer">
+              <BreadcrumbItem className="cursor-pointer" key={idx}>
                 {nav.active ? (
                   <BreadcrumbPage className="text-primary">
                     {nav.title}

app/[locale]/(default)/_components/generator/describe.tsx

@@ -1,53 +1,86 @@
 "use client";
 
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { toast } from "sonner";
+import { useAppContext } from "@/contexts/app";
+import { useTranslations } from "next-intl";
 
 export default function () {
+  const t = useTranslations("create.form");
+
+  const [description, setDescription] = useState("");
+  const [loading, setLoading] = useState(false);
+  const {
+    songTaskStep: step,
+    setSongTaskStep: setStep,
+    setSongTask,
+  } = useAppContext();
+
+  const fetchGenLyrics = async function (description: string) {
+    try {
+      const params = {
+        description,
+      };
+
+      setLoading(true);
+      const resp = await fetch("/api/gen-song-lyrics", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      });
+      setLoading(false);
+
+      const { code, message, data } = await resp.json();
+      if (code !== 0) {
+        toast.error(message);
+        return;
+      }
+
+      console.log("gen song lyrics:", data);
+      setSongTask(data || {});
+      setStep(2);
+    } catch (e) {
+      setLoading(false);
+
+      console.log("gen lyrics failed:", e);
+      toast.error("generate lyrics failed");
+    }
+  };
+
+  const handleSubmit = async function () {
+    if (!description) {
+      toast.error("please input song description");
+      return;
+    }
+
+    fetchGenLyrics(description);
+  };
+
   return (
     <div>
-      <h2 className="border-b border-base-200 py-4 text-lg font-bold">
-        #1. Describe Song
-      </h2>
-
       <div className="mt-4">
-        <p className="text-sm text-base-content">Song Description</p>
+        <p className="text-sm text-base-content">{t("description")}</p>
         <Textarea
-          placeholder="Describe the song you want to create."
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder={t("description_placeholder")}
           className="mt-2"
         />
       </div>
 
       <div className="mt-4">
-        <p className="text-sm text-base-content">Song Language</p>
-        <div className="mt-2">
-          <Select>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Select language" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>English</SelectLabel>
-                <SelectItem value="en">English</SelectItem>
-                <SelectItem value="zh">Chinese</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      <div className="mt-4">
-        <Button className="cursor-pointer">Generate Lyric</Button>
+        <Button
+          className="cursor-pointer"
+          disabled={loading}
+          onClick={handleSubmit}
+        >
+          {t("genlyrics")}
+        </Button>
       </div>
     </div>
   );

app/[locale]/(default)/_components/generator/index.tsx

@@ -1,13 +1,74 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 import Describe from "./describe";
+import Info from "./info";
+import Preview from "./preview";
 import Sign from "../sign";
+import Steps from "./steps";
 import { useAppContext } from "@/contexts/app";
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 
 export default function () {
+  const searchParams = useSearchParams();
   const { user } = useAppContext();
-  const [step, setStep] = useState("describe");
+  const {
+    songTaskStep: step,
+    setSongTaskStep: setStep,
+    setSongTask,
+  } = useAppContext();
+
+  const fetchTask = async function (taskid: string) {
+    try {
+      const params = {
+        task_uuid: taskid,
+      };
+      const resp = await fetch("/api/get-song-task", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      });
+      const { code, message, data } = await resp.json();
+      if (data) {
+        setSongTask(data);
+        if (data.song_uuids) {
+          setStep(3);
+        } else if (data.lyrics) {
+          setStep(2);
+        } else {
+          setStep(1);
+        }
+      }
+    } catch (e) {
+      console.log("fetch task failed:", e);
+    }
+  };
+
+  useEffect(() => {
+    const taskid = searchParams.get("taskid") as string;
+    if (taskid) {
+      fetchTask(taskid);
+    }
+  }, [searchParams]);
+
+  return (
+    <>
+      {user ? (
+        <div className="mt-8">
+          <Steps />
 
-  return <>{user ? <div>coming soon...</div> : <Sign />}</>;
+          <div className="max-w-xl mt-8">
+            {step === 1 && <Describe />}
+            {step === 2 && <Info />}
+            {step === 3 && <Preview />}
+          </div>
+        </div>
+      ) : (
+        <Sign />
+      )}
+    </>
+  );
 }