Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Interlace JS templates with Learn docs snippet #312

Open
brandom-msft wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Interlace JS templates with Learn docs snippet #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d16035c
create environmentVars template
brandom-msft Jun 11, 2024
e0a394a
move Main.js to common template
brandom-msft Jun 11, 2024
881e50c
interlace learn docs content
brandom-msft Jun 11, 2024
85eb780
tidy whitespace and if/endif matches
brandom-msft Jun 11, 2024
025f108
add reader's note
brandom-msft Jun 11, 2024
5b2758c
rename template comment macro
brandom-msft Jun 11, 2024
dbac46f
minor update
brandom-msft Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions src/ai/.x/templates/includes/openai.js/Main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{{if {_IS_LEARN_DOC_TEMPLATE}}}
const { AzureOpenAI } = require("openai");
{{else}}
const { OpenAI } = require("openai");
const { {ClassName} } = require("./OpenAIChatCompletionsClass");
const { readline } = require("./ReadLineWrapper");
{{endif}}

{{if {_IS_LEARN_DOC_TEMPLATE}}}
// Load the .env file if it exists
const dotenv = require("dotenv");
dotenv.config();

// You will need to set these environment variables or edit the following values
const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
const apiVersion = "2024-05-01-preview";
const deployment = "gpt-4o"; //This must match your deployment name.
require("dotenv/config");
{{endif}}

async function main() {
{{@include openai.js/create.openai.js}}
{{if {_IS_LEARN_DOC_TEMPLATE}}}
for (const choice of result.choices) {
console.log(choice.message);
}
}
{{else}}
// Loop until the user types 'exit'
while (true) {

// Get user input
const input = await readline.question('User: ');
if (input === 'exit' || input === '') break;

// Get the response
const response = await chat.getResponse(input);
process.stdout.write(`\nAssistant: ${response}\n\n`);
}

console.log('Bye!');
process.exit();
}
{{endif}}

main().catch((err) => {
console.error("The sample encountered an error:", err);
process.exit(1);
});

module.exports = { main };
249 changes: 44 additions & 205 deletions src/ai/.x/templates/includes/openai.js/create.openai.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,222 +14,47 @@
{{if {_USE_OPENAI_CLOUD_AZURE} && {_USE_OPENAI_CLOUD_OPENAI}}}
{{set _USE_OPENAI_CLOUD_EITHER=true}}
{{endif}}
{{if {_USE_OPENAI_CLOUD_OPENAI} || {_USE_AZURE_OPENAI_WITH_KEY}}}
{{if !{_IS_LEARN_DOC_TEMPLATE}}}
// What's the system prompt?
const AZURE_OPENAI_SYSTEM_PROMPT = process.env.AZURE_OPENAI_SYSTEM_PROMPT ?? "You are a helpful AI assistant.";

{{if {_USE_OPENAI_CLOUD_OPENAI} || {_USE_AZURE_OPENAI_WITH_KEY}}}
// NOTE: Never deploy your API Key in client-side environments like browsers or mobile apps
// SEE: https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety

