feat: added getting-started, huggingface summarization, boxes

README.md

@@ -1,25 +1,23 @@
 ---
-title: Next.js Docker Starter
+title: Next.js on 🤗 Spaces
 emoji: "\U0001F433\U0001F918"
-colorFrom: purple
-colorTo: blue
+colorFrom: blue
+colorTo: yellow
 sdk: docker
 pinned: false
 license: agpl-3.0
 app_port: 3000
 ---
-
-# nextjs-docker-starter
+<h1 align="center">nextjs-docker-starter</h1>
 
 This starter can be used to run [Next.js](https://nextjs.org/) using [Docker](https://huggingface.co/docs/hub/spaces-sdks-docker) in 🤗 [Spaces](https://huggingface.co/spaces).
 
 <!-- toc -->
 
-- [nextjs-docker-starter](#nextjs-docker-starter)
-  - [Development](#development)
-  - [Use the Docker container locally](#use-the-docker-container-locally)
-  - [Dockerize an existing project](#dockerize-an-existing-project)
-  - [Manage your Space via GitHub](#manage-your-space-via-github)
+- [Development](#development)
+- [Use the Docker container locally](#use-the-docker-container-locally)
+- [Dockerize an existing project](#dockerize-an-existing-project)
+- [Manage your Space via GitHub](#manage-your-space-via-github)
 
 <!-- tocstop -->
 
@@ -71,3 +69,4 @@ If you want to use all the features for collaborative development on GitHub, but
 This should force push changes in the **main** branch from GitHub into your 🤗 space.
 
 For further information, you can check out the [guide on Hugging Face](https://huggingface.co/docs/hub/spaces-github-actions).
+

package-lock.json

@@ -13,6 +13,7 @@
         "@emotion/react": "11.10.6",
         "@emotion/server": "11.10.0",
         "@emotion/styled": "11.10.6",
+        "@huggingface/inference": "2.3.3",
         "@mui/icons-material": "5.11.16",
         "@mui/material": "5.12.0",
         "@types/node": "20.1.4",
@@ -374,6 +375,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@huggingface/inference": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-2.3.3.tgz",
+      "integrity": "sha512-/2vl+RIazkpSVQiTq7dPL8trgFjXQOnEzfJo6QL5y2/kCiHB+PPWzCe9qsLKt0/R46eMzG1PuCgAOlCO+vd11g==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",

package.json

@@ -24,9 +24,10 @@
   },
   "dependencies": {
     "@emotion/cache": "11.10.7",
-    "@emotion/server": "11.10.0",
     "@emotion/react": "11.10.6",
+    "@emotion/server": "11.10.0",
     "@emotion/styled": "11.10.6",
+    "@huggingface/inference": "2.3.3",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "@types/node": "20.1.4",

src/components/boxes.tsx

@@ -0,0 +1,22 @@
+import { Paper, PaperProps } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 15,
+  border: `5px solid transparent`,
+  borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
+  borderImageSlice: 1,
+}));
+
+export const HighlightBox = styled(Paper)<PaperProps>(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 10,
+  borderBottom: `3px solid transparent`,
+  borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
+  borderImageSlice: 1,
+}));

src/components/example-components.tsx

@@ -0,0 +1,16 @@
+import { Typography } from "@mui/material";
+import Huggingface from "./huggingface/huggingface";
+import { SectionBox } from "./boxes";
+
+export default function ExampleComponents() {
+  return (
+    <>
+      <SectionBox>
+        <Typography component="h2" variant="h3" sx={{ textAlign: "center" }}>
+          Example Components
+        </Typography>
+      </SectionBox>
+      <Huggingface />
+    </>
+  );
+}

src/components/footer.tsx

@@ -11,22 +11,18 @@ const Footer = () => {
         justifyContent: "center",
         gap: 1,
         alignItems: "center",
+        mt: 8,
+        mb: 4,
       }}
     >
-      <Link href="https://failfa.st" display="flex" alignItems="center">
-        Powered by{" "}
-        <Image src="/failfast.svg" alt="failfast Logo" width="32" height="32" />
-      </Link>
-
-      <Divider orientation="vertical" flexItem />
-
       <Link
-        href="https://github.com/failfa-st/nextjs-docker-starter"
-        target="_blank"
-        rel="noopener noreferrer"
+        href="https://failfa.st"
+        display="flex"
+        alignItems="center"
+        rel="noopener"
       >
-        {" "}
-        Contribute on GitHub
+        <Box sx={{ mr: 0.5 }}>Powered by</Box>{" "}
+        <Image src="/failfast.svg" alt="failfast Logo" width="32" height="32" />
       </Link>
     </Box>
   );

src/components/getting-started.tsx

@@ -0,0 +1,161 @@
+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 (
+    <>
+      <Stack sx={{ alignItems: "center", mb: 2 }}>
+        <HighlightBox>
+          <Typography variant="h5" component="p">
+            Run your ML demo with ease in a Next.js/React environment
+          </Typography>
+        </HighlightBox>
+      </Stack>
+
+      <Grid container spacing={2}>
+        <Grid item sm={8} lg={6}>
+          <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 repo on GitHub with your 🤗 Space via a GitHub
+                  Action
+                </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 }}>
+              <Stack gap={2}>
+                <Button
+                  startIcon={<ContentCopyIcon />}
+                  variant="contained"
+                  href="https://huggingface.co/spaces/failfast/nextjs-docker-starter?duplicate=true"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  Duplicate space
+                </Button>
+
+                <Button
+                  href="https://github.com/failfa-st/nextjs-docker-starter"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  Contribute on GitHub
+                </Button>
+              </Stack>
+            </Paper>
+
+            <Paper sx={{ p: 2 }}>
+              <Typography variant="body1">
+                Get started with the{" "}
+                <Link href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/blob/main/README.md">
+                  README
+                </Link>
+              </Typography>
+            </Paper>
+
+            <Paper sx={{ p: 2 }}>
+              <Typography variant="body1">
+                Something missing?{" "}
+                <Link href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions">
+                  Please let us know!
+                </Link>
+              </Typography>
+            </Paper>
+          </Stack>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/components/huggingface/huggingface.tsx

@@ -0,0 +1,24 @@
+import { Typography } from "@mui/material";
+import { HfInference } from "@huggingface/inference";
+import { useEffect } from "react";
+import Summarization from "./inference/summarization";
+
+export type InferenceProps = {
+  token?: string;
+  model: string;
+};
+
+export default function Huggingface() {
+  return (
+    <>
+      <Typography component="h4" variant="h4">
+        huggingface.js
+      </Typography>
+
+      <Typography component="h5" variant="h5">
+        Summarization
+      </Typography>
+      <Summarization model="facebook/bart-large-cnn" />
+    </>
+  );
+}

src/components/huggingface/inference/summarization.tsx

@@ -0,0 +1,108 @@
+import {
+  Alert,
+  Button,
+  IconButton,
+  InputAdornment,
+  Paper,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { HfInference } from "@huggingface/inference";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { InferenceProps } from "../huggingface";
+
+export default function Summarization(props: InferenceProps) {
+  const { model } = props;
+
+  const [token, setToken] = useState<string>("");
+  const [summary, setSummary] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [showToken, setShowToken] = useState(false);
+
+  const inference = useRef<HfInference | null>(null);
+
+  useEffect(() => {
+    inference.current = new HfInference(token);
+  }, [token]);
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+
+    setToken(data.get("token") as string);
+
+    const text = data.get("text") as string;
+
+    call(text);
+  };
+
+  const handleShowToken = () => setShowToken(!showToken);
+
+  const call = async (inputs: string) => {
+    try {
+      const response = await inference.current?.summarization({
+        model,
+        inputs,
+        parameters: {
+          max_length: 100,
+        },
+      });
+
+      setSummary(response?.summary_text as string);
+      setError("");
+    } catch (error) {
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+  };
+
+  return (
+    <>
+      <Paper component="form" onSubmit={handleSubmit} sx={{ padding: "1em" }}>
+        <Stack spacing={2}>
+          <TextField
+            variant="filled"
+            label="HF Token"
+            name="token"
+            type={showToken ? "text" : "password"}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton onClick={handleShowToken}>
+                    {showToken ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <TextField
+            variant="filled"
+            label="Text to summarize"
+            multiline
+            required
+            minRows={4}
+            name="text"
+          />
+          <Button type="submit" variant="contained">
+            Run
+          </Button>
+
+          {error && <Alert severity="error">{error}</Alert>}
+
+          <TextField
+            variant="outlined"
+            label="Summary"
+            multiline
+            minRows={2}
+            name="text"
+            value={summary}
+          />
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/components/title.tsx

@@ -8,7 +8,7 @@ export default function Title() {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        minHeight: "50vh",
+        minHeight: "20vh",
       }}
     >
       <Typography variant="h2" component="h1">
@@ -20,14 +20,6 @@ export default function Title() {
         >
           Next.js
         </Link>{" "}
-        in{" "}
-        <Link
-          href="https://www.docker.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Docker
-        </Link>{" "}
         on 🤗{" "}
         <Link
           href="https://huggingface.co/spaces"
@@ -36,7 +28,6 @@ export default function Title() {
         >
           Spaces
         </Link>
-        !
       </Typography>
     </Box>
   );

src/lib/theme.ts

@@ -31,10 +31,10 @@ const theme = extendTheme({
     dark: {
       palette: {
         primary: {
-          main: "#00d720",
+          main: "#2c90fc",
         },
         secondary: {
-          main: "#cc06ed",
+          main: "#b827fc",
         },
       },
     },
@@ -42,6 +42,15 @@ const theme = extendTheme({
   typography: {
     ...roboto.style,
   },
+  components: {
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          textDecoration: "none",
+        },
+      },
+    },
+  },
 });
 
 export default theme;

src/pages/index.tsx

@@ -2,6 +2,10 @@ import Head from "next/head";
 import Container from "@mui/material/Container";
 import Footer from "@/components/footer";
 import Title from "@/components/title";
+import Huggingface from "@/components/huggingface/huggingface";
+import GettingStarted from "@/components/getting-started";
+import ExampleComponents from "@/components/example-components";
+import { Stack } from "@mui/material";
 
 export default function Home() {
   return (
@@ -13,7 +17,13 @@ export default function Home() {
       </Head>
 
       <Container component="main" sx={{ minHeight: "90vh" }}>
-        <Title />
+        <Stack spacing={4} useFlexGap>
+          <Title />
+
+          <GettingStarted />
+
+          <ExampleComponents />
+        </Stack>
       </Container>
 
       <Footer />