script.js

// --- VARIABLE DEFINITIONS ---
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const statusSpan = document.getElementById('status');
const transcriptSpan = document.getElementById('transcript');
const emotionSERSpan = document.getElementById('emotion_ser'); 
const emotionFERSpan = document.getElementById('emotion_fer'); 
const emotionFinalSpan = document.getElementById('emotion_final'); 

// LOCAL VIDEO ASSETS 
const introductionVideo = document.getElementById('introductionVideo'); 
const joyFeedbackVideo = document.getElementById('joyFeedbackVideo'); 
const sadFeedbackVideo = document.getElementById('sadFeedbackVideo'); 

const VIDEO_DURATION_MS = 5000; 
const JOY_VIDEO_URL = 'assets/joy.mp4'; 
const JOY_VIDEO_DURATION_MS = 5000; 

const SAD_VIDEO_URL = 'assets/sad.mp4'; 
const SAD_VIDEO_DURATION_MS = 5000; 

let videoLoopInterval = null; 
let joyVideoLoopInterval = null; 
let sadVideoLoopInterval = null; 

//  IMAGE ELEMENTS and LOOP Variables 
const animeCharacterContainer = document.getElementById('animeCharacterContainer');
const mouthClosedImage = document.getElementById('mouthClosedImage');
const mouthOpenImage = document.getElementById('mouthOpenImage');     
let talkingLoopInterval = null; 
const TALKING_FRAME_RATE = 100; 

const liveCameraFeed = document.getElementById('liveCameraFeed'); 
const faceCaptureCanvas = document.getElementById('faceCaptureCanvas'); 

let keepListening = false; 
let recognition; 
let cameraStream = null; 
let ferInterval = null; 
let currentFEREmotion = { emotion: 'neutral', score: 0.0 }; 

// AFER Variables
let ferBuffer = []; 
const BUFFER_SIZE_LIMIT = 30; 

// LOCAL IMAGE ASSETS 
const MOUTH_OPEN_URL = 'assets/character_open.png';
const NEUTRAL_CLOSED_URL = 'assets/character_closed.png';

const JOY_CLOSED_URL = 'assets/joy_closed.png'; 
const JOY_OPEN_URL = 'assets/joy_open.png'; 

const SAD_CLOSED_URL = 'assets/sad_closed.png';
const SAD_OPEN_URL = 'assets/sad_open.png';     

const ANGER_CLOSED_URL = 'assets/anger_closed.png';
const ANGER_OPEN_URL = 'assets/anger_open.png';     

const FEAR_CLOSED_URL = 'assets/fear_closed.png'; 
const FEAR_OPEN_URL = 'assets/fear_open.png';     

// IDLE IMAGE MAPPING
const emotionImageSources = {
    'sadness': SAD_CLOSED_URL, 
    'joy': JOY_CLOSED_URL, 
    'anger': ANGER_CLOSED_URL,
    'fear': FEAR_CLOSED_URL,
    'neutral': NEUTRAL_CLOSED_URL,
    'default': NEUTRAL_CLOSED_URL
};

// --- TTS Initialization ---
const synth = window.speechSynthesis;
let utterance = new SpeechSynthesisUtterance();
utterance.lang = 'en-US'; 

const setVoice = () => {
    const preferredVoice = synth.getVoices().find(voice => voice.lang.includes('en'));
    if (preferredVoice) { utterance.voice = preferredVoice; }
};
setVoice();
synth.onvoiceschanged = setVoice;

// --- UI Logic: Background Color ---
function updateBackgroundColor(emotion) {
    const emotionColors = {
        'joy': 'linear-gradient(to bottom right, #FFD700, #FFA500)',     
        'anger': 'linear-gradient(to bottom right, #B22222, #DC143C)',   
        'sadness': 'linear-gradient(to bottom right, #4682B4, #191970)', 
        'fear': 'linear-gradient(to bottom right, #3CB371, #2E8B57)',    
        'neutral': 'linear-gradient(to bottom right, #F0F0F0, #DCDCDC)',  
        'default': 'linear-gradient(to bottom right, #F0F0F0, #DCDCDC)'  
    };
    document.body.style.transition = 'background 0.8s ease-in-out'; 
    document.body.style.background = emotionColors[emotion.toLowerCase()] || emotionColors['default'];
}

