Integrando um agente do Dialogflow em um aplicativo React

Este artigo é um guia sobre como criar um proxy Dialogflow com suporte de voz e bate-papo, que pode ser integrado a um aplicativo da web com a ajuda do aplicativo de back-end Express.js como um link entre os aplicativos da web React. Js e proxy no próprio Dialogflow . No final do artigo, você deve conectar seu proxy Dialogflow ao seu aplicativo da web preferido.

Dialogflow

Configurando Um Agente Dialogflow

Conforme descrito neste artigo, o assistente de bate-papo no Dialogflow é chamado de agente e consiste em componentes menores (por exemplo, intent, conformidade, base de conhecimento etc.).

O Dialogflow fornece aos usuários um console para criar, treinar e projetar o fluxo de diálogo dos agentes. Em nosso caso de uso, usaremos as funções de exportação e importação do agente para restaurar o agente treinado para a pasta ZIP.

Antes de realizar a importação, precisamos criar um agente, que se fundirá com o agente a ser restaurado.

Para criar um agente a partir do console, você precisa de um nome exclusivo e também de um projeto do Google Cloud para vincular o agente. Se não houver um projeto existente do Google Cloud para vincular, você pode criar um projeto aqui.

Os agentes foram criados e treinados anteriormente e podem recomendar produtos vínicos aos usuários de acordo com seu orçamento.

O agente foi exportado para o ZIP; você pode baixar a pasta aqui e, em seguida, restaurá-lo em nosso agente recém-criado na guia “Exportar e importar” na página “Configurações de proxy”.

Anteriormente, o agente de importação foi treinado e pode recomendar produtos vínicos aos usuários de acordo com seu orçamento para a compra de uma garrafa de vinho.

Rolando no agente importado, veremos que três intents são criados na página de intents.

Um é um intent alternativo, que é usado quando o agente não consegue reconhecer a entrada do usuário, o outro é um intent de boas-vindas, que é usado ao falar com o agente, e o último intent é usado para recomendar vinho ao usuário com base no parâmetro de quantidade da frase. Para nós, o foco é a intenção de recomendação de vinhos.

Essa intent tem um único contexto de recomendação de álcool da intent de boas-vindas padrão para vincular a conversa à intent.

Olhando para a imagem acima, podemos ver as frases de treinamento disponíveis listadas, e o formato de cada moeda está destacado em amarelo. Esse destaque é chamado de comentário no Dialogflow e é feito automaticamente para extrair o tipo de dados reconhecido como uma entidade da frase do usuário.

Depois que a intent é correspondida na conversa com o agente, a seção “implementação” na parte inferior da página da intent será usada.

Podemos usar o simulador Dialogflow localizado no lado direito do console do Dialogflow para testar o agente. Para teste, iniciamos a conversa com a mensagem “Oi” e depois continuamos adicionando a quantidade de vinho necessária. O webhook será chamado imediatamente e o agente exibirá uma resposta de alto nível semelhante à mostrada abaixo.

Na imagem acima, podemos ver a URL do webhook gerada pelo Ngrok e a resposta do agente à direita, mostrando vinhos na faixa de preço de $ 20 informada pelo usuário.

Integrando Um Agente Dialogflow

 Existem outras maneiras de se conectar ao proxy Dialogflow, como fazer uma solicitação HTTP para <a href =” https://cloud.google.com/dialogflow/es/docs/reference/rest/v2-overview”> endpoint REST </a>, a maneira recomendada de se conectar ao Dialogflow é usar sua biblioteca cliente oficial, que pode ser fornecida em várias linguagens de programação.

Internamente, o pacote @ google-cloud / dialogflow usa gRPC para conexões de rede, o que torna o pacote sem suporte no ambiente do navegador, a menos que seja corrigido usando Webpack. A maneira recomendada de usar este pacote é no ambiente Node. Para fazer isso, podemos configurar o aplicativo de back-end Express.js para usar este pacote e, em seguida, fornecer dados ao aplicativo da web por meio de seu endpoint de API, que é o que faremos a seguir.

Configurando Um Aplicativo Node Express

Para configurar o aplicativo expresso, criamos um novo diretório de projeto e usamos o terminal de linha de comando yarnum open para obter as dependências necessárias.

create a new directory and ( && ) move into directory
 mkdir dialogflow-server && cd dialogflow-server
 create a new Node project
 yarn init -y
 Install needed packages
 yarn add express cors dotenv uuid

Depois de instalar as dependências necessárias, podemos continuar a construir um servidor Express.js muito simplificado que lida com conexões em portas designadas com suporte CORS habilitado para o aplicativo da web.

// index.js
const express = require(“express”)
const dotenv = require(“dotenv”)
const cors = require(“cors”)

dotenv.config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());

app.listen(PORT, () => console.log(🔥 server running on port ${PORT}));

