Criando um chatbot – Parte 1
Neste artigo iremos dar inicio a criação de um chatbot. Ele estará sendo hospedado em um raspberry pi.
Utilizando PHP, AngularJS e Python.
Este artigo é uma continuação do artigo anterior, que pode servir de referência:
Eu apresentarei uma introdução hoje ao Angularjs e o PHP, onde apenas depois mostrarei a parte do Python e do IA propriamente dito.
Este estudo faz parte do estudo da minha Pós graduação na UNINOVE.
Primeiramente iremos escrever o javascript ctlr_test.js
angular.module("App",[]);
angular.module("App").controller("TesteCtrl", function ($scope,$http) {
$scope.app = "Teste Chatbot";
$scope.texto = "";
$scope.pergunta = "";
$scope.msg = "Dúvidas entre em contato com marcelomaurinmartins@gmail.com";
$scope.resposta = "Sem resposta";
$scope.url = "http://maurinsoft.com.br/python/runpy.php?pergunta?"+$scope.pergunta;
$scope.IncluiResposta = function() {
$scope.texto = $scope.texto . $scope.resposta;
}
$scope.displayResposta = function() {
$http.get("http://maurinsoft.com.br/python/runpy.php?pergunta="+$scope.pergunta)
.success(function(data)
{
//console.log(data);
$scope.data = data.rs[0];
$scope.resposta = data.rs[0].resposta;
$scope.texto = $scope.texto + "Pergunta:"+$scope.pergunta+'\n';
$scope.texto = $scope.texto + "Resposta:"+$scope.resposta+'\n';
$scope.msg = "Resposta obtida!";
})
.error(function(erro)
{
//console.log(erro);
$scope.msg = "Pesquisa retornou vazia";
$scope.data = null;
})
}
});
Nele chamamos a função IncluiResposta , que envia a resposta para o web service(ws), que recebe a resposta e devolve para o browser.
Ao enviar a solicitação, a mesma é processada pelo ws, que devolve um json, na figura abaixo, vemos a execução direta do json, simulando a pergunta do browser.
Depois iremos criar o index.php , que monta uma interface para ser mostrada na tela.
<!DOCTYPE HTML>
<HTML ng-app="App" LANG="PT-BR">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="Maurinsoft"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Teste de Chatbot</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="../../libs/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../../libs/bootstrap/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
<script src="js/ctlr_test.js"></script>
</head>
<body ng-controller="TesteCtrl">
<video autoplay loop poster="img/logo.jpg" class="bg_video">
<source src="video/fundo.webm" type="video/webm">
<source src="video/fundo.mp4" type="video/mp4">
</video>
<div class="container">
<!--Caixa titulo -->
<div class="row borda_container">
<div class="col-xs-2 ">
<img src="img/logo.png" alt="Tutorial de CSS" title="Logo do CSS" width="100" height="100"/>
</div>
<div class="col-xs-10 Logo ">
<h1 class="titulo">{{app}}</h1>
</div>
</div>
<div class="row separacao">
</div>
<!--Login -->
<div class="row">
</div>
<!--Menu Item-->
<div class="row">
<div class="col-xs-12 menu">
<div class="row">
<h4 class="menu_titulo">Conversa</h4>
</div>
<div class="row container col-xs-12">
<textarea type="text" style=" top:500px;height:200px;width:600px; left:470px; overflow:hidden;" class="col-md-10" >{{texto}}</textarea>
</div>
<div class="info_help">
<div class="row col-md-12">
<h4>Perguta</h4>
</div>
<div class="row container">
<div class="col-md-8">
<input type="text" value="{{pergunta}}" ng-model="pergunta" name="Pergunta">
</div>
<div class="col-md-2">
<input type="submit" value="Enviar" ng-click="displayResposta()">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row rodape_container">
<div class="row">
<center>{{msg}}</center>
</div>
</div>
<script type="text/javascript" src="../../libs/bootstrap/js/bootstrap.js"></script>
</body>
</html>Chamada do lado do WS
No webservice, o python é chamado, que realiza toda a analise da pergunta.
Fonte do runpy.php, que é o web service.
<?php
/*phpinfo();*/
/*Registra webservice para processamento de jobs*/
ini_set('display_errors', 'ON');
error_reporting(E_ALL);
header('Content-Type: application/json'); // <-- header declaration
include "/var/www/html/ws/connectdb.php";
//header('Cache-Control: no-cache, must-revalidate');
$data = json_decode(file_get_contents("php://input"));
if($data){
$pergunta = $dbhandle->real_escape_string($data->pergunta);
} else {
$pergunta = $dbhandle->real_escape_string($_GET['pergunta']);
}
$json = '{"rs":[';
if($pergunta){
$command = escapeshellcmd('/var/www/html/python/nlp.py "'.$pergunta.'" > /var/log/proclog.log');
$resposta = shell_exec($command);
$resposta = str_replace (array("\r\n", "\n", "\r"), ' ', $resposta);
if($resposta){
$json = $json . '{';
$json = $json . '"pergunta":"'.$pergunta.'",';
$json = $json . '"resposta":'.$resposta;
$json = $json . '}';
} else {
$json = $json . '{';
$json = $json . '"pergunta":"'.$pergunta.'",';
$json = $json . '"resposta":"'.'sem resposta'.'"';
$json = $json . '}';
}
} else {
$json = $json . '{';
$json = $json . '"pergunta":"'.$pergunta.'",';
$json = $json . '"resposta":"'.'sem resposta'.'"';
$json = $json . '}';
}
$json = $json . ']}';
echo $json
?>
O armazenamento das solicitações, podem ser gravadas pelo webservice, que permite gravar as respostas, para aprimoramento posterior.
Fonte do nlp.py, que gera a analise em python.
#!/usr/bin/env python3
#import pandas as pd
import sys
import numpy as np
import math
import time
import re
import random
pergunta = f'"{sys.argv[1]}"'
resposta = "Desculpe, não achei uma resposta válida"
#Iniciando o processo de analise de dados
#Devolvendo o modelo para o ws
resposta= "\"%s\""%(resposta)
print(resposta)
Neste exemplo simples porem integral, podemos notar o processo completo de desenvolvimento de chatbot, sem a implementação da parte do python, que abordaremos nos próximos tópicos.
URL do projeto
http://maurinsoft.com.br/index.php/2022/06/30/chatbot-no-wordpress/
