File size: 2,815 Bytes
2f65818
 
 
 
 
 
 
 
 
 
 
2d85080
2f65818
 
 
 
2d85080
2f65818
 
 
 
 
 
2d85080
 
11e58ff
 
 
2d85080
2f65818
2d85080
11e58ff
 
 
2d85080
 
 
 
 
 
 
 
 
 
 
 
 
 
2f65818
 
11e58ff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2f65818
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import {
	Stack,
	Grid,
	Typography,
	Paper,
	List,
	ListSubheader,
	ListItem,
	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}>
					<Stack spacing={2}>
						<Typography>
							Provide a prompt detailing your desired game, and our 2D Game Developer
							will build it. The game operates directly in your browser via JavaScript
							on Canvas2D.
						</Typography>

						<Typography>
							This demo is ideal for crafting simple games and rapid prototyping.
							However, due to the limited context size and single-request design,
							there are constraints on the code volume.
						</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}>
					<Stack spacing={2}>
						<Paper>
							<List disablePadding>
								<ListSubheader>Quickstart</ListSubheader>
								<ListItem>
									<ListItemIcon>
										<KeyIcon />
									</ListItemIcon>
									<ListItemText>
										{" "}
										Add your&nbsp;
										<Link
											href="https://platform.openai.com/account/api-keys"
											target="_blank"
											rel="noopener"
										>
											OpenAI API key
										</Link>
									</ListItemText>
								</ListItem>
								<ListItem>
									<ListItemIcon>
										<SmartButtonIcon />
									</ListItemIcon>
									<ListItemText>
										Select one of the <b>Examples</b>
									</ListItemText>
								</ListItem>
								<ListItem>
									<ListItemIcon>
										<PlayArrowIcon />
									</ListItemIcon>
									<ListItemText>
										Click on &nbsp;
										<Button variant="contained" startIcon={<PlayArrow />}>
											<Typography sx={{ fontWeight: "500" }}>Run</Typography>
										</Button>
										&nbsp;
									</ListItemText>
								</ListItem>
							</List>
						</Paper>

						<Typography>
							You are stuck?{" "}
							<Link
								href="https://huggingface.co/spaces/failfast/2D-GameCreator/discussions"
								target="_blank"
								rel="noopener"
							>
								We are here to help!
							</Link>
						</Typography>
					</Stack>
				</Grid>
			</Grid>
		</Stack>
	);
}