Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/components/download/Download.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/download/Download.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ const Download = () => {
</p>
<IconContext.Provider value={{ size: "15" }}>
<div className="download-icons">
<a onClick={onButtonClick}>
<button onClick={onButtonClick} className="download-link">
<div className="download-icon">
<FaFilePdf /> <p>Resume</p>
</div>
</a>
</button>
<div className="download-icon">
<FaFilePdf /> <p>CV</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/navbar/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Navbar = () => {
id={showMenu ? "nav-links-mobile" : "nav-links-mobile-hide"}
>
<li>
<a href="#">Home</a>
<a href="#home">Home</a>
</li>
<li>
<a href="#projects">Projects</a>
Expand Down
105 changes: 59 additions & 46 deletions src/components/projectsExtended/ProjectsExtended.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
// 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, 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";
Expand All @@ -13,49 +12,63 @@ 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
const intervalId = setInterval(() => {
detect(net);
}, 10);
return intervalId;
};

let intervalId;
runCoco().then(id => {
intervalId = id;
});

// Cleanup function to clear interval on unmount
return () => {
if (intervalId) {
clearInterval(intervalId);
}
};
}, []);

return (
<div className="ProjectsExtended">
Expand Down