Transcripts
1. Introduction: So you've heard about
schottky beauty and love it. And now you want to integrate the technology into a
solution or an application. Let's say you want to create an outlook extension
that uses chat GPT to generate emails for you that you yourself
don't want to write. Well, you're in luck. In this class, you
will learn how to use chat cheap and teeth and advanced AI language
models to build intelligent
applications that can respond to a variety
of different prompts. Whether you're a beginner, which actually PT, or a
seasoned professional. This course will
give you the tools on how to integrate Chat GPT into your day-to-day
applications and take your productivity
to the next level. Hi, I'm Henry, and I'm excited
to be the instructor for this course with
over ten years of experience as a data
consultant and an AI trainer, I'm passionate about sharing
my knowledge with people all around the world
and helping them to do amazing things with AI. With this course, you'll
learn how to integrate vt into other platforms and
applications such as Outlook. Even build your own
chat GPT application, response to e-mails
on your behalf. This course is perfect for someone who wants to
learn how to create great intelligent
applications using chat GPT from scratch. Whether you're a
beginner programmer for an experienced
user of chat GPT, they'll gain the knowledge and skills that you need to take your productivity projects
to the next level. With step-by-step instructions
and expert guidance, you'll learn how to use
traction e t to create responsive and
powerful applications that can transform the
way you work and play. Throughout the
course, you'll learn the basics of chat GET, including how to use its API to create responses to
various prompts. We'll also learn how to
integrate Chat GET into other platforms and
applications such as Outlook. By the end of the course, you'll have the skills and knowledge to build
your own check CPT application that can respond to emails
on your behalf. Our class project at the
end is where you'll be creating your own OPT
application as well. So are you ready to
go ahead and create some intelligent
applications using chat GET? Then join me in this
course and let's build some amazing
things together. See you in class
2. Project Synopsis: Hello everyone. Now this course would
not be complete without talking about
a class project. So by the end of this course, I want everyone at taking
this to basically create a quick intelligent
application using chat GBT and the application
of their choice. In this course, for example, it will be combining
Church BT with Outlook to create an
e-mail responder. But you don't have
to use L Look, you can use many different
types of applications. In here are a few ideas. For example, you can
combine charged with Excel to create an
application that automatically
generates insights and recommendations or descriptions
based on data entered. You can mix chat, GPT,
and irritable together. That basically gives that product descriptions or
social media posts for a given product based on attributes that are
stored within air table. Another really quick
and easy example of this project is combining
chat GPT with Power Automate. So create a simple workflow that automatically responds to customer inquiries
or support tickets. A customer service
type platform, right? So these are again,
just different ways you can combine chat GPT with these other applications to create intelligent
applications from scratch. Finally, about sharing your work after you've created
an application. Then please post it to the
project gallery down below. Post a screenshot and a quick
summary of the app you've created and what applications
you use to create the app. Okay, Awesome.
3. Environment: OpenAI API Account Creation: One thing we definitely need
to do now is we need to sign up for an API
key with OpenAI. This will allow us to talk
to Open AI's servers and basically provide prompts to their language models
like Da Vinci or Ada. And we can get back
responses with ease. So what we're gonna do
over here is we're going to click the API button. I'm on opening ai.com currently. Let me see if I can
zoom in a bit further. Let me go to API, and then I'm going to go
to sign up over here. Okay. Perfect. Now, I'm just going to sign
up with my Microsoft account. It's up to you. If
you want to create an account, you're away. But what you do need
is you actually need a valid phone number
that can text. So I signed in with
my Microsoft account, but it's asking me to
verify my phone number. So what I'm simply going to do is I'm going to take this tab, going to move it off screen just because I love all of you, but I don't want you to
have my phone number. I'm going to type
in my phone number so I can validate that. Perfect. Okay. I'm just validating it now. Just give me a few seconds here. Okay? Now it asks you a few questions like how will your
primarily use open it ai? Honestly, this doesn't
really matter that much. I'm just going to say
that I'm exploring some personal use for
my Open AI account. Perfect, and now
you're in the API. It was that easy. Now we'll be going through
these things later. But one thing that's very cool is you can click playground, but actually have access
to the entire chat GBT, Open AI, Dolly, any single
model you want from here. And you can also mess
up with the parameters. You can change the temperature, maximum blend stop sequences, a lot of these things as well
that are important to know. And as you can see here, you can go through different models, all the different GPT-3 models, all the different codecs models. And I'm not sure why
Dolly's in here, but it is available in the
API anyway, so we're fine. Okay, perfect. So now we actually have an API. Now to get your API key, which is the most
important thing that you need about
this process, is if you go over here, I believe to personal
and click View API keys. Right over here. You click
Create new secret key. After you've done
that, it will give you basically something to copy, put that in a notepad
just so you have it, because we will make sure
we actually use it again. And we'll refer to it as the
Open AI API key. Awesome
4. Environment: Setting Up an Azure Account: Alright, now the next
thing that we'll do is we will set up
an Azure account. And the reason why we need to
set up an Azure account is because we want to
use Azure Functions. Azure Functions are very cool. They basically allow you to execute code without
having a server. So our app requires us to connect to open AI's API, right? And it needs a computer or
a server to do that for us. Now historically what
you'd have to do is you'd have to buy a computer, basically on the Cloud or physically and have
that computer be the one who will actually ping Open AI's API and get the
prompts and responses. But with Cloud computing
and with Azure, we can just set up something
called Azure functions. We can tell Azure
functions basically, every time you get pinged, you need to then send
that ping to OpenAI, deliver the prompt, get the response back and
then show it on the app. And it's all managed
through Azure Functions. So again, you can go through
here and read more about it, go to azure.microsoft.com and then search for Azure Functions. But it's very, very easy
and cheap to use as well. And the best thing
about it is you can develop in any language. We'll be using a Python, but you can really use it
in any language you want. Okay? Again, I do implore you to
kind of go through this. One of the best things about
it is that for pricing, it's basically free,
especially for our purposes. It'll be free because we
don't need something that's dedicated because we're
just creating test apps. But if you look at
this over here, this is how the charge you, where you get, it's
charged based on execution time and
total executions. So you have a free
grant per month. So if you don't pass 400,000 gb a second or 1
million executions, then it's free, completely free. Now, if you're just
creating a sample app, you will definitely
not pass this. So you should be able
to do it for free. Okay, so with that being said, let's go ahead and create
our Azure account. So we're going to click
free account over here. It says building the Cloud
with an Azure free account. Now over here. Basically, if you do
qualify for a free account, you can go through with it
because you actually get $200 for free from Azure. Now, I'm not eligible. You're only really
eligible if you're, for example, a student, if you have a student
email or a work email that hasn't been used before,
things like that. So I'm going to go with the pay-as-you-go
option and sign up. But remember, you
should try if you have a school account
or anything like that to click Start free. Now again, how
we're using Azure, you will be charged anything. Anyways, it will require
a credit card from you. But again, it's not going
to be charged because we're just going to be
using Azure Functions. Which again, as we saw, if you don't pass 400,000 gb a second or 1
million executions, then you won't be charged. And even after that, it's
pretty cheap anyways. Okay. So I'm going to go in
and click sign in. Now I'm going to sign in with my Microsoft account that
I've already set up. Perfect. Now once you've
reached this page, again, you have three
options to subscribe. You can subscribe using
the free trial option, using Azure AD or access
student benefits. So these are different
things you can do. I mean, well, we're
gonna do is we're simply going to go to subscriptions. Okay? Having authentication
issues, that is weird. That's fine. So remember, go
to subscriptions, we're then going to
add in a subscription. And again, you have two
options. I'm going to select. Pay-as-you-go will then ask me for a few things
like my credit card, my firstName, lastName, my phone number,
everything like that. So I'm actually going
to do this off screen. I don't want to advertise
my phone number and to everyone here. Let me see. Let me go ahead and do that. It asks you for
your phone number just because you shouldn't you shouldn't make countless
Azure accounts, right? It definitely doesn't like that. So let me go through
and I'm putting my verification code
and then going to put in my address because again, you need to put in
a credit card here Perfect. Right. Now the next thing I'm
going to do is I'm going to put in my payment information. So again, all you need is a
credit card to get signed up. So let me go ahead and do that. Okay. I actually put my credit
card number eight, frankly, so I'm just
going to try it again. I'm really sorry about that. But again, this is
a intro to experts, so I wanna make sure
I record everything. Because one thing I hate is when tutorials go through things, but then they like skip
the most important part. So I wanted to make sure I go
through every single thing. So if anybody has a question that it won't be because
I skipped anything. Let me just try again here. Perfect. All right. Now, it may ask you
for technical support, but don't bother,
don't buy that. That is, It's not worth they just click no technical support. And you should be all good. So let's click sign up. Now it's basically
confirming my information. It's doing all of its checks. So let's wait until that's done. There we go. It's done. Now, if you've done
everything correctly, what you should be
able to do is go to portal.azure.com and see
something similar to this. So you should see
something like this. If you don't, again, just ask questions in the comments below. Something you should
be able to do as well if you've
done this correctly, is you should be able
to go to subscriptions. And you should be able to see your subscription over here now. Okay, perfect. And it should be again active. But if you've done all of that, now you're basically
in Microsoft Azure. Perfect
5. Environment: Configuring Azure Functions Resource: Okay, Now that we've
created an Azure account, the next thing that
we're going to do over here is we are going to create a Azure
Functions resource. Okay, so I'm just
going to type in the main box here function. We're going to create
a function app. This is where you, It lists all of your
different function apps. Obviously we haven't
made one yet. So we're going to go
ahead and click Create. Okay, and then we need to
fill out a few details. The first thing is
a resource group. Now, this is basically a
collection of services. So if you have many
different services that you're using from Azure, you can roll them up into resource groups for
categorization purposes. Okay, So we're going
to go over here. We're going to create
a new resource group. Again, this is for our chat GPT. Well, really it's open AI, but Open AI testing purposes. Okay, we're going to
click Okay on that. Then we need to give it a name. So we're just going
to go over here and click Open AI first. It's going to be a code publish. Now you need to choose basically your runtime
and your language. So we're going to use Python. But again, you
could code this in any language you
feel comfortable in. Most people know Python, I feel comfortable in Python. So we're choosing Python. One key thing here is that right now it actually only
supports up to Python 3.10. And even three-point
ten is in preview mode. So we'll actually be
using Python 3.9. Okay? The region is to us that's fine. Linux is fine. And make sure you select
Consumption Plan. Don't select premium
or App Service plan because there will be a lot
more expensive for you. So again, make sure you click
consumption, okay, hosting. You don't really need to really affect
anything over here. Basically, a function
also creates a storage account,
but that's fine. You can just go to
networking over here. Make sure you select
Enable public access. Nothing really to
do here as well. Nothing to do here as well. You can set up
GitHub deployment, which was very cool, but
we don't need to do that. Okay, now let's go to
Review and Create, and let's click Create. So now what Azure is doing
in the background is actually setting up
your website for you, which is again very cool, right? It's actually setting up that function computer
in the background. Then you can tell it to do
multiple different things. And we'll, we'll do is
we'll basically tell it to ping open APIs, api
for information. Okay, So after this is done, this we'll say
deployment complete. And then we can go
ahead and go to the next thing that
we need to set up. Awesome
6. Environment: Python Installation and Setup: Okay, Now the next thing we
need to download is Python. Now, hopefully most of you already have Python
downloaded and installed. And you can check
that by actually opening up a command terminal. So type in cmd into your chat. So you get something
like this, okay? And now type in Python. And it will tell you if you
have some Python already set up in this virtual
environment that I'm in. Do not have it set up. So it opens up a Microsoft Store for me, for me to buy it. Okay? So if that happens, then you don't have
Python set up. Specifically the
Python that we need to download right now
as of this taping, the Python version that's
available is Python 3.11. Now, here's the key thing. Do not download Python 3.11. Do not click this yellow
button over here. Because Azure Functions
currently only works with three-point
ten and below. And particularly the long-term
sustainable model is 3.9. Okay, so remember that please. So what we're gonna do is
in the download section, we're gonna go all the
way to the bottom. Okay, whoops. I think we need to go to
downloads and then Windows. And then we're gonna go all
the way to the bottom until we see the peak 0.9, 0.16. Okay. So let's go ahead
and click that. Actually, I don't
think this one has an installer, no installers. That's okay. To make it easy, we can go
to download any 3.9 version. So let's go to one that actually has an installer for us to use. Let's see here. Let's keep going here. 0.9, 0.13, May 17, 2022. We're going to download
the Windows installer. I have a 64-bit machine, so I'm going to download this. I'm just going to click it
as well because it's done. And we're going to
install Python. There we go. So
let's click Install. Now. Let's actually
add it to the path as well. Almost there. Okay, Perfect. Awesome. So now let's
close out of this. And now Python should be
involved in your system. So let's open up
another cmd file. Now if I go in here
and type in Python, perfect, I get Python
divergence p 0.9, 0.13. Now if you type this and you
get something like 3.11, then as of this
taping and least, you cannot use Azure functions. You will need to
use something else. Or what you do is you
uninstall that version and then install Python 3.9, 0.13. Awesome
7. Environment: Installation of Visual Studio Code: Okay, Now this is getting
a bit exhausting, but I promise it will all
be worth it in the end. The next thing we need to
download is Visual Studio Code. This is an application or an IDE available from Microsoft
that really lets you, first of all, code easily. But the reason why we need it is because we
actually need it to deploy functions on Azure, okay, So you
actually need to get Visual Studio Code to enable
you to deploy functions. Okay, so let's go ahead and
click Download over here. Perfect, It's just downloading. And again, if you already
have it, skip the video. There's no need to
watch the video if you already know
how to do this. This is again for everyone. That's why I'm going very, very, very pointed detail. Because the worst thing
about a tutorial or a course is when an instructor is skipped
something that you, that they think, you know,
but you actually don't. And that just brings me so much. Okay. Let's go ahead and click that. I'm just going to open up here. So I'm going to
accept the agreement. Next, next, digit you to
create a desktop icon. Next, install. Okay, Easy peasy, lemon squeezy. Again, Visual Studio Code, very cool and honestly you feel like a hacker
when you're using it. Because if you haven't, if you haven't used any
sort of IDE before, it's, it's, it's a
lot of fun to use. Alright. I probably just made myself seemed like a
wimp for saying that, but oh, well, okay. Mine, it's almost done. Perfect. Okay, So let's launch
Visual Studio Code. Perfect, so I now have it open. I'm going to choose the
dark option over here. And what I'm going
to do is I'm going to click Open Folder. Okay. I'm going to go
into my, ah, let's see, I'm actually going
to create let's see, document's going to
create a new folder here called Scratch. Okay? And I'm going to
select this folder to open my project in. Say yes, I trust the authors. And there we go. That's it. So now we have everything
installed that we need to, we do need to configure with Visual Studio
code a little bit. But hey, we are almost there.
8. Environment: Configuration of Visual Studio Code: Now there are a few
configurations that we need to make to Visual Studio Code
for it to work properly. The first thing we
need to do is we need to make sure
we can actually execute and run Python code
from Visual Studio Code. Just so it makes
things a bit easier. Okay, well, we're
gonna do over here is we're going to go to the
Explore section on the left. If you don't see it, make
sure you click this guy here. And we're going to
click New File. And we're going to type
in Scratch dot py. Okay, this will
be a Python file. Now automatically asks us, Hey, do you want to install the
recommended extensions for Python? Yes, we do. So let's click Install on that. It takes us to this
page under extensions. Now we're actually installing
the Python extension. And it just helps us
because it basically allows us to code faster. It'll tell us when
there's errors. I'll provide us Jupiter
notebook formatting. I'll provide us debugging, really, really
good sense things. Okay? But let's go back here. And let's type in a
very simple command. Let's type in print. And then in quotes. Hello world. Whoops, there we go. Hello World. Okay, Perfect, that's already installed it. Let me x out of that. Let me make this a bit
more zoomed in as well, just so you all can see it. Okay, Perfect. Now, how do we actually
go about running this? The first thing we need to do
is we need to make sure we have our Python
interpreter installed. At the bottom right, you should see basically the interpreter
here which says Python, and it's using 393-39-1364 bit. You can actually
see the file path that the interpreter is using. If you want to edit it,
you can always click it and change the
interpreter as well. Something else you can do is
let me just X out of this first is you can go to
Control Shift P. Let's go to, I think we can just
search it in tr. Tr. You can click over here. If you type an interpreter, you can click here,
select interpreter. And how I got to
this, by the way, as I held down Control
Shift and I clicked P and I typed in interpreter. This is basically a
menu that allows you to search many
different settings. So I'm going to search
the interpreter setting. And over here I can see I can click Python select interpreter. And then I get this. And I'll actually asked me, Hey, what interpreter or
do you want to use? And if this is not
set up for you automatically,
which it should be, you can always click here and type in the interpreter path of where you're a
Python is installed. So you would basically
go in here and type in the path of where
Python is installed. Again, if you don't
see this already, which if you follow the
instructions so far, you should. Okay. So let's see if this works. We have a Python command here. What we're gonna do
is we're going to save this file first. That's where the dot is for. The dot means that the
file is not saved. So we're going to click
Control S to save the file. And then we're
going to click F5. And when we click F5
for the first time, it asks us for a debug
configuration. Let's see. We can simply just, I think right over here, Python file and just running it. And let's see if that works. Okay. It didn't like that for
summary. Oh, there we go. Hello world. Okay. Perfect.
It works. That's good. If I put in here a
Hello world again, and then click,
Make sure you save it Control S, and then click F5. Or you can also go over here
and click the Play button. Then you should do
the same thing. Hello world again. Awesome. So that means it is working. And if you can't see
this by the way, then you have to click
this guy over here, which toggles the
visibility of this panel. So perfect, We did one thing. We're able to run Python right
in our Visual Studio code. The other thing
that we need to do over here is we need to add in the extension for
Azure functions. Okay? So let's go over
here to extensions. And we're going to search
over here, azure Functions. Azure function. Let's click it. This is what it looks like. It's an Azure
Functions extension for Visual Studio Code. We're going to select Install. It is now installing. Now after you've
done all of that, we can just accept of
things that we don't need. On the very bottom, you
should see an a over here. That's the Azure symbol. So let's go to Azure. And what we need to do
next is we need to sign into the Azure account
that we had created, that where the Azure Functions that we just created
also resides. So make sure you sign into
the same Azure account. So let's click sign into Azure. And then will take us
to this page over here. Will then go ahead and sign in. You are cited and now
you can close this page. Now you know if this will work, because if you go
over here again to Azure and go over
here to resources, and then click
your subscription. And then you should be able
to go to Function App. And you should see the
function app that you had created a few videos before. If you can do that, then you are in
the correct place. Awesome.
9. Environment: Running Python and Pip on Terminal: Okay, Now the next
thing we need to do is we need to make sure that the Python command is
accessible in our terminal. So if you don't see any of this, what you can do is click this
guy to toggle this panel. By now, once you
open up Terminal, it actually opens up a
PowerShell terminal. So you can go in here and
type python and click Enter. And it will actually
launch Python for you. So if you see
something like this, you've done it correctly. To exit, just type in
exit, open, close. And then you go back
to your PowerShell. Now, if this doesn't
work for you, but you do have
Python installed, what that means is that
this Python command is not available to you in your
environment variable. So how you do that is click the Start key over here and
go to environment variables. Edit the system
environment variables, click environment variables. And the one that you want
to edit is called path. What the path variable basically does is it goes through all of these folders and finds commands that are residing
in these folders. So right now if I type
in Python, for example, it will first check
if the Python command exists in this directory, then this directory,
and so on and so forth. So what's likely the case if you do have Python installed, but you can actually access
it from the terminal, is that you don't have one of these two paths installed in
your environment variable. Now how do you know
where Python is? Well, you can Google it, but it's usually in C Users. And then your name, AppData
local programs, Python, python 39, if you don't see this URL updated,
sometimes hidden. So for example, if I
open up my directories over here and I go to Henry, I don't see AppData here. I manually need to
go in here and type in app data. And now I see it. So local programs, Python,
python, threonine. And there we go. Since I do have it as part
of my environment variables, I can see it very clearly here. Okay? Now, again, put questions down if you don't know
how to get there. But that's usually the case
if you can't access Python. Okay, So that's the
one check done. The next thing we need
to do is we actually need to install pip. Pip is a package installer for Python that basically
enables you to install packages for Python to make sure
you have that. Typing pip. Click Enter. If you get something like this, that means you have
pip installed. Okay? Now if you don't
have pip installed, there are very good
resources online. So go to pi, pi.org slash projects slash pip,
click installation. And it walks you
through exactly for Windows or any other
operating system you're in, how to actually deploy
and install pip. Okay? But that's the other configuration
that you need to know. Need to have Python
accessible from the terminal, as well as Pip accessible
from the terminal.
10. Environment: Creation of Microsoft 365 E5 Account: All right, Now the next thing we need to do over
here is we need to create a Microsoft account. And the reason why is
because we're going to be integrating chat GPT
into Power Apps, power Automate SharePoint Teams, Power BI, and a whole host
of Microsoft 365 products. Now, if you already
have A360 account, if you already have
something like teams from your company
or something like that, then don't worry,
you're all good. You can skip this video. But for those who don't, you need to unfortunately
create a O365 account. But I know a way to create a free trial account you
can use for about a month. That again, is completely
free and you can use it to test for the
developments, which is nice. Okay? So the way to do that
is go to Microsoft 365 and then go to
Office 365, E5. You can also just Google
this if you want as well, and it should take
you over here. Then go ahead and
select free trial. Okay? The next thing you
need to do over here is you need to enter your work or school
email address. Okay? Now, a Gmail and Outlook
won't work here, right? So this isn't the same account that you use to set up Azure. This is a whole
different accounts. Unfortunately again, you
can use Outlook or Gmail, but what you can do is if you have a work or school e-mail, you can put that in. If you don't, then
I've got your back. Something else you can
do is you can have something called
a temporary male. So for example, if you just
refresh this page over here, Well, this was actually
the same e-mail address, but sometimes you gotta you email address again
because this is a temporary mail that you can use that I think changes
I believe every hour. There's a few other
ones you can use to, but let's go ahead and copy
that to our clipboard. And you can paste that in here. And you don't have to
worry because after this, you don't have to worry
about this e-mail any more. Okay? So let's click
Setup account will need to put in our information. So open them again, Henry. Beat business phone number. I'm just gonna put in
something random here. Company name. Now, previously
I put it in Udemy course, but let's call this
shot GPT company. Okay, I will, five to
nine people will make this Canada for me because
I am based out of Canada. And let's click Next. Now the next thing you
need to do is you need to verify your phone number. So I'm going to put this on another screen while I do that. Because obviously
you don't want to. I mean, I love all of you, but I don't want everyone
to have my phone number. So I'm just going to enter
in my verification code. Click Verify. And now this is where
we get to the fun part. What do you want your
domain to be called? Now since you're creating
a trial account, it will have.onmicrosoft.com
at the very end. So I'm just going to make that my username and my domain name. And make sure you actually save that somewhere because
you will need to login to it again and now
put in your password. Or sorry, create a
password rather. Now it's just signing the n. Okay? Now, this is the last step over here to enter
in a payment method. Now if you think it will
continue to use Office 365 E5, go ahead. Put it in. But if you
don't that honestly, you can just close this page and open up a new
tab and you're done. Your account has been created. You don't even need to
put in a credit card, which I think is really funny. Hopefully, Microsoft
doesn't watch this video and kind
of gate it for me, but we'll see, okay, now we're back over here. What I want everyone to
do now is to actually go on the Admin
Center for Microsoft. So Microsoft 365 Admin Center, you can just Google that. Microsoft 365 Administration. Go over here on the top right. And you don't want to, again sign in with your
personal Outlook account. Instead, you want to sign
in with your 365 account. Okay? So click these three dots, click work, school or university And it should transfer you to the account that
you just created, the Microsoft 365 account. Okay. Perfect. There you go. Now again, just make sure
you're on the correct account. Sometimes microsoft likes
to switch you around, so we can always look on the top right to make sure
you're on the same account. But this is the account
we just created. Now, if you go over here to the top-left and
GoTo app launcher, you have access to
Microsoft through 65. Let's go there. This is
where you're supposed to be. Sorry. Go over here to all apps. That's weird. Why, why can't I find
any of the applications? Weird? Let me just go in here. Okay. That's fine. You know, maybe it's because we didn't
put it in our credit card. I mean, I use on my own
personal account anyways. But you should have
access to Teams, Power Apps, and Power Automate. And in order to check that
something you can do over here is open up a new screen and
go to make.powerapps.com. Okay? Once you go here, it should
automatically log you in based on the account
that's set up for you. So again, right now, it's actually defaulted
to another account. So I'm just going to
sign out of this one. And I'm going to sign
in to the chat GPT one. So let me just go
ahead and do that. There we go. I'm
getting my password. Perfect, and this should load. And let's do the same thing with Power Automate because we'll
be using that as well. So go to Power
automate.microsoft.com. Let's sign in. Choose the account
that you just created. Perfect. Get started. Let's change this to Canada
because I am currently in Canada that those two
are just loading. And then finally,
let's open up teams. I'm not sure if you can
actually, you know, we might need to download it, but we'll do that
in the next video. Let's just make sure that
these two things work. Perfect, okay, so if
you've hit this page, then make sure your environment matches the company
you just create it. Then you're in the right
place if you come over here. Perfect. Okay. So you have Power Apps and
Power Automate fully working. Now, again, the reason why I wanted to go to
Microsoft through 65 first is because
usually you can launch your applications
from office.com. But maybe Microsoft has since changed that,
but that's fine. You can just go to the links and it will open up Power Apps and Power Automate
for you. Awesome.
11. Serverless API: Python Usage to Access OpenAI API: Now we have all our environments
and software set up. The next stage is
to actually create a serverless chat GPT API. So it's basically an
API that we create that enables us to
ping open APIs, api for any responses
that we want. Now if that was a bit
confusing, again, refer to the chart and the introduction
section of this course, where that's how we build apps. We basically build Azure
Functions that ping APIs, ask questions, get answers back, then, basically show
those answers in the app. Okay? The first thing we need
to do is we need to actually make sure before we even get into Azure Functions and
serverless functions, we need to make sure that we can actually work with
Open AI's API. Now if I open up my browser
here and go to API reference. So right now I'm
an open api.com. I've logged in and I
go to documentation, and I go to introduction
for the API reference. This is a very good guide as to how to actually
use Open AI's API. Again, it's very easy
and you can change the language here to the
language that you're using, which in our case is Python. Okay? So this is what I'm
going to use as a basis. But again, I want this to
be the complete guide. So please, please use this as a reference material when
you're creating your own apps. Because I'm telling
you it's very, very well, it's not
difficult to understand. There's a few configurations, oddities here, but it's
not that difficult. Okay? So let's
create a new file. And we'll create, will call
the file access API dot py. Ok. Now the first thing
that we need to do is we need to actually install a library
called Open AI. So how we do that is let's
open up a new terminal. We'll actually, we can just, I guess we can use this one, but I always like to open
up a new terminal in case people are following
for the first time. I'm going to actually
install in OpenAPI. So we're going to write it
in pip, install Open AI. What it's now doing is that
it's actually installing. Open AI's a library of
Python functions that we can use to make it easy
for us to access open APIs, api using Python. Okay? So it's basically a bridge that allows us to connect
to open AIs. Alright, so we're just going
to wait until that's done. Now, while that's going on, we can actually keep going. The next thing we need to do is when we connect
to open AI's API, we need to identify who
we are and how Open AI does that is that it requires
you to pass an API key. So what I want everyone to
do is go into personnel, go to View API keys, and then create a secret key. Now once you create this, you won't be able
to get back to it. So make sure you click copy on this and actually
save it somewhere. Also, do not attempt to
just copy my text here, because by the time you're
viewing this video, you won't actually have
access to this API. So please, please,
please go into your own personal account and create a new secret
key that way. Okay. So we're going to go back
here and it looks like our PIP has
successfully concluded. Awesome. So the first thing we're
going to do is we're going to actually
bring in our key. We're going to call
it secret key equals. And then in single
quotes, that API key. Okay, perfect. The next thing that
we're going to do over here is we're going to simply call OpenAI and
really see your work. So what I'm gonna do over
here is I'm going to import in Open AI's model. Okay? What then, what I
then need to do is authenticate that I actually have a key that I can use to actually
access their services. So I'm going to say Open API. The API key I want
to use for this is equal to this secret key
variable that I have up top. So now by doing this, whenever I make
requests to open API, it knows that it's coming from a good source because it
can take the secret key to that account that I just made with open API,
sorry, with OpenAI. Okay. Now the next thing I can
do is actually I can, I can basically make requests
to different models. So for example, what I
can do now is I can say, let's see, outputs
equals open ai dot. Now Open AI has multiple different models
that I can access. But I'm going to, well, sorry, many different functions. I'm going to access the
completion function, which basically creates a Pleaded response
based on a prompt. So that's basically what
Chuck GPT uses, right? Then I'm going to say create. This function basically takes
in a bunch of arguments. The first thing I need
to specify is, hey, what model do you want to use? We previously saw how Open AI has multiple
different models. They have their advantages
and disadvantages. I'm going to use the one
that's used by chat GPT, which is the da Vinci model. So I'm going to use
sweat over here. Text dash, Da Vinci, dash 003. Now this might be
outdated by the time you actually view this course. So the best way to
know what models to create is to actually go in here and click models and see
what the latest models are. You could also look at Curie
beverage and other ones too. But I'm going to
look at da Vinci. Okay, perfect. The next thing you
should want to be able to show is
the actual prompt. Okay? So what do you want chat
GPT to complete or produce? Well, what I'm going
to do over here is I'm going to at the very
top of this page, type in a prompt as well. Now I'm going to say
that I want the prompt to be, you know, tell me a slogan or a security or a home
security company. That's it. Okay. So I need to give it a prompt. So I'm going to make
the prompt parameter of this function equal to
the prompt variable, which is again, tell me a slogan for a home
security company. Okay, now I can put in
some other things as well, but I also need to do is
put in the max tokens. Which basically means, again, we've already talked
about what tokens are, but how many tokens do you want Open AI to create for you? If you have this
number is very high, then it can give
you essays, awards. If you have this very low, then you can only get, you know, I think one is, I think the idea is ten tokens is equal to
seven words, right? We're gonna do 100 tokens. The idea of if you want to save your money and
save your requests, then you would have
lower tokens, right? A slogan shouldn't be more than, I think, ten words. So about 100 characters. I'll make it 200 characters. That should be fine. Okay. Then we're going to make the
temperature equal to zero. That's again, very
self-explanatory. We've already talked about
what temperature is we can toggle it will just
make it zero here. The last thing that we
wanna do is we actually want to print the outputs. Okay? So we can actually see
what it looks like. With that being said, let's
go ahead and click F5 on this and see it in action. There we go. We're done. Now what we've done is
we've printed the output. The output is
actually a JSON file. Well, it's a JSON object rather. And it has a bunch
of different things. It has a key called Choices. And within choices, you
have the following here. So you have the finished
reason, the index, the log prompts,
but you also have the response from
OpenAI over here. Secure your home, secure
your peace of mind. Well, that is a great slogan. It also gives you other
metadata as well. So it tells you when it was
created with the ideas, what the model was used, the objective, and also tells you how many tokens were used
as well for this request. So the prompts,
tokens were nine, completion TO kids were 13. Okay, Perfect. There we go. We basically made
our first Python function. Well, we've made our
first request to Open AI using Python, which is the first step in
making a serverless chat GPT API that we can install
into all of our applications. Awesome
12. Serverless API: ChatGPT Responses Management: Now that we have a way, basically to use a Python
script to access Open AI's API. Basically we gave it
this prompt here. We ran the script, it access the API. It basically gave that prompt to this model and then
returned to the output, which is this JSON
file. That's all great. But we actually
need to strip out the text over here because we want to be able to show
that in our, in our apps. We don't want to show
all of this stuff. All we want to show
is the actual text. So what we're going
to have to do over here is create a new variable called output text that is
going to be equal to output. And let's see over here. So output right now is a JSON. So we're going to access the first element of
that JSON choices. So we'll type in choices. We then also going to access the first item within
choices, right? And again, since this is Python, the first item is equal to index zero because computers
start counting at zero. Okay, so now we're in here. Now that we're in here, we want the text. So I'm just going
to put in text. And that should return this string over
here, which is great. Alright, so let's go ahead and run that and see how it works. Okay, so I'm going to
click Run Python file on that ellipse would I should
be doing is printing texts. Let me just do that. Make sure you save it. And then let's play it then. Perfect. Okay, There we go. So now we've been able
to actually output just the quote that we
need, which is great. Now there's a few things we probably need to
clean up as well. For example, we
probably don't want these double quotes in here. You probably don't
want the period, but we have the main text. Now we can also choose
other prompts, right? So instead of telling
me a slogan for a home security
company, we can say, give me an outline
for a course on how to make web
applications using bubble. Okay, so I can do that. I will up the max tokens to 300 just to see what
it looks like because I want to get more texts back. So let's go ahead and we're
going to play it again. One Python file. Okay, it doesn't like something. Let's see what does it not like? Oh, it's because I
accidentally did that. Okay, let me go back in here. Click Run Python file again. So it's running, and
there we go. Perfect. So over here, introduction
to web applications. What is a web application? Benefits of using
a web application. Getting started with bubble, the bubble account, building your web application
and so on and so forth. So now we've created a
very simple Python script. Write that again, given a
prompt and a secret key, accesses the API and
provides an output for us. The next thing that we
need to do is we need to make this serverless. Because we need to
basically wrap this in a function that our apps, like Power Apps, power Automate, bubble air table can
access on the fly. Okay, so that's what
we're going to do next. We're going to now put
this into Azure Functions, which means that
whenever we need any sort of response
from an API, we can basically use
that Azure function. And we don't need to
have a computer running or it will basically be
serverless, which is nice. So let's go ahead and do
that on the next video. Awesome.
13. Serverless API: Creating a Basic Azure Function: Hey, let's go ahead and
create an Azure function. The first thing
that we're going to do is we're actually going to open up a new
project altogether. So let's call this the
basic Azure function. Okay, perfect. And we're actually going
to select this folder. Okay, perfect. The next thing we're gonna
do is we're going to click the Azure button here. And again, make sure
you're logged in. If you're logged in, you
should be able to go here, go to Function App, and actually see Open AI first
as a function over here. But what we're gonna do
in our local workspace before we push that
function to Azure, is we need to create it locally. So what we're gonna do over
here is we're going to click the Create
Function button here. And perfect, okay. So it says over here to
create a new project, we need to specify
which folder or LVN. We'll just put it in back.
Basic Azure Function, the folder we just created. It's then going to ask
us for the language. We're going to select Python. Now it asks us for
the interpreter. Now, again, if you've set up Visual Studio code correctly, you should see over
here python 3.9, 0.13. If you don't, then
you need to manually enter a Python interpreter path. And your Python
interpreter, again, can usually be found in the
following address here. See users than your name, AppData, local programs,
Python, python 39. And here's the interpreter here. But I'm just going to
click this because I've set up VS code properly. Then asks us for a template for your
projects first function. And we're going to choose
the HTTP trigger templates. Okay? We need to give our
function a name. Let's call it basic Open API. Okay? It says over here now we need an actual authorization level. Make sure you choose anonymous. What that means is that anybody
can access our function. That's fine for now
because we're just developing obviously
in production, you would want to make
sure that you have a administrative
account related to it. But for now we'll just put
anonymous to make things easy. Now it's going
ahead and creating our virtual environment
AND function. So this might take, hopefully
only takes a few seconds, but sometimes it does
take a few minutes. Hopefully it doesn't
take too long. Come on. Come on. Let's go. Let's go. Almost there. I
hope there we go. Finished creating
project. Perfect. Okay. Now if we go back in here, you'll see way more
files than you saw before in this basic
Azure Function folder. You're right, you see
an environment here, you see some extensions here. You see a lot of
different files, and we don't have to go
through all of them. This course isn't meant to be an in-depth guide
to Azure Functions. But the main things that
you should worry about if you open up basic
Open AI is this in it? Dot py and requirements.txt. These are the two files that
you need to worry about. So let's go through
an a dot py first. Basically, when your
Azure function is called, this is what runs the main
function within an app dot py. Currently what this
function does is that it basically tries to find a parameter called name and then just outputs it
to you in that function. So it's a very simple function. It basically just takes
the name parameter, then just output set
as an HTTP response. So that's basically
it for this function. And this is where we will
actually put our main logic. The other file that's
important is requirements.txt. This basically tells Azure what libraries do you want to
use in your Python script. Now, here is where you would
put things like pandas, numpy, any sort of
Python libraries. The ones that we're going to be using obviously is Open AI. And we'll do that a bit later. But there we go. This is a basic Azure
function that we have created
14. Serverless API: Azure Functions Testing and Deployment: Okay, Now that we have our
Azure functions set up, let's actually deploy it just so we get some
practice at it and we can see what it
looks like when it is truly serverless. So when you're in
this over here, again, don't make
any changes to it. This is just a default
template that Azure gives you. What we're then going
to do is we're going to basically run it. So over here, click F5. Okay. So this should pop up. It should basically just
do a few executions. And one error that we
commonly see when you actually do this
for the first time is this guy over here. This activate script
cannot be loaded because running scripts is
disabled on the system. For more information, see execution policies at this link. Okay? So basically what
that means is that visual Studio Code is trying to run the script
called activate PS1. But it's not allowed to actually do that because
it's blocked on this. So what you need to
do then is click this disconnect button first, just so that you're not running any applications at the moment. You then need to change
the execution policy of, of, of your system to
allow the scripts to run. So what we can do is we
can just go over here. Let's just copy this. And again, Google is going
to be your best friend here. And I always again show my process because I want to make sure that at
the end of this course, you know how to debug
errors as well. So what I'm going to
say over here is change execution policy
to unrestricted. Okay? And, you know, you can
usually sometimes go over here to a stock exchange
and find the answer. So you can set execution policy. We don't want remote
side, we want unrestricted right over here. So we need to run this
command basically. Okay, so let's copy this. Go back into our terminal. Sorry, where do I turn a logo? Right here. Okay. And then just paste it. Permission denied. Okay, So it says here start Windows PowerShell with the
Run as Administrator option. Okay, that's fine. Something we can do is
we can close out of VS code and then just open
up VS code as administrator. So just click, just find VS Code and then right-click it and then click Run as Administrator. Again, I just want to show
everything that I'm doing because this
minimizes the number of questions and frustrations
that people get. And you can always go back and forth too if you
want to skip this part. But now that we've opened
it as administrator, let's copy and paste the command again and
see if that works. Perfect, it worked. Awesome. Okay, Now what we're
gonna do here is we are going to now go
back to this file, click F5 and see if that works. No error so far in
the log, that's good. And now, once it's, once this is orange, that means your app is
fully up and running. Now in order to. So basically
what this means is that your Azure Function is
now being hosted locally. And to actually see
if it's working, go to Azure, go to your
workspace, your functions. Right-click this and then
say execute function now. And what we're going to
provide that function is a JSON file with the key name and the word azure and change this
to your own name. So I'm going to change this to my name and then click Enter. Perfect, the function
actually ran locally. And as we can see over here, this was the response
of the function. It said hello Henry. This HTTP triggered function
executed successfully. Perfect. What that basically means is that we were able to host
us function locally. We then triggered it, we pass it the name parameter, and then it returned
to that, back to us. Awesome. Okay, Now the next
thing we need to do is this is running locally. We don't want to run
this function locally because if your
computer shuts down, it's not connect
to the Internet, then we'll have problems. Instead, let's do this. Let's actually now hosted on Azure Cloud environment so that it can be running all
the time on the Cloud. And we can access it from any single application and
from anywhere in the world. Okay, So what we're
gonna do over here is we're going
to click F5 again, so that the application runs
and distinct turns orange. Perfect. Then what we're gonna do
is we're going to choose We're going to click this
button here called Deploy. Deploy to function app. Now it asks you, Hey, where do you want
to deploy this to? Well, we already created a function app called
Open AI first. So that's where I'm
going to deploy it to. That says, are you sure
you want to deploy? Click Deploy. Now as it's doing that, let's actually open up Azure. I'm just going to open up my Azure portal again,
go to portal.azure.com. And then let's go to our function app that we
created called Open AI first. And now here, what's
happening is it's actually deploying this function
called basic Open AI, right? So that's what we just
created in VS Code. So it's actually deploying
it after it's deployed, will actually be
able to see this in the virtual environment. So let's wait until that's done. Deployment to Open AI complete. Great. If there's
any questions there, make sure you let me know. But anyways, what we're gonna do over here is we're
going to click basic Open AI. And then there's a few
things you can do here. For example, you
can see the code, you can't edit it. You can only edit the
code and VS code, but you can actually see it, I believe in here,
which is cool. Here, yours, our
code that we made. Okay, well, you can also do is you can monitor
the function. So every time it runs,
you can monitor it, it see the logs, see if it's running
properly, things like that. But what we want to be able to do is let's go to Overview. We basically want to
get the function URL. Okay? So basically this is now our function is
hosted on this link. Anybody who accesses this link will basically be able
to access our function. So let's click Copy on this. Let's go over here and paste it. And perfect, we
basically see that HG, that, that function
being triggered. Now right now, it says
that we actually haven't passed in a name in
the query string, so we need to go
ahead and do that. But the function is
actually up and running, which is very cool. Now, to test this function
and actually pass it. A parameter we need to do is
we need to go on Postman. So let's open up a new
tab and go to Postman. Postman is basically
a platform that allows you to test APIs. It says test APIs, okay? So basically what we can do
is we can test this API, pass it that parameter, the name parameter, and see
how the output changes. Okay, so let's go
ahead and do that. We're going to go to Postman. Let's go ahead and sign in. Now we do need to create an account and
everything like that. So let's do that
in the next video. But at this point, make
sure you sign into Postman because we're going to be
using it for the next video. If you don't have an account, just create one.
It's completely free
15. Serverless API: Serverless Functions Postman Testing: Okay, Now that
we've actually gone ahead and signed into Postman, the next thing is to actually test our Azure function
using Postman. So when you've signed in, go to collections here, let's create a new
collection called the ***. And we will create a new
request within APIs. And let's call this one test. Now, we're going to
make a GET request. It asks us for the request URL. Go back over here to
your Azure Function. Click Get function
URL, copy this, paste it in here, click Send, and there we go. We have successfully tested
our API using Postman. It's not that crazy because we already tested it by actually just executing the
request in a browser. So it's the exact same response. But now that we've
done it in Postman, we can actually see how
other things impact it. So let's go to
body, for example. Let's go to raw. And what we're going to do
is we're actually going to pass it a parameter. And parameters are passed
to APIs using JSON objects. In a JSON object
basically starts with a curly brace and you put in
first key and then a value. So the key will be named. Make sure you put
that in quotes. And the value will be your name. So we'll make it Henry. It's the same thing that
we have to do when we were testing our function locally. Okay, let's click Send on that. Now we can see that the
response has changed. It's taking our input or taking our parameter as an
input and outputting it. So it says Hello Henry, I can go back in here and change this to
something like light bulb. Now it says hello light bulb. So what you can do is one, you execute this function
that now exists. Azure can be accessed
from anywhere. You can pass it inputs, not just named, but other
inputs if you want. And do things with those inputs. For example, like pinging Open AI servers and then
outputting a response. So that is basically the cycle
that we're creating here. We've been able to create a very simple Azure function
that basically just takes in a parameter name and then
outputs that parameter back. Again. This is now public. Anybody can access this, any app can access, as anybody in the world can now use this function
for their apps, for their workflows,
for anything. This is the first step. Now the next set of
videos we're going to be doing the
exact same thing, but not with this basic function that doesn't do anything. But instead, with
a function that basically takes in a prompt, pings Open AI's API
with that prompt, and then returns the response. Okay, Perfect. Let's go ahead and do that.
16. Serverless API: OpenAI ChatGPT Integration with Azure Functions: Okay, Now that we know
how to actually deploy functions to the Cloud
using Azure functions. And we know how to
use Open AI's API. Let's put those two
things together. Okay, so I'm going to go into my Azure workspace here and I'm going to create a new function. And I'm going to
call that function. And again it's going to be
an HTTP trigger function. Let's call it a completion API. Okay? Will be an anonymous function. And what I will do is
it'll actually just open up another init dot py
and completion APIs. So if I go over here, I can see now that
I have two folders, one for the other
function that I worked on and one for completion API. Okay, let's go into that one. And again, we, you have this
standardized template here. Okay? Now what I'm going to do
is let's actually also open up the wrong thing. Let's go over here to
let's create a new window. And in that new window, we will open up the thing that we were working
on beforehand. Right. So let's work on English. Just call it scratch. No. Yeah, right here. Okay. This is the code that we
used to actually paying the Open AI's API
and we're going to be copying elements
of this code. Okay? So what I'm gonna do over
here is I'm going to first import in Open AI. Now, if you just do
this and run it, I'll actually give you an error. Because Open AI is not a library that this Azure function
environment has access to. That's where the
requirements.txt comes in. So if you go to
your file explorer, you should see a file called
requirements.txt over here, just put in Open AI. What that will enable is that
it will basically mean that your function now has
access to this library. Will also overhear put
in our secret key. So Secrets t. And again, this will
be different for you. I'm just going to go pull
up mine wherever it is. Let me just find that
perfect over here. An API reference. Again, I'm gonna go to
click this guy over here, go to View API keys. And there we go. I should basically this API key. I already have it previously, but if you don't
know how to get to it, That's how you get to it. Okay? So I'm going to copy
my secret key here. Perfect. Okay. Now that we have everything
initially set up, let's actually edit
our logic here. The logic doesn't really
do anything right now. It'd basically just
outputs the name back. So actually going to delete
a lot of this stuff here. And I'm going to keep
this part because we want to know if it
succeeded, right? So I'm going to keep
this part here. Let's also do status
code equals 200 here. Perfect. Let me just get rid of
this guy and awesome. Okay, So this is
our code so far. Let me commas there. Okay, Perfect. Let me just put a return here. Okay, awesome. So now this is where
our main logic will go. So the first thing that
we need to do is we need to just put this
in comments first. We need to give open API our secret key
to authenticate. We then need to get variables from the
HTTP request body. Will then need to call
the Open AI's API. We then need to
format the response. Then finally, we need to
provide the response. Okay? So first of all, give open
AIR secret key to intoxicate. This is very simple. All we need to do is we need
to type in Open AI to access that object and have the API key property equal to this secret key
variable here. So step one is done. We then need to
get the variables from the HTTP request body. And we already know
how to do that. If you go back in here, you can actually see that
this is how we do that. We basically do wreck
body equals get JSON. And then you can put in any
JSON variables you want. So I'm going to put that, so wreck body equals
req dot get JSON. So whatever JSON file is
inputted in the request, we will get that into rack body. And what we want then is to call variables when we actually
call the Open AI's API. So what we'll do over
here is we will say output equal to Open AI. And we'll use the Complete, the completion function.
So Doc Create. Now again, similar to
what we did before, we need to pass in all these different arguments
into this function. Okay? So what I'm going to do
over here is I'm going to have model be equal to the variable that is
provided to me in this request. Okay? So I'm going to make Model
equal to the input model. We're going to have prompt be equal to the same
thing, rack body. Prompt. We're going to have max tokens. Again be equal to
something that's provided to us, max tokens. Then finally, we're
going to have the temperature
provided to us as well. So temperature
equals temperature. Okay, perfect. Now the next thing we
need to do is we need to format the response. And again, we've done that
in a previous video as well because we note that the
response is in JSON form. So we're just going to copy
the exact code that we had before to format output
into a valid response. And then what we need
to do is we need to provide the response
or more so echo the response and basically
return it from this function. So all we're gonna do
is we will get rid of all of this stuff here. And we'll just type
in output text. Okay, there we go. Whoops, this should
be underscore body. Okay, perfect. Let's click Save on that. And then in the next
video we'll actually try running it and testing it. Will do it locally before we
actually deploy it online.
17. Serverless API: Open AI ChatGPT Local Testing: Okay, Now before
we test anything, we always should read our code back just to
make sure it's okay. For example, one
thing that I did find is when I was copying
and pasting this, I actually didn't copy and paste the wreck body for
the temperature. So I'm just going
to do that now. This is very common. You'll forget things
in your code all the time and it's just
a matter of fixing it. The other thing that we need to make sure we know is we need to provide a sample request to
actually test if this works. Because right now
this function will only run if we pass in the following variables
into our request body. So what I've done
over here is I've created a sample request. And again, this is in JSON form. So you have the model
equaling texts, Da Vinci, you have the
prompt equaling four. In this case, just give me a
slogan for a cookie company. You have max tokens equaling 200 and you've temperature
equaling zero. Now, we can make it
wherever we want. And the point is that whenever our application uses this API, we can pass in whatever
model we want, whatever prompt we want, and so on and so forth. So let's make sure we click
Save and then click F5. And I'm going to
copy this prompt. Oh, not the prompts,
sorry, the request body. Okay, I'm gonna go
into Azure here. I'm going to click function's
going to right-click on completion API and
click Execute function. Now it says enter
a request body. Let me enter that in. Click Enter to confirm. There we go, it's
executed the function. We can actually look at this and it says here that
the response is taste, the sweetness of our cookies. Awesome. Look at that. Now we're actually able to use this function however we want. We can pass in any prompt, any model, any Max
tokens, any temperature. And it will work. Currently. It will only work
locally, but that's fine. In the next video, we'll
actually push it up. So then what we've done
here is we've created our very own Open AI API. And you pass it a model prompt
and so on and so forth. And then by doing so, you can actually get
a response back. So this is the wrapper
API that we've created. After the wrapper API is done, we'll learn how to integrate this wrapper API into
Outlook Power Apps, power Automate a lot of
different applications, and that's where
you can actually start creating
those applications. Awesome
18. Serverless API: OpenAI ChatGPT Deployment to Azure Functions: All right, now let's
actually deploy our Azure function
completion API, which uses the Open AI API, which is again, very cool. Okay, so what we're gonna do is we're going to run the
application again. Perfect. We are then
going to go over here and we're going
to click Deploy. Deploy the function app. We're going to deploy to the
Open AI first function app there'll be created. And if we go, if we
now go back to Azure, we should see over here, if we go into the OpenAI
first function app, we should see two
functions here. Now. Not just one. We just have to wait
until it gets deployed, but we should see it soon. As basic Open AI. That's this one over here. Deployment latest not found. Huh? Interesting. Okay, let's just try that again. I'm going to open AI first. I'm on. Well, it's taking
longer than before, so that's a good sign here yet. No, not yet. Limit to
Open AI first completed. Okay, So it should be there. Let's go back in here and
let's actually refresh the entire Azure
page that's linked. There it is, completion API. So let's go to it. And we will again go here
and click Get function URL, copy it to the clipboard. Now, if we just
try to run it and normally I believe will fail. So if I just tried to run
it like this, for example, it will likely fail because it says this
page isn't working. And again, that's
because it actually can't find these requests. So we need to run it in Postman, which is why we were using
postman to begin with. Okay, so let's go back into Postman and we will
add in a new request. This will be called our
completion API request. We will enter the request URL, which is again this guy here. Okay? Now let's go to body
and we will put in that JSON string, right? So if I go back in here, click this guy, put it in here. And we can also format
it a little bit as well. So these are the
four arguments that our custom-built serverless
AI function takes. Okay, Now let's make a
request to this page, but not without anything
with this body. Okay, So let's click Send now. And there we go, we
get a response back, taste the sweetness
of our cookies. Now we can change this
to something else. Let's instead change
this to telling me in 25 words or less how
a computer works. Okay, Let's click Send on that. Computer processes data
using hardware and software to perform tasks and
provide information. Perfect. Okay, There we go. So now we have a full
fledged serverless Chad GPT API working
that we can customize. So we can not only
return the response, we can return tokens, we can, for example, also use it to return
not only this model, but other models, we
can use it to return. Right now this is using
the completion API. We can create another
API for pictures. We can create another API for instructions and so
on and so forth. But since we've created
this, and again, this is our own API, we can now put this in any
application that we want. So that's really the, sorry, That's really the end
of this section here. Being able to create
a serverless chat GPT API that's custom. The next part we'll
really be integrating this API now in applications, which is again, the next
step that we will be taking. Awesome. So congrats
for creating your very own serverless
chat GPT API. Again, you can now use this with postmen and really
give it any prompt you want and it will return a
response back to you. Awesome.
19. Outlook: Configuration of Office Add-in Environment: All right, Now the next very
common software that we will integrate Open
AI width is Outlook. Outlook is a simple
e-mail client. If you've worked anywhere
in the business space, you are familiar with Outlook. For this, you will
need an Outlook client and an account that has an
outlook subscription in it. So make sure you have that. You can ask your company or
you can also buy Office 365. I think it's like $8 a month. And you get access to
Outlook, Word, Excel, all the Office
Suite products for a pretty cheap price on a
subscription type basis. Alright, now, before
we get started, we have to set up
our environment. Basically what we
need to do is we need to install the tools that allow us to add in Outlook
extensions and add-ins. The first thing that we need
is we need a code editor. Now we're going to be using
Visual Studio Code, right? So the same thing that we use
to actually create the API, to create the Azure function
and so on and so forth. Okay? You also need something
called Node JS. So let me open up
that guy over here. So that can be found
at Node js.org. It's basically a JavaScript
runtime environment. It allows you to create
apps with JavaScript. Now, to be honest, I don't
know JavaScript that well, but that's fine
because you just need it to actually run that app. The whole backend can still be done by your Azure Function. Okay? Now when you're on this website
and make sure you click the LTS version and not
the current version. So make sure you do that. Let's click this guy over here. Will then open up the installer. Then go through the process of actually installing Node JS. I already have it installed, so I don't really need
to need to do that. Now. Something that you probably want to make sure that
you have is you want to make sure that your version of Node JS is properly installed. So I think there's a quick
command you can run for that. And it is, let's see. I think if you go over here, whoops, go over here
to your, this guy. Let's create a
completely new folder. So open folder documents, we will put this
in a new folder. This will be our Outlook add-in. Will click Select Folder. Okay, perfect. Now the next thing we
wanna do is we want to open up the terminal here. Now once that's unlocked, just type in node
dash, dash version. So you should be using version. For me, it's 18.13, 0.0, but it should basically match whatever says as LTS over here. Now if in the future this is 20, this is 20.1, that's fine. Just make sure you
use the LTS version. You should also have
something called NPM installed when
you install Node. So if you type in npm dash,
dash version, perfect. So the NPM version
doesn't matter as much. You'd have to make sure
that your Node version is Version 18.13, 0.0. Okay? That last thing we'll
need to install is something called Yo man, okay, now, I know it
sounds pretty weird. But young man is a very
cool packaging tool that allows you to
create new projects. So Microsoft actually
uses Yo man to configure your outlook configurations to make sure that when you're
making it look extension, everything that's there is neat, is actually built in. So it's more of a
project builder for you, as you'll see it as
very easy to use tools. So the first thing we wanna
do to actually install this is run this guy over here. But what we're
actually going to do, because we only need
the specific version of Yo man for our needs, is we're going to type
in npm install dash g, yo generator dash office. This is the Yo builder
for office specifically. Let's go ahead and let
that run and finish. All right. Perfect. Okay. There we go. Now we've had we have everything
installed that we need to install to start
making an Outlook add-in, especially one that can be
that can communicate with our chat GPT API that we've made that basically pings
Open AI's servers. Okay, perfect.
20. Outlook: Creating an Office Outlook Project: Okay, Now the next
thing we'll do is we will create our add n project. Okay, so we're going to use
Yo man to actually do that. So it's very simple.
Now, make sure you're in the directory that you
want to be in, in VS Code. And then in the terminal
typing yo space office. Now it's doing its thing. It's basically
configuring the project. Now, this is a bit hard to see, so you can actually move this up and see what it looks like. So it says over here, blah, blah, blah, blah,
blah, blah, office. I didn't see, I like to collect
on anonymized usage data. So now you can actually use your arrow keys with your
terminal to select something. We're going to select Continue. Now it says choose
a project type. So do you want to
create an Office add-in task pane project
using React Angular. Do you want to create
a custom function? Lots of different
things you can create. We're going to create Office
add in a task pane project. Okay, so let's click
Enter on that. Now it asks you what
language do you want to use. It's up to you if you
have a preference between JavaScript
and TypeScript, go ahead and choose one. I'm going to use Java Script. What do you want to name
your Office add-in? Let's name this test outlook. In which office
client application would you like to support? We're now just going
to support outlook, but this is where you
can take multiple ones. And now it's actually
creating it. Just doing its thing. Solving a lot. I might have
to put this in another video. Why don't I stop the
video for now and then I will continue when
this is complete. Never mind. It's all complete. Okay. That was perfect. There we go. Now, we'll basically
what we've done here is we've added in a folder
called test out. Look at him. And if
you go to that folder, you'll see it's already made
the entire project for you. And there's a few files that
we should really focus on. The first is the
manifest dot xml file. This just shows you some
configurations of your project. What do you want
your icon to be? When we actually click
the Outlook add-in, what you want the
icon color to be. What you want to say on the
display name of that icon. What ribbon do you
want it to be part of? Where's the location that
this will be hosted on, just random things like that. But there are pretty important. The main code is
actually its source. So if you go to source
and go to Task pane, this is really
where your app is, live, living in fired from. So first of all, you have
in the HTML of your app, which is basically think of
that as a thick of an app, as a very micro website. A website has HTML,
CSS, and JavaScript. Html is basically what you see when you open
up the application. So for example, over here, you can change the body
to see something else. Instead of saying achieving
more with Office integration, you can make that
say something else, and so on and so forth. Css is more for styling, right? So what do you want
the colors to be? What do you watch
your padding to be? What do you want
your display to be? This is very useful because this actually works with HTML. To produce the front
end that you see. The HTML is more of a skeleton
of different classes, and the CSE file defines what those different
classes look like. For example, we want
everything with the MS welcome main H2 header to be
width equals 100%, the text alignment to be center. Finally, you have the
underlying engine of the application, which is the JavaScript file. So basically this
actually runs code. When someone clicks on the application and
click the Run button. This is where we'll
actually put in code to access the third party
API that we've made. Provide a prompt, get
the response back, and then show that a response in a neat and tidy way
on the HTML file. Okay, so there we go. The last thing we should do
over here is make sure that we've now we're actually
not in our project folder, we're in the parent folder out. Look at him. He's
had to make sure that we're in test
out, look at it. Okay, So what we can
do over here to make things easy is go to
File Open Folder. I think go-to look at it and then go to the
folder that was just created from yo and
collect, select folder. And there we go. Now we're in and where we should be if you open up Terminal now, I'll actually be at
the right space. And you have all of your files
here on the left as well. Okay. Awesome.
21. Outlook: Outlook Add-in Launch: All right, Now that we've built our first Outlook
add-in project, and we've actually
gone ahead and gone through some of the
code behind it. Let's start it and see what
it looks like on Outlook. Now this is going
to be a task pane. So you will click a button and
then a paint will come out from the right side where we
can affect our application. Okay, so open up terminal and from over
here, type in npm. Start. Again, make sure you're
in the right folder. There should be the folder
that was created from Yo man. Okay, So let's click npm, start, started doing its thing. I'll start loading
things and you probably will see something like
this pop up as well. Now, you might have to install
a developer certificate, so you might get a security
warning like this. Just go ahead and click Yes. It because right now
we're not using HTTPS. Any kind of forces
you to use HTTPS. So you get lots of messages
like this haze to secure. Yes, it is because
I'm developing it and so on and so forth. Okay, perfect. So after this has ended, your outlook should just
pop up automatically. Now, you should see a show task pane and perform
an action over here. Okay, Now, in order
to activate these, you need to be in an e-mail. So for example, let me open
up this e-mail over here. Now I can see show task pane and perform an action over here. So I'm going to go ahead
and select Show task pane. It says to debug the web
view attach VS code to the web view instance using the Microsoft debugger
for Edge extension. This is if you want to, if you want to debug in
a professional manner, you can download this. But for our purposes, we're creating a
relatively simple Outlook at an application. So we won't need to do that. Okay? And there we go. This is our admin user
logo or a welcome message. Discover what you what Office Add-ins can
do for you today. Modified the source
file, then click Run, blah, blah, blah, blah, blah. Right now if we click
run, nothing will happen. Run basically executes the code that's found over
here in source. Task pane, js, the run function. Right now there's
nothing in here, so nothing actually runs. Okay? But this is the HTML front
end over here, right? So what we could do very
simply is go over here, go to HTML, and then
change this, right? So instead of
saying achieve more with Office integration, we can say something
like hello world. And then if we go
back over here, I think we actually
probably will need to restart the application. Yeah. Yeah, we don't need to do that. So how
to restart it? What we can do is we can go
back to code and type in npm. Start again. Click Okay. Now a new version of
Outlook will start. Now let's go over here
and select an email, show task pane.
Oh, you know what? I'm so dumb. I think I forgot to
just save the file. Yeah. Make sure you
actually save the file. So Control S is how you save it. Let's do that again. Show task pane, click. Okay, hello, world. Awesome. So this is how you build your Outlook Office,
add an application. You have all the
tools now you need to actually build whatever
application you want. What we will do in
this module is we will just make a
test connection. Basically, what we'll do is we will create an
application very quickly that will take the
contents of your e-mail, whatever has been selected. And after you click Run, it sends those content or maybe even a subject line
to our Azure Function API. And then it will return
a response from it. And it will show that response in the task pane over here. Okay, awesome. Let's go ahead and
start doing that.
22. Outlook: Running ChatGPT API in Outlook: Now that our Outlook add-in
is working properly, let's go ahead and see if we
can make an API call from our Outlook add-in to the
chat GPT API that we made. A reminder, just
our chat GPT API. The one that I've made, at
least this is the link for it. Make sure it's a post request, not a get request. And then this is the
body it needs model, prompt, max, tokens
and temperature. Let me just zoom
in here as well. Then if I click send, it, then returns me basically the response from Open
AI's da Vinci model. Okay, perfect. So let's go into our Visual Studio
Code and then go to Task pane dot JavaScript. Again, all of our code
that will be running, we'll be done here, and this will be
done in JavaScript. Now, I don't know about you, but I'm not that familiar
with JavaScript, but you actually don't need
to know much in order to just make a simple API call. Eventually what we'll
wanna do is we'll want to take an element from a message, for example,
something like this. And then click Run. It sends that message to our function and maybe summarizes it or
something like that, and then returns a summary
of it from Jiangxi PT. So for example, we can ask
chat GBT very easily to summarize the following
statement in 25 words or less. But again, the first
thing you need to do is make sure we can actually connect to chat
GPT from Outlook. And as you will soon see, it's a lot harder
than you think. Not because of JavaScript, but because of security. The security thing
is very intense, but I'm getting ahead of myself. Let's go ahead and
put in our code. Okay, So basically how to do how to actually run an API call from JavaScript is there's a function
called fetch. And fetch takes two things. It takes a URL and it
takes other parameters. For example, like the body, the headers, things like that. Okay? So that's it. This is what we need
to do. Now when you define these things. So why don't we
create a, a constant, a constant variable called URL, will make it equal to the URL of the function that we created. So I'm just gonna go to Postman and just copy this guy in here. I don't think I need
everything else here. If I just click Send. Perfect, Our works,
okay? Perfect. I also need these
other parameters defined as well, right? So let's create
another constant. So constant, other
parameter is equal to, and this will
itself be adjacent. So I wanted to
find a few things. I wanted to find the
body of the post. I want to define the
method of the host. So the method is going to be
a post rather than a get. And we've talked
about the differences in a previous lecture. The body is going
to be equivalent to this JSON body here, where we need to define
the prompt model, max tokens and the temperature. So on where to do is
I'm going to copy this. I'm going to put it in here in single quotes and
then click Paste. Now unfortunately, what
you need to do is to backspace in and get rid of the, Get rid of the new lines. Let's go ahead and do that. Okay, Perfect. And then put a comma at the
very end of that as well. Also, since this is
JavaScripting to put in a semicolon at the end
of every statement, just so that it doesn't mess up. Okay, Perfect. So now we have other program, sorry, this is other parameters. Let's change this to
other program, Okay? Now we have both of
those things defined. Perfect. Now, the next thing
that we need to do over here is we need to actually save the results
of this function somewhere. So let's create
another variable, constant response and make
it equal to fetch URL. The only thing is that fetch URL is an asynchronous function. You actually need to
put over here a weight. Okay? Perfect. Well then do as well as we'll create a new variable
called output. So var output, that
will make it equal to the response that we get
from this fetch function. So basically calls the API. It then returns the
response object, but this is not the
response itself. It's basically has everything
about the response. When it was responded
with a status code, is everything like that. All we want is the actual
text from the response, which is this guy here. So all we want is
the response dot txt Okay, perfect. And let's just make
sure we put it in as a function. Okay? The last thing we'll do is
we will log the output. So console dot log. I would quite alright, perfect. So let's click Save on that. And a lot of Outlook
window is open. Let me just clean up a bit here. As I was testing a few
of these things prior. Okay, let's go in here
and type in npm starts. And it will open up any
new outlook screen. That's this guy over here. So let's go into a
message I received from someone which is
too wordy for me. I'm too important. I don't want to read this so I can click Show task pane over here. And this is our function. Something you can do is you can right-click it and
click Inspect. And this will allow you to basically look at
the console.log. Okay? So those are few errors in
here, but that's fine for now. We don't need to worry about it. But what we can do over
here is click Run. And look at that. It outputs correctly. So what it's basically
doing in the code is, it is, let me just go back here. It is calling this API. Okay. Well sorry, it's,
yeah, it's called, it's calling this linked API. It then gives it this body
So defines the model, the prompt, the max tokens
and the temperature. It then makes a post request, and then it returns
that post request. And then it translates
that into a text for us. And then it outputs that text. There we go. It's that easy. And now
we've made a linkage, Rob from Outlook To Chat GPT. So again, if I go over here and click Inspect and go to console, every time I click Run, you can see that function running. So you'll see it over here
on the left-hand side. If I click run. Again, the two means that it's
happening again. So a computer processes data, blah, blah,
blah, blah, blah. I can go in here and
change the prompt, right? I can say instead, what is ice cream? And save it. And then go back to my Outlook, open up the inspector again, go to console and
then click Run. Ice cream is a frozen desert of blah, blah, blah, blah, blah. Perfect. So we've been able
to connect the two together. Now, if this doesn't work for you and if
you get an error, if you get a corps error
or something like that. Again, I shifts at this before. If you get a course error, then you need to set up your
security protocol correctly. And to the next video, we'll learn how to do that. But at this works for
you, then you're fine. You don't need to
worry about it. But if this does
not work for you, then follow the next
video we will go through how to actually resolve
the cores issue. Okay, Awesome.
23. Outlook: Fixing CORS and Security Issues in Outlook: Hello everyone. If you
were successfully able to connect your outlook to your Azure Functions,
then you are fine. You don't need to
go any further. However, if you get a course error or a allow origin error
or anything like that, then follow the steps in this video and it
will be resolved. You know, if you have,
you have a course error. If it says on the
very red over here, it'll say something like
allow origin error or CORS, cores error or security error
or something like that. And it's actually a good thing. It's basically not allowing your outlook to make a
connection with a random API. It's also not allowing
the random API to make a connection
back to Outlook. So it's actually a good
thing that this happens. But it's also very annoying too, because although
it's very secure, it kinda stops us
from connecting Outlook to various
different APIs. So we need to basically
allow that to happen. So there's a few different
things you can try. Okay? The first thing you
can try is let's open up our Azure function. So again, let's go into Azure. Click our Azure function name. And if you go into functions, these are all your different
Azure functions here. Perfect. Okay. What we wanna do here though, is if you go all the
way down to API and you see there's a button
called API Management and one called corps click horse. And then basically make
sure this is de-selected. And then delete every else, every other record
in here and put an asterisk that it's basically doing is that it
basically means that anyone from any single website, from any browser can
now access your API, which is obviously not secure. But for our development
purposes, it's fine. It also says that here, Cross-Origin Resource
Sharing allows JavaScript code running in a browser on an external host to interact with your back end. Okay, so just put
asterisk and then everything can basically
access this function. Then go all the way to
the top to Overview. Click Refresh, refresh
your function. And now if you go back
and run your code again, let's open up our outlook
again and click Run. It should now work. It says two over here. However, if it doesn't, then you need to take an
additional step because clearly your browser or your
outlook is very secure. How you would do that is
you actually need to create an API Management Service. Okay? So what you can do over here is, isn't an incorrect state, it might have been deleted,
blah, blah, blah, blah. That's fine. Let's click a link. So if you get something like
this, just click unlink. But what you can do over here is create a new API
Management Service. Let's, let's click Create new. Subscription doesn't matter. Resource group doesn't
matter, Blah, blah, blah. Workspace name. So we're going to call this
open because it's not secure. It's open completion API. Or let's just call
it an open API. And then just put in
some random numbers because it needs to be unique. So I'm going to put
in 562, for example, then put an administrator e-mail I'm going to put in my email. Okay. Perfect. Okay. And make sure you
check consumption. Consumption pricing is, I think the first million requests are free or something
crazy like that. So look at the pricing
of your concern, but definitely click consumption and not any of these other
plans because they are, they are way more expensive. Okay? Just choose any random
Application, Insight instance. Scale doesn't matter. Identity doesn't matter. Virtual network doesn't matter. Protocol settings. Nope, Doesn't matter. Tags, That's fine.
Validation failed. Required information is missing. Oh, no. What did I miss? Specified service that
was already in use. Okay. We can do open first
AI, five-six, five. Let's put the same
number of 562. Okay. Fine, fine, fine, fine, fine. Review and install. It
will be make this a lot more zoomed in so you
guys can see a bit more. The create deployment
is successful. Now this says over here that's
in a transitioning state. So it will take a little bit to kinda get this
up and running. So let's just give it
a few minutes here. Services being
activated, we have to wait for it to be
done and complete. Still being activated. We just have to wait
at this moment. Again, if this is
working for you, don't need to go
through this video. I think if I go back right now, might not be working
for me either because I just installed a
security system, but let's see, run. It still works. That's good. Services being activated. Hurry up and activate. Let's go back to our
Azure function and make sure It's being
connected properly. If we go to API management
over here, your app is linked. Okay, perfect. It has been linked. Amazing. So now what we can
do over here is select API for your app. We're going to, well, actually let's go to
API Management first. Let's go to API. And then
we'll select over here, define a new API. Mainly define an HTTP API. Okay? Now we need to give
it a few more things over here, but that's fine. This one can be called
completion API. The web service URL
doesn't matter here. Let's click Create. Okay, perfect. Now let's go into settings and make sure we've
selected HTTP S here. This is the more secure
setting subscription required. Let's de-select that guy here. We don't need to put
in any header name or query parameter name. That's fine. Let's click Save on that. Let's go to all APIs. Go to settings for all APIs and make sure we've
done the same thing. Perfect, there's not a requirement
there, so that's good. Okay, Let's go to now Inbound
processing over here. And we're going to add in a, make sure you've
selected all API. So either way, if
we go over here, Let's go now to our
Azure function. Go to API Management. And over here click
completion API that, so that's the one
we just created. Let's import the functions
and click link API. And we want to link both
APIs and let's click Import. Perfect. Now what you'll see if you
go into API management, click, well, let's actually go into the full API Management and go to APIs. You'll now see something
called completion API. And if you go to all operations, these are all the
operations you can make with this new
API you've created. You can post to complete it API, you can make a post
to basic Open AI. So basically you can make
a post or a GET request to all the Azure Functions after you've linked them together,
which is very cool. So now what we wanna do
over here is we want to add in a policy, okay? But make sure that we've
selected all APIs. And then go over
here to policies. And what we want to
add it over here is a policy for inbound. Okay? So let's add in. Over here, inbound. We basically wonder
inbound traffic to change. So make sure you have your
inbound open and close. And then inside it. Over here towards the right. Select, show snippets. Scroll down and select course. Perfect. Okay, Now a few things
we need to edit. Make sure by the way,
this is in the inbound. Inbound, okay? First of all, we want to change this to host. Okay? Let me see over here. Allow cross-domain calls. Okay? Yeah, we want to make
sure we set this to post. Everything else in
here. Looks fine. We don't need to
change any of that. Let's click Save on that. Now that is not an absolute URL. Let's see over here,
error and elements. Okay, Let me see exactly what CORS requests we
want because I think Microsoft might have
changed this or updated it, which is very annoying. Um, so just give me a
couple of seconds here. Okay, perfect. I'm just going to copy
and paste from a from a resource that I have because it looks
like this was not the correct core source. Anyways, let's paste that guy n. So this is what it
should look like, okay? So you have your core is allow
credentials equals true. You don't need to
have that in there. Um, allow origin. We want the origin
to be from anywhere. So we're going to replace
this particular link with asterisk. Allowed methods
pre-flight, that's fine. Um, allow headers, that's fine. Exposed headers, that's fine. Okay, Let's click Save on that. Perfect, and that's saved. And I'll make sure I put
that text in the link, in the description below
is just so you have it. Okay? Now what we wanna do is if we
go all the way to the left, if we click our completion API and click our
post-completion API, which is the one we want. Let's go to those APIs, policies and click
calculate effective policy. So this will tell us for
this particular API, this is the policy. It's going to allow everything
to access this API, which is what we want to do. Okay? But we are not yet done. Okay, Let's go to
API management. Go all the way down under
APIs to go to products. Okay? You have to click Add to
create a new product. This one will just be open API. Api description can be blah, blah, blah. It doesn't matter. Okay? And make sure we de-select,
require subscription. And then we're going
to add that API to it. Completion API. Okay, and let's click Create. Perfect. Okay, so now we've done
everything that we need to do. Basically what's happened
is we've created a, another API that, that accepts requests from
anywhere from all origin. And to find that APIs URL. If we go here to post, we actually test it. It's taken a lot longer. There we go. Okay, this is the name
of the API over here. Okay? So we've actually
tested in here, but this is the request
that we need to make. Now this is a different length than what we had before, right? This is now different. If I go to my old postmen, we just find it here. That was this length. This is to our Azure function. But what's happening
here is once you make a request to this API, which can be from anywhere, it then makes a request to
this API that we've created, which sorry, this function. And then that makes a request to open AI's API and
so on and so forth. So this is like API inception. We needed to provide an API
management service on top of our Azure function
to allow requests to come from anywhere if you are
getting that course error. Okay, Now to test if this
works, go over here. Let's create a new
Postman requests. So we will go over here,
click Add request, and we'll say completion
API from all origins. Make sure this is
a post request. Let's enter the
request URL over here. Let's go to body. And we're going to
take the body from completion API and
put it in here. Okay, Perfect. Now, this is how you know that
this is actually working. What it's doing again is
it's going to this API, which then goes to this API, which then goes to open APIs
api and makes the prompt, gets the response
and then sends it back using that method as well. So we're painting,
we're basically putting a security layer on
this Azure function, which is what this guy is here. Okay? The good thing again is that
this Azure function can be accessed by any origin. Now, if I go back to my Visual Studio Code
and replace this URL, which is the
function that we had before with this guy instead, which is now our API
Management Service. And click Save. Now, if I go back to my
outlook and go to Inspect, this should now 100% work. Okay, Now, obviously it was
working for me before too, so I didn't technically
need to do this. But if you are getting
a corps error, then that is how you That is basically
how you resolve it. Okay. Awesome. Hopefully
that was helpful. Hopefully that
resolved in EE cores or security errors
that you were getting. But if you haven't, please, please feel free to
message me directly. Linked tree or
anything like that. And I I can help you with that. Or the Q&A feature or
anything like that. Okay. Thank you so much
24. Outlook: Email Body Transfer to ChatGPT: Okay, Now that we
have our outlook working and connecting
to an Azure function, Let's go ahead and make
a useful application. Here's what the
application will do. The application will allow
users to go into their emails. Let's see if you
get several emails. One, for example, from
this one that I got. And you can double-click it. You can click Show task pane. And then once you click Run, and it will actually
summarize the email for you. What will actually
happen is that it'll send the contents of the email to open AI's
servers with a prompt of, please summarize, and then we'll return that
summary back to you. Show it over here. Okay. Easy, peasy, lemon squeezy. Alright. Now, again, I'm not
an expert in JavaScript, but you don't need to be an
expert in JavaScript to do this very simple
task in Outlook. Okay, so let's open up
our Visual Studio code. Make sure we are in our function run and do some things here. The first thing that we're
gonna do is the task of going to this website and returning a
response and all that. We're going to put that into
an asynchronous function. So it's easy to call. So we're going to create a
new asynchronous function called run Azure. Okay? And that is going
to take in a body. And we're going to
put it over here. Perfect. So a few function, so a few things that
this function does. It basically calls the URL, calls the other parameters. But we also need it
to do over here is the prompt shouldn't just
be what is ice cream? Write the prompt should be. Summarize the following. In how many words do we want? 50 words in 50 words? In 50 words or less? Okay? And then this is where
we put then the body, which is basically the
body of the email, okay? Now how you add it or concatenate strings together
is you use the plus sign. Okay? So we're going to make
these two separate strings. We're going to put
a plus in-between. And then in here is where
you would put in body. Okay. Perfect. However, we know that once this just takes
the body of the email, but we want to get rid of
things like quotes, spaces, new lines, new paragraphs, want to smash, smash
all of it together. Okay? In order to do that, we have a lot of different
things we can use, but this is something that
our LLC just googled. If I'm going to left-click
it and paste it over here. And again it can
be body dot this. This can be found in
the description below. But what this does
is, first of all, it replaces all quotes with
empty spaces or with nothing. And also does a trim, which means that gets rid of any leading spaces or
any trailing spaces. What it then does is it
replaces new paragraphs, new lines, and everything like that with an empty
space as well. So basically, I wish
everything together. And thus we want when we
provide the prompt to chat GPT. Okay. So far, so good. Great. Perfect. Okay. The next thing that we're
gonna do over here, yep. Constant response,
that's correct. Or put text. Yep. And then since this
is now a function, we're going to return at
the outlet somewhere. So overturn and make sure
you put the picture, you put this in curly braces, but we're going to
return the output. Okay, awesome. So that is our super amazing
function called run Azure. Great. We need to define
some more functions. We also define a
function that gets the body of the email, right? So I'll put this on top. Actually. We're going to create another
function called async. Function. Get body. Okay? Make sure you use the
curly braces here. Now here you have access to something called Office,
sincere and Outlook. And it gives you many
different methods. One that we're going
to use is called Office dot context, dot, mailbox, dot item dot body. This basically gives you, hope, sorry, item dot body. This basically gives
you the contents of the e-mail that the user
has currently selected. But it's an asynchronous method, so we need to put
in dot, get a sink. Okay. It's going to be a text. And we're going to
wrap it in a function. So we're going to put it
in function over here, which will take in the results. Then we need to introduce
the curly braces here Okay. Now, if that was confusing,
it's totally fine. You just honestly, I don't understand
JavaScript that well either. But if you know
JavaScript, that's great. If you don't. There's many resources
online, but this is again, the context of this course is to get you familiarity with how to connect chat GPT with
different applications. So I'm sorry that I can't
explain all of this for you. If you have any questions,
you can let me know. But that's not the scope
of this course anyways. But if you do want to learn
more JavaScript and there's plenty of free content
for you to learn that, and especially how
asynchronous functions work. Okay, Perfect. Now we're going to do
an if statement here. And what we're going to
say here is if the results of us getting this
body is successful. So if result dot status is like Office dot async result
status, dots succeeded. So if it'd basically succeeded, then we want to do something. What we wanna do
is we want to make the variable body equal
to result dot value. Now we don't have a
body variable defined, so it's at the very top of the left body equals
blank for now. Okay? So basically we get body
will do is it will actually get the body of the email and then assign it to a
variable called body. Okay? Perfect. The last thing that
we want to do is we want another
asynchronous function. I know there's lots of
asynchronous function say, to actually wrap
everything together. So that will, Let's put
on the very top as well. So this asynchronous
function will be called. Let's see, output results. Okay? And this function, we don't, this function will
take in the body as well. So what this will do
is it will first log the body just to make sure because I
want to see what the body looks like, right? It will then call the
run Azure Function. Await, run Azure with the body. So it will basically take
the body from get body, and it will then pass
it to run Azure. Okay, which will then
call the API, whatever, whatever, and then give
the output back to us. And we'll put it in
the response variable. And the last thing we wanna
do over here is you want to console dot log the
output of that. So response dot output. Okay, Perfect. Now, that's basically
everything we need to do here. The last thing we
need to do is we need a function tax the execute
all of these things. So at the very end, Let's just put it in here. Await. Get body, by the way, await is how you call
asynchronous functions. Okay? So here's what
will happen first. Get body will run, get body will get
the contents from the will actually get the contents from the e-mail
that's been selected. And it will put it
in a variable called body, which will then, and I missed the
step, which will then execute output results. Okay? Then we go over
here. Output result will then log that
body so we can see it. It will then transfer
that body to the function run Azure. Run Azure will take that body combined with the other
parameters that we have here, and then make a post request to that Azure function and then get the response and
put it in output. We will then put that output
and put it into response. And then we will log the open
of that response as well. And that is the
last thing for now. For now, we'll do some more
fancy things afterwards. But that's all it
will do for now. Okay, Perfect. Let's go ahead and save. And in the next video we'll actually run this
and see how it works.
25. Outlook: Response Pasting in Outlook Add-in: Alright, Are you excited?
Are you excited? I'm pretty excited.
Okay, So we've saved our code,
we've run our code. Let's go over here into our
e-mail that I've opened up. And instead of this
one, Let's choose one that where there's plenty of spaces and quotes and bad
things and stuff like that. Okay. Let's go to show task pane. Will then right-click
and click Inspect. We'll go to console and
we'll see if this works. So I my console over here, Let's see if I can zoom
in, into my console. I can zoom in a little
bit. There we go. Okay, let's click Run. So here's what happened,
which is very cool. First of all, it logs the body. This is the body of
the email, right? This is exactly like
this over here. It then took that one thing I
forgot to actually log out. Yeah, I'll just do this for
instructional purposes. I don't need to, but this is
good for you guys to know. I'll actually log out the, this guy over here. So let me make this
into another variable. You make, let me put this into another constant variables. So constant body json
equals this guy. And then I will make the body of the other parameters equal to that variable
I just created. And then let's actually log out. Console.log this
body JSON as well. Okay, Take two, Let's go
back in here. Click Run. Now the reason why I wanted to show you that is because check, check out what the
code is doing is it's taking this email is then transferring this
into a Azure body. Sorry, it's turning this into a body that the Azure
function can take. This is exactly
the same as this. Over here. This postman
request model prompt max. So because temperature,
but the prompt is now summarize the following
and 50 words or less. And then it gives the email, and again it ships
all the quotes out, strips all those spaces out, everything you
need to space out. Then sends that to
our Azure function, which then sends out to our API and then returns the response. So this is directly
from Chuck GBT. It's basically summarize
that entire email and 50 words or less, which is amazing. Amazing. Okay, Perfect. Now the final thing that we
need to do over here is we basically need to save this somewhere so users
can actually see it. Right? So let's go
ahead and do that. Perfect. So over here at the very end of
this output results, what we're gonna do is we're
not only going to log it, but we are going to
change the HTML as well. Now where do we want
to save the results? Let's save the result where you see discover
what you can. Maybe not there. How about
this HelloWorld as well? Maybe we'll replace
everything in here with that. So let's go over here
and find where that is. Discover what you can do. Yeah, Let's honestly, let's
replace the app body, which is this entire thing
over here with that summary. Okay, so let's change this. So we just need to make a note that this is called App body. The other thing is we
need to do is we'll change the name of
the button from R1 To summarize this email. Okay, perfect. So again, we want to
replace app body. So what we do in JavaScript is JavaScript can
interact with HTML. So what we'll do is
we'll do a document dot get element by ID. And again, the idea of
the element that we want to change is called
app dash body. You can see it over here. Dash body. Okay, perfect. We are now going to put
in the app dot body. We're going to change
the inner HTML. Okay, perfect. And now we're going to
do a few things here. The first thing that
we're going to do over here is we are going to basically put in
some bolded words. And the bolded words
will be something like, here's the summary,
summary colon. And then we're going to
put in a line break. And then finally, after that, we're actually going to
put in the response. So we're going to put in
response dot outputs. Okay, Awesome. Let's click, Save on that. Let's go over here to Outlook. And let's click Run
and see what happens. So this has changed
to summarize email. Let's click summarize
the e-mail. Summary Environment, Canada, blah, blah, blah, blah, blah. Isn't that so cool? Now you can do this
with any single e-mail. Right now. I don't
have lots of e-mails, so I kinda test width. These are all a bit big, but see if, see if I can
summarize this email here. Show task pane. Summarize. This was an error probably
because there's lots of images and stuff like that we haven't
handled for that. This is really good for
text-based e-mails, but we can do this one again. Show task pane, summarize
this email and look at that. It's summarizes email for you. Now, don't think
about just the app that we've created thing
about the possibilities. You can now create an app
that reads an e-mail, does something with it, then gives you the response
back in that very same added. So you can create, for example, the app so will create
in later sections of this course will be
called politely say no, which is a really
cool app extension where if someone sends you a requests or
anything like that, you can just click a button. It will read the
email LCD prompt, a job GPT that says, hey, find a way to politely
say no to this email. And then I'll give
you that reply back. It'll actually open up a
new reply threat as well. And it will populate
our response in looking at how powerful
something like that is. So what do you get requests
that you don't want to do? You can just click
politely say no. And it will do that all
for you using chat GPT. There we go. That is how you integrate
Chat GPT, width. Outlook, awesome. I'll make sure I post
all of this code for a premium members and the
description below. Thank you
26. Project: Configuring Outlook's Environment: Hello everyone. Let's create one of my favorite applications. Now, I personally in my business
work use outlook a lot. I send emails a lot. I also have a day job
a lot where I GET requests from managers and
partners and things like that. And what you can do
is you can use chat GPT to help you create
replies to those e-mails. So the app that we're
going to create is going to be called
politely say no. It helps people
politely say no to requests from managers
and partners. If you have too much work, if it's already like midnight
and you don't want to do anymore work or so
on and so forth. It's a very cool
application and it's an actually an outlook
extension that is of great use. Okay, so let's go ahead
and start creating it. Now, as we saw before, how to integrate Chat
GPT into Outlook, you need to basically have something like Visual
Studios up and running. You need to make sure you
have Node and NPM installed. So if I go to my terminal
and type in npm, for example, it should respond
with something positive. Perfect. And you also need to make
sure that you have available. So that is yo right there, y 0. Just make sure that
you have those things installed already. If you don't go back
and actually look at the documentation again and look at the other
modules that we've run, particularly where
we integrated chat should be t with Outlook. Okay, let's open up a fresh new terminal.
Close the old one. The first thing we need to
do is we need to create a yo office project. So I'm going to type in
the terminal yo office. And of course Alaskan me a
few questions to help me get set up. Alaskan me. Okay. What type of project
you want to create? Well, we want to
create an office, add in a task pane. Perfect. It doesn't ask us basically what language
do we want to use? Do we want to use
JavaScript or TypeScript? Let me just go over here. Why is it not working?
There we go, JavaScript. What do we want to
name our ad and let's name it politely. Say no. Then what
client applications we would like to support, what we want to support outlook. Okay? Now, depending on
where you've done that, you should be able to have a folder that's automatically created for you that's
called in this case, politely say no, you should
be able to open it up. And it's currently
getting populated with all the files you'll
need for your project. So let's give that a minute. It's taking a while
longer than usual. Okay. Perfect. Now the next thing we need to do over here is we need
to make sure that our terminal is within
the folder that was just created
in your terminal. Go over here and click C, D, and then go to
politely say no. And perfect. Now you're in
27. Project: Front-End Modifications: Hey, perfect. Now that we have our
projects set up, let's make a few changes to it. Let's, first of all
go into source, then go into the HTML
file under task pane. And let's edit a few things. So we're going to change
this to say politely say no, because, well, that's what our application
will be called. We'll keep the rest
of these things and just for reference. But let's click Save on that. And let's actually
go back in here and start our application. And you do that
typing in npm start. If, if you forgot
from the module, that will open up a
few certificate, asks, you don't have to click
Okay on it, for example. And then it should open
up a new outlooks app. And now you can go in here, go to show task pane. And you will see your
application over here. And now we can make a few
changes to this, right? So for example, if
we go back in here, wherever it says welcome, we should probably change
that to something else. So when here, for example, let's change that to
the name of our app. Politely say no. And if you click save control S, You should see this
change instantly. Let's do a few other
things as well. Let's go back in here. And we will let
me see over here, discover what Office
Add-ins can do for you. Let's change that to
something else as well. Generates professional replies. While saying No. Okay, Perfect. Let's go ahead and
click Save on that. Awesome. And now the last thing we
should do is we should get rid of all of these feature
bullet points here. I'll keep them in for now
because we might want to, or you might want
to take this app further and do a
few things here. But for now we'll
just change that. Finally, what we'll
do is we will say over here, this run command. We're going to change this
to say generate, reply. Perfect. Okay, now we've modified
the front end of the application to what
we want it to look like. Awesome. Now let's go to the JavaScript. The scary stuff, Awesome
28. Project: Applying a ChatGPT Function on the Back End: Now let's go ahead and program the back end of
this application. A few things we need
to take into account. So what we want basically outlook to do is when we open up Outlook and when we
open up this message, for example, well, when
we click Generate reply, it should do a few things. First, it should read
the, read the reply. That's fairly obvious, right? It should actually
read the reply. It should then make a request to our serverless API that we
made called completion API. Let me see if I can find
that guy right over here. And over here. It should actually
go ahead and make, sorry, not this one
here, this one here. It should go ahead
and the prompt should be something like read this email and find a good way to say no to this
e-mail professionally. It should then take
that response back to that message and then click reply and paste that
message in here. So all you need to do is
review and then click send. Now those are a lot of
steps, but don't worry, we will break it down as we go into Visual Studios
and type it up. Okay, Perfect. The first thing we
need to do is we need a function that gets the
body of an email, right. And that's going to be an asynchronous
function because in JavaScript for some reason
everything is asynchronous. So I'm going to put in your asynchronous
function get body. And we're going to put
it in a few things here. The first thing we're
gonna do is we're going to call the office dot context, dot mailbox, dot item, dot body. Got, get async method. What this does is it actually
gets you the body's text. And that's going to
be in text form. And we're going to parse
that in with a function. And we'll give it the
argument results. Perfect, Okay, The next thing we need to do is we
need to check if us basically doing this action actually results in a success. Because sometimes there's
errors that happen. So we need to do
over here is say, if results dot, sorry, result dot status
rather is equal to office dot async result
status dot succeeded. Well, then, great. Now we could actually
do something. Again. We need this if condition because if this is
not successful, it should stop right there because we don't want
to send garbage to the API because it costs us
money every time we do that. So the next thing we're gonna
do over here is we're going to set a variable called body. We're going to make it
equal to result dot value. Okay? And I'm just going to
do something like this. And then we are going
to basically, well, Let's actually just
put that in for now, but now we have access to the actual body
string over here. Okay? Perfect. The next function that
I want to create is the function that will
actually run the API. Okay? So what I'm going to do over
here is I'm going to create another asynchronous
function called Run API. Now, this function
does a few things. The first thing it does
is it basically uses the fetch JavaScript function with the URL and
input parameters. But before we even do that, we need to define what
those parameters are. So we have a
parameter called URL, which is the same thing as our postmen URL
requests over here. Again, that is where our
serverless API sets. We then also need to
define a body JSON file, which will be equivalent to
this request body over here. Okay? So equals. And then we'll, we need to do is I
will copy and paste this entire thing in here. And then actually need to do the annoying thing of back
spacing everything to make sure that this gets
all in one line. Okay, Perfect. So that's it so far. We'll just keep it as this for now and we will change
it to make sure that it actually accepts the
body parameter afterwards. Okay? Perfect. We also need to set up
some other parameters. So let's set up another
variable over here, which is going to be
equal to a json object, where the body is
defined as body json. And the method is a post request because all
of these are post requests. We are then finally going
to use the Fetch function. So we will fetch the
response from this URL given these parameters that we've
provided, it's awesome. And we need to make sure
that we also define this. We need to put a weight
over here because we know fetch itself as an
asynchronous function, we need to make sure you
put await over here. Okay, perfect. Now, response on only gives
us the actual HTTP response. We need to extract the
text from that response. So we're going to create
another variable called output. And we're going to
make that equal to await response dot
text response. Our text is also an
asynchronous function. So you also need to
put a weight in here. And then the final
thing that function does is that it
basically returns the output to whoever
called the function. Okay? Perfect. Now the, those are really the two key functions that we
want to be able to create. Right now, we need almost an architecture function
to put this all together. So what we're gonna do over
here is we're going to create another asynchronous function
because clearly we love asynchronous functions
and we'll see something like put it all together. Okay, perfect. Now, what we'll do over
here is a few things. The first thing
that we'll do is, well, we actually need to get
the body from this, right? So what we can do
over here is let me see over here. Perfect. Sorry, I'm just I'm just
a bit lost over here. Okay, perfect. So put it all together.
So what do we need to do? Well, first thing we need to
do is meet you get the body. So we're going to say let
body equals awaits, get body. And that will put it into
a variable called Body. We then need to pass that to this asynchronous
function over here. So in the asynchronous
function in one API, let's put an argument
called body. Right now we won't use it, but we'll just keep
it in here still. And we'll say over here,
the response equals. So we'll say let
response rather, because this is a new variable
equals await run API. And we need to pass
it in the body. So we get the body and then
we pass it to response. For now what we'll do is
let's actually logged out to make sure
that this works. Okay. So that was a lot and
we're definitely not done, but I think that's a
good stopping point. And we should just debug
this code and run it to make sure it's
actually working before proceeding any further. Just so we don't have
to go all the way back if we do make any mistakes. Okay? And this is just the
development process. There's going to be mistakes. But it's good to debug and test early to make
sure if it fails, you actually know about it. Awesome.
29. Project: Modifying Back-End to Process Email Body: Alright, now let's go ahead and test and verify that everything is working
like it should. So again, we have three
asynchronous functions over here. Right now if I click run it, nothing will actually happen. All that will happen is that these functions
will get defined. So what we need to
do is we need to actually call this function. We'll go over here and type
in await and then put in, put it all together. Okay? So the first thing
that it will do is it will call the get body function, which returns a body. Okay? There's clearly something I didn't do correctly over here. That is my bad. What we should do instead, since we're calling to try
to get a variable out, we can just go in here
and type in return body. Okay, let's actually
console.log the body as well. So we will get the
body of the email. We will then pass
that to the run API. So make sure you have body
over here on the Run API. I might not have
had that before. It accesses the API. It then gives a response
back and output. We put that into a
variable called response, and then make sure
we do this as well. We wanted to log
not the response, but the response doubt output, which is in fact the
response dot txt. Okay, let's go ahead
and click Save. Let's open up our email. Let's right-click
and go to Inspect. We can see everything
happening as it should. And then we'll click
Generate reply. And let's watch the fireworks
go off or it errors out, we will see, okay, there's a problem
here because clearly we have an undefined. So we need to go ahead
and resolve that. And the reason why we have
an undefined, I believe, is because we're
referencing a variable here that can't really run. The reason why can't run is
because you sometimes can't return from a
asynchronous function. So to test this, what we can do is we can console.log the body while it's within this function here. So let's go back in here. We'll go back and open up
our console and our email. And we will click
Generate reply. And now we can actually
see the reply. So what we need to do is we need to mess around or
function a little bit, but that's completely okay. Well, we need to do over here is this thing should actually
call the run Azure function. Okay? So what we're gonna do over
here is we're going to, instead of returning or will
slow console dot log it. But we will actually
make this itself, executes our put it
all together function, which will then go
ahead and execute one API function. Okay? So it's a bit confusing, but sometimes you need to do this. I personally hate JavaScript, but unfortunately you
have to use JavaScript if you're creating
outlook extensions. Okay, so let's go
ahead and do that. So instead of all of
this kind of stuff here, what we'll do is we
will make this trigger, put it all together, put it all to get there. Okay, perfect. And we will pass to it, the body, put it altogether, will then receive the body. This no longer makes
sense over here. We will still logged
the body though, and we'll remove
the log from here. After that, we will create another variable
called response, which will basically triggered this function which again
returns the response. We will slowly, we will still basically output that response. So the only thing
that's changed here is the function that gets
executed first is get body. So get body first gets executed. It gets the body of the email. It then calls this function
called put it all together. Put it all together, takes that, basically logs it out, then sends that variable
to dysfunction, which basically sends
that prompt to the API, which then returns a response. We get the response
back and we log it out. Okay, let's go ahead
and save that. And now try that as well. So we'll go down here and
click Generate reply. Perfect, but you got
exactly what we wanted. Now, you might be
asking yourself, why did I do it this way?
Well, I'll be honest. I prepare a lot
for these lessons, but I actually did
it that first way as well and found this
error and then fixed it. But the reason why
I did that, again, purposefully for you guys, is to make sure that
you understand that these errors do happen. And you need to be flexible
in your code because that helps you find errors and
debug and stuff like that. And the process of finding
errors and debugging is almost as valuable as the
process of creating that code. So that's why I did that. And trust me, there will be
more errors as we go through. But don't worry, we will always, always resolve them together. Okay. Awesome.
30. Project: Reply Box Inclusion: All right everyone, we're so close at finishing
this application. Now, what we need
to do is we need to basically go to
this e-mail over here. And once I click
generate a reply, it actually clicks
reply for me and then enters in that text
the response in here. And then all I need to
do is just visually look at it, confirm
everything's okay. And then click Send. Okay, so let's go
ahead and do that. Now, in JavaScript,
there's a lot of libraries for
office type things. For example, Office
dot contexts. I'll mailbox that item refers to the item that is
currently in here. Then dot body, dot get async
gets the text of the body. So what we wanna do over here is let's create over
here a constant, a variable called item
that equals this item. Okay? What we'll do then is after
everything is said and done, after we get the body, we then get the response and we logged the
response will be done. Wanna do is we want to
take that item and we want to display a reply form. Okay, so this will display that reply thing that
we talked about. This is basically
your reply form. And then we want to
populate it with the log output from
the, from the API. We want to put the
response in there. So we'll do item dot
display ready form. And then we put in the
response dot outputs. And really, that's it. That's all we need to do. Let's click Save on that. Let's go over here. And I'm not even going to
open up the log files. I'm just going to go over here
and click Generate reply. And look at that. Look how amazing that is. It just generated this
for me, Dear Henry. Thank you for considering
me for this task. Unfortunately, blah, blah,
blah, blah, blah, blah, blah. It created our response for me. Not only that, but
it also generated a reply box and
put it in for me. So all I need to do
is look at this. I'm happy with it
and then click Send. It. Is that easy? That's it. That's the application
over here. Now in a few videos, we might talk about
how to actually extend this application to
do more cool things. But there we go. That is the application
called politely say no. Basically you can
open up any email, click Generate reply, and it will give you a good reply that
references the task as well and gives it to you in a professional and very
appropriate manner. Awesome
31. Project: Application Extension with ChatGPT Mood Options: Hello everyone. Now let's
take this one step further. Let's say if the user wants to, instead of creating
the standard replied that you usually see
with this, right? So again, if I go over here
and click Generate reply, it'll give me a very
standardized reply, but it won't give me things like the reason why I can't do it. Or maybe offering alternatives
or something like that. You might want to
modify the reply you generate based on
things about you. For example, I would
probably want to reply to this request by saying I can't
get it done by tomorrow, but I can probably get it done by Wednesday or
Friday or whenever. So you don't want
to just say no. You want to say no? So let's put that into our context here. Okay, Let's try to do that. The first thing we need to
do is we need to put in a text box for a user to
put in that instruction. Okay, so I'm in my
HTML over here. And just above this division
that says div role button. I'm going to put in this
line of code over here. Input type equals text, id equals other notes, name equals other notes. This will, if I, after I click Save, generate a textbox for me that
I can type in other notes. What I'll do over here at the very top here,
I'll even say, you know, put in, put
in additional notes. And I'll get rid of
this run thing as well. So I'll click Save on that. And over here we see put
in additional notes. Perfect. Now the next thing
I need to do is I need to take that and include whatever the user has
written here into a wrong. Okay, so let's go
ahead and do that. I'll go to my JavaScript. And what I'll do here, just to make sure that
this works properly, is when someone executes
this function body, because the body of
the e-mail, whatever, whatever before it runs the API, let's actually make
sure that we can access the value that the
user has written in here. Now how we do that is called document dot get element by ID. So we're getting a particular
element on the HTML page. In this case, it's going to be called what do we
call it over here? Other notes. So that's
the get element by ID, the ID equals to other nodes. We named it other notes. So we're going to
go in here and put, well, you guessed
it, their notes. Then we want the value
property of that. Okay? Now what we wanna do
over here, first of all, it's just log it out
just to see if it works. Just for our purposes over here. So let's go ahead and
click Save on that will then go back into our male, will then say, gotcha
and click Apply. And we should see in the
actual log of this console, we should see gotcha, right here to perfect. So what is logging correctly? So let's go back. And what we wanna do here is let's create a,
another variable. In here, we'll create
another variable called let. The other Haram equal. Sorry, this is the other
nodes, other notes? Yep, Perfect. Equal
this value over here. Perfect. And what we're gonna
do is we're going to put in the other notes in here, so we'll say reply to
the following email, any provide polite and
professional manner and reply to the following email and politely and
professionally say no. With this in mind. And then we'll basically put
in our things over here. And I'll put in the
variable that we just created called other notes. Okay, perfect. So replied to the
following email and politely and professionally
say no with this in mind than the other notes
can be something like 0, offer an alternative or say
you'll do it by Friday. And then we'll actually
give the email after that. Okay. Now just to specify
to make it prompts, let's put it in a period
over here and then say the email is and then it
will provide the email. Okay, perfect. Let's click Save on that. Let's go over here
to the actual email. And let's test this. Will open up the inspect. Well then click over
here, generate reply. And let's look at, first of all, let's look at this
guy over here. I'm reply to the following
inequality professional. So you know, with this in
mind, Nothing's right now. The e-mail is blah,
blah, blah, blah, blah. So we get the same thing
that we got before. Okay, so perfect.
That still works. But now let's put in
something else that's say this in mind. I can do it by Friday evening. If that's okay. Okay. Let's go ahead and click
Generate reply now. And now we can see that the JSON has also changed as well. We can see over here
that the Json says, I can do this. I could do it by Friday
evening If that's okay. And now the response has
also changed as well. So if I look at my e-mail, it now it says, Thank
you for reaching out. Unfortunately, I'm not able to complete the pitch presentation. I can do it Friday
evening If that's okay. Perfect. I can also give other
instructions as well. Right. I can say something like I can put my friend
under the bus, right? I can say something like Bob. Bob probably has capacity. Capacity. Suggest him something like that. Let's see if that works. So let's click Generate
reply you for your requests. Unfortunately, I'm not able to. I'd like to do here is
I suggest you reach out to Bob as you may
have the capacity. Look at that chart. Gpt does it in such a
professional and nice way. I suggest you reach out to Bob as he may have the capacity
to complete the task. That is awesome. Okay, Now the final
way you can try it, but sometimes chat GPT
kind of blocks it is. Let's go back to the actual
message and I've sold me, it looks Open now this wild. Let's go back to the
message over here. And instead of
writing this, say, say it in a very polite way. Let's see if that works. Already. Api. That is awesome. Did you guys see that?
Replied, Let me let me put a big bigger No, I can not create the
pitch presentation for Henderson files mine I AM
tomorrow. It is already APM. That's cool. Right. Because now you can
have different moods as well. No, I cannot. I'm sorry. Instead, if you're saying this is someone
you really like, you can say the very
apologetic and nice. Say that I will owe him one. Hello. Hi, I'm sorry. So there's the word sorry. Now, I'm afraid of all, let's create the
breech presentation. I know this is a tight deadline. I apologize for not
being able to help. I will owe you one for
this. Isn't that so cool? It just recognizes
what you need to do. And again, using chat GPT, I can go ahead and click Send. And I don't need to worry
about what do I write, how do I write it, right? It's amazing for that concept. Okay, perfect.
32. Begin Working with Your Project: Okay, So now that you've gone
through the entire course, it's project making time. At this point, I want everyone
here to create a quick, intelligent application
using chat GPT, and another application
of your choice. Now you can obviously
use Outlook because that's what
we use in the course. You don't need to make something that's response to e-mails. You can even make
something, for example, that summarizes emails or
that translates the email to French or Spanish or whatever you want to
use it with chat GBT. But there are a few
other ideas I've posted on here that I've
talked about before, chatted BT and Excel, chart GBG and irritable, and so on and so forth. One quick note as well. After you do this, please post a screenshot and a quick
summary of the app. You create it in the
project gallery below. So we all can see the amazing
work that you've done. Awesome