Guia Prático para Iniciantes: Azure OpenAI com JavaScript e TypeScript (Parte 3)

Posted on by — No Comments ↓

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Community Hub.

Introdução

 

Na terceira parte deste guia prático, Guia Prático para Iniciantes: Azure OpenAI com JavaScript e TypeScript, você aprenderá a criar uma aplicação Node.js que consumirá o Azure OpenAI Service. Começaremos do zero, desde a configuração do ambiente de desenvolvimento no Visual Studio Code até a criação e execução de uma aplicação pronta para interagir com o serviço de IA. Você descobrirá como configurar variáveis de ambiente, definir parâmetros para controlar a geração de conclusões e obter resultados impressionantes. Além disso, forneceremos recursos adicionais para você aprofundar seu conhecimento sobre Azure OpenAI. Prepare-se para dar vida às suas ideias com o Azure OpenAI e JavaScript e TypeScript.

 

Criando a aplicação Node.js para consumir o Azure OpenAI Service

 

Para criar a aplicação Node.js, vamos utilizar o Visual Studio Code. Caso você não tenha instalado, basta acessar o link e fazer o download.

 

Após instalar o Visual Studio Code, vamos criar a aplicação Node.js. Para isso, basta seguir os passos abaixo:

 

o exemplo abaixo é relacionado ao Completion Code Sample. Se desejarem testar a aplicação, poderão fazer uso do Codespaces desde o projeto forkado em seu repositório.

  • Passo 01: Crie uma pasta para o projeto e dentro da pasta, digite o comando:

 

npm init -y

 

O arquivo package.json será criado.

 

observação: defini para usar esm (ECMAScript Modules) no projeto. Para isso, basta adicionar o campo type com o valor module no arquivo package.json.

 

{ "name": "javascript", "version": "1.0.0", "description": "a simple code sample how to use Azure OpenAI Service with JavaScript", "main": "index.js", "type": "module", "scripts": { "start": "nodemon src/index.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "nodejs", "javascript", "ai", "artificial intelligence", "azure-openai" ], "author": "Glaucia Lemos <Twitter: @glaucia_lemos86>", "license": "MIT", "dependencies": { "@azure/openai": "^1.0.0-beta.6", "dotenv": "^16.3.1" }, "devDependencies": { "nodemon": "^3.0.1" } }

 

  • Passo 02: Instale o pacote do Azure OpenAI Service:

 

npm install @azure/openai

 

  • Passo 03: Vamos instalar também os pacotes: dotenv e nodemon:
npm install dotenv --save npm install nodemon --save-dev

 

  • Passo 04: Vá até o arquivo package.json e adicione o script abaixo:

 

"scripts": { "start": "nodemon src/index.js" },

 

  • Passo 05: Crie um arquivo chamado .env e dentro do arquivo, digite o código abaixo:

 

AZURE_OPENAI_ENDPOINT="https://<resource name>.openai.azure.com" AZURE_OPENAI_KEY="<azure api key>"

 

 

Para obter o endpoint e a key, basta acessar o recurso do Azure OpenAI Service criado no Portal Azure e depois clicar em Keys and Endpoint.

 

azure-openai-11.png

 

  • Passo 06: Crie uma pasta chamada src e dentro da pasta, crie um arquivo chamado index.js. Dentro do arquivo index.js, digite o código abaixo:

 

import { OpenAIClient, AzureKeyCredential } from '@azure/openai'; import dotenv from 'dotenv'; dotenv.config(); const endpoint = process.env.AZURE_OPENAI_ENDPOINT || ''; const azureApiKey = process.env.AZURE_OPENAI_KEY || ''; const prompt = ['What is Azure OpenAI?']; async function main() { console.log('=== Get completions Sample ==='); const client = new OpenAIClient( endpoint, new AzureKeyCredential(azureApiKey) ); const deploymentName = 'deployment-name-completion'; const result = await client.getCompletions(deploymentName, prompt, { maxTokens: 200, temperature: 0.25 }); for (const choice of result.choices) { console.log(choice.text); } } main().catch((err) => { console.error('The sample encountered an error:', err); });

 

Observe que no código, colocamos o deploymentName que criamos no Azure AI Studio!

 

Outro ponto a ser mencionado é que no result definimos a quantidade de tokens que queremos que o modelo retorne. No caso, definimos para retornar 200 tokens. Mas, você pode definir a quantidade que desejar.

 

E, o temperature é o que contralará as conclusões geradas. Quanto maior for esse valor, mais criativas serão as conclusões geradas.

 

Enquanto que valores mais baixos retornará conclusões mais focados e determinísticos.

 

Se vocês desejarem entender o que as classes como: OpenAIClient e AzureKeyCredential fazem, basta acessar o link Azure OpenAI Service Node.js API Reference.

 

  • Passo 07: Agora, basta executar o comando abaixo para executar a aplicação:

 

npm start

 

E, vejam o resultado:

 

gif-azureopenai-js.gif

 

Recursos Adicionais

 

Abaixo segue alguns recursos adicionais sobre o Azure OpenAI Service:

 

 

Palavras Finais

 

Neste artigo, você aprendeu a criar uma aplicação Node.js que consome o Azure OpenAI Service. Começamos do zero, desde a configuração do ambiente de desenvolvimento no Visual Studio Code até a criação e execução de uma aplicação pronta para interagir com o serviço de IA. Você descobriu como configurar variáveis de ambiente, definir parâmetros para controlar a geração de conclusões e obter resultados impressionantes. Além disso, fornecemos recursos adicionais para você aprofundar seu conhecimento em inteligência artificial. Agora, você está pronto para dar vida às suas ideias com o Azure OpenAI e JavaScript e TypeScript. O repositório com o código fonte completo está disponível no GitHub:

 

Captura de tela 2023-11-27 101525.png

Há também um repositório incrível onde você poderá aprender mais sobre Generative AI com muitos outros exemplos em Python para você poder explorar cada vez mais o mundo de A.I com Azure!

 

repository-thumbnail.png

 

Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu Canal do Youtube! E, ainda durante o ano de 2023 virão muitas outras coisas bem legais no canal!

 

Algumas das novidades:

 

  • :happyface: Microsoft Learn Live Sessions
  • :happyface: Tutoriais semanais de Node.js, TypeScript & JavaScript
  • :happyface: E, muito mais!

 

Se são conteúdos que você curte, então não deixa de se inscreverem e ative o sininho para ficarem sabendo quando teremos vídeo novo! Essa semana já teremos uma série nova incrível lá no Canal do Youtube.

 

Captura de tela 2023-11-27 092958.png

 

E para ficarem por dentro de várias outras novidades, não deixem de me seguirem lá no Twitter!

 

E nos vemos! Até a próxima :hearteyes:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.