2D-GameCreator / src /components /Introduction.tsx
NERDDISCO's picture
feat: renamed to "2D GameCreator"
3516ec6
raw
history blame
2.53 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>
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>
You are stuck?{" "}
<Link
href="https://huggingface.co/spaces/failfast/2D-GameCreator/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>
<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>
</Grid>
</Grid>
</Stack>
);
}