Pushing Frontend Code

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.env.local.example

@@ -0,0 +1 @@
+HF_EXAMPLE_SECRET=thisisjustanexample

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes

@@ -0,0 +1,34 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/sync_to_hf_spaces.yml

@@ -0,0 +1,22 @@
+name: Sync to Hugging Face Spaces
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+env:
+  HF_USERNAME: failfast
+  HF_SPACE_NAME: nextjs-hf-spaces
+
+jobs:
+  sync-to-space:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push --force https://$HF_USERNAME:[email protected]/spaces/$HF_USERNAME/$HF_SPACE_NAME main

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Docker secrets used for local dev
+.secrets

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

Dockerfile

@@ -0,0 +1,63 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Tim Pietrusky (failfast)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,175 @@
+---
+title: "Next.js on \U0001F917 Spaces"
+emoji: "\U0001F433\U0001F917"
+colorFrom: blue
+colorTo: yellow
+sdk: docker
+pinned: false
+license: agpl-3.0
+app_port: 3000
+---
+<h1 align="center">Next.js on 🤗 Spaces</h1>
+
+<p align="center">
+Run your ML demo with ease in a <a href="https://nextjs.org">Next.js</a> environment
+</p>
+
+At failfast, we're passionate about crafting demos with TypeScript, Next.js, and MUI. Inspired by the ease-of-use of Gradio and Streamlit within Hugging Face Spaces, we aim to deliver a similar developer experience to JavaScript enthusiasts. Our toolkit includes predefined MUI components, empowering you to build intuitive UIs for your ML demos.
+
+---
+
+<!-- toc -->
+
+- [Local development](#local-development)
+  * [Use the Docker container locally](#use-the-docker-container-locally)
+- [Secret Management](#secret-management)
+  * [Build-time](#build-time)
+  * [Runtime](#runtime)
+- [Dockerize an existing project](#dockerize-an-existing-project)
+- [Sync your GitHub repository with your 🤗 Space](#sync-your-github-repository-with-your-%F0%9F%A4%97-space)
+- [Cleanup your 🤗 Space](#cleanup-your-%F0%9F%A4%97-space)
+- [Development Roadmap](#development-roadmap)
+
+<!-- tocstop -->
+
+---
+
+## Local development
+
+1. Install the dependencies: `npm i`
+2. Start the local dev-server: `npm run dev`
+3. Open the app via [localhost:3000](http://localhost:3000)
+
+### Use the Docker container locally
+
+> ℹ️ In order for the commands to work, you need at least Docker >= 20.10, as we use env-variables as secrets
+
+To make sure that everything is working out, you can run your container locally:
+
+1. [Install Docker](https://docs.docker.com/get-docker/) on your machine
+2. Go into the `nextjs-hf-spaces` folder
+3. Build your Docker image: `docker build -t nextjs-hf-spaces .`
+4. Run your Docker container: `docker run -p 3000:3000 nextjs-hf-spaces`.
+5. Open the app via [localhost:3000](http://localhost:3000)
+
+If you also have a secret that needs to be passed into the container, you can do this: 
+
+1. Create a copy of `.env.local.example` and rename it to `.env.local` (it contains the secret `HF_EXAMPLE_SECRET`)
+2. Run your Docker container and specify the env-file: `docker run -p 3000:3000 --env-file .env.local nextjs-hf-spaces`
+3. Open the example API via [localhost:3000/api/env](http://localhost:3000/api/env) and see that the value of our secret `HF_EXAMPLE_SECRET` is shown
+
+## Secret Management
+
+To not expose your secrets to end users, you can add them directly in **Settings** of your 🤗 Space.
+
+1. Open your space and navigate to the **Settings**
+2. Find **Repository secrets** & click on **New secret**
+   
+That's it, you can now access your secret.
+
+### Build-time
+
+If you need to have a secret during build-time (e.g. you want to install private npm packages), then you can add this directly into the `Dockerfile`:
+
+```dockerfile
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+    $(cat /run/secrets/HF_EXAMPLE_SECRET)
+```
+
+In this case, we mount the secret `HF_EXAMPLE_SECRET` (using [Docker secrets](https://docs.docker.com/engine/swarm/secrets/)) inside and can use it. 
+
+### Runtime
+
+When your 🤗 Space is running and you want to use a secret (e.g. access an API that requires authentication) without exposing it to the user, you can use it as an environment variable via `process.env`. 
+
+```typescript
+import process from "node:process";
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse
+) {
+  const exampleSecret = process.env.HF_EXAMPLE_SECRET;
+
+  // Your logic to access an API that requires authentication
+
+  return response.status(200).json("We have access to an external API");
+}
+```
+
+A simple example can be found at [nextjs-hf-spaces/api/env](https://huggingface.co/spaces/failfast/nextjs-hf-spaces/api/env). This will return the secret to see that it's working, but you wouldn't do this in your space, as you don't want to expose the secret to an end user. 
+
+## Dockerize an existing project
+
+To add support for Docker to an existing project, just copy the `Dockerfile` into the root of the project and add the following to the `next.config.js` file:
+
+```js
+// next.config.js
+module.exports = {
+  // ... rest of the configuration.
+  output: "standalone",
+};
+```
+
+This will build the project as a standalone app inside the Docker image.
+
+## Sync your GitHub repository with your 🤗 Space
+
+If you want to use all the features for collaborative development on GitHub, but keep your demo on 🤗 Spaces, then you can set up a GitHub action that will automatically push changes from GitHub into Spaces.
+
+> ℹ️ Git-LFS is required for files bigger than 10MB
+
+1. Create your repo on GitHub
+2. Create a [Github secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) named `HF_TOKEN` and use an [access token from Hugging Face](https://huggingface.co/settings/tokens) as its value (you must be logged in to do this)
+3. Update the workflow [sync_to_hf_spaces.yml](.github/workflows/sync_to_hf_spaces.yml)
+   - Configure `HF_USERNAME`: Replace `failfast` with the name of your 🤗 user account or your 🤗 organization
+   - Configure `HF_SPACE_NAME`: Replace `nextjs-hf-spaces` with the name of your 🤗 space
+4. Push the code into your repo on GitHub
+
+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).
+
+
+## Cleanup your 🤗 Space
+
+You don't need all the demo content and examples? Then you can delete these resources to get a clean 🤗 Space:
+
+* `src/pages/api/env.ts`
+* `src/components/example-components.tsx`
+* `src/components/getting-started.tsx`
+* `src/components/under-construction.tsx`
+* `src/components/title.tsx`
+* `src/components/huggingface/huggingface.tsx`
+
+Update the `src/components/index.tsx` and remove:
+
+```jsx
+<Title />
+
+<GettingStarted />
+
+<DividerBox />
+
+<ExampleComponents />
+```
+
+> i Got an idea how this could be better? Please let us know!
+
+## Development Roadmap
+
+The next milestones in no particular order are:
+
+* Components for all [`@huggingface/inference`](https://huggingface.co/docs/huggingface.js/inference/README) methods (WIP)
+* Components to use [langchain.js](https://js.langchain.com/docs)
+* Components to use [hyv](https://github.com/failfa-st/hyv)
+* Publish components on npm to make them usable outside of [nextjs-hf-spaces](https://github.com/failfa-st/nextjs-hf-spaces)
+* Provide templates for different use-cases, that are too complex for single components
+* Docs on how to use the components with all available options
+
+> i Anything missing? Please let us know!
+
+

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "nextjs-hf-spaces",
+  "version": "0.0.1",
+  "description": "Run your ML demo with ease in a Next.js environment",
+  "keywords": [
+    "nextjs",
+    "artificial intelligence",
+    "javascript",
+    "typescript",
+    "hugging face",
+    "machine learning"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Tim Pietrusky",
+    "url": "https://github.com/TimPietrusky"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "spj": "npx sort-package-json",
+    "start": "next start",
+    "toc": "npx markdown-toc README.md -i"
+  },
+  "dependencies": {
+    "@emotion/cache": "11.10.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",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
+    "eslint": "8.40.0",
+    "eslint-config-next": "13.4.2",
+    "next": "13.4.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.0.4"
+  }
+}

src/components/base/boxes.tsx

@@ -0,0 +1,28 @@
+import { Divider, DividerProps, Paper, PaperProps } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
+  display: "flex",
+  padding: 15,
+  paddingTop: 30,
+  paddingBottom: 30,
+  marginBottom: 20,
+  background: `linear-gradient(to bottom right, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
+}));
+
+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,
+}));
+
+export const DividerBox = styled(Divider)<DividerProps>(({ theme }) => ({
+  marginTop: 20,
+  marginBottom: 20,
+  background: "transparent",
+  border: "none",
+}));

src/components/base/code.tsx

@@ -0,0 +1,19 @@
+import { styled } from "@mui/material/styles";
+import { Paper, PaperProps } from "@mui/material";
+
+type CodeProps = {
+  children: string;
+};
+
+const CodeBox = styled(Paper)<PaperProps>(({ theme }) => ({
+  fontFamily: "monospace",
+  padding: 8,
+  borderTop: `2px solid ${theme.palette.secondary.dark}`,
+  borderBottom: `2px solid ${theme.palette.secondary.dark}`,
+}));
+
+export default function Code(props: CodeProps) {
+  const { children } = props;
+
+  return <CodeBox>{children}</CodeBox>;
+}

src/components/base/example-button.tsx

@@ -0,0 +1,41 @@
+import { Button, Typography } from "@mui/material";
+import { MouseEventHandler } from "react";
+
+interface ExampleButtonProps {
+  text: string;
+  displayLength?: number;
+  onClick?: (text: string) => void;
+}
+
+/**
+ *
+ * A button that hosts an example "text" that can be used as the input
+ * to anything to get an inspiration on how to get started.
+ *
+ * @param props ExampleButtonProps
+ * @returns
+ */
+export default function ExampleButton(props: ExampleButtonProps) {
+  const { text, displayLength = 50, onClick } = props;
+
+  const displayText =
+    text.slice(0, displayLength) + (text.length > displayLength ? "..." : "");
+
+  const handleClick: MouseEventHandler = event => {
+    event.preventDefault();
+
+    if (onClick) {
+      onClick(text);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      sx={{ textTransform: "none" }}
+      variant="outlined"
+    >
+      <Typography>{displayText}</Typography>
+    </Button>
+  );
+}

src/components/base/options.tsx

@@ -0,0 +1,56 @@
+import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Collapse,
+  IconButton,
+  Stack,
+} from "@mui/material";
+import { ReactElement, useState } from "react";
+
+type OptionsProps = {
+  children: ReactElement | ReactElement[];
+  opened?: boolean;
+};
+
+/**
+ *  Define options that are hidden by default
+ *
+ * @param props OptionsProps
+ * @param props.opened boolean - Are the options visible or not (default)
+ *
+ * @returns Options
+ */
+export default function Options(props: OptionsProps) {
+  const { children, opened = false } = props;
+
+  const [showOptions, setShowOptions] = useState(opened);
+
+  const handleShowOptions = () => setShowOptions(!showOptions);
+
+  return (
+    <>
+      <Card>
+        <CardHeader
+          title="Options"
+          onClick={handleShowOptions}
+          action={
+            <IconButton aria-label="expand" size="small">
+              {showOptions ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+            </IconButton>
+          }
+          sx={{
+            cursor: "pointer",
+          }}
+          titleTypographyProps={{ variant: "h6", sx: { fontSize: "1em" } }}
+        />
+        <Collapse in={showOptions}>
+          <CardContent>
+            <Stack spacing={2}>{children}</Stack>
+          </CardContent>
+        </Collapse>
+      </Card>
+    </>
+  );
+}

src/components/base/secret.tsx

@@ -0,0 +1,33 @@
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+} from "@mui/material";
+import { useState } from "react";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+
+export default function Secret(props: TextFieldProps) {
+  const { name = "secret", label = "Secret" } = props;
+  const [showSecret, setShowSecret] = useState(false);
+
+  const handleShowSecret = () => setShowSecret(!showSecret);
+
+  return (
+    <TextField
+      variant="filled"
+      label={label}
+      name={name}
+      type={showSecret ? "text" : "password"}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton onClick={handleShowSecret}>
+              {showSecret ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+}

src/components/base/slider-with-label.tsx

@@ -0,0 +1,22 @@
+import {
+  Box,
+  FormControlLabel,
+  Slider,
+  SliderProps,
+  Typography,
+} from "@mui/material";
+
+type SliderWithLabelProps = SliderProps & {
+  label?: string;
+};
+
+export default function SliderWithLabel(props: SliderWithLabelProps) {
+  const { label = "", valueLabelDisplay = "auto" } = props;
+
+  return (
+    <Box>
+      <Typography variant="subtitle1">{label}</Typography>
+      <Slider {...props} valueLabelDisplay={valueLabelDisplay} />
+    </Box>
+  );
+}

src/components/example-components.tsx

@@ -0,0 +1,35 @@
+import { Box, Stack, Typography } from "@mui/material";
+import Huggingface from "./huggingface/huggingface";
+import { DividerBox, HighlightBox, SectionBox } from "./base/boxes";
+import { UnderConstruction } from "./under-construction";
+
+export default function ExampleComponents() {
+  return (
+    <>
+      <SectionBox>
+        <Stack spacing={2}>
+          <Typography component="h2" variant="h3">
+            Components
+          </Typography>
+
+          <Typography variant="body1">
+            Unsure where to begin? Our pre-built components offer a jumpstart
+            for your ML demo 🚀
+          </Typography>
+        </Stack>
+      </SectionBox>
+
+      <Huggingface />
+
+      <DividerBox />
+
+      <Stack spacing={4}>
+        <HighlightBox>
+          <Typography variant="h4">More comming soon!</Typography>
+        </HighlightBox>
+
+        <UnderConstruction />
+      </Stack>
+    </>
+  );
+}

src/components/footer.tsx

@@ -0,0 +1,32 @@
+import Box from "@mui/material/Box";
+import Image from "next/image";
+import { Divider, Link } from "@mui/material";
+
+const Footer = () => {
+  return (
+    <Box
+      component="footer"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        gap: 1,
+        alignItems: "center",
+        mt: 8,
+        mb: 4,
+      }}
+    >
+      <Link
+        href="https://failfa.st"
+        display="flex"
+        alignItems="center"
+        rel="noopener"
+        target="_blank"
+      >
+        <Box sx={{ mr: 0.5 }}>Powered by</Box>{" "}
+        <Image src="/failfast.svg" alt="failfast Logo" width="32" height="32" />
+      </Link>
+    </Box>
+  );
+};
+
+export default Footer;

src/components/getting-started.tsx

@@ -0,0 +1,150 @@
+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 "./base/boxes";
+
+export default function GettingStarted() {
+  return (
+    <>
+      <Grid container spacing={2} sx={{ justifyContent: "center" }}>
+        <Grid item sm={8} lg={6}>
+          <Paper sx={{ p: 2 }}>
+            <List disablePadding>
+              <ListSubheader sx={{ fontSize: "1.5em" }}>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>{" "}
+                  and{" "}
+                  <Link
+                    href="https://github.com/failfa-st/hyv"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    hyv
+                  </Link>{" "}
+                  components (comming soon)
+                </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 the{" "}
+                <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">
+                Have feedback or ideas?{" "}
+                <Link
+                  href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  We&apos;re eager to hear from you!
+                </Link>{" "}
+                As an open-source project in its early stages, your input can
+                significantly shape our development.
+              </Typography>
+            </Paper>
+          </Stack>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/components/huggingface/huggingface.tsx

@@ -0,0 +1,64 @@
+import { Alert, Link, Typography } from "@mui/material";
+import { HfInference } from "@huggingface/inference";
+import { useEffect } from "react";
+import Summarization from "./inference/summarization";
+import { HighlightBox } from "../base/boxes";
+import Code from "../base/code";
+
+export type InferenceProps = {
+  token?: string;
+  model: string;
+};
+
+export default function Huggingface() {
+  return (
+    <>
+      <HighlightBox>
+        <Typography component="h4" variant="h4">
+          huggingface.js
+        </Typography>
+      </HighlightBox>
+
+      <Typography variant="body1">
+        <Link
+          href="https://huggingface.co/docs/huggingface.js/index"
+          target="_blank"
+          rel="noopener"
+        >
+          huggingface.js
+        </Link>{" "}
+        is a suite of JavaScript libraries that interact with the Hugging Face
+        API. It enables the use of over 100,000 ML models or your own via the{" "}
+        <Link
+          href="https://huggingface.co/docs/inference-endpoints/index"
+          target="_blank"
+          rel="noopener"
+        >
+          Inference API
+        </Link>
+        , and supports managing Hugging Face repositories.
+      </Typography>
+
+      <Alert severity="info">
+        When you run into rate limits while using the components, make sure to
+        add your 🤗 access token (optained via your{" "}
+        <Link
+          href="https://huggingface.co/settings/tokens"
+          target="_blank"
+          rel="noopener"
+        >
+          account settings
+        </Link>
+        ) into `HF Access Token` under &quot;Options&quot;.
+      </Alert>
+
+      <Typography component="h5" variant="h5">
+        Summarization
+      </Typography>
+
+      <Code>{`<Summarization model="facebook/bart-large-cnn" maxLength={100} />`}</Code>
+
+      <Summarization model="facebook/bart-large-cnn" maxLength={100} />
+    </>
+  );
+}

src/components/huggingface/inference/summarization.tsx

@@ -0,0 +1,190 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Slider,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { HfInference, SummarizationArgs } from "@huggingface/inference";
+import { InferenceProps } from "../huggingface";
+import Options from "@/components/base/options";
+import SliderWithLabel from "@/components/base/slider-with-label";
+import ExampleButton from "@/components/base/example-button";
+import Secret from "@/components/base/secret";
+
+type SummarizationProps = InferenceProps & {
+  /**
+   * (Default: None). Integer to define the maximum length in tokens of the output summary.
+   */
+  maxLength?: number;
+  /**
+   * (Default: None). Float (0-120.0). The amount of time in seconds that the query should take maximum. Network can cause some overhead so it will be a soft limit.
+   */
+  maxTime?: number;
+  /**
+   * (Default: None). Integer to define the minimum length in tokens of the output summary.
+   */
+  minLength?: number;
+  /**
+   * (Default: None). Float (0.0-100.0). The more a token is used within generation the more it is penalized to not be picked in successive generation passes.
+   */
+  repetitionPenalty?: number;
+  /**
+   * (Default: 1.0). Float (0.0-100.0). The temperature of the sampling operation. 1 means regular sampling, 0 means always take the highest score, 100.0 is getting closer to uniform probability.
+   */
+  temperature?: number;
+  /**
+   * (Default: None). Integer to define the top tokens considered within the sample operation to create new text.
+   */
+  topK?: number;
+  /**
+   * (Default: None). Float to define the tokens that are within the sample operation of text generation. Add tokens in the sample for more probable to least probable until the sum of the probabilities is greater than top_p.
+   */
+  topP?: number;
+};
+
+export default function Summarization(props: SummarizationProps) {
+  const {
+    model,
+    maxLength,
+    maxTime,
+    minLength,
+    repetitionPenalty,
+    temperature,
+    topK,
+    topP,
+  } = props;
+
+  const [token, setToken] = useState<string>("");
+  const [inputText, setInputText] = useState<string>("");
+  const [summary, setSummary] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+
+  const inference = useRef<HfInference | null>(null);
+
+  useEffect(() => {
+    inference.current = new HfInference(token);
+  }, [token]);
+
+  // Parse the data of the form and trigger "call"
+  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;
+    const max_length = Number(data.get("maxLength") as string);
+
+    call({ model, inputs: text, parameters: { max_length } });
+  };
+
+  /**
+   * Call the inference API using args
+   */
+  const call = async (args: SummarizationArgs) => {
+    const { inputs, parameters } = args;
+
+    try {
+      setLoading(true);
+
+      const response = await inference.current?.summarization({
+        model,
+        inputs,
+        parameters,
+      });
+
+      setSummary(response?.summary_text as string);
+      setError("");
+    } catch (error) {
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <Paper component="form" onSubmit={handleSubmit} sx={{ padding: "1em" }}>
+        <Stack spacing={2}>
+          <TextField
+            variant="filled"
+            label="Text to summarize"
+            multiline
+            required
+            minRows={4}
+            name="text"
+            value={inputText}
+            onChange={e => setInputText(e.target.value)}
+          />
+
+          <Button type="submit" variant="contained" disabled={loading}>
+            Run{" "}
+            {loading && (
+              <CircularProgress
+                size={24}
+                sx={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  marginTop: "-12px",
+                  marginLeft: "-12px",
+                }}
+              />
+            )}
+          </Button>
+
+          {error && <Alert severity="error">{error}</Alert>}
+
+          <TextField
+            variant="outlined"
+            label="Summary"
+            multiline
+            minRows={2}
+            name="text"
+            value={summary}
+          />
+
+          <Options>
+            <Secret name="token" label="HF Access Token" />
+
+            <SliderWithLabel
+              label="max_length"
+              name="maxLength"
+              aria-label="max length"
+              defaultValue={maxLength}
+              step={1}
+              min={56}
+              max={256}
+            />
+          </Options>
+
+          <Typography variant="h6" sx={{ fontSize: "1em" }}>
+            Examples
+          </Typography>
+          <Stack direction="row" spacing={2}>
+            <ExampleButton
+              text="The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct."
+              onClick={setInputText}
+            />
+
+            <ExampleButton
+              text="Machine learning (ML) is a field devoted to understanding and building methods that let machines 'learn' – that is, methods that leverage data to improve computer performance on some set of tasks. Machine learning algorithms build a model based on sample data, known as training data, in order to make predictions or decisions without being explicitly programmed to do so. Machine learning algorithms are used in a wide variety of applications, such as in medicine, email filtering, speech recognition, agriculture, and computer vision, where it is difficult or unfeasible to develop conventional algorithms to perform the needed tasks."
+              onClick={setInputText}
+            />
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/components/title.tsx

@@ -0,0 +1,62 @@
+import { Button, Link, Paper, Stack, Typography } from "@mui/material";
+import { HighlightBox } from "./base/boxes";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+
+export default function Title() {
+  return (
+    <Stack
+      spacing={4}
+      sx={{
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: "40vh",
+        p: 4,
+      }}
+    >
+      <Typography variant="h1" component="h1">
+        <Link
+          href="https://nextjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Next.js
+        </Link>{" "}
+        on 🤗{" "}
+        <Link
+          href="https://huggingface.co/spaces"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Spaces
+        </Link>
+      </Typography>
+
+      <HighlightBox>
+        <Typography variant="h5" component="p">
+          Run your ML demo with ease in a Next.js environment
+        </Typography>
+      </HighlightBox>
+
+      <Stack gap={2} direction="row">
+        <Button
+          startIcon={<ContentCopyIcon />}
+          variant="contained"
+          href="https://huggingface.co/spaces/failfast/nextjs-docker-starter?duplicate=true"
+          target="_blank"
+          rel="noopener"
+          color="secondary"
+        >
+          Duplicate space
+        </Button>
+
+        <Button
+          href="https://github.com/failfa-st/nextjs-docker-starter"
+          target="_blank"
+          rel="noopener"
+        >
+          Contribute on GitHub
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

src/components/under-construction.tsx

@@ -0,0 +1,8 @@
+import { styled } from "@mui/material/styles";
+
+export const UnderConstruction = styled("div")({
+  width: "100%",
+  height: "266px",
+  backgroundRepeat: "round",
+  backgroundImage: `url("data:image/gif;base64,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")`,
+});

src/lib/createEmotionCache.ts

@@ -0,0 +1,19 @@
+import createCache from "@emotion/cache";
+
+const isBrowser = typeof document !== "undefined";
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: "mui-style", insertionPoint });
+}

src/lib/theme.ts

@@ -0,0 +1,62 @@
+import { Roboto } from "next/font/google";
+import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
+
+export const roboto = Roboto({
+  weight: ["300", "400", "500", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Helvetica", "Arial", "sans-serif"],
+});
+
+/**
+ * https://mui.com/material-ui/experimental-api/css-theme-variables/customization/
+ *
+ * TL;DR
+ * - specify both dark and light colors at once
+ * - extendTheme returns a theme for CssVarsProvider, not ThemeProvider
+ * - CssVarsProvider has a defaultMode property, set to "system" in _app.tsx
+ */
+const theme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: "#2c90fc",
+        },
+        secondary: {
+          main: "#b827fc",
+        },
+      },
+    },
+    dark: {
+      palette: {
+        primary: {
+          main: "#2c90fc",
+        },
+        secondary: {
+          main: "#b827fc",
+        },
+      },
+    },
+  },
+  typography: {
+    ...roboto.style,
+    h1: {
+      fontSize: "5.25em",
+    },
+  },
+  components: {
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          textDecoration: "none",
+          ":hover": {
+            textDecoration: "underline",
+          },
+        },
+      },
+    },
+  },
+});
+
+export default theme;

src/pages/_app.tsx

@@ -0,0 +1,29 @@
+import Head from "next/head";
+import { AppProps } from "next/app";
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { CacheProvider, EmotionCache } from "@emotion/react";
+import theme from "@/lib/theme";
+import createEmotionCache from "@/lib/createEmotionCache";
+
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
+
+export interface MyAppProps extends AppProps {
+  emotionCache?: EmotionCache;
+}
+
+export default function MyApp(props: MyAppProps) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <CssVarsProvider defaultMode="system" theme={theme}>
+        <CssBaseline />
+        <Component {...pageProps} />
+      </CssVarsProvider>
+    </CacheProvider>
+  );
+}

src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

src/pages/api/env.ts

@@ -0,0 +1,11 @@
+import process from "node:process";
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse
+) {
+  const exampleSecret = process.env.HF_EXAMPLE_SECRET;
+
+  return response.status(200).json({ HF_EXAMPLE_SECRET: exampleSecret });
+}

src/pages/index.tsx

@@ -0,0 +1,35 @@
+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";
+import { DividerBox } from "@/components/base/boxes";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>nextjs-docker-starter</title>
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="description" content="Next.js in Docker on 🤗 Spaces" />
+      </Head>
+
+      <Container component="main" sx={{ minHeight: "90vh" }}>
+        <Stack spacing={4} useFlexGap>
+          <Title />
+
+          <GettingStarted />
+
+          <DividerBox />
+
+          <ExampleComponents />
+        </Stack>
+      </Container>
+
+      <Footer />
+    </>
+  );
+}

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}