Skip to content

Commit 11a0574

Browse files
glharperglharper
authored
add simple completions page example (Azure#26118)
### Packages impacted by this PR @Azure/openai ### Issues associated with this PR ### Describe the problem that is addressed by this PR Adds full browser page example using openai SDK ### What are the possible designs available to address the problem? If there are more than one possible design, why was the one in this PR chosen? Webpack is the first library listed for packaging JS SDKs. ### Are there test cases added in this PR? _(If not, why?)_ Merely a sample page, no functionality added ### Provide a list of related PRs _(if any)_ ### Command used to generate this PR:**_(Applicable only to SDK release request PRs)_ ### Checklists - [ ] Added impacted package name to the issue description - [ ] Does this PR needs any fixes in the SDK Generator?** _(If so, create an Issue in the [Autorest/typescript](https://github.com/Azure/autorest.typescript) repository and link it here)_ - [ ] Added a changelog (if necessary)
1 parent 3f7b73d commit 11a0574

File tree

6 files changed

+187
-0
lines changed

6 files changed

+187
-0
lines changed

‎sdk/openai/openai/samples/cookbook/simpleCompletionsPage/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
This is a simple browser page demonstrating the completions API using the Azure OpenAI JS SDK.
2+
3+
To run:
4+
1.
5+
```
6+
npm install
7+
```
8+
9+
2.
10+
```
11+
webpack --mode=development
12+
```
13+
14+
3.
15+
Open completions.html in your web browser

‎sdk/openai/openai/samples/cookbook/simpleCompletionsPage/completions.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Azure OpenAI Completions example</title>
5+
<meta charset="utf-8" />
6+
</head>
7+
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px;">
8+
9+
<div id="content">
10+
<table width="100%">
11+
<tr>
12+
<td></td>
13+
<td><h1 style="font-weight:500;">Azure OpenAI Completions example</h1></td>
14+
</tr>
15+
<tr>
16+
<td align="right">Deployment ID</a>:</td>
17+
<td><input id="deploymentId" type="text" size="40" value="DEPLOYMENT_ID"></td>
18+
</tr>
19+
<tr>
20+
<td align="right">Azure Key</a>:</td>
21+
<td><input id="azureKey" type="text" size="40" value="KEY"></td>
22+
</tr>
23+
<tr>
24+
<td align="right">Endpoint</td>
25+
<td><input id="endpoint" type="text" size="80" value="https://<your_azure_openai_resource>.openai.azure.com/"></td>
26+
</tr>
27+
<tr>
28+
<td></td>
29+
<td><button id="getChoices">Get Choices</button></td>
30+
</tr>
31+
<tr>
32+
<td align="right" valign="top">Input Prompt</td>
33+
<td><textarea id="promptInput" rows="4" cols="50"></textarea> </td>
34+
</tr>
35+
<tr>
36+
<td align="right" valign="top">Result</td>
37+
<td><textarea id="resultDiv" style="display: inline-block;width:500px;height:100px"></textarea></td>
38+
</tr>
39+
</table>
40+
</div>
41+
42+
<!-- OpenAI SDK reference sdk. -->
43+
<script src="./dist/main.js"></script>
44+
45+
</body>
46+
</html>

‎sdk/openai/openai/samples/cookbook/simpleCompletionsPage/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Webpack App</title>
6+
</head>
7+
<body>
8+
<h1>Hello world!</h1>
9+
<h2>Tip: Check your console</h2>
10+
</body>
11+
12+
</html>

‎sdk/openai/openai/samples/cookbook/simpleCompletionsPage/package.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "azure-openai-browser-completions",
3+
"version": "1.0.0",
4+
"description": "SPA to demonstrate browser completions using Azure OpenAI",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack --mode=production --node-env=production",
8+
"build:dev": "webpack --mode=development",
9+
"build:prod": "webpack --mode=production --node-env=production",
10+
"watch": "webpack --watch"
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "ISC",
15+
"dependencies": {
16+
"@azure/openai": "^1.0.0-beta.2"
17+
},
18+
"devDependencies": {
19+
"@webpack-cli/generators": "^3.0.4",
20+
"babel-loader": "^9.1.2",
21+
"html-webpack-plugin": "^5.5.1",
22+
"webpack": "^5.86.0",
23+
"webpack-cli": "^5.1.4"
24+
},
25+
"browser":{
26+
"child_process": false
27+
}
28+
}

‎sdk/openai/openai/samples/cookbook/simpleCompletionsPage/src/index.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const { OpenAIClient, AzureKeyCredential } = require("@azure/openai");
2+
3+
function getOpenAIChoices(resultDiv) {
4+
const deploymentId = document.getElementById("deploymentId");
5+
const azureKey = document.getElementById("azureKey");
6+
const endpoint = document.getElementById("endpoint");
7+
const promptInput = document.getElementById("promptInput");
8+
9+
resultDiv.innerHTML = "";
10+
const credential = new AzureKeyCredential(azureKey.value);
11+
const client = new OpenAIClient(endpoint.value, credential);
12+
13+
async function showResponseChoices() {
14+
try {
15+
const { choices } = await client.getCompletions(deploymentId.value, [promptInput.value]);
16+
resultDiv.innerHTML = choices[0].text;
17+
} catch (e) {
18+
console.log(e);
19+
}
20+
}
21+
22+
showResponseChoices();
23+
}
24+
25+
window.addEventListener("DOMContentLoaded", function () {
26+
const getChoices = document.getElementById("getChoices");
27+
28+
getChoices.addEventListener("click", function () {
29+
getOpenAIChoices(window.resultDiv);
30+
});
31+
});

‎sdk/openai/openai/samples/cookbook/simpleCompletionsPage/webpack.config.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// Generated using webpack-cli https://github.com/webpack/webpack-cli
2+
3+
const path = require('path');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
6+
const isProduction = process.env.NODE_ENV == 'production';
7+
8+
9+
const config = {
10+
entry: './src/index.js',
11+
output: {
12+
path: path.resolve(__dirname, 'dist'),
13+
},
14+
plugins: [
15+
new HtmlWebpackPlugin({
16+
template: 'index.html',
17+
}),
18+
19+
// Add your plugins here
20+
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
21+
],
22+
module: {
23+
rules: [
24+
{
25+
test: /\.(js|jsx)$/i,
26+
loader: 'babel-loader',
27+
},
28+
{
29+
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
30+
type: 'asset',
31+
},
32+
33+
// Add your rules for custom modules here
34+
// Learn more about loaders from https://webpack.js.org/loaders/
35+
],
36+
},
37+
resolve: {
38+
extensions: [".ts", ".js"],
39+
fallback: {
40+
"child_process": false,
41+
// and also other packages that are not found
42+
}
43+
},
44+
};
45+
46+
module.exports = () => {
47+
if (isProduction) {
48+
config.mode = 'production';
49+
50+
51+
} else {
52+
config.mode = 'development';
53+
}
54+
return config;
55+
};

0 commit comments

Comments
 (0)