Accessing debug from settings
This commit is contained in:
parent
259d369c10
commit
cb52377a76
|
@ -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">
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue