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

6 1 1 1 1

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

(... to be include)

A Practical Guide for Beginners blog posts

There's a blog post teaching test by step how to use Azure OpenAI with JavaScript. It's divided in 3 parts. If you want to read it:

💻 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

21 Lessons, Get Started Building with Generative AI 🔗 https://microsoft.github.io/generative-ai-for-beginners/

Generative AI For Beginners

21 Lessons teaching everything you need to know to start building Generative AI applications

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

GitHub watchers GitHub forks GitHub stars

Generative AI for Beginners (Version 3) - A Course

Learn the fundamentals of building Generative AI applications with our 21-lesson comprehensive course by Microsoft Cloud Advocates.

🌱 Getting Started

This course has 21 lessons. Each lesson covers its own topic so start wherever you like!

Lessons are labeled either "Learn" lessons explaining a Generative AI concept or "Build" lessons that explain a concept and code examples in both Python and TypeScript when possible.

Each lesson also includes a "Keep Learning" section with additional learning tools.

What You Need

To run this code of this course, you can use either:

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)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more