document.addEventListener('DOMContentLoaded', async () => {
    

    // Start video feed when the page loads
    await fetch('/start_video_feed', { method: 'GET' });

    

    const res_output = await fetch('/recognize', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        }
    });

    const recognized = await res_output.json();
    document.getElementById("recognized-name").innerHTML = recognized['names'];
    document.getElementById("recognized").src = recognized['image'];
    document.getElementById("response").innerHTML = recognized['response'];

    document.getElementById("video_feed").remove();

    var source = document.createElement("source");
    source.src = recognized['reconize_file_path'];
    source.type = "audio/mp3";

    var audio = document.getElementsByTagName("audio")[0];

    audio.appendChild(source);
    audio.play();
});