wip

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "nextjs-docker-starter",
-  "version": "1.0.0",
+  "name": "nextjs-hf-spaces",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "nextjs-docker-starter",
-      "version": "1.0.0",
+      "name": "nextjs-hf-spaces",
+      "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
         "@emotion/cache": "11.10.7",

src/components/example-components.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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/title.tsx

@@ -1,62 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/pages/api/get_file_list.ts

@@ -0,0 +1,10 @@
+import process from "node:process";
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse
+) {
+
+  return response.status(200).json({ file_list: [123] });
+}

src/pages/index.tsx

@@ -1,14 +1,17 @@
 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";
+import { useEffect, useState } from "react";
 
 export default function Home() {
+  const [data, setData] = useState(0)
+  useEffect(() => {
+    (async () => {
+      const res=  (await ((await fetch('/api/get_file_list')).json()))
+      setData(res.file_list[0]);
+    })()
+  }, [])
   return (
     <>
       <Head>
@@ -19,17 +22,11 @@ export default function Home() {
 
       <Container component="main" sx={{ minHeight: "90vh" }}>
         <Stack spacing={4} useFlexGap>
-          <Title />
+          {data}
 
-          <GettingStarted />
-
-          <DividerBox />
-
-          <ExampleComponents />
         </Stack>
       </Container>
 
-      <Footer />
     </>
   );
 }