Настраиваем автоматизированную модерацию с помощью OpenAI

Чтобы начать работу, зарегистрируйтесь на OpenAI и сгенерируйте ключ.

После этого можно настроить простой Nuxt-проект. Используйте следующую команду для создания стартового проекта и добавления пакета openai (в документации Nuxt рекомендуется использовать yarn, но можно следовать шагам npm или pnpm):

npx nuxi init openai.moderation
cd openai.moderation
yarn install
yarn add openai
yarn dev -o

Этот код должен привести к запуску стартового проекта на http://localhost:3000 (типичный вариант).

Теперь откройте проект в своей предпочтительной среде выполнения, и начнем!

Настройка ключа

Создайте файл .env в корне проекта, содержащий эту строку (замените ее на свой личный ключ):

OPENAI_API_KEY=ALWAYSKEEPSECRETSTOYOURSELF

Далее откройте файл nuxt.config.ts. Он должен выглядеть следующим образом:

export default defineNuxtConfig({
    runtimeConfig: {
        OPENAI_API_KEY: process.env.OPENAI_API_KEY,
    },
})

Настройка API

Для связи с конечной точкой OpenAI вам понадобится собственный сервер.

В Nuxt добавить конечную точку API так же просто, как добавить файл в папку server/api.

Поэтому сначала создайте структуру этой папки и поместите в файл moderate.post.ts следующее:

export default defineEventHandler(event => {
    const body = await readBody(event)
    return body?.message
})

Этот код вернет все, что будет отправлено в конечную точку /api/moderate (Nuxt настроит маршрутизацию).

Компонент ввода

Теперь нужно создать небольшой компонент, который будет принимать вводимый текст и при отправке обращаться к установленной конечной точке для проверки ответа.

Создайте компонент Moderate.vue в папке components в корне проекта.

Начните с определения скриптов, используя нотацию настройки скриптов:

<script setup lang="ts">
const input = ref("");
const result = ref([]);

const onSubmit = async () => {
  const response = await $fetch("/api/moderate", {
    method: "post",
    body: { message: input.value },
  });
  result.value.unshift(response);
  input.value = "";
};
</script>

Прежде всего настройте обработчик, который позаботится о вводе и результате, и определите обработчик для вызова установленной нами конечной точки, добавив ввод как свойство сообщения в теле (.value относится к мутабельной и реактивной ссылке).

Теперь добавьте шаблон с:

• небольшой формой, содержащей вход;
• кнопкой submit (отправки), которая будет вызывать обработчик onSubmit;
• местом для отображения вывода конечной точки.

Его можно оформить как угодно (детали оформления не являются предметом этого руководства). Просто ниже тега script вставьте следующее:

<template>
  <div>
    <div class="input">
      <input type="text" v-model="input" />
      <button type="submit" @click="onSubmit">Validate moderation</button>
    </div>
    <div class="output">
      <ul>
        <li :key="i.id" v-for="i in result">
          {{ i.results }}
        </li>
      </ul>
    </div>
  </div>
</template>

Сохраните этот файл и загрузите компонент в app.vue, заменив его содержимое на следующее:

<template>
  <div>
    <Moderate />
  </div>
</template>

Теперь вы должны увидеть компонент, запущенный на локальном хосте. После вставки текста и нажатия кнопки submit, он возвратится конечной точкой и отобразится в компоненте как часть элемента списка.

Добавление ИИ

Обновите файл moderate.post.ts, чтобы использовать возможности OpenAI. API-модерация  —  один из самых простых способов, поэтому стоит начать с него.

Вместо того чтобы сразу возвращать body.message, настройте сначала клиент OpenAI, создав его экземпляр с помощью ключа. Затем запросите конечную точку с помощью содержимого сообщения. Это означает, что нужно также изменить обработчик на функцию async!

Файл должен выглядеть следующим образом:

import { Configuration, OpenAIApi } from 'openai';

// Теперь это async-функция!
export default defineEventHandler(async (event) => {
    const body = await readBody(event)
// Настройка конфигурации
    const configuration = new Configuration({
        apiKey: process.env.OPENAI_API_KEY,
    });
// Создание экземпляра клиента OpenAI
    const openaiClient = new OpenAIApi(configuration);
// Делаем вызов на конечную точку модерации
    const res = await openaiClient.createModeration({
        input: body?.message,
      });

// Возврат результата 
    return res.data

})

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

{
  "id": "modr-XXXXX",
  "model": "text-moderation-001",
  "results": [
    {
      "categories": {
        "hate": false,
        "hate/threatening": false,
        "self-harm": false,
        "sexual": false,
        "sexual/minors": false,
        "violence": false,
        "violence/graphic": false
      },
      "category_scores": {
        "hate": 0.18805529177188873,
        "hate/threatening": 0.0001250059431185946,
        "self-harm": 0.0003706029092427343,
        "sexual": 0.0008735615410842001,
        "sexual/minors": 0.0007470346172340214,
        "violence": 0.0041268812492489815,
        "violence/graphic": 0.00023186142789199948
      },
      "flagged": false
    }
  ]
}

Один из интересных способов поэкспериментировать с OpenAI  —  использовать API генерации изображений.

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

Такие инструменты упрощают работу с пользовательским контентом. Однако имейте в виду, что это всего лишь пример, а не практическая реализация. Кроме того, как рекомендует OpenAI, всегда ориентируйтесь на визуальное восприятие. Правильным вариантом использования этого примера может быть упреждающая пометка материалов перед публикацией.

Разумное и эффективное применение ИИ-возможностей позволяет снизить нагрузку на человека, не устраняя полностью его вмешательства. У искусственного интеллекта, как и у человека, все еще имеются недостатки, однако он вполне годится для решения простых задач.

Читайте также:

• Как создать бота Discord с Node.js, Discord.js и OpenAI GPT-3
• Автоматизация: друг или враг дизайнера?
• Как создать бота в стиле Alexa и Siri с помощью Python и OpenAI

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Joran Quinten: Automated Moderation Using OpenAI