let faceapi;

let detections = [];

​

let serial;

let portButton;

let inData = 0;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

​

  // Initialize FaceAPI

  faceapi = ml5.faceApi(video, { withLandmarks: true }, modelReady);

​

  // Initialize Web Serial API

  serial = new p5.WebSerial();

​

  // Check available serial ports

  serial.getPorts();

  serial.on("noport", makePortButton); 

  serial.on("portavailable", openPort); 

  serial.on("requesterror", portError);

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

​

  makePortButton(); 

}

​

function modelReady() {

  console.log("FaceAPI model ready!");

  faceapi.detect(gotFaces);

}

​

function gotFaces(error, result) {

  if (error) {

    console.log(error);

    return;

  }

  detections = result;

  faceapi.detect(gotFaces);

}

​

let centerFaceX; 

let tolerance = 120; // tolerance needs to be changed based on the construction

let direction = 0; // 1 is right, 0 is stop, 2 is left

​

function draw() {

  background(0);

​

  // Flip the canvas horizontally

  push();

  translate(width, 0);

  scale(-1, 1);

​

  image(video, 0, 0, width, height);

​

  pop(); // Restore original orientation

​

  centerFaceX = width / 2;

​

  if (detections.length > 0) {

    let faceX = detections[0].alignedRect._box._x + detections[0].alignedRect._box._width / 2;

    let flippedFaceX = width - faceX; // Flip face X position

​

    if (flippedFaceX - centerFaceX > tolerance) {

      direction = 2;

    } else if (flippedFaceX - centerFaceX < -tolerance) {

      direction = 1;

    } else {

      direction = 0;

    }

​

    let directionByte = new Uint8Array([direction]);

    serial.write(directionByte);

    console.log("Data sent:", direction);

​

    // Draw Face Box (flipped)

    noFill();

    stroke(0, 255, 0);

    strokeWeight(2);

    rect(

      width - detections[0].alignedRect._box._x - detections[0].alignedRect._box._width, // Flip X position

      detections[0].alignedRect._box._y,

      detections[0].alignedRect._box._width,

      detections[0].alignedRect._box._height

    );

​

    // Show tracking point (flipped)

    fill(255, 0, 0);

    ellipse(flippedFaceX, height / 2, 10, 10);

  } else {

    direction = 0;

  }

}

​

function makePortButton() {

  if (portButton) portButton.remove(); // Remove old button if it exists

​

  portButton = createButton("Choose Serial Port");

  portButton.position(10, 10);

  portButton.size(150, 30);

  portButton.style("font-size", "16px");

  portButton.style("z-index", "1000");

  portButton.mousePressed(choosePort);

}

​

// Open serial port when user selects

function choosePort() {

  serial.requestPort();

}

​

// Open the selected port

function openPort() {

  serial.open().then(() => {

    console.log("✅ Port opened successfully!");

    if (portButton) portButton.hide();

  }).catch(err => {

    console.error("❌ Failed to open port:", err);

  });

}

​

// Handle serial errors

function portError(err) {

  alert("Serial port error: " + err);

}

​

// Read incoming data

function serialEvent() {

  let received = serial.read();

  if (received !== null) {

    inData = received;

    console.log("Received:", inData);

  }

}

​

// Handle port disconnection

function closePort() {

  serial.close();

  console.log("Port closed.");

}

​

​

​

​

​

​