From cb52377a76c60523b6b5e34bd1273f7750462953 Mon Sep 17 00:00:00 2001
From: Seth Forsgren <forsgren.seth@gmail.com>
Date: Mon, 12 Dec 2022 11:27:58 -0800
Subject: [PATCH] Accessing debug from settings

---
 components/DebugView.tsx | 27 ++++--------------
 components/Settings.tsx  | 60 +++++++++++++++++++++++++++++++++++++++-
 pages/index.tsx          | 12 +++-----
 3 files changed, 69 insertions(+), 30 deletions(-)

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 (
     <>
-      <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">
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
+                      )}
+
                     </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}
+      />
+    </>
+  );
 }
\ 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}
         />
 
-        {/* <Info /> */}
-
-        <DebugView
-          promptInputs={promptInputs}
-          inferenceResults={inferenceResults}
-          nowPlayingResult={nowPlayingResult}
+        <Settings 
+          promptInputs={promptInputs} 
+          inferenceResults={inferenceResults} 
+          nowPlayingResult={nowPlayingResult} 
         />
-
-        <Settings />
       </div>
     </>
   );