Merge pull request #2 from blib-la/feat/improve-app

feat: improve app

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",

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";
@@ -29,13 +30,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>
 	);
 }
 

src/components/index.tsx

@@ -236,33 +236,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

src/components/vj.tsx

@@ -4,6 +4,7 @@ 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";
@@ -43,6 +44,11 @@ function useLog(key: string, trigger: unknown) {
 
 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("");
@@ -93,15 +99,11 @@ export function VJ() {
 				payload: {
 					prompt: [prompt, illustrationStyles[illustrationStyle]].join(", "),
 					seed,
-					steps: 1,
-					guidance_scale: 0,
-					strength: 1,
+					...guidanceSettings,
 				},
 			});
 		}
-	}, [send, prompt, seed, isRunning, illustrationStyle]);
-
-	useLog("send", send);
+	}, [guidanceSettings, send, prompt, seed, isRunning, illustrationStyle]);
 
 	return (
 		<Box sx={{ display: "flex", flexDirection: "column", minHeight: "100%" }}>
@@ -114,11 +116,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 },
+							});
 						}}
 					/>
 
@@ -189,6 +197,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) */}
@@ -220,27 +288,20 @@ export function VJ() {
 									maxWidth: "100%",
 								}}
 							>
-								<Box
-									sx={{
-										height: 512,
-										position: isOverlay ? "absolute" : "relative",
-									}}
-								>
-									<RenderingArea />
-								</Box>
 								<Box
 									sx={{
 										width: 512,
 										height: 512,
-										zIndex: 2,
 										position: isOverlay ? "absolute" : "relative",
 										display: "flex",
+										zIndex: 1,
 									}}
 								>
 									<Box
 										sx={{
 											position: "absolute",
 											inset: 0,
+											opacity: isOverlay ? 0 : 1,
 										}}
 									>
 										<CompositeArea
@@ -259,6 +320,15 @@ export function VJ() {
 										/>
 									</Box>
 								</Box>
+								<Box
+									sx={{
+										height: 512,
+										position: isOverlay ? "absolute" : "relative",
+										pointerEvents: "none",
+									}}
+								>
+									<RenderingArea />
+								</Box>
 							</Sheet>
 						</Box>
 					</CustomScrollbars>

src/components/waveform-area.tsx

@@ -160,6 +160,7 @@ export function useWaveformAnalyzer(clearCounter: number) {
 					}
 				}
 			}
+
 			animationFrame = requestAnimationFrame(renderLoop);
 		}
 

src/constants.ts

@@ -3,15 +3,22 @@ export const APP_ID = "fd82ab5b-2ebd-46ea-91f6-7b25cbaf9325";
 export const illustrationStyles = {
 	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",
-	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, mandelbrot set, zoom",
 	"Fantasy Art":
 		"detailed, imaginative, epic, vibrant color palette, mythical themes, dynamic lighting, magical elements",
 	Realism:
 		"high detail, accurate proportions, lifelike textures, natural lighting, depth of field, subtle color variation, realistic expressions, meticulous backgrounds, true-to-life scenes",
-
-	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;

src/pages/_app.tsx

@@ -7,10 +7,6 @@ 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();