Рубрики
Без рубрики

Deep Dreaming с Node.js или: Web Automation для веселья и прибыли

Этот учебник нацелен на новичок до промежуточного Node.js разработчика. Узнайте, как использовать DreamShope для автоматизации веб-сайта.

Автор оригинала: Christoph Wagner.

Вступление

Если вы вообще были рядом с компьютером в течение последних нескольких недель, нет сомнений, что вы видели триппи, психоделические картинки, которые являются результатом Google Глубокая мечта Алгоритм, который был недавно выпущен как открытый источник. Несмотря на то, что Оригинальный исходный код претендует довольно весело, что это «Предназначен, чтобы иметь как можно меньше зависимостей» Для этого требуется не только работающая установка Python, но ряд дополнительных модулей, включая Caffe Нейронная сетевая библиотека, которая точно не Обеспечить установщик 1 клик Отказ

Пара программистов сразу почувствовала возможность и начала строительство Веб-основатель спереди К коду Google, который делает создание изображений глубокого сна, доступна для среднего пользователя Facebook.

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

Примечание: Этот учебник нацелен на новичок до промежуточного Node.js разработчика. Если вы знаете, что NPM Есть, вы видели функцию обратного вызова раньше, и вы можете сказать http Получить Запрос от Пост Запрос, вы должны быть в состоянии следовать.

Для целей настоящего Учебника мы будем использовать Dreamscope Отказ В основном потому, что это намного быстрее, чем Мечтать глубоко хотя (или, может быть, потому что) последний гораздо популярен. Кроме того, Dreamscope не требует адреса электронной почты.

API? Какой API?

Вы можете думать «отличная идея, Крис, я тоже думал об этом, но когда я пошел на сайт, не было никаких упоминаний об общественном API!»

Да, это правда. Но нам не нужно вонять документацию API, когда у нас есть наши доверительные инструменты разработчика Chrome.

Прежде всего, очевидно, что там Должен быть публичным API. В противном случае, как будет удачно обработать веб-приложение для нас?

  1. Откройте Google Chrome и перейдите к https://dreamscopeapp.com/create Отказ Откройте веб-инспектор (просмотр -> Разработчик -> Инструменты разработчика) и перейдите на вкладку «Сеть».

  2. Теперь выберите изображение, используя всплывающее окно селектора файла и выберите любой фильтр. Прежде чем нажать «Отправить», убедитесь, что у вас активирована параметр «Проверить журнал» (см. Скриншот).

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

  4. Нажмите на этот запрос, чтобы раскрыть инспектор запроса. Сделайте ноту URL-адреса запроса (выделено на скриншоте). Это точный URL, к которому было размещено изображение. Нам понадобится это позже.

  5. Также наблюдайте за Content-Type заголовок Это указывает на то, что это многократный запрос.

  6. Наконец, соблюдайте полезную нагрузку запроса. Это данные, которые отправляются с запросом. Обратите внимание, как есть Фильтр Параметр (который устанавливается на art_deco ), а a изображение Параметр, который содержит наше имя файла (фактические файловые данные, которые являются двоичными, не отображаются, потому что это было бы слишком долго и не очень интересно).

  7. Теперь продолжайте прокручивать в списке файлов слева. Обратите внимание, как в конце списка есть одно имя файла, которое повторяется несколько раз. Нажмите на него и перейдите на вкладку «Предварительный просмотр». Соблюдайте поля, выделенные на следующем скриншоте:

  8. Нажмите на последнюю из этих запросов. Опять же, на вкладке «Предварительный просмотр» соблюдайте выделенные поля. Обратите внимание, как production_status изменился с 0 к 1 ? Это CUE, которую сервер закончил рендеринг. Также обратите внимание, как filtered_url Теперь содержит имя файла, которое соответствует следующему и окончательному запросу. Это изображение визуализации.

Собрать кусочки вместе

Итак, теперь мы обратимся к разработке рабочего процесса веб-приложения, единственный вопрос, который остается тем, как мы получаем это странное, случайное, 9-символьное имя файла, которое опрашивается?

Мы подозреваем, что это где-то в ответ на первоначальные Пост запрос. Это было бы самым логичным местом для него. Ведь веб-приложение каким-то образом должно знать, где избирать информацию о состоянии. К сожалению, когда я пытался переключиться на вкладку «Предварительный просмотр» для этого запроса, вместо этого я получил сообщение об ошибке. Поэтому я попытался сделать тот же запрос от командной строки, используя Curl :

curl -XPOST https://dreamscopeapp.com/api/images -F "filter=art_deco" -F "image=@/Users/chris/Pictures/IMG_2647.jpg"

Вот ответ (довольно напечатанный для облегчения чтения):

{
    "profile": {
        "username": "Dreamscope"
    },
    "processing_status": 0,
    "original_url": "https://dreamscope-prod-v1.s3.amazonaws.com/images/e95adbce-caba-4214-9174-e2a715704187.jpeg",
    "profile_id": null,
    "private": false,
    "friendly_date": "just now",
    "last_modified": "2015-07-24 22:38:18.446238+00:00",
    "filtered_thumbnail_url": "",
    "filter_name": "art_deco",
    "description": "",
    "filtered_url": "",
    "uuid": "4bh1cFmnSF",
    "created": "2015-07-24 22:38:18.446223+00:00",
    "title": "",
    "nsfw": true
}

