2D-GameCreator / src /components /Introduction.tsx
NERDDISCO's picture
refactor: moved text around
11e58ff
raw
history blame
2.82 kB
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>
);
}