В моем руководстве Введение в API OpenAI в JavaScript я рассказал вам, как интегрировать API OpenAI в проект Node.js для создания базовой записи в блоге. Сегодня мы повысим уровень и добавим еще больше крутых функций! 🎉

Мы собираемся попросить OpenAI API сгенерировать несколько идей для постов в блоге на основе темы, а затем использовать эти идеи для автоматического создания контента для каждого поста. И подождите… мы даже создадим оптимизированное для SEO описание и поисковую фразу для Unsplash API, чтобы получить избранное изображение для каждой идеи публикации. 🔥🔥🔥

Давайте начнем!

Оглавление

Предпосылки

Прежде чем мы начнем, убедитесь, что у вас есть:

  • Node.js настроен на вашем компьютере.
  • Хорошее понимание JavaScript.
  • Знакомство с предыдущими руководствами по Введению в OpenAI API и Unsplash API
  • Предыдущий код — либо следуйте предыдущим урокам, либо возьмите его из ветки Intro на моей странице Github.

В этом уроке я расскажу:

  • Как сгенерировать кучу идей для постов в блоге с названиями, описаниями и функциями фразы для поиска изображений с помощью OpenAI API на профессиональном уровне!
  • Как автоматически искать и сохранять избранные изображения на основе сгенерированных нами идей с помощью API Unsplash.
  • И последнее, но не менее важное: я покажу вам, как автоматически генерировать и сохранять контент для каждого поста в блоге.
  • Полный код руководства можно найти на GitHub.

Используйте OpenAI для генерации идей для постов

Для начала в файле index.js из последнего урока переименуйте функцию generatePrompt в createOpenAiPrompt и добавьте дополнительный параметр numberOfIdeas и установите значение по умолчанию равным 0. Затем мы настроим функцию, чтобы включить if statement. Таким образом, у нас может быть выбор: создать запрос на запрос либо для идей, либо для контента публикации в блоге.

// index.js

// Function that returns the OpenAI prompt based on the specified parameters
const createOpenAiPrompt = (numberOfIdeas = 0, topic) => {
    if(numberOfIdeas > 0 ) {
        // Generate a list of unique blog post ideas about the topic
        return `Generate a list of ${numberOfIdeas} unique blog post ideas about ${topic} 
                in a double-quoted JSON array format, including 'title', 'unsplash_phrase', 'description'.
                Each idea should include a short, SEO-friendly description,
                a unique Unsplash keyword phrase that represents a real-world object with a clear visual.
                `
    } else {
        // Write a blog post about the topic
        return `Write an blog post about "${topic}", it should in HTML format, include 5 unique points, using informative tone.`
    }
};

Давайте попросим OpenAI придумать 5 свежих идей для постов, используя «NodeJs» в качестве темы. Мы внесем быстрое изменение в код, добавив «5» для количества идей, например: openAI.generateText(createOpenAiPrompt(5,topic), model, 800).

// index.js

const topic = 'NodeJs';

// Call generateText method from openAI.js class
await openAI.generateText(createOpenAiPrompt(5, topic), model, 800)
  .then((ideasData) => {
    // Log the generated ideas in the console
    console.log(ideasData);
  })
  .catch((error) => {
    console.error(error);
  });

Запустите index.js. Сладкий! Мы только что создали список идей для постов в формате JSON. Каждый объект идеи имеет свои собственные поля title, unsplash_phrase и description, все они основаны на OpenAI. Мы также проверили результаты, записав их в консоль.

// blog post ideas generated by openai about 'NodeJs' in JSON array format

