{% extends "base.html" %} {% block title %}Person detection{% endblock %} {% block content
    %}
   
    

        <html>
          <head>
            <title>Real-time Face Detection</title>
            <style>
              #video-container {
                display: flex;
                justify-content: center;
                align-items: center;
              }
            </style>
          </head>
          <body>
            <br>
            <br>
            <br>
            <br>
            

  <h1>Real-time Face Detection</h1>
  <div id="video-container">
    <img id="video-feed" src="{{ url_for('auth.video') }}" width="640" height="480">
  </div>
  <h2 id="person-name">Detected Person: {{ real_time_detect_name }}</h2>
  <div id="detection-list">
    <h3>Detection List:</h3>
    <ul id="person-list"></ul>
  </div>
  <script>
    const personNameElement = document.getElementById("person-name");
    const personListElement = document.getElementById("person-list");

    function updatePersonName() {
      fetch("/person_name")
        .then((response) => response.text())
        .then((data) => {
          personNameElement.textContent = "Detected Person: " + data;
        });
    }

    function updateDetectionList() {
      fetch("/detection_list")
        .then((response) => response.json())
        .then((data) => {
          personListElement.innerHTML = "";
          data.forEach((entry) => {
            const listItem = document.createElement("li");
            listItem.textContent = `${entry.person_name} - ${entry.time}`;
            personListElement.appendChild(listItem);
          });
        });
    }

    setInterval(updatePersonName, 1000);
    setInterval(updateDetectionList, 5000);
  </script>
</body>
        </html>
      
    {% endblock %}




    