Merge pull request huggingface#9 from huggingface/next-examples

Create Next.js server-side example project

Author: xenova

next-server/.eslintrc.json

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

next-server/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next-server/Dockerfile

@@ -0,0 +1,70 @@
+# Adapted from https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
+# For more information, see https://nextjs.org/docs/pages/building-your-application/deploying#docker-image
+
+# Use a base image for building
+FROM node:18-slim AS base
+
+# Install git
+RUN apt-get update && apt-get install -y git
+
+# Clone the repository and navigate to the next-server folder
+WORKDIR /app
+RUN git clone https://github.com/huggingface/transformers.js-examples .
+
+# Set the working directory to the next-server folder
+WORKDIR /app/next-server
+
+# Install dependencies only when needed
+FROM base AS deps
+
+# Install dependencies based on the preferred package manager
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app/next-server
+COPY --from=deps /app/next-server/node_modules ./node_modules
+COPY . .
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app/next-server
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/next-server/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+COPY --from=builder --chown=nextjs:nodejs /app/next-server/.next/standalone ./ 
+COPY --from=builder --chown=nextjs:nodejs /app/next-server/.next/static ./.next/static
+
+USER nextjs
+
+# Allow the running process to write model files to the cache folder.
+RUN mkdir -p /app/next-server/node_modules/@huggingface/transformers/.cache
+RUN chmod 777 -R /app/next-server/node_modules/@huggingface/transformers/.cache
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

next-server/README.md

@@ -0,0 +1,42 @@
+---
+title: Next.js + Transformers.js Server Template
+emoji: 🗄️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+app_port: 3000
+---
+
+# next-server
+
+This project, bootstrapped using generated by [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app), demonstrates how to use `@huggingface/transformers` in [Next.js](https://nextjs.org).
+
+## Instructions
+
+1. Clone the repository:
+   ```sh
+   git clone https://github.com/huggingface/transformers.js-examples.git
+   ```
+2. Change directory to the `next-server` project:
+   ```sh
+   cd transformers.js-examples/next-server
+   ```
+3. Install the dependencies:
+   ```sh
+   npm install
+   ```
+4. Run the development server:
+   ```sh
+   npm run dev
+   ```
+5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+6. You can start editing the page by modifying `app/page.js` (Next.js) and `app/api/classify/route.js` (Transformers.js). The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

next-server/app/api/classify/route.js

@@ -0,0 +1,18 @@
+// https://nextjs.org/docs/app/building-your-application/routing/route-handlers
+
+import { pipeline } from "@huggingface/transformers";
+
+// NOTE: We attach the classifier to the global object to avoid loading it multiple times
+const classifier = (globalThis.classifier ??= await pipeline(
+  "text-classification",
+  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
+));
+
+export async function GET(request) {
+  // https://nextjs.org/docs/app/building-your-axpplication/routing/route-handlers#url-query-parameters
+  const searchParams = request.nextUrl.searchParams;
+  const text = searchParams.get("text");
+
+  const result = await classifier(text);
+  return Response.json(result[0]);
+}

next-server/app/classifier.js

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function Classifier() {
+  const [text, setText] = useState("I love Transformers.js!");
+  const [result, setResult] = useState(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams();
+    params.append("text", text);
+    const url = "/api/classify?" + params.toString();
+
+    fetch(url)
+      .then((res) => res.json())
+      .then((o) => setResult(o));
+  }, [text]);
+
+  return (
+    <>
+      <input
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        className="border border-gray-300 rounded p-2 dark:bg-black dark:text-white w-full"
+      ></input>
+
+      <pre className="border border-gray-300 rounded p-2 dark:bg-black dark:text-white w-full min-h-[120px]">
+        {result ? JSON.stringify(result, null, 2) : "Loading…"}
+      </pre>
+    </>
+  );
+}

next-server/app/favicon.ico

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}