music generation

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+.env
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,25 @@
+# Dockerfile
+
+# Use an official Node.js runtime as the base image
+FROM node:18
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files to the container
+COPY . .
+
+# Build the Next.js application for production
+RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3002
+
+# Start the application
+CMD ["npm", "start"]

README.md

@@ -0,0 +1,14 @@
+---
+title: — AI Jukebox —
+header: mini
+short_description: Generate music powered by AI
+emoji: 🎶
+colorFrom: purple
+colorTo: pink
+sdk: docker
+app_port: 3002
+pinned: false
+license: mit
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/api/generate/cover/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest } from "next/server";
+
+export async function POST(
+  request: NextRequest,
+) {
+  const { prompt } = await request.json();
+
+  const response = await fetch("https://api-inference.huggingface.co/models/CiroN2022/cd-md-music", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${process.env.HF_TOKEN}`,
+      'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
+    },
+    body: JSON.stringify({
+      inputs: prompt,
+    }),
+  })
+  .then((response: any) => {
+    if (response.status !== 200) return Response.json({ status: 500, ok: false, message: response.statusText })
+
+    return response.arrayBuffer()
+  })
+  .then((response) => {
+    return Buffer.from(response)
+  })
+  .catch((error) => {
+    return {
+      error: error.message,
+    }
+  })
+
+  if ("error" in response) {
+    return Response.json({ status: 500, ok: false, message: response.error })
+  }
+
+  // buffer to blob
+  const image = Buffer.from(response).toString('base64')
+
+  return Response.json({
+    image: "data:image/png;base64," + image,
+  })
+  
+}

app/api/generate/title/route.ts

@@ -0,0 +1,49 @@
+import { NextRequest } from "next/server";
+
+export async function POST(
+  request: NextRequest,
+) {
+  const { prompt } = await request.json();
+
+  const response = await fetch("https://api-inference.huggingface.co/models/HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${process.env.HF_TOKEN}`,
+      'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
+    },
+    body: JSON.stringify({
+      inputs: `Generate and return only a music title based on the following prompt: ${prompt}`,
+      parameters: {
+        num_return_sequences: 1,
+        return_full_text: false
+      }
+    }),
+  })
+  .then((response: any) => {
+    if (response.status !== 200) return Response.json({ status: 500, ok: false, message: response.statusText })
+
+    return response.json()
+  })
+  .then((response) => {
+    let title = response?.[0]?.generated_text;
+    title = title?.substring(title.indexOf('"') + 1, title.lastIndexOf('"'))
+    return {
+      title: title,
+    }
+  })
+  .catch((error) => {
+    return {
+      error: error.message,
+    }
+  })
+
+  if ("error" in response) {
+    return Response.json({ status: 500, ok: false, message: response.error })
+  }
+
+  return Response.json({
+    title: response?.title,
+  })
+  
+}

app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "@/assets/globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,19 @@
+import { Form } from "@/components/form";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <section className="min-h-screen p-12 lg:p-24 bg-stone-950">
+      <Form>
+        <header>
+          <h1 className="text-white font-bold text-3xl">
+            Start making music with AI
+          </h1>
+          <h2 className="text-white/70 font-medium mt-2 text-lg">
+            In-browser text-to-music generation
+          </h2>
+        </header>
+      </Form>
+    </section>
+  );
+}

assets/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

components/form.tsx