{{endif}}
{{endif}}
// Get the required environment variables
{{@include openai.js/environment.vars.js}}
{{if {_USE_OPENAI_CLOUD_AZURE}}}
{{if {_USE_AZURE_OPENAI_WITH_KEY}}}
const AZURE_OPENAI_API_KEY = {__process_env_or_import_meta_env}.AZURE_OPENAI_API_KEY ?? "<insert your Azure OpenAI API key here>";
{{else if {_IS_BROWSER_TEMPLATE}}}
const AZURE_CLIENT_ID = {__process_env_or_import_meta_env}.AZURE_CLIENT_ID ?? null;
const AZURE_TENANT_ID = {__process_env_or_import_meta_env}.AZURE_TENANT_ID ?? null;
{{if {_IS_LEARN_DOC_TEMPLATE}}}
{{if {_TEMPLATE_AUTHOR_COMMENT} }}
// There's likely opportunity to further reduce here and force more overlap across
// all of our samples. For the time being, keeping this unique/separate for the initial
// pitch to showcase the integration with Learn docs.
{{endif}}
const AZURE_OPENAI_API_VERSION = {__process_env_or_import_meta_env}.AZURE_OPENAI_API_VERSION ?? "<insert your Azure OpenAI API version here>";
{{if !{_IS_OPENAI_ASST_TEMPLATE}}}
const AZURE_OPENAI_CHAT_DEPLOYMENT = {__process_env_or_import_meta_env}.AZURE_OPENAI_CHAT_DEPLOYMENT ?? "<insert your Azure OpenAI chat deployment name here>";
{{endif}}
const AZURE_OPENAI_ENDPOINT = {__process_env_or_import_meta_env}.AZURE_OPENAI_ENDPOINT ?? "<insert your Azure OpenAI endpoint here>";
{{if {_IS_OPENAI_ASST_TEMPLATE}}}
const AZURE_OPENAI_BASE_URL = `${AZURE_OPENAI_ENDPOINT.replace(/\/+$/, '')}/openai`;
const client = new AzureOpenAI({ endpoint, apiKey, apiVersion, deployment });
const result = await client.chat.completions.create({
messages: [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: "Does Azure OpenAI support customer managed keys?" },
{ role: "assistant", content: "Yes, customer managed keys are supported by Azure OpenAI?" },
{ role: "user", content: "Do other Azure AI services support this too?" },
],
model: "",
});
{{else}}
const AZURE_OPENAI_BASE_URL = `${AZURE_OPENAI_ENDPOINT.replace(/\/+$/, '')}/openai/deployments/${AZURE_OPENAI_CHAT_DEPLOYMENT}`;
{{endif}}
{{if {_USE_OPENAI_CLOUD_OPENAI}}}

{{endif}}
{{endif}}
{{if {_USE_OPENAI_CLOUD_OPENAI}}}
const OPENAI_API_KEY = {__process_env_or_import_meta_env}.OPENAI_API_KEY ?? "<insert your OpenAI API key here>";
{{if !{_IS_OPENAI_ASST_TEMPLATE}}}
const OPENAI_MODEL_NAME = {__process_env_or_import_meta_env}.OPENAI_MODEL_NAME ?? "<insert your OpenAI model name here>";
{{endif}}
const OPENAI_ORG_ID = {__process_env_or_import_meta_env}.OPENAI_ORG_ID ?? null;
{{endif}}

// Check if the required environment variables are set
{{if {_USE_OPENAI_CLOUD_AZURE}}}
const azureOk =
{{if {_USE_AZURE_OPENAI_WITH_KEY}}}
AZURE_OPENAI_API_KEY != null && !AZURE_OPENAI_API_KEY.startsWith('<insert') &&
{{else if {_IS_BROWSER_TEMPLATE}}}
AZURE_CLIENT_ID != null && !AZURE_CLIENT_ID.startsWith('<insert') &&
AZURE_TENANT_ID != null && !AZURE_TENANT_ID.startsWith('<insert') &&
{{endif}}
AZURE_OPENAI_API_VERSION != null && !AZURE_OPENAI_API_VERSION.startsWith('<insert') &&
{{if !{_IS_OPENAI_ASST_TEMPLATE}}}
AZURE_OPENAI_CHAT_DEPLOYMENT != null && !AZURE_OPENAI_CHAT_DEPLOYMENT.startsWith('<insert') &&
{{endif}}
AZURE_OPENAI_ENDPOINT != null && !AZURE_OPENAI_ENDPOINT.startsWith('<insert');
{{if {_USE_OPENAI_CLOUD_OPENAI}}}

{{endif}}
{{endif}}
{{if {_USE_OPENAI_CLOUD_OPENAI}}}
const openaiOk =
{{if !{_IS_OPENAI_ASST_TEMPLATE}}}
OPENAI_MODEL_NAME != null && !OPENAI_MODEL_NAME.startsWith('<insert') &&
{{endif}}
OPENAI_API_KEY != null && !OPENAI_API_KEY.startsWith('<insert');
{{endif}}

