Spaces:

failfast
/

2D-GameCreator

Runtime error

App Files Files Community

Gregor Adams commited on Apr 14, 2023

Commit

745163e

unverified ·

2 Parent(s): a86df80 17156f9

Merge pull request #1 from failfa-st/feat/100percent-browser

Browse files

Files changed (16) hide show

.env.local.example +1 -1
.gitignore +1 -1
package-lock.json +0 -0
package.json +19 -10
project/public/index.html +0 -15
project/public/style.css +0 -10
project/public/utils.js +0 -9
project/src/.gitkeep +0 -0
public/js/utils.js +76 -0
src/lib/theme.ts +3 -2
src/pages/_app.tsx +0 -2
src/pages/api/gpt.ts +2 -2
src/pages/api/run.ts +3 -3
src/pages/index.tsx +333 -205
src/pages/live.tsx +30 -0
src/services/api/index.ts +23 -9

.env.local.example CHANGED Viewed

	@@ -1 +1 @@
1	- OPENAI_API_KEY=


1	+ OPENAI_API_KEY=

.gitignore CHANGED Viewed

@@ -70,7 +70,7 @@ typings/
 # dotenv environment variables file
 .env
-.env.test
 # parcel-bundler cache (https://parceljs.org/)
 .cache

 # dotenv environment variables file
 .env
+.env.local
 # parcel-bundler cache (https://parceljs.org/)
 .cache

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -17,13 +17,26 @@
     "url": "https://github.com/pixelass/"
   },
   "scripts": {
-    "dev": "concurrently 'npm:dev-*'",
-    "dev-ui": "next dev",
-    "dev-frame": "webpack serve --config ./config/webpack.config.dev.js",
     "prepare": "husky install",
     "spj": "npx sort-package-json",
     "toc": "npx markdown-toc README.md -i"
   },
   "dependencies": {
     "@emotion/cache": "11.10.7",
     "@emotion/react": "11.10.6",
@@ -32,6 +45,7 @@
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "axios": "1.3.5",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "jotai": "2.0.4",
@@ -45,15 +59,10 @@
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "concurrently": "^8.0.1",
-    "css-loader": "^6.7.3",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
-    "style-loader": "^3.3.2",
-    "webpack": "^5.77.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.2"
   },
   "engines": {
     "node": ">= 18"

     "url": "https://github.com/pixelass/"
   },
   "scripts": {
+    "dev": "next dev",
     "prepare": "husky install",
     "spj": "npx sort-package-json",
     "toc": "npx markdown-toc README.md -i"
   },
+  "lint-staged": {
+    "*.js": [
+      "npx prettier --write"
+    ],
+    "package.json": [
+      "npx sort-package-json",
+      "npx prettier --write"
+    ],
+    "*.md": [
+      "npx prettier --write"
+    ],
+    "README.md": [
+      "npx markdown-toc -i"
+    ]
+  },
   "dependencies": {
     "@emotion/cache": "11.10.7",
     "@emotion/react": "11.10.6",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "axios": "1.3.5",
+    "esdeka": "0.1.18",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "jotai": "2.0.4",
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
+    "@types/node": "18.15.11",
     "@types/react-syntax-highlighter": "^15.5.6",
     "husky": "^8.0.3",
+    "prettier": "^2.8.7"
   },
   "engines": {
     "node": ">= 18"

project/public/index.html DELETED Viewed

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>fail3</title>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="./style.css" />
-	</head>
-	<body>
-		<canvas id="canvas"></canvas>
-		<script src="utils.js"></script>
-		<!-- WEBPACK will inject the bundle.js here -->
-	</body>
-</html>

project/public/style.css DELETED Viewed

@@ -1,10 +0,0 @@
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-html,
-body {
-	overflow: hidden;
-}

project/public/utils.js DELETED Viewed

@@ -1,9 +0,0 @@
-const canvas = document.querySelector("#canvas");
-function handleResize() {
-	requestAnimationFrame(() => {
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-	});
-}
-handleResize();
-window.addEventListener("resize", handleResize, { passive: true });

project/src/.gitkeep DELETED Viewed

File without changes

public/js/utils.js ADDED Viewed

	@@ -0,0 +1,76 @@

+const canvas = document.querySelector("#canvas");
+const ctx = canvas.getContext("2d");
+function handleResize() {
+	requestAnimationFrame(() => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	});
+}
+handleResize();
+window.addEventListener("resize", handleResize, { passive: true });
+const clients = {
+	host: "__ESDEKA::host__",
+	guest: "__ESDEKA::guest__",
+};
+// Shared communicators
+function subscribe(channel, callback) {
+	function handleMessage(event) {
+		if (
+			event.data.client &&
+			Object.values(clients).includes(event.data.client) &&
+			event.data.channel === channel
+		) {
+			callback(event);
+		}
+	}
+	window.addEventListener("message", handleMessage);
+	return () => {
+		window.removeEventListener("message", handleMessage);
+	};
+}
+const host = {};
+// Guest communicators
+function answer(window_, channel, targetOrigin = "*") {
+	window_.postMessage(
+		{
+			client: clients.guest,
+			channel,
+			action: {
+				type: "answer",
+			},
+		},
+		targetOrigin
+	);
+}
+function handleTemplate(template) {
+	try {
+		Function("Template", `${template};`)();
+	} catch (error) {
+		console.log(error);
+	}
+}
+subscribe("fail4", event => {
+	const { action } = event.data;
+	switch (action.type) {
+		case "call":
+			host.current = event.source;
+			answer(event.source, "fail4");
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			handleTemplate(action.payload.template);
+			break;
+		case "broadcast":
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			handleTemplate(action.payload.template);
+			break;
+		default:
+			break;
+	}
+});

