Add Transformers.js API route for text classification

Author: xenova

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

@@ -1,17 +1,28 @@
 import Image from "next/image";
+import Classifier from "./classifier";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-8 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
+        <div className="flex items-center">
+          <Image
+            src="/hf-logo.svg"
+            alt="Hugging Face logo"
+            width={50}
+            height={50}
+            priority
+          />
+          <span className="text-4xl font-light mx-5">&#xd7;</span>
+          <Image
+            className="dark:invert"
+            src="/next.svg"
+            alt="Next.js logo"
+            width={180}
+            height={38}
+            priority
+          />
+        </div>
         <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
           <li className="mb-2">
             Get started by editing{" "}
@@ -20,54 +31,56 @@ export default function Home() {
             </code>
             .
           </li>
+          <li className="mb-2">
+            Update Transformers.js code in{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+              app/api/classify/route.js
+            </code>
+            .
+          </li>
           <li>Save and see your changes instantly.</li>
         </ol>
 
         <div className="flex gap-4 items-center flex-col sm:flex-row">
           <a
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            href="https://github.com/huggingface/transformers.js-examples/tree/main/next-server"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
+            Source code
           </a>
+
           <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="https://huggingface.co/docs/transformers.js/index"
             target="_blank"
             rel="noopener noreferrer"
           >
             Read our docs
           </a>
         </div>
+        <Classifier />
       </main>
       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
         <a
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          href="https://github.com/huggingface/transformers.js"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             aria-hidden
-            src="/file.svg"
-            alt="File icon"
+            src="/github.svg"
+            alt="GitHub icon"
             width={16}
             height={16}
           />
-          Learn
+          Transformers.js
         </a>
         <a
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          href="https://github.com/huggingface/transformers.js-examples"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -82,7 +95,7 @@ export default function Home() {
         </a>
         <a
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          href="https://hf.co"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -93,7 +106,7 @@ export default function Home() {
             width={16}
             height={16}
           />
-          Go to nextjs.org →
+          Go to hf.co →
         </a>
       </footer>
     </div>

next-server/app/page.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  // https://nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages
+  serverExternalPackages: ["@huggingface/transformers"],
+};
 
 export default nextConfig;