feat: added base components, updated the readme, extended summarization

.env.local.example

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

.gitignore

@@ -32,4 +32,7 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+
+# Docker secrets used for local dev
+.secrets

Dockerfile

@@ -15,6 +15,10 @@ RUN \
   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

README.md

@@ -1,6 +1,6 @@
 ---
 title: "Next.js on \U0001F917 Spaces"
-emoji: "🐳🤗"
+emoji: "\U0001F433\U0001F917"
 colorFrom: blue
 colorTo: yellow
 sdk: docker
@@ -10,14 +10,25 @@ app_port: 3000
 ---
 <h1 align="center">Next.js on 🤗 Spaces</h1>
 
-This starter can be used to run [Next.js](https://nextjs.org/) using [Docker](https://huggingface.co/docs/hub/spaces-sdks-docker) on 🤗 [Spaces](https://huggingface.co/spaces).
+<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)
+  * [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)
-- [Manage your 🤗 Space via GitHub](#manage-your-%F0%9F%A4%97-space-via-github)
+- [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 -->
 
@@ -29,16 +40,68 @@ This starter can be used to run [Next.js](https://nextjs.org/) using [Docker](ht
 2. Start the local dev-server: `npm run dev`
 3. Open the app via [localhost:3000](http://localhost:3000)
 
-## Use the Docker container locally
+### 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 .`.
+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:
@@ -53,9 +116,9 @@ module.exports = {
 
 This will build the project as a standalone app inside the Docker image.
 
-## Manage your 🤗 Space via GitHub
+## 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.
+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
 
@@ -71,3 +134,42 @@ This should force push changes in the **main** branch from GitHub into your 🤗
 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!
+
+

package-lock.json

@@ -7,7 +7,7 @@
     "": {
       "name": "nextjs-docker-starter",
       "version": "1.0.0",
-      "license": "AGPL",
+      "license": "MIT",
       "dependencies": {
         "@emotion/cache": "11.10.7",
         "@emotion/react": "11.10.6",

package.json

@@ -1,12 +1,13 @@
 {
-  "name": "nextjs-docker-starter",
-  "version": "1.0.0",
-  "description": "Run your ML demo app using Next.js on 🤗 Spaces",
+  "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",
-    "hugging face spaces",
+    "typescript",
+    "hugging face",
     "machine learning"
   ],
   "license": "MIT",
@@ -15,11 +16,11 @@
     "url": "https://github.com/TimPietrusky"
   },
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "dev": "next dev",
     "lint": "next lint",
     "spj": "npx sort-package-json",
+    "start": "next start",
     "toc": "npx markdown-toc README.md -i"
   },
   "dependencies": {

src/components/{boxes.tsx → base/boxes.tsx}

@@ -3,12 +3,11 @@ 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,
+  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 }) => ({

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/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

@@ -1,24 +1,35 @@
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import Huggingface from "./huggingface/huggingface";
-import { SectionBox } from "./boxes";
+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" sx={{ textAlign: "center" }}>
+          <Typography component="h2" variant="h3">
             Components
           </Typography>
 
           <Typography variant="body1">
-            Unsure where to begin? Our pre-built components are at your service,
-            offering a jumpstart for your ML demo.
+            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/getting-started.tsx

@@ -19,7 +19,7 @@ import SentimentVerySatisfiedIcon from "@mui/icons-material/SentimentVerySatisfi
 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";
+import { HighlightBox } from "./base/boxes";
 
 export default function GettingStarted() {
   return (
@@ -28,7 +28,7 @@ export default function GettingStarted() {
         <Grid item sm={8} lg={6} sx={{ justifyContent: "center" }}>
           <Paper sx={{ p: 2 }}>
             <List disablePadding>
-              <ListSubheader>Features</ListSubheader>
+              <ListSubheader sx={{ fontSize: "1.5em" }}>Features</ListSubheader>
 
               <ListItem>
                 <ListItemIcon>
@@ -58,7 +58,15 @@ export default function GettingStarted() {
                   >
                     langchain.js
                   </Link>{" "}
-                  components (WIP)
+                  and{" "}
+                  <Link
+                    href="https://github.com/failfa-st/hyv"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    hyv
+                  </Link>{" "}
+                  components (comming soon)
                 </ListItemText>
               </ListItem>
 
@@ -107,7 +115,7 @@ export default function GettingStarted() {
           <Stack gap={2}>
             <Paper sx={{ p: 2 }}>
               <Typography variant="body1">
-                Explore our{" "}
+                Explore the{" "}
                 <Link
                   href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/blob/main/README.md"
                   target="_blank"
@@ -122,14 +130,16 @@ export default function GettingStarted() {
 
             <Paper sx={{ p: 2 }}>
               <Typography variant="body1">
-                Something missing?{" "}
+                Have feedback or ideas?{" "}
                 <Link
                   href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions"
                   target="_blank"
                   rel="noopener"
                 >
-                  Please let us know!
-                </Link>
+                  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>

src/components/huggingface/huggingface.tsx

@@ -1,7 +1,9 @@
-import { Typography } from "@mui/material";
+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;
@@ -11,14 +13,52 @@ export type InferenceProps = {
 export default function Huggingface() {
   return (
     <>
-      <Typography component="h4" variant="h4">
-        huggingface.js
+      <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>
-      <Summarization model="facebook/bart-large-cnn" />
+
+      <Code>{`<Summarization model="facebook/bart-large-cnn" maxLength={100} />`}</Code>
+
+      <Summarization model="facebook/bart-large-cnn" maxLength={100} />
     </>
   );
 }

src/components/huggingface/inference/summarization.tsx

@@ -1,24 +1,73 @@
 import {
   Alert,
+  Box,
   Button,
+  CircularProgress,
   IconButton,
   InputAdornment,
   Paper,
+  Slider,
   Stack,
   TextField,
+  Typography,
 } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
-import { HfInference } from "@huggingface/inference";
+import { HfInference, SummarizationArgs } from "@huggingface/inference";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 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";
 
-export default function Summarization(props: InferenceProps) {
-  const { model } = props;
+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 [showToken, setShowToken] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const inference = useRef<HfInference | null>(null);
 
@@ -26,6 +75,7 @@ export default function Summarization(props: InferenceProps) {
     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);
@@ -33,20 +83,26 @@ export default function Summarization(props: InferenceProps) {
     setToken(data.get("token") as string);
 
     const text = data.get("text") as string;
+    const max_length = Number(data.get("maxLength") as string);
 
-    call(text);
+    call({ model, inputs: text, parameters: { max_length } });
   };
 
   const handleShowToken = () => setShowToken(!showToken);
 
-  const call = async (inputs: string) => {
+  /**
+   * 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: {
-          max_length: 100,
-        },
+        parameters,
       });
 
       setSummary(response?.summary_text as string);
@@ -58,27 +114,14 @@ export default function Summarization(props: InferenceProps) {
         setError("An unknown error occurred");
       }
     }
+
+    setLoading(false);
   };
 
   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"
@@ -86,9 +129,24 @@ export default function Summarization(props: InferenceProps) {
             required
             minRows={4}
             name="text"
+            value={inputText}
+            onChange={e => setInputText(e.target.value)}
           />
-          <Button type="submit" variant="contained">
-            Run
+
+          <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>}
@@ -101,6 +159,49 @@ export default function Summarization(props: InferenceProps) {
             name="text"
             value={summary}
           />
+
+          <Options>
+            <TextField
+              variant="filled"
+              label="HF Access Token"
+              name="token"
+              type={showToken ? "text" : "password"}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton onClick={handleShowToken}>
+                      {showToken ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+
+            <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

@@ -1,5 +1,5 @@
 import { Button, Link, Paper, Stack, Typography } from "@mui/material";
-import { HighlightBox } from "./boxes";
+import { HighlightBox } from "./base/boxes";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
 export default function Title() {
@@ -33,7 +33,7 @@ export default function Title() {
 
       <HighlightBox>
         <Typography variant="h5" component="p">
-          Run your ML demo with ease in a Next.js/React environment
+          Run your ML demo with ease in a Next.js environment
         </Typography>
       </HighlightBox>
 

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/theme.ts

@@ -21,10 +21,10 @@ const theme = extendTheme({
     light: {
       palette: {
         primary: {
-          main: "#40088d",
+          main: "#2c90fc",
         },
         secondary: {
-          main: "#038225",
+          main: "#b827fc",
         },
       },
     },

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

@@ -6,7 +6,7 @@ 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/boxes"
+import { DividerBox } from "@/components/base/boxes";
 
 export default function Home() {
   return (