Transform Your App: Integrate Speech-to-Text and Text-to-Speech using

Рет қаралды 8,272

Күн бұрын

Be a paid member. Support my work. Join the Klaturov army!
www.youtube.com/@flutterflowe...
Support my work
github.com/sponsors/bulgariam...
Website
bulgariamitko.github.io/flutt...
You can book me as FF mentor or support my work
calendly.com/bulgaria_mitko
GitHub repo
github.com/bulgariamitko/flut...
Discord channel
/ discord
KZfaq channel
/ @flutterflowexpert
In this comprehensive tutorial, I will walk you through the process of integrating Speech-to-Text and Text-to-Speech functionalities into your app using FlutterFlow and ChatGPT. As voice recognition and synthesis technologies continue to gain prominence, incorporating them into your app can significantly enhance user experience and accessibility. By following my step-by-step guide, you will be able to transform your app and unlock powerful voice features.
Throughout the tutorial, I will cover essential topics such as:
Introduction to FlutterFlow and ChatGPT: I'll provide an overview of FlutterFlow and ChatGPT, discussing their unique features and how they can be used together to create seamless Speech-to-Text and Text-to-Speech conversions.
Setting up the project: I'll guide you through the process of creating a new Flutter project and configuring it with the necessary dependencies for FlutterFlow and ChatGPT integration.
Implementing Speech-to-Text: I'll demonstrate how to use FlutterFlow and ChatGPT to convert spoken words into text, allowing users to interact with your app using their voice. This will include capturing audio input, processing it, and displaying the converted text on the screen.
Implementing Text-to-Speech: I'll show you how to utilize FlutterFlow and ChatGPT to convert text into spoken words, enabling your app to provide audio feedback to users. This will involve generating synthesized speech from text input and playing it back through the device's speakers.
Combining Speech-to-Text and Text-to-Speech: I'll explain how to effectively combine these functionalities in your app, allowing for seamless voice-based interactions between users and your application.
Testing and troubleshooting: I'll provide tips on testing the implemented features, identifying potential issues, and troubleshooting common problems to ensure your app runs smoothly.
Optimizing for performance and user experience: I'll share best practices and recommendations for optimizing the performance of your app and enhancing the overall user experience, ensuring that your app stands out in the market.
By the end of this tutorial, you will have gained the knowledge and skills necessary to integrate Speech-to-Text and Text-to-Speech functionalities into your Flutter app using FlutterFlow and ChatGPT. This will not only transform your app but also open up a world of possibilities for voice-based interactions and improved accessibility. So, let's get started on this exciting journey together!
Code used
github.com/bulgariamitko/flut...
github.com/bulgariamitko/flut...
In this video
00:00 Introduction
01:13 How it works
09:12 Speech to text
21:33 STT & TTS setup
29:48 Thank you for watching

Пікірлер: 88

@mariaperezfernandez1790 Жыл бұрын

Thank you very much it worked!!!!!

@rogeriomarcellino1179 Ай бұрын

Great video Dimitar! Thanks a lot!

@danzreview Жыл бұрын

this is cool

@quengelbeard 3 ай бұрын

Hey Dimitar, great video! Could you make a tutorial on how to use OpenAI Whisper for Voice to Text in flutterflow? Would be super interesting, thanks a lot!

@flutterflowexpert 3 ай бұрын

Yes of course. Here it is :) kzfaq.info/get/bejne/jZOnhbx-2c2UpJs.html

@lailaouritue9434 10 ай бұрын

❤

@flutterflowexpert Жыл бұрын

🌟 Welcome to my video! 🌟 To ensure you have the best experience and access to all the resources mentioned, we've placed all active links in the video description below. This helps me keep everything up-to-date and easy for you to find! 👾 Join my Discord community! It's a great place to connect, share, and get the latest updates. The link is in the description as well. 💖 If you enjoy our content, consider supporting the channel. Every bit of support helps me create more of what you love. Details on how you can support are also in the description. Thank you for watching and being a part of the community! 🚀

@dage6949 Жыл бұрын

Hey how do u add the dependencies i go to pubdev copy link paste into add dependencies have added your speechtotext code then i have error pubget error tts6.1.1 I also copy your talktome code and add the tts link in dependency But when compile i have error pubget I have btn talk in appstate I have the 3 appstates added also

@flutterflowexpert Жыл бұрын

@@dage6949 please find me in the community and DM me and I will help you as here it is difficult to send code and screenshots

@dage6949 Жыл бұрын

@@flutterflowexpert sent dm thanks

@firepill 11 ай бұрын

Thank you for the tutorial! I'm a beginner at FluterFlow, and was wondering if it would be possible to store the FlutterTts object somewhere so I can pause the TTS later on if needed. I can't seem to find a way to create an App state that supports a class like this from an external library....

@flutterflowexpert 11 ай бұрын

That will be hard to implement.

@markberio3194 9 ай бұрын

@@flutterflowexpert Hello how implement speech to text?

@flutterflowexpert 9 ай бұрын

