web/src/app/page.tsx

"use client";

import { useState } from "react";
import AudioClip from "./audio-clip";

export default function Home() {
  const [style, setStyle] = useState("d");
  const [loading, setLoading] = useState(false);
  const [finished, setFinished] = useState(false);
  const [clips, setClips] = useState<Object[]>([]);

  function handleStyleClick(style: string) {
    setStyle(style);
  }

  function handleGenerationStart() {
    if (style === "") {
      alert("Please select a style");
      return;
    }
    setLoading(true);
    setFinished(false);
    // Set loading to false after 3 second delay
    setTimeout(() => {
      setFinished(true);
      setLoading(false);
      setClips(testClips);
    }, 1);
  }

  function downloadFile(url: string) {
    // Create an invisible A element
    const a = document.createElement("a");
    a.style.display = "none";
    document.body.appendChild(a);

    // Set the HREF to a Blob representation of the data to be downloaded
    a.href = url;

    // Use download attribute to set set desired file name
    a.setAttribute("download", url.split("/").pop()!);

    // Trigger the download by simulating click
    a.click();

    // Cleanup
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);

    // Remember to revoke the Blob object URL after some time to free up memory
    url = "";
  }

  return (
    <main className="flex min-h-screen flex-col items-center">
      <h1 className="text-6xl font-bold text-center mt-10">SoundSauce</h1>
      <div className="flex flex-col items-center justify-center">
        Your unique melody flavor
      </div>
      <div className="flex flex-col items-center justify-center m-20 w-full">
        <div>Select a style</div>
        <div className="grid grid-flow-row grid-cols-3 gap-x-2 gap-y-1 m-5">
          {styles.map((s) => {
            let background = "bg-inherit";
            if (s === style) {
              background = "bg-white dark:text-black";
            }
            return (
              <button
                className={`flex items-center justify-center border-2 border-white rounded-lg px-4 py-1 dark:hover:text-black hover:bg-white ${background}`}
                onClick={() => handleStyleClick(s)}
                key={s}
              >
                {s}
              </button>
            );
          })}
        </div>
        <button
          className="flex items-center justify-center border-2 border-green-500 rounded-lg px-10 py-1 hover:bg-green-500"
          onClick={handleGenerationStart}
        >
          Go
        </button>
        {loading && <div className="m-5">Generating...</div>}
        {finished && (
          <div className="flex justify-between m-5">
            {clips.map((clip, idx) => (
              <AudioClip src={clip} key={idx} downloadFile={downloadFile} />
            ))}
          </div>
        )}
      </div>
    </main>
  );
}

let styles = [
  "Travis Scott",
  "Drake",
  "The Weeknd",
  "Ambient",
  "Spacey",
  "Lofi",
];

let testClips = [
  {
    filename: "./test-clips/chipmunk.wav",
    key: "G Maj",
    bpm: 120,
    length: 10,
  },
  {
    filename: "./test-clips/skibidi-toilet.mp3",
    key: "A Min",
    bpm: 144,
    length: 11.5,
  },
  {
    filename: "./test-clips/chipmunk.wav",
    key: "G Maj",
    bpm: 120,
    length: 10
  },
];