diff --git a/components/Settings.tsx b/components/Info.tsx similarity index 82% rename from components/Settings.tsx rename to components/Info.tsx index 364f307..0fb2eed 100644 --- a/components/Settings.tsx +++ b/components/Info.tsx @@ -1,19 +1,19 @@ import { Dialog, Transition } from "@headlessui/react"; import { Fragment, useState } from "react"; -import { FiSliders } from "react-icons/fi"; +import { FiInfo } from "react-icons/fi"; -const Settings = () => { +const Info = () => { const [open, setOpen] = useState(false); return ( <> @@ -52,14 +52,16 @@ const Settings = () => { >
- Settings + Welcome to Riffusion

- Here are some knobs for you to tweak. + Riffusion is a fine-tuned Stable Diffusion model that generates spectrogram images from any text prompt.

+

+ These images are then converted into music.

@@ -69,7 +71,7 @@ const Settings = () => { className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2" onClick={() => setOpen(false)} > - Wicked! + Let's Riff 🎸
@@ -81,4 +83,4 @@ const Settings = () => { ); }; -export default Settings; +export default Info; diff --git a/components/PromptPanel.tsx b/components/PromptPanel.tsx index c985c7b..bd54dfb 100644 --- a/components/PromptPanel.tsx +++ b/components/PromptPanel.tsx @@ -6,11 +6,13 @@ import {useRef} from 'react'; interface PromptPanelProps { prompts: PromptInput[]; addPrompt: (prompt: string) => void; + changeUpNextPrompt: (prompt: string) => void; } export default function PromptPanel({ prompts, addPrompt, + changeUpNextPrompt, }: PromptPanelProps) { const inputPrompt = useRef(null); @@ -19,7 +21,7 @@ export default function PromptPanel({ <>
-
+
{prompts.slice(-6).map((prompt, index) => ( ))} @@ -28,16 +30,17 @@ export default function PromptPanel({
{ e.preventDefault(); const prompt = e.currentTarget.prompt.value; - addPrompt(prompt); + changeUpNextPrompt(prompt); inputPrompt.current.value = ''; }}>
@@ -48,13 +51,12 @@ export default function PromptPanel({ } // WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something. -// option to use flexbox, but maybe want just static positioning instead
// need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state) const promptEntryClassNames = { 0: "font-light text-sm text-gray-400 text-opacity-40", 1: "font-normal text-m text-gray-300 text-opacity-60", 2: "font-medium text-xl text-gray-200 text-opacity-80", 3: "font-bold text-5xl text-white", // This is the primary prompt - 4: "font-medium text-2xl text-gray-200 text-opacity-80", + 4: "font-medium text-2xl text-gray-200 text-opacity-80", // This is prompt it is transitioning to 5: "font-normal text-m text-gray-300 text-opacity-60", } diff --git a/pages/index.tsx b/pages/index.tsx index b9012c4..b39422d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react"; import ThreeCanvas from "../components/ThreeCanvas"; import PromptPanel from "../components/PromptPanel"; -import Settings from "../components/Settings"; +import Info from "../components/Info"; import Pause from "../components/Pause"; import { InferenceResult, PromptInput } from "../types"; @@ -11,15 +11,12 @@ import { InferenceResult, PromptInput } from "../types"; import * as Tone from "tone"; const defaultPromptInputs = [ - { prompt: "A jazz pianist playing a classical concerto" }, - { prompt: "Taylor Swift singing with a tropical beat" }, - { prompt: "A typewriter in the bahamas" }, - { prompt: "Justin Bieber anger rap" }, - { - prompt: - "New york city rap, with a dust storm, cinematic score, dramatic, composition", - }, - { prompt: "Jack Johnson playing a harmonica in the 1920s" }, + { prompt: "A jazz pianist playing a classical concerto"}, + { prompt: "Country singer and a techno DJ"}, + { prompt: "A typewriter in they style of K-Pop"}, + { prompt: "Boy band with a tropical beat "}, + { prompt: "..."}, + { prompt: "Anything you want"}, ]; const defaultInferenceResults = [ @@ -210,9 +207,14 @@ export default function Home() { addPrompt={(prompt: string) => { setPromptInputs([...promptInputs, { prompt: prompt }]); }} + changeUpNextPrompt={(prompt: string) => { + const newPromptInputs = [...promptInputs]; + newPromptInputs[newPromptInputs.length - 1].prompt = prompt; + setPromptInputs(newPromptInputs); + }} /> - +