// --- Character Control Logic ---
function controlFeedbackImage(action, emotionLabel) {
    const normalizedEmotion = emotionLabel ? emotionLabel.toLowerCase() : 'default';
    const baseIdleImageUrl = emotionImageSources[normalizedEmotion] || emotionImageSources['default'];
    
    let closedImageUrl = baseIdleImageUrl;
    let openImageUrl = MOUTH_OPEN_URL;
    
    if (action === 'start_talking') {
        if (normalizedEmotion === 'sadness') { closedImageUrl = SAD_CLOSED_URL; openImageUrl = SAD_OPEN_URL; }
        else if (normalizedEmotion === 'anger') { closedImageUrl = ANGER_CLOSED_URL; openImageUrl = ANGER_OPEN_URL; }
        else if (normalizedEmotion === 'fear') { closedImageUrl = FEAR_CLOSED_URL; openImageUrl = FEAR_OPEN_URL; }
        else if (normalizedEmotion === 'joy') { closedImageUrl = JOY_CLOSED_URL; openImageUrl = JOY_OPEN_URL; }

        animeCharacterContainer.style.display = 'block'; 
        let isMouthOpen = false;
        if (talkingLoopInterval) clearInterval(talkingLoopInterval);
        
        talkingLoopInterval = setInterval(() => {
            if (isMouthOpen) {
                mouthClosedImage.classList.add('active');
                mouthOpenImage.classList.remove('active');
            } else {
                mouthOpenImage.classList.add('active');
                mouthClosedImage.classList.remove('active');
            }
            isMouthOpen = !isMouthOpen;
        }, TALKING_FRAME_RATE);
    } else {
        if (talkingLoopInterval) { clearInterval(talkingLoopInterval); talkingLoopInterval = null; }
        mouthClosedImage.src = baseIdleImageUrl; 
        mouthClosedImage.classList.add('active');
        mouthOpenImage.classList.remove('active');
        animeCharacterContainer.style.display = 'none'; 
    }
}

// --- Video Loop Management ---
function startVideoLoop() {
    if (introductionVideo) {
        introductionVideo.style.display = 'block';
        animeCharacterContainer.style.display = 'none';
        joyFeedbackVideo.style.display = 'none';
        sadFeedbackVideo.style.display = 'none';
        if (videoLoopInterval) clearInterval(videoLoopInterval);
        const playVideo = () => { introductionVideo.currentTime = 0; introductionVideo.play().catch(console.warn); };
        playVideo();
        videoLoopInterval = setInterval(playVideo, VIDEO_DURATION_MS);
    }
}

function stopVideoLoop() {
    if (videoLoopInterval) { clearInterval(videoLoopInterval); videoLoopInterval = null; }
    if (introductionVideo) { introductionVideo.pause(); introductionVideo.style.display = 'none'; }
}

// --- Camera & FER Logic ---
async function startCamera() {
    try {
        cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
        liveCameraFeed.srcObject = cameraStream;
        liveCameraFeed.style.display = 'block';
    } catch (err) {
        statusSpan.textContent = "Error: Camera access required.";
        startBtn.disabled = true;
    }
}

function stopCamera() {
    if (cameraStream) { cameraStream.getTracks().forEach(track => track.stop()); cameraStream = null; }
    liveCameraFeed.style.display = 'none';
}

async function runFER() {
    if (!cameraStream || liveCameraFeed.videoWidth === 0) return;
    const context = faceCaptureCanvas.getContext('2d');
    faceCaptureCanvas.width = liveCameraFeed.videoWidth;
    faceCaptureCanvas.height = liveCameraFeed.videoHeight;
    context.save();
    context.scale(-1, 1);
    context.drawImage(liveCameraFeed, 0, 0, -faceCaptureCanvas.width, faceCaptureCanvas.height);
    context.restore();

    faceCaptureCanvas.toBlob(async (blob) => {
        if (!blob) return;
        const formData = new FormData();
        formData.append('file', blob, 'face_image.jpeg'); 
        try {
            const response = await fetch('/api/classify_face', { method: 'POST', body: formData });
            const data = await response.json();
            ferBuffer.push({ emotion: data.emotion, score: data.score });
            if (ferBuffer.length > BUFFER_SIZE_LIMIT) ferBuffer.shift();
            emotionFERSpan.textContent = `${data.emotion} (${data.score.toFixed(1)}%)`;
        } catch (err) { emotionFERSpan.textContent = "FER Error/No Face"; }
    }, 'image/jpeg', 0.8);
}

