🔴 Let’s build Siri 2.0 with NEXT.JS 14! (Microsoft Azure, OpenAI, Whisper Speech Recognition AI, TS)
❗️ Get the Code for FREE here (Form must be submitted, not skipped!): aka.ms/sonnyai
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 Looking for the code for my other builds? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as I show you how to build a Siri 2.0 clone from scratch with the newly released Next.js 14. You'll learn the following in this build:
👉 Create a Beautiful UI & UX for our Siri 2.0 clone!
👉 How to use the Azure OpenAI Whisper Speech Recognition Service to convert speech to text!
👉 How to create and leverage the power of Azure OpenAI Service to generate AI Assistant Chat Completions at scale!
👉 How to use the MediaRecorder interface of the MediaStream Recording API to capture user audio!
👉 Use the Web Speech API interface to synthesise an artificial voice to output the AI Assistant replies!
👉 How to build a beautiful UI design with Tailwind CSS!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
🕐 TIMESTAMPS:
00:00 Introduction
01:04 Build Demo
04:26 Build Tech
06:24 Build Plan
10:38 Initialising the Build
15:15 Build Layout
16:02 Building the Header Section (1/2)
18:53 Implementing Shadcn/ui
21:35 Building the Header Section (2/2)
25:13 Building the Form Section
30:08 Building the Messages Section in Form
31:46 Building the Recorder Section in Form
32:53 Creating the Messages Component
35:33 Building the Recorder Component
39:24 Building the Hidden Fields Section in Form
42:15 Implementing Functionality to Capture Audio
48:19 Implementing the MediaRecorder Interface
58:41 Implementing the Start & Stop Recording Functionality
1:15:53 Implementing Next.js 14 Server Actions (1/2)
1:17:20 Setting Up Microsoft Azure OpenAI Service
1:20:44 Implementing Microsoft Azure OpenAI Service
1:24:06 Implementing the Whisper API Model
1:28:15 Implementing Next.js 14 Server Actions (2/2)
1:44:18 Building the Messages Component (1/2)
1:53:02 Implementing a Message Loader
1:55:57 Implementing the Voice Synthesizer Functionality with Web Speech API
2:15:30 Building the Messages Component (2/2)
2:18:50 Deploying to Vercel
2:30:59 Final Build Demo
2:33:36 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Siri, Apple and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.
#nextjs #nextjs14 #react #siri #voiceassistant #typescript #reactjs #openai #coding #javascript #tailwindcss #shadcn #nosql #reactjstutorial #coding #tutorial #beginner #programming #ai #apple #voicerecognition #machinelearning
Пікірлер: 28
Sonny, you are a great teacher i am a big fan, much love from Angola 🇦🇴 ❤️
Sonny, you will always be my mentor. I am so happy to have access to this tutorial video ❤❤❤
YOU are the best , much love form Rwanda
Amazing project. Thanks a bunch for all you do. Your great teacher, programmer and a problem solver in the tech world. Much love ❤
Sonny you have been by far and wide the best online teacher. Your content is both extremely informative, inclusive, and entertaining. Just wanted to personally thank you as I used some of your logic for a personal project of mine. Cheers!
@SonnySangha
2 ай бұрын
Thank you this means a tonne!!
I love how you described the tools you intended to use today as "...so much madness,..." as it actually is mind-boggling how many technologies were used in the making of this video.
amazing stuff, thank you
Amazing sonny, would be nice if this is done with react native
Thanks a lot for the great video… Please consider creating a short tutorial on implementing live updates (real time) notifications for a very simple social media functionality like (some liked your post). Simple app the aim of which is to show how to implement notifications (not chat app) in Nextjs 14 with the server actions. TS optional but preferable! 😅
Incorrect Dependency in useEffect: In the first useEffect, the dependency array [window] is likely incorrect. Instead, you should put an empty array [] to ensure that the effect runs only once when the component mounts.
Looks sick, but how to optimize the latency issue
Thanks for this Sonny! Is it possible if you could share source code?
DEVIN is on the way
Sonny sir, Azure OpenAI is not available for free on trial version, How do i use it to continue the project?
@ifaizanMK
Күн бұрын
yeah got stuck with the same issue...did you find any way to get it free?
Your the best brother that was awesome app , like to watch more upcoming❤ , brother can you make a video on firebase with next auth with email and password login and register
Having issues with azure sign up it says my debit card name is invalid
@DigitalAlchemyst
2 ай бұрын
if anyone knows how to solve issues with this please let me know =/
I'm being asked for a company email address to access the Azure OpenAI. Anyone else?
@NukelimerCodes
2 ай бұрын
Me too, I am stuck.
Make video react native cli
Can you please make a tutorial related to BOO|match dating application please .. I really feel glad if u can make .. i m from India .. nd lear so much things from you.
Please add timestamps
Big love sonny sir ❣❤❤❤❤ please one like my comments i am your big fan ❤
@SonnySangha
2 ай бұрын
Thank you for being awesome!!!
Make it real time it should continuously listen
I am wondering why you didnt break parts of this out into components like the header form section and such. not that this way is wrong or anything, its just not your style at all, feels weird coming from you.