Skip to content

Commit 5d4c188

Browse files
author
salim laimeche
committed
commit direct in main - first iteration is hover
1 parent 96a8a13 commit 5d4c188

File tree

7 files changed

+540
-553
lines changed

7 files changed

+540
-553
lines changed

‎components/Board.tsx

Lines changed: 106 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,114 @@
11
"use client"
22

3-
import { type ObjectDetection } from "@tensorflow-models/coco-ssd";
4-
import { useTfjsBackendWeb } from "@/hooks/use-tfjs-backend";
5-
import useCocoSsd from "@/hooks/use-cocossd";
6-
import ModelSelection from "./model-selection";
7-
import ModelLoader from "./model-loader";
8-
import { ModelComputerVision, modelList } from "@/models/model-list";
9-
import CameraCard from "./camera-card";
10-
import useBoardDetection from "@/hooks/use-board-detection";
11-
import useCamerasConfig from "@/hooks/use-cameras-config";
12-
import { getCameraByDeviceId } from "@/lib/data/local-storage/camera-store";
133
import {
14-
ifDontHaveDetectionZone,
15-
ifHaveDetectionZone,
16-
} from "@/lib/helper-board/helper";
17-
import useYolodisTfjs from "@/hooks/use-yolo-tfjs";
18-
import { useModelStore } from "@/lib/store/model-store";
19-
import { yolodetectVideo } from "@/lib/yolov8n/detect";
20-
import { useYoloBoardDetectStore } from "@/lib/store/yolo-board-detect";
4+
DetectedObject,
5+
type ObjectDetection,
6+
} from "@tensorflow-models/coco-ssd"
7+
import { useTfjsBackendWeb } from "@/hooks/use-tfjs-backend"
8+
import useCocoSsd from "@/hooks/use-cocossd"
9+
import ModelSelection from "./model-selection"
10+
import ModelLoader from "./model-loader"
11+
import { ModelComputerVision, modelList } from "@/models/model-list"
12+
import CameraCard from "./camera-card"
13+
import useBoardDetection from "@/hooks/use-board-detection"
14+
import useCamerasConfig from "@/hooks/use-cameras-config"
15+
import { getCameraByDeviceId } from "@/lib/data/local-storage/camera-store"
16+
import {
17+
ifDontHaveDetectionZone,
18+
ifHaveDetectionZone,
19+
} from "@/lib/helper-board/helper"
20+
import useYolodisTfjs, { YoloModel } from "@/hooks/use-yolo-tfjs"
21+
import { useModelStore } from "@/lib/store/model-store"
22+
import { detectVideo } from "@/lib/yolov8n/detect"
23+
import {
24+
useYoloBoardDetectStore,
25+
YoloDetected,
26+
} from "@/lib/store/yolo-board-detect"
2127

