{% extends "index.html" %}
{% block content %}

    <h4 class="title" style="font-style: 'Roboto';
    font-size: 28px;
    color: #FFFFFF;
    padding: 12px 10px;
    border-radius: 12px;
    background-color: #007BFF;">
    Sistem Isyarat Bahasa Indonesia / {% if title %} {{ title }} {% endif %}</h4>
    
    <img id="video_stream" src="{{ url_for('video') }}" width="640" height="480">
    
    <button id="reloadPage" onclick="reloadPage()" 
    style="padding: 10px; 
    width: fit-content;
    border-radius: 10px; 
    background-color: #007BFF;
    color: #FFFFFF;
    border: none;
    outline: none;">
    Segarkan</button>
    
    <!-- <div>
        <h2>Output</h2>
        <p id="text">Result : </p>
    </div> -->

    <div class="form-floating mb-3">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingText" style="height: 100px" disabled>Result : </textarea>
        <label for="floatingTextarea2Disabled" style="padding-top: 20px;">Output</label>
      </div>

    <script>
        // Akses kamera menggunakan WebRTC
        function loadCamera(){
            navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                var videoElement = document.getElementById('videoElement');
                videoElement.srcObject = stream;
            })
            .catch(function(err) {
                console.log("Error: " + err);
            });
            document.getElementById("startCameraBtn").style.display = "none";
            document.getElementById("reloadPage").style.display = "block";
        }

        function fetchStreamedText() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/stream', true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        var newText = xhr.responseText; // Menghilangkan spasi ekstra atau baris kosong
                        document.getElementById("floatingText").innerHTML += newText;
                    }
                }
            };

            xhr.send();
        }
        // Panggil fungsi fetchStreamedText setiap 1 detik
        setInterval(fetchStreamedText, 500); // 1000 ms = 1 detik

        // Deteksi objek dalam video
        // Anda bisa menggunakan TensorFlow.js atau OpenCV.js di sini
        // Misalnya:
        // const model = await tf.loadModel('model_url');
        // const predictions = await model.predict(videoElement);

        function reloadPage() {
            location.reload();
        }
    </script>

{% endblock %}