Após a execução, o código no fragmento de código acima iniciará o servidor HTTP, que escuta as conexões no PORT Express.js especificado. Ele também usa o pacote cors como middleware Express para permitir o compartilhamento de recursos de origem cruzada (CORS) para todas as solicitações. Atualmente, o servidor apenas escuta as conexões e não pode responder às solicitações porque não criou uma rota, então vamos criá-la.

Agora, precisamos adicionar dois novos caminhos: um para enviar dados de texto e outro para enviar entrada de voz gravada. Ambos aceitarão a solicitação POST e enviarão os dados contidos no corpo da solicitação ao proxy Dialogflow.

const express = require(“express”)

const app = express()

app.post(“/text-input”, (req, res) => {
res.status(200).send({ data : “TEXT ENDPOINT CONNECTION SUCCESSFUL” })
});

app.post(“/voice-input”, (req, res) => {
res.status(200).send({ data : “VOICE ENDPOINT CONNECTION SUCCESSFUL” })
});

module.exports = app

Acima, criamos uma instância de roteador separada para os dois POSTs criados. Atualmente, eles respondem apenas com um código de status 200 e uma resposta de código virtual. Após concluir a autenticação do Dialogflow, podemos retornar para perceber a conexão real com o Dialogflow nesses endpoints.

Para a etapa final de configuração do aplicativo de back-end, configuramos a instância do roteador criada anteriormente no aplicativo Express usando app.use e o caminho base da rota.

// agentRoutes.js

const express = require(“express”)
const dotenv = require(“dotenv”)
const cors = require(“cors”)

const Routes = require(“./routes”)

dotenv.config();
const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());

app.use(“/api/agent”, Routes);

app.listen(PORT, () => console.log(🔥 server running on port ${PORT}));

Acima, adicionamos o caminho base para as duas rotas; podemos usar cURL na linha de comando para testar qualquer uma delas por meio de POSTrequest, assim como o seguinte é feito com um corpo de solicitação vazio;

curl -X http://localhost:5000/api/agent/text-response

Depois de concluir com sucesso a solicitação acima, podemos esperar ver uma resposta contendo os dados do objeto sendo impressos no console.

AUTENTICAÇÃO COM DIALOGFLOW

Cada agente Dialogflow criado está vinculado a um projeto no Google Cloud. Para nos conectarmos ao proxy Dialogflow de fora, autenticamos o projeto do Google Cloud e usamos o Dialogflow como um dos recursos do projeto.

Ao se conectar a um serviço específico no Google Cloud por meio da biblioteca cliente, usar a opção “Conta de serviço” é o mais conveniente dos seis métodos disponíveis para se conectar a um projeto no Google Cloud.

O QUE SÃO CONTAS DE SERVIÇO?

A conta de serviço é um tipo especial de conta no Google Cloud, que é criada principalmente por meio de interação não humana por meio de API externa. Em nosso aplicativo, a chave gerada pela biblioteca cliente do Dialogflow será usada para acessar a conta de serviço para autenticação no Google Cloud.

A documentação da nuvem sobre como criar e gerenciar contas de serviço fornece um excelente guia para criar contas de serviço. Ao criar uma conta de serviço, você deve atribuir a função de administrador da API Dialogflow à conta de serviço criada, conforme mostrado na última etapa. Esse papel permite que a conta de serviço tenha controle administrativo sobre o agente do Dialogflow vinculado.

Para usar uma conta de serviço, precisamos criar uma chave de conta de serviço. As etapas a seguir descrevem como criar um no formato JSON:

Clique na conta de serviço recém-criada para navegar até a página da conta de serviço. Role para baixo até a seção “Chaves” e clique no menu suspenso “Adicionar chave” e clique na opção “Criar nova chave” para abrir o modo.

Selecione o formato de arquivo JSON e clique no botão “Criar” no canto inferior direito do modo.

Depois de criar a conta de serviço e fornecer a chave da conta de serviço em nosso diretório de projeto, podemos usar a biblioteca de cliente Dialogflow para enviar e receber dados do agente Dialogflow.

// agentRoute.js
require(“dotenv”).config();

const express = require(“express”)
const Dialogflow = require(“@google-cloud/dialogflow”)
const { v4 as uuid } = require(“uuid”)
const Path = require(“path”)

const app = express();

app.post(“/text-input”, async (req, res) => {
const { message } = req.body;

// Create a new session
const sessionClient = new Dialogflow.SessionsClient({
keyFilename: Path.join(__dirname, “./key.json”),
});

const sessionPath = sessionClient.projectAgentSessionPath(
process.env.PROJECT_ID,
uuid()
);

// The dialogflow request object
const request = {
session: sessionPath,
queryInput: {
text: {
// The query to send to the dialogflow agent
text: message,
},
},
};

// Sends data from the agent as a response
try {
const responses = await sessionClient.detectIntent(request);
res.status(200).send({ data: responses });
} catch (e) {
console.log(e);
res.status(422).send({ e });
}
});

module.exports = app;

Integrando Em Um Aplicativo Da Web

