update prompt

app/page.tsx

@@ -10,7 +10,8 @@ export default function Home() {
             Start making music with AI
           </h1>
           <h2 className="text-white/70 font-medium mt-2 text-lg">
-            In-browser text-to-music generation
+            <span className="text-white font-semibold">In-browser</span>{" "}
+            text-to-music generation
           </h2>
         </header>
       </Form>

components/form.tsx

@@ -46,7 +46,7 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
     generate,
     results,
     loading,
-    setResults,
+    randomize,
   } = useGeneration();
 
   const modelPromise = useRef(null);
@@ -88,7 +88,9 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
     setStatusText(
       progress === 1
         ? "Ready!"
-        : `Loading model (${(progress * 100).toFixed()}% of 656MB)...`
+        : `Loading In-Browser model (${(
+            progress * 100
+          ).toFixed()}% of 656MB)...`
     );
     if (progress === 1) {
       setTimeout(() => setModelLoaded(true), 1500);
@@ -130,12 +132,13 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
   };
 
   return (
-    <main className="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-20">
+    <main className="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-20 relative">
       <div className="grid grid-cols-1 gap-10">
         {children}
         <Prompt
           value={form.prompt}
           onChange={(value) => setForm({ ...form, prompt: value })}
+          onRandomize={randomize}
         />
         <Length
           value={form.length}
@@ -221,7 +224,7 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
       </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",
+          "absolute right-0 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,
           }

components/hooks/useGeneration.ts

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react"
 import { useUpdateEffect } from "react-use";
 
