Build an AI voice to text app w/ Bubble and the Whisper API in 20 minutes (no-code)

in this video you're going to learn how to build  an AI voice to text app using bubble and open AI   we're going to go step by step through the  tutorial so even if you've never built an   app using bubble or have ever used an API before  you're going to be able to go through and follow   along and build your own version of this app the  focus of this tutorial is on the functionality and   not on the design so just keep that in mind as we  go through this app if you have any questions at   all please leave a comment below otherwise I look  forward to seeing you at the end of the video and   if you want to learn more about building apps with  AI using bubble and other no code tools check out   the link in our description or go to nocode.mba  to learn more and get our full in-depth tutorials start with a brand new Bubble app here and the  first thing that I'm going to do is go to the   left side go to plugins and I'm going to click add  plugins and we're going to need to add a couple   plugins to build this functionality the first is  the API connector and that should be the first one   that pops up there on the top you can also search  for it on the left side and that's going to allow   us to connect our app to open AIS API and actually  use the whisper API through that connection   I'm also going to search for audio recorder actually one second here I actually have to  put a space in between audio and recorder   and it should be this one here this is the  icon that we want to install so it's the one   um here with the blue icon and I'm going to  go ahead and install it the reason we're doing   this one is because I verified that this works  the best in my testing so this is the plugin   that's going to allow us to let users kind of  Click record and actually record in our app   so I'm going to go ahead and click done here so  we have our audio recorder and our API connector   so the first thing we need to do is connect  to the bubble sorry to the open AI API   so I'm going to go ahead and click add another API  the name is going to be open AI authentication is   going to be private key in header and the next  thing that we're going to do is go into the open   AI API documentation so you can get there by just  searching open AI documentation API here in Google   and go ahead and click on the first one and what  we're going to do is use the audio endpoint here   and what we're going to do is send in an audio  file and we're going to get back a text response   so for voice to text if you're not familiar with  apis I'm going to explain on a high level how it   works and how to connect it to your bubble app so  you should be totally fine there's a lot of other   videos on the no code MBA YouTube channel as well  as in our no code MBA course on nocod.mba which   goes into all of this in a lot more detail  especially our building apps with AI course   so I definitely recommend checking that out to  learn more about how to build with all of these   different API endpoints as well as of other API  connections that aren't through open AI but the   first thing we're going to need to do is go here  to the top go to authentication and this is where   we're going to connect kind of connect through  a password our Bubble app to the to open AIS   app here so they're telling us a  specific format to do this so in   the header it's going to be authorization  and then Bearer and then our open API key so here if I go back to our plugin we have  authorization then it's going to be Bearer   actually sorry authorization is the key name the  value here is Bearer space and then we're going to   do the API key we're going to do the same thing  here bear space and then the API key so to get   your API key you have to create an open AI account  so I'm going to go into my openai admin dashboard   and get an API key so once you either log in or  create an account to the open AI platform it's   platform.openai.com on the top right you're just  going to go and go to your review API Keys page   here I'm going to go ahead and create a new secret  key and this is going to be for voice to text demo   you can call it whatever you want and then you're  going to want to copy that secret key and this is   something that you want to keep secret it's kind  of like a password into your openai account so   I'm going to delete mine after this video so  I'm going to go ahead and copy that API key   and we're going to go ahead and put a space after  Bearer and paste in our API key we're going to do   the same thing for the development key value  now if you wanted to have a separate API key   for development and the key value you could what  that means is the development key is what we are   on right now and bubble the development version  the key value here which is the live version is   after you publish your app so in our case we're  just going to use the same one for each of these   the key value and the development key value okay  so here we are back on the openai documentation   and I'm going to actually go to API reference in  that documentation we're going to go to the audio   endpoint and what we want to do is um let's  see audio endpoint and we want to do a speech   to text which is creating a transcription here so  we're going to transcribe the audio into the input   language so uh the first thing we need to do is  add a content type of multi-part Slash form data   so to do this we can just go ahead and copy that  header and then I'll put it in over here we can   add a header to whisper transcribe and this is  a little different from the um the header that   you would use for other open AI calls um like  a chat API call which you would use application   slash slash Json so just keep that in mind um  this is specific here to the whisper transcribe   and then the other header we're going  to copy that multi-part slash form data   great now we're going to go back to the  documentation here and we can see in the body   and this is the body here we're going to need a  file and a model the others are just options we do   not have to include these we're just going to not  include them in our example but we do need a file   and a model okay so we're going to add a parameter  actually we're going to delete that we're going to   change the body type to form data which is going  to allow us um here as you can see it's a form   data content type which is going to allow us to  upload a file and this is something that's helpful   in bubble in general when you are need to upload a  file in your API call so what we're going to do is   uncheck private click Send file which is going to  now have the value be a value upload and I'm going   to name the parameter a file next model I'm just  going to go ahead and copy that and the model uh   it says here in the API documentation that only  whisper dash 1 is currently available so in the   future if they might upgrade whisper and Whisper  Dash 2 might be available okay great so the reason   I unchecked private here is that's going to allow  us to dynamically change the file in our Bubble   app later which you'll see here we're not going  to change the model name so I'm going to keep that   checked as private okay so we're going to need to  initialize this call before it will work and to   do that we need to actually upload a a voice file  of someone speaking so that we can see if it works   okay so what I did was I searched for  the Gettysburg Address MP3 download of   audio and I found a website here which  you could find as well this is Chuck   brownvoiceover.com you really can get any  MP3 file where someone is speaking go ahead   and download that MP3 and then I'm going to go  ahead and upload it here as our file parameter   okay so now we are ready to initialize our call  and make sure that it's working so I'm going to   click initialize now it is sending that data over  to open Ai and it hopefully will send us back   the text of the Gettysburg address and it looks  like it did so if I show the raw data here we go   um this is it so it successfully converted  the audio into text so Voice to Text very cool   so I'm going to go ahead and click save it's  important to click save there not cancel   and we are getting close so all of the the  hard part is pretty much done now so now   we just have to build it out in the front end  with our audio recorder okay so let's go back   to our designer here and what I'm going to do  is uh first what we're going to do is go down   and we're going to pull in an element here which  is going to be our audio recorder element so I'm   just going to pull that in and this is basically  just a little element we're going to put it on the   side you would basically if you're building an  app maybe um we can do it now we can basically   just make it very small one by one we're just  putting this on the page so that way we can   use the functionality but this isn't actually what  we're going to use to show the recorder so this is   on our page now but it's essentially hidden we can  see it here on the page audio recorder a but now   what we're going to do is search for an icon here  drag an icon onto the screen and I'm going to make   this icon a microphone here and then why don't  I make it green so it'll be a green microphone okay great so it'll be a green microphone  here I'm going to rename it uh recorder icon   so now what I'm going to do is add a workflow  to this recorder icon so if we click that icon   what we're going to do is click on that logic so  first the win recorder icon is clicked add another   condition which is going to be when audio recorder  a recording status is no so this is really nice   it's a built-in value that when it's through that  plug-in that we added when the recordings it's   recording it's going to switch to yes but right  now it is no by default and then we're going to   add an action which is going to be we can search  for record and it's going to be start in audio   recorder a so when you click that this status  is actually going to change to yes automatically   okay so now what we need to do is add Logic for  when we click on that icon but the status is   recording status is yes so by doing that we can  just add another event we can say element and   element is clicked the element can be a recorder  icon and it's the only difference here is we're   going to say only when the audio recorder A's  recording status is yes so when we click on   it and the recording status is yes what we're  going to do is now instead of starting an audio   recorder we're going to stop an audio recorder  okay so we're going to stop an audio recorder   here we're going to click save to Bubble and  then the file name is just going to be audio   you can name it really anything you want but  basically we're going to save a file name to   bubble and the file is going to be the recording  so and you're going to click on the icon it'll   start the audio recorder and then when we click  on it again when it is recording it will stop   the audio recorder and it will save that file  to a bubble here okay so now we need to do one   more event here one more workflow event which is  going to actually send that file to open Ai and   get that file and send back the text um in the  past I've tried to add it as an action here so   after we stop the audio recorder adding the  open AI whisper transcribe and by the way if   you don't see this show up under an action you  have to go back to your plugin and make sure   under the API connector that you're using it as  an action if you have it as data it won't show up   and then um I tried that but it just doesn't  work I think what's happening is basically a   bubble is calling that API before we have that  file generated and it's not working correctly   so we need to do is add another event what I'm  doing is doing an event when a condition is true   and then I'm going to add two conditions one  is going to be when audio recorder is recording   status is no so it's not recording and audio  recorder is save to Bubble URL is not empty so   what we're doing is saying okay it's not recording  we've stopped the audio and we've successfully   saved that to a bubble and what we're going to  do is then add an action which is going to be   the open AI whisper transcribe the dynamic link is  going to be audio recorder A's save to Bubble URL and we need to do one thing to this Dynamic link  we need to do find and replace and we're going to   do two forward slashes and replace it with https  colon to forward slashes because the format of   the file that bubble has saved is just two forward  slashes but we need to add this URL beginning here   so it's just something that you need to do that  I kind of found out through trial and error here   and and then the next action is going to be  we'll search for uh record and we're going   to clear an audio recorder so we're going to  clear that audio recorder a and by doing that   we're going to then basically change that you  know save to Bubble URL as empty so right now   it's not empty it's going to kind of clear  it out and we can start the process again   okay great so we're going to clear  that audio recorder a and then I want   to do one more thing which is store  the response of the transcription   to do that I'm just going to go to the index  element here which is the whole page on the top   info button I'm going to add a custom state which  is basically just saving this to the browser you   could save this to your database there's a lot of  different ways you could do it but in this case   I'm just going to save it to the browser the state  name is going to be response and it will be a text   and I'm going to create it and there we go so now  we have a custom State we can save to the page   I'm also going to add a text element and  just drag it really large on this page   and then we're going to click this blue button  insert Dynamic data and in that case now I'm going   to choose index response so we're just going  to dynamically show the indexes response here   okay great I'm going to add one more text here  element on the top I'm just going to add it right   above I'm going to say recording I can just go  and maybe change it to red and maybe just make it   smaller put it right here again not worrying about  the design here I would design with I I wouldn't   normally design with the fixed layout but it makes  it really easy to just show you the functionality   uh so we're going to do recording and what I'm  going to do is add a conditional and I'm going   to say when audio recorder is recording status  is yes this element will be visible otherwise   we're going to say it is not visible on page  load so by default this will not be visible once   we're recording it will show up as recording  and then it will hide otherwise okay great   and now what I'm going to do is add a workflow and  Under The Whisper workflow here when we send the   API call I'm going to add one more action which is  set a set state of an element the element is the   index the custom state is the response the value  is the result of Step one's text perfect okay so   we should be all set now I'm going to go ahead and  preview this so we can view it live and here we go   so let's see this should all work now so I'm going  to go ahead and click this button it's going to   say it's going to prompt you and ask if you want  to access the microphone I'm going to say allow   okay we know that it is recording now because we  see this recording text there's definitely more   um you know types of styling and you could add  like you know some sort of recording status or   kind of button to tell you to click it again  to um to stop recording but okay I'm gonna   go ahead and stop recording now so I stopped  recording and now it's sending that API called   open Ai and here we go amazing so here we have  the uh the text that we were just speaking and   it just transcribed it so that was the voice  to text API showing live um so yeah so that is   pretty much it you've now learned how to  implement um an audio recorder to record   um to record voice save that voice file send it  to open AI through the whisper API and get text   back from that audio file and there's a lot you  can do on top of this to to use this with lots of   different potential use cases in your bubble app  if you want to learn more about building with AI   apis in bubble and other no code apps definitely  check out the link in the description or go to   nocode.mba to check out our full in-depth courses  I would also recommend checking out no code MBA to   learn how to design and build and bubble and build  really nice looking apps using bubbles responsive   designer so there's a lot you can do to really  add UI ux and design into an app like this so   I hope this was helpful if you have any questions  at all please just leave a comment below and don't   forget to subscribe to no code MBA and get all of  our future videos on YouTube hereby subscribing   so if you have any questions again just leave a  comment otherwise I'll see you in the next video

Channel: No Code MBA

Views: 1,602

Keywords:

Id: 8kIhNH2fTiM

Length: 20min 39sec (1239 seconds)

Published: Tue Oct 03 2023