Para usar nossa API REST integrada, vamos estender este aplicativo React.js existente, que já tem uma página inicial que exibe uma lista de vinhos obtida da API e oferece suporte a decoradores usando o plug-in de decorador de proposta babel.

Vamos refatorá-lo apresentando Mobx para gerenciamento de estado e usando os pontos de extremidade REST API adicionados no aplicativo Express.js para recomendar vinho do componente de chat.

Primeiro, começamos a usar o MobX para gerenciar o estado do aplicativo, porque criamos um armazenamento Mobx com alguns valores observáveis ​​e alguns métodos (como ações).

// store.js

import Axios from “axios”;
import { action, observable, makeObservable, configure } from “mobx”;

const ENDPOINT = process.env.REACT_APP_DATA_API_URL;

class ApplicationStore {
constructor() {
makeObservable(this);
}

@observable
isChatWindowOpen = false;

@observable
isLoadingChatMessages = false;

@observable
agentMessages = [];

@action
setChatWindow = (state) => {
this.isChatWindowOpen = state;
};

@action
handleConversation = (message) => {
this.isLoadingChatMessages = true;
this.agentMessages.push({ userMessage: message });

 Axios.post(`${ENDPOINT}/dialogflow-response`, {
  message: message || "Hi",
 })
  .then((res) => {
    this.agentMessages.push(res.data.data[0].queryResult);
    this.isLoadingChatMessages = false;
  })
  .catch((e) => {
    this.isLoadingChatMessages = false;
    console.log(e);
  });

};
}

export const store = new ApplicationStore();

Acima, criamos uma loja para o recurso do componente de bate-papo dentro do aplicativo com os seguintes valores:

isChatWindowOpen

O valor armazenado aqui controla a visibilidade do componente de bate-papo que exibe as mensagens do Dialogflow.

isLoadingChatMessages

Isso é usado para exibir o indicador de carga quando uma solicitação é feita para buscar uma resposta do agente Dialogflow.

agentMessages

Essa matriz armazena todas as respostas a solicitações que obtêm respostas do agente Dialogflow. Os dados na matriz são exibidos no componente posteriormente.

handleConversation

Este método decorado como uma ação adiciona dados ao agentMessagesarray.

Primeiro, ele adiciona a mensagem do usuário passada como parâmetro e, em seguida, usa o Axios para fazer uma solicitação ao aplicativo de back-end para obter uma resposta do Dialogflow.

Depois que a solicitação for resolvida, ele adiciona a resposta à solicitação ao agentMessagesmatrix.

Com a configuração armazenada, precisamos iniciar a partir do componente raiz no arquivo index.js e agrupar toda a árvore do aplicativo com os componentes de nível superior do provedor MobX.

import React from “react”;
import { Provider } from “mobx-react”;

import { store } from “./state/”;
import Home from “./pages/home”;

function App() {
return (

);
}

export default App;

Acima, usamos o componente raiz do aplicativo em conjunto com o Provedor MobX e passamos a loja criada anteriormente como um dos valores do Provedor. Agora, podemos continuar a ler a loja no componente conectado à loja.

CRIAÇÃO DE UMA INTERFACE DE BATE-PAPO

Para exibir mensagens enviadas ou recebidas de solicitações de API, precisamos de um novo componente com alguma interface de bate-papo para exibir as mensagens listadas. Para isso, criamos um novo componente para primeiro exibir algumas mensagens codificadas e, em seguida, exibir essas mensagens em uma lista ordenada.

// ./chatComponent.js

import React, { useState } from “react”;
import { FiSend, FiX } from “react-icons/fi”;
import “../styles/chat-window.css”;

const center = {
display: “flex”,
jusitfyContent: “center”,
alignItems: “center”,
};

const ChatComponent = (props) => {
const { closeChatwindow, isOpen } = props;
const [Message, setMessage] = useState(“”);

return (

Zara

closeChatwindow()} />

  • Hi there, welcome to our Agent

{}} className=”input-container”> setMessage(e.target.value)} value={Message} placeholder=”Begin a conversation with our agent” /> {}}>

);
};

export default ChatComponent

Os componentes acima têm a marcação HTML básica exigida pelo aplicativo de bate-papo. Ele tem um título que mostra o nome do agente e um ícone para fechar a janela de chat, o balão de mensagem contém o texto codificado na tag da lista e, finalmente, um campo de entrada, o onChangemanipulator do evento é anexado à entrada para usar o useState do React para armazenar no O texto digitado no estado local.

Nos próximos anos, o uso de assistentes de chat para processamento de idiomas em serviços públicos se tornará uma tendência.

Para aprender mais, faça uma consultoria com a b20.

Gostou desse post ?

Compartilhar no facebook
Share on Facebook
Compartilhar no twitter
Share on Twitter
Compartilhar no linkedin
Share on Linkdin
Compartilhar no pinterest
Share on Pinterest

Deixe um comentário