-import { LENGTHS, STYLES, MOODS } from "@/utils";
+import { LENGTHS, STYLES, MOODS, MUSIC_PROMPTS } from "@/utils";
 
 export const useGeneration = () => {
     const [form, setForm] = useState({
@@ -71,6 +71,15 @@ export const useGeneration = () => {
     })
   }
 
+  const randomize = () => {
+    setForm({
+      length: LENGTHS[Math.floor(Math.random() * LENGTHS.length)].value,
+      style: STYLES[Math.floor(Math.random() * STYLES.length)].value,
+      mood: MOODS[Math.floor(Math.random() * MOODS.length)].value,
+      prompt: MUSIC_PROMPTS[Math.floor(Math.random() * MUSIC_PROMPTS.length)]
+    })
+  }
+
   return {
     form,
     setForm,
@@ -79,5 +88,6 @@ export const useGeneration = () => {
     results,
     loading,
     setResults,
+    randomize
   }
 }

components/length.tsx

@@ -29,7 +29,7 @@ export const Length = ({
 
   return (
     <div ref={ref} className="max-w-max">
-      <p className="text-white font-semibold text-base mb-4">Prompt</p>
+      <p className="text-white font-semibold text-base mb-4">Duration</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"

components/moods.tsx

@@ -16,7 +16,7 @@ export const Moods = ({
   return (
     <div>
       <p className="text-white font-semibold text-base mb-4">Select a mood</p>
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 relative z-[1]">
+      <div className="grid grid-cols-2 xl:grid-cols-4 gap-2 relative z-[1]">
         {MOODS.slice(viewAll ? 0 : 0, viewAll ? MOODS.length : 12).map(
           (style) => {
             return (

components/prompt.tsx

@@ -1,23 +1,33 @@
+import { BsDice3Fill } from "react-icons/bs";
+
 export const Prompt = ({
   value,
   onChange,
+  onRandomize,
 }: {
   value: string;
   onChange: (value: string) => void;
+  onRandomize: () => 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}
-      />
+      <p className="text-white font-semibold text-base mb-5">Prompt</p>
+      <div className="w-full border border-white/10 bg-black/10 focus-within:border-amber-200/20 focus-within:bg-amber-950/10 rounded-xl overflow-hidden flex items-center justify-between pr-5">
+        <input
+          type="text"
+          value={value}
+          placeholder="80s pop track with bassy drums and synth"
+          className="w-full p-2 transition-all duration-200 bg-transparent text-white px-5 py-5 text-lg outline-none border-none flex-1"
+          onInput={handleChange}
+        />
+        <BsDice3Fill
+          className="text-white text-2xl transition-all duration-all hover:-rotate-90 cursor-pointer"
+          onClick={onRandomize}
+        />
+      </div>
     </div>
   );
 };

components/styles.tsx

@@ -16,7 +16,7 @@ export const Styles = ({
   return (
     <div>
       <p className="text-white font-semibold text-base mb-4">Select a style</p>
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-2 relative z-[1]">
+      <div className="grid grid-cols-2 xl:grid-cols-3 gap-2 relative z-[1]">
         {STYLES.slice(viewAll ? 0 : 0, viewAll ? STYLES.length : 9).map(
           (style) => (
             <div

utils/index.ts

@@ -7,107 +7,107 @@ export const LENGTHS = [
 
 export const STYLES = [{
   value: "hiphop",
-  prompt: "hip hop track with a chill vibe",
+  prompt: "Hip Hop and Rap track",
   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",
+  prompt: "Classic track",
   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",
+  prompt: "Jazz track",
   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",
+  prompt: "Electronic and dance track",
   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",
+  prompt: "Rock'n'Roll track",
   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",
+  prompt: "Funk track",
   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",
+  prompt: "Dubstep track",
   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",
+  prompt: "Afrobeats track",
   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",
+  prompt: "Orchestral track",
   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",
+  prompt: "Pop track",
   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",
+  prompt: "Reggae track",
   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",
+  prompt: "Metal track",
   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",
+  prompt: "Country track",
   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",
+  prompt: "Blues track",
   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",
+  prompt: "Soul track",
   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",
+  prompt: "R'n'B track",
   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",
+  prompt: "Disco track",
   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",
+  prompt: "Trap track",
   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",
+  prompt: "Ambient track",
   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",
+  prompt: "Lofi track",
   label: "Lofi",
   image: "https://miro.medium.com/v2/resize:fit:1358/0*FjF2hZ8cJQN9aBxk.jpg"
 }, {
   value: "chill",
-  prompt: "jazz track with a chill vibe",
+  prompt: "Chill track",
   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"
 }]
@@ -115,95 +115,103 @@ export const STYLES = [{
 export const MOODS = [{
   value: "happy",
   label: "Happy",
-  prompt: "happy track with a chill vibe",
+  prompt: "with an happy vibe",
   emoji: "😊"
 }, {
   value: "sad",
   label: "Sad",
-  prompt: "sad track with a chill vibe",
+  prompt: "with a sad vibe",
   emoji: "😢"
 }, {
   value: "angry",
   label: "Angry",
-  prompt: "angry track with a chill vibe",
+  prompt: "with an angry vibe",
   emoji: "😡"
 }, {
   value: "chill",
   label: "Chill",
-  prompt: "chill track with a chill vibe",
+  prompt: "with a chill vibe",
   emoji: "😌"
 }, {
   value: "romantic",
   label: "Romantic",
-  prompt: "romantic track with a chill vibe",
+  prompt: "with a romantic vibe",
   emoji: "😍"
 }, {
   value: "epic",
   label: "Epic",
-  prompt: "epic track with a chill vibe",
+  prompt: "with an epic vibe",
   emoji: "🚀"
 }, {
   value: "energetic",
   label: "Energetic",
-  prompt: "energetic track with a chill vibe",
+  prompt: "with an energetic vibe",
   emoji: "🔥"
 }, {
   value: "dreamy",
   label: "Dreamy",
-  prompt: "dreamy track with a chill vibe",
+  prompt: "with a dreamy vibe",
   emoji: "🌌"
 }, {
   value: "mysterious",
   label: "Mysterious",
-  prompt: "mysterious track with a chill vibe",
+  prompt: "with a mysterious vibe",
   emoji: "🕵️"
 }, {
   value: "relaxing",
   label: "Relaxing",
-  prompt: "relaxing track with a chill vibe",
+  prompt: "with a relaxing vibe",
   emoji: "😴"
 }, {
   value: "dark",
   label: "Dark",
-  prompt: "dark track with a chill vibe",
+  prompt: "with a dark vibe",
   emoji: "🖤"
 }, {
   value: "upbeat",
   label: "Upbeat",
-  prompt: "upbeat track with a chill vibe",
+  prompt: "with an upbeat vibe",
   emoji: "🎉"
 }, {
   value: "motivational",
   label: "Motivational",
-  prompt: "motivational track with a chill vibe",
+  prompt: "with a motivational vibe",
   emoji: "💪"
 }, {
   value: "inspiring",
   label: "Inspiring",
-  prompt: "inspiring track with a chill vibe",
+  prompt: "with an inspiring vibe",
   emoji: "🌟"
 }, {
   value: "nostalgic",
   label: "Nostalgic",
-  prompt: "nostalgic track with a chill vibe",
+  prompt: "with a nostalgic vibe",
   emoji: "📼"
 }, {
   value: "groovy",
   label: "Groovy",
-  prompt: "groovy track with a chill vibe",
+  prompt: "with a groovy vibe",
   emoji: "🕺"
 }, {
   value: "melancholic",
   label: "Melancholic",
-  prompt: "melancholic track with a chill vibe",
+  prompt: "with a melancholic vibe",
   emoji: "😔"
 }, {
   value: "hopeful",
   label: "Hopeful",
-  prompt: "hopeful track with a chill vibe",
+  prompt: "with a hopeful vibe",
   emoji: "🌈"
 }]
 
+export const MUSIC_PROMPTS = [
+  '80s pop track with bassy drums and synth',
+  '90s rock song with loud guitars and heavy drums',
+  'a light and cheerly EDM track, with syncopated drums, aery pads, and strong emotions bpm: 130',
+  'A cheerful country song with acoustic guitars',
+  'lofi slow bpm electro chill with organic samples',
+]
+
 
 export function encodeWAV(samples: any[], sampleRate = 16000) {
   let offset = 44;