Como criar moderação de imagens utilizando Expo e SightEngine

 

Olá pessoal! Se você está desenvolvendo algum projeto, seja em Expo ou mesmo em React Native, e nele é necessário enviar alguma imagem que será divulgada publicamente, como acontece nos apps de rede social, é imprescindível que o conteúdo, não apenas textos como imagens também, passem por um sistema de moderação. Nesse artigo eu gostaria de mostrar a vocês uma solução relativamente simples de implementar esse sistema utilizando a API da SightEngine com o Expo CLI sem a necessidade de instalar quaisquer módulos adicionais. Vamos lá?

Primeiro passo

Antes de começar, vamos criar um projeto de exemplo. Aqui chamarei de meuApp, que basicamente é um aplicativo que exibe um botão que permite selecionar uma imagem a partir da galeria do Android. Então criamos um projeto em Expo criando uma pasta e abrindo um terminal dentro dela. com o comando npx expo init meuApp no diretório desejado. Ao concluir teremos a seguite estrutura de arquivos:

Segundo passo

Dentro do diretório do projeto, vamos instalar o Expo ImagePicker com o comando a seguir:

Após a instalação do módulo, teremos condições de iniciar o projeto. Para isso utilizamos o comando npx expo start.

Terceiro passo

Agora podemos começar a codar! Dentro do diretório raíz do nosso projeto recém criado, vamos criar duas pastas, uma chamada src e dentro dela outra chamada functions. Dentro de functions, vamos criar um arquivo chamado nsfw.js, que utilizaremos posteriormente para criar a comunicação com a API da SightEngine:

Assim, podemos abrir o editor de sua preferência. Aqui utilizarei o Visual Studio Code.

Quarto passo

Em App.js, vamos criar uma tela simples que contém um botão que chamará o Expo ImagePicker. Aqui utilizei o mesmo código de exemplo disponível na documentação para ganhar tempo.

Substituindo o nome do componente para App, teremos algo assim:

Quinto passo

Agora vamos criar nossa função de moderação. Para isso, acessamos o arquivo nsfw.js previamente criado e adicionamos o código a seguir:

Vou explicar como a API funciona. Criamos uma função (aqui chamei de NSFWDetectorUpload) que recebe dois parâmetros de entrada: um path, que contém a uri da imagem escolhida e um callback, que devolve o resultado por meio de uma função.

Sequencialmente, declaramos uma variável que recebe o endereço da API, outra que recebe a uri da imagem (path). Em seguida, instanciamos um objeto chamado formData, que vai criar um modelo de requisição HTTP contendo uma sequência de pares de chaves e valor, muito parecido com o que vemos no Axios. E por fim criamos uma variável que retornará um objeto JSON do resultado recebido pela API.

Em apiUser e apiSecret inserimos as chaves fornecidas pela SightEngine. Para obtê-las, basta criar um cadastro no site da empresa e acessar a Dashboard. Lá no canto esquerto temos a opção API Keys. Basta copiá-las e adicionar conforme a imagem acima.

Com a função criada, exportamos ela e importamos em App.js.

Sexto passo

Agora vamos testar nosso app! Então clicamos no botão, escolhemos uma imagem e o resultado da análise será mostrado no terminal em forma de objeto JSON:

Observe que a API por meio da AI analisa a imagem sobre várias categorias que envolvem nudez. Temo um resultado probabilístico, onde zero representa 0 por cento de chances da imagem pertencer a uma ou mais categorias e 1 representa 100 por cento de chances.

Então se quisermos filtrar imagem para qualquer tipo de nudez, utilizamos o resultado da propriedade none, que indica a probabilidade da imagem não representar nenhum tipo de nudez. Na imagem de exemplo, tivemos 99 por cento de chances de não pertencer a nenhuma categoria.

Para filtrar, criamos uma variável (aqui chamei de rateNudity) que receberá essa propriedade. Para transformar em porcentagem, eu multipliquei o resultado por 100. Em seguida, adicionamos ela como parâmetro em callback para utilizar esse valor durante o processo de seleção de imagem:

Feito isso, podemos chamar a função NSFWDetectorUpload em App.js e iniciar o nosso algoritmo simples de decisão:

Resumidamente, se o valor recebido em callback for maior ou igual a 50 (50%), considera-se que a imagem é adequada e portanto ela poderá ser exibida. Caso contrário, ela poderá ter conteúdo ofensivo. Mas isso é apenas um exemplo, caberá a você decidir qual ajuste será mais adequado.

Conclusão

O SightEngine fornece um meio de integração bastante simples e fácil de implementar, permitindo moderar não apenas imagens, como textos também. Com a abordagem deste artigo, é possível implementar a mesma lógica em praticamente tudo que utilize Javascript. Entretanto, trata-se de uma API com recursos limitados, com o limite de até 2000 análises por mês. Se o seu projeto demandar uma quanidade maior do que isso, será necessário partir para outras soluções ou assinar o serviço pago oferecido pela empresa.

Fonte: SightEngine.