complete

app/(index)/SentimentList.tsx

@@ -1,18 +1,16 @@
 'use client'
 import { SentimentDisplay } from "@/components/sentiment-display/SentimentDisplay";
-import { use } from "react";
+import { ClassifyOutputElement } from "@/util/classify";
 
 export interface ISentimentList {
-  dataPromise: Promise<unknown>;
+  out?: ClassifyOutputElement[];
 }
 
-export function SentimentList({ dataPromise }: ISentimentList) {
-  const out = use(dataPromise);
-
+export function SentimentList({ out }: ISentimentList) {
   return (
     <div className="flex flex-col gap-8 p-12 overflow-y-auto">
       {Array.isArray(out) ?
-        out.map(({ label, score }: { label: string, score: number }) =>
+        out.map(({ label, score }) =>
           <SentimentDisplay key={label} label={label} value={score} />
         ) :
         <p>Begin to write to see results!</p>

app/(index)/SentimentWidget.tsx

@@ -1,30 +1,22 @@
 'use client'
 import { TitleBar } from "@/components/title-bar/TitleBar";
 import { useTextStore } from "./TextStore";
-import { Suspense } from "react";
 import { SentimentList } from "./SentimentList";
 import { Fallback } from "@/components/fallback/Fallback";
 import Link from "next/link";
-
-async function getData(text: string) {
-  const raw = await fetch('/api/classify', {
-    method: 'POST',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      text,
-    })
-  });
-
-  return raw.json();
-
-}
+import { classify } from "@/util/classify";
+import { useQuery } from "@tanstack/react-query";
 
 export function SentimentWidget() {
   const { text } = useTextStore();
 
+  const { isPending, data: out } = useQuery({
+    queryKey: ['text', text],
+    queryFn: () =>
+      classify(text),
+  })
+
+
   return (
     <section className="w-full max-w-2xl h-full flex flex-col">
       <TitleBar label="Sentiment">
@@ -36,9 +28,8 @@ export function SentimentWidget() {
           How?
         </Link>
       </TitleBar>
-      <Suspense fallback={<Fallback />}>
-        <SentimentList dataPromise={getData(text)} />
-      </Suspense>
+      {isPending ? <Fallback /> : <SentimentList out={out} />}
+
     </section>
 
   )

app/(index)/TextWidget.tsx

@@ -22,7 +22,7 @@ export function TextWidget() {
       <textarea
         onInput={(e) => debounced(e.currentTarget.value)}
         defaultValue={text}
-        className="w-full h-full outline-none p-12 text-lg"
+        className="w-full min-h-52 md:min-h-0 h-full outline-none p-12 text-lg"
         placeholder="Begin writing..."
       />
     </section>

app/(index)/page.tsx

@@ -1,11 +1,20 @@
+'use client'
 import { SentimentWidget } from "./SentimentWidget";
 import { TextWidget } from "./TextWidget";
+import {
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+
+const queryClient = new QueryClient();
 
 export default function Home() {
   return (
-    <div className="flex h-screen divide-x divide-zinc-200">
-      <TextWidget />
-      <SentimentWidget />
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <div className="flex flex-col md:flex-row h-screen divide-x divide-zinc-200">
+        <TextWidget />
+        <SentimentWidget />
+      </div>
+    </QueryClientProvider>
   );
 }

app/api/classify/route.ts

@@ -10,7 +10,9 @@ export async function POST(request: NextRequest) {
   }
   const classifier = await PipelineSingleton.getInstance();
 
+  //@ts-expect-error That's the library
   const result = await classifier(text, { top_k: null });
 
+
   return NextResponse.json(result);
 }

components/title-bar/TitleBar.tsx

@@ -7,7 +7,10 @@ export interface ITitleBar extends React.ComponentPropsWithoutRef<'div'> {
 
 export function TitleBar({ label, children, className, ...rest }: ITitleBar) {
   return (
-    <div className={cn("p-12 flex items-center justify-between border-b border-b-zinc-200", className)} {...rest}>
+    <div
+      className={cn("p-12 flex items-center justify-between border-y md:border-t-0 bg-zinc-50 md:bg-white border-zinc-200", className)}
+      {...rest}
+    >
       <p className="font-medium text-xl">{label}</p>
       {children}
     </div >

next.config.ts

@@ -1,8 +1,24 @@
 import type { NextConfig } from "next";
 
+import path from "path";
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const nextConfig: NextConfig = {
   /* config options here */
   serverExternalPackages: ['sharp', 'onnxruntime-node'],
+  webpack: (config) => {
+    config.resolve.alias['@huggingface/transformers'] = path.resolve(__dirname, 'node_modules/@huggingface/transformers');
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "sharp$": false,
+      "onnxruntime-node$": false,
+    }
+    return config;
+  },
+
 };
 
 export default nextConfig;

package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@huggingface/transformers": "^3.2.4",
+    "@tanstack/react-query": "^5.62.15",
     "clsx": "^2.1.1",
     "copy-webpack-plugin": "^12.0.2",
     "next": "15.1.3",
     "node-polyfill-webpack-plugin": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "swr": "^2.3.0",
     "use-debounce": "^10.0.4",
     "words-count": "^2.0.2",
     "zustand": "^5.0.2"

pipeline.ts

@@ -21,9 +21,12 @@ 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
+  //@ts-expect-error I don't know how to define globalThis
   if (!global.PipelineSingleton) {
+    //@ts-expect-error I don't know how to define globalThis
     global.PipelineSingleton = P();
   }
+  //@ts-expect-error I don't know how to define globalThis
   PipelineSingleton = global.PipelineSingleton;
 } else {
   PipelineSingleton = P();

util/classify.ts

@@ -0,0 +1,15 @@
+'use server'
+import PipelineSingleton from '@/pipeline';
+
+export interface ClassifyOutputElement {
+  label: string;
+  score: number;
+}
+
+export async function classify(text: string) {
+  const classifier = await PipelineSingleton.getInstance();
+
+  //@ts-expect-error That's the library
+  const out = await classifier(text, { top_k: null });
+  return out as ClassifyOutputElement[]
+}

yarn.lock

@@ -444,6 +444,18 @@
   dependencies:
     tslib "^2.8.0"
 
+"@tanstack/query-core@5.62.15":
+  version "5.62.15"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.62.15.tgz#ded0267ac31bd23f3c45ffc008dba85a25621e91"
+  integrity sha512-wT20X14CxcWY8YLJ/1pnsXn/y1Q2uRJZYWW93PWRtZt+3/JlGZyiyTcO4pGnqycnP7CokCROAyatsraosqZsDA==
+
+"@tanstack/react-query@^5.62.15":
+  version "5.62.15"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.62.15.tgz#ecfe7187913e36c36630afedf4f8eff37247c400"
+  integrity sha512-Ny3xxsOWmEQCFyHiV3CF7t6+QAV+LpBEREiXyllKR4+tStyd8smOAa98ZHmEx0ZNy36M31K8enifB5wTSYAKJw==
+  dependencies:
+    "@tanstack/query-core" "5.62.15"
+
 "@types/estree@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
@@ -1231,11 +1243,6 @@ define-properties@^1.1.3, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-dequal@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
-  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
-
 des.js@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.1.0.tgz#1d37f5766f3bbff4ee9638e871a8768c173b81da"
@@ -3562,14 +3569,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swr@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-2.3.0.tgz#66fa45023efd4199f4e7ce608c255709a135943d"
-  integrity sha512-NyZ76wA4yElZWBHzSgEJc28a0u6QZvhb6w0azeL2k7+Q1gAzVK+IqQYXhVOC/mzi+HZIozrZvBVeSeOZNR2bqA==
-  dependencies:
-    dequal "^2.0.3"
-    use-sync-external-store "^1.4.0"
-
 tailwindcss@^3.4.1:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
@@ -3780,11 +3779,6 @@ use-debounce@^10.0.4:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.4.tgz#2135be498ad855416c4495cfd8e0e130bd33bb24"
   integrity sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==
 
-use-sync-external-store@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
-  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"