Detect Objects in Images with AI in Next.js with Cloudinary
Use object detection to determine what's in a photo in Next.js with Cloudinary AI.
We'll walk through uploading images with Cloudinary and using Content Analysis to scan our pictures for hot dogs.
‣ Catch More Streams: / colbyfayock
‣ Hackathon: https://cld.media/cloudcreate
What's Inside
00:00 - Intro
01:04 - Tool we'll use including Next Cloudinary and Next.js
01:32 - Creating a new Next.js app from scratch
02:42 - Installing and configuring Next Cloudinary
05:00 - Adding an image to a Next.js app from Cloudinary with CldImage and resizing with transformations
07:06 - Using the CldUploadButton to upload images to Cloudinary
14:30 - Setting up Cloudinary Content Analysis Add-On to detect what objects are in a picture
24:20 - Updating UI to show results of if an object is a hot dog
28:52 - Outro
‣ Code: https://github.com/colbyfayock/not-ho...
‣ Demo: https://not-hot-dog.vercel.app/
More Resources
‣ Next Cloudinary: https://next-cloudinary.spacejelly.dev/
‣ Cloudinary Content Analysis Add-On: https://console.cloudinary.com/docume...
‣ Vercel: https://vercel.com/ambassadors/colbyf...
Get more web dev content...
‣ Subscribe: https://www.youtube.com/colbyfayock?s...
‣ Newsletter: https://colbyfayock.com/newsletter
‣ Twitter: / colbyfayock
‣ Twitch: / colbyfayock
What I Use
https://colbyfayock.com/uses
Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/mountaineer/fogg...
License code: HFFHERK9SQB4S4RN
#colbyfayock #nextjs #cloudinary #ai #webdevelopment