diff --git a/components/DebugView.tsx b/components/DebugView.tsx new file mode 100644 index 0000000..7730239 --- /dev/null +++ b/components/DebugView.tsx @@ -0,0 +1,102 @@ +import { Dialog } from "@headlessui/react"; +import { useState } from "react"; +import { ImStatsBars } from "react-icons/im"; +import styled from "styled-components"; + +import { InferenceResult, PromptInput } from "../types"; + +interface DebugViewProps { + promptInputs: PromptInput[]; + inferenceResults: InferenceResult[]; + nowPlayingResult: InferenceResult; +} + +const ModalContainer = styled.div` + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; +`; + +export default function DebugView({ + promptInputs, + inferenceResults, + nowPlayingResult, +}: DebugViewProps) { + const [open, setOpen] = useState(false); + + let buttonClassName = ""; + if (open) { + buttonClassName = + "fixed z-20 bottom-16 right-4 md:bottom-16 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"; + } else { + buttonClassName = + "fixed z-20 bottom-16 right-4 md:bottom-16 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"; + } + + return ( + <> + setOpen(true)} + > + + + + setOpen(false)} + as="div" + className="fixed inset-0 z-10" + > + + + + + + Prompt Inputs + + + {promptInputs.map((promptInput) => ( + + "{promptInput.prompt}" - {promptInput.transitionCounter} + + ))} + + + Inference Results + + + + {inferenceResults.map((result) => ( + + #{result.counter} - Alpha{" "} + {result.input.alpha.toFixed(2)} from (" + {result.input.start.prompt}", {result.input.start.seed}) + to (" + {result.input.end.prompt}", {result.input.end.seed}) + + ))} + + + + + + + + > + ); +} diff --git a/pages/index.tsx b/pages/index.tsx index 5eeeccd..9c448db 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import * as Tone from "tone"; import AudioPlayer from "../components/AudioPlayer"; +import DebugView from "../components/DebugView"; import PageHead from "../components/PageHead"; import Info from "../components/Info"; import Share from "../components/Share"; @@ -47,10 +48,13 @@ export default function Home() { const [promptInputs, setPromptInputs] = useState([]); // Model execution results - const [inferenceResults, setInferenceResults] = useState([]); + const [inferenceResults, setInferenceResults] = useState( + [] + ); // Currently playing result, from the audio player - const [nowPlayingResult, setNowPlayingResult] = useState(null); + const [nowPlayingResult, setNowPlayingResult] = + useState(null); // Set the initial seed from the URL if available const router = useRouter(); @@ -185,9 +189,9 @@ export default function Home() { if (r.counter == result.counter) { r.played = true; } - return r - }) - }) + return r; + }); + }); }; return ( @@ -210,7 +214,7 @@ export default function Home() { promptInputs={promptInputs} nowPlayingResult={nowPlayingResult} newResultCallback={newResultCallback} - useBaseten={false} + useBaseten={true} /> + > );