UA RU
logo
Machine Learning      25/04/2023

Создайте собственный Copilot или DALLE-2: как интегрировать GPT в ваши JS-проекты

Валерія Мурадян BLOG

Software Developer у FullCity Consulting

Чтобы обучить достойную модель машинного обучения, требуются годы.

Курс QA Manual (Тестування ПЗ мануальне) від Powercode academy.
Навчіться знаходити помилки та контролювати якість сайтів та додатків.
Записатися на курс

Компьютеры не так умны, как мы думаем, поэтому они не торопятся, учась находить разницу между кошками и собаками.

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

Модель, на которой я хотела сегодня остановиться, — это GPT. Некоторые даже называют ее гуманоидом в процессе создания, настолько она умна. Она принимает подсказку и выдает вам реальный текст в качестве вывода.

Модель может создать что угодно, от твита до целого стихотворения или короткого рассказа. Недавно мне было интересно интегрировать ее в один из моих проектов Next.js, поэтому я узнала несколько изящных приемов, которыми хочу поделиться сегодня.

Курс QA Manual (Тестування ПЗ мануальне) від Powercode academy.
Навчіться знаходити помилки та контролювати якість сайтів та додатків.
Записатися на курс

💡 Подсказка: обратите внимание, что это пошаговое руководство не подходит для начинающих. Я предполагаю, что вы уже знаете JavaScript и используете в своем проекте Next.js или Node.js. Если вам нужно пошаговое руководство, я оставлю ссылку в конце статьи.

Все начинается с игровой площадки

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

Как новый пользователь, вы получите кредит $18, который будет действителен в течение нескольких месяцев, чтобы вы могли свободно начать экспериментировать.

Напишите свою первую подсказку

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

Так что отправляйтесь на игровую площадку и попросите ее вам что-нибудь написать. Все равно что. Просто дайте побольше деталей.

Англійська для IT від Englishdom.
В межах курсу можна освоїти ключові ІТ-теми та почати без проблем говорити з іноземними колегами.
Дійзнайтеся більше

Несколько идей, чтобы начать:

  • Напиши мне песню о…
  • Сгенерируй пять идей для Twitter о…
  • Напиши мне несколько прикольных названий фильмов…

💡 Совет: будьте как можно более конкретными. Если вы сравните общие подсказки, такие как «Напиши мне…», с более конкретными («Сгенерируй 10 уникальных идей о…»), вы быстро заметите разницу!

Цепочка подсказок

Еще один хитрый трюк, который вы можете использовать — это цепочка подсказок.

Скопируйте вкладку с игровой площадкой и используйте полученный результат во втором окне.

Например:

  1. попросите модель в первом окне сгенерировать идею блога;
  2. Основи Web дизайну від Hillel IT School.
    Цей онлайн-курс з основ веб-дизайну дозволить вам опанувати мистецтво створення ефективних та привабливих інтерфейсів для вебсайтів і застосунків. Ви оволодієте ключовими принципами UX/UI дизайну, створюватимете дизайн-макети та прототипи, розроблятимете адаптивні інтерфейси для різних пристроїв, готуючись до професійної кар'єри в галузі веб-дизайну.
    Дізнатися більше
  3. вставьте эту идею блога в следующее окно и попросите модель написать вам краткое изложение;
  4. в третьем окне вы можете вставить краткое резюме и попросить модель написать целый пост.

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

Но как это работает?

Автор иллюстрации: Jay Alammar

Автор иллюстрации: Jay Alammar

Я не собираюсь вдаваться в 101 подробность об ML, но вкратце:

  • GPT состоит из множества «параметров» — каждый параметр представляет собой специализированное число. Когда вы вводите предложение в GPT, оно объединяет это предложение с параметрами, чтобы его закончить.
  • В GPT есть 175 миллиардов таких параметров и это составляет 800 ГБПо состоянию на конец 2022 года.
  • GPT не понимает слов. Все это просто число для модели, включая вашу подсказку.

Упрощенная версия происходящего под капотом выглядит примерно так:

output = input * parameter

Онлайн-курс повного дня Front-end developer від Mate academy.
Цей курс ідеальний для новачків - 85% наших студентів не мали попереднього досвіду. Гарантованне працевлаштування: 3 500 випускників вже отримало роботу. .
Отримати знижку на курс
Автор иллюстрации: Jay Alammar

Автор иллюстрации: Jay Alammar

