Нельзя отрицать, что Интернет сблизил миллионы людей, но он также стал рассадником токсичного и оскорбительного поведения. Эта статья проведет вас через создание приложения React, которое пытается предотвратить отправку комментариев с токсичным намерением с помощью Perspective API.

Что такое API перспективы?

Perspective API - это сервис, использующий машинное обучение для определения цели комментария или другого короткого фрагмента текста. Его можно использовать в любом количестве вариантов использования, чтобы помочь бороться с токсичностью, злоупотреблениями и иным плохим поведением. Он поддерживает ряд категорий и сообщает о вероятности соответствия намерений пользователя этим критериям.

Что мы собираемся построить

Чтобы изучить, как работает Perspective API, мы собираемся создать простую форму комментариев с помощью React. Когда пользователь отправляет комментарий, он сначала проверяет намерение с помощью API перспективы, прежде чем разрешить его отправку.

Приложение позволит вам указать порог и категории, для которых вы хотите проверить намерение - вы можете быть настолько строгими, насколько захотите!

Мы собираемся использовать несколько инструментов, которые помогут нам построить наш проект:

Вы можете посмотреть демонстрацию готового проекта, похожего на то, что мы собираемся построить. Давайте начнем!

Требования:

  • Некоторое базовое знакомство с React
  • Узел и NPM установлены
  • Ключ API для API перспективы через Google Cloud Platform

Я не буду подробно рассказывать, как сгенерировать ключ API через GCP, поскольку это не тема для данной статьи, однако для этого есть множество других онлайн-ресурсов. Например, через Google, на шаге 4 API, который вы хотите включить, называется Перспектива.

Часть 1: Загрузка приложения

Во-первых, давайте запустим наше приложение, создав новый проект с creat-react-app. Если вы раньше не использовали create-react-app, вы можете установить его, запустив:

npm install -g create-react-app

В противном случае вы можете просто инициализировать новый проект, перейти в каталог и добавить необходимые нам зависимости:

create-react-app comment-form-perspective
cd comment-form-perspective
yarn add axios

Затем вы можете запустить среду разработки, запустив yarn start.

Часть 2: Создание формы

Теперь, когда наше приложение запущено и работает, мы можем приступить к созданию нашей формы. Давайте начнем с удаления всех файлов, которые в данный момент находятся в каталоге src (но оставим папку src!).

После очистки этой папки создайте index.js и style.css внутри каталога src. Затем создайте новый каталог внутри src с именем components и поместите в него файлы App.js и CommentForm.js. Когда все это будет завершено, у вас должна получиться следующая структура папок:

.
└── src
    ├── index.js
    ├── style.css
    └── components
        ├── App.js
        └── CommentForm.js

Углубившись в src/components/CommentForm.js, мы создадим фактическую форму комментария, в которую пользователь будет вводить текст. Форма будет:

  1. Используйте ловушку useState, чтобы удерживать наш комментарий в состоянии и дать нам возможность обновить его значение.
  2. Содержат form, который будет использовать функцию обратного вызова, предоставленную через prop, чтобы отправить наш комментарий родителю, где мы позже будем его использовать.
  3. Содержат textarea, который будет контролируемым вводом для нашего состояния комментария
  4. Содержите button для отправки формы

Теперь, когда наша форма построена, давайте перейдем к src/components/App.js, где мы хотим:

  1. Визуализируйте только что построенный CommentForm компонент.
  2. Обработайте отправку формы и console.log наш комментарий
  3. Создайте заполнитель, в котором мы будем выполнять нашу проверку токсичности с помощью перспективы позже в руководстве.

Отлично, теперь давайте фактически инициализируем и отрисовываем наше приложение на странице с помощью файла src/index.js.

Это завершает функциональность самой формы без проверки API перспективы, но прежде чем мы продолжим, давайте сделаем все немного лучше, добавив немного CSS в файл src/style.css.

Вот и все! На этом первая часть завершена. На этом этапе у вас должна быть форма, похожая на приведенную ниже. Когда вы нажимаете кнопку «Отправить», вы видите значение своего комментария в консоли!

Часть 3. Проверка намерений пользователя

Теперь у нас есть форма, которая отправляет комментарий родительскому компоненту. Фактически мы можем использовать Perspective API, чтобы попытаться проверить намерение пользователя. Итак, давайте начнем с изменения файла src/components/App.js, чтобы он действительно выполнял этот запрос. Нам потребуется:

  • Импортируйте библиотеку axios, чтобы сделать http-запрос
  • Сделайте POST запрос к Perspective API с комментарием в качестве полезной нагрузки
  • Используйте наш ключ API (замените YOUR_API_KEY в строке 9 ниже)
  • Укажите любое намерение, которое мы хотим проверить.

Итак, в приведенном выше фрагменте мы используем axios, чтобы сделать POST запрос к Perspective API. В этом запросе мы передаем comment, а также набор requestedAttributes. Это requestedAttributes намерения, которые мы хотим проверить. Доступно еще несколько, чем я определил, так что вы можете поиграть с разными комбинациями.

Если вы посмотрите ответ, который мы console.log, вы заметите, что для каждого из запрошенных нами намерений мы получаем следующее:

{  
   "TOXICITY":{  
      "spanScores":[  
         {  
            "begin":0,
            "end":14,
            "score":{  
               "value":0.018322915,
               "type":"PROBABILITY"
            }
         }
      ],
      "summaryScore":{  
         "value":0.018322915,
         "type":"PROBABILITY"
      }
   }
}

Получив этот ответ, мы можем сопоставить вероятности запрошенных нами намерений и сравнить их с порогом, который мы считаем подходящим. Если вероятность ниже этого порога, вы можете сохранить комментарий, но это не так, вы можете оставить отзыв пользователю, что его следует скорректировать!

Итак, теперь, когда запрос к Перспективе завершен, мы проходим каждое из запрошенных намерений, и если какое-либо из них превышает вероятность 0.75, мы помечаем комментарий как недопустимый. Вы можете изменить этот порог на любое значение!

В then части функции вы можете добиться сколь угодно умных результатов с результатами. Вы можете установить индивидуальные пороговые значения для каждой категории, отправить эти данные на сервер, возможности безграничны!

Резюме

Это довольно надуманный пример, поскольку он просто регистрирует, было ли намерение действительным или нет, но эту концепцию можно использовать для любого количества вариантов использования, от проверки интерфейса до расширения возможностей инструментов модерации.

Вы также заметите, что вероятность намерения некоторых запросов может не соответствовать тому, что вы ожидали. Помните, что он использует машинное обучение, поэтому со временем он станет лучше!

Если у вас есть какой-либо сайт, который позволяет пользователям комментировать и борется с каким-то токсичным поведением, вы можете подумать о реализации чего-то подобного!

Вы снова видите рабочую демонстрацию этого здесь.