├── .vscode
    ├── extensions.json
    ├── launch.json
    ├── settings.json
    └── tasks.json
├── .funcignore
├── package.json
├── host.json
├── README.md
├── index.js
├── src
    └── functions
    │   └── gptfunction.js
├── .gitignore
└── index.html


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "ms-azuretools.vscode-azurefunctions"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/.funcignore:
--------------------------------------------------------------------------------
 1 | *.js.map
 2 | *.ts
 3 | .git*
 4 | .vscode
 5 | __azurite_db*__.json
 6 | __blobstorage__
 7 | __queuestorage__
 8 | local.settings.json
 9 | test
10 | tsconfig.json


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"version": "0.2.0",
 3 | 	"configurations": [
 4 | 		{
 5 | 			"name": "Attach to Node Functions",
 6 | 			"type": "node",
 7 | 			"request": "attach",
 8 | 			"port": 9229,
 9 | 			"preLaunchTask": "func: host start"
10 | 		}
11 | 	]
12 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "azure-chatgptapi",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "start": "func start",
 7 |     "test": "echo \"No tests yet...\""
 8 |   },
 9 |   "dependencies": {
10 |     "@azure/functions": "^4.0.0-alpha.7",
11 |     "openai": "^3.2.1"
12 |   },
13 |   "main": "src/functions/*.js"
14 | }
15 | 


--------------------------------------------------------------------------------
/host.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "2.0",
 3 |   "logging": {
 4 |     "applicationInsights": {
 5 |       "samplingSettings": {
 6 |         "isEnabled": true,
 7 |         "excludedTypes": "Request"
 8 |       }
 9 |     }
10 |   },
11 |   "extensionBundle": {
12 |     "id": "Microsoft.Azure.Functions.ExtensionBundle",
13 |     "version": "[3.15.0, 4.0.0)"
14 |   }
15 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"azureFunctions.deploySubpath": ".",
3 | 	"azureFunctions.postDeployTask": "npm install (functions)",
4 | 	"azureFunctions.projectLanguage": "JavaScript",
5 | 	"azureFunctions.projectRuntime": "~4",
6 | 	"debug.internalConsoleOptions": "neverOpen",
7 | 	"azureFunctions.projectLanguageModel": 4,
8 | 	"azureFunctions.preDeployTask": "npm prune (functions)"
9 | }


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"version": "2.0.0",
 3 | 	"tasks": [
 4 | 		{
 5 | 			"type": "func",
 6 | 			"label": "func: host start",
 7 | 			"command": "host start",
 8 | 			"problemMatcher": "$func-node-watch",
 9 | 			"isBackground": true,
10 | 			"dependsOn": "npm install (functions)"
11 | 		},
12 | 		{
13 | 			"type": "shell",
14 | 			"label": "npm install (functions)",
15 | 			"command": "npm install"
16 | 		},
17 | 		{
18 | 			"type": "shell",
19 | 			"label": "npm prune (functions)",
20 | 			"command": "npm prune --production",
21 | 			"problemMatcher": []
22 | 		}
23 | 	]
24 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # chatgpt-api-azure-function
 2 | 
 3 | This project will create an Anzure Function that accesses the OpenAI API layer to perform a chat using GT4 and GT3.5 Turbo interfaces. Additional details can be found at the following Microsoft Link:
 4 | https://aka.ms/AdrianTwarog
 5 | 
 6 | Installation requirements 
 7 | 1. Create Azure Account
 8 | 2. Create OpenAI Account
 9 | 3. Update the API key and Organisation key for OpenAI
10 | 4. Create Azure Function
11 | 5. Deploy the function to Azure
12 | 6. Update index.html file with the Azure Function URL
13 | 
14 | For more information, check the official crash course video below:
15 | https://youtu.be/z06GqxsW1zw
16 | 
17 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import { Configuration, OpenAIApi } from "openai";
 2 | const configuration = new Configuration({
 3 | 	organization: "org-",
 4 | 	apiKey: "sk-",
 5 | });
 6 | const openai = new OpenAIApi(configuration);
 7 | 
 8 | const app = express();
 9 | const port = 3000;
10 | 
11 | app.use(bodyParser.json());
12 | app.use(cors());
13 | 
14 | app.post("/", async (req, res) => {
15 | 
16 | 	const { messages } = req.body;
17 | 
18 | 	console.log(messages)
19 | 	const completion = await openai.createChatCompletion({
20 | 		model: "gpt-3.5-turbo",
21 | 		messages: [
22 | 			{"role": "system", "content": "You are DesignGPT helpful assistant graphics design chatbot"},
23 | 			...messages
24 | 		]
25 | 	})
26 | 
27 | 	res.json({
28 | 		completion: completion.data.choices[0].message
29 | 	})
30 | 
31 | });
32 | 
33 | app.listen(port, () => {
34 | 	console.log(`Example app listening at http://localhost:${port}`);
35 | });


