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 1094b78..bd54dfb 100644 --- a/components/PromptPanel.tsx +++ b/components/PromptPanel.tsx @@ -21,7 +21,7 @@ export default function PromptPanel({ <>
-
+
{prompts.slice(-6).map((prompt, index) => ( ))} @@ -34,12 +34,13 @@ export default function PromptPanel({ inputPrompt.current.value = ''; }}> @@ -56,6 +57,6 @@ const promptEntryClassNames = { 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 d223862..363fe46 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } 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"; @@ -12,11 +12,11 @@ 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: "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 = [ @@ -151,7 +151,7 @@ export default function Home() { }} /> - +