Summary
To build a Serverless ChatGPT API using Azure Functions, start by setting up an Azure account and obtaining an API key from OpenAI. Install the necessary tools, including Azure Functions Core Tools, and create a new project with an HTTP-triggered function. Install dependencies, such as an HTTP client library, and then customize the function code in ChatFunction.cs to call the OpenAI GPT API. Test the function locally using func start and tools like curl or Postman. Once satisfied, deploy the function to Azure using func azure functionapp publish
This notebook will explain details of building Serverless app with ChatGPT.
OpenAI API Account Sign-Up¶
Open https://openai.com/ and go to API and sign in. We are in API:
what is cool is we can have access to playground
Azure Account Creation¶
We need to create an Azure account because it allows you to execute codes without having a server on cloud. OpenAI app requires a server to be run. Open a Free Azure Account
then go subscription as below Link:
We now should create an azure function by going to this link. Type "function" in search bar
Now we should go and create an app:
Fill out the forms as below:
We should receive the message "Your deployment is complete":
Next we need to have Visual Studio Code to enable to deploy function. Create a folder as Scratch:
Next install Azure function extension
Next we need to sign in to Azure account that we had created:
We can see the function app we created:
Create Serverless ChatGPT API¶
In fact the API we created enable us to open API or any other responses we want.
First install openai
pip install openai
Building a Serveless ChatGPT API¶
Request OpenAI using Python¶
This is the first step for serverless ChatGPT API. Below is Python script to access OpenAI API:
secret_key = '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'
prompt = 'tell me a joke'
import openai
openai.api_key = secret_key
output = openai.Completion.create ( # creat a completed response based on a prompt
model='text-davinci-003',
prompt=prompt,
temperature=1,
max_tokens=100,
top_p=1,
frequency_penalty=0,
presence_penalty=0
)
print(output)
{ "warning": "This model version is deprecated. Migrate before January 4, 2024 to avoid disruption of service. Learn more https://platform.openai.com/docs/deprecations", "id": "cmpl-8HGYu15uVHk2cGM116cCc2SXimsfr", "object": "text_completion", "created": 1699125932, "model": "text-davinci-003", "choices": [ { "text": "\n\nQ: How do trees get online?\n\nA: They just log on!", "index": 0, "logprobs": null, "finish_reason": "stop" } ], "usage": { "prompt_tokens": 4, "completion_tokens": 19, "total_tokens": 23 } }
print(output["choices"][0]["text"])
Q: How do trees get online? A: They just log on!
Next step is to make this script as a serverless API. We should put this in Azure function
Create Basic Azure Function¶
Create New Project¶
First we should make sure Azure extension is active. Then, go to WORKSPACE and press on "create a new project", following up the instruction by selecting Python language and version etc.
Then select template as "HTTP trigger":
Select name for app as "openaiBasic", and Athorization level as "ANONYMOUS" to make things easy. However, for final version we should make it as "Admin". Then, it will start creating our virtual environment and function. Finally the app "openai_basic" is created in function_app.py
:
Create a Function app:
When we run the code for first time, it gives error for running Activate.ps1
since it is block on this computer.
To solve this problem, we need to change the execution policy on our system. We can google it to find solution:
We need to run this command set-ExecutionPolicy unrestricted
. We need to open up VS Code as adminstrator:
Execute Function¶
Run function_app.py
again. It makes our Azure function works locally. To test this, we can go to Azure, workspace, to the function we created and press "Execute Function Now"
Now the function is run locally:
Deploy Function¶
This means that our Azure function is hosted locally. We do not want to do this locally since if computer breaks down, we will have problem. Since it is hosted on Azure environment, we can access it from every single application and from anywhere in the word. Next we should Deploy the function:
Test on portal.Azure.com¶
Go to www.portal.Azure.com, click on Function App, we can see name of apps created by VS code:
Get Function Url¶
Our function is hosted on the link provided on "Get Function Url", anybody who accesses this link will be able to access our function:
To pass a name in the query string, we should go to postman.com which is a platform to test an API. First step is to sign in.
Create a new request for the KPI and call it test and finally we insert the URL and send it:
Go to Body/raw and make a jason. This is something if we want to test the function locally:
Now the function is accessible by anyone or any app in the world can use this function for their Apps and workflow.
OpenAI ChatGPT and Azure Functions Integration¶
Go to Azure workspace and create a new HTTP Trigger
function called APIcompletion
:
Add openai
to requirement.txt
Change the function APIcompletion
as below. This is where our main logic should go.
We can fill out the function as below:
Run this function and then execute the function APIcompletion HTTP
. For Enter request body, we should put JSON string {"model":"text-davinci-003","prompt":"tell me how to avoid smoking","temperature":1,
"max_tokens":50,"top_p":1,"frequency_penalty":0,"presence_penalty":0}
It is very important to have exact python packages in requirement.txt
. Otherwise, the deployed function will give 500 Internal Server Error while deploying function run without any problem.
Deploying OpenAI ChatGPT to Azure Functions¶
Deploy function APIcompletion
Next Get Function Url. Running this Url locally gives error because it does not have access to request body. So, we can use postman to run the API. In Body, raw, we should put JSON string {"model":"text-davinci-003","prompt":"tell me how to avoid smoking","temperature":1,
"max_tokens":50,"top_p":1,"frequency_penalty":0,"presence_penalty":0}
We have created an serverless API; we can add it to any application that we want. Next step is to integrate this API in application.
Power Automate & ChatGPT¶
Create Power Automate Flow¶
After creating our serverless ChatGPT API, now we can actually plug it in difference software. One software that can be freely used is Microsoft Power Automate. We can automate our manual repetitive tasks. For example, receiving email every day, export it to excel file and forward it someone else. We can automate this process.
For this notebook, we are going to automate the ChatGPT API we created with Power Automate. Power Automate is the engine of the APP.
First step is to create a flow. Go to Create> Manual trigger
HTTP Request to Integrate OpenAI ChatGPT¶
Type http
in connector:
Fill out HTTP as below:
Initialize a variable:
Save the file and test it:
The current account is not capable of running an app.
Create Team Chatbot with CahtGPT¶
Log in https://teams.microsoft.com/ with the same account as Power Automate. Open a channel ExampleChatbot
Go to Power Automate Flow and create a Team "When a new channel message is added":
Power Apps & ChatGPT¶
Power apps is a platform to enable real life business application very quickly because it says no code/no code system. For example, this power apps can be used to create the whole system expense app system. There are a lot more benefit. First step is to make Blank app>canvas app named ExampleChatGPT:
Now we can add elements to such as Text Label, Text Input and Button to our Power Apps:
Playing this App does not do anything, so hover on Power Automate and create a new flow:
Choose an operation and put http:
Make sure you save the app and then open it again:
Next we need to return it back to power apps, go to next step, powerapps and select Responds to a PowerApp or flow PowerApps:
Next, we should add an output which is a text:
We call it response
and the value of the response
is HTTP request which is body:
We want the bottom we created do something: click on bottom, go on the left and select OnSelect
My account does not support "Respond to a PowerApp or flow" so I cannot run and get the result.
ChatGPT for Outlook¶
Install dependencies¶
Outlook is a simple email client. we need to have this app and install Node.js which is a javascript run time environment and it allows you to create apps with javascript. We do not need to know javascript very well because we only need it to run that app.
Open the terminal in VScode and type node --version
and npm --version
:
Next thing to install is Yeoman. Microsoft uses Yeoman to configure your outlook configuration to make sue we make an extension.
Type npm install -g yo generator-office
. This is yo builder for office specifically. Now we create our app with Yeoman which is very simple. Type yo office
in VScode terminal. Next select continue and choose Office Add-in Task Pane project
Next choose the language you want to you as 'JavaScript'. Next, What do you want to name your add-in as Outlooktest and choose outlook:
It will add project name on explorer IN VScode. Goring through manifest.xml
define what the icon should look like.
However, the main code is in source (srd
) and taskpane
this is where the app leave in and fires from. A website has , html
thais website design; skeleton of classes), css
defines what different classes in html
looks like. It is for styling such as padding, header, footer, display..) and js
is underline engine of application which is a JavaScript file. This run codes when someone clicks on the application button
Last thing is go to the folder created from Yeo:
Now if we open up the terminal, we will be in correct space (Outlooktest is created by Yeo):
Launch Quick Add-In¶
Write npm start
in terminal, we should make sure we are in right folder. Receive a security warning, say yes and allow Node.js to make changes:
This open Outlook with adding "Show Taskpane":
Here is our app when we click on Show Taskpane. Clicking on Run does not make any action because we have not added any thing:
Click on action does not do anything since we have add any function to it:
We can change the app by changing "taskpane.html":
Saving this on VScode changes the app:
Run ChatGPT API for Outlook¶
We can use fetch
function in JavaScript to run ChatGPT url as below
Write npm start
in VScode command line. This will open an Outlook. Next, right click on Outlooktext and press inspect
:
As can be seen, there is no access to chatGPT; it is blocked because of CORS policy. It shows that your Outlook does not allow to connect with random API. Therefore, we should resolve CORS and security Errors.
Go to Azure Function App> CORS, put asterisk in Allowed Origions:
Then go to Overview and refresh the function.
If still does not work, it means the Outlook is very secure. In this case, we should go to API Management, fill out the forms and create:
Go to API Management and the created function and then choose APIs, then create a HTTP API:
Deselect Subscription required
and save. Go to All APIs.
Go to API Management and choose Completion API and click on Link api:
Transfer Email body to ChatGPT¶
In this sections, email body is transfered to ChatGPT, get summarized and get back to Outlook.
Step 1¶
javascript function to get body of email
%%javascript
let body = '' //body of email
//async function to get body of email
async function GetBody(body) {
Office.context.mailbox.item.body.getAsync("text", function(result){ //give context of email
if (result.status === Office.AsyncResultStatus.Succeeded) { //if the result of getting body is successful
body = result.value // make a variable as body
ResultOutput(body) // output body of email
}
})
}
Step 2¶
javascript function to wrap up everything together
%%javascript
//function to wrap up everything together
async function ResultOutput(body){
console.log(body)
let response = await Azurerun(body) //get the body and pass it to Azure function
console.log(response.output)
document.getElementById('app-body').innerHTML = "<b> Summary: </b> <br/> " + response.output
}
Step 3¶
javascript function to read url, body of email and make prompt for ChatGPT:
%%javascript
//async function makes the function callable
//this function calls url, parameters
async function Azurerun(body) {
const Url = 'https://chatgptmehdiopenai.azurewebsites.net/api/APIcompletion?'
const jasonbody = JSON.stringify({
model: "text-davinci-003",
prompt: "summarize the following textin 30 words or less: " + body.replace(/['"]+/g,'').trim().replace(/(\r\n|\n|\r)/gm,""),
temperature: 1,
max_tokens: 100,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0
})
console.log(jasonbody)
const Parameters = {
body: jasonbody,
method: 'POST'
};
const response = await fetch(Url, Parameters);
var output = await response.text();
// Return an object with the 'output' property
return { output: output };
}
Step 4¶
javascript function to execute everything
%%javascript
await GetBody();
Here is an example:
Create a workplace to test how Airtable works and make us some synthetic customers. We want to use ChatGPT to send customer a customized email as below:
Go to Automation and create an automation when record is updated:
Choose a record as an example and then add an "Action":
OpenAI Image Generation¶
Go to Azure workspace and create another function:
Make another HTTP trigger named ImageAI:
Instead of openai.Completion
, we should mention openai.Image
. See other changes below:
Here is url=https://mehdiopenaiimage.azurewebsites.net/api/ImageAPI?
after deploying the function. JSON function to run is {"prompt":"Elephant in the room","n":1, "size":"1024x1024","top_p":1}
Bubble and ChatGPT¶
Create Bubble¶
First make a free account in Bubble and create an app:
Bubble connect to ChatGPT¶
Add API Connector to the app because we want to have API connector via bubble to Azure function:
Next, create Text, Input and Buttom and go to Plugins:
Initialize Call leads to response:
Go to design, Workflow the engine of web-developer and JavaScript:
Double click on Click to Answer the directed to Workflow. Then "click here to add an action", and "Plugins", go to APIcompletion we made.
Go to "Element Action", then "Set State"
Make the output as input value:
If we go to preview: whatever with type on input will appear in output:
Modify Prompt to be Dynamic¶
It is annoying whenever we click on Step 1, JSON file will pop up:
Replace prompt with input value:
The result of Output should be input + running th API:
Itinerary App with ChatGPT¶
Create an app with the name plantravel5968, go to Plugins and add API Connector.
Design an app as below:
Go ahead and create a new page:
Go to Plugins and add another API:
Double click on the button and start a workflow:
Add columns to prompt:
Next, we need to save this somewhere:
Next step is to move generated text from index page to output:
Go to itinerary page, click on "Text Get data from page URL":
Last thing to do is to add a workflow to come back to previous page:
Here is page 1 of the app (show case is Rasht in Iran:
Here is result:
Add Image to Itinerary¶
Now we want to add some image to the website (place you want to go). Go to pluging, add another Call:
Finally go to Workflow and add another step to call in new API:
Change the order of steps and add another key for image:
Here is final app adding two images. The url is https://plantravel5968.bubbleapps.io/version-test/?debug_mode=true:
- Home
-
- Prediction of Movie Genre by Fine-tunning GPT
- Fine-tunning BERT for Fake News Detection
- Covid Tweet Classification by Fine-tunning BART
- Semantic Search Using BERT
- Abstractive Semantic Search by OpenAI Embedding
- Fine-tunning GPT for Style Completion
- Extractive Question-Answering by BERT
- Fine-tunning T5 Model for Abstract Title Prediction
- Image Captioning by Fine-tunning ViT
- Build Serverless ChatGPT API
- Statistical Analysis in Python
- Clustering Algorithms
- Customer Segmentation
- Time Series Forecasting
- PySpark Fundamentals for Big Data
- Predict Customer Churn
- Classification with Imbalanced Classes
- Feature Importance
- Feature Selection
- Text Similarity Measurement
- Dimensionality Reduction
- Prediction of Methane Leakage
- Imputation by LU Simulation
- Histogram Uncertainty
- Delustering to Improve Preferential Sampling
- Uncertainty in Spatial Correlation
-
- Machine Learning Overview
- Python and Pandas
- Main Steps of Machine Learning
- Classification
- Model Training
- Support Vector Machines
- Decision Trees
- Ensemble Learning & Random Forests
- Artificial Neural Network
- Deep Neural Network (DNN)
- Unsupervised Learning
- Multicollinearity
- Introduction to Git
- Introduction to R
- SQL Basic to Advanced Level
- Develop Python Package
- Introduction to BERT LLM
- Exploratory Data Analysis
- Object Oriented Programming in Python
- Natural Language Processing
- Convolutional Neural Network
- Publications