Похоже, что это те же данные JSON, так как мы видели отклики опроса. Обратите внимание на UUID поле? Похоже, он имеет точно такой же формат, что и URL-адрес опроса – десять случайных символов.

Краткое резюме

Давайте посмотрим на то, что мы узнали до сих пор. Создание фотографии Deep Dream включает следующие шаги:

  1. Загрузите изображение, сделав Пост Запрос с изображением и именем фильтра в https://dreamscopeapp.com/api/images Отказ
  2. Захватить UUID от ответа JSON и добавьте его к начальному URL для получения URL-адреса опроса.
  3. Неоднократно выпускает Получить Запросы на этот URL, пока production_status поле имеет значение 1 Отказ
  4. Скачать отображение изображения из filtered_url Отказ

Давайте напишем какой-нибудь код!

Теперь, когда мы знаем, как выглядит API, мы готовы начать наш проект. Сначала создайте новый проект Node.js в пустом каталоге, набрав NPM init и следуя подсказкам. Это не имеет значения, что вы отвечаете на каждом шаге, вы всегда можете изменить свои ответы в Package.json позже.

Далее мы собираемся установить SuperaGent упаковка. Это в основном Curl Для Node.js очень мощный пакет, который позволяет нам реместить практически любой HTTP-запрос, который мы хотим использовать API с белкой, аналогично jQuery.

Теперь мы готовы написать какой-то код. Откройте новый файл под названием dreamscopeapp.js и вставьте или вставьте следующий код:

var request = require('superagent');
var path    = require('path');
var fs      = require('fs');

var debug = function() {
    if (process.env.DEBUG) console.log.apply(null, arguments);
};

// parameters

var filter = 'art_deco';
var filename = 'IMG_2271.jpg';
var outputFilename = path.join(path.dirname(filename),
      path.parse(filename).name + '-filtered-' + filter + path.extname(filename)
    );

var url = 'https://dreamscopeapp.com/api/images';

Это все, что нам нужно сделать запросы: имя файла, имя фильтра и URL.

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

Отладка Функция – это просто простой помощник, который позволяет нам воспользоваться дополнительным выходом в консоль при запуске программы с помощью Отладка Набор вариабельной среды.

Далее мы выполним фактический запрос:

// make request
request
    .post(url)                    // this is a POST request
    .field('filter', filter)      // the "filter" parameter
    .attach('image', filename)    // attach the file as "image"
    .end(function(err, res) {     // callback for the response

    if (err) return console.log(err); // log error and quit

    debug(res.headers);
    debug(res.body);

    // compute the polling URL
    var poll_url = url + '/' + res.body.uuid;

    // This function calls itself repeatedly to check the processing_status
    // of the image until the filtered image is available.
    // When the image has finished processing, it will download the result.
    var poll = function() {
        request.get(poll_url, function(err, res) {
            if (!err && res.statusCode == 200) { 
                debug(res.headers);
                debug(res.body);

                var body = res.body;
                
                // check if processing has finished
                if (body.processing_status == 1 && body.filtered_url) {
                    console.log("Done.");
                    console.log("Downloading image...");

                    // download filtered image and save it to a file
                    request
                        .get(body.filtered_url)
                        .pipe(fs.createWriteStream(outputFilename))
                        .on('finish', function() {
                            console.log("Wrote " + outputFilename);
                        });
                } else {
                    // still processing – we'll try again in a second
                    process.stdout.write(".");
                    setTimeout(poll, 1000);
                }
            } else { // log error
              console.log(err);
            }
        });
    };

    // Start polling
    process.stdout.write("Processing...");
    poll();
});

Краткое резюме того, что происходит здесь: во-первых, мы делаем Пост Запрос на https://dreamscopeapp.com/api/images Отказ Мы прикрепляем изображение, которое мы хотим обрабатывать и указывать фильтр. В обратном вызове, после проверки на наличие ошибок, мы захватываем UUID загруженного изображения и используйте его для вычисления URL-опроса. Тогда мы называем нашими Опрос Функция, которая читает из URL-адреса опроса и проверяет, заканчивает ли изображение обработки (то есть pharacty_status – 1). Если да, мы делаем другой Получить Запрос на загрузку изображения и напишите его в файл. Если нет, мы устанавливаем тайм-аут, чтобы опросить снова через секунду.

Обратите внимание, что нет смысла понизить этот тайм-аут. Это не собирается сделать ваш процесс быстрее. На самом деле, он просто создаст больше нагрузки на сервере. Веб-приложение DreamScope использует одинаковое время ожидания, поэтому он должен быть в безопасности.

Запустите код, набрав Узел Dreamscopeapp.js Отказ Это должно показать Обработка ... На экране и на некоторое время продолжайте добавлять точки примерно раз в секунду, чтобы указать, что это опрос для обновлений. В конце концов, он должен распечатать Загрузка ... , а затем выйти.

Заключение

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

Эти знания также могут пригодиться при написании автоматических тестов – подача формы непосредственно в том, как мы показали здесь намного быстрее, чем запустить беговый браузер, как Фантомс или Casperjs , не говоря уже о SELENIUM, который запускает и контролирует полный веб-браузер.

Читайте ещё по теме: