From 4f9b0b634a0e540aaf1f06c9553451169880b0fb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 28 Oct 2025 01:01:00 +0000 Subject: [PATCH 1/3] Initial plan From 271ae124e91fb61723d91254d7feb9163dd7baca Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 28 Oct 2025 01:09:38 +0000 Subject: [PATCH 2/3] Fix linting errors to enable successful build without Vercel Co-authored-by: MiguelCoding <40774151+MiguelCoding@users.noreply.github.com> --- src/components/download/Download.css | 9 ++ src/components/download/Download.js | 4 +- src/components/navbar/Navbar.js | 2 +- .../projectsExtended/ProjectsExtended.js | 92 ++++++++++--------- 4 files changed, 59 insertions(+), 48 deletions(-) diff --git a/src/components/download/Download.css b/src/components/download/Download.css index 45df728..76ed5f1 100644 --- a/src/components/download/Download.css +++ b/src/components/download/Download.css @@ -35,6 +35,15 @@ section#download { margin: 2rem; } +.download-link { + background: transparent; + border: none; + cursor: pointer; + padding: 0; + color: inherit; + font: inherit; +} + .download-icon { margin: 1rem 2rem; border: 2px solid #fff; diff --git a/src/components/download/Download.js b/src/components/download/Download.js index d7f796c..b65adfd 100644 --- a/src/components/download/Download.js +++ b/src/components/download/Download.js @@ -30,11 +30,11 @@ const Download = () => {

- +

CV

diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js index 18dd2b8..c4ac725 100644 --- a/src/components/navbar/Navbar.js +++ b/src/components/navbar/Navbar.js @@ -26,7 +26,7 @@ const Navbar = () => { id={showMenu ? "nav-links-mobile" : "nav-links-mobile-hide"} >
  • - Home + Home
  • Projects diff --git a/src/components/projectsExtended/ProjectsExtended.js b/src/components/projectsExtended/ProjectsExtended.js index 63715ff..1cb1445 100644 --- a/src/components/projectsExtended/ProjectsExtended.js +++ b/src/components/projectsExtended/ProjectsExtended.js @@ -1,8 +1,7 @@ // figure out if this is nessesary or not. perhaps it can be put in a function and hoisted instead. // Import dependencies -import React, { useRef, useState, useEffect } from "react"; +import React, { useRef, useEffect } from "react"; import './ProjectsExtended.css'; -import * as tf from "@tensorflow/tfjs"; import * as cocossd from "@tensorflow-models/coco-ssd"; import Webcam from "react-webcam"; import { drawRect } from "./utilities"; @@ -13,49 +12,52 @@ function ProjectsExtended() const webcamRef = useRef(null); const canvasRef = useRef(null); - // Main function - const runCoco = async () => { - const net = await cocossd.load(); - console.log("COCOSSD LOaded"); - // Loop and detect hands - setInterval(() => { - detect(net); - }, 10); - }; - - const detect = async (net) => { - // Check data is available - //console.log(webcamRef.current); - if ( - typeof webcamRef.current !== "undefined" && - webcamRef.current !== null && - webcamRef.current.video.readyState === 4 - ) { - // Get Video Properties - const video = webcamRef.current.video; - const videoWidth = webcamRef.current.video.videoWidth; - const videoHeight = webcamRef.current.video.videoHeight; - //video.play(); - - // Set video width - webcamRef.current.video.width = videoWidth; - webcamRef.current.video.height = videoHeight; - - // Set canvas height and width - canvasRef.current.width = videoWidth; - canvasRef.current.height = videoHeight; - - // Make Detections - const obj = await net.detect(video); - console.log(obj); - - // Draw mesh - const ctx = canvasRef.current.getContext("2d"); - drawRect(obj, ctx); - } - }; - - useEffect(()=>{runCoco()},[]); + useEffect(() => { + // Detect function + const detect = async (net) => { + // Check data is available + //console.log(webcamRef.current); + if ( + typeof webcamRef.current !== "undefined" && + webcamRef.current !== null && + webcamRef.current.video.readyState === 4 + ) { + // Get Video Properties + const video = webcamRef.current.video; + const videoWidth = webcamRef.current.video.videoWidth; + const videoHeight = webcamRef.current.video.videoHeight; + //video.play(); + + // Set video width + webcamRef.current.video.width = videoWidth; + webcamRef.current.video.height = videoHeight; + + // Set canvas height and width + canvasRef.current.width = videoWidth; + canvasRef.current.height = videoHeight; + + // Make Detections + const obj = await net.detect(video); + console.log(obj); + + // Draw mesh + const ctx = canvasRef.current.getContext("2d"); + drawRect(obj, ctx); + } + }; + + // Main function + const runCoco = async () => { + const net = await cocossd.load(); + console.log("COCOSSD LOaded"); + // Loop and detect hands + setInterval(() => { + detect(net); + }, 10); + }; + + runCoco(); + }, []); return (
    From 4645601f602d9cfbc75002260d0af89c33be2e62 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 28 Oct 2025 01:11:36 +0000 Subject: [PATCH 3/3] Address code review feedback: fix typos and memory leak Co-authored-by: MiguelCoding <40774151+MiguelCoding@users.noreply.github.com> --- .../projectsExtended/ProjectsExtended.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/projectsExtended/ProjectsExtended.js b/src/components/projectsExtended/ProjectsExtended.js index 1cb1445..8f534fe 100644 --- a/src/components/projectsExtended/ProjectsExtended.js +++ b/src/components/projectsExtended/ProjectsExtended.js @@ -1,4 +1,4 @@ -// figure out if this is nessesary or not. perhaps it can be put in a function and hoisted instead. +// figure out if this is necessary or not. perhaps it can be put in a function and hoisted instead. // Import dependencies import React, { useRef, useEffect } from "react"; import './ProjectsExtended.css'; @@ -49,14 +49,25 @@ function ProjectsExtended() // Main function const runCoco = async () => { const net = await cocossd.load(); - console.log("COCOSSD LOaded"); + console.log("COCOSSD Loaded"); // Loop and detect hands - setInterval(() => { + const intervalId = setInterval(() => { detect(net); }, 10); + return intervalId; }; - runCoco(); + let intervalId; + runCoco().then(id => { + intervalId = id; + }); + + // Cleanup function to clear interval on unmount + return () => { + if (intervalId) { + clearInterval(intervalId); + } + }; }, []); return (