@@markberio3194 It is in the video.

@markberio3194 9 ай бұрын

@@flutterflowexpert yes but how to implement speech to text in term no talk to me

@KAI-el4ld Жыл бұрын

Amazing! can I find this on marketplace?

@flutterflowexpert Жыл бұрын

No this is KZfaq Exclusive content :D

@Statsjk Жыл бұрын

Hello sir, are there any videos on ur channel related to RevenueCat Integration and issues? Plz suggest

@flutterflowexpert Жыл бұрын

Not yet unfortunately, but they are a lot of videos in KZfaq about that topic so I think they are good enough

@YuriyKlyuch 8 ай бұрын

Thanks. About TTS: as I understand it won't work in Android FF preview app, due to some missing permissions

@flutterflowexpert 8 ай бұрын

Yes exactly. It won't work in Android FF preview. You can download the APK from FF to test it.

@HopeRiggan Жыл бұрын

Great channel!! you have a new subscriber. Do you know how it can be configured so that I can speak in Spanish and he also answers me in Spanish??

@flutterflowexpert Жыл бұрын

Yes you just need to add a parameter which is the language parameter it is very easy.

@HopeRiggan Жыл бұрын

Should I just change ("en-US") to ("es-ES") or should I also add some code block? For example in SpeechToTex: if (isInitialized) { _currentLocaleId= "es-Es";

@flutterflowexpert Жыл бұрын

@@HopeRiggan yes, exactly

@marcosaimola 11 ай бұрын

Where the voices come from? Is there a way to add some neural voices to fluter_tts package?

@flutterflowexpert 11 ай бұрын

For more information please read the package GH page github.com/dlutton/flutter_tts

@tijendersingh5363 7 ай бұрын

Hi Dimiar, as of now i am working on speech to text only. i have copied the code and also created all the app vairable. the issue is its not showing me what i am speaking in real time, when i click on webpage after talking then it shows me what i have said from sstSendText but stt is not updated in real time. also when i try to do it next time the result are not updated in button action i have requested permission and then run the custom action speechToText

@flutterflowexpert 7 ай бұрын

That means that you are not updating the state. Please join my Discord channel to share some screnshots of your custom code that you are using.

@davidmoosmann Жыл бұрын

[stt] just stays at Speak... Do I not have to link it somehow so that the generated text is displayed there? How does it work exactly?

@flutterflowexpert Жыл бұрын

You need to use this code and connect it to your AppState - stt github.com/bulgariamitko/flutterflowtutorials/blob/main/Packages/speech_to_text/speech-to-text.dart

@giadavolpin3564 Жыл бұрын

I need to create an OpenAI chatbot with a custom knowledge base. The model is running successfully on Python, but on FlutterFlow I don't know how to add the custom base. What can I do? Thank you so so much!!

@flutterflowexpert Жыл бұрын

Great question. In order to do that you need your your python script and create API calls or webhooks in FF and then just call them.

@giadavolpin3564 Жыл бұрын

@@flutterflowexpert Thank you so much! I was stuck! Just as a side note: I think it would be great to see a full tutorial from indexing to calling on FlutterFlow. There’s nothing like that yet!

@DavideMercuri-qb2ez Жыл бұрын

Wow!! I'm also trying to do the same thing, but feel stuck! Full tutorial from you would be great

@flutterflowexpert Жыл бұрын

@@giadavolpin3564 Great idea actually. I will notice that. Thanks for the suggestion.

@flutterflowexpert Жыл бұрын

@@DavideMercuri-qb2ez I can do a demo, but I do not have a working python script with my own database architecture, if you are willing to prove me a demo one I can do a video how you can connect the two of them in a tutorial. You can find me in my Discord channel - discord.gg/ERDVFBkJmY

@dongwonkwak.official Жыл бұрын

Great tutorial! When I add flutter_tts:^3.6.3 in Custom Actions, there's an error "Custom action has an invalid pubspec dependency: "flutter_tts:^3.6.3". How to fix it?

@flutterflowexpert Жыл бұрын

You need to have space. Like that flutter_tts: ^3.6.3

@dongwonkwak.official Жыл бұрын

@@flutterflowexpert thank you so much!

@avancesodoo5507 3 ай бұрын

On web deploy i cant see locales (returns empty list) somebody knows from where akes this info?

@flutterflowexpert 3 ай бұрын

Which part of the video you are referring to?

@igormts1 11 ай бұрын

Here, everything worked fine on the web and native mobile, but on the web mobile browser, it is unable to capture speech. Is there any reason for this to happen?

@flutterflowexpert 11 ай бұрын

I think you need to use native app for mobile as the mobile browser has limitations.

@user-cd8to4ss7h 3 ай бұрын

Hi Dimitar, great work! Please I tried the text to speech using your custom code, it worked perfect on flutterflow run mode but while testing on mobile, the audio plays and stops every time. What could be the issue?

@flutterflowexpert 3 ай бұрын

Please run your app using FF Local Run and see if you get any errors and if you do post them here or in my Discord channel in order for me to debug it. Also I made a new video STT using OpenAI Whisper kzfaq.info/get/bejne/jZOnhbx-2c2UpJs.html

@user-cd8to4ss7h 3 ай бұрын

@@flutterflowexpert I use Windows but as far as i know there were no errors testing it on run mode. but on my android phone, the speech starts and stops abruptly and so doesn't finish reading the whole text. Kindly help with this.

@user-cd8to4ss7h 3 ай бұрын

@@flutterflowexpert By the way, thanks for the new video. I will check it out

@tkmx797 10 ай бұрын

Hey great video. There's a problem with my custom action. I'm getting a FFAppState function error. Here''s what it says: "The function 'FFAppState' isn't defined. Try importing the library that defines 'FFAppState', correcting the name to the name of an existing function, or defining a function named 'FFAppState'"

@flutterflowexpert 10 ай бұрын

Are you using FFAppState() or FFAppState?

@tkmx797 10 ай бұрын

@@flutterflowexpert I just copied the code the way it is from your git and pasted it on the custom action section. I don't know if it's a me thing but when I try to add dependencies flutterflow doesn't add them from the custom action side, it only works from the custom widget side.

@flutterflowexpert 10 ай бұрын

@@tkmx797 have you added those variables in the App State in your FF app - btnTalk, stt, sstSendText ?

@tkmx797 10 ай бұрын

@@flutterflowexpert No I have not, I thought the custom action has to show no errors first before going on adding anything to the buttons and the app.

@tkmx797 10 ай бұрын

@@flutterflowexpert To give context I'm only trying to utilize the talkToMe function.

@knowledge-21234 8 ай бұрын

Do you have any on translation app or multilangiage chat

@flutterflowexpert 8 ай бұрын

Not yet, but it is a good idea of a video I might do in the future.

@selfmasterytv 3 ай бұрын

I have an error that says Talk to me custom action has an invalid pubspec flutter_tts:^3.6.3. how can I solve it please?

@flutterflowexpert 3 ай бұрын

try to use instead of - flutter_tts:^3.6.3 use flutter_tts: any

@selfmasterytv 3 ай бұрын

I keep getting this error "Custom action "speechToText" has an invalid pubspec dependency: "speech_to_text:^6.6.1".

@selfmasterytv 3 ай бұрын

okay it's resolved, there should be space in their between : and ^

@flutterflowexpert 3 ай бұрын

You need to put a space after the two dots and before you write the version number

@AdenijiTaoheed 3 ай бұрын

thenew version 6.6.1 is not working on web have been trying to make it work for a while all to no avail

@flutterflowexpert 3 ай бұрын

It should work. What error do you get?

@seetheworld3839 Жыл бұрын

bro are u sure that we need to put just $ sign in it at 26:09 please reply as i am unable to see the response from chatgpt

@seetheworld3839 Жыл бұрын

can u plz guide me why am i ain't getting the response i only want to speak to the chatgpt so that i can get the answer in text and don't want text to speech to speak the answer for me...

@flutterflowexpert Жыл бұрын

@@seetheworld3839 Please follow the guide 1:1. What issue do you have and where do you struggle to continue?

@seetheworld3839 Жыл бұрын

@@flutterflowexpert Actually i am unable to see the response from chatgpt thats it

@seetheworld3839 Жыл бұрын

@@flutterflowexpert I did saw your first video along with this one but still...

@seetheworld3839 Жыл бұрын

@@flutterflowexpert done bro thanks a lot!! can't believe it thansk u very much thanks a lot

@markberio3194 9 ай бұрын

hello can you video how to speech to text using flutter flow without using tts

@flutterflowexpert 9 ай бұрын

Yes, of course.

@markberio3194 9 ай бұрын

Share link pls i need that 😊

@flutterflowexpert 9 ай бұрын

@@markberio3194 What do you want to use instead of TTS - TTS means Text-to-speech.

@markberio3194 9 ай бұрын

Stt to speech to text i need because we have that for communication

@flutterflowexpert 9 ай бұрын

@@markberio3194 Yes, it is in the video.

@markberio3194 9 ай бұрын

hello how to speech to text only because i want that

@flutterflowexpert 9 ай бұрын

Sorry I don't get what you mean.

@markberio3194 9 ай бұрын

can you give me flutterflow clone that

@selfmasterytv 3 ай бұрын

I get this error while compiling : Target dart2js failed: ProcessException: Process exited abnormally with exit code 1: lib/custom_code/actions/talk_to_me.dart:26:30: Error: The getter 'tts' isn't defined for the class 'FFAppState'. - 'FFAppState' is from 'package:mind_shift_assistant/app_state.dart' ('lib/app_state.dart'). String text = FFAppState().tts;

@flutterflowexpert 3 ай бұрын

Did you add "tts" as an App state variable?

@selfmasterytv 3 ай бұрын

@@flutterflowexpert Thank you for answering, yes, I added it and the error is gone. thanks