Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,156 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.6';
-
-// 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';
-
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
+// index.js
+class SupertonicTTS {
+    constructor() {
+        this.tts = null;
+        this.audio = null;
+        this.isGenerating = false;
+        this.device = 'cpu';
+        
+        this.initElements();
+        this.bindEvents();
+        this.checkWebGPUSupport();
     }
 
-    const reader = new FileReader();
+    initElements() {
+        this.textInput = document.getElementById('text-input');
+        this.generateBtn = document.getElementById('generate-btn');
+        this.playBtn = document.getElementById('play-btn');
+        this.stopBtn = document.getElementById('stop-btn');
+        this.deviceSelect = document.getElementById('device-select');
+        this.status = document.getElementById('status');
+        this.audioPlayer = document.getElementById('audio-player');
+        this.downloadSection = document.getElementById('download-section');
+        this.downloadLink = document.getElementById('download-link');
+        this.loadingSpinner = this.generateBtn.querySelector('.loading-spinner');
+        this.btnText = this.generateBtn.querySelector('.btn-text');
+    }
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+    bindEvents() {
+        this.generateBtn.addEventListener('click', () => this.generateSpeech());
+        this.playBtn.addEventListener('click', () => this.playAudio());
+        this.stopBtn.addEventListener('click', () => this.stopAudio());
+        this.deviceSelect.addEventListener('change', (e) => {
+            this.device = e.target.value;
+            this.status.textContent = `Switched to ${this.device.toUpperCase()} mode`;
+        });
+    }
 
-    reader.readAsDataURL(file);
-});
+    async checkWebGPUSupport() {
+        if (!navigator.gpu) {
+            this.deviceSelect.querySelector('option[value="webgpu"]').disabled = true;
+            this.deviceSelect.value = 'cpu';
+            this.device = 'cpu';
+            this.status.textContent = 'WebGPU not supported - using CPU mode';
+        }
+    }
 
+    async initModel() {
+        try {
+            this.setStatus('Loading Supertonic TTS model...', 'loading');
+            
+            const deviceOptions = this.device === 'webgpu' ? { device: 'webgpu' } : {};
+            
+            this.tts = await window.pipeline('text-to-speech', 'onnx-community/Supertonic-TTS-ONNX', {
+                dtype: 'fp32',
+                ...deviceOptions
+            });
+
+            this.setStatus('Model loaded successfully! Ready to generate speech.', 'success');
+            return true;
+        } catch (error) {
+            console.error('Failed to load model:', error);
+            this.setStatus(`Failed to load model: ${error.message}`, 'error');
+            return false;
+        }
+    }
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+    async generateSpeech() {
+        if (this.isGenerating) return;
+
+        const inputText = this.textInput.value.trim();
+        if (!inputText) {
+            this.setStatus('Please enter some text to convert to speech.', 'warning');
+            return;
+        }
+
+        if (!this.tts) {
+            const modelLoaded = await this.initModel();
+            if (!modelLoaded) return;
+        }
+
+        this.isGenerating = true;
+        this.updateGenerateButton(false);
+        this.setStatus('Generating speech... This may take a moment on first run.', 'loading');
+
+        try {
+            // Note: Supertonic TTS typically requires speaker embeddings
+            // For demo, we'll try without or use a placeholder
+            // In production, you'd need to bundle speaker embeddings
+            const audio = await this.tts(inputText, {
+                speaker_embeddings: null // Placeholder - real app would load actual embeddings
+            });
+
+            // Convert to playable audio
+            this.audio = audio;
+            await this.saveAudio(audio);
+            
+            this.setStatus('Speech generated successfully! Click play to listen.', 'success');
+            this.enableAudioControls();
+        } catch (error) {
+            console.error('TTS generation failed:', error);
+            this.setStatus(`Generation failed: ${error.message}`, 'error');
+        } finally {
+            this.isGenerating = false;
+            this.updateGenerateButton(true);
+        }
+    }
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
+    async saveAudio(audio) {
+        try {
+            // Save as WAV blob
+            const wavBlob = await audio.save('speech.wav');
+            this.audioPlayer.src = URL.createObjectURL(wavBlob);
+            
+            // Create download link
+            this.downloadLink.href = URL.createObjectURL(wavBlob);
+            this.downloadSection.style.display = 'block';
+        } catch (error) {
+            console.error('Failed to save audio:', error);
+            this.setStatus('Audio generated but download failed.', 'warning');
+        }
+    }
+
+    playAudio() {
+        this.audioPlayer.play();
+        this.playBtn.disabled = true;
+        this.stopBtn.disabled = false;
+    }
 
-// 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);
+    stopAudio() {
+        this.audioPlayer.pause();
+        this.audioPlayer.currentTime = 0;
+        this.playBtn.disabled = false;
+        this.stopBtn.disabled = true;
+    }
+
+    enableAudioControls() {
+        this.playBtn.disabled = false;
+        this.stopBtn.disabled = true;
+    }
+
+    updateGenerateButton(enabled) {
+        this.generateBtn.disabled = !enabled;
+        this.loadingSpinner.style.display = enabled ? 'none' : 'inline-block';
+        this.btnText.textContent = enabled ? 'Generate Speech' : 'Generating...';
+    }
+
+    setStatus(message, type = 'info') {
+        this.status.textContent = message;
+        this.status.className = `status ${type}`;
+    }
 }
+
+// Initialize app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new SupertonicTTS();
+});