Building an AI-Powered Next.js 14 Web App with People Detection & Recording | using ShadcnUI
Vložit
- čas přidán 27. 07. 2024
- Learn how to build an AI-powered web app using ShadcnUI & Next.js 14. This tutorial will walk you through people detection & recording features, incorporating TailwindCSS and OpenAI technology TensorflowJS. Ready to elevate your web development skills along with Artificial Intelligence? Let's get started!
Live Website: watchtower-ai.vercel.app/
Github repository: github.com/KoushikJit/watchto...
Timestamps :
0:00 Intro
1:39 Creating a Hello World app
4:52 Installing UI Library shadcn/ui
7:12 Adding Webcam
9:14 Layout using tailwind.css
15:53 Implementing Dark Mode
19:20 Mirror webcam video
21:00 More layout using shadcn & tailwind
25:50 Using Sonner from shadcn/ui
26:54 Adding animation to Buttons
27:59 Popover component for volume slider
31:30 Adding audio for notification sounds
34:48 Layout code for wiki section
37:20 Implementing Tensorflow
39:08 Loading cocossd model
42:16 Loading page when model is loading
44:46 Running predictions with model
50:05 Draw objects on canvas
58:45 Updating draw logic for mirrored video
1:03:38 Add recording feature
1:18:00 Add buttons to wiki section
1:20:03 Image capture
1:21:55 Adding social handles
1:23:06 Deployment
I created a Next.js 14 website that uses artificial intelligence to detect people, records a 30-second clip, and saves it for review later.
In this video I'll show how I made it from scratch, and deployed it to the cloud, so that everyone can use it.
The Link of the actual website has been shared below.
You don't need any prior knowledge of either NextJS, Tensorflow, or any of the packages that I am going to use.
All you need is NodeJS installed and a text editor like VS Code. - Věda a technologie
This looks great buddy 😊
Amazing! keep on adding such content!!!! on nextjs and tensorflow I will follow you along
Please make more Next14 + Tensorflow, this is a great project
Thank you for your feedback! I'm glad you enjoyed the project. I'll definitely consider making more videos on Next.js 14 and Tensorflow in the future.
@@maplearcadecode That's a great idea for a new project using 2 or 3 dimensional data for time series forecasting using Tensorflow.
Very good work!
Thanks for sharinng!
Thank you so much! I'm glad you liked it.
This is great!
thanks for the knowledge
this is so interesting!
That's really awesome 🎉
Thank you
Excellent
This is SOOOOOO COOOOOOOL!!!
Thank you 🙌
buddy u are great please upload more node js next js ai projects
Thank you for your kind words Hamza. I’ll surely do :)
Super
hey this seems really amazing. i am into computer vision but haven't integrated it with nextjs
Thanks for your comment! I'm glad you find the video amazing. Integrating computer vision with Next.js can open up a lot of possibilities. Give it a try!
legend
I appreciate your kind words! It means a lot to me that you enjoyed the video.
For some reasons I don't know Why; but I get "Cannot find module 'next-themes' or its corresponding type declarations.ts(2307)"
But I have installed the package just fine, why is that?
pls make more of these
Thank you for your support! I'm glad you enjoyed the video. I'll definitely consider making more content like this in the future.
Wait what. I found a genius guy lol
Thank you so much for your kind words! I'm glad you found the video helpful.
Pls add a featurs that if a person does not look into the camera for a particular time, then a warning message and sound pops. This feature will be useful in online exams
wow
I can't seem to have the webcam work on mobile browsers, it doesn't ask for permission to use the camera and even when I always allow it, the webcam area is blank for some reason.
Because you can't use webcam in mobile through webapp
Nice! you have 1 my sub!!
I have a question: What configuration / extensions are you using to format and getting the automopletion? I have prettier and in React i always get the autocomplete but neither of those are working with Next (this is my first next project)
Thanks!!
Thank you for subscribing :)
The issue seems to be with the typescript extension.
Check if TypeScript is globally installed with `tsc --version`. If not, install it globally using `npm install -g typescript`.
After this open command palette in VSCode with (shift+command+p) and search 'typescript: Restart TS Server'
After this whenever you are typing, you can hit (control + space) to make the code completion suggestions box to pop up.
____________________________________________________
For React code snippets I am using "ES7+ React/Redux/React-Native snippets". But I am assuming you already have it.
for tailwindcss: "Tailwind CSS IntelliSense"
Thank you so much! ill try that@@maplearcadecode
Please make more videos🙏
Hey, thanks for the comment! I'll try my best to make more videos that you'll enjoy. Stay tuned!
@@maplearcadecode i would love to see more videos❤️ Thankyou
wait next video
can you make more projects using ai + web development???
Sure, I'll make more projects using AI and web development
be regular
TensorflowJS isn't "OpenAI technology", that's Google open-source library :)
I am afraid you have misunderstood what I said. Do take a look at the github repository of tensorflow JS here: github.com/tensorflow/tfjs.
Cheers :)
LOL dont edit your comment after OP corrected you
@@akashdeb9823 I edited before that ))
Was working through this, but using a HTML video being streamed in, which is fine because model.detect takes HTMLVideoElement. However I get the error:
Unhandled Runtime Error
SecurityError: Failed to execute 'texSubImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.
Any ideas why I might be getting this? Thanks!
Do I really need to do this!?!?
Capture frames from the HTMLVideoElement: Since the video stream is coming from an HTMLVideoElement, you would need to capture individual frames from this element and pass them to the model for object detection. You can do this by drawing the current frame onto a canvas and then converting this canvas into an image tensor that can be passed to the model.