{"draftJsState":{"blocks":[{"data":{"image":{"id":"63e53d743cd5d021845587a0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a930h"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"988ub"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":156,"offset":0}],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Курс SkillFactory Frontend-разработчик PRO. Получите перспективную творческую профессию. Изучите JavaScript и TypeScript. Выполните 13 проектов в портфолио.","type":"unstyled","key":"d94u0"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":6,"offset":42},{"key":3,"length":17,"offset":51}],"inlineStyleRanges":[],"text":"Чтобы начать работу, зарегистрируйтесь на OpenAI и сгенерируйте ключ.","type":"unstyled","key":"e9sv0"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":17,"offset":61}],"inlineStyleRanges":[],"text":"После этого можно настроить простой Nuxt-проект. Используйте следующую команду для создания стартового проекта и добавления пакета openai (в документации Nuxt рекомендуется использовать yarn, но можно следовать шагам npm или pnpm):","type":"unstyled","key":"5q7ru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx nuxi init openai.moderation\ncd openai.moderation\nyarn install\nyarn add openai\nyarn dev -o","type":"blockquote","key":"25rpj"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":21,"offset":57}],"inlineStyleRanges":[],"text":"Этот код должен привести к запуску стартового проекта на http://localhost:3000 (типичный вариант).","type":"unstyled","key":"bu6a7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь откройте проект в своей предпочтительной среде выполнения, и начнем!","type":"unstyled","key":"dck5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка ключа","type":"header-three","key":"4kh28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте файл .env в корне проекта, содержащий эту строку (замените ее на свой личный ключ):","type":"unstyled","key":"df1mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"OPENAI_API_KEY=ALWAYSKEEPSECRETSTOYOURSELF","type":"blockquote","key":"8u0p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее откройте файл nuxt.config.ts. Он должен выглядеть следующим образом:","type":"unstyled","key":"7q3g0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default defineNuxtConfig({\n runtimeConfig: {\n OPENAI_API_KEY: process.env.OPENAI_API_KEY,\n },\n})","type":"blockquote","key":"fse1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка API","type":"header-three","key":"9k0dq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для связи с конечной точкой OpenAI вам понадобится собственный сервер.","type":"unstyled","key":"91bbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В Nuxt добавить конечную точку API так же просто, как добавить файл в папку server/api.","type":"unstyled","key":"1vs48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому сначала создайте структуру этой папки и поместите в файл moderate.post.ts следующее:","type":"unstyled","key":"d7rp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default defineEventHandler(event => {\n const body = await readBody(event)\n return body?.message\n})","type":"blockquote","key":"87nio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код вернет все, что будет отправлено в конечную точку /api/moderate (Nuxt настроит маршрутизацию).","type":"unstyled","key":"77jgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент ввода","type":"header-three","key":"3frsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нужно создать небольшой компонент, который будет принимать вводимый текст и при отправке обращаться к установленной конечной точке для проверки ответа.","type":"unstyled","key":"fsh87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте компонент Moderate.vue в папке components в корне проекта.","type":"unstyled","key":"7pp6l"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":26,"offset":42}],"inlineStyleRanges":[],"text":"Начните с определения скриптов, используя нотацию настройки скриптов:","type":"unstyled","key":"aaecu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cdgft"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":9,"offset":198}],"inlineStyleRanges":[],"text":"Прежде всего настройте обработчик, который позаботится о вводе и результате, и определите обработчик для вызова установленной нами конечной точки, добавив ввод как свойство сообщения в теле (.value относится к мутабельной и реактивной ссылке).","type":"unstyled","key":"fh94j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь добавьте шаблон с:","type":"unstyled","key":"32f36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"небольшой формой, содержащей вход;","type":"unordered-list-item","key":"3l267"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"кнопкой submit (отправки), которая будет вызывать обработчик onSubmit;","type":"unordered-list-item","key":"44jhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"местом для отображения вывода конечной точки.","type":"unordered-list-item","key":"7bgee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Его можно оформить как угодно (детали оформления не являются предметом этого руководства). Просто ниже тега script вставьте следующее:","type":"unstyled","key":"c24ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"adpd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните этот файл и загрузите компонент в app.vue, заменив его содержимое на следующее:","type":"unstyled","key":"emc59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"djleb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь вы должны увидеть компонент, запущенный на локальном хосте. После вставки текста и нажатия кнопки submit, он возвратится конечной точкой и отобразится в компоненте как часть элемента списка.","type":"unstyled","key":"7386u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление ИИ","type":"header-three","key":"1eipt"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":13,"offset":71}],"inlineStyleRanges":[],"text":"Обновите файл moderate.post.ts, чтобы использовать возможности OpenAI. API-модерация — один из самых простых способов, поэтому стоит начать с него.","type":"unstyled","key":"6sdoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо того чтобы сразу возвращать body.message, настройте сначала клиент OpenAI, создав его экземпляр с помощью ключа. Затем запросите конечную точку с помощью содержимого сообщения. Это означает, что нужно также изменить обработчик на функцию async!","type":"unstyled","key":"26abu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл должен выглядеть следующим образом:","type":"unstyled","key":"1l1qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { Configuration, OpenAIApi } from 'openai';\n\n// Теперь это async-функция!\nexport default defineEventHandler(async (event) => {\n const body = await readBody(event)\n// Настройка конфигурации\n const configuration = new Configuration({\n apiKey: process.env.OPENAI_API_KEY,\n });\n// Создание экземпляра клиента OpenAI\n const openaiClient = new OpenAIApi(configuration);\n// Делаем вызов на конечную точку модерации\n const res = await openaiClient.createModeration({\n input: body?.message,\n });\n\n// Возврат результата \n return res.data\n\n})","type":"blockquote","key":"2m52s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все. Теперь вы можете проверить работу этого механизма, действуя очень агрессивно по отношению к полю ввода. В результате вы должны увидеть оценку того, что вводите, по различным категориям и уровням, аналогичную этому примеру:","type":"unstyled","key":"cftlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"id\": \"modr-XXXXX\",\n \"model\": \"text-moderation-001\",\n \"results\": [\n {\n \"categories\": {\n \"hate\": false,\n \"hate/threatening\": false,\n \"self-harm\": false,\n \"sexual\": false,\n \"sexual/minors\": false,\n \"violence\": false,\n \"violence/graphic\": false\n },\n \"category_scores\": {\n \"hate\": 0.18805529177188873,\n \"hate/threatening\": 0.0001250059431185946,\n \"self-harm\": 0.0003706029092427343,\n \"sexual\": 0.0008735615410842001,\n \"sexual/minors\": 0.0007470346172340214,\n \"violence\": 0.0041268812492489815,\n \"violence/graphic\": 0.00023186142789199948\n },\n \"flagged\": false\n }\n ]\n}","type":"blockquote","key":"17ff7"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":25,"offset":75}],"inlineStyleRanges":[],"text":"Один из интересных способов поэкспериментировать с OpenAI — использовать API генерации изображений.","type":"unstyled","key":"3k883"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Взяв за основу вышеизложенное, вы можете либо модифицировать существующий код, либо сделать интеграцию в предпочитаемый вами фреймворк.","type":"unstyled","key":"fkunb"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":18,"offset":159}],"inlineStyleRanges":[],"text":"Такие инструменты упрощают работу с пользовательским контентом. Однако имейте в виду, что это всего лишь пример, а не практическая реализация. Кроме того, как рекомендует OpenAI, всегда ориентируйтесь на визуальное восприятие. Правильным вариантом использования этого примера может быть упреждающая пометка материалов перед публикацией.","type":"unstyled","key":"167fh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разумное и эффективное применение ИИ-возможностей позволяет снизить нагрузку на человека, не устраняя полностью его вмешательства. У искусственного интеллекта, как и у человека, все еще имеются недостатки, однако он вполне годится для решения простых задач.","type":"unstyled","key":"2nhuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"1hqug"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":61,"offset":0}],"inlineStyleRanges":[],"text":"Как создать бота Discord с Node.js, Discord.js и OpenAI GPT-3","type":"unordered-list-item","key":"28lpa"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Автоматизация: друг или враг дизайнера?","type":"unordered-list-item","key":"86dgh"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":63,"offset":0}],"inlineStyleRanges":[],"text":"Как создать бота в стиле Alexa и Siri с помощью Python и OpenAI","type":"unordered-list-item","key":"7r4kj"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":8,"offset":14},{"key":15,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"e4j60"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":13,"offset":15},{"key":17,"length":33,"offset":30}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Joran Quinten: Automated Moderation Using OpenAI","type":"unstyled","key":"a3pkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"leloaouDHKhqYdAojlpj"}],"entityMap":{"11":{"data":{"href":"https://nuancesprog.ru/p/16647/","url":"https://nuancesprog.ru/p/16647/"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://nuancesprog.ru/p/13068/","url":"https://nuancesprog.ru/p/13068/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://nuancesprog.ru/p/16573/","url":"https://nuancesprog.ru/p/16573/"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://medium.com/@joranquinten","url":"https://medium.com/@joranquinten"},"mutability":"MUTABLE","type":"LINK"},"17":{"data":{"href":"https://betterprogramming.pub/automated-moderation-using-openai-e2276a06547a","url":"https://betterprogramming.pub/automated-moderation-using-openai-e2276a06547a"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/16865/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://aflink.ru/g/os57fawizi1470bcbdb40da0172cef16ec47cb44/?erid=LatgBV3Ep"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://beta.openai.com/overview","url":"https://beta.openai.com/overview"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://beta.openai.com/account/api-keys","url":"https://beta.openai.com/account/api-keys"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuxt.com/docs/getting-started/installation#new-project","url":"https://nuxt.com/docs/getting-started/installation#new-project"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"http://localhost:3000/","url":"http://localhost:3000/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vuejs.org/api/sfc-script-setup.html#script-setup","url":"https://vuejs.org/api/sfc-script-setup.html#script-setup"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://vuejs.org/api/reactivity-core.html#ref","url":"https://vuejs.org/api/reactivity-core.html#ref"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://beta.openai.com/docs/guides/moderation","url":"https://beta.openai.com/docs/guides/moderation"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://beta.openai.com/docs/guides/images","url":"https://beta.openai.com/docs/guides/images"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://beta.openai.com/docs/guides/safety-best-practices/human-in-the-loop-hitl","url":"https://beta.openai.com/docs/guides/safety-best-practices/human-in-the-loop-hitl"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}