text: $(document).ready(function () {
  
      $("#lights").hide();
  
      let personList = {};
      let image;
      let faceEmotion;
  
      function loadPersonList () {
          personList = {}
          $.get("/face-detect/list-persons", function (data) {
              let persons = JSON.parse(data);
              persons.forEach(function (c) {
                  personList[c.personId] = c;
              });
          });
      }
  
      function getPersonSelect (rect) {
          let options = "<select rect=\"" + rect + "\"><option selected disabled>Select name...</option>";
          for (let person in personList) {
              options += "<option value=\"" + person + "\">" + personList[person].name + "</option>";
          }
          options += "<option value=\"NEW\">Add person</option></select>";
          return options;
      }
  
      function getSuggestedName (faceId) {
          let ret;
          $.get({
              url: "/face-detect/identify",
              data: {faceId: faceId},
              success: function (r) {
                  ret = r;
              },
              async: false
          });
          return ret;
      }
  
      function selectChange (o) {
          if (o.value == "NEW") {
              let name = prompt("Name?");
              $.post("/face-detect/add-person", {name: name}, function (u) {
                  addPerson(image, u, $(o).attr("rect"), name);
              });
          } else {
              let person = personList[o.value];
              addPerson(image, person.personId, $(o).attr("rect"), person.name);
          }
          $("<span rect=\"" + $(o).attr("rect") + "\"></span>").insertAfter(o);
          $(o).remove();
      }
  
      function addPerson (image, id, rectangle, name) {
          $.post("/face-detect/add-face", {personId: id, file: image, rectangle: rectangle}, function (r) {
              $("span[rect='" + rectangle + "']").text(name + ":" + r);
          });
      }
  
      loadPersonList();
  
      Webcam.set({
          width: 640,
          height: 480,
          image_format: 'jpeg',
          jpeg_quality: 100,
          dest_width: 640,
          dest_height: 480
      });
  
      Webcam.attach("#my_cam");
  
      function processAnalysis(data) {
  
          let obj = JSON.parse(data);
  
          console.log(obj);
  
          $("#results").empty();
          $("#results").show();
          $("#my_cam").hide();
          $("#results").append("<img src=\"" + obj['image'] + "\">");
          image = obj['original-image'];
  
          let countFaces = obj['faces'].length;
          let string;
  
          if (countFaces === 0) {
              string = "There are no faces :(";
          } else {
              string = "<table border=0><tr><td></td><th>Age</th><th>Gender</th><th>Emotion</th><th>Name</th><td>(suggest)</td></tr>";
              obj['faces'].forEach(function (a) {
                  let attr = a['faceAttributes'];
                  let rect = a['faceRectangle']['left'] + "," + a['faceRectangle']['top'] + "," + a['faceRectangle']['width'] + "," + a['faceRectangle']['height'];
                  let emotion = "";
                  for (let emotions in attr['emotion']) {
                      if (attr['emotion'][emotions] > attr['emotion'][emotion] || emotion === "")
                          emotion = emotions;
                  }
                  if (countFaces == 1) {
                      faceEmotion = emotion;
                      $("#lights").show();
                  }
                  string += "<tr faceid='" + a['faceId'] + "'><td>" + a['color'] + "</td><td>" + attr['age'] + "</td><td>" + attr['gender'] + "</td><td>" + emotion + "</td><td>" + getPersonSelect(rect) + "</td><td><i>" + getSuggestedName(a['faceId']) + "</i></td></tr>";
              });
              string += "</table>";
          }
          $("#results").append("<p>" + string + "</p>");
          $("select").change(function () {
              selectChange(this);
          });
      }
  
      function take_snapshot() {
          loadPersonList();
  
          Webcam.snap(function (data_uri) {
              $.post("analyse", {img: data_uri}, function (data) {
                  processAnalysis(data);
              });
          });
      }
  
      $("#reset").click(function () {
          $("#my_cam").show();
          $("#results").hide();
          $("#lights").hide();
          $("#capture").show();
          Webcam.unfreeze();
      });
  
      $("#capture").click(function () {
          take_snapshot();
          Webcam.freeze();
      });
  
      $("#lights").click(function () {
          $.post("/face-detect/set-lights", {emotion: faceEmotion}, function (r) {
              console.log(r);
          })
      });
  });