static/script.js

window.addEventListener('load', function () {
    console.log("Window UP")
    //askPermission(); // Call the function to ask for permission when the window loads
});

// Function to ask for permission to access the camera
function askPermission() {
    console.log('askPermission() function called'); // Debugging statement
    // Check if the browser supports media devices
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Prompt user for permission to use the camera
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                console.log('Camera permission granted'); // Debugging statement
                // If permission is granted, display the video stream
                var video = document.getElementById('videoElement');
                video.srcObject = stream;
                video.play();
            })
            .catch(function(error) {
                // If permission is denied or an error occurs, handle it here
                console.error('Error accessing camera:', error);
            });
    } else {
        console.error('getUserMedia is not supported in this browser');
    }
}


var show_ad = false;

$(document).ready(function () {


    $("#banner2").hide();
    $("#closeAd").click(function () {
        $("#banner2").hide(1000);
    });
});

function startCamera() {
    var url = '0';
    $('#urlForm').attr('action', '/index'); 
    $('#urlForm').attr('method', 'POST'); 
    $('#urlForm').find('#url').val(url);
    $('#urlForm').submit();
}

function startVideo() {
    var url = $('#url').val();
    $('#urlForm').attr('action', '/index'); 
    $('#urlForm').attr('method', 'POST'); 
    $('#urlForm').find('#url').val(url);
    $('#urlForm').submit();
}

function stopProcess(message) {
    console.log("Stop BUTTON");
    const terminalData = document.getElementById('terminal').innerHTML;
    document.getElementById('terminal').innerHTML = terminalData + "<br><br><center>" + message + "</center><br><br>";
    fetch('/stop_process')
        .then(response => response.text())
        .then(message => {
            console.log(message);
            // Redirect to homepage after stopping the process
            window.location.href = '/';
        })
        .catch(error => console.error(error));
}


//This Code is used to Communicate b/w Client & Server via SOCKETIO
//var socket = io.connect('http://0.0.0.0:7860/');

var socket = io.connect();

// Variabel untuk menyimpan kata-kata berturut-turut
let consecutiveWords = [];
let finalSentence = "";
let wordCounter = 0;

function appendToTerminal(message) {
    var terminal = document.getElementById("terminal");
    var p = document.createElement("p");
    p.innerHTML = `<table class="table table-striped text-center" style="border: none;">
                    <tr class="row">
                        <td class="col-md-6" style="color: #01ECEC; border: none;">${message[0]}</td>
                        <td class="col-md-6" style="color: #01ECEC; border: none;">${message[1]}</td>
                    </tr>
                </table>`;
    terminal.appendChild(p);
    terminal.scrollTop = terminal.scrollHeight;

    if (consecutiveWords.length === 0 || consecutiveWords[consecutiveWords.length - 1] === message[0]) {
        consecutiveWords.push(message[0]);
        wordCounter++; // Menambah jumlah kemunculan kata yang sama
    } else {
        consecutiveWords = [message[0]];
        wordCounter = 1; // Mengatur ulang jumlah kemunculan kata yang sama
    }

    if (wordCounter >= 7 && message[0] !== "G") {
        finalSentence += (finalSentence.length > 0 ? " " : "") + consecutiveWords[0];
        document.getElementById("finalSentencePara").innerText = finalSentence;
        consecutiveWords = [];
        wordCounter = 0;
    }
}


    socket.on('connect', function () {
        console.log("Connection has been successfully established with socket.", socket.connected)
    });

//Code For All Switches
function toggleHSwitch() {
    var switchElement = $("#flip-horizontal");
    var switchIsOn = switchElement.is(":checked");

    if (switchIsOn) {
        console.log("SWITCH ON")
        $.getJSON("/request_flipH_switch", function (data) {
            console.log("Switch on request sent.");
        });
    } else {
        console.log("SWITCH OFF")
        $.getJSON("/request_flipH_switch", function (data) {
            console.log("Switch off request sent.");
        });
    }
}

function toggleMediaPipeSwitch() {
    var switchElement = $("#mediapipe");
    var switchIsOn = switchElement.is(":checked");

    if (switchIsOn) {
        console.log("SWITCH ON")
        $.getJSON("/request_mediapipe_switch", function (data) {
            console.log("Switch on request sent.");
        });
    } else {
        console.log("SWITCH OFF")
        $.getJSON("/request_mediapipe_switch", function (data) {
            console.log("Switch off request sent.");
        });
    }
}

function toggleDetSwitch() {

    var switchElement = $("#run_detection");
    var switchIsOn = switchElement.is(":checked");

    if (switchIsOn) {
        console.log("SWITCH ON")
        $.getJSON("/request_run_model_switch", function (data) {
            console.log("Switch on request sent.");
        });
    } else {
        console.log("SWITCH OFF")
        $.getJSON("/request_run_model_switch", function (data) {
            console.log("Switch off request sent.");
        });
    }
}

function toggleOffSwitch() {
    var switchElement = $("#turn_off");
    var switchIsOn = switchElement.is(":checked");

    if (switchIsOn) {
        //askPermission() 
        console.log("Camera ON")
        $.getJSON("/request_preview_switch", function (data) {
            console.log("Switch on request sent.");
        });
    } else {
        console.log("Camera OFF")
        $.getJSON("/request_preview_switch", function (data) {
            console.log("Switch off request sent.");
        });
    }
}

$(document).ready(function () {
    // Get the slider element
    var slider = $('#slider');

    // Attach the event listener to the slider element
    slider.on('input', function () {
        // Get the value of the slider
        var sliderValue = slider.val();

        // Call the updateSliderValue() function and pass in the slider value
        updateSliderValue(sliderValue);
    });
});


function updateSliderValue(sliderValue) {
    console.log(sliderValue)
    $.ajax({
        type: 'POST',
        url: '/update_slider_value',
        data: {'sliderValue': sliderValue},
        success: function () {
            console.log('Slider value updated successfully!');
        },
        error: function () {
            console.log('Error updating slider value!');
        }
    });
    document.getElementById("conf_display").innerHTML = sliderValue
}

function toggleTheme() {
    if (document.body.classList.contains("dark"))
        document.body.classList.remove("dark");
    else
        document.body.classList.add("dark");
}