2228
export default function Board({ user }) {
23-
const ready = useTfjsBackendWeb({ backend: "webgl" });
24-
const { modelName } = useModelStore();
25-
const { cocoSsd, loadCoco } = useCocoSsd({ ready });
26-
const { loadModel, model, percentLoaded, setDisposeDetect } = useYolodisTfjs({
27-
ready,
28-
});
29-
console.log(model);
30-
const { webcamRefs, cameras } = useCamerasConfig();
31-
useBoardDetection({
32-
ready,
33-
net:
34-
modelName === ModelComputerVision.COCO_SSD
35-
? cocoSsd
36-
: modelName === ModelComputerVision.DETECTION
37-
? model
38-
: null,
39-
runObjectDetection,
40-
});
29+
const ready = useTfjsBackendWeb({ backend: "webgl" })
30+
const { modelName } = useModelStore()
31+
const { cocoSsd, loadCoco } = useCocoSsd({ ready })
32+
const { loadModel, model, percentLoaded, setDisposeDetect } = useYolodisTfjs({
33+
ready,
34+
})
35+
console.log(model)
36+
const { webcamRefs, cameras } = useCamerasConfig()
37+
useBoardDetection({
38+
ready,
39+
net:
40+
modelName === ModelComputerVision.COCO_SSD
41+
? cocoSsd
42+
: modelName === ModelComputerVision.DETECTION
43+
? model
44+
: null,
45+
runObjectDetection,
46+
})
4147

42-
async function runObjectDetection(
43-
net: ObjectDetection | { net: any; inputShape: number[] },
44-
) {
45-
console.log("run obj detection");
46-
webcamRefs.current.forEach(async (webcam) => {
47-
let objectDetected;
48-
if (webcam !== null && webcam.video?.readyState === 4) {
49-
const deviceId = (webcam.props.videoConstraints as any).deviceId;
50-
const cameraStorage = getCameraByDeviceId(deviceId);
51-
if (cameraStorage?.noDetectTime?.length === 8) {
52-
// check if the time is between the noDetectTime, split by 4 : HHmm - HHmm
53-
const now = new Date();
54-
const nowHours = now.getHours();
55-
const nowMinutes = now.getMinutes();
56-
const nowTime = `${nowHours}${nowMinutes}`;
57-
const [start, end] = cameraStorage.noDetectTime.match(/.{1,4}/g);
58-
if (nowTime >= start && nowTime <= end) {
59-
console.log("no detect time");
60-
return;
61-
}
62-
}
63-
console.log("detecting");
64-
if (modelName === ModelComputerVision.COCO_SSD) {
65-
objectDetected = await cocoSsd.detect(webcam.video, undefined, 0.1);
66-
} else if (modelName === ModelComputerVision.DETECTION) {
67-
await yolodetectVideo(webcam.video, net);
68-
objectDetected = useYoloBoardDetectStore.getState().yoloDetected;
69-
}
70-
console.log("in board", objectDetected);
71-
if (cameraStorage.detectionZone !== null) {
72-
ifHaveDetectionZone(
73-
cameraStorage,
74-
objectDetected,
75-
webcam,
76-
user,
77-
modelName,
78-
);
79-
} else {
80-
ifDontHaveDetectionZone(objectDetected, webcam, user, modelName);
81-
}
82-
}
83-
});
84-
}
48+
async function runObjectDetection(net: ObjectDetection | YoloModel) {
49+
console.log("run obj detection")
50+
webcamRefs.current.forEach(async webcam => {
51+
let objectDetected: DetectedObject[] | YoloDetected[]
52+
if (webcam !== null && webcam.video?.readyState === 4) {
53+
const deviceId = (webcam.props.videoConstraints as any).deviceId
54+
const cameraStorage = getCameraByDeviceId(deviceId)
55+
if (cameraStorage?.noDetectTime?.length === 8) {
56+
// check if the time is between the noDetectTime, split by 4 : HHmm - HHmm
57+
const now = new Date()
58+
const nowHours = now.getHours()
59+
const nowMinutes = now.getMinutes()
60+
const nowTime = `${nowHours}${nowMinutes}`
61+
const [start, end] = cameraStorage.noDetectTime.match(/.{1,4}/g)
62+
if (nowTime >= start && nowTime <= end) {
63+
console.log("no detect time")
64+
return
65+
}
66+
}
67+
console.log("detecting")
68+
if (modelName === ModelComputerVision.COCO_SSD) {
69+
objectDetected = await cocoSsd.detect(webcam.video, undefined, 0.2)
70+
} else if (modelName === ModelComputerVision.DETECTION) {
71+
detectVideo(webcam.video, model, undefined)
72+
objectDetected = useYoloBoardDetectStore.getState().yoloDetected
73+
}
74+
console.log("in board", objectDetected)
75+
if (cameraStorage.detectionZone !== null) {
76+
ifHaveDetectionZone(
77+
cameraStorage,
78+
objectDetected,
79+
webcam,
80+
user,
81+
modelName
82+
)
83+
} else {
84+
ifDontHaveDetectionZone(objectDetected, webcam, user, modelName)
85+
}
86+
}
87+
})
88+
}
8589

86-
return (
87-
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8 mt-10">
88-
{loadCoco || loadModel ? (
89-
<ModelLoader
90-
model={modelList.find(
91-
(model) =>
92-
model.title === ModelComputerVision.COCO_SSD ||
93-
ModelComputerVision.DETECTION,
94-
)}
95-
percent={percentLoaded && percentLoaded}
96-
/>
97-
) : (
98-
<ModelSelection />
99-
)}
100-
{cameras.map((camera, index) => (
101-
<CameraCard
102-
key={index}
103-
camera={camera}
104-
index={index}
105-
webcamRefs={webcamRefs}
106-
/>
107-
))}
108-
</div>
109-
);
90+
return (
91+
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8 mt-10">
92+
{loadCoco || loadModel ? (
93+
<ModelLoader
94+
model={modelList.find(
95+
model =>
96+
model.title === ModelComputerVision.COCO_SSD ||
97+
ModelComputerVision.DETECTION
98+
)}
99+
percent={percentLoaded && percentLoaded}
100+
/>
101+
) : (
102+
<ModelSelection />
103+
)}
104+
{cameras.map((camera, index) => (
105+
<CameraCard
106+
key={index}
107+
camera={camera}
108+
index={index}
109+
webcamRefs={webcamRefs}
110+
/>
111+
))}
112+
</div>
113+
)
110114
}
111-

‎components/VideoInference.tsx

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,78 +11,78 @@ import { useVideo } from "@/hooks/use-video"
1111
import VideoReader from "./video-reader"
1212
import { useModelStore } from "@/lib/store/model-store"
1313
import drawBoundingBoxes from "@/lib/model-detection/coco-ssd/utils"
14-
import useYolodisTfjs from "@/hooks/use-yolo-tfjs";
15-
import { yolodetectVideo } from "@/lib/yolov8n/detect"
14+
import useYolodisTfjs from "@/hooks/use-yolo-tfjs"
15+
import { detectVideo } from "@/lib/yolov8n/detect"
1616

