Найти тему
КиберMamedov 💻🔥

Генерируем изображения на JavaScript используя нейросеть Кандинский

На канале уже есть статья, где реализуется API нейросети Кандинский на языке Python. Но появился вопрос в комментариях о том, что есть некоторая ошибка при реализации этого решения на языке JavaScript. Забегая наперед скажу, что эта ошибка интересная и сразу не бросается в глаза, я покажу в чем состоит её особенность.

В первую очередь установите две библиотеки, которые нам сегодня понадобятся.

npm install form-data

npm install axios

Всем, кто не читал предыдущую статью, необходимо обязательно прочитать, иначе будут непонятны некоторые моменты.

Создаем файл под названием kand.mjs и импортируем в него эти библиотеки, а также библиотеку fs, т.к. нам придется работать с файлами, сохранять изображение в папку.

Импорт необходимых библиотек
Импорт необходимых библиотек

axios - библиотека для выполнения HTTP-запросов (как requests в Python) из Node.js (будем работать через него). Она используется для обмена данными с внешними ресурсами, такими как API.

form-data - библиотека для создания форм-данных в формате multipart/form-data. Она используется для отправки файлов и других данных через HTTP-запросы.

Теперь переходим к написанию класса. Создадим класс и определим конструктор, здесь все понятно и просто.

Определяем класс и конструктор
Определяем класс и конструктор

Здесь мы просто переписываем код из версии Python, поэтому останавливаться на деталях нет смысла. Вы ведь прочитали предыдущую статью, правда? 🙂

Теперь определим и опишем метод возвращающий идентификатор модели.

Метод getModels
Метод getModels

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

Определение метода generate
Определение метода generate

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

Подсказка в документации по ошибке
Подсказка в документации по ошибке

Здесь говорится, что нужно вставить этот запрос в postman (это такой сервис, который позволяет проверять запросы). Но я пошел другим путем и вначале вставил в свой терминал. Вот такой результат я получил.

Получен идентификатор для ожидания генерируемого изображения
Получен идентификатор для ожидания генерируемого изображения

Вот это у меня заняло больше всего времени. Если бы я сразу пошел в Postman, то я бы не получил такого радостного сообщения. Давайте я покажу вам результат postman.

Запрос с ошибкой 415 на postman
Запрос с ошибкой 415 на postman

Честно признаться, я до сих пор на postman так и не смог отправить успешный запрос 😀. Но самое важно здесь, это ошибка 415.

Представьте какая странность, в терминале запрос срабатывает нормально, а в postman все ломается. Что я только не перепробовал, чтобы сервер не ругался, но ничего не получалось. Те кто не понял, к ошибке 415 я пришел не в postman, а когда написал JavaScript код. Postman должен был стать точкой решения по мнению авторов документации, что не совсем так.

На каком эксперименте я постиг дзен проблемы? Конечно же в родной консоли Linux. Убрав из curl запроса вот этот странный параметр ';type=application/json', в консоли тоже перестало работать.

Не думайте, что я его не добавлял в postman 🙂 Давайте к проблеме. Все самое интересное заключалось в том, что параметры на сервер отправлялись, как файлы в консоли, а в postman они отправлялись текстом. Затем я заглянул в код на Python из документации и увидел, что post-запрос отправляет данные с аргументом files, а не json. Вот здесь и кроется сюрприз. Именно поэтому мы вначале подключили библиотеку form-data.

Поэтому, в первую очередь подготовим параметры, соответствующие коду на Python.

Подготовка данных
Подготовка данных

Теперь отправим их.

Отправка запроса через метод POST
Отправка запроса через метод POST

В результате получаем ответ сервера по ключу data и возвращаем идентификатор ожидания генерируемого изображения uuid.

Возвращаем идентификатор генерируемого изображения на сервере кандинский
Возвращаем идентификатор генерируемого изображения на сервере кандинский

Далее все просто. Определяем метод проверки генерировано ли изображение на сервере Кандинский. Если да, то возвращаем его, иначе ожидаем следующей итерации с интервалом.

Определение метода checkGeneration
Определение метода checkGeneration

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

Асинхронная стрелочная функция для сохранения изображения в файл
Асинхронная стрелочная функция для сохранения изображения в файл

Все, теперь запускаем. Я там поменял номер стиля и сам запрос. Пусть генерирует язык программирования JavaScript.

Результат генерации изображения
Результат генерации изображения

Так Кандинский видит JavaScript 🙂

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