Added music generation functionality successfully

app/(dashboard)/(routes)/music/constants.ts

@@ -0,0 +1,7 @@
+import * as z from "zod";
+
+export const formSchema = z.object({
+    prompt: z.string().min(1, {
+        message: "Music prompt is required"
+    }),
+});

app/(dashboard)/(routes)/music/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as z from "zod";
+import axios from "axios";
+import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { Music } from "lucide-react";
+
+import { Heading } from "@/components/heading";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Loader } from "@/components/loader";
+import { Empty } from "@/components/ui/empty";
+// import { useProModal } from "@/hooks/use-pro-modal";
+
+import { formSchema } from "./constants";
+
+const MusicPage = () => {
+    // const proModal = useProModal();
+    const router = useRouter();
+    const [music, setMusic] = useState<string>();
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            prompt: "",
+        }
+    });
+
+    const isLoading = form.formState.isSubmitting;
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        try {
+            setMusic(undefined);
+            const response = await axios.post('/api/music', values);
+            setMusic(response.data.audio);
+
+            form.reset();
+        } catch (error: any) {
+            if (error?.response?.status === 403) {
+                // proModal.onOpen();
+            } else {
+                toast.error("Something went wrong.");
+            }
+        } finally {
+            router.refresh();
+        }
+    }
+
+    return (
+        <div>
+            <Heading
+                title="Music Generation"
+                description="Turn your prompt into music."
+                icon={Music}
+                iconColor="text-emerald-500"
+                bgColor="bg-emerald-500/10"
+            />
+
+            <div className="px-4 lg:px-8">
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
+                    >
+                        <FormField
+                            name="prompt"
+                            render={({ field }) => (
+                                <FormItem className="col-span-12 lg:col-span-10">
+                                    <FormControl className="m-0 p-0">
+                                        <Input
+                                            className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
+                                            disabled={isLoading}
+                                            placeholder="Piano solo"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                        <Button className="col-span-12 lg:col-span-2 w-full" type="submit" disabled={isLoading} size="icon">
+                            Generate
+                        </Button>
+                    </form>
+                </Form>
+
+                {isLoading && (
+                    <div className="p-20">
+                        <Loader />
+                    </div>
+                )}
+
+                {!music && !isLoading && (
+                    <Empty label="No music generated." />
+                )}
+
+                {music && (
+                    <audio controls className="w-full mt-8">
+                        <source src={music} />
+                    </audio>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default MusicPage;

app/api/music/route.ts

@@ -0,0 +1,51 @@
+import Replicate from "replicate";
+import { auth } from "@clerk/nextjs";
+import { NextResponse } from "next/server";
+
+// import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
+// import { checkSubscription } from "@/lib/subscription";
+
+const replicate = new Replicate({
+    auth: process.env.REPLICATE_API_TOKEN!,
+});
+
+export async function POST(req: Request) {
+    try {
+        const { userId } = auth();
+        const body = await req.json();
+        const { prompt } = body;
+
+        if (!userId) {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        if (!prompt) {
+            return new NextResponse("Prompt is required", { status: 400 });
+        }
+
+        // const freeTrial = await checkApiLimit();
+        // const isPro = await checkSubscription();
+
+        // if (!freeTrial && !isPro) {
+        //     return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
+        // }
+
+        const response = await replicate.run(
+            "riffusion/riffusion:8cf61ea6c56afd61d8f5b9ffd14d7c216c0a93844ce2d82ac1c9ecc9c7f24e05",
+            {
+                input: {
+                    prompt_a: prompt
+                }
+            }
+        );
+
+        // if (!isPro) {
+        //     await incrementApiLimit();
+        // }
+
+        return NextResponse.json(response);
+    } catch (error) {
+        console.log('[MUSIC_ERROR]', error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+};

package.json

@@ -34,6 +34,7 @@
     "react-hook-form": "^7.45.2",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^8.0.7",
+    "replicate": "^0.14.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.6",

yarn.lock

@@ -3267,6 +3267,11 @@ remark-rehype@^10.0.0:
     mdast-util-to-hast "^12.1.0"
     unified "^10.0.0"
 
+replicate@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/replicate/-/replicate-0.14.0.tgz#e360f8cc11d81cdbac2fabe656536cf10586aa1b"
+  integrity sha512-joKcKHnQpgyZTg81ugUoJHXlaqsFkVJGUL2dZ8dbbkj0Zu0q/Yi0Nn7IiFxPtuR7KXdbfas8fWAlmukxtlAsiA==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"