Skip to content

Commit e66b4e4

Browse files
piyush-eonpiyush-eon
committed
Thief Detector App with Next JS
0 parents  commit e66b4e4

18 files changed

+5679
-0
lines changed

‎.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/babel", "next/core-web-vitals"]
3+
}

‎.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎app/favicon.ico

25.3 KB
Binary file not shown.

‎app/globals.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 214, 219, 220;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(
22+
to bottom,
23+
transparent,
24+
rgb(var(--background-end-rgb))
25+
)
26+
rgb(var(--background-start-rgb));
27+
}
28+
29+
@layer utilities {
30+
.text-balance {
31+
text-wrap: balance;
32+
}
33+
.gradient {
34+
@apply bg-gradient-to-b from-white via-gray-300 to-gray-600;
35+
}
36+
.gradient-title {
37+
@apply gradient text-transparent bg-clip-text;
38+
}
39+
}

‎app/layout.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Inter } from "next/font/google";
2+
import "./globals.css";
3+
4+
const inter = Inter({ subsets: ["latin"] });
5+
6+
export const metadata = {
7+
title: "Create Next App",
8+
description: "Generated by create next app",
9+
};
10+
11+
export default function RootLayout({ children }) {
12+
return (
13+
<html lang="en">
14+
<body className={inter.className}>{children}</body>
15+
</html>
16+
);
17+
}

‎app/page.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import ObjectDetection from "@/components/object-detection";
2+
3+
export default function Home() {
4+
return (
5+
<main className="flex min-h-screen flex-col items-center p-8">
6+
<h1 className="gradient-title font-extrabold text-3xl md:text-6xl lg:text-8xl tracking-tighter md:px-6 text-center">
7+
Thief Detection Alarm
8+
</h1>
9+
<ObjectDetection />
10+
</main>
11+
);
12+
}

‎components/object-detection.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
"use client";
2+
3+
import React, {useEffect, useRef, useState} from "react";
4+
import Webcam from "react-webcam";
5+
import {load as cocoSSDLoad} from "@tensorflow-models/coco-ssd";
6+
import * as tf from "@tensorflow/tfjs";
7+
import {renderPredictions} from "@/utils/render-predictions";
8+
9+
let detectInterval;
10+
11+
const ObjectDetection = () => {
12+
const [isLoading, setIsLoading] = useState(true);
13+
14+
const webcamRef = useRef(null);
15+
const canvasRef = useRef(null);
16+
17+
async function runCoco() {
18+
setIsLoading(true); // Set loading state to true when model loading starts
19+
const net = await cocoSSDLoad();
20+
setIsLoading(false); // Set loading state to false when model loading completes
21+
22+
detectInterval = setInterval(() => {
23+
runObjectDetection(net); // will build this next
24+
}, 10);
25+
}
26+
27+
async function runObjectDetection(net) {
28+
if (
29+
canvasRef.current &&
30+
webcamRef.current !== null &&
31+
webcamRef.current.video?.readyState === 4
32+
) {
33+
canvasRef.current.width = webcamRef.current.video.videoWidth;
34+
canvasRef.current.height = webcamRef.current.video.videoHeight;
35+
36+
// find detected objects
37+
const detectedObjects = await net.detect(
38+
webcamRef.current.video,
39+
undefined,
40+
0.6
41+
);
42+
43+
// console.log(detectedObjects);
44+
45+
const context = canvasRef.current.getContext("2d");
46+
renderPredictions(detectedObjects, context);
47+
}
48+
}
49+
50+
const showmyVideo = () => {
51+
if (
52+
webcamRef.current !== null &&
53+
webcamRef.current.video?.readyState === 4
54+
) {
55+
const myVideoWidth = webcamRef.current.video.videoWidth;
56+
const myVideoHeight = webcamRef.current.video.videoHeight;
57+
58+
webcamRef.current.video.width = myVideoWidth;
59+
webcamRef.current.video.height = myVideoHeight;
60+
}
61+
};
62+
63+
useEffect(() => {
64+
runCoco();
65+
showmyVideo();
66+
}, []);
67+
68+
return (
69+
<div className="mt-8">
70+
{isLoading ? (
71+
<div className="gradient-text">Loading AI Model...</div>
72+
) : (
73+
<div className="relative flex justify-center items-center gradient p-1.5 rounded-md">
74+
{/* webcam */}
75+
<Webcam
76+
ref={webcamRef}
77+
className="rounded-md w-full lg:h-[720px]"
78+
muted
79+
/>
80+
{/* canvas */}
81+
<canvas
82+
ref={canvasRef}
83+
className="absolute top-0 left-0 z-99999 w-full lg:h-[720px]"
84+
/>
85+
</div>
86+
)}
87+
</div>
88+
);
89+
};
90+
91+
export default ObjectDetection;

‎jsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./*"]
5+
}
6+
}
7+
}

‎next.config.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

0 commit comments

Comments
 (0)