@@ -0,0 +1,234 @@
+"use client";
+import Image from "next/image";
+import {
+  AutoTokenizer,
+  MusicgenForConditionalGeneration,
+  BaseStreamer,
+} from "@xenova/transformers";
+
+import { Prompt } from "@/components/prompt";
+import { Length } from "@/components/length";
+import { Styles } from "@/components/styles";
+import { Moods } from "@/components/moods";
+import { useGeneration } from "@/components/hooks/useGeneration";
+import { useState, useRef, useEffect } from "react";
+import { encodeWAV, MODEL_ID } from "@/utils";
+import classNames from "classnames";
+
+class CallbackStreamer extends BaseStreamer {
+  [x: string]: any;
+  constructor(callback_fn: any) {
+    super();
+
+    this.callback_fn = callback_fn;
+  }
+
+  put(value: any) {
+    return this.callback_fn(value);
+  }
+
+  end() {
+    return this.callback_fn();
+  }
+}
+
+export const Form = ({ children }: { children: React.ReactNode }) => {
+  const [modelLoaded, setModelLoaded] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [statusText, setStatusText] = useState("Loading model (656MB)...");
+  const [loadProgress, setLoadProgress] = useState({});
+  const [track, setTrack] = useState("");
+
+  const {
+    form,
+    setForm,
+    formattedPrompt,
+    generate,
+    results,
+    loading,
+    setResults,
+  } = useGeneration();
+
+  const modelPromise = useRef(null);
+  const tokenizerPromise = useRef(null);
+
+  useEffect(() => {
+    modelPromise.current ??= MusicgenForConditionalGeneration.from_pretrained(
+      MODEL_ID,
+      {
+        progress_callback: (data: any) => {
+          if (data.status !== "progress") return;
+          setLoadProgress((prev) => ({ ...prev, [data.file]: data }));
+        },
+        dtype: {
+          text_encoder: "q8",
+          decoder_model_merged: "q8",
+          encodec_decode: "fp32",
+        },
+        device: "wasm",
+      }
+    );
+    //@ts-ignore
+    tokenizerPromise.current ??= AutoTokenizer.from_pretrained(MODEL_ID);
+  }, []);
+
+  useEffect(() => {
+    const items = Object.values(loadProgress);
+    if (items.length !== 5) return; // 5 files to load
+    let loaded = 0;
+    let total = 0;
+    for (const data of Object.values(loadProgress)) {
+      loaded += data.loaded;
+      total += data.total;
+    }
+    const progress = loaded / total;
+    setProgress(progress);
+    setStatusText(
+      progress === 1
+        ? "Ready!"
+        : `Loading model (${(progress * 100).toFixed()}% of 656MB)...`
+    );
+    if (progress === 1) {
+      setTimeout(() => setModelLoaded(true), 1500);
+    }
+  }, [loadProgress]);
+
+  const generateMusic = async () => {
+    const tokenizer: any = await tokenizerPromise.current;
+    const model: any = await modelPromise.current;
+
+    if (!tokenizer || !model) return null;
+
+    const max_length = Math.min(
+      Math.max(Math.floor(form.length * 50), 1) + 4,
+      model?.generation_config?.max_length ?? 1500
+    );
+
+    const streamer = new CallbackStreamer((value: string) => {
+      const percent = value === undefined ? 1 : value[0].length / max_length;
+      setStatusText(`Generating (${(percent * 100).toFixed()}%)...`);
+      setProgress(percent);
+    });
+
+    const inputs = tokenizer(formattedPrompt);
+
+    const audio_values = await model.generate({
+      ...inputs,
+      max_length,
+      streamer,
+    });
+
+    setStatusText("Encoding audio...");
+
+    const sampling_rate = model.config.audio_encoder.sampling_rate;
+    const wav = encodeWAV(audio_values.data, sampling_rate);
+    const blob = new Blob([wav], { type: "audio/wav" });
+    setTrack(URL.createObjectURL(blob));
+    setStatusText("Done!");
+  };
+
+  console.log("track is", track);
+
+  return (
+    <main className="grid grid-cols-2 gap-20">
+      <div className="grid grid-cols-1 gap-10">
+        {children}
+        <Prompt
+          value={form.prompt}
+          onChange={(value) => setForm({ ...form, prompt: value })}
+        />
+        <Length
+          value={form.length}
+          onChange={(value) => setForm({ ...form, length: value })}
+        />
+        <Styles
+          value={form.style}
+          onChange={(value) => setForm({ ...form, style: value })}
+        />
+        <Moods
+          value={form.mood}
+          onChange={(value) => setForm({ ...form, mood: value })}
+        />
+      </div>
+      <div>
+        <div className="w-full sticky top-10">
+          <div className="border rounded-xl p-6 bg-stone-900/40 border-white/5">
+            <p className="text-amber-200 font-semibold text-xs uppercase mb-3">
+              Generated prompt
+            </p>
+            <p className="text-white text-xl font-semibold">
+              &quot;{formattedPrompt}&quot;
+            </p>
+          </div>
+          <button
+            className="rounded-xl bg-stone-900/90 border-white/5 border px-6 py-3 font-semibold text-base text-white mt-6 hover:brightness-125 transition-all duration-200"
+            onClick={() => {
+              generate();
+              generateMusic();
+            }}
+          >
+            Generate track
+          </button>
+          {(loading || results?.title || results?.cover) && (
+            <div className="mt-6 space-y-6 flex flex-col">
+              {results.cover ? (
+                <Image
+                  src={results.cover}
+                  alt="Cover art"
+                  className="w-[300px] h-[300px] object-contain bg-amber-950 rounded-xl mx-auto"
+                  width={300}
+                  height={300}
+                />
+              ) : (
+                <div className="w-[300px] h-[300px] bg-stone-900 animate-pulse rounded-xl mx-auto"></div>
+              )}
+              {results.title ? (
+                <p className="text-center text-white font-bold text-3xl">
+                  {results.title}
+                </p>
+              ) : (
+                <div className="w-[450px] h-8 bg-stone-900 animate-pulse rounded-xl mx-auto"></div>
+              )}
+              {modelLoaded &&
+                (track !== "" ? (
+                  <div className="mx-auto">
+                    <audio controls type="audio/wav" src={track} />
+                  </div>
+                ) : (
+                  <div className="mx-auto w-full max-w-sm border rounded-xl p-6 bg-amber-900/10 border-white/10 overflow-hidden transition-all duration-200">
+                    <p className="text-sm text-left mb-4 uppercase font-medium">
+                      {statusText}
+                    </p>
+                    <div className="bg-gray-200 h-2.5 w-full rounded-full overflow-hidden">
+                      <div
+                        className="from-amber-500 to-orange-500 bg-gradient-to-r h-full"
+                        style={{ width: `${100 * progress}%` }}
+                      ></div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          )}
+        </div>
+      </div>
+      <div
+        className={classNames(
+          "absolute right-10 bottom-10 w-full max-w-sm border rounded-xl p-6 bg-amber-900/10 border-white/10 overflow-hidden transition-all duration-200",
+          {
+            "opacity-0 pointer-events-none translate-y-full": modelLoaded,
+          }
+        )}
+      >
+        <p className="text-sm text-left mb-4 uppercase font-medium">
+          {statusText}
+        </p>
+        <div className="bg-gray-200 h-2.5 w-full rounded-full overflow-hidden">
+          <div
+            className="from-amber-500 to-orange-500 bg-gradient-to-r h-full"
+            style={{ width: `${100 * progress}%` }}
+          ></div>
+        </div>
+      </div>
+    </main>
+  );
+};

components/hooks/useGeneration.ts

@@ -0,0 +1,83 @@
+import { useMemo, useState } from "react"
+import { useUpdateEffect } from "react-use";
+
+import { LENGTHS, STYLES, MOODS } from "@/utils";
+
+export const useGeneration = () => {
+    const [form, setForm] = useState({
+    prompt: "80s pop track with bassy drums and synth",
+    length: LENGTHS[0].value,
+    style: STYLES[5].value,
+    mood: MOODS[4].value
+  });
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState<{ cover: string | null, title: string | null }>({
+    cover: null,
+    title: null,
+  });
+  const [timeCoverGenerated, setTimeCoverGenerated] = useState(0);
+
+  const formattedPrompt = useMemo(() => {
+    const stylePrompt = STYLES.find((style) => style.value === form.style)?.prompt;
+    const moodPrompt = MOODS.find((mood) => mood.value === form.mood)?.prompt;
+
+    return `${form.prompt} ${stylePrompt} ${moodPrompt ?? ""}`;
+  }, [form])
+
+  useUpdateEffect(() => {
+    if (results.cover && results.title) {
+      setLoading(false);
+    }
+  }, [results])
+
+  const generate = async () => {
+    setLoading(true);
+    let new_results = {
+      cover: null,
+      title: null,
+      track: null
+    }
+
+    fetch("/api/generate/cover", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        prompt: formattedPrompt
+      })
+    }).then((res) => res.json())
+    .then((res: any) => {
+      new_results.cover = res.image
+      setResults({
+        ...new_results,
+      })
+    })
+
+    fetch("/api/generate/title", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        prompt: form.prompt
+      })
+    }).then((res) => res.json())
+    .then((res: any) => {
+      new_results.title = res.title
+      setResults({
+        ...new_results,
+      })
+    })
+  }
+
+  return {
+    form,
+    setForm,
+    formattedPrompt,
+    generate,
+    results,
+    loading,
+    setResults,
+  }
+}