src/lib/theme.ts CHANGED Viewed

@@ -12,11 +12,12 @@ export const roboto = Roboto({
 // Create a theme instance.
 const theme = createTheme({
 	palette: {
 		primary: {
-			main: "#556cd6",
 		},
 		secondary: {
-			main: "#19857b",
 		},
 		error: {
 			main: red.A400,

 // Create a theme instance.
 const theme = createTheme({
 	palette: {
+		mode: "dark",
 		primary: {
+			main: "#00d720",
 		},
 		secondary: {
+			main: "#cc06ed",
 		},
 		error: {
 			main: red.A400,

src/pages/_app.tsx CHANGED Viewed

@@ -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>

 import Head from "next/head";
 import { AppProps } from "next/app";
 import { ThemeProvider } from "@mui/material/styles";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import theme from "@/lib/theme";
 import createEmotionCache from "@/lib/createEmotionCache";
 			</Head>
 			<ThemeProvider theme={theme}>
 				{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
 				<Component {...pageProps} />
 			</ThemeProvider>
 		</CacheProvider>

src/pages/api/gpt.ts CHANGED Viewed

@@ -9,9 +9,9 @@ export default async function handler(request: NextApiRequest, response: NextApi
 				const answer = await toOpenAI(request.body);
 				return response.status(200).json(answer);
 			} catch (error) {
-				return response.status((error as AxiosError).status ?? 500).end();
 			}
 		default:
-			return response.status(405).end();
 	}
 }

 				const answer = await toOpenAI(request.body);
 				return response.status(200).json(answer);
 			} catch (error) {
+				return response.status((error as AxiosError).status ?? 500).json({});
 			}
 		default:
+			return response.status(405).json({});
 	}
 }

src/pages/api/run.ts CHANGED Viewed

@@ -9,10 +9,10 @@ export default async function handler(request: NextApiRequest, response: NextApi
 		case "POST":
 			if (request.body.content) {
 				await fs.writeFile(outputFile, request.body.content);
-				return response.status(200).end();
 			}
-			return response.status(500).end();
 		default:
-			return response.status(405).end();
 	}
 }

 		case "POST":
 			if (request.body.content) {
 				await fs.writeFile(outputFile, request.body.content);
+				return response.status(200).json({});
 			}
+			return response.status(500).json({});
 		default:
+			return response.status(405).json({});
 	}
 }

src/pages/index.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
 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";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
@@ -9,7 +10,6 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import HourglassTopIcon from "@mui/icons-material/HourglassTop";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import ReplayIcon from "@mui/icons-material/Replay";
 import TextField from "@mui/material/TextField";
@@ -30,245 +30,373 @@ import Toolbar from "@mui/material/Toolbar";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 const base = {
-	default: "/** 1.Base Script */const canvas=document.querySelector('canvas');",
 };
 const fontMono = Fira_Code({
 	subsets: ["latin"],
 });
 export default function Home() {
 	const ref = useRef<HTMLIFrameElement>(null);
 	const [template, setTemplate] = useState(base.default);
 	const [runningId, setRunningId] = useState("1");
 	const [activeId, setActiveId] = useState("1");
-	const [answers, setAnswers] = useState<{ id: string; content: string; task: string }[]>([
-		{
-			id: "1",
-			content: base.default,
-			task: "Base Script",
-		},
-	]);
 	const [loading, setLoading] = useState(false);
 	useEffect(() => {
 		const current = answers.find(({ id }) => id === runningId);
-		if (current) {
-			void axios.post("/api/run", {
-				content: current.content,
 			});
 		}
-	}, [runningId, answers]);
 	const current = answers.find(({ id }) => id === activeId);
 	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 () => {
-									await axios.post("/api/run", {
-										content:
-											"/** 1.Base Script */const canvas=document.querySelector('canvas');",
-									});
-									setActiveId("1");
-									setTemplate(
-										"/** 1.Base Script */const canvas=document.querySelector('canvas');"
-									);
-								}}
 							>
-								<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>
-				<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="Show"
-											onClick={() => {
-												setRunningId(answer.id);
-											}}
-										>
-											{runningId === answer.id ? (
-												<VisibilityIcon />
 											) : (
-												<VisibilityOffIcon />
 											)}
-										</IconButton>
-									</Stack>
-								}
-								disablePadding
 							>
-								<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>
-				<Box
-					ref={ref}
-					component="iframe"
-					sx={{ width: "100%", flex: 1, m: 0, border: 0 }}
-					src="//localhost:8080"
-				/>
 			</Stack>
-		</Stack>
 	);
 }

 import { useEffect, useRef, useState } from "react";
 import axios from "axios";
