Accessing debug from settings

This commit is contained in:
Seth Forsgren 2022-12-12 11:27:58 -08:00
parent 259d369c10
commit cb52377a76
3 changed files with 69 additions and 30 deletions

View File

@ -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 (
<>
<button
title="Debug"
className={buttonClassName}
onClick={() => setOpen(true)}
>
<ImStatsBars />
</button>
<Dialog
open={open}
onClose={() => setOpen(false)}
as="div"
className="fixed inset-0 z-20"
className="fixed inset-0 z-30"
>
<ModalContainer>
<div className="px-4 text-center text-sm whitespace-nowrap h-[40rem] w-[70rem] overflow-x-scroll">
<div className="px-4 text-center text-sm whitespace-nowrap h-[40rem] w-[70rem] overflow-x-scroll">
<div className="my-8 inline-block transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Panel>
<h2 className="text-xl font-medium leading-6 text-gray-900 pb-2">

View File

@ -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
)}
</p>
</div>
@ -177,4 +196,43 @@ export function denoisingSelector() {
</label>
</div>
)
}
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 (
<>
<button
title="Debug"
className={buttonClassName}
onClick={() => {
debugSetOpen(true);
}}
>
<ImStatsBars />
</button>
<DebugView
promptInputs={promptInputs}
inferenceResults={inferenceResults}
nowPlayingResult={nowPlayingResult}
open={debugOpen}
setOpen={debugSetOpen}
/>
</>
);
}

View File

@ -243,15 +243,11 @@ export default function Home() {
nowPlayingResult={nowPlayingResult}
/>
{/* <Info /> */}
<DebugView
promptInputs={promptInputs}
inferenceResults={inferenceResults}
nowPlayingResult={nowPlayingResult}
<Settings
promptInputs={promptInputs}
inferenceResults={inferenceResults}
nowPlayingResult={nowPlayingResult}
/>
<Settings />
</div>
</>
);