Вам нужен всего один npm-пакет

Есть несколько способов интеграции моделей OpenAI, но самый простой — использовать npm-пакет. Это пакет NodeJS, и вы можете установить его, как обычно, в свои проекты JavaScript, используя npm или yarn:

$ npm install openai

После того, как вы его установили, нужно создать файл .env, в котором будет храниться ваш ключ Open AI, и добавить новый файл в серверную часть, который будет вызывать API.

Здесь вы можете получить ключ API. Получив его, добавьте новую строку в файл .env:

OPENAI_API_KEY="your-key-here"

💡 Подсказка: если вы часто тестируете свое приложение, у вас, вероятно, скоро закончится кредит. Не забудьте проверить остаток здесь.

Теперь единственный кусок кода на бэкенде, который вам нужен, это:

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

const basePromptPrefix = "Write me a tweet about...";
const generateAction = async (req, res) => {
  // show your prompt
  console.log(`API: ${basePromptPrefix}${req.body.userInput}`)

  const baseCompletion = await openai.createCompletion({
    model: 'text-davinci-003',
    prompt: `${basePromptPrefix}${req.body.userInput}`,
    temperature: 0.7,
    max_tokens: 250,
  });
  
  const basePromptOutput = baseCompletion.data.choices.pop();

  res.status(200).json({ output: basePromptOutput });
};

export default generateAction;

Вот что мы делаем:

  • Импортируем конфигурации для настройки соединения и OpenAIApi для совершения вызова.
  • Онлайн-курс "Системний геймдизайнер" від Skvot.
    Створювати ігрові механіки, розробляти складні левели, формувати ігровий досвід, який занурює в сюжет і не відпускає, — вчимося за 4 місяці з нуля, на досвіді геймдизайнера з 8-річним досвідом. .
    Про курс
  • Установливаем соединение с Open AI, указав наш API Key.
  • Устанавливаем базовую подсказку — это может быть все, что указывает на то, что вы ожидаете получить от этой модели. Таким образом вашему пользователю просто нужно ввести остальное, чтобы получить правильный результат.
  • Принимаем ввод пользователя и выводим его на консоль вместе с базовой подсказкой.
  • Вызываем Open AI и указываем модель (text-davinci-003) вместе с несколькими наиболее важными параметрами, такими как температура (более высокое значение температуры означает большую случайность) и длина вывода (всего 250 — это около 1000 символов).
  • Возвращаем результат в формате JSON.

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

Несколько креативных идей для проекта

  • Создавать посты для Twitter из больших кусков текста.
  • Создавать воображаемых друзей или бота, разговаривающего как Илон Маск.
  • Создавать выжимки из статей.
  • Онлайн-курс "Digital Marketing" від Laba.
    Розширте пул навичок у роботі з аудиторією. Навчіться запускати рекламні кампанії без зайвих витрат бюджету з сучасними інструментами діджитал-маркетингу, включаючи AI. .
    Детальніше про курс
  • Генерировать заголовки для статей в блоге.

Надеюсь, эта статья вдохновила вас на создание чего-то потрясающего!

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

Это текст из личного блога, опубликованный с разрешения автора.

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Онлайн-курс “Фінансовий аналіз. Junior+” від Laba.
Навчіться інтерпретувати, бачити тенденції та закономірності серед великого масиву фінансових даних та робити точні прогнози. .
Детальніше про курс

Этот материал – не редакционный, это – личное мнение его автора. Редакция может не разделять это мнение.

Топ-5 самых популярных блогеров августа

Всего просмотровВсего просмотров
137
#1
Всего просмотровВсего просмотров
137
Контент-маркетолог в компанії Nektony
Всего просмотровВсего просмотров
96
#2
Всего просмотровВсего просмотров
96
Засновниця сервісу турботи про ментальне здоров’я Mozhna.space.
Всего просмотровВсего просмотров
82
#3
Всего просмотровВсего просмотров
82
Всего просмотровВсего просмотров
8
#4
Всего просмотровВсего просмотров
8
Рейтинг блогеров
Курс Java developer від Mate academy.
Вивчайте Java та отримайте можливість працювати майже в будь-якій галузі: її використовують від фінансової сфери до аграрної. Працевлаштування гарантуємо!
Отримати знижку на курс

Самые обсуждаемые статьи

Топ текстов

Ваша жалоба отправлена модератору

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: