Como integrar o ChatGPT no SAP UI5

Prefácio – Este post faz parte do Programas de Integração UI5 série.

Introdução

Não é possível integrar diretamente o ChatGPT usando um CDN (Content Delivery Network), pois o modelo GPT-3 não está hospedado em nenhum CDN público. O GPT-3 é um modelo proprietário da OpenAI, e o acesso a ele é fornecido por meio da API da OpenAI, que requer uma chave de API para ser usada.

Você pode usar a API OpenAI em seu aplicativo JavaScript fazendo solicitações HTTP para o endpoint da API e usando a chave da API. A API OpenAI fornece uma prompt terminal que permite enviar um prompt para GPT-3 e receber uma resposta.

Aqui está um exemplo de como você pode usar o fetch API em JavaScript para enviar um prompt para GPT-3 e registrar a resposta:

const API_KEY = 'SUA_API_KEY'; const prompt = 'Qual é o sentido da vida?'; fetch(`https://api.openai.com/v1/engines/davinci/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, corpo: JSON.stringify({ prompt, max_tokens: 20 }) }).then(response => response.json()) .then(data => { console.log(data.choices[ 0].texto); });

Como integrar o ChatGPT no SAP UI5

Conforme mostrado na imagem abaixo, seguiremos três etapas simples para integrar as APIs do ChatGPT no aplicativo SAP UI5.

Como integrar o ChatGPT no SAP UI5

1. Obtenha a API do Open AI

Já discutimos todas as etapas envolvidas na criação da API em Este artigo.

2. Criar projeto UI5

Use Web IDE ou SAP BAS e gere um aplicativo UI5 simples usando um gerador.

3. Integre a chamada ChatGPT

Criamos uma visualização muito simples com caixa de entrada, botão e uma área de texto para mostrar a saída, conforme mostrado na visualização abaixo:


E ao pressionar o botão, escrevemos o código fornecido em controller.js

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "usar estrito"; return Controller.extend("Test.Test.controller.Main", { onInit: function ( ) { }, onPressGPT: function () { var that = this; const API_KEY = ''; var prompt = this.byId("idInput").getValue(); fetch(`https://api.openai.com/ v1/engines/davinci/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_KEY}` }, body: JSON.stringify( { prompt, max_tokens: 2000 }) }).then(response => response.json()) .then(data => { that.byId("idText").setText(data.choices[0].text); }); } }); });

saída

A saída sem pressionar o botão fica assim:

Exibição de saída UI5 ChatGPT

Autor

  • Barry Allen

    Desenvolvedor Full Stack com mais de 10 anos de experiência em diferentes domínios, incluindo SAP, Blockchain, IA e Desenvolvimento Web.

    Ver todos os posts

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.