Upload 18 files

.eslintrc.json

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

.gitignore

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

Dockerfile

@@ -0,0 +1,64 @@
+# syntax=docker/dockerfile:1.4
+
+# Adapted from https://github.com/vercel/next.js/blob/e60a1e747c3f521fc24dfd9ee2989e13afeb0a9b/examples/with-docker/Dockerfile
+# For more information, see https://nextjs.org/docs/pages/building-your-application/deploying#docker-image
+
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY --link 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
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY --link  . .
+
+# 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 npm run build
+
+# If using yarn comment out above and use below instead
+# RUN yarn 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; \
+  adduser --system --uid 1001 nextjs
+
+COPY --from=builder --link /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --link --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --link --chown=1001:1001 /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME localhost
+
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,34 @@
----
-title: Next Server Example App
-emoji: 🏢
-colorFrom: yellow
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    // (Optional) Export as a standalone site
+    // See https://nextjs.org/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files
+    output: 'standalone', // Feel free to modify/remove this option
+    
+    // Indicate that these packages should not be bundled by webpack
+    experimental: {
+        serverComponentsExternalPackages: ['sharp', 'onnxruntime-node'],
+    },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@xenova/transformers": "^2.4.2",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.12",
+    "next": "13.4.12",
+    "postcss": "8.4.27",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.3"
+  },
+  "overrides": {
+    "protobufjs": "^7.2.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/classify/pipeline.js

@@ -0,0 +1,30 @@
+import { pipeline } from "@xenova/transformers";
+
+// Use the Singleton pattern to enable lazy construction of the pipeline.
+// NOTE: We wrap the class in a function to prevent code duplication (see below).
+const P = () => class PipelineSingleton {
+    static task = 'text-classification';
+    static model = 'Xenova/distilbert-base-uncased-finetuned-sst-2-english';
+    static instance = null;
+
+    static async getInstance(progress_callback = null) {
+        if (this.instance === null) {
+            this.instance = pipeline(this.task, this.model, { progress_callback });
+        }
+        return this.instance;
+    }
+}
+
+let PipelineSingleton;
+if (process.env.NODE_ENV !== 'production') {
+    // When running in development mode, attach the pipeline to the
+    // global object so that it's preserved between hot reloads.
+    // For more information, see https://vercel.com/guides/nextjs-prisma-postgres
+    if (!global.PipelineSingleton) {
+        global.PipelineSingleton = P();
+    }
+    PipelineSingleton = global.PipelineSingleton;
+} else {
+    PipelineSingleton = P();
+}
+export default PipelineSingleton;

src/app/classify/route.js

@@ -0,0 +1,22 @@
+// Create a custom request handler for the /classify route.
+// For more information, see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
+
+import { NextResponse } from 'next/server'
+import PipelineSingleton from './pipeline.js';
+
+export async function GET(request) {
+    const text = request.nextUrl.searchParams.get('text');
+    if (!text) {
+        return NextResponse.json({
+            error: 'Missing text parameter',
+        }, { status: 400 });
+    }
+    // Get the classification pipeline. When called for the first time,
+    // this will load the pipeline and cache it for future use.
+    const classifier = await PipelineSingleton.getInstance();
+
+    // Actually perform the classification
+    const result = await classifier(text);
+
+    return NextResponse.json(result);
+}

src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

src/app/layout.js

@@ -0,0 +1,17 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

src/app/page.js

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Home() {
+
+  // Keep track of the classification result and the model loading status.
+  const [result, setResult] = useState(null);
+  const [ready, setReady] = useState(null);
+
+  const classify = async (text) => {
+    if (!text) return;
+    if (ready === null) setReady(false);
+
+    // Make a request to the /classify route on the server.
+    const result = await fetch(`/classify?text=${encodeURIComponent(text)}`);
+
+    // If this is the first time we've made a request, set the ready flag.
+    if (!ready) setReady(true);
+
+    const json = await result.json();
+    setResult(json);
+  };
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-12">
+      <h1 className="text-5xl font-bold mb-2 text-center">Transformers.js</h1>
+      <h2 className="text-2xl mb-4 text-center">Next.js template (server-side)</h2>
+      <input
+        type="text"
+        className="w-full max-w-xs p-2 border border-gray-300 rounded mb-4"
+        placeholder="Enter text here"
+        onInput={e => {
+          classify(e.target.value);
+        }}
+      />
+
+      {ready !== null && (
+        <pre className="bg-gray-100 p-2 rounded">
+          {
+            (!ready || !result) ? 'Loading...' : JSON.stringify(result, null, 2)}
+        </pre>
+      )}
+    </main>
+  )
+}

tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}