Upload 29 files

.gitignore

@@ -0,0 +1,41 @@
+# 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*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,11 +1,36 @@
----
-title: Transformers.js Playground
-emoji: 🚀
-colorFrom: yellow
-colorTo: indigo
-sdk: docker
-pinned: false
-short_description: Run AI Models in Browser locally.
----
-
-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://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun 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.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## 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/app/building-your-application/deploying) for more details.

app/components/ASRResultDisplay.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from "react";
+
+interface ASRResultDisplayProps {
+  result: any;
+  ready: boolean | null;
+  task: string;
+}
+
+export const ASRResultDisplay = ({ result, ready }: ASRResultDisplayProps) => {
+  
+  if (ready === false) {
+    return <div className="text-gray-400">Loading model...</div>;
+  }
+  if (!result) {
+    return <div className="text-gray-400">No transcription yet.</div>;
+  }
+  if (result.error) {
+    return <div className="text-red-500">Error: {result.error}</div>;
+  }
+  return (
+    <div className="w-full text-lg text-gray-800 break-words">
+      <span className="font-semibold">Transcript:</span>
+      <div className="mt-2 bg-gray-100 p-3 rounded-lg">
+        
+        {result.text || "No text found."}
+      </div>
+    </div>
+  );
+};

app/components/AudioInput.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+// AudioInput.tsx
+import React, { useRef, useState } from "react";
+import { readAudio } from './audioUtils'; // Import the updated utility
+
+interface AudioInputProps {
+  input: Blob | null;
+  setInput: (v: Blob | null) => void;
+  classify: (input: Float32Array) => void; // Still needs Float32Array
+  ready: boolean | null;
+}
+
+export const AudioInput = ({ input, setInput, classify, ready }: AudioInputProps) => {
+  const [recording, setRecording] = useState(false);
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunks = useRef<Blob[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (e.dataTransfer.files.length > 0) {
+      const file = e.dataTransfer.files[0];
+      if (file.type.startsWith("audio/")) {
+        setInput(file);
+        // Revoke previous URL to free memory
+        if (audioUrl) URL.revokeObjectURL(audioUrl);
+        setAudioUrl(URL.createObjectURL(file));
+        try {
+            const audioData = await readAudio(file); // Now decodes AND resamples to Float32Array PCM
+            classify(audioData);
+        } catch (error) {
+             console.error("Error reading or processing audio file:", error);
+             // Handle error, e.g., show a message to the user
+        }
+      }
+    }
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0];
+      if (file.type.startsWith("audio/")) {
+        setInput(file);
+         // Revoke previous URL to free memory
+        if (audioUrl) URL.revokeObjectURL(audioUrl);
+        setAudioUrl(URL.createObjectURL(file));
+        try {
+            const audioData = await readAudio(file); // Now decodes AND resamples to Float32Array PCM
+            classify(audioData);
+        } catch (error) {
+            console.error("Error reading or processing audio file:", error);
+            // Handle error
+        }
+      }
+    }
+  };
+
+  const startRecording = async () => {
+    try {
+        setRecording(true);
+        chunks.current = [];
+        // Ensure audioUrl is cleared for new recording
+         if (audioUrl) URL.revokeObjectURL(audioUrl);
+         setAudioUrl(null);
+         setInput(null); // Clear previous input blob
+
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mediaRecorder = new window.MediaRecorder(stream);
+        mediaRecorderRef.current = mediaRecorder;
+
+        mediaRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) {
+            chunks.current.push(e.data);
+          }
+        };
+
+        mediaRecorder.onstop = async () => {
+          const blob = new Blob(chunks.current, { type: "audio/webm" }); // MediaRecorder outputs a Blob
+          setInput(blob); // Set the Blob input if needed elsewhere
+           // Revoke previous URL
+          if (audioUrl) URL.revokeObjectURL(audioUrl);
+          setAudioUrl(URL.createObjectURL(blob)); // Create URL for playback
+
+          try {
+            const audioData = await readAudio(blob); // Decode AND resample Blob to Float32Array PCM
+            classify(audioData); // Pass the Float32Array PCM data
+          } catch (error) {
+             console.error("Error reading or processing recorded audio:", error);
+             // Handle error
+          } finally {
+             // Always stop tracks after recording stops
+             stream.getTracks().forEach(track => track.stop());
+          }
+        };
+
+        mediaRecorder.start();
+    } catch (error) {
+        console.error("Error starting recording:", error);
+        setRecording(false); // Ensure recording state is reset on error
+        // Handle error, e.g., show a message to the user that mic access failed
+    }
+  };
+
+  const stopRecording = async () => {
+     if (!mediaRecorderRef.current) return;
+     // The actual classification and setting of input/audioUrl happens in mediaRecorder.onstop
+     mediaRecorderRef.current.stop();
+     setRecording(false); // Set recording state to false immediately
+  };
+
+  // Added error handling and URL cleanup
+  React.useEffect(() => {
+      // Cleanup object URLs when component unmounts or audioUrl changes
+      return () => {
+          if (audioUrl) URL.revokeObjectURL(audioUrl);
+      };
+  }, [audioUrl]);
+
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <label className="block text-gray-600 mb-2 text-sm font-medium">Upload or record audio</label>
+      <div
+        className={`flex-1 flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 bg-gray-50 transition
+          ${ready === false ? 'border-gray-200 text-gray-400 cursor-not-allowed' : 'border-gray-300 cursor-pointer hover:border-blue-400'}
+        `}
+        onDrop={handleDrop}
+        onDragOver={e => e.preventDefault()}
+        onClick={() => ready !== false && fileInputRef.current?.click()} // Prevent click if not ready
+        style={{ minHeight: 120 }}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="audio/*"
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+          disabled={ready === false}
+        />
+        <span className="text-gray-500 text-center">
+           { ready === false ? "Loading models..." : "Drag & drop audio file here or click to select" }
+        </span>
+      </div>
+      <div className="flex items-center gap-4">
+        {!recording ? (
+          <button
+            className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            onClick={startRecording}
+            disabled={ready === false} // Disable record button if not ready
+          >
+            Record
+          </button>
+        ) : (
+          <button
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
+            onClick={stopRecording}
+          >
+            Stop
+          </button>
+        )}
+        {/* Only show audio player if not recording and audioUrl exists */}
+        {!recording && audioUrl && (
+          <audio controls src={audioUrl} className="ml-4 flex-1">
+            Your browser does not support the audio element.
+          </audio>
+        )}
+         {ready === false && <span className="text-gray-600 ml-auto">Loading...</span>} {/* Optional loading indicator */}
+      </div>
+    </div>
+  );
+};