{{if {_USE_OPENAI_CLOUD_EITHER}}}
const ok = (azureOk || openaiOk) &&
{{else if {_USE_OPENAI_CLOUD_AZURE}}}
const ok = azureOk &&
{{else}}
const ok = openaiOk &&
{{endif}}
{{if {_IS_OPENAI_ASST_TEMPLATE}}}
ASSISTANT_ID != null && !ASSISTANT_ID.startsWith('<insert');
{{else}}
AZURE_OPENAI_SYSTEM_PROMPT != null && !AZURE_OPENAI_SYSTEM_PROMPT.startsWith('<insert');
{{endif}}

if (!ok) {
{{if {_USE_OPENAI_CLOUD_AZURE}}}
{{if {_IS_BROWSER_TEMPLATE}}}
chatPanelAppendMessage('computer', markdownToHtml(
{{else}}
console.error(
{{endif}}
'To use Azure OpenAI, set the following environment variables:\n' +
{{if {_IS_OPENAI_ASST_TEMPLATE}}}
'\n ASSISTANT_ID' +
{{else}}
'\n AZURE_OPENAI_SYSTEM_PROMPT' +
{{endif}}
{{if {_USE_AZURE_OPENAI_WITH_KEY}}}
'\n AZURE_OPENAI_API_KEY' +
{{else}}
{{if {_IS_BROWSER_TEMPLATE}}}
'\n AZURE_CLIENT_ID' +
'\n AZURE_TENANT_ID' +
{{endif}}
{{endif}}
'\n AZURE_OPENAI_API_VERSION' +
{{if !{_IS_OPENAI_ASST_TEMPLATE}}}
'\n AZURE_OPENAI_CHAT_DEPLOYMENT' +
{{endif}}
'\n AZURE_OPENAI_ENDPOINT'
{{if {_IS_BROWSER_TEMPLATE}}}
));
{{else}}
);
{{endif}}
{{if {_IS_BROWSER_TEMPLATE}}}
chatPanelAppendMessage('computer', markdownToHtml(
'\nYou can easily do that using the Azure AI CLI by doing one of the following:\n' +
'\n ai init' +
'\n ai dev new .env' +
'\n npm run webpack' +
'\n' +
'\n or' +
'\n' +
'\n ai init' +
'\n ai dev shell' +
'\n npm run webpack' +
'\n' +
'\n or' +
'\n' +
'\n ai init' +
'\n ai dev shell --run "npm run webpack"'
));
{{else}}
console.error(
'\nYou can easily do that using the Azure AI CLI by doing one of the following:\n' +
'\n ai init' +
'\n ai dev shell' +
'\n node main.js' +
'\n' +
'\n or' +
'\n' +
'\n ai init' +
'\n ai dev shell --run "node main.js"'
);
{{endif}}
{{if {_USE_OPENAI_CLOUD_OPENAI}}}

{{endif}}
{{endif}}
{{if {_USE_OPENAI_CLOUD_OPENAI}}}
{{if {_IS_BROWSER_TEMPLATE}}}
chatPanelAppendMessage('computer', markdownToHtml(
{{else}}
console.error(
{{endif}}
'To use OpenAI, set the following environment variables:\n' +
'\n OPENAI_API_KEY' +
'\n OPENAI_ORG_ID (optional)' +
{{if {_IS_OPENAI_ASST_TEMPLATE}}}
'\n ASSISTANT_ID'
{{else}}
'\n OPENAI_MODEL_NAME' +
'\n AZURE_OPENAI_SYSTEM_PROMPT'
{{endif}}
{{if {_IS_BROWSER_TEMPLATE}}}
));
{{else}}
);
{{endif}}
{{if {_IS_BROWSER_TEMPLATE}}}
chatPanelAppendMessage('computer', markdownToHtml(
{{else}}
console.error(
{{endif}}
'\nYou can easily obtain some of these values by visiting these links:\n' +
'\n https://platform.openai.com/api-keys' +
'\n https://platform.openai.com/settings/organization/general' +
'\n https://platform.openai.com/playground/assistants' +
'\n' +
{{if {_IS_BROWSER_TEMPLATE}}}
'\n Then, do one of the following:\n' +
'\n ai dev new .env' +
'\n npm run webpack' +
'\n' +
'\n or' +
'\n' +
'\n ai dev shell' +
'\n npm run webpack' +
'\n' +
'\n or' +
'\n' +
'\n ai dev shell --run "npm run webpack"'
));
{{else}}
'\n Then, do one of the following:\n' +
'\n ai dev shell' +
'\n node main.js' +
'\n' +
'\n or' +
'\n' +
'\n ai dev shell --run "node main.js"'
);
{{endif}}
{{endif}}
{{if {_IS_BROWSER_TEMPLATE}}}
throw new Error('Missing required environment variables');
{{else}}
process.exit(1);
{{endif}}
}

