script.js

let mediaRecorder;
let audioChunks = [];
let recording = false;
let transcriber;

// Function to load the model
async function loadModel() {
    document.getElementById("modelStatus").innerText = "⏳ Loading Whisper model...";
    
    transcriber = await window.Transformers.pipeline(
        'automatic-speech-recognition',
        'Xenova/whisper-tiny.en'
    );

    document.getElementById("modelStatus").innerText = "✅ Model loaded!";
    document.getElementById("recordButton").innerText = "🎤 Start Recording";
    document.getElementById("recordButton").disabled = false;
    document.getElementById("status").innerText = "Press the button to record.";
}

// Function to start recording
async function startRecording() {
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.ondataavailable = (event) => {
        audioChunks.push(event.data);
    };

    mediaRecorder.onstop = async () => {
        let audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        let reader = new FileReader();

        reader.onloadend = async () => {
            let audioURL = reader.result;
            document.getElementById("status").innerText = "⏳ Transcribing...";

            try {
                let output = await transcriber(audioURL);
                document.getElementById("output").innerText = output.text;
                document.getElementById("status").innerText = "✅ Done!";
            } catch (error) {
                document.getElementById("status").innerText = "❌ Error during transcription.";
                console.error(error);
            }
        };

        reader.readAsDataURL(audioBlob);
    };

    mediaRecorder.start();
    audioChunks = [];
    recording = true;
    document.getElementById("recordButton").innerText = "⏹ Stop Recording";
    document.getElementById("status").innerText = "🎙️ Recording...";
}

// Function to stop recording
function stopRecording() {
    if (mediaRecorder && recording) {
        mediaRecorder.stop();
        recording = false;
        document.getElementById("recordButton").innerText = "🎤 Start Recording";
        document.getElementById("status").innerText = "⏳ Processing audio...";
    }
}

// Toggle recording
document.getElementById("recordButton").addEventListener("click", () => {
    if (!recording) {
        startRecording();
    } else {
        stopRecording();
    }
});

// Load the model on page load
loadModel();