From b75ec7bef3e46f5226a466fca509b6aa023dfd5e Mon Sep 17 00:00:00 2001
From: pixelass <greg@pixelass.com>
Date: Thu, 11 Apr 2024 02:39:17 +0200
Subject: [PATCH 1/3] feat: improve ui and add presets

---
 src/components/audio-analyzer.tsx |  23 ++-
 src/components/composite-area.tsx | 124 +++++++--------
 src/components/drawing-area.tsx   |  13 +-
 src/components/index.tsx          |  94 ++++++++---
 src/components/layout.tsx         |   7 +-
 src/components/vj.tsx             | 230 +++++++++++++++++++--------
 src/components/waveform-area.tsx  | 253 +++++++++++++-----------------
 src/constants.ts                  |  21 ++-
 src/pages/_app.tsx                |  10 --
 9 files changed, 439 insertions(+), 336 deletions(-)

diff --git a/src/components/audio-analyzer.tsx b/src/components/audio-analyzer.tsx
index 1fd884d..1727d36 100644
--- a/src/components/audio-analyzer.tsx
+++ b/src/components/audio-analyzer.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/joy/Box";
 import Option from "@mui/joy/Option";
 import Select from "@mui/joy/Select";
 import { useSetAtom } from "jotai";
@@ -28,13 +29,15 @@ function DeviceSelector({ onSelect }: { onSelect: (deviceId: string) => void })
 	}
 
 	return (
-		<Select value={selectedDevice} placeholder="Audio" onChange={handleChange}>
-			{devices.map(device => (
-				<Option key={device.deviceId} value={device.deviceId}>
-					{device.label || "Unnamed Device"}
-				</Option>
-			))}
-		</Select>
+		<Box sx={{ width: 180 }}>
+			<Select value={selectedDevice} placeholder="Audio" onChange={handleChange}>
+				{devices.map(device => (
+					<Option key={device.deviceId} value={device.deviceId}>
+						{device.label || "Unnamed Device"}
+					</Option>
+				))}
+			</Select>
+		</Box>
 	);
 }
 
@@ -119,9 +122,5 @@ export function AudioAnalyzer() {
 		setAudioDevice(deviceId);
 	}
 
-	return (
-		<>
-			<DeviceSelector onSelect={handleDeviceSelect} />
-		</>
-	);
+	return <DeviceSelector onSelect={handleDeviceSelect} />;
 }
diff --git a/src/components/composite-area.tsx b/src/components/composite-area.tsx
index 13ba515..b6417df 100644
--- a/src/components/composite-area.tsx
+++ b/src/components/composite-area.tsx
@@ -2,39 +2,31 @@ import { useSDK } from "@captn/react/use-sdk";
 import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 
