Transcript for:
Membangun Antarmuka Pengguna Asisten Suara AI

hey developers first of all a massive thank you to everyone who supported part one of our AI assistant Jaris today we are taking our AI assistant project to the next level in part one we Le the ground workor and now we are transforming that concept into powerful fully functional gii that pushes the boundary of voice control Computing in our coding Journey today we will build a Cutting Edge interface that Bridges voice command with actionable intelligence and integrating the Gemini model for advanced task processing also creating a responsive ative GI that feels like something out of sci-fi movie key features that we are implementing in this video are voice to action command processing Dynamic visual feedback Seamless app interaction realtime information retrieval through llm and by watching this video you will learn Advanced Jo design with python Q framework Gemini model integration voice command processing creating responsive and intelligent interface to everyone who asked for part two this is the moment you have been waiting for we have listened to your suggestion and Incorporated your ideas so are you ready to build the future of personal a assistant let's dive in before we initiate this project I just want to give a quick a of this project at first the prerequisite for this GI video is that you should have watch the Jaris part one so that you will get the better understanding that how we have implemented functions and program in our Jaris and also it will be helpful for you to undergo this video as well as we progress and in this video we'll first create an intutive graphical user interface with the help of python KV framework which will let the visual appeal of our gii and then we will integrate it with llm like Gemini AI to make it more advanced and powerful than ever now as we are in darus part two we have some changes from part one the first one is that we will use vs codat this time rather than pyam ID and the second one is that we will build project on cond envirment rather than virtual environment and the reason behind this is that some built-in python models that are needed in building ji is not available in Virtual environment so that's why we will use cond environment and for that we have to first install a mini Konda so go to gole yeah here write mini now install and go through first link here we have to go here and go to this repo yeah so here you have to download the Mina version on the basis of your operating system like I have windows so I will install for Windows yeah yeah select here next I agree and here you have to set all user yeah it is giving us the path of installation and I'm not going to install this because because I have already installed and if you want any more assistant in downloading minond then you can go through any installation and setup video of minond on YouTube I have because I have already installed I I not going to install it one more and also you have to look at how you can set up uh environment variables in minond to run it on vs code or other ID yeah so let's move on to project setup before we proceed with creating the GUI we need to make some adjustment to our folder and project structure as you can see that I have added two new folder to our folder structure that is static that will contain all the images and other assets and here we have also a requirement file that will contain all the necessary python modules you can obtain these two files by visiting the project repository which I have already mentioned in the description box now regarding the folder structure I will be renaming some file as follows our main. PI will be renamed as main without G online. Pi will be renamed as utils do PI and also constant. Pi will be named as constants next we have to create some more files that will be here create charvis dopy and also create Charis p.p and also create main.py yeah this new main.py will be executed every time we have to run our Jaris GI yeah so then close this all file now before restarting the project I'll first create a cond environment so go to terminal first is to G and here write command cond create Al our environment is creating yeah now we will activate the environment Hond activate I'll dra yeah so now we will install all the necessary python modules by running the command we install requirements it is essential for all of you to install the required python modules from the refinement file I will not be installing each module individually as it would be time consuming process additionally make sure to download the static folder and requirement file from the Javis project repository as they are prerequisite for this setup yeah so here you can see that all modules are installed and now now I will jump to development part so cross this we also need to make a few changes to our old code first we need to update our text to switch model and second we need to properly set up all the API key and URLs to begin this first go to en file yeah here we will store all the necessary user information and sensitive data now now here we will write all the API keys and their URLs so I have already copy you can find this by gith up you can visit Jaris part one to know how I get this API key and their URLs also add SMTP URL and SMTP port here right 587 it will be our Gmail port number now go to constant. Pi here remove all this unnecessary text here in this constant. Pi we will store all the constant value that will be used throughout the codebase like API key and URL which will R through environment variable and configuration files value from En file so first import o here write email to O do environment doget and write password. envirment dog it will face the email and password value from EnV file and here we have to also write IP address news F API and weather forecast API 2 so we will Fast Forward e yeah so here you can see that we have faed the old value from EnV file and also right SMTP port and URL yeah so by this os. envirment doget we will face the all the data we have insert in this values and now get back to .p and here we will create a speak function which will be used instead of older speak function which we buil through Microsoft sa5 because that model has a major issue with ji and speech recognition function that that you viers were also mentioning in Jaris part one yeah so here we will change our text to spech model to Google text to speech gtts which is a python Library which allows you to convert text to speech using a Google text to speech API so first import this gtts module import gtts and also import o and also write from hi up do import AIO segment from P up dot play and yeah here we will create a speak function Dev speak here right TTS equals to gtts dot GTS it will set the language as English you can say you can change if you you want to change and here create output. wave it will generate a audio file that will be removed after the ji is run segment f yeah right. remove output. it will remove the audio files that our TTS model will create and also write audio equals to audio dot speed up play speed equals to 1.5 and here right play audio Yeah and after that we have to import all the API key and API URLs which we have return in constant. pi so go at the top here we have to first remove this we don't need this and right from constants import email password AP address URL new Switch we forecast and so SMTP [Music] URL SMTP code new Switch API weather API yeah here we are done so we have import all the variables from our constant. PI and also we have to update the news and weather function as we update their API key variable so so get back to here down the news function here in the news function we have to remove all this first and new F API URL and the parameters of what news we want from our AI we have to write in Json format contr India category General it will provide all the general newes and apiq will be new Switch and as update weather function here also review this API URL and here we have to write WEA forecast API and their parameters will be first right here two that will be named as City and also write API ID here we will write weather forecast API key and also the unitor measure that will be metric yeah we have done with updating the weather and news function now that we have finished modifying the old code I will start creating the G let's begin developing the Jarvis interface now come to Jaris button. Pi in this file we will create a jarus button which will lead to usually enhance our GI and also user experience here I will first import some QE libraries that are from kv. U do button import button here we have import button from kvx library which is a fundamental wiet for our Jaris gii and it will also trigger a event when it will be pressed or released also import from KV Graphics import rotate it will be used to rotate our visit within a GI and now here define a class that will be jvis button here right button now create a unit function yeah here it will Define a Constructor method for our Jaris button class and in this super we have to write our class name that is Jaris button and also write self this super method will call the Constructor of the class and now write self do angle equals to 2 and self do background angle to Z here self refers to the current instance of class and it will be used to access and modify methods and it will be used to consistent code with kiwi it is the basic necessity of kwi library and here create another function that is Def rotate button here write arguments and write self dot background angle plus equals to self dot angle self. canvas do c yeah this will remove the existing rotate instruction from our canvas before adding a new one and also we have to write before instruction that will be with self do Canvas dot B4 here our Jaris will rotate and angle equals to it origin will be Center it will set the rotation will be around center point of our button and now we are done with button function and we will move to Jarvis dopy come to Jarvis dopy this jarvis. Pi will include all the core functionality of our Jarvis and it will also control the gii of our Jaris and initially we have to import all the essential model that we have installed at the beginning so here first write import now also import visit Image level and other things from kvx library for that we will write from kwi dox import widget it will be used to create our and manage our widget elements and also import image it will be used to display image with our QV app label it will display all the static or dynamic text context on our GI content on our GI and also write box layout it will be used for organizing widget within a container and text input it will be used for input field now also import from KV import clock also we have to download another module that will be first go to terminal yeah here we have to first install cont install fmpg it will be used for our speak function that we have problem with last function that we have created with Microsoft saify so we will install this yeah it is downloaded and you also download this after PP install close this and also we have to set the width and height of our G application so go back to constant. Pi and here we will first write from kwi do config config and set the width and height of our G also write config do set Graphics it will be config our width and height to our Graphics of our GI and graphic is us to specify our window size and other graphic related settings also write config do set Graphics here we have to set the height element right height variable we have to also set to fully screen so WR here graphics by this our Jaris will work on full screen and we have to also set the screen width and Screen height so here we will write config dot get in Graphics here right width and also set screen height yeah now go back to J.P and here we will import all those both attributes so right here from constants import screen height and Screen width also import all the jarus function from other files too so here we will write from utils import our old function that are speak YouTube send email news function forecast function and also IP function yeah now also import Jaris but so write from Jarvis button import Jarvis button it will import the class from Jaris button file here create a new class that will be Jaris which will contain all the core functionality and GI functions and how GI will work so first write class Jaris and here write widget dot widget here widget class is a base class used to create any widget in QV app and now we will create a init method in it right here def in it it will be work as a Constructor function yeah and here write the class name d and self yeah Now set the volume self. volume it will set the initial volume level to zero and this will be changed whenever we will speak any command or GUI also write the history of our volume and write here self. volume history here in the set right Z these are are the initial value of our history and by this we create a list of our volume history also set the size of this according to which our button will enlarge and x large volume history size 140 yeah it will be the maximum number of volume level that we will be storing in our volume history list and now we will add all the wigets within our gii so first we will go with adding our background image that will be self dot add widget and here we will use the image function in this we have to write the source of our image which will be displayed on GI right here static where we have stored the images border dos. PNG it is the background of our GI and size will be 1920 and 1080 these all are the width and height of our GI now write self do Circle to jar button it size will be and background here we will use another image that is static circle.png it will be used around our button function and it will also create a custom button name as a circle so also write self do Circle dot bind on press self. start recording by this an event will trigger and our Jarvis will start listening by this start recording function which we will create later and first call this start recording function self dot start recording it will call the function and also add more widgets like also add more images like Javis do JF it Position will be screen withd yeah it will add the main visit that is our Jaris GIF to our GUI and now add time layout time it will display the current time it will be covered in box layout and its Position will be 150 to 900 it will create a box layout that will display current time and we have also set the position of it so now it's some more configuration in this time layout time label here WR text font size to 24 also the font name we have already saved this font in our static file so we will write static MW do ttf yeah it will create a label that for a Time layout variable where it will display and also the font type and now add this widget by time layout do at widget and here include time Li it will add the time label within the time layout wiet also add time layout yeah here the vdet is added with both the parent and child layout added we will set the clock timing that will update every second schedule interval it will update time uh with every second and right here self. title also set the attribute for our font we have uh bolt text and a color for the text and the text will be error by night which is our channel name yeah here and the both the tag and attributes and also include the font size one name will be static and its Position will be Yeah by here we create a new text field that will be the our title of our GI now add this widget now I will create a input field that will display the command that we give to our Jaris on our G write text input dot text input here nextext set the background color and foreground color it will be white set the height of our input field also position where this input Feld will be situated on our Jarvis also include the phont name now add this widget by writing self do subtitles input here we have created subtitle input and also add some more text like self do V e Alo right self dot head wiet here right s. VH self. Circle yeah so this self. VR and self. V VH doesn't make any sense in our GI but we have added this so so that our J will become more futuristic and now copy take command function from Main without G copy this one yeah and paste it over here yeah we have to deal with some indentation remove this yeah and right here self as we are dealing with QV library and also we have to write here written yeah now let's create a uh start recording function for that def start recording yeah so this function will be responsible for recording our voice and let's continue here we will create a Threading process set Target as self dot run speech recognition function it is one more function that we will create later and in end WR start yeah it will create a thre that will execute multiple task concurrently and we have to conclude this print recording ended yeah and now create a speech recognition function that will start this thread and also it will recognize user voice and it will be responsible for recognize input from user so create another function that is Def run speech recognition yeah and here we have to write print before speech recognation and also write R equals to Sr dot recognizer this function will recognize the voice and also with Sr dot microphone as Source print listening yeah so here basically what this speech recognition function will do is it will recognize the user voice and also it will be responsible for recognize input from user and here you can see that we have user microphone to recognize and this will be stored in audio variable now create create a tri block qu equals to r dot recognize and also write audio and language as arguments print the query we have recognized and also create a accept block that is if there is an unknown value error then we have to write answer right except Sr dot request eror as e return this Square yeah we have Al add a hot key that will trigger whenever our Jaris will start listening so get back over here here we have to write keyboard do add H key and T operator self dot start recording so whenever we trigger this till operator button our Jaris will start recording our voice and it is done by this function where we create a particular thread for recognizing voice yeah now we have to write another function that is Def update time self dating yeah this function will update the time displayed by time displayed at our gii and WR here current time to time dot s strf time and write here time now we have to create a lbel field for our time so right here self do time level dot text and we have to also update the circle button that is our main Jarvis here in the tri block right self dot size value to in mp do Min self. volume history also create exception block yeah now create a if Els block write yourself dot size value equals to self dot main size Al if self do size value is greater than equals to self dot Max size Now set the position of this circle variable people yeah so the B meaning of this function is that the circle around the Jarvis JF will maximize and rotate according to user voice fluctuation and if the voice pitch is high the circle will become large and if it will below the circle will become small now create another function that will be def update volume here in the arguments WR self in data frames time and the status of the G right here volume andp dot yeah here we are using numai by this numi value we will we will get to know what is the pit of our voice and also the value of our voice here this function will be fluctuated whenever we speak with high modulation voice to our G and also write self. VR do text to F and right here the content that will be NP do Min self dot volume history and close the text also write for VH do text to F string and here write one more it will be used for multiple line intend right here the color and it will round of the volume history value now copy the same paste it seven times and here just change the values now close the text and Al write yeah also create for self. VR copy all this if length of our self. volume history will be greater than self dot volume hisory size then it will be selft volume history this will keep the volume mystory within the defined size limit now this function is not that much required in our Jarvis but we have to create this function just that our jar look some kind of futuristic animation and now let's create the different function that is De start listening yeah here we have to write self dot string yeah it will create an audio input stream using sound device library and you write self dot stream start and this line will activate the microphone and start capturing audio data from user now we will go through jvis command function which we have also created in previous video so here create one more function that will be and then Jaris commands self and your right query now after creating this function we have to return back to speech comination function yeah over here and here we have to write in tribe block that clock schedule once set attribute subtitle subtitles input and on right text query and here over we have to write the function we have created s dot handle Char command qu not lower and after this we have to first go to main without GI and here in this main without GI we have to copy the handle Jaris sorry we have to copy all this and come here again and this handle JIS command we have to first create a tri block and here we will paste all the content we have copied yeah it has some ination error indentation error it is fixed now also we have to add a exception Block in the end yeah so now we have to deal with some other things like first of all we will remove this W from alpha code because we are not using this in JIS anymore also after this we have to update news and Wikipedia function go to your Wikipedia here we have to write search on Wikipedia and here right self dot take command lower and remove this we don't need this and also in guse function we have to remove all this we have to insert all the self self tag before all the take command. lower function because we are working on kiwi so write all over here here remove this and also write search on Google and add s don't take command that's over here yeah we have done with this and yeah so here you can see that our Jaris gii setup is completed as well as all Jaris function and now we will create a build class in a main p through which our QV application will run now go to main.py and here we have to first write from EnV import and Al write from TV import app and clock and also from jvis dopy import Jaris class yeah now here we have to create a class so right here first class by this class our JIS application will run it will create a class name as my QV app and in this class we have to first write a build function yeah the build function is a special method in KV application and it is responsible for creating the root widget it means the main element of the application user interface in this build function right Jarvis sorry Jarvis Jarvis it will create a instant of our Jarvis class which we have imported from jarvis. PI and also write Jarvis do start listening right here event yeah here it will update the event from our clock cycle and also write button rot button rotation event here we have to write charvis dot Circle rotate button 1 by 60 which means 1 second and here after all WR Jaris class yeah now create a main function through which our Q application will run here write if then my Q app will equals to my Q app it will create the instance of our my Q app now let's run the program and see how GUI is implemented run Pi main. Pi and and here you can see that we are getting multiple errors let me figure out all of this yeah so get back to Jaris file and here you can see that we had made a blender by including all the functions within our Constructor functions and it's basically an indentation error we had created by including all the functions in init function so let get all the function outside of init function and also in run speech recognition function here we have to remove the parenthesis parenthesis and now go down here and here we have to write commands not command which is causing error and now get back to our Constructor function here we have to include two more functions within our Constructor function that are self dot Min size = to2 into screen width and self dot Max size equals to 7 into screen width yeah now get back to main. Pi and here you can see that we have to write here a small j instead of capital J because we had to return the variable not the Jaris class and now let's again run the program and see whether it is running well or not here right Prim and P and uh yeah so here you can see that our Jaris is running well and you can also see all the elements and widgets we using GI like background image Jaris GF time layout uh Jaris response field and as well as also color and fonts we have used in our Jarvis so let's test the functionality of our Jaris by running our core functions Jarvis open YouTube what do you want to play on YouTube Sir Play error by night yeah here you can see that it has open our video and now tell let's now test another functions that is Jarvis search on Wikipedia what do you want to search on Wikipedia sir Virat kohi according to Wikipedia vat kohi Hindi pronunciation kohi born the 5th of November 1988 is an Indian International cricketer who played sest OD Cricket for the Indian national team a former Captain test OD and only retired from the achieving remarkable success in eache Captain C he served as a captain of the Indian national cricket team in all three formats leading the team with significant Twins and establishing himself as a strong and determined leader Jaris tell our audience to subscribe our Channel everyone who are watching this video please subscribe for more amazing content from Arab by night I will show you how to do this firstly go to YouTube click on the search bar error By Night press enter here you will see our Channel click here to subscribe our Channel and also don't forget to press the Bell icon turn on all notifications now we will integrate our JIS with J API so first go to Google and here we will search J API go to Google AI Studio here we have to create the API key create API key copy this one and get back to V code here in environment file we have to first write our Gemini API key paste it over here and and now get back to constant. Pi here we have to include another variable that is gini API key to os. environment dog jmin AP yeah now get back to J.P here we have to import the here we have to import the G API key from constant also import Google generative model by writing import Google to generative AI as J and also we have to configure this model so right here jni dot configure API keyal to gini API Key by this we will configure jini API with our J model and also we have to configure the model so right here jni dot generative model and here we will write the model of our Gemini which is which is Gemini 1.5 flash now we have to create a function for our Gemini response so get back over here our handle Jaris command here we will create a function for Gemini response and and in this function we will first write a tri block and response to model dot generate content query as well as return return the response in text field yeah it will return the response in text for and by this we will face the response from our model and also write for accept block and that's right return statement that will be get to our hand jarus command function here in the else command here in the else condition uh we will write else Gemini response equals to self do get Gemini response and write here query Gemini response equals to gini response Dot replace asri with blank space and it will remove the S symbol from our response and now create another if condition if Gemini response and Gemini response does not equals to yeah this if condition will generate if our Gemini is not able to response to our answer now let's test the functionality of Jarvis integrated with J API and here we will ask question apart from the command we have return for our Jaris to answer and it will return the response faced from Gemini model yeah so now again run this program Jarvis who is the prime minister of India the current prime minister of India is Narendra Modi what is the capital of France the capital of France is Paris Jarvis who plays the role of Captain America in Marvel Chris Evans plays Captain America in the MCU why is the Christmas celebrated on 25th of December Christmas celebrated annually on December 25th commemorates the birth of Jesus Christ a central figure in Christianity while the exact date of Jesus birth is unknown December 25th was chosen possibly to coincide with existing Roman winter solers festivals the celebration involves religious Services gift giving based on the biblical story of the Maggie's gifts decorating Christmas trees and homes sharing Fester meals with family and friends and exchanging thoughts expressing Goodwill Christmas is a globally observed holiday blending religious Traditions with secular Customs write a code to print hello word in Python the simplest way to print hello world in Python is backp back back python print hello world backward backward backward Jarvis can can you explain the offside role of football a player is offside if at the moment the ball is paid to them by a teammate they are nearer to the opponent's goal line than both the ball and second to last opponent excluding the goalkeeper being offside alone isn't a foul it only becomes one if they're involved in active play EG interfering with play gaining Advantage Jarvis write a song based on the theme of orders for our audience verse one Sunrise bleeds across the screen another day begins the coffe Brewing code combing where the magic spins a symphony of keystrokes a rhythm in the night we build the future line by line in digital sunlight forus oh we the corders the digital shimmons weaving spells of logic in algorithmic canons from server Farms to smartphones Bri we shape the world with Cod and Light verse two debugging demons haunt the code a frustrating CH through Tanger loops and broken paths at break neck piece but with a focused mind and will we conquer every b a Triumph small a victory won with the triumphant hug Horus oh with the corders the digital shimmons weaving spells of logic in algorithm canions from server Farms to smartphones bright we shape the world with Cod and light Bridge we more than just the ones who type we architects of thought designing systems Building Bridges where Solutions are sought with creativity and passion we crafted digital art Connecting People sharing dreams a brand new coded heart yeah here you can see the script of Our Song JIS has created and by this all this response you get the idea of how you can ask every any questions to our Jaris by integrating with j IPI and it has become more advanced by integrating it with gini and you can ask multiple question from it and in further more query you can also add other Jaris command functions to make it more advanced yeah so we cover all the possible expect for our JIS from building GUI to integrating it with jini llm model you can make it more advanced by using other llm model or programming new commands for our Jaris and homework for all of you this is to create a responsive text field on our GI and that's all from my end I hope you like this video so make sure to like share and subscribe and also drop the comment about how you rate this Jarvis and thank you for watching