Ваш первый проект глубокого обучения

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

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

Настройте среду разработки

В этом руководстве мы создадим веб-приложение с помощью Node.js. Для начала создайте новую папку и инициализируйте свой проект. Если у вас не установлен Node.js, обязательно скачайте его здесь. Он также установит команду npm.

mkdir clarifai-example
cd clarifai-example
npm init

Команда «npm init» предложит вам ответить на несколько вопросов; вы можете нажать Enter для всех из них, чтобы принять значения по умолчанию. Теперь, когда наш проект настроен, мы собираемся установить пару пакетов.

npm install clarifai express multer pug

Эта команда устанавливает четыре пакета, каждый из которых мы собираемся использовать в этом руководстве:

clarifai — это клиентская библиотека JavaScript Clarifai.
express — популярный веб-фреймворк для Node.js.
multer обрабатывает загрузку файлов для веб-серверов Express.
pug — шаблонизатор для Node.js.

Создайте свое внешнее приложение

Чтобы продемонстрировать API распознавания изображений Clarifai, мы создадим приложение, в котором вы сможете загружать фотографии и классифицировать их на месте. Начните с создания HTML-файла с именем «index.html» и вставьте код, написанный ниже.

<!DOCTYPE html>
<html>
<head>
  <link href="/css/style.css" rel="stylesheet" />
  <title>Image Recognition Demo</title></head><body>
  <div class="container">
    <h1>Image Recognition Demo</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
      <label for="photo" class="label-button">Upload Image</label>
      <input id="photo" type="file" name="photo" />
      <label for="submit" class="label-button">Submit</label>
      <input id="submit" type="submit" name="submit" />
    </form>
  </div>
</body>
</html>

Как только это будет сделано, создайте папку с именем public. Здесь мы можем хранить статические файлы, такие как CSS и некоторые файлы JavaScript. Внутри public создайте еще одну папку с именем css. Внутри этой папки создайте файл с именем style.css. Теперь ваша файловая структура должна выглядеть так, как у меня на картинке слева. После того, как вы закончите это делать, вставьте код CSS, написанный здесь, в style.css:

* {
  margin: 0;
  padding: 0;
}

html, body {
  background: rgb(239, 239, 244);
  font-family: Arial, sans-serif;
  text-align: center;
  width: 100%;
}

.container {
  background: #fff;
  border-radius: 8px;
  margin: 64px auto 0;
  padding: 24px 0 32px;
  width: 600px;
}

input {
  display: none;
}

.label-button {
  background: #1e90ff;
  border-radius: 4px;
  color: #fff;
  display: table;
  margin: 16px auto 0;
  padding: 8px 12px;
  cursor: pointer;
}

Теперь мы собираемся начать создавать мясо и кости нашего веб-приложения. Создайте файл с именем «index.js» в корневом каталоге проекта (тот же, что и «index.html») и вставьте код, написанный ниже.

const express = require("express")

const app = express()
const port = 3000

app.get("/", (req, res) => {
  res.sendFile("index.html", {
    root: __dirname
  })
})

app.use(express.static("public"))
app.listen(port, () => console.log(`Running on http://localhost:${port}/`))

Теперь попробуйте ввести node index.js в свой терминал. Если вы откроете http://localhost:3000 в своем браузере, вы должны увидеть страницу, которую мы только что создали с файлами HTML и CSS выше. Это еще ничего не делает, но мы доберемся до этого очень скоро!

Чтобы остановить работу вашего веб-сервера, вы можете нажать CTRL-C на клавиатуре. Вам нужно будет делать это каждый раз, когда вы обновляете свой код JavaScript. Если вы хотите, чтобы ваш веб-сервер автоматически обновлялся при обновлении кода, вы можете использовать что-то вроде nodemon. Теперь, когда мы закончили создание внешнего интерфейса, давайте начнем с Clarifai!

Создайте свою модель с Clarifai

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

