From ab03a448ae13a196a797d85750560b17f9d4ea15 Mon Sep 17 00:00:00 2001
From: Mau  Magnaguagno <maumagnaguagno@gmail.com>
Date: Fri, 21 Jun 2024 17:42:09 -0300
Subject: [PATCH] =?UTF-8?q?Reestrutura=C3=A7=C3=A3o=20das=20pastas=20e=20a?=
 =?UTF-8?q?di=C3=A7=C3=A3o=20de=20cliente=20web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                     | 11 +++++-
 src/{client => cli}/client.py |  0
 src/web/client.html           | 68 +++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 1 deletion(-)
 rename src/{client => cli}/client.py (100%)
 create mode 100644 src/web/client.html
diff --git a/README.md b/README.md
index 4c77137..801e339 100644
--- a/README.md
+++ b/README.md
@@ -11,13 +11,22 @@ Repositório para códigos e outros materiais relacionados aos clientes para o a
 
 ## Uso
 
+Existem duas formas de acessar o servidor através da mesma API, usando terminal ou navegador.
+O uso do terminal é indicado para execução em lote de forma automática, enquanto o navegador oferece uma interface simples voltada para pequenos testes. 
+
+### Terminal
+
 Para acessar o servidor, utilize o comando abaixo:
 
 ```
-python client.py file.json [ner] [sym]
+python src/cli/client.py file.json [ner] [sym]
 ```
 
 O arquivo JSON é apenas um exemplo de como os dados podem ser repassados por requisições POST ao servidor.
 Os argumentos `ner` e `sym` são opcionais e servem para ativar os respectivos identificadores, onde:
 - `ner`: entidades nomeadas;
 - `sym`: identificadores padronizados, como números de telefone/cpf e hyperlinks.
+
+### Navegador
+
+Para acessar o servidor, abra `src/web/client.html` em um navegador atualizado.
diff --git a/src/client/client.py b/src/cli/client.py
similarity index 100%
rename from src/client/client.py
rename to src/cli/client.py
diff --git a/src/web/client.html b/src/web/client.html
new file mode 100644
index 0000000..0a79519
--- /dev/null
+++ b/src/web/client.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang=en-us>
+<head>
+  <meta charset=utf-8>
+  <title>Text anonymization</title>
+</head>
+<body style=margin:0;font-family:Arial,sans-serif>
+
+<header>
+<h1 style=margin:0>Text anonymization</h1>
+</header>
+
+<section style=display:flex>
+<div>
+<textarea id=input cols=40 rows=40>
+João Silva, pessoa física (CPF 012345678-99) médico com CRM/SC 123456 e consultório de nome LabC (CNPJ 12.123.123/0001-54), acordou cedo no dia 17/05/2024, consultando seu e-mail no celular (joao.sival@gmail.com, 01:23:45:67:89:aA) para se preparar para mais um dia agitado na clínica. Notou uma mensagem importante sobre um congresso médico que ocorreria em 25/dez/10, mas logo percebeu que era um erro, já que o evento já havia passado há 14 anos. Rindo, ele ignorou a mensagem e conferiu o relógio em seu smartphone: 7h30 da manhã.
+Levantando-se, João se preparou para o dia, tomando café da manhã às 8h15 em seu apartamento na Rua dos Exemplos, 123, Bairro Exemplo, São Paulo, SP (CEP: 90619-900). Enquanto isso, ligou para sua secretária, Maria (email: maria@pucrs.br, mariasales@uol.com.br), no número (11) 9999-9999, para confirmar a agenda de consultas do dia.
+Ao chegar à clínica, localizada na Avenida Exemplar, 456, Centro, Rio de Janeiro, RJ (CEP 11111-111), João foi recebido por seus pacientes. Entre eles, estava a Sra. Ana Oliveira, que chegou em seu carro com placa ABC-1234. Durante a consulta, João verificou o histórico médico da paciente em seu computador, acessando o site do hospital (https://www.einstein.br/en/Pages/Home.aspx) através do endereço IP 142.250.79.174.
+Após um dia cheio de trabalho, João finalmente voltou para casa por volta das 19h, dirigindo seu outro carro, com placa DEF5R78. Cansado, mas satisfeito com o dia, ele relaxou assistindo a um vídeo no YouTube (https://www.youtube.com/) em seu tablet, acessando a internet através do IP 10.0.0.1. Antes de dormir, ele ainda conferiu suas redes sociais (www.facebook.com) no notebook, respondendo algumas mensagens e atualizando seu perfil.
+Exausto, mas realizado, João finalmente adormeceu, pronto para mais um dia na vida agitada de um médico dedicado.
+</textarea>
+</div>
+
+<div id=output>
+</div>
+
+</section>
+
+<button id=request onclick=request()>Request</button>
+<input id=sym type=checkbox checked/>
+<label for=sym>Sym</label>
+<input id=ner type=checkbox checked/>
+<label for=ner>NER</label>
+
+<script>
+var url = "http://127.0.0.1:8602/deid/"
+var input_textarea = document.getElementById("input");
+var output_div = document.getElementById("output");
+var request_button = document.getElementById("request");
+var sym_checkbox = document.getElementById("sym")
+var ner_checkbox = document.getElementById("ner");
+function request() {
+  request_button.disabled = true;
+  fetch(url, {
+    method: "POST",
+    body: JSON.stringify({txt: [input_textarea.value], ner: ner_checkbox.checked, sym: sym_checkbox.checked}),
+    headers: {"Content-type": "application/json"}
+  }).then(r => r.json()).then(r => {
+    console.log(r.txt);
+    var txt = r.txt[0];
+    txt = txt.replaceAll("[PESSOA]", "<mark style=color:#f00>[PESSOA]</mark>");
+    txt = txt.replaceAll("[CPF-CNPJ]", "<mark style=color:#070>[CPF-CNPJ]</mark>");
+    txt = txt.replaceAll("[CEP]", "<mark style=color:#07f>[CEP]</mark>");
+    txt = txt.replaceAll("[TELEFONE]", "<mark style=color:#007>[TELEFONE]</mark>");
+    txt = txt.replaceAll("[CRM]", "<mark style=color:#070>[CRM]</mark>");
+    txt = txt.replaceAll("[PLACA-VEICULO]", "<mark style=color:#f70>[PLACA-VEICULO]</mark>");
+    txt = txt.replaceAll("[EMAIL]", "<mark style=color:#f0f>[EMAIL]</mark>");
+    txt = txt.replaceAll("[URL]", "<mark style=color:#00f>[URL]</mark>");
+    txt = txt.replaceAll("[MAC]", "<mark style=color:#777>[MAC]</mark>");
+    txt = txt.replaceAll("[IPV4]", "<mark style=color:#d07>[IPV4]</mark>");
+    txt = txt.replaceAll("[DATA]", "<mark style=color:#707>[DATA]</mark>");
+    output_div.innerHTML = "<p>" + txt + "</p>";
+    request_button.disabled = false;
+  });
+}
+</script>
+</body>
+</html>
\ No newline at end of file
-- 
GitLab

