Spaces:
Paused
Paused
update prompt
Browse files- app/page.tsx +2 -1
- components/form.tsx +7 -4
- components/hooks/useGeneration.ts +11 -1
- components/length.tsx +1 -1
- components/moods.tsx +1 -1
- components/prompt.tsx +18 -8
- components/styles.tsx +1 -1
- utils/index.ts +47 -39
app/page.tsx
CHANGED
@@ -10,7 +10,8 @@ export default function Home() {
|
|
10 |
Start making music with AI
|
11 |
</h1>
|
12 |
<h2 className="text-white/70 font-medium mt-2 text-lg">
|
13 |
-
|
|
|
14 |
</h2>
|
15 |
</header>
|
16 |
</Form>
|
|
|
10 |
Start making music with AI
|
11 |
</h1>
|
12 |
<h2 className="text-white/70 font-medium mt-2 text-lg">
|
13 |
+
<span className="text-white font-semibold">In-browser</span>{" "}
|
14 |
+
text-to-music generation
|
15 |
</h2>
|
16 |
</header>
|
17 |
</Form>
|
components/form.tsx
CHANGED
@@ -46,7 +46,7 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
|
|
46 |
generate,
|
47 |
results,
|
48 |
loading,
|
49 |
-
|
50 |
} = useGeneration();
|
51 |
|
52 |
const modelPromise = useRef(null);
|
@@ -88,7 +88,9 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
|
|
88 |
setStatusText(
|
89 |
progress === 1
|
90 |
? "Ready!"
|
91 |
-
: `Loading model (${(
|
|
|
|
|
92 |
);
|
93 |
if (progress === 1) {
|
94 |
setTimeout(() => setModelLoaded(true), 1500);
|
@@ -130,12 +132,13 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
|
|
130 |
};
|
131 |
|
132 |
return (
|
133 |
-
<main className="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-20">
|
134 |
<div className="grid grid-cols-1 gap-10">
|
135 |
{children}
|
136 |
<Prompt
|
137 |
value={form.prompt}
|
138 |
onChange={(value) => setForm({ ...form, prompt: value })}
|
|
|
139 |
/>
|
140 |
<Length
|
141 |
value={form.length}
|
@@ -221,7 +224,7 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
|
|
221 |
</div>
|
222 |
<div
|
223 |
className={classNames(
|
224 |
-
"absolute right-
|
225 |
{
|
226 |
"opacity-0 pointer-events-none translate-y-full": modelLoaded,
|
227 |
}
|
|
|
46 |
generate,
|
47 |
results,
|
48 |
loading,
|
49 |
+
randomize,
|
50 |
} = useGeneration();
|
51 |
|
52 |
const modelPromise = useRef(null);
|
|
|
88 |
setStatusText(
|
89 |
progress === 1
|
90 |
? "Ready!"
|
91 |
+
: `Loading In-Browser model (${(
|
92 |
+
progress * 100
|
93 |
+
).toFixed()}% of 656MB)...`
|
94 |
);
|
95 |
if (progress === 1) {
|
96 |
setTimeout(() => setModelLoaded(true), 1500);
|
|
|
132 |
};
|
133 |
|
134 |
return (
|
135 |
+
<main className="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-20 relative">
|
136 |
<div className="grid grid-cols-1 gap-10">
|
137 |
{children}
|
138 |
<Prompt
|
139 |
value={form.prompt}
|
140 |
onChange={(value) => setForm({ ...form, prompt: value })}
|
141 |
+
onRandomize={randomize}
|
142 |
/>
|
143 |
<Length
|
144 |
value={form.length}
|
|
|
224 |
</div>
|
225 |
<div
|
226 |
className={classNames(
|
227 |
+
"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",
|
228 |
{
|
229 |
"opacity-0 pointer-events-none translate-y-full": modelLoaded,
|
230 |
}
|
components/hooks/useGeneration.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1 |
import { useMemo, useState } from "react"
|
2 |
import { useUpdateEffect } from "react-use";
|
3 |
|
4 |
-
import { LENGTHS, STYLES, MOODS } from "@/utils";
|
5 |
|
6 |
export const useGeneration = () => {
|
7 |
const [form, setForm] = useState({
|
@@ -71,6 +71,15 @@ export const useGeneration = () => {
|
|
71 |
})
|
72 |
}
|
73 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
74 |
return {
|
75 |
form,
|
76 |
setForm,
|
@@ -79,5 +88,6 @@ export const useGeneration = () => {
|
|
79 |
results,
|
80 |
loading,
|
81 |
setResults,
|
|
|
82 |
}
|
83 |
}
|
|
|
1 |
import { useMemo, useState } from "react"
|
2 |
import { useUpdateEffect } from "react-use";
|
3 |
|
4 |
+
import { LENGTHS, STYLES, MOODS, MUSIC_PROMPTS } from "@/utils";
|
5 |
|
6 |
export const useGeneration = () => {
|
7 |
const [form, setForm] = useState({
|
|
|
71 |
})
|
72 |
}
|
73 |
|
74 |
+
const randomize = () => {
|
75 |
+
setForm({
|
76 |
+
length: LENGTHS[Math.floor(Math.random() * LENGTHS.length)].value,
|
77 |
+
style: STYLES[Math.floor(Math.random() * STYLES.length)].value,
|
78 |
+
mood: MOODS[Math.floor(Math.random() * MOODS.length)].value,
|
79 |
+
prompt: MUSIC_PROMPTS[Math.floor(Math.random() * MUSIC_PROMPTS.length)]
|
80 |
+
})
|
81 |
+
}
|
82 |
+
|
83 |
return {
|
84 |
form,
|
85 |
setForm,
|
|
|
88 |
results,
|
89 |
loading,
|
90 |
setResults,
|
91 |
+
randomize
|
92 |
}
|
93 |
}
|
components/length.tsx
CHANGED
@@ -29,7 +29,7 @@ export const Length = ({
|
|
29 |
|
30 |
return (
|
31 |
<div ref={ref} className="max-w-max">
|
32 |
-
<p className="text-white font-semibold text-base mb-4">
|
33 |
<div className="relative z-1">
|
34 |
<p
|
35 |
className="text-transparent bg-gradient-to-r from-blue-500 to-pink-500 bg-clip-text text-5xl font-extrabold cursor-pointer relative"
|
|
|
29 |
|
30 |
return (
|
31 |
<div ref={ref} className="max-w-max">
|
32 |
+
<p className="text-white font-semibold text-base mb-4">Duration</p>
|
33 |
<div className="relative z-1">
|
34 |
<p
|
35 |
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
CHANGED
@@ -16,7 +16,7 @@ export const Moods = ({
|
|
16 |
return (
|
17 |
<div>
|
18 |
<p className="text-white font-semibold text-base mb-4">Select a mood</p>
|
19 |
-
<div className="grid grid-cols-2
|
20 |
{MOODS.slice(viewAll ? 0 : 0, viewAll ? MOODS.length : 12).map(
|
21 |
(style) => {
|
22 |
return (
|
|
|
16 |
return (
|
17 |
<div>
|
18 |
<p className="text-white font-semibold text-base mb-4">Select a mood</p>
|
19 |
+
<div className="grid grid-cols-2 xl:grid-cols-4 gap-2 relative z-[1]">
|
20 |
{MOODS.slice(viewAll ? 0 : 0, viewAll ? MOODS.length : 12).map(
|
21 |
(style) => {
|
22 |
return (
|
components/prompt.tsx
CHANGED
@@ -1,23 +1,33 @@
|
|
|
|
|
|
1 |
export const Prompt = ({
|
2 |
value,
|
3 |
onChange,
|
|
|
4 |
}: {
|
5 |
value: string;
|
6 |
onChange: (value: string) => void;
|
|
|
7 |
}) => {
|
8 |
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
9 |
onChange(e.target.value);
|
10 |
};
|
11 |
return (
|
12 |
<div>
|
13 |
-
<p className="text-white font-semibold text-base mb-
|
14 |
-
<
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
21 |
</div>
|
22 |
);
|
23 |
};
|
|
|
1 |
+
import { BsDice3Fill } from "react-icons/bs";
|
2 |
+
|
3 |
export const Prompt = ({
|
4 |
value,
|
5 |
onChange,
|
6 |
+
onRandomize,
|
7 |
}: {
|
8 |
value: string;
|
9 |
onChange: (value: string) => void;
|
10 |
+
onRandomize: () => void;
|
11 |
}) => {
|
12 |
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
13 |
onChange(e.target.value);
|
14 |
};
|
15 |
return (
|
16 |
<div>
|
17 |
+
<p className="text-white font-semibold text-base mb-5">Prompt</p>
|
18 |
+
<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">
|
19 |
+
<input
|
20 |
+
type="text"
|
21 |
+
value={value}
|
22 |
+
placeholder="80s pop track with bassy drums and synth"
|
23 |
+
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"
|
24 |
+
onInput={handleChange}
|
25 |
+
/>
|
26 |
+
<BsDice3Fill
|
27 |
+
className="text-white text-2xl transition-all duration-all hover:-rotate-90 cursor-pointer"
|
28 |
+
onClick={onRandomize}
|
29 |
+
/>
|
30 |
+
</div>
|
31 |
</div>
|
32 |
);
|
33 |
};
|
components/styles.tsx
CHANGED
@@ -16,7 +16,7 @@ export const Styles = ({
|
|
16 |
return (
|
17 |
<div>
|
18 |
<p className="text-white font-semibold text-base mb-4">Select a style</p>
|
19 |
-
<div className="grid grid-cols-2
|
20 |
{STYLES.slice(viewAll ? 0 : 0, viewAll ? STYLES.length : 9).map(
|
21 |
(style) => (
|
22 |
<div
|
|
|
16 |
return (
|
17 |
<div>
|
18 |
<p className="text-white font-semibold text-base mb-4">Select a style</p>
|
19 |
+
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2 relative z-[1]">
|
20 |
{STYLES.slice(viewAll ? 0 : 0, viewAll ? STYLES.length : 9).map(
|
21 |
(style) => (
|
22 |
<div
|
utils/index.ts
CHANGED
@@ -7,107 +7,107 @@ export const LENGTHS = [
|
|
7 |
|
8 |
export const STYLES = [{
|
9 |
value: "hiphop",
|
10 |
-
prompt: "
|
11 |
label: "Hip Hop",
|
12 |
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",
|
13 |
}, {
|
14 |
value: "classic",
|
15 |
-
prompt: "
|
16 |
label: "Classic",
|
17 |
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"
|
18 |
}, {
|
19 |
value: "jazz",
|
20 |
-
prompt: "
|
21 |
label: "Jazz",
|
22 |
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"
|
23 |
}, {
|
24 |
value: "electro",
|
25 |
-
prompt: "
|
26 |
label: "Electro & Dance",
|
27 |
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"
|
28 |
}, {
|
29 |
value: "rock",
|
30 |
-
prompt: "
|
31 |
label: "Rock'N'Roll",
|
32 |
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"
|
33 |
}, {
|
34 |
value: "funk",
|
35 |
-
prompt: "
|
36 |
label: "Funk",
|
37 |
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"
|
38 |
}, {
|
39 |
value: "dubstep",
|
40 |
-
prompt: "
|
41 |
label: "Dubstep",
|
42 |
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"
|
43 |
}, {
|
44 |
value: "afrobeats",
|
45 |
-
prompt: "
|
46 |
label: "Afrobeats",
|
47 |
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"
|
48 |
}, {
|
49 |
value: "orchestral",
|
50 |
-
prompt: "
|
51 |
label: "Orchestral",
|
52 |
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"
|
53 |
}, {
|
54 |
value: "pop",
|
55 |
-
prompt: "
|
56 |
label: "Pop",
|
57 |
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"
|
58 |
}, {
|
59 |
value: "reggae",
|
60 |
-
prompt: "
|
61 |
label: "Reggae",
|
62 |
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"
|
63 |
}, {
|
64 |
value: "metal",
|
65 |
-
prompt: "
|
66 |
label: "Metal",
|
67 |
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"
|
68 |
}, {
|
69 |
value: "country",
|
70 |
-
prompt: "
|
71 |
label: "Country",
|
72 |
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"
|
73 |
}, {
|
74 |
value: "blues",
|
75 |
-
prompt: "
|
76 |
label: "Blues",
|
77 |
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"
|
78 |
}, {
|
79 |
value: "soul",
|
80 |
-
prompt: "
|
81 |
label: "Soul",
|
82 |
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"
|
83 |
}, {
|
84 |
value: "rnb",
|
85 |
-
prompt: "
|
86 |
label: "R&B",
|
87 |
image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3D-yMSiaEBtOOoxrKh8InCYzRqjn1UnYVHPhbDGkPrXH32k7i091MRvRTP7Nyts8dMJY&usqp=CAU"
|
88 |
}, {
|
89 |
value: "disco",
|
90 |
-
prompt: "
|
91 |
label: "Disco",
|
92 |
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"
|
93 |
}, {
|
94 |
value: "trap",
|
95 |
-
prompt: "
|
96 |
label: "Trap",
|
97 |
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"
|
98 |
}, {
|
99 |
value: "ambient",
|
100 |
-
prompt: "
|
101 |
label: "Ambient",
|
102 |
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"
|
103 |
}, {
|
104 |
value: "lofi",
|
105 |
-
prompt: "
|
106 |
label: "Lofi",
|
107 |
image: "https://miro.medium.com/v2/resize:fit:1358/0*FjF2hZ8cJQN9aBxk.jpg"
|
108 |
}, {
|
109 |
value: "chill",
|
110 |
-
prompt: "
|
111 |
label: "Chill",
|
112 |
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"
|
113 |
}]
|
@@ -115,95 +115,103 @@ export const STYLES = [{
|
|
115 |
export const MOODS = [{
|
116 |
value: "happy",
|
117 |
label: "Happy",
|
118 |
-
prompt: "
|
119 |
emoji: "😊"
|
120 |
}, {
|
121 |
value: "sad",
|
122 |
label: "Sad",
|
123 |
-
prompt: "
|
124 |
emoji: "😢"
|
125 |
}, {
|
126 |
value: "angry",
|
127 |
label: "Angry",
|
128 |
-
prompt: "
|
129 |
emoji: "😡"
|
130 |
}, {
|
131 |
value: "chill",
|
132 |
label: "Chill",
|
133 |
-
prompt: "
|
134 |
emoji: "😌"
|
135 |
}, {
|
136 |
value: "romantic",
|
137 |
label: "Romantic",
|
138 |
-
prompt: "
|
139 |
emoji: "😍"
|
140 |
}, {
|
141 |
value: "epic",
|
142 |
label: "Epic",
|
143 |
-
prompt: "
|
144 |
emoji: "🚀"
|
145 |
}, {
|
146 |
value: "energetic",
|
147 |
label: "Energetic",
|
148 |
-
prompt: "
|
149 |
emoji: "🔥"
|
150 |
}, {
|
151 |
value: "dreamy",
|
152 |
label: "Dreamy",
|
153 |
-
prompt: "
|
154 |
emoji: "🌌"
|
155 |
}, {
|
156 |
value: "mysterious",
|
157 |
label: "Mysterious",
|
158 |
-
prompt: "
|
159 |
emoji: "🕵️"
|
160 |
}, {
|
161 |
value: "relaxing",
|
162 |
label: "Relaxing",
|
163 |
-
prompt: "
|
164 |
emoji: "😴"
|
165 |
}, {
|
166 |
value: "dark",
|
167 |
label: "Dark",
|
168 |
-
prompt: "
|
169 |
emoji: "🖤"
|
170 |
}, {
|
171 |
value: "upbeat",
|
172 |
label: "Upbeat",
|
173 |
-
prompt: "
|
174 |
emoji: "🎉"
|
175 |
}, {
|
176 |
value: "motivational",
|
177 |
label: "Motivational",
|
178 |
-
prompt: "
|
179 |
emoji: "💪"
|
180 |
}, {
|
181 |
value: "inspiring",
|
182 |
label: "Inspiring",
|
183 |
-
prompt: "
|
184 |
emoji: "🌟"
|
185 |
}, {
|
186 |
value: "nostalgic",
|
187 |
label: "Nostalgic",
|
188 |
-
prompt: "
|
189 |
emoji: "📼"
|
190 |
}, {
|
191 |
value: "groovy",
|
192 |
label: "Groovy",
|
193 |
-
prompt: "
|
194 |
emoji: "🕺"
|
195 |
}, {
|
196 |
value: "melancholic",
|
197 |
label: "Melancholic",
|
198 |
-
prompt: "
|
199 |
emoji: "😔"
|
200 |
}, {
|
201 |
value: "hopeful",
|
202 |
label: "Hopeful",
|
203 |
-
prompt: "
|
204 |
emoji: "🌈"
|
205 |
}]
|
206 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
207 |
|
208 |
export function encodeWAV(samples: any[], sampleRate = 16000) {
|
209 |
let offset = 44;
|
|
|
7 |
|
8 |
export const STYLES = [{
|
9 |
value: "hiphop",
|
10 |
+
prompt: "Hip Hop and Rap track",
|
11 |
label: "Hip Hop",
|
12 |
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",
|
13 |
}, {
|
14 |
value: "classic",
|
15 |
+
prompt: "Classic track",
|
16 |
label: "Classic",
|
17 |
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"
|
18 |
}, {
|
19 |
value: "jazz",
|
20 |
+
prompt: "Jazz track",
|
21 |
label: "Jazz",
|
22 |
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"
|
23 |
}, {
|
24 |
value: "electro",
|
25 |
+
prompt: "Electronic and dance track",
|
26 |
label: "Electro & Dance",
|
27 |
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"
|
28 |
}, {
|
29 |
value: "rock",
|
30 |
+
prompt: "Rock'n'Roll track",
|
31 |
label: "Rock'N'Roll",
|
32 |
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"
|
33 |
}, {
|
34 |
value: "funk",
|
35 |
+
prompt: "Funk track",
|
36 |
label: "Funk",
|
37 |
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"
|
38 |
}, {
|
39 |
value: "dubstep",
|
40 |
+
prompt: "Dubstep track",
|
41 |
label: "Dubstep",
|
42 |
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"
|
43 |
}, {
|
44 |
value: "afrobeats",
|
45 |
+
prompt: "Afrobeats track",
|
46 |
label: "Afrobeats",
|
47 |
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"
|
48 |
}, {
|
49 |
value: "orchestral",
|
50 |
+
prompt: "Orchestral track",
|
51 |
label: "Orchestral",
|
52 |
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"
|
53 |
}, {
|
54 |
value: "pop",
|
55 |
+
prompt: "Pop track",
|
56 |
label: "Pop",
|
57 |
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"
|
58 |
}, {
|
59 |
value: "reggae",
|
60 |
+
prompt: "Reggae track",
|
61 |
label: "Reggae",
|
62 |
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"
|
63 |
}, {
|
64 |
value: "metal",
|
65 |
+
prompt: "Metal track",
|
66 |
label: "Metal",
|
67 |
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"
|
68 |
}, {
|
69 |
value: "country",
|
70 |
+
prompt: "Country track",
|
71 |
label: "Country",
|
72 |
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"
|
73 |
}, {
|
74 |
value: "blues",
|
75 |
+
prompt: "Blues track",
|
76 |
label: "Blues",
|
77 |
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"
|
78 |
}, {
|
79 |
value: "soul",
|
80 |
+
prompt: "Soul track",
|
81 |
label: "Soul",
|
82 |
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"
|
83 |
}, {
|
84 |
value: "rnb",
|
85 |
+
prompt: "R'n'B track",
|
86 |
label: "R&B",
|
87 |
image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3D-yMSiaEBtOOoxrKh8InCYzRqjn1UnYVHPhbDGkPrXH32k7i091MRvRTP7Nyts8dMJY&usqp=CAU"
|
88 |
}, {
|
89 |
value: "disco",
|
90 |
+
prompt: "Disco track",
|
91 |
label: "Disco",
|
92 |
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"
|
93 |
}, {
|
94 |
value: "trap",
|
95 |
+
prompt: "Trap track",
|
96 |
label: "Trap",
|
97 |
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"
|
98 |
}, {
|
99 |
value: "ambient",
|
100 |
+
prompt: "Ambient track",
|
101 |
label: "Ambient",
|
102 |
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"
|
103 |
}, {
|
104 |
value: "lofi",
|
105 |
+
prompt: "Lofi track",
|
106 |
label: "Lofi",
|
107 |
image: "https://miro.medium.com/v2/resize:fit:1358/0*FjF2hZ8cJQN9aBxk.jpg"
|
108 |
}, {
|
109 |
value: "chill",
|
110 |
+
prompt: "Chill track",
|
111 |
label: "Chill",
|
112 |
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"
|
113 |
}]
|
|
|
115 |
export const MOODS = [{
|
116 |
value: "happy",
|
117 |
label: "Happy",
|
118 |
+
prompt: "with an happy vibe",
|
119 |
emoji: "😊"
|
120 |
}, {
|
121 |
value: "sad",
|
122 |
label: "Sad",
|
123 |
+
prompt: "with a sad vibe",
|
124 |
emoji: "😢"
|
125 |
}, {
|
126 |
value: "angry",
|
127 |
label: "Angry",
|
128 |
+
prompt: "with an angry vibe",
|
129 |
emoji: "😡"
|
130 |
}, {
|
131 |
value: "chill",
|
132 |
label: "Chill",
|
133 |
+
prompt: "with a chill vibe",
|
134 |
emoji: "😌"
|
135 |
}, {
|
136 |
value: "romantic",
|
137 |
label: "Romantic",
|
138 |
+
prompt: "with a romantic vibe",
|
139 |
emoji: "😍"
|
140 |
}, {
|
141 |
value: "epic",
|
142 |
label: "Epic",
|
143 |
+
prompt: "with an epic vibe",
|
144 |
emoji: "🚀"
|
145 |
}, {
|
146 |
value: "energetic",
|
147 |
label: "Energetic",
|
148 |
+
prompt: "with an energetic vibe",
|
149 |
emoji: "🔥"
|
150 |
}, {
|
151 |
value: "dreamy",
|
152 |
label: "Dreamy",
|
153 |
+
prompt: "with a dreamy vibe",
|
154 |
emoji: "🌌"
|
155 |
}, {
|
156 |
value: "mysterious",
|
157 |
label: "Mysterious",
|
158 |
+
prompt: "with a mysterious vibe",
|
159 |
emoji: "🕵️"
|
160 |
}, {
|
161 |
value: "relaxing",
|
162 |
label: "Relaxing",
|
163 |
+
prompt: "with a relaxing vibe",
|
164 |
emoji: "😴"
|
165 |
}, {
|
166 |
value: "dark",
|
167 |
label: "Dark",
|
168 |
+
prompt: "with a dark vibe",
|
169 |
emoji: "🖤"
|
170 |
}, {
|
171 |
value: "upbeat",
|
172 |
label: "Upbeat",
|
173 |
+
prompt: "with an upbeat vibe",
|
174 |
emoji: "🎉"
|
175 |
}, {
|
176 |
value: "motivational",
|
177 |
label: "Motivational",
|
178 |
+
prompt: "with a motivational vibe",
|
179 |
emoji: "💪"
|
180 |
}, {
|
181 |
value: "inspiring",
|
182 |
label: "Inspiring",
|
183 |
+
prompt: "with an inspiring vibe",
|
184 |
emoji: "🌟"
|
185 |
}, {
|
186 |
value: "nostalgic",
|
187 |
label: "Nostalgic",
|
188 |
+
prompt: "with a nostalgic vibe",
|
189 |
emoji: "📼"
|
190 |
}, {
|
191 |
value: "groovy",
|
192 |
label: "Groovy",
|
193 |
+
prompt: "with a groovy vibe",
|
194 |
emoji: "🕺"
|
195 |
}, {
|
196 |
value: "melancholic",
|
197 |
label: "Melancholic",
|
198 |
+
prompt: "with a melancholic vibe",
|
199 |
emoji: "😔"
|
200 |
}, {
|
201 |
value: "hopeful",
|
202 |
label: "Hopeful",
|
203 |
+
prompt: "with a hopeful vibe",
|
204 |
emoji: "🌈"
|
205 |
}]
|
206 |
|
207 |
+
export const MUSIC_PROMPTS = [
|
208 |
+
'80s pop track with bassy drums and synth',
|
209 |
+
'90s rock song with loud guitars and heavy drums',
|
210 |
+
'a light and cheerly EDM track, with syncopated drums, aery pads, and strong emotions bpm: 130',
|
211 |
+
'A cheerful country song with acoustic guitars',
|
212 |
+
'lofi slow bpm electro chill with organic samples',
|
213 |
+
]
|
214 |
+
|
215 |
|
216 |
export function encodeWAV(samples: any[], sampleRate = 16000) {
|
217 |
let offset = 44;
|