Когда вы закончите с этим, нажмите «Создать приложение», а затем нажмите на приложение, которое вы только что создали. Здесь вы можете настроить детали вашего приложения. Нажмите «Проводник», чтобы перейти в проводник модели, где мы можем начать обучение самой модели.

Затем создайте модель. Я назвал свои «наклейки», но если вы измените это, вам нужно будет запомнить это на потом.

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

Когда вы закончите маркировать все свои изображения, нажмите на свою модель в левом верхнем углу окна браузера.

Затем обучите свою модель, нажав кнопку «Обучить модель», показанную на рисунке ниже.

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

Интегрируйте Clarifai в свое приложение

Начните с возврата к файлу «index.js». Мы собираемся добавить код для других зависимостей, которые мы установили ранее. Обновите файл index.js, чтобы он выглядел так, как показано ниже.

const express = require("express")
const Clarifai = require("clarifai")
const multer = require("multer")
const pug = require("pug")

const app = express()
const port = 3000

const upload = multer()
const resultsTemplate = pug.compileFile("results.pug")

const clarifai = new Clarifai.App({
  apiKey: "[API KEY GOES HERE]"
})

app.get("/", (req, res) => {
  res.sendFile("index.html", {
    root: __dirname
  })
})

app.post("/upload", upload.single("photo"), (req, res) => {
  const base64String = Buffer.from(req.file.buffer).toString("base64")

  clarifai.models.predict("stickers", base64String).then(
   response => {
      res.send(resultsTemplate({
        concepts: response.outputs[0].data.concepts,
        image: base64String
      }))
    },
    err => {
      console.log(err)
    }
  )
})

app.use(express.static("public"))
app.listen(port, () => console.log(`Running on http://localhost:${port}/`))

В приведенном выше коде вы заметите, что я оставил заполнитель для вашего ключа API. Чтобы найти это, щелкните свое имя в правом верхнем углу окна браузера и нажмите «Настройки». Нажмите «Ключи API» в левой части окна и скопируйте ключ, который отображается в разделе «hackathon-stickers-all-scopes». Это должно быть вставлено вместо этого заполнителя.

В строке с «clarifai.models.predict» вы также заметите, что указано имя модели. Ранее мы создали модель с именем «наклейки», но если вы назвали свою модель как-то иначе, вам следует указать имя вашей модели именно здесь.

Приведенный выше код также ссылается на файл шаблона results.pug, поэтому вы должны создать этот файл в том же каталоге, что и index.js. Теперь ваша файловая структура должна выглядеть так, как показано выше. Шаблон описывает веб-страницу, на которой будут отображаться наши результаты, и позже переводится в HTML. Если вы хотите узнать больше о том, как работает файл шаблона, посмотрите Pug здесь.

html
  head
    link(href="/css/style.css", rel="stylesheet")
  body
    img(src="data:image/png;base64," + image)
    each concept in concepts
      p #{concept.name}: #{concept.value}

Наконец, добавьте немного CSS в конец «style.css», чтобы наша страница результатов выглядела нормально.

img {
  margin: 64px 0 16px;
  max-height: 192px;
}

Протестируйте свою модель

Теперь у нас есть рабочая модель и веб-приложение, которое позволяет нам опробовать ее. Введите node index.js в своем терминале, нажмите Enter и откройте http://localhost:3000 в браузере. Загрузите изображение, нажмите Отправить, и вы увидите, что думает ваша пользовательская модель.

Вы заметите, что слова слева — это понятия, которые вы создали ранее, и каждому из них присвоен номер. Это вероятности (от 0 до 1), и они соответствуют уверенности Clarifai в том, что каждая модель присутствует на картинке. Значения, близкие к 1, указывают на высокую достоверность, а значения, близкие к 0, указывают на то, что концепция почти определенно отсутствует на картинке.

Следующие шаги

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

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

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

Ваш первый проект глубокого обучения — это вызов API