[
  {
    title: 'Understanding the Basics of Node.js',
    unsplash_phrase: 'Computer Coding Terminal',
    description: 'Node.js is a popular open-source, cross-platform JavaScript runtime environment. This blog post will provide a basic introduction to Node.js, outlining its features and benefits, and some of the most common uses of Node.js.'
  },
  {
    title: 'Creating a Node.js Web Application',
    unsplash_phrase: 'Laptop with Code',
    description: 'Learn how to create a web application using Node.js, including how to create a basic Node.js application structure, configure the Node.js environment, use the Express.js web development framework, and debug and deploy a Node.js web application.'
  },
  {
    title: 'How To Set Up a Node.js Development Environment',
    unsplash_phrase: 'Coding on Computer',
    description: 'This blog post will provide a step-by-step guide to setting up a Node.js development environment, with an overview of the different tools and technologies available, and advice on the best practices for getting started with Node.js development.'
  },
  {
    title: 'Node.js Best Practices For Optimized Code',
    unsplash_phrase: 'Programming Monitor',
    description: 'Learn how to write better Node.js code using best practices. This blog post will cover the basics of writing optimized Node.js code, from setting proper environment variables and using JavaScript linters to taking advantage of asynchronous programming and more.'
  },
  {
    title: 'How To Debug Node.js Applications',
    unsplash_phrase: 'Programming Keyboard',
    description: 'Learn how to properly debug your Node.js applications. This blog post will provide an overview of the different tools available for debugging Node.js applications, as well as some tips and techniques for troubleshooting Node.js code.'
  }
]

Используйте Unsplash для поиска и сохранения изображения публикации

Хорошо, давайте улучшим наш Unsplash.js из предыдущего руководства. Мы сделаем его более динамичным за счет автоматического поиска и сохранения изображений постов на основе массива идей JSON, сгенерированного из OpenAI.

Для начала мы создадим асинхронную функцию с именем generatePost в index.js. Эта функция генерирует массив идей для постов в формате JSON, затем перебирает каждую идею и получает соответствующее изображение из API Unsplash, используя unsplash_phrase в качестве поискового запроса.

// index.js

// Async function to generate post and retrieve images
async function generatePost() {
    // Get ideas from OpenAI
    const ideas = await openAI.generateText(createOpenAiPrompt(2, topic), model, 800)
    // Parse ideas into an array
    const postIdeasArray = JSON.parse(ideas);

    // Loop through each idea and retrieve a related photo
    postIdeasArray.forEach(async (idea) => {
        await unsplash.getPhoto('file', idea);
    })
}

Затем перейдите к Unsplash.js.

// Unsplash.js


import { createApi } from 'unsplash-js';
import logger from '../utils/logger.js';
import fetch from 'node-fetch';
import fs from 'fs';
import path from 'path';


export class Unsplash {
  constructor(accessKey) {
    // Create an instance of the Unsplash API using the provided access key
    this.unsplash = createApi({ accessKey, fetch });
  }

  async getPhoto(type, idea, page = 1, per_page = 8, orientation = 'landscape' ) {
    const title = idea.title;
    const query = idea.unsplash_phrase;
    try {
      // Log that a request is being sent to the Unsplash API
      logger.info(`Sending request to Unsplash API with search phrase: ${query}`);

       // Send a request to the Unsplash API to search for photos
      const response  = await this.unsplash.search.getPhotos({
        query,
        page,
        per_page,
        orientation,
      });

      // Select a random photo from the response
      const aRandomPhoto = response.response.results[Math.floor(Math.random() * 8)];
      // Get the regular size photo url
      const photoUrl = aRandomPhoto.urls.regular;
      // Fetch the photo
      const photo = await fetch(photoUrl);
      // Get the photo buffer
      const photoBuffer = await photo.arrayBuffer();
      // Create caption for the photo - in Unsplash attribution style
      const caption = `
        <a style="text-decoration: none; cursor: default; pointer-events: none; color: inherit;">
          Photo by
        </a>
        <a href="${aRandomPhoto.user.links.html}" rel="noopener ugc nofollow" target="_blank">
          ${aRandomPhoto.user.name}
        </a>
        on
        <a href="https://unsplash.com" rel="noopener ugc nofollow" target="_blank">
          Unsplash
        </a>
      `;

      // Log that a response has been received
      logger.info(`Received response from Unsplash API`);

      // Check the value of the "type" parameter and execute the corresponding code block
      switch (type) {
        case 'buffer':
          // Convert the photo buffer to Uint8Array
          const data = new Uint8Array(photoBuffer);
          console.log(`${query}.jpg buffer ready`);
          // Return an object containing the photo's buffer and attributes
          return {
            attributes: {
              caption: caption,
              title: query.toLowerCase(),
              alt_text: `an image of ${query.toLowerCase()}`,
            },
            buffer: data
          };
        case 'file':
          // Convert the photo buffer to a Buffer
          const image = Buffer.from(photoBuffer);
           // Create a file path for the photo
          const filePath = `src/post/${title}/${query}.jpg`
          const dir = path.dirname(filePath);

          // Dynamically create file directory and save image, then log in console
          fs.mkdir(dir, { recursive: true }, (err) => {
            if (err) {
              throw err;
            }
            fs.promises.writeFile(filePath, image);
          });
          break;
        default:
          console.log(`Invalid type: ${type}`);
          return null;
      }
    } catch (error) {
      console.log(error);
      return null;
    }
  }

}

Имейте в виду, что функция generatePost() теперь передает объект idea в качестве параметра методу getPhoto, а не просто строку запроса, как в предыдущем руководстве. Нам потребуется обновить метод getPhoto в Unsplash.js, чтобы отразить это изменение.

Из объекта idea создаются две новые переменные:

  • title будет использоваться для создания почтового каталога
  • query содержит поисковую фразу, как и раньше.

Кроме того, была импортирована библиотека Path из Node.js для создания нужного пути к файлу в виде строки. Затем используется метод fs.mkdir для динамического создания необходимых каталогов на основе файла title.

// Unsplash.js

import path from "path";

const title = postIdea.title;
const query = postIdea.unsplash_phrase;

const filePath = `src/post/${title}/${query}.jpg`;
const dir = path.dirname(filePath);

// Dynamically create file directory and save image, then log in console
fs.mkdir(dir, { recursive: true }, (err) => {
  if (err) {
    throw err;
  }
  fs.promises.writeFile(filePath, image);
});

Теперь запустите index.js. И вуаля! Создаются 5 новых каталогов с соответствующими именами постов, каждый из которых содержит сохраненное избранное изображение поста.

Используйте OpenAI для создания контента публикации

Итак, мы отсортировали идеи для постов и изображения. Теперь пришло время связать все вместе. Давайте добавим способность генерировать контент в нашу функцию generatePost и подведем итоги!

Мы добавим приведенный ниже код в функцию generatePost после строки await unsplash.getPhoto('file', idea);. Он обратится к API OpenAI, чтобы получить содержимое публикации на основе заголовка и сохранить публикацию в файле .txt.

Метод createOpenAiPrompt предоставит подсказку запроса для содержимого публикации, а необязательная переменная numberOfIdeas имеет значение по умолчанию 0.

// index.js

await openAI.generateText(createOpenAiPrompt(idea.title), model, 800)
.then(text => {
    // Write the content to a file in the respective post directory
    const filePath = `src/post/${idea.title}/${idea.title}.txt`
    fs.promises.writeFile(filePath, text);
})

Поэтому после вставки кода мы запустим index.js еще раз. Это создаст 5 уникальных постов в блоге, каждый со своим заголовком, изображением и отдельным файлом title.txt с разметкой HTML, готовыми для загрузки непосредственно в WordPress.

Стоит отметить, что эти сгенерированные сообщения в блоге и описания, созданные OpenAI, пригодятся для будущих руководств, в которых я планирую реализовать функции для автоматизации других задач ведения блога.

Деформация

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

Дальнейшие чтения

Серия руководств по автоматизации блогов с помощью JavaScript

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

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.