+import AcUnitIcon from "@mui/icons-material/AcUnit";
+import LocalFireDepartmentIcon from "@mui/icons-material/LocalFireDepartment";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import ReplayIcon from "@mui/icons-material/Replay";
 import TextField from "@mui/material/TextField";
 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 CssBaseline from "@mui/material/CssBaseline";
+import Slider from "@mui/material/Slider";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 const base = {
+	default: `/** CHANGELOG
+ * 1. Set up canvas
+ */
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+/*60FPS draw cycle*/
+function draw(){
+  const FPS = 60;
+  setTimeout(requestAnimationFrame(draw),1000/FPS)
+}
+draw();
+	`.trim(),
 };
 const fontMono = Fira_Code({
 	subsets: ["latin"],
 });
+const answersAtom = atomWithStorage<{ id: string; content: string; task: string }[]>("fail4", [
+	{
+		id: "1",
+		content: base.default,
+		task: "Base Script",
+	},
+]);
 export default function Home() {
 	const ref = useRef<HTMLIFrameElement>(null);
 	const [template, setTemplate] = useState(base.default);
 	const [runningId, setRunningId] = useState("1");
 	const [activeId, setActiveId] = useState("1");
+	const [answers, setAnswers] = useAtom(answersAtom);
 	const [loading, setLoading] = useState(false);
+	const [loadingLive, setLoadingLive] = useState(true);
+	const { broadcast, call, subscribe } = useHost(ref, "fail4");
+	const connection = useRef(false);
+	const [tries, setTries] = useState(1);
+	// Send a connection request
 	useEffect(() => {
 		const current = answers.find(({ id }) => id === runningId);
+		if (connection.current || tries <= 0) {
+			return () => {
+				/* Consistency */
+			};
+		}
+		const timeout = setTimeout(() => {
+			if (current) {
+				// call({ template: "" });
+				call({ template: current.content });
+			}
+			setTries(tries - 1);
+		}, 1_000);
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [call, tries, answers, runningId]);
+	useEffect(() => {
+		if (!connection.current && loadingLive) {
+			const unsubscribe = subscribe(event => {
+				const { action } = event.data;
+				switch (action.type) {
+					case "answer":
+						connection.current = true;
+						setLoadingLive(false);
+						console.log("connected");
+						break;
+					default:
+						break;
+				}
 			});
+			return () => {
+				unsubscribe();
+			};
 		}
+		return () => {
+			/* Consistency */
+		};
+	}, [subscribe, loadingLive]);
 	const current = answers.find(({ id }) => id === activeId);
+	function reload() {
+		connection.current = false;
+		if (ref.current) {
+			ref.current.src = `/live?${nanoid()}`;
+			setLoadingLive(true);
+			setTries(1);
+		}
+	}
 	return (
+		<>
+			<CssBaseline />
+			<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(previousAnswers => [answer, ...previousAnswers]);
+								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"}
+									aria-disabled={loading}
+									disabled={loading}
+								>
+									{loading ? <CircularProgress size={24} /> : <PlayArrowIcon />}
+								</IconButton>
+								<Typography sx={{ flex: 1 }}>
+									{loading
+										? "Loading …"
+										: `${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="red heart"
+									defaultValue="red heart"
+									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>
+								<Stack
+									spacing={2}
+									direction="row"
+									sx={{ mb: 2 }}
+									alignItems="center"
+								>
+									<AcUnitIcon />
+									<Slider
+										marks
+										id="temperature"
+										name="temperature"
+										min={0}
+										max={0.8}
+										defaultValue={0.2}
+										step={0.1}
+										valueLabelDisplay="auto"
+										aria-label="Temperature"
+									/>
+									<LocalFireDepartmentIcon />
+								</Stack>
+								<TextField
+									multiline
+									fullWidth
+									id="template"
+									name="template"
+									label="Template"
+									placeholder={base.default}
+									maxRows={10}
+									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 : (
+												<IconButton
+													edge="end"
+													aria-label="Delete"
+													onClick={() => {
+														setAnswers(previousAnswers =>
+															previousAnswers.filter(
+																({ id }) => id !== answer.id
+															)
+														);
+														if (runningId === answer.id) {
+															setRunningId("1");
+															setTemplate(base.default);
+															reload();
+														}
+													}}
+												>
+													<DeleteForeverIcon />
+												</IconButton>
+											)}
 											<IconButton
 												edge="end"
+												aria-label="Show"
+												aria-disabled={runningId === answer.id}
+												disabled={runningId === answer.id}
 												onClick={() => {
+													setRunningId(answer.id);
+													reload();
 												}}
 											>
+												{runningId === answer.id ? (
+													<VisibilityIcon />
+												) : (
+													<VisibilityOffIcon />
+												)}
 											</IconButton>
+										</Stack>
+									}
+									disablePadding
+								>
+									<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%", position: "relative" }}>
+					<AppBar position="static" elevation={0}>
+						<Toolbar>
+							<IconButton
+								color="inherit"
+								aria-label="Reload"
+								onClick={() => {
+									reload();
+								}}
 							>
+								<ReplayIcon />
+							</IconButton>
+						</Toolbar>
+					</AppBar>
+					{loadingLive && (
+						<Box
+							sx={{
+								position: "absolute",
+								zIndex: 100,
+								top: "50%",
+								left: "50%",
+								transform: "translate(-50%,-50%)",
 							}}
 						>
+							<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>
+		</>
 	);
 }

src/pages/live.tsx ADDED Viewed

	@@ -0,0 +1,30 @@

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

src/services/api/index.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
 import { nanoid } from "nanoid";
 const configuration = new Configuration({
 	apiKey: process.env.OPENAI_API_KEY,
@@ -26,35 +27,48 @@ function extractCode(string: string) {
 }
 export async function toOpenAI({
-	prompt = "",
 	negativePrompt = "",
 	template = "",
-}: Record<string, string>) {
 	const negativePrompt_ = negativePrompt.trim();
 	const prompt_ = prompt.trim();
 	const nextMessage: ChatCompletionRequestMessage = {
 		role: "user",
 		content: miniPrompt`
-			DO: ${prompt_}
-			${negativePrompt_ ? `DONT: ${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({
 			model: "gpt-3.5-turbo",
-			temperature: 0.2,
 			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".`,
 				},
 				nextMessage,
 			],

 import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
 import { nanoid } from "nanoid";
+import process from "node:process";
 const configuration = new Configuration({
 	apiKey: process.env.OPENAI_API_KEY,
 }
 export async function toOpenAI({
+	prompt = "be creative",
 	negativePrompt = "",
 	template = "",
+	temperature = "0.2",
+}) {
 	const negativePrompt_ = negativePrompt.trim();
 	const prompt_ = prompt.trim();
 	const nextMessage: ChatCompletionRequestMessage = {
 		role: "user",
 		content: miniPrompt`
+			ADD: ${prompt_}
+			${negativePrompt_ ? `REMOVE: ${negativePrompt_}` : ""}
 			INPUT: ${template.trim()}
 			OUTPUT FORMAT: plain valid JavaScript
 		`,
 	};
 	const task = `${prompt_}${negativePrompt_ ? ` | not(${negativePrompt_})` : ""}`;
 	try {
 		const response = await openai.createChatCompletion({
 			model: "gpt-3.5-turbo",
+			temperature: Number.parseFloat(temperature),
 			messages: [
 				{
 					role: "system",
+					content: miniPrompt`
+All UPPERCASE words are IMPORTANT, all "UPPERCASE" words in QUOTES (") indicate KEYWORDS.
+You are: expert JavaScript Developer, creative, Canvas-2d expert, performance guru, interaction expert.
+You strictly follow all "DOCS".
+You extend "CHANGELOG" and the CODE.
+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,
 			],