Build Facial Recognition and Chatbot AIs using TypeScript with Jack Herrington

In this JS Drop, Danny Thompson is joined by YouTuber Jack Herrington to explore a unique TypeScript and AI project that lets you recognize TV show characters in real time. Just point your camera at a character, and instantly get their details or even chat with them as if they were real! Jack walks through the tech, explaining how client-side face recognition and server-side AI work together to make this possible using the Versal AI library. They discuss prompt engineering, building efficient APIs, and ensuring smooth, interactive AI responses. Jack also shares potential real-world applications, from entertainment to security.

Chapters

0:32 Project Overview – Jack explains the AI-powered character recognition project
2:17 Setting Up the Project – Overview of how the application is structured and initial setup
3:04 Client-Side AI – How face detection and character recognition work on the client side
5:12 Switching to Server Side – Jack demonstrates server-side AI and setting up API endpoints
8:20 Explaining AI Tooling – How tools and prompts are used to give context to the AI
10:01 Detailed Prompt Structure – Breaking down the prompt and character context for AI responses
12:40 Client-Server Interaction – Using the Versal AI library to manage streaming responses
15:09 Handling Character Data – Training the AI on specific character images and details
18:15 Practical Use Cases – Discussing potential real-world applications for the face recognition tool
21:34 Challenges and Lessons Learned – Jack shares obstacles he faced and how he overcame them
25:45 Building the API – Tips and considerations for creating reliable API endpoints
28:40 Handling User Inputs – Testing unexpected questions and how the AI responds
32:00 Using Advanced AI Models – Jack talks about choosing GPT-4 and issues with smaller models
35:47 Introducing ProNextJS.dev – Jack discusses his new Next.js course, covering advanced topics
37:20 Closing Thoughts – Danny and Jack wrap up with final thoughts and a link to the GitHub repo

Follow Jack Herrington on Social Media Twitter: https://x.com/jherr Linkedin: https://www.linkedin.com/in/jherr/ YouTube: https://www.youtube.com/@jherr