Criando um chatbot – Parte 1

29 de maio de 2022 Off Por Marcelo Martins

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:

http://maurinsoft.com.br/index.php/2022/05/27/integrando-python-com-php/

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/