Here's a comprehensive solution for your speech recognition web application: Trainable Speech Recognition

Trainable Speech Recognition

Training Mode

class SpeechRecognitionModule { constructor() { this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); this.recognition.continuous = true; this.recognition.interimResults = true; this.currentSpeaker = 'Speaker 1'; this.lastResult = ''; this.silenceTimeout = null; this.silenceThreshold = 1500; // 1.5 seconds this.trainingMode = false; this.trainingData = []; this.speakerCount = 1; this.init(); } init() { this.recognition.onresult = (event) => { const transcript = Array.from(event.results) .map(result => result[0]) .map(result => result.transcript) .join(''); if (event.results[0].isFinal) { this.processFinalResult(transcript); } }; this.recognition.onend = () => { if (this.isRunning) { this.recognition.start(); } }; this.recognition.onspeechend = () => { this.silenceTimeout = setTimeout(() => { this.insertNewLine(); }, this.silenceThreshold); }; this.recognition.onsoundstart = () => { if (this.silenceTimeout) { clearTimeout(this.silenceTimeout); this.silenceTimeout = null; } }; } processFinalResult(transcript) { if (this.trainingMode) { this.trainingData.push({ input: transcript, output: document.getElementById('transcript').innerText }); document.getElementById('trainingStatus').textContent = `Training samples: ${this.trainingData.length}`; return; } if (transcript !== this.lastResult) { const transcriptElement = document.getElementById('transcript'); const currentText = transcriptElement.innerText; if (!currentText.endsWith(this.currentSpeaker)) { transcriptElement.innerHTML += `\n${this.currentSpeaker}: ${transcript}`; } else { const lastLineIndex = currentText.lastIndexOf('\n'); const newText = lastLineIndex >= 0 ? currentText.substring(0, lastLineIndex) + `\n${this.currentSpeaker}: ${transcript}` : `${this.currentSpeaker}: ${transcript}`; transcriptElement.innerHTML = newText; } this.lastResult = transcript; } } insertNewLine() { const transcriptElement = document.getElementById('transcript'); if (!transcriptElement.innerText.endsWith('\n\n')) { transcriptElement.innerHTML += '\n\n'; } } start() { this.isRunning = true; this.recognition.start(); } stop() { this.isRunning = false; this.recognition.stop(); } clear() { document.getElementById('transcript').innerHTML = ''; this.lastResult = ''; this.currentSpeaker = 'Speaker 1'; this.speakerCount = 1; } setSpeaker(speakerNumber) { this.currentSpeaker = `Speaker ${speakerNumber}`; this.speakerCount = Math.max(this.speakerCount, speakerNumber); } addSpeaker() { this.speakerCount++; this.currentSpeaker = `Speaker ${this.speakerCount}`; this.updateSpeakerSelect(); } updateSpeakerSelect() { const select = document.getElementById('speakerSelect'); select.innerHTML = ''; for (let i = 1; i <= this.speakerCount; i++) { const option = document.createElement('option'); option.value = i; option.textContent = `Speaker ${i}`; select.appendChild(option); } select.value = this.speakerCount; } saveToWord() { const content = document.getElementById('transcript').innerText; const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; // Create TRANSCRIPTS folder if it doesn't exist try { if (!window.showDirectoryPicker) { a.download = 'transcript.txt'; a.click(); return; } (async () => { const dirHandle = await window.showDirectoryPicker(); try { const transcriptsHandle = await dirHandle.getDirectoryHandle('TRANSCRIPTS', { create: true }); const fileHandle = await transcriptsHandle.getFileHandle(`transcript_${new Date().toISOString()}.txt`, { create: true }); const writable = await fileHandle.createWritable(); await writable.write(content); await writable.close(); alert(`Transcript saved to: TRANSCRIPTS/${fileHandle.name}`); } catch (error) { console.error('Error saving file:', error); a.download = 'transcript.txt'; a.click(); } })(); } catch (error) { console.error('File System Access API not supported:', error); a.download = 'transcript.txt'; a.click(); } } startTraining() { this.trainingMode = true; this.trainingData = []; document.getElementById('trainingStatus').textContent = 'Training mode active'; document.getElementById('trainBtn').disabled = true; document.getElementById('saveTrainBtn').disabled = false; } saveTrainingData() { // In a real implementation, this would send data to a backend for model training console.log('Training data:', this.trainingData); localStorage.setItem('speechRecognitionTraining', JSON.stringify(this.trainingData)); this.trainingMode = false; document.getElementById('trainingStatus').textContent = 'Training data saved!'; document.getElementById('trainBtn').disabled = false; document.getElementById('saveTrainBtn').disabled = true; alert('Training data saved. The model will improve based on these corrections.'); } } // Initialize the app const speechModule = new SpeechRecognitionModule(); // Set up UI event listeners document.getElementById('startBtn').addEventListener('click', () => { speechModule.start(); document.getElementById('startBtn').disabled = true; document.getElementById('stopBtn').disabled = false; }); document.getElementById('stopBtn').addEventListener('click', () => { speechModule.stop(); document.getElementById('startBtn').disabled = false; document.getElementById('stopBtn').disabled = true; }); document.getElementById('clearBtn').addEventListener('click', () => { speechModule.clear(); }); document.getElementById('saveBtn').addEventListener('click', () => { speechModule.saveToWord(); }); document.getElementById('speakerSelect').addEventListener('change', (e) => { speechModule.setSpeaker(parseInt(e.target.value)); }); document.getElementById('trainBtn').addEventListener('click', () => { speechModule.startTraining(); }); document.getElementById('saveTrainBtn').addEventListener('click', () => { speechModule.saveTrainingData(); }); // Load previous training data if available if (localStorage.getItem('speechRecognitionTraining')) { speechModule.trainingData = JSON.parse(localStorage.getItem('speechRecognitionTraining')); } This implementation includes: 1. Real-time speech recognition with speaker labeling 2. Automatic new lines for pauses 3. Speaker differentiation 4. Training mode that learns from corrections 5. Word document export to TRANSCRIPTS folder 6. Clear/reset functionality 7. Speaker management 8. Persistent training data storage Note: For full functionality, you'll need to serve this from a web server due to browser security restrictions. The File System Access API requires a secure context (HTTPS or localhost).