How to Build a Multilingual AI Voice Assistant in FlutterFlow (OpenAI Text-To-Speech App Tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ก.ย. 2024

ความคิดเห็น • 93

  • @jamiepattersoncta
    @jamiepattersoncta 9 หลายเดือนก่อน +5

    This is fire, thank you. People could create generational wealth with this skillset

  • @humandesign.commons
    @humandesign.commons 10 หลายเดือนก่อน +2

    Amazing. I was waiting for this Flutterflow tutorial since Whisper came out 😄
    Thank you!!

  • @raparaparapaDum
    @raparaparapaDum 2 หลายเดือนก่อน +1

    min 13:15 everyone gangsta till you NEED CUSTOM CODE

  • @alltimetech8809
    @alltimetech8809 10 หลายเดือนก่อน +3

    Can you to do a video about the bluetooth ( ble )connection using a esp32 ? I think that in the tutorial have a mistake , because i did step by step , but it never work😢

  • @n1Metrics
    @n1Metrics 7 หลายเดือนก่อน +4

    Just a heads up that this no longer runs due to issues with speech_to_text

    • @Julian-pg9dx
      @Julian-pg9dx 7 หลายเดือนก่อน

      Thanks, I was wondering why it wouldn't work.

    • @MalikaYunus
      @MalikaYunus 6 หลายเดือนก่อน +1

      How do you fix it?

  • @marip0sa25
    @marip0sa25 7 หลายเดือนก่อน +2

    I get error 401 failure when I tested it can you help me pls

  • @jae.kingsley
    @jae.kingsley 8 หลายเดือนก่อน +1

    great tutorial, love the pacing of this! please do more

  • @Samuel_Nicole
    @Samuel_Nicole 6 หลายเดือนก่อน +2

    Hey @FlutterFlow in the action flow editor there is the: "start and stop audio recording" actions why did you use a custom action instead of these built in actions?

  • @melvinjongen1697
    @melvinjongen1697 10 หลายเดือนก่อน +2

    How can we connect this to a google agenda so it can make appointments and send a notification to a client

    • @GrecoFPV
      @GrecoFPV 10 หลายเดือนก่อน +1

      N8n or make automations

  • @younessaznag470
    @younessaznag470 9 หลายเดือนก่อน

    well done ff i was waiting for this video for a long time, now i will go the paid version , good work flutterflow team

    • @armankarambakhsh4456
      @armankarambakhsh4456 9 หลายเดือนก่อน

      Can't I run it as test for myself for free?

    • @younessaznag470
      @younessaznag470 9 หลายเดือนก่อน

      @@armankarambakhsh4456 what is the poblem that you had

  • @nguyenquangngoc3993
    @nguyenquangngoc3993 9 หลายเดือนก่อน +2

    Is it safe to add the API key as app state if I want to publish to the web?

  • @KAI-el4ld
    @KAI-el4ld 7 หลายเดือนก่อน

    Amazing work thank you !!

  • @melvinjongen1697
    @melvinjongen1697 9 หลายเดือนก่อน +2

    @FlutterFlow it doesnt response to my question it just says something random how can i fix this ?

    • @billybetts5514
      @billybetts5514 9 หลายเดือนก่อน

      I get the same behavior. it's as if the transcribed audio is not being passed to the api via the [prompt] parameter.
      when running in test mode in browser I see the below errors:
      Any help is appreciated. ✌😎
      dart_sdk.js:50705 registerExtension() from dart:developer is only supported in build/run/test environments where the developer event method hooks have been set by package:dwds v11.1.0 or higher.
      dart_sdk.js:29145 Starting text recording
      dart_sdk.js:29145 Error!: SpeechRecognitionError msg: not-allowed, permanent: false
      dart_sdk.js:29145 Stopping text recording...

  • @nathanburley9122
    @nathanburley9122 6 หลายเดือนก่อน

    This is brilliant! I'm a complete noob at all this so I have a bunch of Questions if anyone can help please?
    1) I assume I'd be able to deploy this app (or one very much like it) to mobile if I were on the Standard plan via APK?
    2) This pubspec dependancy seems to eliminate the need for using Whisper or Google's S2T API - is there a list of other great dependencies
    3) Why does the Standard plan only have the same number of API endpoints as the free plan?! I see that you can make API calls with custom actions but I can't quite figure them out, does anyone have any good guidance on this?

  • @ilya_old
    @ilya_old 9 หลายเดือนก่อน +2

    Has anyone successfully compiled this feature to ISO and Android?
    Because I'm struggling with dart.html.

    • @internetisbeautifull
      @internetisbeautifull 9 หลายเดือนก่อน +1

      Same here , please reply if u have somehow solve the problem.

    • @AdrianMcMillian
      @AdrianMcMillian 9 หลายเดือนก่อน +1

      Following this thread, as I also would like to get this working via iOS and Android.

    • @ilya_old
      @ilya_old 8 หลายเดือนก่อน +2

      ​@@internetisbeautifull I've asked the developer to rewrite the code without dart.html.
      When we test it on a MacBook (virtual device), everything is okay.
      But when I compile it for the App Store, I can't hear the answers. We haven't solved this issue yet.

    • @ilya_old
      @ilya_old 8 หลายเดือนก่อน

      @@AdrianMcMillian I've asked the developer to rewrite the code without dart.html.
      When we test it on a MacBook (virtual device), everything is okay.
      But when I compile it for the App Store, I can't hear the answers. We haven't solved this issue yet.

    • @Nolaready
      @Nolaready 6 หลายเดือนก่อน

      So ChatGPT replaced the dart:html and uses “Just_audio” and a pub dependency version 0.9.36. But I can’t for the life of me figure out how to link it together.

  • @musumo1908
    @musumo1908 10 หลายเดือนก่อน

    Cool project will this work with the GPT4 new super API…the preview one? Assume the chat completions code needs changing?? Thx

  • @vavo1997
    @vavo1997 10 หลายเดือนก่อน +2

    Informative video, but does the app only work on the web platform?

    • @FlutterFlow
      @FlutterFlow  9 หลายเดือนก่อน +1

      In this tutorial, yes. The custom action used to play the audio back utilizes web-specific features. This could be easily adjusted, however, by using a package on pub.dev!

    • @armandoortiz3613
      @armandoortiz3613 9 หลายเดือนก่อน +1

      @@FlutterFlow Excellent Tutorial as always! Appreciate all the great content. Can you elaborate on your response about how we can easily adjust the audio playback so the custom function will work on iOS and Android deployments? I see the "//Play the audio audioElement.play();" in the function lines but am not sure what to replace them with and which changes to make. Like what can we use from pub.dev and how would we best insert that into the custom function. I am new to Dart and Flutterflow but these tutorials are a lifesaver. Thanks!

    • @AdrianMcMillian
      @AdrianMcMillian 9 หลายเดือนก่อน +1

      Following this thread, as I also would like to get this working via iOS and Android.

    • @m3gatoile855
      @m3gatoile855 8 หลายเดือนก่อน +1

      Me too

    • @Nolaready
      @Nolaready 6 หลายเดือนก่อน

      @@armandoortiz3613hey Armando, did you ever get a fix to this problem?

  • @Juan-Ballesteros
    @Juan-Ballesteros 5 หลายเดือนก่อน

    Won't work for iOS (neither WebApp in iPhone) :( . The Voice-to-text fails so bad. What can I do?

  • @shabatidjani1354
    @shabatidjani1354 9 หลายเดือนก่อน

    nice one when would the image to text own be done ?

  • @yuryarta4832
    @yuryarta4832 9 หลายเดือนก่อน

    I can not deploy my app with your action functions to app store, I'm getting this message: "the app status of version has changed to invalid binary". What should I do?

  • @ALLINONEANIME369
    @ALLINONEANIME369 27 วันที่ผ่านมา +1

    currently this doesn't work you need most likely premium of open ai it shows this error always
    {
    "error": {
    "message": "The model `gpt-4` does not exist or you do not have access to it.",
    "type": "invalid_request_error",
    "param": null,
    "code": "model_not_found"
    }
    }

    • @rishiojha505
      @rishiojha505 11 วันที่ผ่านมา

      Did you got the solution?

  • @scottwallace9498
    @scottwallace9498 4 หลายเดือนก่อน

    I would Like to see a video using Assistants and OCR

  • @punishedproduct
    @punishedproduct 6 หลายเดือนก่อน

    @flutterflow how do we do this for other ai llms? Like huggingface llama etc? It would be cool to see other llms used in the app space with ff integration.

  • @KAI-el4ld
    @KAI-el4ld 7 หลายเดือนก่อน

    Just one quick question, how can I add a function to stop the text to speech ?

  • @atsileitumeleng
    @atsileitumeleng 9 หลายเดือนก่อน

    Tell me you made that audio up, haha... hilarious.

  • @nellyanderson8623
    @nellyanderson8623 10 หลายเดือนก่อน +1

    can anyone please educate me why three is no FLutterFlow tutoria on the web to show how to connect a flutterflow app to a web admin backend so that an admin can atleast perform basic CRUD to populate the app we have built in flutter flow ?.. In a real life application, Most app will need a backend to see users orders, upload products etc

    • @FlutterFlow
      @FlutterFlow  10 หลายเดือนก่อน +2

      Try duplicating your FlutterFlow project to create a web-only application. This will allow you to connect the project to the same backend (Firebase, Supabase, etc) but deploy the app on a unique URL that is different than the main app you've published. This would allow you to have two interfaces that connect to the same backend database but could be hosted at app.[your-link].com and admin.[your-link].com.

    • @nellyanderson8623
      @nellyanderson8623 10 หลายเดือนก่อน +1

      @@FlutterFlow Thank you for this response. This means i can equally make a web admin panel with futterflow and publish it for web to talk to the same Firebase db as my app to populate/perform CRUD on my app

    • @lawrence1679
      @lawrence1679 10 หลายเดือนก่อน +1

      @@FlutterFlowI have asked this question several times also, Im not sure why every one who makes a Flutter flow tutorial only focus on the App client side and do not show how to connect it to a backend..You need to show this in one of your videos pls.,. If we can not have an admin panel to populate the app, then do we go into firebase everytime to change things manually ?

    • @FlutterFlow
      @FlutterFlow  10 หลายเดือนก่อน +3

      @@lawrence1679 our team covers these types of videos on the livestream. There are a couple of solid videos on this to get you started:
      th-cam.com/video/zSHK3GyCpvw/w-d-xo.html
      th-cam.com/video/ec8coFykrWA/w-d-xo.html

  • @humandesign.commons
    @humandesign.commons 10 หลายเดือนก่อน

    Finally!!

  • @tutkinrannan2184
    @tutkinrannan2184 6 หลายเดือนก่อน

    I get the following error: Refused to load media from 'data:audio/mp3;base64,' because it violates the following Content Security Policy directive: "media-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. The scheme 'data:' must be added explicitly. Is there any fix for that

    • @rareevil
      @rareevil หลายเดือนก่อน

      same if you find a way can you tell me too??

  • @DeLeizard
    @DeLeizard 6 หลายเดือนก่อน

    Hi, could you help to explain why SpeechToText throws an error "msg: not-allowed" on FlutterFlow Test mode but can run normally on Run mode?

    • @rareevil
      @rareevil หลายเดือนก่อน

      hey if you got a way then can you plz help me with it , it is very necessay for me i have to meet a deadline today

  • @MarkSpeaker
    @MarkSpeaker 10 หลายเดือนก่อน

    Is there a reason you used a custom package to transcribe the audio instead of the OpenAI transcription service? Could you update this to use that instead? thx

    • @FlutterFlow
      @FlutterFlow  9 หลายเดือนก่อน +3

      The custom package is free with minimal latency (doesn't require an API call), hence the use in this video. The whisper API could be used simply by adding an API call to the project and passing in a saved recording of the user's audio message.

  • @MeriMAAkiRasoyi
    @MeriMAAkiRasoyi 10 หลายเดือนก่อน

    Great tutorial 👍

  • @Worganizer
    @Worganizer 8 หลายเดือนก่อน

    Can some provide link or explain, how to make it for app version, not just web version

  • @tomcuong9588
    @tomcuong9588 10 หลายเดือนก่อน +1

    I tried to test the API call and it gave me a 404 (failure). The message said that I don't have access to GPT 4. Is this mean that I have to subscribe to Chat GPT Plus? Are there any other way?

    • @taha-fd6cr
      @taha-fd6cr 10 หลายเดือนก่อน +1

      Same problem, I am only using chatgpt 3.5 turbo s apikey

    • @cryptoairdroppp
      @cryptoairdroppp 9 หลายเดือนก่อน

      change the model@@taha-fd6cr

    • @hamadayahia2152
      @hamadayahia2152 9 หลายเดือนก่อน +1

      Yes, I got that error. The workaround is: API Call -> body -> replace line 8 with: "model": "gpt-3.5-turbo-0301",

    • @younessaznag470
      @younessaznag470 9 หลายเดือนก่อน

      that is the right answer bro chat gpt 3.5

  • @Julian-pg9dx
    @Julian-pg9dx 7 หลายเดือนก่อน

    Can you do an updated version since this one doesn't work anymore?

  • @danvanrider5923
    @danvanrider5923 9 หลายเดือนก่อน

    I found a major different between using my iphone and my laptop. Majority of the time it doesn't work from the browser on my iphone but it does on my laptop. Has anyone else experienced this issue? Also, has anyone taken this project and used an AI assistant with passing an assistant ID.

    • @AdrianMcMillian
      @AdrianMcMillian 9 หลายเดือนก่อน

      I also noticed issues when attempting to run on iPhone (via browser). The response message playback seems to be delayed.

  • @angwaykiam2421
    @angwaykiam2421 3 หลายเดือนก่อน

    is there any way for it to work on the app itself without publishing it ?

  • @AdhamFaisal875
    @AdhamFaisal875 6 หลายเดือนก่อน

    please hot to note and play and download this audio? how to add options maleVoice and famleVoice

  • @monstarfirst
    @monstarfirst 5 หลายเดือนก่อน

    I use android stoudio in my flutter project can you tell me the name of this program?

  • @CodeWonders_
    @CodeWonders_ 8 หลายเดือนก่อน +1

    Do this using gemini api

  • @MatthewFusco-wx9pq
    @MatthewFusco-wx9pq 5 หลายเดือนก่อน

    Does anyone have a fix for the issue of it not working anymore?

  • @nfxberlin3695
    @nfxberlin3695 3 หลายเดือนก่อน

    i faced that error while testing the API . how to solve it ASAP please
    {
    "error": {
    "message": "The model `gpt-4-1106-preview` does not exist or you do not have access to it.",
    "type": "invalid_request_error",
    "param": null,
    "code": "model_not_found"
    }
    }

    • @ALLINONEANIME369
      @ALLINONEANIME369 27 วันที่ผ่านมา

      same here

    • @rishiojha505
      @rishiojha505 11 วันที่ผ่านมา

      ​@@ALLINONEANIME369 have you got the solution?

  • @JimmyCampbell6
    @JimmyCampbell6 4 หลายเดือนก่อน

    does this work if you were to export to mobile given fetchSpeechAndPlay is using dart.html?

    • @szymon2030
      @szymon2030 4 หลายเดือนก่อน

      @FlutterFlow we have problem with "fetchSpeechAndPlay".

  • @akshatgupta4408
    @akshatgupta4408 5 หลายเดือนก่อน

    i am getting an error model not found? please help

  • @PrimeURL.VIP_
    @PrimeURL.VIP_ 10 หลายเดือนก่อน

    Where these retuned audios get stored? In app, if so how storage manages? What if I want to store it in database?

    • @FlutterFlow
      @FlutterFlow  9 หลายเดือนก่อน +2

      The API returns these are direct MP3s, so you'd need to write an additional custom function or adjust the one used in the video to upload the bytes to Firebase (or another storage bucket) in order to use them later!

    • @PrimeURL.VIP_
      @PrimeURL.VIP_ 9 หลายเดือนก่อน

      @@FlutterFlow got it

    • @ALLINONEANIME369
      @ALLINONEANIME369 27 วันที่ผ่านมา

      @@FlutterFlow help flutterflow trying api test i get following error
      {
      "error": {
      "message": "The model `gpt-4` does not exist or you do not have access to it.",
      "type": "invalid_request_error",
      "param": null,
      "code": "model_not_found"
      }
      }

  • @shabatidjani1354
    @shabatidjani1354 9 หลายเดือนก่อน

    hey @ff i have been trying to clone the app but no way what is the problem please
    ?

  • @firmankrisnadi7248
    @firmankrisnadi7248 3 หลายเดือนก่อน

    Can I build this application with free account because I'm newbie

  • @jamiepattersoncta
    @jamiepattersoncta 9 หลายเดือนก่อน

    I'm getting this error when publishing: "Target of URI doesn't exist: '/backend/backend.dart'. Try creating the file referenced by the URI, or try using a URI for a file that does exist." for each of the custom code sections

    • @adilet3278
      @adilet3278 9 หลายเดือนก่อน

      you copied everything from code, including imports, but in fact you shoudl copy only where is written with comments. Or just delete this import of backend

  • @RajeevSharma-ii7fx
    @RajeevSharma-ii7fx 5 หลายเดือนก่อน

    Watched the first 6 minutes. Is this a Text-To-Speech tutorial or a Speech-To-Text tutorial? Asking as i saw you put an input microphone in the container....

  • @taha-fd6cr
    @taha-fd6cr 10 หลายเดือนก่อน

    must we have chatgpt 4 ApiKey ?

  • @jamesballantyne9214
    @jamesballantyne9214 4 หลายเดือนก่อน

    if someone can get a working template of this they will make millions. I have so many use cases but haven't been able to get mic working on mobile apps.

  • @jejidyanjackson2868
    @jejidyanjackson2868 10 หลายเดือนก่อน

    so many custom actions, i gonna generate that with AI, Or i gonna first call Buildship and run all the functions i want

  • @carlanlyortiz8471
    @carlanlyortiz8471 10 หลายเดือนก่อน

    Do you need to be a premium ChatGPT user for this?

    • @FlutterFlow
      @FlutterFlow  9 หลายเดือนก่อน +1

      You'll need to add billing information to OpenAI in order to obtain an API key. This project does NOT require the premium version of ChatGPT.

  • @abdulbaset2886
    @abdulbaset2886 9 หลายเดือนก่อน

    wow

  • @ricardoavellan6962
    @ricardoavellan6962 9 หลายเดือนก่อน

    algun tutorial en español :/