Adding a dynamically updated HTML table using Socket.IO / AJAX in HTML

Question

So basically I want to update the frontend according to the script I have written down for continuously looking for changes in the faces detected. After running the above app and display the errors in table form and continuously watch over to know updates on regular basis without the page to be reloaded, I have difficulty understanding how to dynamically update the table with the detected changes. I was thinking of using Socket.io or AJAX for this.

Here are my globals.

from flask import Flask, flash, Response, jsonify
from flask import render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import mysql.connector
import cv2
import face_recognition
import numpy as np
from flask_socketio import SocketIO, send

app = Flask(__name__)

camera = cv2.VideoCapture(0)

jk_image = face_recognition.load_image_file("jk/jk.jpg")
jk_face_encoding = face_recognition.face_encodings(jk_image)[0]


known_face_encodings = [jk_face_encoding]
known_face_names = ["jk"]

face_locations = []
face_encodings = []

global face_names
face_names = []

process_this_frame = True

Here is my function for face recognition.

def gen_frames(): 
while True:
    success, frame = camera.read()  # read the camera frame
    if not success:
        break
    else:
        small_frame = cv2.resize(frame, (0, 0), fx=0.25, fy=0.25)
        rgb_small_frame = small_frame[:, :, ::-1]

        face_locations = face_recognition.face_locations(rgb_small_frame)
        face_encodings = face_recognition.face_encodings(rgb_small_frame, face_locations)
        face_names = []
        for face_encoding in face_encodings:
            name = "Unknown"
            
            matches = face_recognition.compare_faces(known_face_encodings, face_encoding)
            print(matches)

            if matches != [True]:
                print("Unknown face detected")

            face_distances = face_recognition.face_distance(known_face_encodings, face_encoding)
            best_match_index = np.argmin(face_distances)
            if matches[best_match_index]:
                name = known_face_names[best_match_index]

            face_names.append(name)
            print(face_names)  

            x  = len(face_names)
            if x > 1:
                print("Multiple faces")
            
        for (top, right, bottom, left), name in zip(face_locations, face_names):
            top *= 4
            right *= 4
            bottom *= 4
            left *= 4

            cv2.rectangle(frame, (left, top), (right, bottom), (0, 0, 255), 2)

            cv2.rectangle(frame, (left, bottom - 35), (right, bottom), (0, 0, 255), cv2.FILLED)
            font = cv2.FONT_HERSHEY_DUPLEX
            cv2.putText(frame, name, (left + 6, bottom - 6), font, 1.0, (255, 255, 255), 1)

        ret, buffer = cv2.imencode('.jpg', frame)
        frame = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/facerecog')
def facerecog():
    return render_template('facerecog.html', face_names=face_names)

@app.route('/video_feed')
    def video_feed():
    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
        
if __name__ == '__main__':
    app.run(debug=True)

here is the HTML

<div>
    <table id="myTable">
        <tr>
             <th>Remark</th>
        </tr>
        <tr>
             <td>{{face_names}} is from here</td> 
        </tr> 
     </table>
</div>