app/components/ClassificationResultDisplay.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+// Color palette for labels
+const LABEL_COLORS = [
+  ['bg-green-100 text-green-800', 'bg-green-400'],
+  ['bg-blue-100 text-blue-800', 'bg-blue-400'],
+  ['bg-purple-100 text-purple-800', 'bg-purple-400'],
+  ['bg-yellow-100 text-yellow-800', 'bg-yellow-400'],
+  ['bg-pink-100 text-pink-800', 'bg-pink-400'],
+  ['bg-indigo-100 text-indigo-800', 'bg-indigo-400'],
+  ["bg-red-100 text-red-800", "bg-red-400"],
+  ["bg-teal-100 text-teal-800", "bg-teal-400"],
+  ["bg-orange-100 text-orange-800", "bg-orange-400"],
+];
+
+// Deterministically assign a color to each label
+const labelColorMap: Record<string, number> = {};
+let colorIndex = 0;
+function getColorForLabel(label: string): string[] {
+  if (!(label in labelColorMap)) {
+    labelColorMap[label] = colorIndex % LABEL_COLORS.length;
+    colorIndex++;
+  }
+  return LABEL_COLORS[labelColorMap[label]];
+}
+
+export function ClassificationResultDisplay({
+  result,
+  ready,
+  task,
+}: {
+  result: any;
+  ready: boolean | null;
+  task: string;
+  // getColorForLabel: (label: string) => string[];
+}) {
+  if (ready === null) {
+    return null;
+  }
+  if (!ready || !result) {
+    return (
+      <div className="text-center text-gray-400 animate-pulse">
+        Results will appear here
+      </div>
+    );
+  }
+
+  if (task === 'image-classification') {
+    return (
+      <div className="space-y-6 w-full">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-gray-800 mb-2">
+            {result[0].label}
+          </h2>
+          <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
+            <div
+              className={`h-3 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(result[0].label)[1]}`}
+              style={{ width: `${result[0].score * 100}%` }}
+            />
+          </div>
+          <div className="text-sm text-gray-500">
+            Confidence: {(result[0].score * 100).toFixed(2)}%
+          </div>
+        </div>
+        <div className="border-t border-gray-200 my-4"></div>
+        <div className="space-y-3">
+          {result.slice(1).map((item: any) => (
+            <div key={item.label} className="space-y-1">
+              <div className="flex justify-between items-center">
+                <span className="text-gray-700 text-sm">{item.label}</span>
+                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getColorForLabel(item.label)[0]}`}>
+                  {(item.score * 100).toFixed(2)}%
+                </span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2">
+                <div
+                  className={`h-2 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(item.label)[1]}`}
+                  style={{ width: `${item.score * 100}%` }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Default: text-classification
+  return (
+    <div className="space-y-6 w-full">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-800 mb-2">
+          {result[0].label}
+        </h2>
+        <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
+          <div
+            className={`h-3 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(result[0].label)[1]}`}
+            style={{ width: `${result[0].score * 100}%` }}
+          />
+        </div>
+        <div className="text-sm text-gray-500">
+          Confidence: {(result[0].score * 100).toFixed(2)}%
+        </div>
+      </div>
+      <div className="border-t border-gray-200 my-4"></div>
+      <div className="space-y-3">
+        {result.slice(1).map((item: any) => (
+          <div key={item.label} className="space-y-1">
+            <div className="flex justify-between items-center">
+              <span className="text-gray-700 text-sm">{item.label}</span>
+              <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getColorForLabel(item.label)[0]}`}>
+                {(item.score * 100).toFixed(2)}%
+              </span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-2">
+              <div
+                className={`h-2 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(item.label)[1]}`}
+                style={{ width: `${item.score * 100}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/components/ImageInput.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React, { useRef, useState } from "react";
+import { FiTrash2 } from "react-icons/fi"; // Use trash bin icon
+
+interface ImageInputProps {
+  image: File | null;
+  setImage: (f: File | null) => void;
+  classify: (input: string | Blob) => void;
+  ready: boolean | null;
+}
+
+export const ImageInput = ({ image, setImage, classify, ready }: ImageInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = useState(false); // NEW: Track drag-over state
+
+  const handleFile = (file: File) => {
+    setImage(file);
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      classify(ev.target?.result as string);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  // NEW: Handle delete image
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setImage(null);
+  };
+
+  return (
+    <div
+      className={`flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-8 min-h-[220px] transition-all duration-300 cursor-pointer bg-gray-50 relative
+        ${ready === false ? 'opacity-50 pointer-events-none' : ''}
+        ${dragOver ? 'border-blue-600 bg-blue-50 scale-105 shadow-lg' : 'hover:border-blue-400'}`}
+      tabIndex={0}
+      onClick={() => inputRef.current?.click()}
+      onDrop={e => {
+        e.preventDefault();
+        setDragOver(false);
+        if (e.dataTransfer.files.length > 0 && e.dataTransfer.files[0].type.startsWith('image/')) {
+          handleFile(e.dataTransfer.files[0]);
+        }
+      }}
+      onDragOver={e => {
+        e.preventDefault();
+        setDragOver(true);
+      }}
+      onDragLeave={() => setDragOver(false)}
+    >
+      {image ? (
+        <div className="relative w-full flex flex-col items-center">
+          {/* Delete button at top-right of image container */}
+          <button
+            onClick={handleDelete}
+            className="absolute -top-3 -right-3 z-10 bg-white border border-gray-200 hover:bg-red-500 hover:text-white text-gray-700 rounded-full p-1 shadow transition-colors w-7 h-7 flex items-center justify-center"
+            aria-label="Remove image"
+            tabIndex={0}
+            type="button"
+          >
+            <FiTrash2 size={16} className="text-red-500 overflow-visible" />
+          </button>
+          <img
+            src={URL.createObjectURL(image)}
+            alt="Uploaded"
+            className="mx-auto max-h-48 rounded-lg shadow-md mb-4 animate-fade-in"
+          />
+        </div>
+      ) : (
+        <span className={`text-lg ${dragOver ? 'text-blue-600 animate-pulse' : 'text-gray-400 animate-pulse'}`}>
+          Drop image here, or click to select
+        </span>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        style={{ display: 'none' }}
+        onChange={e => {
+          if (e.target.files && e.target.files[0]) {
+            handleFile(e.target.files[0]);
+          }
+        }}
+      />
+    </div>
+  );
+};

app/components/ModelInput.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+interface ModelInputProps {
+  currentModel: string;
+  onModelChange: (modelName: string) => void;
+  onLoadModel: () => void;
+  ready: boolean | null;
+  defaultModel: string;
+}
+
+export const ModelInput = ({
+  currentModel,
+  onModelChange,
+  onLoadModel,
+  ready,
+  defaultModel,
+}: ModelInputProps) => {
+  return (
+    <div className="mb-8 flex flex-col md:flex-row items-center gap-4">
+      <input
+        type="text"
+        className="flex-1 p-3 rounded-lg border border-gray-300"
+        value={currentModel}
+        onChange={(e) => onModelChange(e.target.value)}
+        placeholder={`Enter model name (e.g. ${defaultModel})`}
+      />
+      <button
+        className="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition"
+        onClick={onLoadModel}
+        disabled={ready === false}
+      >
+        Load Model
+      </button>
+    </div>
+  );
+};

app/components/Progress.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+interface ProgressProps {
+  text?: string;
+  percentage?: number;
+  loaded?: number;
+  total?: number;
+  done?: boolean;
+}
+
+// Helper to format bytes to KB/MB/GB
+function formatBytes(bytes?: number): string {
+  if (bytes === undefined || bytes === null) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+export default function Progress({ text, percentage, loaded, total, done }: ProgressProps) {
+  // Ensure percentage is always a number between 0 and 100
+  // percentage = Math.min(100, Math.max(0, 
+  //   percentage ?? (loaded && total ? (loaded / total) * 100 : 0)
+  // ));
+
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      {text && (
+        <div className="flex justify-between text-sm text-gray-600 mb-1 items-center">
+          <span className="truncate max-w-[70%]">{text}</span>
+          {done ? (
+            <span className="flex items-center text-green-600 font-semibold whitespace-nowrap">
+              <svg className="w-5 h-5 mr-1 text-green-500" fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Download completed
+            </span>
+          ) : (
+            <span className="whitespace-nowrap">
+              {loaded !== undefined && total !== undefined && percentage !== undefined && total > 0
+                ? `${formatBytes(loaded)} / ${formatBytes(total)} (${percentage.toFixed(1)}%)`
+                : `${percentage}%`}
+            </span>
+          )}
+        </div>
+      )}
+      <div className="w-full bg-gray-200 rounded-full h-3">
+        <div 
+          className={`${done 
+            ? 'bg-green-500' 
+            : 'bg-gradient-to-r from-blue-400 to-blue-600'} h-3 rounded-full transition-all duration-300`}
+          style={{ width: `${percentage}%` }}
+        ></div>
+      </div>
+    </div>
+  );
+}

app/components/TextInput.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from "react";
+
+interface TextInputProps {
+  input: string;
+  setInput: (v: string) => void;
+  classify: (input: string) => void;
+  ready: boolean | null;
+}
+
+export const TextInput = ({ input, setInput, classify, ready }: TextInputProps) => {
+  return (
+    <div className="h-full flex flex-col">
+      <label htmlFor="input-text" className="block text-gray-600 mb-2 text-sm font-medium">
+        Enter your text
+      </label>
+      <textarea
+        id="input-text"
+        className="flex-1 w-full p-4 rounded-lg bg-gray-50 border border-gray-200 text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300 transition-all duration-300 resize-none"
+        placeholder="Type something to analyze sentiment..."
+        value={input}
+        disabled={ready === false}
+        onChange={e => {
+          setInput(e.target.value);
+          if (e.target.value.trim() !== '') {
+            classify(e.target.value);
+          }
+        }}
+      />
+    </div>
+  );
+};

app/components/audioUtils.ts

@@ -0,0 +1,70 @@
+// audioUtils.ts
+const SAMPLE_RATE = 16000; // ASR models typically expect 16kHz audio
+/**
+ * Reads an audio Blob (or File) and converts it to a Float32Array of PCM audio data
+ * at a specified sample rate.
+ * @param file The audio Blob or File.
+ * @returns A Promise resolving with the Float32Array of resampled audio data.
+ */
+export async function readAudio(file: Blob): Promise<Float32Array> {
+  const audioContext = new AudioContext(); // Use a standard AudioContext to decode initially
+  const arrayBuffer = await file.arrayBuffer();
+
+  // Decode the audio data from the ArrayBuffer. This handles various formats (mp3, wav, webm, etc.)
+  // and gives you an AudioBuffer with raw PCM data at the original sample rate.
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  // Check if resampling is needed
+  if (audioBuffer.sampleRate === SAMPLE_RATE) {
+    // If sample rate matches, return the first channel's data directly
+    // Ensure it's mono; if stereo, you might need to mix or pick a channel
+    if (audioBuffer.numberOfChannels > 1) {
+        // Basic mixing or just take the first channel for simplicity
+        // For ASR, mono is usually sufficient and expected by models
+        const monoData = audioBuffer.getChannelData(0);
+         // If needed, mix channels:
+        // const channelData1 = audioBuffer.getChannelData(0);
+        // const channelData2 = audioBuffer.getChannelData(1);
+        // const monoData = new Float32Array(channelData1.length);
+        // for (let i = 0; i < monoData.length; i++) {
+        //     monoData[i] = (channelData1[i] + channelData2[i]) / 2;
+        // }
+        return monoData;
+    } else {
+       return audioBuffer.getChannelData(0); // Already mono
+    }
+
+  } else {
+    // Resampling is needed
+    const targetSampleRate = SAMPLE_RATE;
+    const numberOfChannels = 1; // ASR models typically expect mono input
+
+    // Calculate the length of the resampled buffer
+    const duration = audioBuffer.duration;
+    const resampledLength = Math.ceil(duration * targetSampleRate);
+
+    // Create an OfflineAudioContext for resampling
+    // This context renders audio offline and allows changing the sample rate
+    const offlineAudioContext = new OfflineAudioContext(
+      numberOfChannels,
+      resampledLength,
+      targetSampleRate
+    );
+
+    // Create a buffer source node from the original AudioBuffer
+    const source = offlineAudioContext.createBufferSource();
+    source.buffer = audioBuffer;
+
+    // Connect the source to the offline context's destination
+    source.connect(offlineAudioContext.destination);
+
+    // Start the source (playback in the offline context)
+    source.start(0);
+
+    // Render the audio. This performs the resampling.
+    const resampledBuffer = await offlineAudioContext.startRendering();
+
+    // Return the resampled audio data from the first channel
+    return resampledBuffer.getChannelData(0);
+  }
+}

app/components/modelConfig.ts

@@ -0,0 +1,29 @@
+export interface ModelConfig {
+  inputComponent: React.ComponentType<any>;
+  outputComponent: React.ComponentType<any>;
+  defaultModel: string;
+}
+
+import { TextInput } from "@/app/components/TextInput";
+import { ImageInput } from "@/app/components/ImageInput";
+import { ClassificationResultDisplay } from "@/app/components/ClassificationResultDisplay";
+import { AudioInput } from "@/app/components/AudioInput";
+import { ASRResultDisplay } from "@/app/components/ASRResultDisplay";
+
+export const modelConfigMap: Record<string, ModelConfig> = {
+  "text-classification": {
+    inputComponent: TextInput,
+    outputComponent: ClassificationResultDisplay,
+    defaultModel: "onnx-community/rubert-tiny-sentiment-balanced-ONNX"
+  },
+  "image-classification": {
+    inputComponent: ImageInput,
+    outputComponent: ClassificationResultDisplay,
+    defaultModel: "onnx-community/vit-tiny-patch16-224-ONNX"
+  },
+  "automatic-speech-recognition": {
+    inputComponent: AudioInput,
+    outputComponent: ASRResultDisplay,
+    defaultModel: "onnx-community/moonshine-tiny-ONNX"
+  }
+};

app/globals.css

@@ -0,0 +1,110 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+
+  /* Styles from to-do.md (index.css) */
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547; /* Base text color for light mode */
+  background-color: #ffffff; /* Base background for light mode */
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  color: #f9f9f9; /* Base text color for dark mode */
+  background-color: #242424; /* Base background for dark mode */
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  /* Styles from to-do.md (index.css) */
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+/* Styles from to-do.md (index.css & App.css) */
+h1 {
+  font-size: 3.2em;
+  line-height: 1;
+}
+
+h1,
+h2 {
+  margin: 8px;
+}
+
+select {
+  padding: 0.3em;
+  cursor: pointer;
+}
+
+textarea {
+  padding: 0.6em;
+}
+
+button {
+  padding: 0.6em 1.2em;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+button[disabled] {
+  cursor: not-allowed;
+}
+
+select,
+textarea,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-size: 1em;
+  font-family: inherit; /* Use inherit to respect the :root font-family */
+  background-color: #f9f9f9; /* Light mode background for elements */
+  color: #213547; /* Light mode text color for elements */
+  transition: border-color 0.25s;
+}
+
+.dark select,
+.dark textarea,
+.dark button {
+  background-color: #1a1a1a; /* Dark mode background for elements */
+  color: #f9f9f9; /* Dark mode text color for elements */
+}
+
+
+select:hover,
+textarea:hover,
+button:not([disabled]):hover {
+  border-color: #646cff;
+}
+
+select:focus,
+select:focus-visible,
+textarea:focus,
+textarea:focus-visible,
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+/* Keep Tailwind theme inline if needed, though base styles might override */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}

app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased flex min-h-screen justify-center items-center`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import Progress from './components/Progress';
+import { modelConfigMap } from './components/modelConfig';
+import { ModelInput } from './components/ModelInput';
+
+export default function Home() {
+  const [result, setResult] = useState<any | null>(null);
+  const [ready, setReady] = useState<boolean | null>(null);
+  const [progressItems, setProgressItems] = useState<any[]>([]);
+  const [input, setInput] = useState('');
+  const [task, setTask] = useState('text-classification');
+  const [modelName, setModelName] = useState(() => modelConfigMap['text-classification'].defaultModel);
+  const [currentModel, setCurrentModel] = useState(modelName);
+  const worker = useRef<Worker | null>(null);
+  const [image, setImage] = useState<File | null>(null);
+
+  // Update modelName and currentModel when task changes
+  useEffect(() => {
+    const defaultModel = modelConfigMap[task].defaultModel;
+    setModelName(defaultModel);
+    setCurrentModel(defaultModel);
+  }, [task]);
+  
+  useEffect(() => {
+    if (!worker.current) {
+      worker.current = new Worker(new URL('./worker.js', import.meta.url), {
+        type: 'module'
+      });
+    }
+    const onMessageReceived = (e: MessageEvent) => {
+      switch (e.data.status) {
+        case 'initiate':
+          setReady(false);
+          setProgressItems(prev => [...prev, { ...e.data, progress: 0 }]);
+          break;
+        case 'progress':
+          setProgressItems(prev => prev.map(item => {
+            if (item.file === e.data.file) {
+              return {
+                ...item,
+                progress: e.data.progress,
+                loaded: e.data.loaded,
+                total: e.data.total,
+                name: e.data.name
+              };
+            }
+            return item;
+          }));
+          break;
+        case 'done':
+          setProgressItems(prev => {
+            const updated = prev.map(item =>
+              item.file === e.data.file ? { ...item, done: true, progress: 100 } : item
+            );
+            setTimeout(() => {
+              setProgressItems(current =>
+                current.filter(item => item.file !== e.data.file)
+              );
+            }, 1000);
+            return updated;
+          });
+          break;
+        case 'ready':
+          setReady(true);
+          setCurrentModel(e.data.file || modelName);
+          setProgressItems(prev => prev.filter(item => item.file !== e.data.file));
+          break;
+        case 'complete':
+          setResult(e.data.output);
+          break;
+        case 'error':
+          setResult({ label: 'Error', score: 0, error: e.data.error });
+          break;
+      }
+    };
+
+    worker.current.addEventListener('message', onMessageReceived);
+    return () => worker.current?.removeEventListener('message', onMessageReceived);
+  }, [modelName]);
+
+  const classify = useCallback((inputValue: string | Blob) => {
+    if (worker.current) {
+      worker.current.postMessage({
+        input: inputValue,
+        modelName: currentModel,
+        task,
+      });
+    }
+  }, [currentModel, task]);
+
+  const handleLoadModel = () => {
+    setReady(false);
+    setResult(null);
+    setProgressItems([]);
+    setCurrentModel(modelName);
+    if (worker.current) {
+      worker.current.postMessage({ action: 'load-model', modelName, task });
+    }
+  };
+
+  useEffect(() => {
+    setResult(null);
+    setInput('');
+    setImage(null);
+    setModelName(modelConfigMap[task].defaultModel);
+  }, [task]);
+
+  const InputComponent = modelConfigMap[task].inputComponent;
+  const OutputComponent = modelConfigMap[task].outputComponent;
+
+  return (
+    <main className="min-h-screen w-full bg-transparent backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="text-center mb-12 transform transition-all duration-500 ease-in-out">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-2 hover:text-blue-600 transition-colors">
+            Transformers.js Playground
+          </h1>
+          <p className="text-gray-500 text-lg">
+            Powered by Transformers.js & Next.js (Local browser inference)
+          </p>
+        </div>
+        <div className="mb-6 flex justify-center">
+          <select
+            value={task}
+            onChange={e => setTask(e.target.value)}
+            className="p-2 rounded border border-gray-300 text-lg font-medium shadow-sm transition"
+          >
+            <option value="text-classification">Text Classification</option>
+            <option value="image-classification">Image Classification</option>
+            <option value="automatic-speech-recognition">Automatic Speech Recognition</option>
+          </select>
+        </div>
+        <ModelInput
+          currentModel={modelName}
+          onModelChange={setModelName}
+          onLoadModel={handleLoadModel}
+          ready={ready}
+          defaultModel={modelConfigMap[task].defaultModel} // Add defaultModel her
+
+        />
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 transition-all duration-300 hover:shadow-md">
+            <InputComponent
+              input={input}
+              setInput={setInput}
+              classify={classify}
+              ready={ready}
+              image={image}
+              setImage={setImage}
+            />
+          </div>
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 transition-all duration-300 hover:shadow-md flex flex-col">
+            <h3 className="text-gray-600 mb-4 text-sm font-medium">Result</h3>
+            <div className="flex-1 bg-gray-50 rounded-lg p-4 flex items-center justify-center">
+              <OutputComponent
+                result={result}
+                ready={ready}
+                task={task}
+              />
+            </div>
+          </div>
+        </div>
+
+        {ready === false && (
+          <div className="mt-12 bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-7xl mx-auto">
+            <h3 className="text-gray-600 mb-6 text-xl font-medium">Loading Model</h3>
+            <div className="space-y-6">
+              {progressItems.map((data, i) => (
+                <div key={i} className="transform transition-all duration-300">
+                  <Progress
+                    text={`${data.name || ''} - ${data.file}`}
+                    percentage={data.progress}
+                    loaded={data.loaded}
+                    total={data.total}
+                    done={data.done}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}

app/worker.js

@@ -0,0 +1,131 @@
+import { pipeline, env } from "@huggingface/transformers";
+
+// Skip local model check
+env.allowLocalModels = false;
+
+async function supportsWebGPU() {
+  try {
+    if (!navigator.gpu) return false;
+    await navigator.gpu.requestAdapter();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+const device = (await supportsWebGPU()) ? "webgpu" : "wasm";
+
+class PipelineManager {
+  static defaultConfigs = {
+    "text-classification": {
+      model: "onnx-community/rubert-tiny-sentiment-balanced-ONNX",
+    },
+    "image-classification": {
+      model: "onnx-community/mobilenet_v2_1.0_224",
+    },
+  };
+  static instances = {}; // key: `${task}:${modelName}` -> pipeline instance
+  static currentTask = "text-classification";
+  static currentModel = PipelineManager.defaultConfigs["text-classification"].model;
+  static queue = [];
+  static isProcessing = false;
+
+  static async getInstance(task, modelName, progress_callback = null) {
+    const key = `${task}:${modelName}`;
+    if (!this.instances[key]) {
+      self.postMessage({ status: "initiate", file: modelName, task });
+      this.instances[key] = await pipeline(task, modelName, { progress_callback, device: device});
+      self.postMessage({ status: "ready", file: modelName, task });
+    }
+    return this.instances[key];
+  }
+
+  static async processQueue() {
+    if (this.isProcessing || this.queue.length === 0) return;
+
+    this.isProcessing = true;
+    const { input, task, modelName } = this.queue[this.queue.length - 1];
+    this.queue = [];
+
+    try {
+      const classifier = await this.getInstance(task, modelName, (x) => {
+        self.postMessage({
+          ...x,
+          status: x.status || "progress",
+          file: x.file || modelName,
+          name: modelName,
+          task,
+          loaded: x.loaded,
+          total: x.total,
+          progress: x.loaded && x.total ? (x.loaded / x.total) * 100 : 0,
+        });
+      });
+
+      let output;
+      if (task === "image-classification") {
+        // input is a data URL or Blob
+        output = await classifier(input, { top_k: 5 });
+      } else if (task === "automatic-speech-recognition") {
+        output = await classifier(input);
+      } else {
+        output = await classifier(input, { top_k: 5 });
+      }
+
+      self.postMessage({
+        status: "complete",
+        output,
+        file: modelName,
+        task,
+      });
+    } catch (error) {
+      self.postMessage({
+        status: "error",
+        error: error.message,
+        file: modelName,
+        task,
+      });
+    }
+
+    this.isProcessing = false;
+    if (this.queue.length > 0) {
+      this.processQueue();
+    }
+  }
+}
+
+// Listen for messages from the main thread
+self.addEventListener("message", async (event) => {
+  const { input, modelName, task, action } = event.data;
+
+  // console.log("Worker received message:", event.data); // Add this line to log the received message t
+
+  if (action === "load-model") {
+    PipelineManager.currentTask = task || "text-classification";
+    PipelineManager.currentModel =
+      modelName ||
+      PipelineManager.defaultConfigs[PipelineManager.currentTask].model;
+
+    await PipelineManager.getInstance(
+      PipelineManager.currentTask,
+      PipelineManager.currentModel,
+      (x) => {
+        self.postMessage({
+          ...x,
+          file: PipelineManager.currentModel,
+          status: x.status || "progress",
+          loaded: x.loaded,
+          total: x.total,
+          task: PipelineManager.currentTask,
+        });
+      }
+    );
+    return;
+  }
+
+  PipelineManager.queue.push({
+    input,
+    task: task || PipelineManager.currentTask,
+    modelName: modelName || PipelineManager.currentModel,
+  });
+  PipelineManager.processQueue();
+});

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nextjs-translator",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^3.4.2",
+    "next": "15.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,26 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  darkMode: 'class', // Enable class-based dark mode
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      // Define colors for light and dark modes if needed, or rely on CSS variables
+      colors: {
+        // Example: Define custom colors accessible via `text-primary`, `bg-primary`, etc.
+        // primary: '...', 
+      },
+    },
+  },
+  plugins: [],
+}
+export default config

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}