-import { drawingCanvasAtom, waveformCanvasAtom } from "../atoms";
-
+import { drawingCanvasAtom, waveformCanvasAtom } from "@/atoms";
 import { APP_ID } from "@/constants";
 
 type CompositeParameters = {
 	background?: string;
+	canvas?: OffscreenCanvas | null;
 };
 
 export function CompositeArea({ background }: CompositeParameters) {
 	const canvas = useRef<HTMLCanvasElement>(null);
 
-	const [drawingCanvass] = useAtom(drawingCanvasAtom);
-	const [waveformCanvass] = useAtom(waveformCanvasAtom);
+	const [drawingCanvas_] = useAtom(drawingCanvasAtom);
+	const [waveformCanvas_] = useAtom(waveformCanvasAtom);
 
 	const { send } = useSDK<unknown, string>(APP_ID, {});
 
 	useEffect(() => {
-		console.log("composite.area");
-		const canvasElement = canvas.current;
-
-		//
-		// function readerHandler() {
-		// 	const arrayBuffer: ArrayBuffer = reader.result as ArrayBuffer;
-		// 	const buffer = Buffer.from(arrayBuffer);
-
-		// 	send({ action: "livePainting:imageBuffer", payload: buffer });
-		// }
-
-		// const reader = new FileReader();
+		// Target for 60 FPS
+		const targetFrameInterval = 1000 / 60;
+		let lastRenderTime = Date.now();
+		let animationFrameId: number;
 
-		// reader.addEventListener("load", readerHandler);
+		const canvasElement = canvas.current;
 
-		if (!canvasElement) {
+		if (!canvasElement || !waveformCanvas_ || !drawingCanvas_) {
 			return;
 		}
 
@@ -43,6 +35,10 @@ export function CompositeArea({ background }: CompositeParameters) {
 		canvasElement.width = 512 * dpr;
 		const context = canvasElement.getContext("2d");
 
+		if (!context) {
+			return;
+		}
+
 		const offscreenCanvas = document.createElement("canvas");
 		const scale = 0.125;
 		offscreenCanvas.width = canvas.current.width * scale;
@@ -50,70 +46,61 @@ export function CompositeArea({ background }: CompositeParameters) {
 
 		const offscreenContext = offscreenCanvas.getContext("2d");
 
-		if (offscreenContext) {
-			offscreenContext.scale(scale, scale);
-		}
-
-		if (!context) {
+		if (!offscreenContext) {
 			return;
 		}
 
+		offscreenContext.scale(scale, scale);
 		context.scale(dpr, dpr);
 
-		const targetFrameInterval = 1000 / 50;
-		let lastRenderTime = Date.now();
-
-		let animationFrameId: number;
-
 		function renderLoop() {
 			const now = Date.now();
 			const elapsed = now - lastRenderTime;
 
+			if (
+				!context ||
+				!canvasElement ||
+				!drawingCanvas_ ||
+				!offscreenContext ||
+				!waveformCanvas_
+			) {
+				return;
+			}
+
 			if (elapsed > targetFrameInterval) {
 				lastRenderTime = now - (elapsed % targetFrameInterval);
 
-				if (!context || !canvasElement) {
-					return;
-				}
-
 				// Clear the canvas
 				context.clearRect(0, 0, canvasElement.width, canvasElement.height);
 
-				if (drawingCanvass) {
-					context.drawImage(drawingCanvass, 0, 0);
-				}
-
-				if (waveformCanvass) {
-					context.drawImage(waveformCanvass, 0, 0);
-				}
-
-				if (offscreenContext) {
-					offscreenContext.fillStyle = "#000";
-					offscreenContext.rect(0, 0, canvasElement.width, canvasElement.height);
-					offscreenContext.fill();
-
-					offscreenContext.drawImage(canvas.current, 0, 0);
-
-					// Send the composite canvas data to the backend
-					offscreenCanvas.toBlob(
-						async blob => {
-							if (!blob) {
-								return;
-							}
-
-							const arrayBuffer = await blob.arrayBuffer();
-							const buffer = Buffer.from(arrayBuffer);
-
-							send({
-								action: "livePainting:imageBuffer",
-								payload: { appId: APP_ID, buffer },
-							});
-							// Reader.readAsArrayBuffer(blob);
-						},
-						"image/jpeg",
-						0.1
-					);
-				}
+				// Create layers
+				context.drawImage(waveformCanvas_, 0, 0);
+				context.drawImage(drawingCanvas_, 0, 0);
+
+				offscreenContext.fillStyle = "#000000";
+				offscreenContext.rect(0, 0, canvasElement.width, canvasElement.height);
+				offscreenContext.fill();
+
+				offscreenContext.drawImage(canvasElement, 0, 0);
+
+				// Send the composite canvas data to the backend
+				offscreenCanvas.toBlob(
+					async blob => {
+						if (!blob) {
+							return;
+						}
+
+						const arrayBuffer = await blob.arrayBuffer();
+						const buffer = Buffer.from(arrayBuffer);
+
+						send({
+							action: "livePainting:imageBuffer",
+							payload: { appId: APP_ID, buffer },
+						});
+					},
+					"image/jpeg",
+					0.1
+				);
 			}
 
 			animationFrameId = requestAnimationFrame(renderLoop);
@@ -125,9 +112,8 @@ export function CompositeArea({ background }: CompositeParameters) {
 		// Cleanup function to cancel the loop when the component unmounts or dependencies change
 		return () => {
 			cancelAnimationFrame(animationFrameId);
-			// Reader.removeEventListener("load", readerHandler);
 		};
-	}, [drawingCanvass, waveformCanvass, send]);
+	}, [drawingCanvas_, waveformCanvas_, send]);
 
 	return <canvas ref={canvas} style={{ pointerEvents: "none", background }} />;
 }
diff --git a/src/components/drawing-area.tsx b/src/components/drawing-area.tsx
index 5a44311..41626af 100644
--- a/src/components/drawing-area.tsx
+++ b/src/components/drawing-area.tsx
@@ -2,16 +2,21 @@ import Box from "@mui/joy/Box";
 import { useAtom } from "jotai";
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef } from "react";
 
-import { clearCounterAtom, drawingCanvasAtom, livePaintingOptionsAtom } from "../atoms";
-
-export function DrawingArea({ isOverlay }: { isOverlay?: boolean }) {
+import { drawingCanvasAtom, livePaintingOptionsAtom } from "../atoms";
+
+export function DrawingArea({
+	isOverlay,
+	clearCounter,
+}: {
+	isOverlay?: boolean;
+	clearCounter: number;
+}) {
 	const canvas = useRef<HTMLCanvasElement>(null);
 	const context = useRef<CanvasRenderingContext2D | null>(null);
 	const [drawingCanvas, setDrawingCanvas] = useAtom(drawingCanvasAtom);
 
 	const isDrawing = useRef<boolean>(false);
 	const [livePaintingOptions] = useAtom(livePaintingOptionsAtom);
-	const [clearCounter] = useAtom(clearCounterAtom);
 	const canvasContainerReference = useRef<HTMLDivElement>(null);
 
 	function startDrawing(event: ReactPointerEvent) {
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 2bc2e96..c03870d 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -237,33 +237,77 @@ export function PromptSheet({
 				py: 2,
 			}}
 		>
-			<FormControl sx={{ minWidth: 200 }}>
-				<FormLabel>Style</FormLabel>
-				<Select
-					value={illustrationStyle}
-					renderValue={option => option && <Typography>{option.value}</Typography>}
-					onChange={(_event, value_) => {
-						if (value_) {
-							onIllustrationStyleChange(value_);
-						}
+			<Box sx={{ minWidth: 200 }}>
+				<FormControl sx={{ width: "100%" }}>
+					<FormLabel>Style</FormLabel>
+					<Select
+						value={illustrationStyle}
+						renderValue={option => option && <Typography>{option.value}</Typography>}
+						onChange={(_event, value_) => {
+							if (value_) {
+								onIllustrationStyleChange(value_);
+							}
+						}}
+					>
+						{Object.entries(illustrationStyles).map(([key_]) => (
+							<Option
+								key={key_}
+								value={key_}
+								sx={{ flexDirection: "column", alignItems: "stretch" }}
+							>
+								<Typography>{key_}</Typography>
+								{key_ === "Custom" && (
+									<Typography level="body-xs" component="div">
+										Please add your style in the prompt field
+									</Typography>
+								)}
+							</Option>
+						))}
+					</Select>
+				</FormControl>
+				<Button
+					onClick={() => {
+						onPromptChange("a group of people dancing in a disco");
 					}}
 				>
-					{Object.entries(illustrationStyles).map(([key_]) => (
-						<Option
-							key={key_}
-							value={key_}
-							sx={{ flexDirection: "column", alignItems: "stretch" }}
-						>
-							<Typography>{key_}</Typography>
-							{key_ === "custom" && (
-								<Typography level="body-xs" component="div">
-									customInfo
-								</Typography>
-							)}
-						</Option>
-					))}
-				</Select>
-			</FormControl>
+					1
+				</Button>
+				<Button
+					onClick={() => {
+						onPromptChange("a magical forest with elves");
+					}}
+				>
+					2
+				</Button>
+				<Button
+					onClick={() => {
+						onPromptChange("mythical creatures in a magical realm");
+					}}
+				>
+					3
+				</Button>
+				<Button
+					onClick={() => {
+						onPromptChange("a man meditating");
+					}}
+				>
+					4
+				</Button>
+				<Button
+					onClick={() => {
+						onPromptChange("a screaming monster in a dark cave");
+					}}
+				>
+					5
+				</Button>
+				<Button
+					onClick={() => {
+						onPromptChange("neural net, futuristic cyborg in utopia");
+					}}
+				>
+					6
+				</Button>
+			</Box>
 			<FormControl sx={{ flex: 1 }}>
 				<FormLabel>Prompt</FormLabel>
 				<Textarea
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index c238290..fc50337 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -1,12 +1,7 @@
 import { AppFrame } from "@captn/joy/app-frame";
-import { CustomScrollbars } from "@captn/joy/custom-scrollbars";
 import { TitleBar } from "@captn/joy/title-bar";
 import type { ReactNode } from "react";
 
 export default function Layout({ children }: { children?: ReactNode }) {
-	return (
-		<AppFrame titleBar={<TitleBar>VJ</TitleBar>}>
-			<CustomScrollbars>{children}</CustomScrollbars>
-		</AppFrame>
-	);
+	return <AppFrame titleBar={<TitleBar>VJ</TitleBar>}>{children}</AppFrame>;
 }
diff --git a/src/components/vj.tsx b/src/components/vj.tsx
index 98c4c3b..d67dc01 100644
--- a/src/components/vj.tsx
+++ b/src/components/vj.tsx
@@ -1,8 +1,10 @@
+import { CustomScrollbars } from "@captn/joy/custom-scrollbars";
 import { useSDK } from "@captn/react/use-sdk";
 import BrushIcon from "@mui/icons-material/Brush";
 import CasinoIcon from "@mui/icons-material/Casino";
 import ClearIcon from "@mui/icons-material/Clear";
 import Box from "@mui/joy/Box";
+import Button from "@mui/joy/Button";
 import Sheet from "@mui/joy/Sheet";
 import Switch from "@mui/joy/Switch";
 import Typography from "@mui/joy/Typography";
@@ -12,7 +14,7 @@ import { useEffect, useState } from "react";
 import { AudioAnalyzer } from "./audio-analyzer";
 import { CompositeArea } from "./composite-area";
 
-import { clearCounterAtom, imageAtom, livePaintingOptionsAtom } from "@/atoms";
+import { imageAtom, livePaintingOptionsAtom } from "@/atoms";
 import {
 	ColorInputButton,
 	PopupSlider,
@@ -23,7 +25,7 @@ import {
 } from "@/components";
 import { DrawingArea } from "@/components/drawing-area";
 import { RenderingArea } from "@/components/rendering-area";
-import { WaveformArea } from "@/components/waveform-area";
+import { useWaveformAnalyzer } from "@/components/waveform-area";
 import type { IllustrationStyles } from "@/constants";
 import { APP_ID } from "@/constants";
 import { illustrationStyles } from "@/constants";
@@ -34,20 +36,35 @@ export function randomSeed() {
 	return Math.ceil(Math.random() * 1_000_000_000) + 1;
 }
 
+function useLog(key: string, trigger: unknown) {
+	useEffect(() => {
+		console.log(`trigger, ${key}`);
+	}, [trigger, key]);
+}
+
 export function VJ() {
 	// Local States
+	const [guidanceSettings, setGuidanceSettings] = useState({
+		strength: 0.95,
+		guidance_scale: 1,
+		steps: 2,
+	});
 	const [isOverlay, setIsOverlay] = useState(false);
 	const [isColumn, setIsColumn] = useState(false);
 	const [prompt, setPrompt] = useState("");
-	const [illustrationStyle, setIllustrationStyle] = useState<IllustrationStyles>("childrensBook");
+	const [illustrationStyle, setIllustrationStyle] = useState<IllustrationStyles>(
+		Object.keys(illustrationStyles)[0] as IllustrationStyles
+	);
 	const [seed, setSeed] = useState(randomSeed());
+	const [clearCounter, setClearCounter] = useState(-1);
+
+	// Check if the ipc process is running
 	const [isRunning, setIsRunning] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	// Global States
 	const [livePaintingOptions, setLivePaintingOptions] = useAtom(livePaintingOptionsAtom);
 	const [image] = useAtom(imageAtom);
-	const [, setClearCounter] = useAtom(clearCounterAtom);
 
 	const { send } = useSDK<unknown, string>(APP_ID, {
 		onMessage(message) {
@@ -71,6 +88,8 @@ export function VJ() {
 		},
 	});
 
+	useWaveformAnalyzer(clearCounter);
+
 	useUnload(APP_ID, "livePainting:stop");
 
 	useEffect(() => {
@@ -80,14 +99,17 @@ export function VJ() {
 				payload: {
 					prompt: [prompt, illustrationStyles[illustrationStyle]].join(", "),
 					seed,
+					...guidanceSettings,
 				},
 			});
 		}
-	}, [send, prompt, seed, isRunning, illustrationStyle]);
+	}, [guidanceSettings, send, prompt, seed, isRunning, illustrationStyle]);
+
+	useLog("send", send);
 
 	return (
 		<Box sx={{ display: "flex", flexDirection: "column", minHeight: "100%" }}>
-			<StyledStickyHeader sx={{ background: "transparent" }}>
+			<StyledStickyHeader>
 				{/* Left Side of the header */}
 				<StyledButtonWrapper>
 					{/* Button to start and stop the live painting process */}
@@ -96,11 +118,17 @@ export function VJ() {
 						isRunning={isRunning}
 						onStop={() => {
 							setIsLoading(true);
-							send({ action: "livePainting:stop", payload: { appId: APP_ID } });
+							send({
+								action: "livePainting:stop",
+								payload: { appId: APP_ID },
+							});
 						}}
 						onStart={() => {
 							setIsLoading(true);
-							send({ action: "livePainting:start", payload: { appId: APP_ID } });
+							send({
+								action: "livePainting:start",
+								payload: { appId: APP_ID, stablefast: true },
+							});
 						}}
 					/>
 
@@ -115,11 +143,12 @@ export function VJ() {
 
 					<Switch
 						checked={isColumn}
-						startDecorator={<Typography>9:16</Typography>}
+						startDecorator={<Typography>Vertical</Typography>}
 						onChange={_event => {
 							setIsColumn(_event.target.checked);
 						}}
 					/>
+
 					<Box sx={theme => ({ width: theme.spacing(1) })} />
 					{/* Select the painting color */}
 					<ColorInputButton
@@ -158,6 +187,7 @@ export function VJ() {
 						<CasinoIcon />
 					</TooltipButton>
 					{/* Clear the drawing canvas */}
+					<Box sx={theme => ({ width: theme.spacing(1) })} />
 					<TooltipButton
 						label="Clear"
 						onClick={() => {
@@ -169,6 +199,66 @@ export function VJ() {
 				</StyledButtonWrapper>
 				{/* Right Side of the header */}
 				<StyledButtonWrapper>
+					<Button
+						variant={guidanceSettings.steps === 1 ? "soft" : "plain"}
+						onClick={() => {
+							setGuidanceSettings({
+								steps: 1,
+								guidance_scale: 0,
+								strength: 1,
+							});
+						}}
+					>
+						1
+					</Button>
+					<Button
+						variant={guidanceSettings.steps === 2 ? "soft" : "plain"}
+						onClick={() => {
+							setGuidanceSettings({
+								steps: 2,
+								guidance_scale: 1,
+								strength: 0.98,
+							});
+						}}
+					>
+						2
+					</Button>
+					<Button
+						variant={guidanceSettings.steps === 3 ? "soft" : "plain"}
+						onClick={() => {
+							setGuidanceSettings({
+								steps: 3,
+								guidance_scale: 1,
+								strength: 0.95,
+							});
+						}}
+					>
+						3
+					</Button>
+					<Button
+						variant={guidanceSettings.steps === 4 ? "soft" : "plain"}
+						onClick={() => {
+							setGuidanceSettings({
+								steps: 4,
+								guidance_scale: 1.25,
+								strength: 0.95,
+							});
+						}}
+					>
+						4
+					</Button>
+					<Button
+						variant={guidanceSettings.steps === 5 ? "soft" : "plain"}
+						onClick={() => {
+							setGuidanceSettings({
+								steps: 5,
+								guidance_scale: 1.5,
+								strength: 0.85,
+							});
+						}}
+					>
+						5
+					</Button>
 					<Box sx={{ flex: 1 }} />
 					<AudioAnalyzer />
 					{/* Save the image to disk (includes a control + s listener) */}
@@ -177,61 +267,75 @@ export function VJ() {
 			</StyledStickyHeader>
 
 			{/* Main Area includes the drawing and rendering area */}
-			<Sheet
-				sx={{
-					flex: 1,
-					display: "flex",
-					flexDirection: isColumn ? "column" : "row",
-					flexWrap: "wrap",
-					py: 20,
-					position: "relative",
-					justifyContent: "center",
-					alignItems: isColumn ? "center" : "initial",
-					maxWidth: "100%",
-					transform: "scale(1.125)",
-				}}
-			>
-				<Box
-					sx={{
-						height: 512,
-						position: isOverlay ? "absolute" : "relative",
-					}}
-				>
-					<RenderingArea />
-				</Box>
-				<Box
-					sx={{
-						width: 512,
-						height: 512,
-						zIndex: 2,
-						position: isOverlay ? "absolute" : "relative",
-						display: "flex",
-					}}
-				>
-					<Box
-						sx={{
-							position: "absolute",
-							zIndex: 1,
-							height: 512,
-						}}
-					>
-						<DrawingArea isOverlay={isOverlay} />
-					</Box>
-
-					<Box
-						sx={{
-							position: "absolute",
-							zIndex: 0,
-							height: 512,
-						}}
-					>
-						<CompositeArea background={isOverlay ? "none" : "#000"} />
-					</Box>
+			<Box sx={{ position: "relative", flex: 1 }}>
+				<Box sx={{ position: "absolute", inset: 0 }}>
+					<CustomScrollbars>
+						<Box
+							sx={{
+								minHeight: "100%",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+							}}
+						>
+							<Sheet
+								sx={{
+									flex: 1,
+									display: "flex",
+									flexDirection: isColumn ? "column" : "row",
+									flexWrap: "wrap",
+									position: "relative",
+									justifyContent: "center",
+									alignItems: "center",
+									maxWidth: "100%",
+								}}
+							>
+								<Box
+									sx={{
+										width: 512,
+										height: 512,
+										position: isOverlay ? "absolute" : "relative",
+										display: "flex",
+										zIndex: 1,
+									}}
+								>
+									<Box
+										sx={{
+											position: "absolute",
+											inset: 0,
+											opacity: isOverlay ? 0 : 1,
+										}}
+									>
+										<CompositeArea
+											background={isOverlay ? "none" : "#000000"}
+										/>
+									</Box>
+									<Box
+										sx={{
+											position: "absolute",
+											inset: 0,
+										}}
+									>
+										<DrawingArea
+											isOverlay={isOverlay}
+											clearCounter={clearCounter}
+										/>
+									</Box>
+								</Box>
+								<Box
+									sx={{
+										height: 512,
+										position: isOverlay ? "absolute" : "relative",
+										pointerEvents: "none",
+									}}
+								>
+									<RenderingArea />
+								</Box>
+							</Sheet>
+						</Box>
+					</CustomScrollbars>
 				</Box>
-			</Sheet>
-
-			<WaveformArea />
-
+			</Box>
 			<PromptSheet
 				illustrationStyle={illustrationStyle}
 				prompt={prompt}
diff --git a/src/components/waveform-area.tsx b/src/components/waveform-area.tsx
index 9a18222..cbf1413 100644
--- a/src/components/waveform-area.tsx
+++ b/src/components/waveform-area.tsx
@@ -1,10 +1,8 @@
-import Sheet from "@mui/joy/Sheet";
-import Switch from "@mui/joy/Switch";
-import { Typography } from "@mui/material";
 import { useAtom } from "jotai";
-import { useEffect, useRef, useState } from "react";
+import type { SliceableArrayLike } from "meyda";
+import { useEffect, useRef } from "react";
 
-import { bufferAtom, clearCounterAtom, rmsAtom, waveformCanvasAtom } from "../atoms";
+import { bufferAtom, rmsAtom, waveformCanvasAtom } from "@/atoms";
 
 type WaveformPosition = {
 	x: number;
@@ -12,177 +10,179 @@ type WaveformPosition = {
 	direction: "horizontal" | "vertical";
 };
 
-export function WaveformArea() {
-	const canvas = useRef<OffscreenCanvas | null>(null);
-	const context = useRef<OffscreenCanvasRenderingContext2D | null>(null);
+const positions: WaveformPosition[] = [
+	{ x: 0, y: -10, direction: "horizontal" },
+	{ x: 0, y: 0, direction: "horizontal" },
+	{ x: 0, y: 10, direction: "horizontal" },
+	{ x: -10, y: 0, direction: "vertical" },
+	{ x: 0, y: 0, direction: "vertical" },
+	{ x: 10, y: 0, direction: "vertical" },
+];
+
+/**
+ * This hook must only be used once to prevent irrational canvas element creation
+ * @param clearCounter
+ */
+export function useWaveformAnalyzer(clearCounter: number) {
+	const bufferReference = useRef<SliceableArrayLike<number> | null>(null);
+	const rmsReference = useRef(0);
+
+	// TODO these should probably be passed as arguments
 	const [buffer] = useAtom(bufferAtom);
 	const [rms] = useAtom(rmsAtom);
-	const [, setWaveformCanvas] = useAtom(waveformCanvasAtom);
-	const bufferReference = useRef<Float32Array | null>(null);
-	const rmsReference = useRef<number | null>(null);
-	const lastRenderTimeReference = useRef(Date.now());
-	const targetFrameInterval = 1000 / 50;
-	const [clearCounter] = useAtom(clearCounterAtom);
-	const [isXorActive, setIsXorActive] = useState(false);
-	const [isScaleActive, setIsScaleActive] = useState(false);
-	const scaleFactorReference = useRef(0.95);
-	const offscreenCanvasReference = useRef<OffscreenCanvas | null>(null);
-	const offscreenContextReference = useRef<OffscreenCanvasRenderingContext2D | null>(null);
-	const [waveformPositions, setWaveformPositions] = useState<WaveformPosition[]>([]);
+	const [waveformCanvas, setWaveformCanvas] = useAtom(waveformCanvasAtom);
 
 	useEffect(() => {
-		const offscreenCanvas = new OffscreenCanvas(512, 512);
-		canvas.current = new OffscreenCanvas(512, 512);
-		const canvasElement = canvas.current;
-
+		// Target 60 FPS
+		const canvasSize = 512;
+		const targetFrameInterval = 1000 / 60;
+		let lastRenderTime = Date.now();
+		let animationFrame = -1;
+		const offscreenCanvas = new OffscreenCanvas(canvasSize, canvasSize);
+		const onscreenCanvas = new OffscreenCanvas(canvasSize, canvasSize);
+
+		// Set the canvas so that it can be returned by this hook
+		setWaveformCanvas(onscreenCanvas);
+
+		// Set up device pixel ratio
 		const dpr = Math.max(window.devicePixelRatio, 1);
-		canvasElement.width = 512 * dpr;
-		canvasElement.height = 512 * dpr;
+		onscreenCanvas.width = 512 * dpr;
+		onscreenCanvas.height = 512 * dpr;
 
 		offscreenCanvas.width = 512 * dpr;
 		offscreenCanvas.height = 512 * dpr;
-		const offscreenContext = offscreenCanvas.getContext("2d");
-
-		context.current = canvasElement.getContext("2d");
 
-		if (context && context.current) {
-			context.current.scale(dpr, dpr);
-
-			context.current.globalAlpha = 0.25;
-			context.current.globalCompositeOperation = "darken";
+		// Canvas contexts
+		const offscreenContext = offscreenCanvas.getContext("2d");
+		const context = onscreenCanvas.getContext("2d");
 
-			// Use the offscreen canvas for the waveform drawing
-			setWaveformCanvas(canvasElement);
+		if (context) {
+			context.scale(dpr, dpr);
+			context.globalAlpha = 0.25;
+			context.globalCompositeOperation = "darken";
 		}
 
-		const positions: WaveformPosition[] = [
-			{ x: 0, y: -10, direction: "horizontal" },
-			{ x: 0, y: 0, direction: "horizontal" },
-			{ x: 0, y: 10, direction: "horizontal" },
-			{ x: -10, y: 0, direction: "vertical" },
-			{ x: 0, y: 0, direction: "vertical" },
-			{ x: 10, y: 0, direction: "vertical" },
-		];
-
 		if (offscreenContext) {
 			offscreenContext.scale(dpr, dpr);
-			offscreenContextReference.current = offscreenContext;
-			offscreenCanvasReference.current = offscreenCanvas;
 		}
 
 		function renderLoop() {
 			const now = Date.now();
-			const elapsed = now - lastRenderTimeReference.current;
+			const elapsed = now - lastRenderTime;
 			const rmsThreshold = 0.095;
+			const { width, height } = onscreenCanvas;
 
+			// Early exit if either flag is triggered
 			if (
-				elapsed > targetFrameInterval &&
-				context.current &&
-				bufferReference.current &&
-				rmsReference.current &&
-				offscreenContextReference.current
+				!context ||
+				!offscreenContext ||
+				!bufferReference.current ||
+				rmsReference.current <= 0
 			) {
-				lastRenderTimeReference.current = now - (elapsed % targetFrameInterval);
+				animationFrame = requestAnimationFrame(renderLoop);
+				return;
+			}
 
-				const { width, height } = canvasElement;
+			// Only proceed if the elapsedTime is greater than our interval
+			if (elapsed > targetFrameInterval) {
+				lastRenderTime = now - (elapsed % targetFrameInterval);
 
-				offscreenContextReference.current.drawImage(context.current.canvas, 0, 0);
+				offscreenContext.drawImage(onscreenCanvas, 0, 0);
 
 				// Clear the main canvas
-				context.current.clearRect(
-					0,
-					0,
-					context.current.canvas.width,
-					context.current.canvas.height
-				);
+				context.clearRect(0, 0, onscreenCanvas.width, onscreenCanvas.height);
 
 				// Apply scaling and draw the content back from the offscreen canvas
-				context.current.save();
+				context.save();
+
+				// Below 1 is downscale, above is upscale.
+				// Force below 1 by setting 0.99
 				const scaleFactor =
 					0.99 + (rmsReference.current >= rmsThreshold ? rmsReference.current : 0) * 0.75;
 
-				context.current.scale(scaleFactor, scaleFactor);
-				const dx =
-					(context.current.canvas.width - context.current.canvas.width * scaleFactor) / 2;
-				const dy =
-					(context.current.canvas.height - context.current.canvas.height * scaleFactor) /
-					2;
+				context.scale(scaleFactor, scaleFactor);
+				const dx = (context.canvas.width - context.canvas.width * scaleFactor) / 2;
+				const dy = (context.canvas.height - context.canvas.height * scaleFactor) / 2;
 
-				if (offscreenCanvasReference) {
-					context.current.drawImage(offscreenCanvasReference.current!, dx, dy);
-				}
+				context.drawImage(offscreenCanvas, dx, dy);
 
-				context.current.restore();
+				context.restore();
 
 				const hue = (rmsReference.current / 0.2) * 360;
-				const saturation = 100;
-				const hsl = `hsl(${hue}, ${saturation}%, 80%)`;
+				const hsl = `hsl(${hue}, 100%, 80%)`;
 
 				for (const position of positions) {
-					context.current.globalAlpha =
-						rmsReference.current >= rmsThreshold ? 0.125 : 0.025;
-					context.current.globalCompositeOperation =
-						rmsReference.current >= rmsThreshold ? "source-over" : "source-over";
-					context.current.fillStyle = "#000";
-					context.current.fillRect(0, 0, canvasElement.width, canvasElement.height);
-
-					//
-					// context.current.globalCompositeOperation = isXorActive
-					// 	? "xor"
-					// 	: context.current.globalCompositeOperation;
+					context.globalAlpha = rmsReference.current >= rmsThreshold ? 0.125 : 0.025;
+					context.globalCompositeOperation = "source-over";
+					context.fillStyle = "#000000";
+					context.fillRect(0, 0, onscreenCanvas.width, onscreenCanvas.height);
 
 					if (rmsReference.current >= rmsThreshold) {
-						context.current.lineWidth = Math.max(50, 500 * rmsReference.current);
+						context.lineWidth = Math.max(50, 500 * rmsReference.current);
 
-						context.current.strokeStyle = hsl;
+						context.strokeStyle = hsl;
 					} else {
-						context.current.lineWidth = 5;
-						context.current.strokeStyle = "#fff";
+						context.lineWidth = 5;
+						context.strokeStyle = "#ffffff";
 					}
 
-					context.current.globalAlpha = 1;
+					context.globalAlpha = 1;
 					const sliceWidth = width / bufferReference.current.length;
 					const scaling = 1.75;
 
-					// Horizontal
+					// Handle either horizontal or vertical
 					if (position.direction === "horizontal") {
-						context.current.beginPath();
-						context.current.moveTo(0, height / 2 + position.y);
+						context.beginPath();
+						context.moveTo(0, height / 2 + position.y);
 
 						for (let index = 0; index < bufferReference.current.length; index++) {
-							const v = bufferReference.current[index] * scaling;
-							const y = width / 2 + (v * width) / 2 + position.y;
+							const delta = bufferReference.current[index] * scaling;
+							const y = width / 2 + (delta * width) / 2 + position.y;
 							const x = sliceWidth * index + position.x;
-							context.current.lineTo(x, y);
+							context.lineTo(x, y);
 						}
 
-						context.current.lineTo(width, height / 2 + position.y);
-						context.current.stroke();
-					}
-					// Vertical
-					else if (position.direction === "vertical") {
-						context.current.beginPath();
-						context.current.moveTo(width / 2 + position.x, 0);
+						context.lineTo(width, height / 2 + position.y);
+						context.stroke();
+					} else {
+						context.beginPath();
+						context.moveTo(width / 2 + position.x, 0);
 
 						for (let index = 0; index < bufferReference.current.length; index++) {
-							const v = bufferReference.current[index] * scaling;
-							const x = height / 2 + (v * height) / 2 + position.x;
+							const delta = bufferReference.current[index] * scaling;
+							const x = height / 2 + (delta * height) / 2 + position.x;
 							const y = sliceWidth * index + position.y;
-							context.current.lineTo(x, y);
+							context.lineTo(x, y);
 						}
 
-						context.current.lineTo(width / 2 + position.x, height);
-						context.current.stroke();
+						context.lineTo(width / 2 + position.x, height);
+						context.stroke();
 					}
 				}
 			}
 
-			requestAnimationFrame(renderLoop);
+			animationFrame = requestAnimationFrame(renderLoop);
 		}
 
-		renderLoop();
-	}, [isXorActive, setWaveformCanvas, targetFrameInterval, waveformPositions]);
+		animationFrame = requestAnimationFrame(renderLoop);
+
+		return () => {
+			cancelAnimationFrame(animationFrame);
+		};
+	}, [setWaveformCanvas]);
 
+	// Clear mechanism to clear the context when the clear button is clicked or a similar process changes the clearCounter value
+	useEffect(() => {
+		if (waveformCanvas) {
+			const context = waveformCanvas.getContext("2d");
+			if (context) {
+				context.globalAlpha = 1;
+				context.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height);
+			}
+		}
+	}, [waveformCanvas, clearCounter]);
+
+	// Mutation helpers
 	useEffect(() => {
 		bufferReference.current = buffer;
 	}, [buffer]);
@@ -191,32 +191,5 @@ export function WaveformArea() {
 		rmsReference.current = rms;
 	}, [rms]);
 
-	useEffect(() => {
-		if (context && context.current && canvas.current) {
-			context.current.globalAlpha = 1;
-			context.current.clearRect(0, 0, canvas.current.width, canvas.current.height);
-		}
-	}, [clearCounter]);
-
-	// UseEffect(() => {
-
-	// }, [isScaleActive]);
-
-	return (
-		<>
-			<Sheet>
-				<Typography>Waveform</Typography>
-				<Switch
-					checked={isXorActive}
-					startDecorator={<Typography>xor</Typography>}
-					onChange={event => setIsXorActive(event.target.checked)}
-				/>
-				<Switch
-					checked={isScaleActive}
-					startDecorator={<Typography>scale down</Typography>}
-					onChange={event => setIsScaleActive(event.target.checked)}
-				/>
-			</Sheet>
-		</>
-	);
+	return waveformCanvas;
 }
diff --git a/src/constants.ts b/src/constants.ts
index 2a52d6f..f70bfb0 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,16 +1,23 @@
 export const APP_ID = "fd82ab5b-2ebd-46ea-91f6-7b25cbaf9325";
 
 export const illustrationStyles = {
-	childrensBook:
+	Kaleidoscope:
+		"psychedelic, fractal patterns, vibrant colors, rainbow, form constants, trippy, kaleidoscope, floral, ornaments",
+	Geometric:
+		"abstract geometry, iridescent, reflective, shiny, sharp focus, best quality, 3d render",
+	Complex: "intricate patterns, textured surface, shader effects, incredible kinetic art",
+	Shamanic:
+		"intricate tribal patterns, aztec, maya patterns, mexican style, shamanism, ethnobotany, ornate elements, spiritual visuals",
+	"Children's book":
 		"whimsical, watercolor, children's book illustration, soft edges, vibrant highlights, light and shadow play, dynamic perspective, expressive, anthropomorphic details, pastel background, colorful accents, imaginative scenery",
-	manga: "anime, manga art kodomo style, bright colors, simple lines, clear outlines, minimal detail, vibrant settings, fantasy elements, playful designs, friendship themes",
-	fantasyArt:
+	Anime: "anime, manga art chibi, kawaii style, bright colors, fantasy elements, playful designs",
+	"Fantasy Art":
 		"detailed, imaginative, epic, vibrant color palette, mythical themes, dynamic lighting, magical elements",
-	realism:
+	Realism:
 		"high detail, accurate proportions, lifelike textures, natural lighting, depth of field, subtle color variation, realistic expressions, meticulous backgrounds, true-to-life scenes",
-	graphicNovel:
-		"inked lines, bold shading, sequential art, visual storytelling, cinematic framing, noir tones",
-	custom: "",
+	Photography:
+		"best quality, 4k, aperture f/2.8, film grain, bokeh, incredible detail, highres, professional, silhouette shadow, vibrant colors, intricate contours",
+	Custom: "",
 };
 
 export type IllustrationStyles = keyof typeof illustrationStyles;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 74f1c16..324ce7b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,5 @@
 import { globalStyles } from "@captn/joy/styles";
 import { ThemeProvider } from "@captn/joy/theme";
-import { useSDK } from "@captn/react/use-sdk";
 import { USER_THEME_KEY } from "@captn/utils/constants";
 import CssBaseline from "@mui/joy/CssBaseline";
 import { useColorScheme } from "@mui/joy/styles";
@@ -8,17 +7,8 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import { useEffect } from "react";
 
-import package_ from "../../package.json";
-
-const id = package_.name;
-
 export function ThemeHandler() {
 	const { setMode } = useColorScheme();
-	useSDK<string, { appPath: string }>(id, {
-		onMessage(message) {
-			console.log(message);
-		},
-	});
 
 	useEffect(() => {
 		const unsubscribeTheme = window.ipc?.on(

From 4a75c6e8ded6141881a398ace9461ff0591b6620 Mon Sep 17 00:00:00 2001
From: pixelass <greg@pixelass.com>
Date: Thu, 11 Apr 2024 17:25:10 +0200
Subject: [PATCH 2/3] feat: update styles

---
 package.json          | 2 +-
 src/components/vj.tsx | 1 -
 src/constants.ts      | 3 ++-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 9b17792..b790508 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "build": "next build",
     "prebuild": "npm run eslint -- --fix",
-    "__postbuild": "xcopy out\\* C:\\Users\\NERDDISCO\\AppData\\Roaming\\captain__development__\\Captain_Data\\apps\\fd82ab5b-2ebd-46ea-91f6-7b25cbaf9325\\ /E /H /C /I /Y",
+    "postbuild": "xcopy out\\* C:\\Users\\greg\\AppData\\Roaming\\captain__development__\\Captain_Data\\apps\\fd82ab5b-2ebd-46ea-91f6-7b25cbaf9325\\ /E /H /C /I /Y",
     "dev": "next dev",
     "eslint": "eslint \"src/{**/*,*}.{ts,tsx}\"",
     "lint": "next lint",
diff --git a/src/components/vj.tsx b/src/components/vj.tsx
index d52647a..485d90e 100644
--- a/src/components/vj.tsx
+++ b/src/components/vj.tsx
@@ -105,7 +105,6 @@ export function VJ() {
 		}
 	}, [guidanceSettings, send, prompt, seed, isRunning, illustrationStyle]);
 
-
 	return (
 		<Box sx={{ display: "flex", flexDirection: "column", minHeight: "100%" }}>
 			<StyledStickyHeader>
diff --git a/src/constants.ts b/src/constants.ts
index f70bfb0..6298810 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -10,7 +10,8 @@ export const illustrationStyles = {
 		"intricate tribal patterns, aztec, maya patterns, mexican style, shamanism, ethnobotany, ornate elements, spiritual visuals",
 	"Children's book":
 		"whimsical, watercolor, children's book illustration, soft edges, vibrant highlights, light and shadow play, dynamic perspective, expressive, anthropomorphic details, pastel background, colorful accents, imaginative scenery",
-	Anime: "anime, manga art chibi, kawaii style, bright colors, fantasy elements, playful designs",
+	Mandelbulb:
+		"mandelbulb fractal, ultra sharp focus, extremely intricate texture, precise lines, highres, 3d fractals, 4d, 4k, shader material, madelbrot set, zoom",
 	"Fantasy Art":
 		"detailed, imaginative, epic, vibrant color palette, mythical themes, dynamic lighting, magical elements",
 	Realism:

From 3905b681e157556947b6f0b2041b6bb7e8140a9d Mon Sep 17 00:00:00 2001
From: pixelass <greg@pixelass.com>
Date: Thu, 11 Apr 2024 17:26:44 +0200
Subject: [PATCH 3/3] fix: typo

---
 src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants.ts b/src/constants.ts
index 6298810..5ab16aa 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -11,7 +11,7 @@ export const illustrationStyles = {
 	"Children's book":
 		"whimsical, watercolor, children's book illustration, soft edges, vibrant highlights, light and shadow play, dynamic perspective, expressive, anthropomorphic details, pastel background, colorful accents, imaginative scenery",
 	Mandelbulb:
-		"mandelbulb fractal, ultra sharp focus, extremely intricate texture, precise lines, highres, 3d fractals, 4d, 4k, shader material, madelbrot set, zoom",
+		"mandelbulb fractal, ultra sharp focus, extremely intricate texture, precise lines, highres, 3d fractals, 4d, 4k, shader material, mandelbrot set, zoom",
 	"Fantasy Art":
 		"detailed, imaginative, epic, vibrant color palette, mythical themes, dynamic lighting, magical elements",
 	Realism: