Створіть власний Copilot або DALLE-2: як інтегрувати GPT у ваші JS-проєкти

Щоб навчити гідну модель машинного навчання, потрібні роки.

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

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

Модель, на якій я хотіла сьогодні зупинитися, це GPT. Деякі навіть називають її гуманоїдом у процесі створення — настільки вона розумна. Вона приймає підказку і видає вам текст як висновок.

Модель може створити будь-що: від твіту до цілого вірша чи короткого оповідання. Нещодавно мені було цікаво інтегрувати її в один із моїх проєктів Next.js, тому я дізналася про кілька витончених прийомів, якими хочу поділитися сьогодні.

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

Все починається з ігрового майданчика

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

Як новий користувач, ви отримаєте кредит $18, який буде дійсним протягом декількох місяців, щоб ви могли вільно почати експериментувати.

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

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

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

Декілька ідей, щоб почати:

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

💡 Порада: будьте якомога конкретнішими. Якщо ви порівняєте загальні підказки, такі як «Напиши мені…», з більш конкретними («Згенеруй 10 унікальних ідей про…»), ви швидко помітите різницю!

Ланцюжок підказок

Ще один хитрий трюк, який ви можете використовувати — це ланцюжок підказок.

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

Наприклад:

1. попросіть модель у першому вікні згенерувати ідею блогу;
Онлайн-курс "Android Developer" від robot_dreams.
Курс для всіх, хто хоче навчитися розробляти застосунки для Android з нуля, створити власний пет-проєкт для портфоліо та здобути професію, актуальну наступні 15–20 років.
Програма курсу і реєстрація
2. вставте цю ідею блогу у наступне вікно та попросіть модель написати вам короткий виклад;
3. у третьому вікні ви можете вставити коротке резюме та попросити модель написати цілий пост.

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

Але як це працює?

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

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

• GPT складається з безлічі «параметрів» — кожен параметр є спеціалізованим числом. Коли ви вводите пропозицію в GPT, вона об’єднує цю пропозицію з параметрами, щоб її закінчити.
• У GPT є 175 мільярдів таких параметрів і це становить 800 ГБСтаном на кінець 2022 року.
• GPT не розуміє слів. Все це просто число для моделі, включаючи вашу підказку.

Спрощена версія того, що відбувається під капотом, виглядає приблизно так:

output = input * parameter

Автор ілюстрації: 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 для здійснення виклику.
Онлайн-курс "Проджект-менеджер в ІТ" від Laba.
Навчіться запускати, контролювати й успішно реалізовувати ІТ-проєкти. Пройти весь шлях проєктного управління на реальному кейсі вам допоможе PMD із 19-річним досвідом в ІТ.
Детальніше про курс
• Встановлюємо з’єднання з Open AI, вказавши наш API Key.
• Встановлюємо базову підказку — це може бути все, що вказує на те, що ви очікуєте отримати від цієї моделі. Таким чином вашому користувачу просто потрібно ввести інше, щоб отримати правильний результат.
• Приймаємо введення користувача та виводимо його на консоль разом із базовою підказкою.
• Викликаємо Open AI і вказуємо модель (text-davinci-003) разом з декількома найважливішими параметрами, такими як температура (вище значення температури означає більшу випадковість) та довжина виведення (всього 250 — це близько 1000 символів).
• Повертаємо результат у форматі JSON.

Це фрагмент коду з апки Next.js, тому на зовнішньому інтерфейсі я можу просто викликати свою нову кінцеву точку та передати їй запрошення користувача як параметр. Потім я можу зберегти результат у змінній та робити з ним все, що захочу. Це було не складно, правда?

Декілька креативних ідей для проєкту

• Створювати пости для Twitter із великих шматків тексту.
• Створювати уявних друзів або бота, який розмовляє як Ілон Маск.
• Створювати короткі резюме зі статей.
Онлайн-курс "Чистий код та патерни проєктування" від robot_dreams.
Прискорюйте й спрощуйте процес розробки.Під менторством лектора з 15-річним досвідом ви навчитеся застосовувати 20+ шаблонів, опануєте рефакторинг і принципи чистого коду.
Детальніше
• Генерувати заголовки для статей у блозі.

Сподіваюся, ця стаття надихнула вас на створення чогось приголомшливого!

Якщо ви новачок і шукаєте більше покрокового посібника, я рекомендую ознайомитися з цим чудовим безплатним курсом від Buildspace. Успіхів!

Це текст з  особистого блогу, опублікований з дозволу авторки.