feat include monaco (#4)

README.md

@@ -5,3 +5,58 @@
 > This project is built to fail  
 > (until it doesn't)  
 > Restart until it works
+
+# Prompt-Driven WebUI for Creative Development
+
+Discover a web-based user interface designed for prompt-driven development, enabling users to create
+a wide array of digital art including games, visual effects, fractal art, and flow fields. This
+platform emphasizes prompt-driven creativity, inspiring users to push their artistic limits.
+
+Featuring an interactive development environment, the WebUI allows for seamless real-time
+visualization of your artistic creations. Delve into limitless possibilities and unleash your
+imagination with the Prompt-Driven WebUI for Creative Development.
+
+## Features
+
+- 100% prompt-driven for enhanced creativity
+- Supports various types of digital art, including games, visual effects, fractal art, and flow
+  fields
+- Built-in code editor for a seamless development experience
+- Real-time visualization of your creations
+- Supports GPT-3.5 Turbo and GPT-4 models
+- Adjustable options for temperature and max tokens
+- Easy-to-use interface with prompt and negative prompt fields
+- Reload and clear prompt functionalities
+- Save and manage multiple projects
+
+## Examples
+
+Here are just a few examples of the types of projects you can create:
+
+1. Prompt: Create a mesmerizing, swirling vortex pattern that evolves over time.
+2. Prompt: Design a firework display that launches and explodes at random locations and intervals.
+3. Prompt: Generate a calming, flowing water simulation with waves and ripples.
+4. Prompt: Create a dynamic solar system simulation with planets orbiting at different speeds.
+5. Prompt: Design a captivating, ever-changing kaleidoscope pattern.
+6. Prompt: Build a particle-based physics simulation where particles interact with each other and
+   the environment.
+7. Prompt: Design a fluid art simulator that creates unique, flowing patterns on the canvas.
+8. Prompt: Create a bouncing ball simulation with different ball sizes, elasticity, and gravity
+   settings.
+9. Prompt: Design an interactive, generative art piece that evolves and grows over time, creating an
+   organic visual experience.
+10. Prompt: Create a simulation of a flock of birds flying together, showcasing realistic flocking
+    behavior and interactions.
+
+## Getting Started
+
+To get started with the Prompt-Driven WebUI for Creative Development, simply follow these steps:
+
+1. Clone the repository to your local machine.
+2. Copy the `.env.local.example` file to a new file named `.env.local` and add your `OPENAI_API_KEY`
+   from the OpenAI platform (platform.openai.com).
+3. Install the required dependencies using `npm install`.
+4. Run the development server with `npm run dev` to access the WebUI.
+5. Begin creating your own digital art!
+
+Happy creating!

package-lock.json

@@ -9,22 +9,30 @@
       "version": "1.0.0",
       "license": "AGPL",
       "dependencies": {
+        "@babel/parser": "7.21.4",
         "@emotion/cache": "11.10.7",
         "@emotion/react": "11.10.6",
         "@emotion/server": "11.10.0",
         "@emotion/styled": "11.10.6",
+        "@monaco-editor/react": "4.5.0",
         "@mui/icons-material": "5.11.16",
         "@mui/material": "5.12.0",
+        "@types/prettier": "^2.7.2",
         "axios": "1.3.5",
         "esdeka": "0.1.18",
         "eslint": "8.37.0",
         "eslint-config-next": "13.2.4",
+        "gpt3-tokenizer": "1.1.5",
         "jotai": "2.0.4",
+        "monaco-editor": "0.37.1",
+        "monaco-themes": "0.4.4",
         "nanoid": "4.0.2",
         "next": "13.2.4",
         "openai": "^3.2.1",
+        "prettier": "2.8.7",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "7.43.9",
         "react-syntax-highlighter": "15.5.0",
         "zustand": "4.3.7"
       },
@@ -32,8 +40,7 @@
         "@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"
+        "husky": "^8.0.3"
       },
       "engines": {
         "node": ">= 18"
@@ -154,6 +161,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/parser": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+      "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
@@ -431,6 +449,30 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
+      "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz",
+      "integrity": "sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.3.3"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-alpha.125",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
@@ -1686,6 +1728,11 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "node_modules/@types/prettier": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+      "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2014,6 +2061,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-keyed-map": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/array-keyed-map/-/array-keyed-map-2.1.3.tgz",
+      "integrity": "sha512-JIUwuFakO+jHjxyp4YgSiKXSZeC0U+R1jR94bXWBcVlFRBycqXlb+kH9JHxBGcxnVuSqx5bnn0Qz9xtSeKOjiA=="
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -3582,6 +3634,11 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fast-plist": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
+      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A=="
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -4008,6 +4065,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gpt3-tokenizer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/gpt3-tokenizer/-/gpt3-tokenizer-1.1.5.tgz",
+      "integrity": "sha512-O9iCL8MqGR0Oe9wTh0YftzIbysypNQmS5a5JG3cB3M4LMYjlAVvNnf8LUzVY9MrI7tj+YLY356uHtO2lLX2HpA==",
+      "dependencies": {
+        "array-keyed-map": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -5550,6 +5618,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.37.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.37.1.tgz",
+      "integrity": "sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg=="
+    },
+    "node_modules/monaco-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.4.tgz",
+      "integrity": "sha512-Hbb9pvRrpSi0rZezcB/IOdQnpx10o55Lx4zFdRAAVpFMa1HP7FgaqEZdKffb4ovd90fETCixeFO9JPYFMAq+TQ==",
+      "dependencies": {
+        "fast-plist": "^0.1.3"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -9479,7 +9560,6 @@
       "version": "2.8.7",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
       "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
-      "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -9634,6 +9714,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -10655,6 +10750,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",

package.json

@@ -38,22 +38,30 @@
     ]
   },
   "dependencies": {
+    "@babel/parser": "7.21.4",
     "@emotion/cache": "11.10.7",
     "@emotion/react": "11.10.6",
     "@emotion/server": "11.10.0",
     "@emotion/styled": "11.10.6",
+    "@monaco-editor/react": "4.5.0",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
+    "@types/prettier": "^2.7.2",
     "axios": "1.3.5",
     "esdeka": "0.1.18",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
+    "gpt3-tokenizer": "1.1.5",
     "jotai": "2.0.4",
+    "monaco-editor": "0.37.1",
+    "monaco-themes": "0.4.4",
     "nanoid": "4.0.2",
     "next": "13.2.4",
     "openai": "^3.2.1",
+    "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.43.9",
     "react-syntax-highlighter": "15.5.0",
     "zustand": "4.3.7"
   },
@@ -61,8 +69,7 @@
     "@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"
+    "husky": "^8.0.3"
   },
   "engines": {
     "node": ">= 18"

public/js/utils.js

@@ -1,5 +1,4 @@
 const canvas = document.querySelector("#canvas");
-const ctx = canvas.getContext("2d");
 
 function handleResize() {
 	requestAnimationFrame(() => {
@@ -50,11 +49,7 @@ function answer(window_, channel, targetOrigin = "*") {
 }
 
 function handleTemplate(template) {
-	try {
-		Function("Template", `${template};`)();
-	} catch (error) {
-		console.log(error);
-	}
+	Function("Template", `${template};`)();
 }
 
 subscribe("fail4", event => {
@@ -63,11 +58,9 @@ subscribe("fail4", event => {
 		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:

src/components/EditTitle.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import InputBase from "@mui/material/InputBase";
+import { roboto } from "@/lib/theme";
+import IconButton from "@mui/material/IconButton";
+import SaveIcon from "@mui/icons-material/Save";
+
+export function EditTitle({ value, onSave }: { value: string; onSave(value: string): void }) {
+	const [text, setText] = useState(value);
+	return (
+		<>
+			<Box
+				sx={{
+					pl: 3,
+					pr: 6,
+					flex: 1,
+					display: "flex",
+					alignItems: "center",
+				}}
+			>
+				<InputBase
+					autoFocus
+					value={text}
+					sx={{
+						width: "100%",
+						fontSize: 16,
+						input: { ...roboto.style, p: 0, lineHeight: 1.5 },
+					}}
+					onChange={event => {
+						setText(event.target.value);
+					}}
+					onBlur={() => {
+						onSave(text);
+					}}
+				/>
+			</Box>
+			<IconButton
+				onClick={() => {
+					onSave(text);
+				}}
+			>
+				<SaveIcon />
+			</IconButton>
+		</>
+	);
+}

src/constants/index.ts

@@ -0,0 +1,20 @@
+export const base = {
+	default: `/** CHANGELOG
+ * v1.0.0. Set up canvas
+ */
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+/*
+ * The draw function is called every frame to update the canvas.
+ * To change the drawing logic, modify the code inside this function.
+ */
+function draw(){
+	// TODO: Add drawing logic here
+	// Set the desired FPS (frames per second) for the animation
+	const FPS = 60;
+	// Schedule the next frame to be drawn
+	setTimeout(requestAnimationFrame(draw),1000/FPS)
+}
+draw();
+	`.trim(),
+};

src/lib/createEmotionCache.ts

@@ -6,14 +6,14 @@ const isBrowser = typeof document !== "undefined";
 // This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 export default function createEmotionCache() {
-  let insertionPoint;
+	let insertionPoint;
 
-  if (isBrowser) {
-    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
-      'meta[name="emotion-insertion-point"]'
-    );
-    insertionPoint = emotionInsertionPoint ?? undefined;
-  }
+	if (isBrowser) {
+		const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+			'meta[name="emotion-insertion-point"]'
+		);
+		insertionPoint = emotionInsertionPoint ?? undefined;
+	}
 
-  return createCache({ key: "mui-style", insertionPoint });
+	return createCache({ key: "mui-style", insertionPoint });
 }

src/lib/theme.ts

@@ -1,6 +1,5 @@
-import { Roboto } from "next/font/google";
-import { createTheme } from "@mui/material/styles";
-import { red } from "@mui/material/colors";
+import { Fira_Code, Roboto } from "next/font/google";
+import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
 
 export const roboto = Roboto({
 	weight: ["300", "400", "500", "700"],
@@ -10,17 +9,27 @@ export const roboto = Roboto({
 });
 
 // Create a theme instance.
-const theme = createTheme({
-	palette: {
-		mode: "dark",
-		primary: {
-			main: "#00d720",
+const theme = extendTheme({
+	colorSchemes: {
+		light: {
+			palette: {
+				primary: {
+					main: "#40088d",
+				},
+				secondary: {
+					main: "#038225",
+				},
+			},
 		},
-		secondary: {
-			main: "#cc06ed",
-		},
-		error: {
-			main: red.A400,
+		dark: {
+			palette: {
+				primary: {
+					main: "#00d720",
+				},
+				secondary: {
+					main: "#cc06ed",
+				},
+			},
 		},
 	},
 	typography: {
@@ -29,3 +38,6 @@ const theme = createTheme({
 });
 
 export default theme;
+export const fontMono = Fira_Code({
+	subsets: ["latin"],
+});

src/pages/_app.tsx

@@ -1,11 +1,10 @@
 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";
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
+import theme from "@/lib/theme";
 
-// Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
 export interface MyAppProps extends AppProps {
@@ -19,10 +18,9 @@ export default function MyApp(props: MyAppProps) {
 			<Head>
 				<meta name="viewport" content="initial-scale=1, width=device-width" />
 			</Head>
-			<ThemeProvider theme={theme}>
-				{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+			<CssVarsProvider defaultMode="system" theme={theme}>
 				<Component {...pageProps} />
-			</ThemeProvider>
+			</CssVarsProvider>
 		</CacheProvider>
 	);
 }

src/pages/_document.tsx

@@ -9,9 +9,10 @@ import Document, {
 } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
 import { AppType } from "next/app";
-import theme, { roboto } from "@/lib/theme";
+import { roboto } from "@/lib/theme";
 import createEmotionCache from "@/lib/createEmotionCache";
 import { MyAppProps } from "./_app";
+import { getInitColorSchemeScript } from "@mui/material/styles";
 
 interface MyDocumentProps extends DocumentProps {
 	emotionStyleTags: JSX.Element[];
@@ -21,13 +22,12 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
 	return (
 		<Html lang="en" className={roboto.className}>
 			<Head>
-				{/* PWA primary color */}
-				<meta name="theme-color" content={theme.palette.primary.main} />
 				<link rel="shortcut icon" href="/favicon.ico" />
 				<meta name="emotion-insertion-point" content="" />
 				{emotionStyleTags}
 			</Head>
 			<body>
+				{getInitColorSchemeScript()}
 				<Main />
 				<NextScript />
 			</body>

src/pages/index.tsx

@@ -5,15 +5,17 @@ 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 CodeIcon from "@mui/icons-material/Code";
+import CodeOffIcon from "@mui/icons-material/CodeOff";
+import EditIcon from "@mui/icons-material/Edit";
 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 PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import ReplayIcon from "@mui/icons-material/Replay";
+import MoneyIcon from "@mui/icons-material/Money";
+import TollIcon from "@mui/icons-material/Toll";
 import TextField from "@mui/material/TextField";
-import { Fira_Code } from "next/font/google";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Accordion from "@mui/material/Accordion";
@@ -35,46 +37,34 @@ 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";
 import Button from "@mui/material/Button";
+import dynamic from "next/dynamic";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import { fontMono } from "@/lib/theme";
+import { useColorScheme } from "@mui/material/styles";
+import { getTheme, prettify } from "@/utils";
+import { answersAtom, showCodeAtom } from "@/store/atoms";
+import { base } from "@/constants";
+import { EditTitle } from "@/components/EditTitle";
 
-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",
-	},
-]);
+const MonacoEditor = dynamic(import("@monaco-editor/react"), { ssr: false });
 
 export default function Home() {
 	const ref = useRef<HTMLIFrameElement>(null);
-	const [template, setTemplate] = useState(base.default);
+	const [template, setTemplate] = useState(prettify(base.default));
 	const [runningId, setRunningId] = useState("1");
 	const [activeId, setActiveId] = useState("1");
+	const [editingId, setEditingId] = useState<string | null>(null);
 	const [answers, setAnswers] = useAtom(answersAtom);
+	const [showCode, setShowCode] = useAtom(showCodeAtom);
 	const [loading, setLoading] = useState(false);
 	const [loadingLive, setLoadingLive] = useState(true);
+	const { mode, systemMode } = useColorScheme();
 
-	const { broadcast, call, subscribe } = useHost(ref, "fail4");
+	const { call, subscribe } = useHost(ref, "fail4");
 
 	const connection = useRef(false);
 	const [tries, setTries] = useState(1);
@@ -90,8 +80,6 @@ export default function Home() {
 
 		const timeout = setTimeout(() => {
 			if (current) {
-				// call({ template: "" });
-
 				call({ template: current.content });
 			}
 
@@ -141,7 +129,6 @@ export default function Home() {
 	return (
 		<>
 			<CssBaseline />
-
 			<Stack
 				sx={{
 					...fontMono.style,
@@ -152,211 +139,315 @@ export default function Home() {
 					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>
-								<Button
-									type="submit"
-									aria-label={loading ? "Loading" : "Run"}
-									aria-disabled={loading}
-									disabled={loading}
-									startIcon={
-										loading ? <CircularProgress size={24} /> : <PlayArrowIcon />
-									}
-								>
-									Run
-								</Button>
-								<Typography sx={{ flex: 1, pl: 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="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 sx={{ width: "50%", flex: 1 }}>
+					<AppBar position="static" elevation={0} color="default">
+						<Toolbar>
+							<Button
+								form="gpt-form"
+								type="submit"
+								aria-label={loading ? "Loading" : "Run"}
+								aria-disabled={loading}
+								disabled={loading}
+								startIcon={
+									loading ? <CircularProgress size={20} /> : <PlayArrowIcon />
+								}
+							>
+								Run
+							</Button>
+
+							{current?.id === editingId ? (
+								<EditTitle
+									value={current.task}
+									onSave={value => {
+										setEditingId(null);
+										setAnswers(previousAnswers =>
+											previousAnswers.map(answer_ =>
+												current.id === answer_.id
+													? {
+															...answer_,
+															task: value,
+													  }
+													: answer_
+											)
+										);
 									}}
 								/>
-							</Stack>
-						</Paper>
-						<Accordion>
-							<AccordionSummary
-								expandIcon={<ExpandMoreIcon />}
-								aria-controls="panel1a-content"
-								id="panel1a-header"
+							) : (
+								<>
+									<Typography
+										sx={{
+											flex: 1,
+											pl: 3,
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+										}}
+									>
+										{current?.task}
+									</Typography>
+									<IconButton
+										onClick={() => {
+											if (current) {
+												setEditingId(current.id);
+											}
+										}}
+									>
+										<EditIcon />
+									</IconButton>
+								</>
+							)}
+
+							<IconButton
+								color="inherit"
+								aria-label={showCode ? "Hide Code" : "Show Code"}
+								onClick={() => {
+									setShowCode(previousState => !previousState);
+								}}
 							>
-								<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"
+								{showCode ? <CodeOffIcon /> : <CodeIcon />}
+							</IconButton>
+							<IconButton
+								edge="end"
+								color="inherit"
+								aria-label="Clear Prompt"
+								onClick={async () => {
+									setActiveId("1");
+									setRunningId("1");
+									setTemplate(prettify(base.default));
+									reload();
+								}}
+							>
+								<ClearIcon />
+							</IconButton>
+						</Toolbar>
+					</AppBar>
+					{showCode && (
+						<Box sx={{ flex: 1 }}>
+							<MonacoEditor
+								theme={getTheme(mode, systemMode)}
+								language="javascript"
+								value={template}
+								options={{
+									fontSize: 14,
+								}}
+								onChange={async value => {
+									console.log(value);
+									setTemplate(value ?? "");
+								}}
+							/>
+						</Box>
+					)}
+					<Stack
+						sx={{ flex: 1, display: showCode ? "none" : undefined, overflow: "hidden" }}
+					>
+						<Box
+							component="form"
+							id="gpt-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);
+									setActiveId(answer.id);
+									setTemplate(prettify(answer.content));
+									reload();
+								} catch (error) {
+									console.error(error);
+								} finally {
+									setLoading(false);
+								}
+							}}
+						>
+							<Paper variant="outlined" sx={{ p: 0 }}>
+								<Stack sx={{ p: 2, gap: 2 }}>
+									<TextField
+										multiline
+										fullWidth
+										id="prompt"
+										name="prompt"
+										label="Prompt"
+										placeholder="matrix code"
+										defaultValue="matrix code"
+										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,
+										}}
 									/>
-									<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);
+							</Paper>
+							<Accordion disableGutters square elevation={0}>
+								<AccordionSummary
+									expandIcon={<ExpandMoreIcon />}
+									aria-controls="gtp-options-content"
+									id="gtp-options-header"
+									sx={{
+										bgcolor: "background.paper",
+										color: "text.primary",
 									}}
-								/>
-							</AccordionDetails>
-						</Accordion>
-					</Box>
+								>
+									<Typography>Options</Typography>
+								</AccordionSummary>
+								<AccordionDetails>
+									<FormControl fullWidth variant="outlined" sx={{ mb: 3 }}>
+										<InputLabel id="gpt-model-select-label">Model</InputLabel>
+										<Select
+											labelId="gpt-model-select-label"
+											id="gpt-model-select"
+											name="model"
+											defaultValue="gpt-3.5-turbo"
+											label="Model"
+										>
+											<MenuItem value="gpt-3.5-turbo">GPT 3.5 turbo</MenuItem>
+											<MenuItem value="gpt-4">GPT 4</MenuItem>
+										</Select>
+									</FormControl>
+									<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>
+									<Stack
+										spacing={2}
+										direction="row"
+										sx={{ mb: 2 }}
+										alignItems="center"
+									>
+										<TollIcon />
+										<Slider
+											marks
+											id="maxTokens"
+											name="maxTokens"
+											min={1024}
+											max={4096}
+											defaultValue={2048}
+											step={256}
+											valueLabelDisplay="auto"
+											aria-label="Max Tokens"
+										/>
+										<MoneyIcon />
+									</Stack>
+									<input
+										id="template"
+										name="template"
+										type="hidden"
+										value={template}
+										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();
-												}}
-											>
+						<List sx={{ flex: 1, overflow: "auto" }}>
+							{answers.map((answer, index) => {
+								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) {
+																const previous = answers[index + 1];
+																if (previous) {
+																	setActiveId(previous.id);
+																	setRunningId(previous.id);
+																	setTemplate(
+																		prettify(previous.task)
+																	);
+																	reload();
+																}
+															}
+														}}
+													>
+														<DeleteForeverIcon />
+													</IconButton>
+												)}
+											</Stack>
+										}
+										disablePadding
+									>
+										<ListItemButton
+											dense
+											selected={activeId === answer.id}
+											disabled={activeId === answer.id}
+											role={undefined}
+											onClick={() => {
+												setActiveId(answer.id);
+												setRunningId(answer.id);
+												setTemplate(prettify(answer.content));
+												reload();
+											}}
+										>
+											<ListItemIcon>
 												{runningId === answer.id ? (
-													<VisibilityIcon />
+													<CheckIcon />
 												) : (
-													<VisibilityOffIcon />
+													<VisibilityIcon />
 												)}
-											</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>
+											</ListItemIcon>
+
+											<ListItemText
+												primary={answer.task}
+												primaryTypographyProps={{
+													sx: {
+														overflow: "hidden",
+														textOverflow: "ellipsis",
+														whiteSpace: "nowrap",
+														fontSize: 16,
+													},
+												}}
+											/>
+										</ListItemButton>
+									</ListItem>
+								);
+							})}
+						</List>
+					</Stack>
 				</Stack>
 				<Stack sx={{ flex: 1, width: "50%", position: "relative" }}>
-					<AppBar position="static" elevation={0}>
+					<AppBar position="static" elevation={0} color="default">
 						<Toolbar>
 							<IconButton
 								color="inherit"

src/pages/live.tsx

@@ -1,4 +1,5 @@
 import Script from "next/script";
+
 const styles = (
 	<style>
 		{`

src/services/api/index.ts

@@ -1,36 +1,15 @@
-import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
+import { ChatCompletionRequestMessage } from "openai";
 import { nanoid } from "nanoid";
-import process from "node:process";
-
-const configuration = new Configuration({
-	apiKey: process.env.OPENAI_API_KEY,
-});
-
-const openai = new OpenAIApi(configuration);
-
-export function miniPrompt(strings: TemplateStringsArray, ...args: unknown[]) {
-	return strings
-		.flatMap((string, index) => [string, args[index] ?? ""])
-		.join("")
-		.replace(/^\s+/gm, "")
-		.replace(/^\n+/g, "\n")
-		.trim();
-}
-
-function extractCode(string: string) {
-	const codeBlockPattern = /(`{3,})(\w*)\n([\s\S]*?)\1/g;
-	const matches = codeBlockPattern.exec(string);
-	if (matches && matches.length >= 4) {
-		return matches[3];
-	}
-	return string;
-}
+import { openai } from "@/services/api/openai";
+import { extractCode, miniPrompt } from "@/utils";
 
 export async function toOpenAI({
-	prompt = "be creative",
+	prompt = "extend the code",
 	negativePrompt = "",
 	template = "",
+	model = "gpt-3.5-turbo",
 	temperature = "0.2",
+	maxTokens = "2048",
 }) {
 	const negativePrompt_ = negativePrompt.trim();
 	const prompt_ = prompt.trim();
@@ -46,39 +25,37 @@ export async function toOpenAI({
 			\`\`\`
 			`,
 	};
-	console.log("<<< INPUT Message >>>");
-	console.log(nextMessage.content);
 
 	const task = `${prompt_}${negativePrompt_ ? ` | not(${negativePrompt_})` : ""}`;
 
 	try {
 		const response = await openai.createChatCompletion({
-			model: "gpt-3.5-turbo",
+			model,
 			temperature: Number.parseFloat(temperature),
 			messages: [
 				{
 					role: "system",
 					content: miniPrompt`
-You are an expert JavaScript developer with a creative mindset and a specialization in Canvas-2d.
-You have a keen eye for performance optimization and are highly skilled in creating interactive experiences.
-You always adhere to documentation and meticulously extend the "CHANGELOG" and code.
-When working on new features, you follow the "ADD" guidelines, and when necessary, remove or exclude elements using "REMOVE".
-You also pay close attention to "TEMPLATE" code, extending or fixing it as needed.
-Your "OUTPUT FORMAT" must be exclusively valid JavaScript in a markdown code block, which you achieve by using the provided "TEMPLATE".
+					As a JavaScript expert, you optimize performance and create interactive experiences. You are absurdly creative.
+					Follow these guidelines closely for optimal results:
 
-And remember, the "ADD", "REMOVE", "TEMPLATE", and "OUTPUT FORMAT" guidelines are crucial to follow for optimal results.
-`,
+					* Use "ADD" and "REMOVE" guidelines to modify code as needed.
+					* Use short comments and follow TODO statements
+					* Always output the complete code, including the original "TEMPLATE" minus "REMOVE" plus "ADD".
+					* Use valid JavaScript exclusively in a markdown code block using the provided "TEMPLATE".
+					* Keep a "CHANGELOG" to document changes made to the code.
+					* Always change the code in some way
+					* Modify the "TEMPLATE" when adding new code elements for continuous improvement.
+    				`,
 				},
 				nextMessage,
 			],
-			max_tokens: 2048,
+			max_tokens: Number.parseInt(maxTokens, 10),
 		});
 
 		const { message } = response.data.choices[0];
 
 		if (message) {
-			console.log("<<< OUTPUT Message >>>");
-			console.log(message.content);
 			return {
 				...message,
 				content: extractCode(message.content).replace(

src/services/api/openai.ts

@@ -0,0 +1,7 @@
+import { Configuration, OpenAIApi } from "openai";
+import process from "node:process";
+
+export const configuration = new Configuration({
+	apiKey: process.env.OPENAI_API_KEY,
+});
+export const openai = new OpenAIApi(configuration);

src/store/atoms.ts

@@ -0,0 +1,18 @@
+import { atomWithStorage } from "jotai/utils";
+
+import { base } from "@/constants";
+
+export const answersAtom = atomWithStorage<
+	{
+		id: string;
+		content: string;
+		task: string;
+	}[]
+>("fail4", [
+	{
+		id: "1",
+		content: base.default,
+		task: "Base Script",
+	},
+]);
+export const showCodeAtom = atomWithStorage("fail4-editor", false);

src/utils/index.ts

@@ -0,0 +1,28 @@
+import GPT3Tokenizer from "gpt3-tokenizer";
+import prettier from "prettier";
+
+export const tokenizer = new GPT3Tokenizer({ type: "gpt3" });
+
+export function getTokens(text: string) {
+	return tokenizer.encode(text).bpe.length;
+}
+
+export function prettify(code: string) {
+	try {
+		return prettier.format(code, { useTabs: true, semi: true, parser: "babel" });
+	} catch {
+		return code;
+	}
+}
+
+export function getTheme(mode: string | undefined, systemMode: string | undefined) {
+	if (mode === "system") {
+		return `vs-${systemMode}`;
+	}
+	if (mode) {
+		return `vs-${mode}`;
+	}
+	return undefined;
+}
+export { extractCode } from "@/utils/prompt";
+export { miniPrompt } from "@/utils/prompt";

src/utils/prompt.ts

@@ -0,0 +1,17 @@
+export function miniPrompt(strings: TemplateStringsArray, ...args: unknown[]) {
+	return strings
+		.flatMap((string, index) => [string, args[index] ?? ""])
+		.join("")
+		.replace(/^\s+/gm, "")
+		.replace(/^\n+/g, "\n")
+		.trim();
+}
+
+export function extractCode(string: string) {
+	const codeBlockPattern = /(`{3,})(\w*)\n([\s\S]*?)\1/g;
+	const matches = codeBlockPattern.exec(string);
+	if (matches && matches.length >= 4) {
+		return matches[3];
+	}
+	return string;
+}