103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
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 (
|
|
<>
|
|
<button
|
|
title="Debug"
|
|
className={buttonClassName}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<ImStatsBars />
|
|
</button>
|
|
|
|
<Dialog
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
as="div"
|
|
className="fixed inset-0 z-10"
|
|
>
|
|
<ModalContainer>
|
|
<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">
|
|
Prompt Inputs
|
|
</h2>
|
|
<div className="mt-4 font-mono">
|
|
{promptInputs.map((promptInput) => (
|
|
<div key={promptInput.prompt}>
|
|
"{promptInput.prompt}" - {promptInput.transitionCounter}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<h2 className="text-xl font-medium leading-6 text-gray-900 pb-2">
|
|
Inference Results
|
|
</h2>
|
|
<div className="mt-4 font-mono">
|
|
<ul>
|
|
{inferenceResults.map((result) => (
|
|
<li
|
|
key={result.counter}
|
|
className={
|
|
result.counter === nowPlayingResult?.counter
|
|
? "text-red-700"
|
|
: "text-black"
|
|
}
|
|
>
|
|
<b>#{result.counter}</b> - Alpha{" "}
|
|
{result.input.alpha.toFixed(2)} from ("
|
|
{result.input.start.prompt}", {result.input.start.seed})
|
|
to ("
|
|
{result.input.end.prompt}", {result.input.end.seed})
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</div>
|
|
</div>
|
|
</ModalContainer>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|