DEV Community

Cover image for Guia Prático para Iniciantes: Azure OpenAI com JavaScript e TypeScript (Parte 3)
Glaucia Lemos for Microsoft Azure

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Passo 02: Instale o pacote do Azure OpenAI Service:
npm install @azure/openai
Enter fullscreen mode Exit fullscreen mode
  • Passo 03: Vamos instalar também os pacotes: dotenv e nodemon:
npm install dotenv --save
Enter fullscreen mode Exit fullscreen mode
npm install nodemon --save-dev
Enter fullscreen mode Exit fullscreen mode
  • Passo 04: Vá até o arquivo package.json e adicione o script abaixo:
"scripts": {
    "start": "nodemon src/index.js"
  },
Enter fullscreen mode Exit fullscreen mode
  • 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>"
Enter fullscreen mode Exit fullscreen mode

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:
/**
 * file: src/index.js
 * description: file responsible for run the code sample completion
 * data: 10/20/2023
 * author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

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);
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

GitHub logo glaucia86 / azureopenai-js-samples

A repository for studies proporses how to use A.I + TypeScript + Langchain + Azure Open A.I

Learn Live Code Sessions: Azure OpenAI + LangChain with JavaScript/TypeScript

This repository is responsible for studies, code samples and learnings about how to use the Microsoft Azure OpenAI + LangChain with JavaScript/TypeScript.

🚀 Resources Used

📺 Video Series

(... sooner)

💻 Code samples Developed

Here you will find some code samples developed using Azure OpenAI with JavaScript/TypeScript.

📕 Important Resources

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!

GitHub logo microsoft / generative-ai-for-beginners

12 Lessons, Get Started Building with Generative AI

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Open in GitHub Codespaces

Generative AI for Beginners - A Course

Learn the fundamentals of building Generative AI applications with our 12-lesson comprehensive course by Microsoft Cloud Advocates. Each lesson covers a key aspect of Generative AI principles and application development. This course will take you from learning Generative AI concepts like LLMs and prompt engineering to applying those ideas by building real Generative AI applications.

Throughout this course, we will be building our own Generative AI startup so you can get an understanding of what it takes to launch your ideas.

Build a strong foundation of Generative AI knowledge and start applying it today!

📂 Each lesson includes:

  • optional supplemental video
  • written lesson
  • for project-based lessons, step-by-step guides on how to build the project
  • a challenge
  • links

🌱 Getting Started

To get started, fork this entire repo to your own GitHub account to be able to change any code and complete the challenges…




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:

  • 😃 Microsoft Learn Live Sessions
  • 😃 Tutoriais semanais de Node.js, TypeScript & JavaScript
  • 😃 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.

Screen-Shot-12-31-20-at-01-06-AM.png

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

Screen-Shot-12-31-20-at-01-06-AM.png

E nos vemos! Até a próxima ❤️❤️

Top comments (0)