feat: renamed a few components, added cancel, changed the default button

public/js/utils.js

@@ -49,7 +49,7 @@ function answer(window_, channel, targetOrigin = "*") {
 }
 
 function handleTemplate(template) {
-	Function("Template", `${template};`)();
+	Function("Template", `${template}`)();
 }
 
 subscribe("2DGameGPT", event => {

src/components/Examples.tsx

@@ -17,6 +17,7 @@ import {
 } from "@mui/material";
 import { DividerBox, SectionBox } from "./base/boxes";
 import { DynamicFeed, PrecisionManufacturing } from "@mui/icons-material";
+import theme from "@/lib/theme";
 
 export default function Examples() {
 	return (
@@ -27,12 +28,38 @@ export default function Examples() {
 				<Typography component="h3" variant="h2">
 					Example Games
 				</Typography>
+				<Typography variant="body1">
+					We re-created some of our favorite games! You want to share your game with the
+					community? Then head over to our{" "}
+					<Link
+						href="https://discord.com/invite/m3TBB9XEkb"
+						target="_blank"
+						rel="noopener"
+						sx={{ verticalAlign: "bottom" }}
+					>
+						<img
+							style={{ verticalAlign: "bottom" }}
+							src="https://img.shields.io/discord/1091306623819059300?color=7289da&label=Discord&logo=discord&logoColor=fff&style=for-the-badge"
+						/>
+					</Link>
+					, post it in #showcase and we might add it to this section as well!
+				</Typography>
 			</SectionBox>
 
 			<Grid container>
 				<Grid item sm={4}>
 					<Card>
-						<CardHeader title="Space Invaders Extreme"></CardHeader>
+						<CardHeader
+							title="Space Invaders Extreme"
+							subheader={
+								<>
+									by{" "}
+									<Link href="https://nerddis.co" target="_blank" rel="noopener">
+										NERDDISCO
+									</Link>
+								</>
+							}
+						></CardHeader>
 						<CardMedia
 							component="img"
 							image="img/space_invaders_extreme.jpg"
@@ -50,7 +77,7 @@ export default function Examples() {
 												target="_blank"
 												rel="noopener"
 											>
-												via Codesandbox
+												on CodeSandbox
 											</Link>
 										</TableCell>
 									</TableRow>

src/components/GameCreator.tsx

@@ -1,15 +1,12 @@
-import { SyntheticEvent, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
-import axios, { AxiosError } from "axios";
-import KeyIcon from "@mui/icons-material/Key";
-import SmartButtonIcon from "@mui/icons-material/SmartButton";
+import { AxiosError } 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 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 DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -36,7 +33,6 @@ 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 Button from "@mui/material/Button";
@@ -61,23 +57,14 @@ import {
 	COMMAND_REMOVE_FEATURE,
 } from "@/constants";
 import { baseGame } from "@/constants/baseGame";
-import { EditTitle } from "@/components/EditTitle";
-import theme, { fontMono } from "@/lib/theme";
+import { fontMono } from "@/lib/theme";
 import { Codesandbox } from "@/components/Codesandbox";
-import { Codepen } from "@/components/Codepen";
-import { InfoMenu } from "@/components/InfoMenu";
-import SimpleSnackbar from "@/components/SimpleSnackbar";
 import ExampleButton from "@/components/base/ExampleButton";
-import { Container, Grid, Link, ListSubheader } from "@mui/material";
+import { Alert, ButtonGroup, ListSubheader } from "@mui/material";
 import Secret from "@/components/base/secret";
-import Footer from "@/components/footer";
-import Title from "@/components/title";
-import { RunCircle } from "@mui/icons-material";
-import Introduction from "@/components/Introduction";
-import Instructions from "@/components/Instructions";
-import Examples from "@/components/Examples";
 import { toOpenAI } from "@/services/api";
 import { createClient } from "@/services/api/openai";
+import { RainbowListItemButton } from "./base/boxes";
 const MonacoEditor = dynamic(import("@monaco-editor/react"), { ssr: false });
 
 export interface ShareProps {
@@ -87,6 +74,8 @@ export interface ShareProps {
 
 export default function GameCreator() {
 	const ref = useRef<HTMLIFrameElement>(null);
+	const abortController = useRef<AbortController | null>(null);
+
 	const [prompt, setPrompt] = useState("");
 	const [template, setTemplate] = useState(prettify(baseGame.default));
 	const [runningId, setRunningId] = useState("1");
@@ -96,7 +85,6 @@ export default function GameCreator() {
 	const [showCode, setShowCode] = useAtom(showCodeAtom);
 	const [loading, setLoading] = useState(false);
 	const [loadingLive, setLoadingLive] = useState(true);
-	const [showError, setShowError] = useState(false);
 	const [errorMessage, setErrorMessage] = useState("");
 
 	const { mode, systemMode } = useColorScheme();
@@ -150,6 +138,14 @@ export default function GameCreator() {
 		};
 	}, [subscribe, loadingLive]);
 
+	const handleCancel = async () => {
+		if (abortController.current) {
+			abortController.current.abort();
+		}
+		setLoading(false);
+		reload();
+	};
+
 	const sortedAnswers = useMemo(() => {
 		return [...answers].sort((a, b) => {
 			if (a.id === "1") return -1;
@@ -160,14 +156,6 @@ export default function GameCreator() {
 
 	const current = answers.find(({ id }) => id === activeId);
 
-	const handleSnackbarClose = (event: SyntheticEvent | Event, reason?: string) => {
-		if (reason === "clickaway") {
-			return;
-		}
-
-		setShowError(false);
-	};
-
 	function reload() {
 		connection.current = false;
 		if (ref.current) {
@@ -186,7 +174,7 @@ export default function GameCreator() {
 						inset: 0,
 						overflow: "hidden",
 						flexDirection: { md: "row" },
-						height: "100vh",
+						height: "90vh",
 					}}
 				>
 					<Stack
@@ -199,10 +187,14 @@ export default function GameCreator() {
 					>
 						<AppBar position="static" elevation={0} color="default">
 							<Toolbar>
-								<Typography variant="h5" component="h2" sx={{ flex: 1, m: 0 }}>
+								<Typography variant="h5" component="h2" sx={{ m: 0 }}>
 									2D GameCreator-GPT
 								</Typography>
 
+								<Typography variant="body2" sx={{ ml: 1, flex: 1 }}>
+									v0.0.1
+								</Typography>
+
 								<IconButton
 									color="inherit"
 									aria-label={showCode ? "Hide Code" : "Show Code"}
@@ -212,19 +204,6 @@ export default function GameCreator() {
 								>
 									{showCode ? <CodeOffIcon /> : <CodeIcon />}
 								</IconButton>
-								{/* <IconButton
-									edge="end"
-									color="inherit"
-									aria-label="Clear Prompt"
-									onClick={async () => {
-										setActiveId("1");
-										setRunningId("1");
-										setTemplate(prettify(baseGame.default));
-										reload();
-									}}
-								>
-									<ClearIcon />
-								</IconButton> */}
 							</Toolbar>
 						</AppBar>
 						{showCode && (
@@ -279,6 +258,8 @@ export default function GameCreator() {
 									try {
 										setLoading(true);
 
+										abortController.current = new AbortController();
+
 										const {
 											command,
 											prompt,
@@ -299,17 +280,22 @@ export default function GameCreator() {
 											model: model as string,
 											maxTokens: maxTokens as string,
 											client,
+											signal: abortController.current.signal,
 										});
 
 										setAnswers(previousAnswers => [answer, ...previousAnswers]);
 										setRunningId(answer.id);
 										setActiveId(answer.id);
 										setTemplate(prettify(answer.content));
+										setErrorMessage("");
 										reload();
 									} catch (error) {
-										setShowError(true);
-										setErrorMessage((error as AxiosError).message);
-										console.error(error);
+										if (
+											(error as { message?: string }).message !== "canceled"
+										) {
+											setErrorMessage((error as AxiosError).message);
+											console.error(error);
+										}
 									} finally {
 										setLoading(false);
 									}
@@ -322,13 +308,14 @@ export default function GameCreator() {
 										<TextField
 											multiline
 											fullWidth
+											variant="outlined"
 											required
 											id="prompt"
 											name="prompt"
 											label="Prompt"
 											value={prompt}
 											onChange={e => setPrompt(e.target.value)}
-											minRows={5}
+											minRows={3}
 											InputProps={{
 												style: fontMono.style,
 											}}
@@ -364,36 +351,49 @@ export default function GameCreator() {
 												</Select>
 											</FormControl>
 
-											<Button
-												form="gpt-form"
-												type="submit"
+											<ButtonGroup
 												variant="contained"
 												fullWidth
-												aria-label={loading ? "Loading" : "Run"}
-												aria-disabled={loading}
-												disabled={loading}
-												startIcon={
-													loading ? (
-														<CircularProgress size={20} />
-													) : (
-														<PlayArrowIcon />
-													)
-												}
-												sx={{
-													pl: 5,
-													pr: 5,
-													flexGrow: 1,
-													overflow: "auto",
-												}}
+												sx={{ flexGrow: 1, maxHeight: "96px" }}
 											>
-												<Typography sx={{ fontWeight: "500" }}>
+												<Button
+													form="gpt-form"
+													type="submit"
+													aria-label={loading ? "Loading" : "Run"}
+													aria-disabled={loading}
+													disabled={loading}
+													startIcon={
+														loading ? (
+															<CircularProgress size={20} />
+														) : (
+															<PlayArrowIcon />
+														)
+													}
+													sx={{
+														pl: 5,
+														pr: 5,
+													}}
+												>
 													Run
-												</Typography>
-											</Button>
-											<Box sx={{ flex: 1 }} />
+												</Button>
+												<Button
+													aria-label="Cancel"
+													aria-disabled={!loading}
+													disabled={!loading}
+													onClick={handleCancel}
+													startIcon={<ClearIcon />}
+													color="error"
+													sx={{
+														pl: 0,
+														pr: 0,
+													}}
+												></Button>
+											</ButtonGroup>
 										</Stack>
 									</Stack>
 
+									{errorMessage && <Alert severity="error">{errorMessage}</Alert>}
+
 									<Stack direction="row" spacing={1} alignItems="center">
 										<Typography>Examples</Typography>
 
@@ -585,38 +585,73 @@ export default function GameCreator() {
 												}
 												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 ? (
-															<CheckIcon />
-														) : (
-															<VisibilityIcon />
-														)}
-													</ListItemIcon>
-
-													<ListItemText
-														primary={answer.task}
-														primaryTypographyProps={{
-															sx: {
-																overflow: "hidden",
-																textOverflow: "ellipsis",
-																whiteSpace: "nowrap",
-																fontSize: 16,
-															},
+												{activeId === answer.id ? (
+													<RainbowListItemButton
+														dense
+														selected={activeId === answer.id}
+														// disabled={activeId === answer.id}
+														role={undefined}
+														onClick={() => {
+															setActiveId(answer.id);
+															setRunningId(answer.id);
+															setTemplate(prettify(answer.content));
+															reload();
 														}}
-													/>
-												</ListItemButton>
+													>
+														<ListItemIcon>
+															{runningId === answer.id ? (
+																<CheckIcon />
+															) : (
+																<VisibilityIcon />
+															)}
+														</ListItemIcon>
+
+														<ListItemText
+															primary={answer.task}
+															primaryTypographyProps={{
+																sx: {
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	whiteSpace: "nowrap",
+																	fontSize: 16,
+																},
+															}}
+														/>
+													</RainbowListItemButton>
+												) : (
+													<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 ? (
+																<CheckIcon />
+															) : (
+																<VisibilityIcon />
+															)}
+														</ListItemIcon>
+
+														<ListItemText
+															primary={answer.task}
+															primaryTypographyProps={{
+																sx: {
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	whiteSpace: "nowrap",
+																	fontSize: 16,
+																},
+															}}
+														/>
+													</ListItemButton>
+												)}
 											</ListItem>
 										);
 									})}
@@ -697,12 +732,6 @@ export default function GameCreator() {
 					</Stack>
 				</Stack>
 			</Paper>
-
-			<SimpleSnackbar
-				handleClose={handleSnackbarClose}
-				showError={showError}
-				message={errorMessage}
-			/>
 		</>
 	);
 }

src/components/{Workflow.tsx → HowToUse.tsx}

@@ -1,4 +1,4 @@
-import { PlayArrow, Code, Replay, CropSquare } from "@mui/icons-material";
+import { PlayArrow, Code, Replay, CropSquare, Clear } from "@mui/icons-material";
 import {
 	Button,
 	Grid,
@@ -7,12 +7,24 @@ import {
 	ListItem,
 	ListSubheader,
 	Paper,
+	Stack,
 	Typography,
 } from "@mui/material";
 import { OutlinedBox, SectionBox, RainbowBox } from "@/components/base/boxes";
 import { Key } from "react";
 
 const workflowSteps = [
+	{
+		title: "Editor Usage Tips",
+		steps: [
+			"We are limited by the context-size of the selected model, the scope of the game shouldn't be super huge (for example 'asteroids' is a game with small scope while 'fortnite' is way too big)",
+			"It's good to start with simple features, main mechanics first using the base game + the create game command.",
+			'Iterate on this. For example "Flappy Bird. Intro screen, start the game by pressing space key."',
+			"See if the generated result is what you expect. Continue there, add more features. Either by using the add feature command or by extending the prompt itself and start from scratch (select the base game + create game command).",
+			"Make always sure to check the selected game in the games list, as this is used as the foundation for the next iteration.",
+			"Cancel generating the game at any time by pressing the cancel button button next to run button.",
+		],
+	},
 	{
 		title: "Create a New Game",
 		steps: [
@@ -94,7 +106,7 @@ const workflowSteps = [
 			"Open the Options by clicking on them",
 			"Switch the model between gpt-4 and gpt-3.5-turbo (default)",
 			"Update the max_tokens to 4096 (gpt-4), default is 2048 (gpt-3.5-turbo)",
-			"Make changes to the temperature if you want more random results, default is 0.2",
+			"Make changes to the temperature if you want more random (value closer to 1.0) results, default is 0.2 (not very random)",
 		],
 	},
 ];
@@ -130,6 +142,18 @@ function parseString(string: string) {
 				 
 			</>
 		),
+		"cancel button": (item: string, index: Key | null | undefined) => (
+			<>
+				&nbsp;
+				<Button
+					variant="contained"
+					color="error"
+					startIcon={<Clear />}
+					key={index}
+				></Button>
+				&nbsp;
+			</>
+		),
 		"source code button": (item: string, index: Key | null | undefined) => (
 			<>
 				&nbsp;
@@ -205,7 +229,7 @@ function parseString(string: string) {
 	});
 }
 
-export default function Workflow() {
+export default function HowToUse() {
 	return (
 		<>
 			<SectionBox>

src/components/Introduction.tsx

@@ -9,42 +9,48 @@ import {
 	ListItemIcon,
 	ListItemText,
 	Link,
+	Button,
 } from "@mui/material";
 import KeyIcon from "@mui/icons-material/Key";
 import SmartButtonIcon from "@mui/icons-material/SmartButton";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import { PlayArrow } from "@mui/icons-material";
 
 export default function Introduction() {
 	return (
 		<Stack direction="row" spacing={2}>
 			<Grid container gap={2} sx={{ justifyContent: "center" }}>
 				<Grid item md={4}>
-					<Typography sx={{ mb: 1 }}>
-						Your job is to provide a prompt that describes the game you want, so that
-						your skilled 2D Game Developer can built it for you using JavaScript on
-						Canvas2D.
-					</Typography>
+					<Stack spacing={2}>
+						<Typography>
+							You provide a prompt that describes the game you want, so that your
+							skilled 2D Game Developer can built it for you. The game runs directly
+							in your browser (thanks to JavaScript on Canvas2D).
+						</Typography>
 
-					<Typography>
-						We would love to use open-source models for this (for example{" "}
-						<Link
-							href="https://huggingface.co/HuggingFaceH4/starchat-alpha"
-							target="_blank"
-							rel="noopener"
-						>
-							starchat-alpha
-						</Link>
-						), but running a private Inference Endpoint is too expensive for us. If you
-						would love to help us, then{" "}
-						<Link
-							href="https://discord.com/invite/m3TBB9XEkb"
-							target="_blank"
-							rel="noopener"
-						>
-							let&apos;s talk
-						</Link>
-						!
-					</Typography>
+						<Typography>
+							You are stuck?{" "}
+							<Link
+								href="https://huggingface.co/spaces/failfast/2D-GameCreator-GPT/discussions"
+								target="_blank"
+								rel="noopener"
+							>
+								We are here to help!
+							</Link>
+						</Typography>
+
+						<Typography>
+							We are looking into integrating open-source models (for example{" "}
+							<Link
+								href="https://huggingface.co/HuggingFaceH4/starchat-alpha"
+								target="_blank"
+								rel="noopener"
+							>
+								starchat-alpha
+							</Link>
+							) next, so stay tuned!
+						</Typography>
+					</Stack>
 				</Grid>
 				<Grid item md={4}>
 					<Paper>
@@ -71,7 +77,7 @@ export default function Introduction() {
 									<SmartButtonIcon />
 								</ListItemIcon>
 								<ListItemText>
-									Select one of the <b>examples</b>
+									Select one of the <b>Examples</b>
 								</ListItemText>
 							</ListItem>
 							<ListItem>
@@ -79,7 +85,11 @@ export default function Introduction() {
 									<PlayArrowIcon />
 								</ListItemIcon>
 								<ListItemText>
-									Click on <b>Run</b>
+									Click on &nbsp;
+									<Button variant="contained" startIcon={<PlayArrow />}>
+										<Typography sx={{ fontWeight: "500" }}>Run</Typography>
+									</Button>
+									&nbsp;
 								</ListItemText>
 							</ListItem>
 						</List>

src/components/Troubleshooting.tsx

@@ -0,0 +1,43 @@
+import { Typography, Paper, Alert, Link } from "@mui/material";
+import { SectionBox, DividerBox } from "./base/boxes";
+
+export default function Troubleshooting() {
+	return (
+		<>
+			<SectionBox>
+				<Typography component="h3" variant="h2">
+					Troubleshooting
+				</Typography>
+			</SectionBox>
+
+			<Paper sx={{ p: 1 }}>
+				<Alert severity="error" sx={{ fontSize: "1.25rem", mb: 1 }}>
+					Unhandled Runtime Error: SyntaxError: Unexpected identifier
+				</Alert>
+
+				<Typography variant="body1">
+					The generated output was interrupted, as it was too long and the OpenAI API
+					delivered not everything. If you can, switch to GPT-4 as it allows a bigger
+					context size (change it in the options and also increase the max_tokens). If you
+					can&apos;t do this, then please help us extend the GameCreator so that it can
+					also resume when the output is interrupted.
+				</Typography>
+			</Paper>
+
+			<DividerBox />
+
+			<Paper sx={{ p: 1 }}>
+				<Typography>
+					You need help? Something is not working?{" "}
+					<Link
+						href="https://huggingface.co/spaces/failfast/2D-GameCreator-GPT/discussions"
+						target="_blank"
+						rel="noopener"
+					>
+						Please let us know!
+					</Link>
+				</Typography>
+			</Paper>
+		</>
+	);
+}

src/components/{Instructions.tsx → UnderTheHood.tsx}

@@ -2,7 +2,7 @@ import { Alert, Link, List, ListItem, ListItemText, Paper, Typography } from "@m
 import { DividerBox, SectionBox, OutlinedBox } from "@/components/base/boxes";
 import { systemMessage } from "@/constants";
 
-export default function Instructions() {
+export default function UnderTheHood() {
 	return (
 		<>
 			<DividerBox />
@@ -83,41 +83,6 @@ TEMPLATE:`}
 					</ListItem>
 				</List>
 			</Paper>
-
-			<SectionBox>
-				<Typography component="h3" variant="h2">
-					Troubleshooting
-				</Typography>
-			</SectionBox>
-
-			<Paper sx={{ p: 1 }}>
-				<Alert severity="error" sx={{ fontSize: "1.25rem", mb: 1 }}>
-					Unhandled Runtime Error: SyntaxError: Unexpected identifier
-				</Alert>
-
-				<Typography variant="body1">
-					The generated output was interrupted, as it was too long and the OpenAI API
-					delivered not everything. If you can, switch to GPT-4 as it allows a bigger
-					context size (change it in the options and also increase the max_tokens). If you
-					can&apos;t do this, then please help us extend the GameCreator so that it can
-					also resume when the output is interrupted.
-				</Typography>
-			</Paper>
-
-			<DividerBox />
-
-			<Paper sx={{ p: 1 }}>
-				<Typography>
-					You need help? Something is not working?{" "}
-					<Link
-						href="https://huggingface.co/spaces/failfast/2D-GameCreator-GPT/discussions"
-						target="_blank"
-						rel="noopener"
-					>
-						Please let us know!
-					</Link>
-				</Typography>
-			</Paper>
 		</>
 	);
 }

src/components/base/boxes.tsx

@@ -1,8 +1,17 @@
-import { Divider, DividerProps, Paper, PaperProps } from "@mui/material";
+import {
+	Divider,
+	DividerProps,
+	ListItemButton,
+	ListItemButtonProps,
+	Paper,
+	PaperProps,
+} from "@mui/material";
 import { styled } from "@mui/material/styles";
 
 export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
 	display: "flex",
+	flexDirection: "column",
+	gap: 10,
 	padding: 15,
 	paddingTop: 30,
 	paddingBottom: 30,
@@ -26,6 +35,12 @@ export const RainbowBox = styled("div")(({ theme }) => ({
 	borderImageSlice: 1,
 }));
 
+export const RainbowListItemButton = styled(ListItemButton)<ListItemButtonProps>(({ theme }) => ({
+	border: `1px solid transparent`,
+	borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
+	borderImageSlice: 1,
+}));
+
 export const DividerBox = styled(Divider)<DividerProps>(({ theme }) => ({
 	marginTop: 20,
 	marginBottom: 20,

src/components/title.tsx

@@ -13,7 +13,7 @@ export default function Title() {
 				p: 4,
 			}}
 		>
-			<Typography variant="h1" component="h1">
+			<Typography variant="h1" component="h1" sx={{ fontSize: { xs: "2em", md: "5em" } }}>
 				2D GameCreator-GPT
 			</Typography>
 

src/lib/theme.ts

@@ -58,6 +58,18 @@ const theme = extendTheme({
 				},
 			},
 		},
+		MuiButton: {
+			styleOverrides: {
+				startIcon: ({ ownerState }) => ({
+					...(ownerState.children
+						? {}
+						: {
+								// if no button label, center icon (e.g mobile)
+								marginRight: 0,
+						  }),
+				}),
+			},
+		},
 	},
 });
 

src/pages/index.tsx

@@ -4,10 +4,11 @@ import { Container } from "@mui/material";
 import Footer from "@/components/footer";
 import Title from "@/components/title";
 import Introduction from "@/components/Introduction";
-import Instructions from "@/components/Instructions";
+import UnderTheHood from "@/components/UnderTheHood";
 import Examples from "@/components/Examples";
 import GameCreator from "@/components/GameCreator";
-import Workflow from "@/components/Workflow";
+import HowToUse from "@/components/HowToUse";
+import Troubleshooting from "@/components/Troubleshooting";
 
 export default function Home() {
 	return (
@@ -24,9 +25,11 @@ export default function Home() {
 
 				<Examples />
 
-				<Workflow />
+				<HowToUse />
 
-				<Instructions />
+				<UnderTheHood />
+
+				<Troubleshooting />
 
 				<Footer />
 			</Container>

src/services/api/index.ts

@@ -11,6 +11,7 @@ interface ToOpenAIProps {
 	model: string;
 	maxTokens: string;
 	client: OpenAIApi | null;
+	signal?: AbortSignal;
 }
 
 export async function toOpenAI({
@@ -21,6 +22,7 @@ export async function toOpenAI({
 	model = "gpt-3.5-turbo",
 	maxTokens = "2048",
 	client = null,
+	signal,
 }: ToOpenAIProps) {
 	if (client === null) {
 		throw new Error("OpenAI client is not defined");
@@ -50,12 +52,15 @@ export async function toOpenAI({
 	];
 
 	try {
-		const response = await client.createChatCompletion({
-			model,
-			messages,
-			max_tokens: Number.parseInt(maxTokens),
-			temperature: Number.parseFloat(temperature),
-		});
+		const response = await client.createChatCompletion(
+			{
+				model,
+				messages,
+				max_tokens: Number.parseInt(maxTokens),
+				temperature: Number.parseFloat(temperature),
+			},
+			{ signal }
+		);
 
 		const { message } = response.data.choices[0];
 

src/services/api/openai.ts

@@ -1,5 +1,10 @@
 import { Configuration, OpenAIApi } from "openai";
 
 export const createClient = (apiKey: string): OpenAIApi => {
-	return new OpenAIApi(new Configuration({ apiKey }));
+	const configuration = new Configuration({ apiKey });
+
+	// See https://github.com/openai/openai-node/issues/6#issuecomment-1492814621
+	delete configuration.baseOptions.headers["User-Agent"];
+
+	return new OpenAIApi(configuration);
 };