Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,170 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.4.1';
-
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+import { pipeline } from '@huggingface/transformers';
+
+// Global variables
+let transcriber = null;
+let audioData = null;
+let mediaRecorder = null;
+let audioChunks = [];
+let isModelLoading = true;
+
+// DOM Elements
+const audioInput = document.getElementById('audioInput');
+const recordBtn = document.getElementById('recordBtn');
+const stopBtn = document.getElementById('stopBtn');
+const useTimestamps = document.getElementById('useTimestamps');
+const useWordTimestamps = document.getElementById('useWordTimestamps');
+const transcribeBtn = document.getElementById('transcribeBtn');
+const audioPlayer = document.getElementById('audioPlayer');
+const audioPlayerContainer = document.querySelector('.audio-player');
+const resultDiv = document.getElementById('result');
+const loadingSpinner = document.getElementById('loading');
+
+// Load the model on startup
+async function loadModel() {
+  try {
+    loadingSpinner.hidden = false;
+    transcriber = await pipeline(
+      'automatic-speech-recognition',
+      'Xenova/whisper-tiny.en'
+    );
+    isModelLoading = false;
+    loadingSpinner.hidden = true;
+    transcribeBtn.disabled = false;
+    console.log('Model loaded successfully');
+  } catch (error) {
+    console.error('Failed to load model:', error);
+    resultDiv.innerHTML = `<p class="error">❌ Failed to load model. Check console for details.</p>`;
+    loadingSpinner.hidden = true;
+  }
+}
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+// Handle file upload
+audioInput.addEventListener('change', (event) => {
+  const file = event.target.files[0];
+  if (!file) return;
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
+  const objectUrl = URL.createObjectURL(file);
+  audioData = objectUrl;
+  setAudioSource(objectUrl);
 });
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
+// Setup recording
+recordBtn.addEventListener('click', async () => {
+  audioChunks = [];
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaRecorder = new MediaRecorder(stream);
 
-    const reader = new FileReader();
+    mediaRecorder.addEventListener('dataavailable', (event) => {
+      audioChunks.push(event.data);
+    });
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+    mediaRecorder.addEventListener('stop', () => {
+      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+      const audioUrl = URL.createObjectURL(audioBlob);
+      audioData = audioUrl;
+      setAudioSource(audioUrl);
+    });
 
-    reader.readAsDataURL(file);
+    mediaRecorder.start();
+    recordBtn.disabled = true;
+    stopBtn.disabled = false;
+  } catch (err) {
+    resultDiv.innerHTML = `<p class="error">❌ Error accessing microphone: ${err.message}</p>`;
+  }
 });
 
+stopBtn.addEventListener('click', () => {
+  mediaRecorder.stop();
+  recordBtn.disabled = false;
+  stopBtn.disabled = true;
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+  // Stop all audio tracks
+  mediaRecorder.stream.getTracks().forEach(track => track.stop());
+});
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
+// Toggle timestamp options
+useTimestamps.addEventListener('change', () => {
+  useWordTimestamps.disabled = !useTimestamps.checked;
+});
 
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
+// Set audio player source
+function setAudioSource(src) {
+  audioPlayer.src = src;
+  audioPlayerContainer.hidden = false;
+  transcribeBtn.disabled = false;
 }
+
+// Transcribe audio
+transcribeBtn.addEventListener('click', async () => {
+  if (!transcriber || isModelLoading || !audioData) return;
+
+  resultDiv.innerHTML = '';
+  loadingSpinner.hidden = false;
+
+  try {
+    const options = {};
+    if (useTimestamps.checked) {
+      options.return_timestamps = useWordTimestamps.checked ? 'word' : true;
+    }
+
+    const output = await transcriber(audioData, options);
+
+    // Display result
+    if (options.return_timestamps === 'word') {
+      resultDiv.innerHTML = `
+        <h2>Transcription (Word-level timestamps):</h2>
+        <p><strong>Text:</strong> ${output.text}</p>
+        <h3>Words:</h3>
+        <ul>
+          ${output.chunks
+            .map(
+              (chunk) =>
+                `<li><strong>[${chunk.timestamp[0].toFixed(
+                  2
+                )}s - ${chunk.timestamp[1].toFixed(
+                  2
+                )}s]</strong>: ${chunk.text.trim()}`
+            )
+            .join('')}
+        </ul>
+      `;
+    } else if (options.return_timestamps === true) {
+      resultDiv.innerHTML = `
+        <h2>Transcription (Segment-level timestamps):</h2>
+        <p><strong>Text:</strong> ${output.text}</p>
+        <h3>Segments:</h3>
+        <ul>
+          ${output.chunks
+            .map(
+              (chunk) =>
+                `<li><strong>[${chunk.timestamp[0]}s - ${
+                  chunk.timestamp[1]
+                }s]</strong>: ${chunk.text.trim()}`
+            )
+            .join('')}
+        </ul>
+      `;
+    } else {
+      resultDiv.innerHTML = `
+        <h2>Transcription:</h2>
+        <p>${output.text}</p>
+      `;
+    }
+  } catch (error) {
+    resultDiv.innerHTML = `<p class="error">❌ Transcription failed: ${error.message}</p>`;
+    console.error(error);
+  } finally {
+    loadingSpinner.hidden = true;
+  }
+});
+
+// Preload example audio on page load
+window.addEventListener('DOMContentLoaded', () => {
+  // Default example audio (optional, can be removed if only file/upload)
+  const defaultAudioUrl =
+    'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav';
+  audioData = defaultAudioUrl;
+  setAudioSource(defaultAudioUrl);
+  loadModel(); // Start model loading when app starts
+});