Spaces:
Runtime error
Runtime error
File size: 2,226 Bytes
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 |
import {
Stack,
Grid,
Typography,
Paper,
List,
ListSubheader,
ListItem,
ListItemIcon,
ListItemText,
Link,
} from "@mui/material";
import KeyIcon from "@mui/icons-material/Key";
import SmartButtonIcon from "@mui/icons-material/SmartButton";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
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>
<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's talk
</Link>
!
</Typography>
</Grid>
<Grid item md={4}>
<Paper>
<List disablePadding>
<ListSubheader>Quickstart</ListSubheader>
<ListItem>
<ListItemIcon>
<KeyIcon />
</ListItemIcon>
<ListItemText>
{" "}
Add your
<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 <b>Run</b>
</ListItemText>
</ListItem>
</List>
</Paper>
</Grid>
</Grid>
</Stack>
);
}
|