components/length.tsx

@@ -0,0 +1,69 @@
+import classNames from "classnames";
+import { useMemo, useRef, useState } from "react";
+import { useClickAway, useUpdateEffect } from "react-use";
+import { FiChevronDown } from "react-icons/fi";
+
+import { LENGTHS } from "@/utils";
+
+export const Length = ({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useClickAway(ref, () => {
+    setOpen(false);
+  });
+
+  const label = useMemo(() => {
+    return LENGTHS.find((length) => length.value === value)?.label;
+  }, [value]);
+
+  useUpdateEffect(() => {
+    setOpen(false);
+  }, [value]);
+
+  return (
+    <div ref={ref} className="max-w-max">
+      <p className="text-white font-semibold text-base mb-4">Prompt</p>
+      <div className="relative z-1">
+        <p
+          className="text-transparent bg-gradient-to-r from-blue-500 to-pink-500 bg-clip-text text-5xl font-extrabold cursor-pointer relative"
+          onClick={() => setOpen(!open)}
+        >
+          {label}s
+          <FiChevronDown
+            className={classNames(
+              "inline-block text-white text-2xl ml-2 transition-all duration-200",
+              {
+                "transform rotate-180": open,
+              }
+            )}
+          />
+        </p>
+        <ul
+          className={classNames(
+            "border-white/10 bg-black shadow-lg absolute top-14 p-3 left-0 w-full border border-gray-800 rounded-lg max-w-max z-20",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+        >
+          {LENGTHS.map((length) => (
+            <li
+              key={length.value}
+              className="text-white text-base hover:from-blue-500/40 hover:to-pink-500/40 bg-gradient-to-r transition-all duration-200 p-2 rounded-md cursor-pointer"
+              onClick={() => onChange(length.value)}
+            >
+              {length.label} seconds
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};

components/moods.tsx

@@ -0,0 +1,66 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { FiChevronDown } from "react-icons/fi";
+
+import { MOODS } from "@/utils";
+
+export const Moods = ({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) => {
+  const [viewAll, setViewAll] = useState(false);
+
+  return (
+    <div>
+      <p className="text-white font-semibold text-base mb-4">Select a mood</p>
+      <div className="grid grid-cols-4 gap-2 relative z-[1]">
+        {MOODS.slice(viewAll ? 0 : 0, viewAll ? MOODS.length : 12).map(
+          (style) => {
+            return (
+              <div
+                key={style.label}
+                className={classNames(
+                  `w-full cursor-pointer transition-all duration-200 opacity-70 hover:opacity-100 rounded-xl bg-gradient-to-br bg-stone-900 border border-white/5 relative px-6 py-3.5 text-left flex items-center justify-between font-semibold text-white text-lg z-[1] overflow-hidden`,
+                  {
+                    "!opacity-100 brightness-125": style.value === value,
+                  }
+                )}
+                onClick={() => onChange(style.value)}
+              >
+                {style.label}
+                <p className="text-3xl">{style.emoji}</p>
+                <div className="bg-black/30 -z-[1] w-full h-full absolute top-0 left-0"></div>
+              </div>
+            );
+          }
+        )}
+        <div
+          className={classNames(
+            "w-full h-[100px] bg-gradient-to-b from-transparent absolute -bottom-8 left-0 -z-[1] flex items-end justify-center",
+            {
+              "to-stone-950 !z-[1]": !viewAll,
+            }
+          )}
+        >
+          <p
+            className="text-white/50 hover:text-white/90 text-sm font-medium mt-2 cursor-pointer hover:underline"
+            onClick={() => setViewAll(!viewAll)}
+          >
+            View all
+            <FiChevronDown
+              className={classNames(
+                "inline-block ml-1 transition-all duration-200",
+                {
+                  "transform rotate-180": viewAll,
+                }
+              )}
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

components/prompt.tsx

@@ -0,0 +1,23 @@
+export const Prompt = ({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+  return (
+    <div>
+      <p className="text-white font-semibold text-base mb-3">Prompt</p>
+      <input
+        type="text"
+        value={value}
+        placeholder="80s pop track with bassy drums and synth"
+        className="w-full p-2 mt-2 border border-white/10 bg-black/10 transition-all duration-200 focus:border-amber-200/20 focus:bg-amber-950/10 text-white rounded-xl px-5 py-5 text-lg outline-none"
+        onInput={handleChange}
+      />
+    </div>
+  );
+};

components/styles.tsx

@@ -0,0 +1,67 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { FiChevronDown } from "react-icons/fi";
+
+import { STYLES } from "@/utils";
+
+export const Styles = ({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) => {
+  const [viewAll, setViewAll] = useState(false);
+
+  return (
+    <div>
+      <p className="text-white font-semibold text-base mb-4">Select a style</p>
+      <div className="grid grid-cols-3 gap-2 relative z-[1]">
+        {STYLES.slice(viewAll ? 0 : 0, viewAll ? STYLES.length : 9).map(
+          (style) => (
+            <div
+              key={style.label}
+              className={classNames(
+                "w-full cursor-pointer transition-all duration-200 opacity-40 hover:opacity-100 rounded-xl bg-cover bg-center relative px-5 py-8 bg-gray-700 text-center font-bold text-white text-xl z-[1] overflow-hidden",
+                {
+                  "!opacity-100 ring-[4px] ring-white/50":
+                    style.value === value,
+                }
+              )}
+              style={{
+                backgroundImage: `url(${style.image})`,
+              }}
+              onClick={() => onChange(style.value)}
+            >
+              {style.label}
+              <div className="bg-black/50 -z-[1] w-full h-full absolute top-0 left-0"></div>
+            </div>
+          )
+        )}
+        <div
+          className={classNames(
+            "w-full h-[100px] bg-gradient-to-b from-transparent absolute -bottom-8 left-0 -z-[1] flex items-end justify-center",
+            {
+              "to-stone-950 !z-[1]": !viewAll,
+            }
+          )}
+        >
+          <p
+            className="text-white/50 hover:text-white/90 text-sm font-medium mt-2 cursor-pointer hover:underline"
+            onClick={() => setViewAll(!viewAll)}
+          >
+            View all
+            <FiChevronDown
+              className={classNames(
+                "inline-block ml-1 transition-all duration-200",
+                {
+                  "transform rotate-180": viewAll,
+                }
+              )}
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

next.config.mjs

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    // Ignore node-specific modules when bundling for the browser
+    // See https://webpack.js.org/configuration/resolve/#resolvealias
+    config.resolve.alias = {
+        ...config.resolve.alias,
+        "sharp$": false,
+        "onnxruntime-node$": false,
+    }
+    return config;
+},
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "ai-music-generation",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@xenova/transformers": "github:xenova/transformers.js#v3",
+    "classnames": "^2.5.1",
+    "next": "14.2.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^5.1.0",
+    "react-use": "^17.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./utils/**/*.{js,ts,jsx,tsx,mdx}"
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/form.tsx"],
+  "exclude": ["node_modules"]
+}

utils/index.ts

@@ -0,0 +1,252 @@
+export const LENGTHS = [
+  { value: 5, label: "00:05" },
+  { value: 10, label: "00:10" },
+  { value: 15, label: "00:15" },
+  { value: 30, label: "00:30" },
+];
+
+export const STYLES = [{
+  value: "hiphop",
+  prompt: "hip hop track with a chill vibe",
+  label: "Hip Hop",
+  image: "https://images.unsplash.com/photo-1601643157091-ce5c665179ab?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+}, {
+  value: "classic",
+  prompt: "classic track with a chill vibe",
+  label: "Classic",
+  image: "https://images.unsplash.com/photo-1519139270028-ab664cf42264?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "jazz",
+  prompt: "jazz track with a chill vibe",
+  label: "Jazz",
+  image: "https://images.unsplash.com/photo-1511192336575-5a79af67a629?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "electro",
+  prompt: "jazz track with a chill vibe",
+  label: "Electro & Dance",
+  image: "https://images.unsplash.com/photo-1622386010273-646e12d1c02f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "rock",
+  prompt: "jazz track with a chill vibe",
+  label: "Rock'N'Roll",
+  image: "https://plus.unsplash.com/premium_photo-1681876467464-33495108737c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "funk",
+  prompt: "jazz track with a chill vibe",
+  label: "Funk",
+  image: "https://plus.unsplash.com/premium_photo-1683129651802-1c7ba429a137?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "dubstep",
+  prompt: "jazz track with a chill vibe",
+  label: "Dubstep",
+  image: "https://images.unsplash.com/photo-1578946956088-940c3b502864?q=80&w=2046&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "afrobeats",
+  prompt: "jazz track with a chill vibe",
+  label: "Afrobeats",
+  image: "https://plus.unsplash.com/premium_photo-1702220976033-50f47c7a58a6?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "orchestral",
+  prompt: "jazz track with a chill vibe",
+  label: "Orchestral",
+  image: "https://plus.unsplash.com/premium_photo-1682098438728-fa774b584c18?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "pop",
+  prompt: "jazz track with a chill vibe",
+  label: "Pop",
+  image: "https://images.unsplash.com/photo-1520872024865-3ff2805d8bb3?q=80&w=2104&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "reggae",
+  prompt: "jazz track with a chill vibe",
+  label: "Reggae",
+  image: "https://images.unsplash.com/photo-1538598450935-581f6a5fa7e0?q=80&w=2088&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "metal",
+  prompt: "jazz track with a chill vibe",
+  label: "Metal",
+  image: "https://images.unsplash.com/photo-1506091403742-e3aa39518db5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "country",
+  prompt: "jazz track with a chill vibe",
+  label: "Country",
+  image: "https://images.unsplash.com/photo-1525814230241-7f78c608c54c?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "blues",
+  prompt: "jazz track with a chill vibe",
+  label: "Blues",
+  image: "https://plus.unsplash.com/premium_photo-1661333454734-9184250f7226?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "soul",
+  prompt: "jazz track with a chill vibe",
+  label: "Soul",
+  image: "https://images.unsplash.com/photo-1581297848080-c84ac0438210?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "rnb",
+  prompt: "jazz track with a chill vibe",
+  label: "R&B",
+  image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3D-yMSiaEBtOOoxrKh8InCYzRqjn1UnYVHPhbDGkPrXH32k7i091MRvRTP7Nyts8dMJY&usqp=CAU"
+}, {
+  value: "disco",
+  prompt: "jazz track with a chill vibe",
+  label: "Disco",
+  image: "https://images.unsplash.com/photo-1559424452-eeb3a13ffe2b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "trap",
+  prompt: "jazz track with a chill vibe",
+  label: "Trap",
+  image: "https://images.unsplash.com/photo-1620281428428-bce2bf9ceee4?q=80&w=1970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "ambient",
+  prompt: "jazz track with a chill vibe",
+  label: "Ambient",
+  image: "https://images.unsplash.com/photo-1616085290694-4b9cc5c97a12?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}, {
+  value: "lofi",
+  prompt: "jazz track with a chill vibe",
+  label: "Lofi",
+  image: "https://miro.medium.com/v2/resize:fit:1358/0*FjF2hZ8cJQN9aBxk.jpg"
+}, {
+  value: "chill",
+  prompt: "jazz track with a chill vibe",
+  label: "Chill",
+  image: "https://images.unsplash.com/photo-1531574373289-ad0d66e39ba9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+}]
+
+export const MOODS = [{
+  value: "happy",
+  label: "Happy",
+  prompt: "happy track with a chill vibe",
+  emoji: "😊"
+}, {
+  value: "sad",
+  label: "Sad",
+  prompt: "sad track with a chill vibe",
+  emoji: "😢"
+}, {
+  value: "angry",
+  label: "Angry",
+  prompt: "angry track with a chill vibe",
+  emoji: "😡"
+}, {
+  value: "chill",
+  label: "Chill",
+  prompt: "chill track with a chill vibe",
+  emoji: "😌"
+}, {
+  value: "romantic",
+  label: "Romantic",
+  prompt: "romantic track with a chill vibe",
+  emoji: "😍"
+}, {
+  value: "epic",
+  label: "Epic",
+  prompt: "epic track with a chill vibe",
+  emoji: "🚀"
+}, {
+  value: "energetic",
+  label: "Energetic",
+  prompt: "energetic track with a chill vibe",
+  emoji: "🔥"
+}, {
+  value: "dreamy",
+  label: "Dreamy",
+  prompt: "dreamy track with a chill vibe",
+  emoji: "🌌"
+}, {
+  value: "mysterious",
+  label: "Mysterious",
+  prompt: "mysterious track with a chill vibe",
+  emoji: "🕵️"
+}, {
+  value: "relaxing",
+  label: "Relaxing",
+  prompt: "relaxing track with a chill vibe",
+  emoji: "😴"
+}, {
+  value: "dark",
+  label: "Dark",
+  prompt: "dark track with a chill vibe",
+  emoji: "🖤"
+}, {
+  value: "upbeat",
+  label: "Upbeat",
+  prompt: "upbeat track with a chill vibe",
+  emoji: "🎉"
+}, {
+  value: "motivational",
+  label: "Motivational",
+  prompt: "motivational track with a chill vibe",
+  emoji: "💪"
+}, {
+  value: "inspiring",
+  label: "Inspiring",
+  prompt: "inspiring track with a chill vibe",
+  emoji: "🌟"
+}, {
+  value: "nostalgic",
+  label: "Nostalgic",
+  prompt: "nostalgic track with a chill vibe",
+  emoji: "📼"
+}, {
+  value: "groovy",
+  label: "Groovy",
+  prompt: "groovy track with a chill vibe",
+  emoji: "🕺"
+}, {
+  value: "melancholic",
+  label: "Melancholic",
+  prompt: "melancholic track with a chill vibe",
+  emoji: "😔"
+}, {
+  value: "hopeful",
+  label: "Hopeful",
+  prompt: "hopeful track with a chill vibe",
+  emoji: "🌈"
+}]
+
+
+export function encodeWAV(samples: any[], sampleRate = 16000) {
+  let offset = 44;
+  const buffer = new ArrayBuffer(offset + samples.length * 4);
+  const view = new DataView(buffer);
+
+  /* RIFF identifier */
+  writeString(view, 0, 'RIFF')
+  /* RIFF chunk length */
+  view.setUint32(4, 36 + samples.length * 4, true)
+  /* RIFF type */
+  writeString(view, 8, 'WAVE')
+  /* format chunk identifier */
+  writeString(view, 12, 'fmt ')
+  /* format chunk length */
+  view.setUint32(16, 16, true)
+  /* sample format (raw) */
+  view.setUint16(20, 3, true)
+  /* channel count */
+  view.setUint16(22, 1, true)
+  /* sample rate */
+  view.setUint32(24, sampleRate, true)
+  /* byte rate (sample rate * block align) */
+  view.setUint32(28, sampleRate * 4, true)
+  /* block align (channel count * bytes per sample) */
+  view.setUint16(32, 4, true)
+  /* bits per sample */
+  view.setUint16(34, 32, true)
+  /* data chunk identifier */
+  writeString(view, 36, 'data')
+  /* data chunk length */
+  view.setUint32(40, samples.length * 4, true)
+
+  for (let i = 0; i < samples.length; ++i, offset += 4) {
+      view.setFloat32(offset, samples[i], true)
+  }
+
+  return buffer
+}
+function writeString(view: any, offset: number, string: string) {
+  for (let i = 0; i < string.length; ++i) {
+      view.setUint8(offset + i, string.charCodeAt(i))
+  }
+}
+
+export const MODEL_ID = 'Xenova/musicgen-small';