diff --git a/components/DebugView.tsx b/components/DebugView.tsx index ad3cffd..4461c0b 100644 --- a/components/DebugView.tsx +++ b/components/DebugView.tsx @@ -9,6 +9,8 @@ interface DebugViewProps { promptInputs: PromptInput[]; inferenceResults: InferenceResult[]; nowPlayingResult: InferenceResult; + open: boolean ; + setOpen: (open: boolean) => void; } const ModalContainer = styled.div` @@ -27,36 +29,19 @@ export default function DebugView({ promptInputs, inferenceResults, nowPlayingResult, + open, + setOpen, }: 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(false)} as="div" - className="fixed inset-0 z-20" + className="fixed inset-0 z-30" > -
+

diff --git a/components/Settings.tsx b/components/Settings.tsx index c64b714..eb9a682 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,7 +1,10 @@ import { Dialog, Transition } from "@headlessui/react"; import { Fragment, useState } from "react"; import { FiSettings } from "react-icons/fi"; +import { ImStatsBars } from "react-icons/im"; import styled, { css } from "styled-components"; +import { InferenceResult, PromptInput } from "../types"; +import DebugView from "./DebugView"; const ModalContainer = styled.div` position: absolute; @@ -15,7 +18,17 @@ align-items: center; justify-content: center; `; -export default function Settings() { +interface DebugViewProps { + promptInputs: PromptInput[]; + inferenceResults: InferenceResult[]; + nowPlayingResult: InferenceResult; +} + +export default function Settings({ + promptInputs, + inferenceResults, + nowPlayingResult, +}: DebugViewProps) { const [open, setOpen] = useState(false); var classNameCondition = "" @@ -89,6 +102,12 @@ export default function Settings() { {denoisingSelector()} + {debugButton( + promptInputs, + inferenceResults, + nowPlayingResult + )} +

@@ -177,4 +196,43 @@ export function denoisingSelector() {
) +} + +export function debugButton( + promptInputs, + inferenceResults, + nowPlayingResult +) { + let buttonClassName = ""; + if (open) { + buttonClassName = + "fixed z-20 top-4 right-6 bg-sky-400 w-10 h-10 rounded-full flex justify-center items-center text-white text-xl hover:bg-sky-500 hover:drop-shadow-2xl"; + } else { + buttonClassName = + "fixed z-20 top-4 right-6 bg-sky-100 w-10 h-10 rounded-full flex justify-center items-center text-sky-900 text-xl hover:text-white hover:bg-sky-500 hover:drop-shadow-2xl"; + } + + const [debugOpen, debugSetOpen] = useState(false); + + return ( + <> + + + + + ); } \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 5e040b7..26c40c1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -243,15 +243,11 @@ export default function Home() { nowPlayingResult={nowPlayingResult} /> - {/* */} - - - -
);