function getAverageFER() {
    if (ferBuffer.length === 0) return { emotion: 'neutral', score: 0.0, count: 0 };
    const counts = {}; let total = 0; let valid = 0;
    ferBuffer.forEach(item => {
        if (item.score > 20) { counts[item.emotion] = (counts[item.emotion] || 0) + 1; total += item.score; valid++; }
    });
    let majority = 'neutral'; let max = 0;
    for (const e in counts) { if (counts[e] > max) { max = counts[e]; majority = e; } }
    return { emotion: majority, score: valid > 0 ? (total / valid) : 0, count: ferBuffer.length };
}

function fuseEmotions(serE, serS, ferE, ferS) {
    if (ferS > 80 && ferS > serS) return ferE;
    if (serS > 80 && serS > ferS) return serE;
    if (serE === ferE) return serE;
    if (ferE === 'neutral' && serS > 40) return serE;
    if (serE === 'neutral' && ferS > 40) return ferE;
    return 'neutral'; 
}

// --- TTS & Feedback Logic ---
async function speakText(textToSpeak, detectedEmotion) {
    if (!textToSpeak) return;
    const shouldRestart = keepListening;
    const emotion = detectedEmotion.toLowerCase();
    if (shouldRestart && recognition) recognition.stop();
    stopVideoLoop(); 
    statusSpan.textContent = "Speaking response...";
    utterance.text = textToSpeak;

    let videoToUse = (emotion === 'joy') ? joyFeedbackVideo : (emotion === 'sadness') ? sadFeedbackVideo : null;
    let videoUrl = (emotion === 'joy') ? JOY_VIDEO_URL : (emotion === 'sadness') ? SAD_VIDEO_URL : '';
    let videoDuration = (emotion === 'joy') ? JOY_VIDEO_DURATION_MS : SAD_VIDEO_DURATION_MS;

    if (videoToUse) {
        videoToUse.src = videoUrl;
        videoToUse.style.display = 'block';
        const loop = () => { videoToUse.currentTime = 0; videoToUse.play().catch(console.warn); };
        loop();
        if (emotion === 'joy') joyVideoLoopInterval = setInterval(loop, videoDuration);
        else sadVideoLoopInterval = setInterval(loop, videoDuration);
    } else {
        controlFeedbackImage('start_talking', detectedEmotion); 
    }

    await new Promise(resolve => {
        utterance.onend = () => {
            if (videoToUse) {
                clearInterval(joyVideoLoopInterval || sadVideoLoopInterval);
                videoToUse.pause(); videoToUse.style.display = 'none';
            } else { controlFeedbackImage('idle', detectedEmotion); }
            resolve();
        };
        if (synth.speaking) synth.cancel();
        synth.speak(utterance);
    });

    if (shouldRestart && recognition) { recognition.start(); startVideoLoop(); }
}

// --- Speech API & Event Listeners ---
if ('webkitSpeechRecognition' in window) {
    recognition = new webkitSpeechRecognition();
    recognition.continuous = true; recognition.lang = 'en-US';

    startBtn.onclick = async () => {
        if (synth.speaking) synth.cancel();
        startVideoLoop(); await startCamera();
        if (!ferInterval) ferInterval = setInterval(runFER, 500);
        keepListening = true; recognition.start();
        statusSpan.textContent = "Listening & Watching...";
        startBtn.disabled = true; stopBtn.disabled = false;
    };

    stopBtn.onclick = () => {
        startBtn.disabled = false; stopBtn.disabled = true;
        if (ferInterval) { clearInterval(ferInterval); ferInterval = null; }
        stopCamera(); stopVideoLoop();
        keepListening = false; recognition.stop();
        controlFeedbackImage('stop', 'default');
        updateBackgroundColor('neutral');
    };

    recognition.onresult = (event) => {
        let transcript = '';
        for (let i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) transcript += event.results[i][0].transcript; }
        if (transcript) {
            const afer = getAverageFER();
            fetch('/api/classify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: transcript }) })
            .then(res => res.json())
            .then(ser => {
                const final = fuseEmotions(ser.emotion, ser.score, afer.emotion, afer.score);
                emotionFinalSpan.innerHTML = `**${final}**`;
                updateBackgroundColor(final);
                return fetch('/api/llm_feedback', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: transcript, emotion: final }) });
            })
            .then(res => res.json())
            .then(llm => speakText(llm.feedback, emotionFinalSpan.textContent.replace(/\*\*|\s\(.*\)/g, '')))
            .catch(console.error);
        }
    };
}