🔴 Build a React Native Voice Assistant App with ChatGPT & DALL-E | AI Image Creation
Vložit
- čas přidán 2. 06. 2024
- Hello everyone 👋, today I'm going to show you how to make a very cool AI Voice Assistant using React Native, ChatGPT and DALL-E. This will be fully functioning AI Voice Assistant and you will learn a lot in this single video like how to convert voice into text and then text into speech. After this video you will be able to create professional apps like this one. so sit back and relax, grab some snacks and enjoy the tutorial.
make sure you like this video and subscribe the channel for more react native videos.
🚀 Source Code: links.codewithnomi.com/AI-voi...
Add TailwindCSS in React Native : • Food Delivery App with...
Add Navigation in React Native : • Food Delivery App with...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewith...
🚨 more videos on react native:
Food Recipe App with Reanimated : • 🔴 Build Food Recipe Ap...
Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
Movie App : • 🔴 Build Movie App Usin...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Travel App UI : • 🔴 Travel App UI | Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
CZcams Clone App: • 🔴 CZcams Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #aiapp #iosdeveloper #buildinpublic #opensource #reactnativeapp #chatgpt4 #reactjstutorial #typescript #ai #chatgpt #dalle2 #machinelearning
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
ai voice assistant
chatgpt api
dalle image creationg
react native ai voice assistant
ai app development
what is machine learning
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Introduction
03:33 - Creating App
07:10 - Add TailwindCSS
09:11 - Add Navigation
12:23 - Welcome Screen UI
17:30 - Home Screen UI
35:27 - Implement Voice To Text
43:18 - Implement OpenAI API
01:05:00 - Implement Text To Speech
01:10:22 - Final Demo
01:28:28 - Movie Search API
01:34:43 - Final Demo
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Awesome work, hats off!
Thanks a lot for this video.
Very informative
Thank you for your videos, can u please show us how to change font family using nativewind and add navigation like bottom navigtion
Sir Thanks for this Project
Bhaia sukeria.Ap Great Ho.
Thanks for your amazing tutorial. I did a code along with this video on ios. And I found out that If I call Tts.speak() after voice.stop(), Tts.speak() would n't speak. I do not why voice.stop() prevent Tts.speak() from speaking. Can you help? Thanks!
Thank you 🎉❤😊
Many thanks! I did a code along with this video and used typescript on both android and ios. The android version automatically stops listening if you stop speaking for a second or two. I had to handle it differently. I look forward to more videos from you. Thank you
can you tell me the solution , I implemented react-native-voice, its working on ios but it doesn't work on android
@@usmanrasheed626 i did not done manual linking on android. still its working for me.
can you explain how to convert it into android build
@@ajaychawda682 my voice is not changing in the text format ...if i print the result in the console then it is visible but not added in the ui of mobile
my voice is not changing in the text format ...if i print the result in the console then it is visible but not added in the ui of mobile
Cute UI 😊😊
This was a very informative video. I Thank You for your effort and hard work. Is it possible to convert this into a Web application?
Thank you
very valuable knowledge, thanks for sharing
At last, new app🎉
what is the best npm package for voice to text in expo
You are on fire 🎉
Thx a lot
You beautiful man! 🤣 This is amazing. Thanks you so much. Do you believe it’s possible to do a conversational bot trained on your own data with this development?
Can you please tell me how to implement user authentication for this particular app??
trying to get this working with expo on windows any help appreciated
thanks😍
Finally 🎉❤
Hello, maybe do you now how manually or automatically link the NativeModule on Android?
my voice is not changing in the text format ...if i print the result in the console then it is visible but not added in the ui of mobile
At 11:59, I run the app using npm start and get an error message: Unable to resolve module ../screens/HomeScreen.js from /mfj-ai-app-project/navigation/index.js
None of these files exists:
*screens/Homescreen.js (.native| .ios.ts|.native.ts| .ios.tsx ...........Many more strings. Iam completely stuck and the app will not run anymore. I am using Expo and not bare React Native CLI
Can you make something like this in expo as I'm new to react native so I wanna try it
amazing. Please make a complete Food delivery app with admin and user panel🥰
did you check this video:
czcams.com/video/v-zxqkz1T8E/video.html
@@codewithnomibrother open ai api key not free it's paid 😕..make voice asitant using any free api
in windows i m facing issue for react-native-tts.... help needed
Remarkable stuff! Learning so much from your videos! Is there a way to deploy it and show people like you can with Expo?
sure, I'll create a video on deployment 🙂
@@codewithnomi that would be aweome thank you!! if you could also show us how you add your projects to github that would be awesome as well!!!
@@codewithnomi brother when i generate the build then tts engines not installed error come in the android
Why I'm getting this type of error ? error : [TypeError: Cannot read property 'startSpeech' of null]
I'm running this app on my expo application. Any solution. Please help me!
thank you for all the amazing content! I would like to ask you if you intend to build an app with the latest expo router? expo 49 is released!
sure, I'll check
Good Evening Sir, I am trying to create this app but i don't have the images. can you provide the all images which are use in this project? also I'm trying to find this images on your git hub account but i could not find anything.
i want to add a feature which is AI generating videos , is that possible ?
Hi bro I am premkumar I want the project "voice assistant app with chatgpt and dalle" but payment method is not working in ur website
Hey nomi, Screen Component itself having built-in naviagtion in props, but why you took the useNavigation hook additionally. is there any specific reason for that like performance incease
can you add the timestamp from the video, I'm not really sure what you are talking about!!!
I am facing this error plz solution permanent.
react-native run-android error "Task :app:javaPreCompileDebug FAILED"
1.: I tried to delete the android/app/build folder and all seems to work fine but only the first time. When I recompile (without deleting the folder) I get:
2.) I need to delete the build folder every time before run the project?
Brother plz try to make mroe awesome project of ai using react native it will be helpfull for us
I know how to make a backend using fast api python but I have no idea how to plug it to the React Native front end. Can you make a tutorial about using React Native for fontend and python for the backend?
Have you found any related videos? If yes then please share the link
can i do the same dev. in windows too!? bcz you are using ios..
it's amazing... Can you please also add chat option in it ? Please I want chat option with voice option .❤
my voice is not changing in the text format ...if i print the result in the console then it is visible but not added in the ui of mobile
help me out
Sir nice work i most say, but you should have allowed user to type text also to get answers, that way it will be more fantastic,if possible try and implement.thank for the effort sir
I thought the same after uploading the video 😅, will add it to the project when i get the time 😉
@@codewithnomi Thank You Sir, I Will be Counting on you sir
If possible use Expo sir
how to link react-native-community/voice with expo react native project
I cannot see the assets in the git hub repo, please help
thanks for this can u use typescript in the next projects ?
I will try
Thanks for the tutorial video. Can you explain to me what the question mark in this code means and what is its function? res?.data?.data[0]?.url
It means if not null in general. In strings it means not null or empty string. In arrays it means the array not null or empty array
amazing brother ❤. I am totally new to react native and I have started with expo, so can you please guide me which cases should I use expo or react native cli pls
For now I'll suggest you to use expo and as you gain a little experience move to cli approach because expo is limited when it comes to native features. For larger projects you may need to use the cli approach because it lets you control all native features.
@@codewithnomi thanks bro ❤
very awesome tutorial sir! can i use expo cli for this one? im planning to add it on my portfolio 😊 thank you
You can, but some libraries may not work in expo so you'll have to find their fixes online.
Waw🎉 finLY
Thank you for the video ! It's really helpful. I am trying to make this app with expo but getting error while using react native community voice. Error - error - [TypeError: Cannot read property 'startSpeech' of null]
use react native cli instead of expo. Worked when i switched
42:11 I don't receive text or any error in console
hello sir. The work is very good. What should I do to run this application in Android emulator on my Windows device? I'm new to React Native
Did you found solution?
For dall-e, chatgpt and smart api for these three api's Do we have to give separate cost ?
hey are u using android emulator or iphone emulator...if android then tell me how properly link voice package ..my voice is not changing in the text
I build react native apps with expo. Will I be able to follow this tutorial ?? Will all npm packages work with expo ??
Not sure, you'll have to try 😉
Finally
I an getting a error axios :req faild code 429
Even I didn't use api
hi brother does this require me to pay for the chatgpt api or not ? thanks !
how to compile this to apk
Is anyone else having trouble setting up the environment? The second it gets working something seems to pop up. Right now its saying "RNSScreenStackHeaderConfig not being found in the UIManager."
you need to link the navigation library with react native, run these commands:
1) cd ios
2) pod install
what mac are you using for development?
macbook m2 pro, but it's more than enough
hey Nomi .when i'm giving the first prompt it does'nt give me any response and when I try to give second prompt it gives an error called Request failed with status code 429?
check your api usage, maybe your api usage is full, if yes then create a new open ai account and use that api
Thank you.and i tried that method also but it did't get resolved. is there any other alternatives?@@codewithnomi
and i'm doing it in windows
@@codewithnomi
any idea why this keeps happening when I go to launch in expo Invariant Violation: `new NativeEventEmitter()` requires a non-null argument., js engine: hermes
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
just tried to run this project and its working fine on ios
@@codewithnomi it's because I'm on windows trying to get it to work with Expo and Expo Go, I can't seem to get around these errors. I've been trying things for days. Any ideas?
@@Adrian-yw4qcsorry my friend, I was using the cli approach. not sure about expo.
@@codewithnomi is there any avenue i can take to get it working on windows? I will use CLI if that works...
But i thought cli was expo cli? Or is there another cli.
Sorry i am still learning, but id really love to get this repo working on windows computer somehow, as i only have a windows to design with.
Any help would be super super appreciated.
I will drive traffic to your twitter from our business HumAInProduct as a thank you.
its working?
I request you to make a video on how to add the voice package in android because it is not working for me. Please help me
I am using react native 0.72.4 tsx template twailind installation. but when I apply className=" twailwind class names " app crashes
I'll create a video on tailwind setup in react native using typescript
I was working on e-commerce but I saw, he upload this video then i foget that i was working on e-commerce and now i am creeating this asistaant
thanks 😄
does it working?
@@ajaychawda682 yes
Hi, I am getting this error on Android when I press the Record button. LOG Error [TypeError: Cannot read property 'startSpeech' of null]
How you do grant permissions in Android?
my voice is not changing in the text format ...if i print the result in the console then it is visible but not added in the ui of mobile
in metro bundler it is giving me, speech error handler: {"error": {"message": "7/No match"}}, and i search everywhere but i didn't get a solution
await Voice.start('en-US'); use this
Same Issue have you find solution of it?
sir plz add functionality how we save images in gallery when we ask ChatGPT for create image
ah, I should've added this feature 😕. I'm sure you'll find a way to do this 😉.
thank you sir for the great app, i have clone your repo from github but the voice doesn't work. It seem like doesn't hear what i say
build the pod file and reinstall all the modules, also check your mic then give it a try
@@codewithnomi if I'm on windows should I also download pod etc and paste some code in iOS?? Plz tell us for android devices
@@ZeshanMukhtar1 you don't need to generate pods for android on windows
@@codewithnomi bro, I have watched your video 3 times but when I code there are dependencies version issue, I what if I clone the repo and change the openai api key, 🗝️ I mean the only thing is to change the open ai api key or any others packages too ?
@@codewithnomi bro I'm facing an error when I start playing mic it is logging an error that that is from error handler ، Can U help
Asalam O Alikum Nomi Bhai ! LOVE YOUR VIDEO ... Please Could You Please Make A Complete Course on React Native CLI in which we Cover Each and Every Topic of React Native !! It will be very Grateful act from your side brother ❤ Eagerly Awaiting Brother ❤ for your Response JAZAKALLAH KHAIR ❤❤❤
WS!
sure brother, noted.
@@codewithnomi ❤❤❤
after cloning the repo , changing the open ai key and enabling required permitions in android folder ( on windows ) i am getting this error
when i press recording button i see this error in the log
``` LOG speech start event {"error": false}
LOG speech start event {"error": false}
LOG results
LOG speech stop event {"error": false}
LOG speech error: {"error": {"message": "7/No match"}}
LOG speech start event {"error": false}
LOG speech start event {"error": false}
LOG speech start event {"error": false}
LOG speech start event {"error": false}
LOG speech stop event {"error": false}
LOG speech error: {"error": {"message": "7/No match"}}```
pl help me to fix this 😢😢
I haven't tested this app on android, you may have to check the documentation of speach to text library for android setup.
can I make this app using expo cli.
Off course you can, you will need to use the voice and text libraries that work with expo
assalaam alykum, please i have been encountering error 429 from axios and the voice library is not rendering my request to the apiCall.😔😔
did u found solution to error 429
No
Hello Sir
Sir mery pass windows laptop hai ma kesy ye wali chatgpt ki coding kr skta hun
yes absolutely, but the speech and voice library may not properly work so you'll have to set them up using their documentation.
hi, i am getting error [AxiosError: Request failed with status code 429]. can you please help. i did not got response single time. and not called multiple times
you may be using an expired api key. Go to openAI api section, check your api usage, if it says expired then you will need to use a new account to create an api key.
I hope this will resolve your issue.
@@codewithnomi thank you, finally its working on android and ios both, i created another openai account.
one issue facing on ios is tts is getting triggerd on ios but not giving any sound. on android its working good. wil figure out the issue. thanks once again.
@@ajaychawda682 try toggling the mute switch on ios device.
@@codewithnomi i am also getting same error. i have chnaged the api key also but still facing same issue. kindly guide
hello i have a question. Why do you use tailwind ?
Fast development
@@codewithnomi but so many people dont know tailwind. İf i want to use tailwind , sholuld i learn tailwind
@@emresen7644 well its very easy to use, classes are self explanatory but its not necessary, you can use other UI kits or stylesheet 😊
@@codewithnomi thank you 😀😀 i like your projects and videos
Best part: "Quatum computing is an area of blah, blah, blah" 😂
😄
For the error speech error handler: {"error": {"message": "7/No match"}}, give microphone permission from your emulator to host device in the emulator settings
How you solve this error
@@monikadewangan7619 as I said go to emulator settings and give permission for microphone to the host device, right now your voice is not getting registered as permission is not granted
@@monikadewangan7619 Give permission from your emulator setting to listen through the host ( your pc ) and take commands, right now what might be happening is that your voice is not getting registered
Is it possible to get working on windows somehow?
Possible, you may face some issues but there are solutions online 😉
Can you make a tutorial on how to build a point of sale application using react native
will do in future 😉
Thank you my role model. I will wait for the good news
why not using expo any good reason?
I have created some of the projects in expo, trying to cover both approaches.
what do i do in react native community voice if im using android?
Check the documentation!
thanks but the problem comes with the gradle file it has errors and cant run it on android studio
@@codewithnomi
Text to speech not working on android (i used usage in android) and my recording button needs to be tapped again to get user and assistant response. Please help
Hey did you solved the issue i am facing issue while setting up for react-native/communtiy/voice
await Voice.start('en-US'); use this
@@ShortCodeDevdid you implemented app in android please share me your social so i can contact you if possible
it is showing this error during api call if anyone have idea about it>error: [AxiosError: Request failed with status code 429]
you may be using an expired api key. Go to openAI api section, check your api usage, if it says expired then you will need to use a new account to create an api key.
I hope this will resolve your issue.
@@codewithnomi not working
I'm getting this error. "Axios Request failed with status code 429"
There can be two reasons for this error:
1) open AI api is limited to only 3 api calls per minute if you are using the free version.
2) check your open AI api key usage, if it says expired then you will need to use a new account to create an api key.
I hope these will resolve your issue
@@codewithnomi you're correct. it's my account expired. Thanks a lot!
@@chamaldezilva Did your issue resolve? Or is there no way to use open ai api for free
error:AxiosError: Request failed with status code 429] what is the solution
There can be two reasons for this error:
1) open Al api is limited to only 3 api calls per minute if you are using the free version.
2) check your open Al api key usage, if it says expired then you will need to use a new account to create an api key.
hope these will resolve your issue
@@codewithnomi There is no problem in the ios emulator, if the android emulator is not the microphone does not work, why?
erroraxioserror request failed with status code 401 react native
i am getting this error.can you help me?
401 error means that you are using the wrong api key, create new api key and use that
@@codewithnomi i created new account and took key, but the same error is showing.Any solution?
@@akshaysabu9504 then check of you calling the api correctly, check openAI api reference
same error
@@akshaysabu9504
can publish this app for production?
yes you can
@@codewithnomi Do I need to buy any api for this app?
@@pritambag1895 yes you will need to upgrade your openAI account
your code is not working now
my app crashing after eas build
react native voice community is not working in android
Hello, could you have any tips on how to build this on Windows for iOS? I tried expo go but could not get it running for your code. Thanks.
some libraries may not work for android like voice and speech, you have to check their documentation to set them up for android
@@codewithnomi Well I got my hand on a mac (remotely) and did the install, now I keep getting "NativeEventEmitter() requires a non null argument" and "reactNativeAI has not been registered". Could you help? Thanks.
PS: Updated pods, updated node modules, downgraded tailwindcss to 3.3.2 and finally got it to work.
Wish the react stack was more stable and had more specific error messages.
Error: [AxiosError: Request failed with status code 429]
limit exceeded it means
Rnf components is missing
@AliaksandrPushnou can u provide the github link if u r written for android
does it work for android
You may face some issues on android, read the documentation for libraries used to setup for android.
Thank you, my teacher. you are the best.
React native community voice android integration ? Can you help
you have to check their documentation for this 🙏
@@codewithnomi already done bro thanks for this amazing tutorial
@@inamulhasans9461 you are great 👍
bro can u share source code ....
@@inamulhasans9461 i have seen their documentation and its not working for me what to do ?
can you tell your github repo
WARN Possible Unhandled Promise Rejection (id: 3):
TypeError: Cannot read property 'startSpeech' of null
TypeError: Cannot read property 'startSpeech' of null
im getting this error. please anyone help to solve it
anyone github link please for android
Bo ya project both IOS and Android ky liya ha, ya only for IOS??
both, if you face any issues on android you can always find solutions online 😉
@@codewithnomi Thankks
In js file