feat: stricter prompt

adds reloading and several performance tweaks
fixes several bugs with rendering issues

public/js/utils.js

@@ -50,17 +50,20 @@ function answer(window_, channel, targetOrigin = "*") {
 }
 
 function handleTemplate(template) {
-	for (let i = 1; i < 100_000_000; i++) {
+	for (let i = 1; i < 1_000; i++) {
 		window.clearInterval(i);
 		window.cancelAnimationFrame(i);
 		window.clearTimeout(i);
 	}
 
-	Function("Template", `${template};`)();
+	try {
+		Function("Template", `${template};`)();
+	} catch (error) {
+		console.log(error);
+	}
 }
 
 subscribe("fail4", event => {
-	console.log("GUEST", event);
 	const { action } = event.data;
 	switch (action.type) {
 		case "call":
@@ -70,7 +73,6 @@ subscribe("fail4", event => {
 			handleTemplate(action.payload.template);
 			break;
 		case "broadcast":
-			console.log("broadcast", action.payload.template);
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 			handleTemplate(action.payload.template);
 			break;

src/pages/_app.tsx

@@ -1,7 +1,6 @@
 import Head from "next/head";
 import { AppProps } from "next/app";
 import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import theme from "@/lib/theme";
 import createEmotionCache from "@/lib/createEmotionCache";
@@ -22,7 +21,6 @@ export default function MyApp(props: MyAppProps) {
 			</Head>
 			<ThemeProvider theme={theme}>
 				{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-				<CssBaseline />
 				<Component {...pageProps} />
 			</ThemeProvider>
 		</CacheProvider>

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 
-import Head from "next/head";
 import axios from "axios";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
@@ -31,12 +30,20 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import { useHost } from "esdeka/react";
+import CircularProgress from "@mui/material/CircularProgress";
+import { miniPrompt } from "@/services/api";
+import CssBaseline from "@mui/material/CssBaseline";
 
 const base = {
-	default: `/** 1.Base Script */
-const canvas=document.querySelector('canvas');
-const ctx=canvas.getContext('2d');
-`,
+	default: miniPrompt`const canvas = document.querySelector('canvas');
+				const ctx = canvas.getContext('2d');
+				/*60FPS draw cycle*/
+				function draw(){
+					const FPS = 60;
+					setTimeout(requestAnimationFrame(draw),1000/FPS)
+				}
+				draw();
+			`,
 };
 
 const fontMono = Fira_Code({
@@ -56,6 +63,7 @@ export default function Home() {
 		},
 	]);
 	const [loading, setLoading] = useState(false);
+	const [loadingLive, setLoadingLive] = useState(true);
 
 	const { broadcast, call, subscribe } = useHost(ref, "fail4");
 
@@ -64,6 +72,7 @@ export default function Home() {
 
 	// Send a connection request
 	useEffect(() => {
+		const current = answers.find(({ id }) => id === runningId);
 		if (connection.current || tries <= 0) {
 			return () => {
 				/* Consistency */
@@ -71,24 +80,29 @@ export default function Home() {
 		}
 
 		const timeout = setTimeout(() => {
-			call({ template: "console.log('it works')" });
-			setTries(tries - 1);
-		}, 200);
+			if (current) {
+				call({ template: current.content });
+			}
 
-		call({ template: "console.log('it works')" });
+			setTries(tries - 1);
+		}, 1_000);
 
 		return () => {
 			clearTimeout(timeout);
 		};
-	}, [call, tries]);
+	}, [call, tries, answers, runningId]);
 
 	useEffect(() => {
-		if (!connection.current) {
+		if (!connection.current && loadingLive) {
 			const unsubscribe = subscribe(event => {
 				const { action } = event.data;
 				switch (action.type) {
 					case "answer":
 						connection.current = true;
+						setTimeout(() => {
+							setLoadingLive(false);
+						}, 1_500);
+						console.log("connected");
 						break;
 					default:
 						break;
@@ -101,7 +115,7 @@ export default function Home() {
 		return () => {
 			/* Consistency */
 		};
-	}, [subscribe]);
+	}, [subscribe, loadingLive]);
 
 	// Broadcast store to guest
 	useEffect(() => {
@@ -125,211 +139,244 @@ export default function Home() {
 
 	const current = answers.find(({ id }) => id === activeId);
 
+	function reload() {
+		connection.current = false;
+		if (ref.current) {
+			ref.current.src = `/live?${nanoid()}`;
+			setLoadingLive(true);
+			setTries(3);
+		}
+	}
+
 	return (
-		<Stack
-			sx={{
-				...fontMono.style,
-				flexDirection: "row",
-				height: "100%",
-			}}
-		>
-			<Head>
-				<style>{`html,body,#__next{margin:0;height:100%;overflow:hidden}`}</style>
-			</Head>
-			<Stack sx={{ width: "50%", flex: 1, gap: 2 }}>
-				<Box
-					component="form"
-					onSubmit={async event => {
-						event.preventDefault();
-						const formData = new FormData(event.target as HTMLFormElement);
-						const formObject = Object.fromEntries(formData);
-						try {
-							setLoading(true);
-							const { data } = await axios.post("/api/gpt", formObject);
-							const answer = data;
-							setAnswers([answer, ...answers]);
-							setRunningId(answer.id);
-						} catch (error) {
-							console.error(error);
-						} finally {
-							setLoading(false);
-						}
-					}}
-				>
-					<AppBar position="static" elevation={0}>
-						<Toolbar>
-							<IconButton
-								type="submit"
-								edge="start"
-								color="inherit"
-								aria-label={loading ? "Loading" : "Run"}
-								disabled={loading}
-							>
-								{loading ? <HourglassTopIcon /> : <PlayArrowIcon />}
-							</IconButton>
-							<Typography sx={{ flex: 1 }}>
-								{current?.task} - {current?.id ?? ""}
-							</Typography>
-							<IconButton
-								edge="end"
-								color="inherit"
-								aria-label="Clear Prompt"
-								onClick={async () => {
-									broadcast({ template: base.default });
+		<>
+			<CssBaseline />
 
-									//await axios.post("/api/run", {
-									//	content:
-									//		base.default,
-									//});
-									setActiveId("1");
-									setTemplate(base.default);
-								}}
+			<Stack
+				sx={{
+					...fontMono.style,
+					position: "absolute",
+					inset: 0,
+					overflow: "hidden",
+					flexDirection: "row",
+					height: "100%",
+				}}
+			>
+				<Stack sx={{ width: "50%", flex: 1, gap: 2 }}>
+					<Box
+						component="form"
+						onSubmit={async event => {
+							event.preventDefault();
+							const formData = new FormData(event.target as HTMLFormElement);
+							const formObject = Object.fromEntries(formData);
+							try {
+								setLoading(true);
+								const { data } = await axios.post("/api/gpt", formObject);
+								const answer = data;
+								setAnswers([answer, ...answers]);
+								setRunningId(answer.id);
+								reload();
+							} catch (error) {
+								console.error(error);
+							} finally {
+								setLoading(false);
+							}
+						}}
+					>
+						<AppBar position="static" elevation={0}>
+							<Toolbar>
+								<IconButton
+									type="submit"
+									edge="start"
+									color="inherit"
+									aria-label={loading ? "Loading" : "Run"}
+									disabled={loading}
+								>
+									{loading ? <HourglassTopIcon /> : <PlayArrowIcon />}
+								</IconButton>
+								<Typography sx={{ flex: 1 }}>
+									{current?.task} - {current?.id ?? ""}
+								</Typography>
+								<IconButton
+									edge="end"
+									color="inherit"
+									aria-label="Clear Prompt"
+									onClick={async () => {
+										broadcast({ template: base.default });
+										setActiveId("1");
+										setTemplate(base.default);
+										reload();
+									}}
+								>
+									<ClearIcon />
+								</IconButton>
+							</Toolbar>
+						</AppBar>
+						<Paper variant="outlined" sx={{ p: 0 }}>
+							<Stack sx={{ p: 2, gap: 2 }}>
+								<Typography>
+									Based on: {current?.task ?? "Base Script"} - {activeId}
+								</Typography>
+								<TextField
+									multiline
+									fullWidth
+									id="prompt"
+									name="prompt"
+									label="Prompt"
+									placeholder="add a red box"
+									maxRows={6}
+									InputProps={{
+										style: fontMono.style,
+									}}
+								/>
+								<TextField
+									multiline
+									fullWidth
+									id="negativePrompt"
+									name="negativePrompt"
+									label="Negative Prompt"
+									placeholder="images, audio files"
+									maxRows={6}
+									InputProps={{
+										style: fontMono.style,
+									}}
+								/>
+							</Stack>
+						</Paper>
+						<Accordion>
+							<AccordionSummary
+								expandIcon={<ExpandMoreIcon />}
+								aria-controls="panel1a-content"
+								id="panel1a-header"
 							>
-								<ClearIcon />
-							</IconButton>
-						</Toolbar>
-					</AppBar>
-					<Paper variant="outlined" sx={{ p: 0 }}>
-						<Stack sx={{ p: 2, gap: 2 }}>
-							<Typography>Based on: {current?.task ?? "Base Script"}</Typography>
-							<TextField
-								multiline
-								fullWidth
-								id="prompt"
-								name="prompt"
-								label="Prompt"
-								placeholder="add a red box"
-								maxRows={6}
-								InputProps={{
-									style: fontMono.style,
-								}}
-							/>
-							<TextField
-								multiline
-								fullWidth
-								id="negativePrompt"
-								name="negativePrompt"
-								label="Negative Prompt"
-								placeholder="images, audio files"
-								maxRows={6}
-								InputProps={{
-									style: fontMono.style,
-								}}
-							/>
-						</Stack>
-					</Paper>
-					<Accordion>
-						<AccordionSummary
-							expandIcon={<ExpandMoreIcon />}
-							aria-controls="panel1a-content"
-							id="panel1a-header"
-						>
-							<Typography>Options</Typography>
-						</AccordionSummary>
-						<AccordionDetails>
-							<TextField
-								multiline
-								fullWidth
-								id="template"
-								name="template"
-								label="Template"
-								placeholder={base.default}
-								maxRows={6}
-								value={template}
-								InputProps={{
-									style: { ...fontMono.style },
-								}}
-								onChange={event => {
-									setTemplate(event.target.value);
-								}}
-							/>
-						</AccordionDetails>
-					</Accordion>
-				</Box>
+								<Typography>Options</Typography>
+							</AccordionSummary>
+							<AccordionDetails>
+								<TextField
+									multiline
+									fullWidth
+									id="template"
+									name="template"
+									label="Template"
+									placeholder={base.default}
+									maxRows={6}
+									value={template}
+									InputProps={{
+										style: { ...fontMono.style },
+									}}
+									onChange={event => {
+										setTemplate(event.target.value);
+									}}
+								/>
+							</AccordionDetails>
+						</Accordion>
+					</Box>
 
-				<List sx={{ flex: 1, overflow: "auto" }}>
-					{answers.map(answer => {
-						return (
-							<ListItem
-								key={answer.id}
-								secondaryAction={
-									<Stack sx={{ flexDirection: "row", gap: 1 }}>
-										{answer.id === "1" ? undefined : (
+					<List sx={{ flex: 1, overflow: "auto" }}>
+						{answers.map(answer => {
+							return (
+								<ListItem
+									key={answer.id}
+									secondaryAction={
+										<Stack sx={{ flexDirection: "row", gap: 1 }}>
+											{answer.id === "1" ? undefined : (
+												<IconButton
+													edge="end"
+													aria-label="Delete"
+													onClick={() => {
+														setAnswers(
+															answers.filter(
+																({ id }) => id !== answer.id
+															)
+														);
+													}}
+												>
+													<DeleteForeverIcon />
+												</IconButton>
+											)}
 											<IconButton
 												edge="end"
-												aria-label="Delete"
+												aria-label="Show"
 												onClick={() => {
-													setAnswers(
-														answers.filter(({ id }) => id !== answer.id)
-													);
+													setRunningId(answer.id);
+													reload();
 												}}
 											>
-												<DeleteForeverIcon />
+												{runningId === answer.id ? (
+													<VisibilityIcon />
+												) : (
+													<VisibilityOffIcon />
+												)}
 											</IconButton>
-										)}
-										<IconButton
-											edge="end"
-											aria-label="Show"
-											onClick={() => {
-												setRunningId(answer.id);
-											}}
-										>
-											{runningId === answer.id ? (
-												<VisibilityIcon />
+										</Stack>
+									}
+									disablePadding
+								>
+									<ListItemButton
+										dense
+										selected={activeId === answer.id}
+										role={undefined}
+										onClick={() => {
+											setActiveId(answer.id);
+											setTemplate(answer.content);
+										}}
+									>
+										<ListItemIcon>
+											{activeId === answer.id ? (
+												<CheckIcon />
 											) : (
-												<VisibilityOffIcon />
+												<ContentCopyIcon />
 											)}
-										</IconButton>
-									</Stack>
-								}
-								disablePadding
+										</ListItemIcon>
+										<ListItemText primary={`${answer.task} - ${answer.id}`} />
+									</ListItemButton>
+								</ListItem>
+							);
+						})}
+					</List>
+				</Stack>
+				<Stack sx={{ flex: 1, width: "50%", position: "relative" }}>
+					<AppBar position="static" elevation={0}>
+						<Toolbar>
+							<IconButton
+								color="inherit"
+								aria-label="Reload"
+								onClick={() => {
+									reload();
+								}}
 							>
-								<ListItemButton
-									dense
-									selected={activeId === answer.id}
-									role={undefined}
-									onClick={() => {
-										setActiveId(answer.id);
-										setTemplate(answer.content);
-									}}
-								>
-									<ListItemIcon>
-										{activeId === answer.id ? (
-											<CheckIcon />
-										) : (
-											<ContentCopyIcon />
-										)}
-									</ListItemIcon>
-									<ListItemText primary={`${answer.task} - ${answer.id}`} />
-								</ListItemButton>
-							</ListItem>
-						);
-					})}
-				</List>
-			</Stack>
-			<Stack sx={{ flex: 1, width: "50%" }}>
-				<AppBar position="static" elevation={0}>
-					<Toolbar>
-						<IconButton
-							color="inherit"
-							aria-label="Reload"
-							onClick={() => {
-								if (ref.current) {
-									ref.current.src = `//localhost:8080?${nanoid()}`;
-								}
+								<ReplayIcon />
+							</IconButton>
+						</Toolbar>
+					</AppBar>
+					{loadingLive && (
+						<Box
+							sx={{
+								position: "absolute",
+								zIndex: 100,
+								top: "50%",
+								left: "50%",
+								transform: "translate(-50%,-50%)",
 							}}
 						>
-							<ReplayIcon />
-						</IconButton>
-					</Toolbar>
-				</AppBar>
-				<Box
-					ref={ref}
-					component="iframe"
-					sx={{ width: "100%", flex: 1, m: 0, border: 0 }}
-					src="/live"
-				/>
+							<CircularProgress />
+						</Box>
+					)}
+					<Box
+						ref={ref}
+						component="iframe"
+						sx={{
+							width: "100%",
+							flex: 1,
+							m: 0,
+							border: 0,
+							overflow: "hidden",
+							visibility: loadingLive ? "hidden" : undefined,
+						}}
+						src="/live"
+					/>
+				</Stack>
 			</Stack>
-		</Stack>
+		</>
 	);
 }

src/pages/live.tsx

@@ -1,9 +1,28 @@
 import Script from "next/script";
-
+const styles = (
+	<style>
+		{`
+		* {
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+		html, body {
+			height: 100%;
+			width: 100%;
+			overflow: hidden;
+		}
+		#__next {
+			display: contents;
+		}
+		`}
+	</style>
+);
 export default function Page() {
 	return (
 		<>
-			<canvas id="canvas" />
+			{styles}
+			<canvas id="canvas" style={{}} />
 			<Script src="/js/utils.js" />
 		</>
 	);

src/services/api/index.ts

@@ -36,16 +36,13 @@ export async function toOpenAI({
 	const nextMessage: ChatCompletionRequestMessage = {
 		role: "user",
 		content: miniPrompt`
-			DO: ${prompt_}
-			${negativePrompt_ ? `DONT: ${negativePrompt_}` : ""}
+			ADD: ${prompt_}
+			${negativePrompt_ ? `REMOVE: ${negativePrompt_}` : ""}
 			INPUT: ${template.trim()}
 			OUTPUT FORMAT: plain valid JavaScript
 		`,
 	};
 	const task = `${prompt_}${negativePrompt_ ? ` | not(${negativePrompt_})` : ""}`;
-	console.log(">>> NEXT MESSAGE CONTENT");
-	console.log(nextMessage.content);
-	console.log("<<<");
 
 	try {
 		const response = await openai.createChatCompletion({
@@ -54,7 +51,22 @@ export async function toOpenAI({
 			messages: [
 				{
 					role: "system",
-					content: `You are a FULLSTACK DEVELOPER. You implement the "DO". You NEVER implement "DONT". You EXCLUSIVELY answer in the requested "OUTPUT FORMAT" and NOTHING ELSE. You ALWAYS follow the "DO", "DONT", "INPUT" and "OUTPUT FORMAT".`,
+					content: miniPrompt`
+All UPPERCASE words are IMPORTANT, all "UPPERCASE" words in QUOTES (") indicate KEYWORDS,
+You are an expert JavaScript Developer, with a creative mindset.
+You are a Canvas-2d expert and performance guru.
+You strictly follow all "DOCS".
+You ALWAYS follow the "ADD", "REMOVE", "INPUT" and "OUTPUT FORMAT".
+You NEVER explain anything.
+
+DOCS:
+"ADD" is a set of features that You write code for
+"REMOVE" is a set of things that should be removed or changed to something else
+"INPUT" is the code that should be EXTENDED, ADJUSTED or FIXED
+"OUTPUT FORMAT" is always JavaScript. the output should always be just JavaScript and NOTHING ELSE
+
+You EXCLUSIVELY answer in the requested "OUTPUT FORMAT" and NOTHING ELSE
+`,
 				},
 				nextMessage,
 			],