Add debug view

components/DebugView.tsx

@@ -0,0 +1,102 @@
+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>
+    </>
+  );
+}

pages/index.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import * as Tone from "tone";
 
 import AudioPlayer from "../components/AudioPlayer";
+import DebugView from "../components/DebugView";
 import PageHead from "../components/PageHead";
 import Info from "../components/Info";
 import Share from "../components/Share";
@@ -47,10 +48,13 @@ export default function Home() {
   const [promptInputs, setPromptInputs] = useState<PromptInput[]>([]);
 
   // Model execution results
-  const [inferenceResults, setInferenceResults] = useState<InferenceResult[]>([]);
+  const [inferenceResults, setInferenceResults] = useState<InferenceResult[]>(
+    []
+  );
 
   // Currently playing result, from the audio player
-  const [nowPlayingResult, setNowPlayingResult] = useState<InferenceResult>(null);
+  const [nowPlayingResult, setNowPlayingResult] =
+    useState<InferenceResult>(null);
 
   // Set the initial seed from the URL if available
   const router = useRouter();
@@ -185,9 +189,9 @@ export default function Home() {
         if (r.counter == result.counter) {
           r.played = true;
         }
-        return r
-      })
-    })
+        return r;
+      });
+    });
   };
 
   return (
@@ -210,7 +214,7 @@ export default function Home() {
           promptInputs={promptInputs}
           nowPlayingResult={nowPlayingResult}
           newResultCallback={newResultCallback}
-          useBaseten={false}
+          useBaseten={true}
         />
         <AudioPlayer
           paused={paused}
@@ -238,6 +242,11 @@ export default function Home() {
         />
 
         <Info />
+        <DebugView
+          promptInputs={promptInputs}
+          inferenceResults={inferenceResults}
+          nowPlayingResult={nowPlayingResult}
+        />
       </div>
     </>
   );