File size: 4,375 Bytes
5786921
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4460085
5786921
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
413bcf2
5786921
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4460085
 
 
 
5786921
 
 
 
4460085
 
 
5786921
 
 
 
 
 
4460085
 
 
 
 
5786921
 
 
 
 
 
 
 
 
 
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import {
  Button,
  Grid,
  Link,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  ListSubheader,
  Paper,
  Stack,
  Typography,
} from "@mui/material";

import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
import SailingIcon from "@mui/icons-material/Sailing";
import LightModeIcon from "@mui/icons-material/LightMode";
import SentimentVerySatisfiedIcon from "@mui/icons-material/SentimentVerySatisfied";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import LinkIcon from "@mui/icons-material/Link";
import SyncIcon from "@mui/icons-material/Sync";
import { HighlightBox } from "./boxes";

export default function GettingStarted() {
  return (
    <>
      <Grid container spacing={2}>
        <Grid item sm={8} lg={6} sx={{ justifyContent: "center" }}>
          <Paper sx={{ p: 2 }}>
            <List disablePadding>
              <ListSubheader>Features</ListSubheader>

              <ListItem>
                <ListItemIcon>
                  <SentimentVerySatisfiedIcon />
                </ListItemIcon>
                <ListItemText>
                  <Link
                    href="https://huggingface.co/docs/huggingface.js/index"
                    target="_blank"
                    rel="noopener"
                  >
                    huggingface.js
                  </Link>{" "}
                  components (WIP)
                </ListItemText>
              </ListItem>

              <ListItem>
                <ListItemIcon>
                  <LinkIcon />
                </ListItemIcon>
                <ListItemText>
                  <Link
                    href="https://js.langchain.com/docs"
                    target="_blank"
                    rel="noopener"
                  >
                    langchain.js
                  </Link>{" "}
                  components (WIP)
                </ListItemText>
              </ListItem>

              <ListItem>
                <ListItemIcon>
                  <ViewQuiltIcon />
                </ListItemIcon>
                <ListItemText>
                  Rapid prototyping with{" "}
                  <Link
                    href="https://mui.com/material-ui/getting-started/overview/"
                    target="_blank"
                    rel="noopener"
                  >
                    MUI
                  </Link>
                </ListItemText>
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <LightModeIcon />
                </ListItemIcon>
                <ListItemText>
                  Dark / light theme based on system preferences
                </ListItemText>
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <SyncIcon />
                </ListItemIcon>
                <ListItemText>
                  Sync your GitHub repository with your πŸ€— Space
                </ListItemText>
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <SailingIcon />
                </ListItemIcon>
                <ListItemText>Runs in Docker or localhost</ListItemText>
              </ListItem>
            </List>
          </Paper>
        </Grid>

        <Grid item sm={4} lg={3}>
          <Stack gap={2}>
            <Paper sx={{ p: 2 }}>
              <Typography variant="body1">
                Explore our{" "}
                <Link
                  href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/blob/main/README.md"
                  target="_blank"
                  rel="noopener"
                >
                  README
                </Link>{" "}
                for a comprehensive guide on local development, Docker
                utilization, secret management, and GitHub-based Space control.
              </Typography>
            </Paper>

            <Paper sx={{ p: 2 }}>
              <Typography variant="body1">
                Something missing?{" "}
                <Link
                  href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions"
                  target="_blank"
                  rel="noopener"
                >
                  Please let us know!
                </Link>
              </Typography>
            </Paper>
          </Stack>
        </Grid>
      </Grid>
    </>
  );
}