--------------------------------------------------------------------------------
/src/functions/gptfunction.js:
--------------------------------------------------------------------------------
 1 | const { app } = require('@azure/functions');
 2 | const { Configuration, OpenAIApi } =require("openai");
 3 | const configuration = new Configuration({
 4 | 	organization: "org-",
 5 | 	apiKey: "sk-",
 6 | });
 7 | const openai = new OpenAIApi(configuration);
 8 | 
 9 | app.http('gptfunction', {
10 |     methods: ['GET', 'POST'],
11 |     authLevel: 'anonymous',
12 |     handler: async (request, context) => {
13 |         
14 |         const { messages } = await request.json();
15 | 
16 |         context.log(messages)
17 |         const completion = await openai.createChatCompletion({
18 |             model: "gpt-3.5-turbo",
19 |             messages: [
20 |                 {"role": "system", "content": "You are DesignGPT helpful assistant graphics design chatbot"},
21 |                 ...messages
22 |             ]
23 |         })
24 |     
25 |         return { jsonBody: {
26 |             completion: completion.data.choices[0].message
27 |         }};
28 |     }
29 | });
30 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | lerna-debug.log*
 8 | 
 9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 | 
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 | 
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 | 
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | 
24 | # nyc test coverage
25 | .nyc_output
26 | 
27 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
28 | .grunt
29 | 
30 | # Bower dependency directory (https://bower.io/)
31 | bower_components
32 | 
33 | # node-waf configuration
34 | .lock-wscript
35 | 
36 | # Compiled binary addons (https://nodejs.org/api/addons.html)
37 | build/Release
38 | 
39 | # Dependency directories
40 | node_modules/
41 | jspm_packages/
42 | 
43 | # TypeScript v1 declaration files
44 | typings/
45 | 
46 | # Optional npm cache directory
47 | .npm
48 | 
49 | # Optional eslint cache
50 | .eslintcache
51 | 
52 | # Optional REPL history
53 | .node_repl_history
54 | 
55 | # Output of 'npm pack'
56 | *.tgz
57 | 
58 | # Yarn Integrity file
59 | .yarn-integrity
60 | 
61 | # dotenv environment variables file
62 | .env
63 | .env.test
64 | 
65 | # parcel-bundler cache (https://parceljs.org/)
66 | .cache
67 | 
68 | # next.js build output
69 | .next
70 | 
71 | # nuxt.js build output
72 | .nuxt
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless/
79 | 
80 | # FuseBox cache
81 | .fusebox/
82 | 
83 | # DynamoDB Local files
84 | .dynamodb/
85 | 
86 | # TypeScript output
87 | dist
88 | out
89 | 
90 | # Azure Functions artifacts
91 | bin
92 | obj
93 | appsettings.json
94 | local.settings.json
95 | 
96 | # Azurite artifacts
97 | __blobstorage__
98 | __queuestorage__
99 | __azurite_db*__.json


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>GPT4 Chat API Model</title>
 8 |     <link rel="stylesheet" href="./style.css">
 9 |     <link rel="icon" href="./favicon.ico" type="image/x-icon">
10 |   </head>
11 |   <body>
12 |     <main>
13 |         <h1>ChatGPT4 API</h1>  
14 | 		<form action="">
15 | 			<input type="text" name="message" id="message">
16 | 			<button type="submit">Send</button>
17 | 		</form>
18 | 		<div id="chat-log">
19 | 
20 | 		</div>
21 |     </main>
22 | 	<script>
23 | 		let messages = []
24 | 		const chatLog = document.getElementById('chat-log');
25 | 		const message = document.getElementById('message');
26 | 		const form = document.querySelector('form');
27 | 		form.addEventListener('submit', (e) => {
28 | 			e.preventDefault();
29 | 			const messageText = message.value;
30 | 			const newMessage = {"role": "user", "content": `${messageText}`}
31 | 			messages.push(newMessage)
32 | 			message.value = '';
33 | 			const messageElement = document.createElement('div');
34 | 			messageElement.classList.add('message');
35 | 			messageElement.classList.add('message--sent');
36 | 			messageElement.innerHTML = `
37 | 				<div class="message__text">${messageText}</div>
38 | 			`;
39 | 			chatLog.appendChild(messageElement);
40 | 			chatLog.scrollTop = chatLog.scrollHeight;
41 | 			fetch('https://adrianazuregpt.azurewebsites.net/api/gptfunction?', {
42 | 				method: 'POST',
43 | 				headers: {
44 | 					'Content-Type': 'application/json'
45 | 				},
46 | 				body: JSON.stringify({
47 | 					messages
48 | 				})
49 | 			})
50 | 			.then(res => res.json())
51 | 			.then(data => {
52 | 				let newAssistantMessage = {"role": "assistant", "content": `${data.completion.content}`}
53 | 				messages.push(newAssistantMessage)
54 | 				const messageElement = document.createElement('div');
55 | 				messageElement.classList.add('message');
56 | 				messageElement.classList.add('message--received');
57 | 				messageElement.innerHTML = `
58 | 					<div class="message__text">${data.completion.content}</div>
59 | 				`;
60 | 				chatLog.appendChild(messageElement);
61 | 				chatLog.scrollTop = chatLog.scrollHeight;
62 | 			})
63 | 		})
64 | 	</script>
65 |   </body>
66 | </html>


--------------------------------------------------------------------------------