{{if {_USE_OPENAI_CLOUD_AZURE}}}
{{if {_USE_OPENAI_CLOUD_OPENAI}}}
// Create the OpenAI client
// Create the AzureOpenAI client
console.log(azureOk
? 'Using Azure OpenAI (w/ API Key)...'
: 'Using OpenAI...');
const openai = !azureOk
? new OpenAI({
const client = !azureOk
? new AzureOpenAI({
apiKey: OPENAI_API_KEY,
{{if {_IS_BROWSER_TEMPLATE}}}
dangerouslyAllowBrowser: true
{{endif}}
})
: new OpenAI({
: new AzureOpenAI({
apiKey: AZURE_OPENAI_API_KEY,
baseURL: AZURE_OPENAI_BASE_URL,
defaultQuery: { 'api-version': AZURE_OPENAI_API_VERSION },
Expand All @@ -239,9 +64,9 @@
{{endif}}
});
{{else if {_USE_AZURE_OPENAI_WITH_KEY}}}
// Create the OpenAI client
// Create the AzureOpenAI client
console.log('Using Azure OpenAI (w/ API Key)...');
const openai = new OpenAI({
const client = new AzureOpenAI({
apiKey: AZURE_OPENAI_API_KEY,
baseURL: AZURE_OPENAI_BASE_URL,
defaultQuery: { 'api-version': AZURE_OPENAI_API_VERSION },
Expand Down Expand Up @@ -271,9 +96,9 @@
throw error;
}

// Create the OpenAI client
// Create the AzureOpenAI client
console.log('Using Azure OpenAI (w/ AAD)...');
const openai = new OpenAI({
const client = new AzureOpenAI({
apiKey: '',
baseURL: AZURE_OPENAI_BASE_URL,
defaultQuery: { 'api-version': AZURE_OPENAI_API_VERSION },
Expand All @@ -283,6 +108,7 @@
{{endif}}
});
{{endif}}
{{endif}}
{{else}}
// Create the OpenAI client
console.log('Using OpenAI...');
Expand All @@ -293,4 +119,17 @@
dangerouslyAllowBrowser: true
{{endif}}
});
{{endif}}

{{if {_TEMPLATE_AUTHOR_COMMENT} }}
// For some Learn docs and snippets, error handling or additional helpers are excluded to keep
// the code scoped and focused on the main concept being showcased.
{{endif}}
{{if !{_IS_LEARN_DOC_TEMPLATE}}}
// Create the streaming chat completions helper
{{if contains(toupper("{OPENAI_CLOUD}"), "AZURE")}}
const chat = new {ClassName}(AZURE_OPENAI_CHAT_DEPLOYMENT, AZURE_OPENAI_SYSTEM_PROMPT, client);
{{else}}
const chat = new {ClassName}(OPENAI_MODEL_NAME, AZURE_OPENAI_SYSTEM_PROMPT, openai);
{{endif}}
{{endif}}
Loading