1717
interface IProps {
18-
user: UserView;
18+
user: UserView
1919
}
2020

2121
export default function VideoInference({ user }: IProps) {
22-
const { modelName } = useModelStore();
23-
const ready = useTfjsBackendWeb({ backend: "webgl" });
24-
const { cocoSsd, loadCoco } = useCocoSsd({ ready });
25-
const { loadModel, model, percentLoaded, setDisposeDetect } = useYolodisTfjs({
26-
ready,
27-
});
28-
const { canvasRef, setVideoSrc, videoRef, videoSrc } = useVideo();
22+
const { modelName } = useModelStore()
23+
const ready = useTfjsBackendWeb({ backend: "webgl" })
24+
const { cocoSsd, loadCoco } = useCocoSsd({ ready })
25+
const { loadModel, model, percentLoaded, setDisposeDetect } = useYolodisTfjs({
26+
ready,
27+
})
28+
const { canvasRef, setVideoSrc, videoRef, videoSrc } = useVideo()
2929

30-
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
31-
const file = e.target.files?.[0];
32-
if (file) {
33-
const videoURL = URL.createObjectURL(file);
34-
setVideoSrc(videoURL);
35-
}
36-
};
30+
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
31+
const file = e.target.files?.[0]
32+
if (file) {
33+
const videoURL = URL.createObjectURL(file)
34+
setVideoSrc(videoURL)
35+
}
36+
}
3737

38-
const handleCreateVideoWithBoundingBox = () => {
39-
canvasRef.current.width = videoRef.current.videoWidth;
40-
canvasRef.current.height = videoRef.current.videoHeight;
41-
if (videoRef.current && canvasRef.current) {
42-
const video = videoRef.current;
43-
const canvas = canvasRef.current;
44-
const context = canvas.getContext("2d");
38+
const handleCreateVideoWithBoundingBox = () => {
39+
canvasRef.current.width = videoRef.current.videoWidth
40+
canvasRef.current.height = videoRef.current.videoHeight
41+
if (videoRef.current && canvasRef.current) {
42+
const video = videoRef.current
43+
const canvas = canvasRef.current
44+
const context = canvas.getContext("2d")
4545

46-
video.addEventListener("play", async () => {
47-
modelName === ModelComputerVision.COCO_SSD &&
48-
drawBoundingBoxes(video, context, cocoSsd);
46+
video.addEventListener("play", async () => {
47+
modelName === ModelComputerVision.COCO_SSD &&
48+
drawBoundingBoxes(video, context, cocoSsd)
4949
modelName === ModelComputerVision.DETECTION &&
50-
yolodetectVideo(video,model,canvasRef)
51-
});
52-
}
53-
};
50+
detectVideo(video, model, context)
51+
})
52+
}
53+
}
5454

55-
return (
56-
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3 m-10">
57-
<div className="lg:col-span-2">
58-
<VideoReader
59-
videoRef={videoRef}
60-
canvasRef={canvasRef}
61-
videoSrc={videoSrc}
62-
/>
63-
</div>
64-
<div className="grid gap-4">
65-
<VideoSelect
66-
handleFileChange={handleFileChange}
67-
handleCreateVideoWithBoundingBox={handleCreateVideoWithBoundingBox}
68-
videoRef={videoRef}
69-
canvasRef={canvasRef}
70-
videoSrc={videoSrc}
71-
setVideoSrc={setVideoSrc}
72-
/>
73-
{loadCoco || loadModel ? (
74-
<ModelLoader
75-
model={modelList.find(
76-
(model) =>
77-
model.title === ModelComputerVision.COCO_SSD ||
78-
ModelComputerVision.DETECTION,
79-
)}
80-
percent={percentLoaded}
81-
/>
82-
) : (
83-
<ModelSelection />
84-
)}
85-
</div>
86-
</main>
87-
);
55+
return (
56+
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3 m-10">
57+
<div className="lg:col-span-2">
58+
<VideoReader
59+
videoRef={videoRef}
60+
canvasRef={canvasRef}
61+
videoSrc={videoSrc}
62+
/>
63+
</div>
64+
<div className="grid gap-4">
65+
<VideoSelect
66+
handleFileChange={handleFileChange}
67+
handleCreateVideoWithBoundingBox={handleCreateVideoWithBoundingBox}
68+
videoRef={videoRef}
69+
canvasRef={canvasRef}
70+
videoSrc={videoSrc}
71+
setVideoSrc={setVideoSrc}
72+
/>
73+
{loadCoco || loadModel ? (
74+
<ModelLoader
75+
model={modelList.find(
76+
model =>
77+
model.title === ModelComputerVision.COCO_SSD ||
78+
ModelComputerVision.DETECTION
79+
)}
80+
percent={percentLoaded}
81+
/>
82+
) : (
83+
<ModelSelection />
84+
)}
85+
</div>
86+
</main>
87+
)
8888
}

0 commit comments

Comments
 (0)