Удобный для начинающих учебник по обучению и созданию собственной модели определения позы йоги в браузере.
Машинное обучение/МО меняет мир и постепенно превратилось в новую среду и дизайнерский материал для художников, дизайнеров и креативщиков; однако алгоритмы и программирование могут стать отличным барьером для многих, чтобы понять и изучить возможности, которые предлагает машинное обучение.
ML5.js существует именно для этой цели. Благодаря интерфейсу начального уровня ML5.js сделал машинное обучение более доступным и простым в использовании, особенно для дизайнеров и художников.
Афиша семинаров Эрика по ML5.js
В ноябре и декабре 2021 года мы провели серию семинаров по ML5.js с Эриком Катерборгом — творческим технологом, преподавателем творческих медиа и игровых технологий в Роттердамском университете прикладных наук и активным AIxDesign. член сообщества.
Чтобы распространить информацию и пригласить больше людей сделать свои первые шаги в программировании, мы создали эту статью как письменную версию семинара, чтобы каждый мог следовать ей в любой момент. Если вам больше нравится видео, вы также можете посмотреть запись мастер-класса на нашем YouTube-канале здесь.
Мы опубликовали Часть I, Часть II и Часть III этой серии семинаров. Обязательно загляните сюда.
В этой статье (Учебное пособие, часть IV) мы будем использовать обученную модель для создания собственного веб-сайта для определения позы йоги. Некоторые из основополагающих знаний мы рассмотрели в части III учебника.
Давайте создадим свой детектор поз йоги!
В этом уроке мы покажем вам, как создать детектор поз йоги в вашем браузере. Во-первых, нам нужно использовать PoseNet для обнаружения ключевых точек тела, которые будут задокументированы в файле CSV. После создания набора данных мы можем использовать его для обучения модели машинного обучения, которую можно использовать на следующем этапе для обнаружения и классификации различных поз йоги. И последнее, но не менее важное: если вы хотите приключений, мы можем подключить веб-камеру и показать определение позы йоги в реальном времени!
- Шаг 0. Настройка
- Шаг 1. Получите данные о йоге с помощью PoseNet
- Шаг 2. Обучите и сохраните модель
- Шаг 3. Загрузите модель и классифицируйте позу йоги.
- Шаг 4. Обнаружение в реальном времени с помощью вашей веб-камеры
Не пугайтесь количества шагов! Цель состоит в том, чтобы показать вам, как делать все, но вы можете использовать ярлыки, используя предоставленный нами файл, чтобы пропустить некоторые шаги ;)
Звучит отлично? Давайте начнем.
Шаг 0. Настройка
В первой части руководства мы рассмотрим, как извлечь ключевые точки позы йоги для создания файла CSV, который можно использовать для обучения модели машинного обучения.
Как обычно, давайте настроим среду Glitch. Ремикс part3-keypoints с Erik’s Glitch page.
Кроме того, скачайте набор изображений йоги с Kaggle.
В Glitch нажмите кнопку «Файлы», чтобы загрузить одно из только что загруженных изображений поз йоги. Недавно обнаруженная поза будет автоматически нарисована поверх изображения с помощью PoseNet. Красные узлы представляют собой ключевые точки тела, а красные линии представляют скелет/соединения между узлами.
В script.js можно посмотреть, что происходит за кулисами и настроить отображение ключевых точек/скелетов.
Чтобы получить ключевые моменты из изображений йоги, нам понадобится помощь от PoseNet с использованием ml5.js. В нашей Учебной части II мы рассмотрели некоторые основы PoseNet. Так что, если есть какие-либо вопросы, обязательно ознакомьтесь с учебным пособием.
Чтобы помочь вам понять, что происходит в коде, давайте рассмотрим функции одну за другой.
function setup()здесь вы можете определить стиль рисования, а также вызвать функцию PoseNet через API ml5.js. Всякий раз, когда появляется новая поза, она помещается в переменную с именемposesи обновляет визуализацию позы.function modelReady()позволяет нам загружать наши файлы и запускать изображение через PoseNet.function draw()рисует изображение, а также скелет и ключевые точки.- Следующие функции
function drawKeypoints(),function drawSkeleton()иfunction setScale()помогают с рисованием поз и масштабированием изображений.
Шаг 1. Получите данные о йоге с помощью PoseNet
Для начала давайте посмотрим, что обнаруживает PoseNet. Раскомментируйте строку в function logKeyPoints()
console.log(poses)
Если вы откроете предварительный просмотр в новом окне и откроете консоль, вы сможете увидеть массив, содержащий все ключевые точки для позы изображения. PoseNet помогает нам документировать названия и положения частей тела. .
Например, в leftAnkle мы узнали, что позиция х левой лодыжки составляет 591,32, а позиция у - 1651,33.
leftAnkle: {x: 591.3214372568093, y: 1651.3324416342414, confidence: 0.5109665393829346}
Это очень полезно, потому что мы можем задокументировать все ключевые моменты для любых изображений поз йоги и загрузить данные в файл CSV, который можно использовать для обучения модели машинного обучения обнаружению и классификации поз йоги.
Вернемся к script.js и отредактируем следующие строки в function logKeyPoints(), чтобы получить все ключевые точки x и y и просмотреть их в консоли.
function logKeyPoints() {
let points = []
for (let keypoint of poses[0].pose.keypoints){
points.push(Math.round(keypoint.position.x))
points.push(Math.round(keypoint.position.y))
}
console.log(points)
}
Теперь мы можем использовать данные для создания CSV-файла. Эрик включил один в проект Glitch под названием yoga.csv. Обратите внимание, что в верхней строке перечислены имена всех ключевых точек, а последний элемент — yogapose. Соответственно, вторая строка содержит все значения позиции, а также классификацию позы йоги, в данном случае goddess.
Давайте не будем беспокоиться о получении большого количества данных сейчас, потому что Эрик подготовил все, что нам нужно, чтобы перейти к шагу 2. На шаге 2 мы будем использовать данные из предоставленного CSV и обучать модель обнаружения поз йоги.
Шаг 2. Обучите и сохраните модель
В Учебнике, часть III мы рассмотрели процесс обучения вашей собственной модели. На этом этапе мы покажем вам, какие изменения кода необходимо внести для обучения модели йоги.
В готовом файле из Tutorial Part III script.js содержит раздел кода для обучения позам йоги в конце страницы, показанный ниже. В function start() замените все в const options = {...} этим кодом.
const options = {
dataUrl: './yoga.csv',
inputs: ['leftAnklex','leftAnkley','leftEarx','leftEary','leftElbowx','leftElbowy','leftEyex','leftEyey','leftHipx','leftHipy','leftKneex','leftKneey','leftShoulderx','leftShouldery','leftWristx','leftWristy','nosex','nosey','rightAnklex','rightAnkley','rightEarx','rightEary','rightElbowx','rightElbowy','rightEyex','rightEyey','rightHipx','rightHipy','rightKneex','rightKneey','rightShoulderx','rightShouldery','rightWristx','rightWristy'],
outputs: ['yogapose'],
task: 'classification',
debug: true
}
Раскомментировав myNeuralNetwork.save(), вы сможете загрузить 3 файла для обученной модели.
Устали от обучения модели или столкнулись с какими-либо проблемами? Не беспокойся. На шаге 3 Эрик также подготовил для нас предварительно обученную модель определения поз йоги. Поэтому, пожалуйста, не стесняйтесь пропустить этот шаг и перейти к шагу 3, если это необходимо.
Шаг 3. Загрузите модель и классифицируйте позу йоги.
Как только вы поняли предыдущие шаги, давайте начнем заново и используем новый файл, чтобы посмотреть, как все сходится. Доступ и ремикс файла здесь.
Перейдите к script.js, и вы должны увидеть несколько знакомых блоков кода, включая загрузку PoseNet и отрисовку ключевых точек и скелета.
Первое, что нам нужно сделать, это получить доступ к модели йоги, которую подготовил для нас Эрик. Вы можете просто скопировать и заменить следующий код и заменить function setup().
function setup() {
ctx.strokeStyle = 'red'
ctx.fillStyle = "white"
ctx.lineWidth = 3
neuralNetwork = ml5.neuralNetwork({ task: 'classification' })
const modelInfo = {
model: './',
metadata: './',
weights: '',
}
neuralNetwork.load(modelInfo, yogaModelLoaded)
}
Чтобы обеспечить доступ к файлам модели йоги, мы можем выполнить те же шаги по загрузке модели, что и в Учебнике, часть III. Напомним, что вы хотите убедиться, что внутри modelInfo правильный путь к файлу заполнен.
Эрик уже загрузил для нас файлы модели, и вы можете просто обновить содержимое modelInfo.
function setup() {
ctx.strokeStyle = 'red'
ctx.fillStyle = "white"
ctx.lineWidth = 3
neuralNetwork = ml5.neuralNetwork({ task: 'classification' })
const modelInfo = {
model: './model/model.json',
metadata: './model/model_meta.json',
weights: 'https://cdn.glitch.me/e0290f89-3adb-4ab8-9de7-bdc16e8e827a%2Fmodel.weights.bin?v=1637783808826',
}
neuralNetwork.load(modelInfo, yogaModelLoaded)
}
Ваш код должен выглядеть так.
Последний шаг, который нам нужно сделать, это записать ключевые точки только что загруженного изображения, задокументировать массив ключевых точек на экране и отправить массив через модель йоги в классифицировать позу.
Просто прокрутите вниз до конца script.jsfile и замените содержимое function logKeypoints(). Как и в предыдущих шагах, мы создаем массив с именем points и получаем ключевые точки с помощью PoseNet всякий раз, когда пользователь загружает изображение. Затем код отображает строку на экране, чтобы мы могли обратиться к ней, и, наконец, отправляет массив points через нейронную сеть для классификации позы йоги.
function logKeyPoints() {
let points = []
for (let keypoint of poses[0].pose.keypoints){
points.push(Math.round(keypoint.position.x))
points.push(Math.round(keypoint.position.y))
}
numbers.innerHTML = points.toString()
neuralNetwork.classify(points,yogaResult)
}
Ваш код должен выглядеть так.
Если вы обновите панель предварительного просмотра и загрузите собственное изображение йоги, вы сможете увидеть классификацию позы йоги, показатель достоверности, а также ключевые точки тела на изображении.
Итак, вот ваша собственная игра для определения поз йоги!
Шаг 4. Обнаружение в реальном времени с помощью вашей веб-камеры
Вы уже прошли большую часть урока, и этот шаг совершенно необязателен; однако вы сможете использовать трансляцию со своей веб-камеры и иметь платформу для обнаружения позы йоги в прямом эфире!
Опять же, Эрик тщательно подготовил для нас файл. Вы можете изменить код и протестировать модель самостоятельно.
Это все для этого урока, и мы надеемся, что вы многому научились!
Столкнулись с проблемами? Не беспокойся.
Вы всегда можете просмотреть видео семинара на Youtube: https://www.youtube.com/watch?v=dnk6kT38sBo
Кроме того, мы предоставили готовый файл, к которому вы можете получить доступ по адресу:
- Шаг 1. Получите данные о йоге с помощью PoseNet
- Шаг 3. Загрузите модель и классифицируйте позу йоги
- Шаг 4. Обнаружение в реальном времени с помощью вашей веб-камеры
Заключение и следующие шаги
Мы надеемся, что вы получили удовольствие и получили новые перспективы и идеи, чтобы вернуться к своей собственной практике. И, конечно же, большое спасибо нашему блестящему ведущему Эрику Катерборгу, который показал нам потенциальные и интересные творческие приложения машинного обучения в браузере с использованием ML5.
Мы будем рады услышать ваши основные выводы в ответах или публикациях, если вы готовы ими поделиться! Пожалуйста, поставьте лайк и поделитесь с друзьями, если статья оказалась вам полезной!
Ссылки на материалы семинара
Чтобы пересмотреть мастер-класс, перейдите на наш канал Youtube, где мы загрузили запись:
Это аккаунт Эрика в Glitch, где вы можете найти все его проекты: https://glitch.com/@KokoDoko.
Опять же, вы всегда можете получить доступ к готовому проекту:
- Шаг 1. Получите данные о йоге с помощью PoseNet
- Шаг 3. Загрузите модель и классифицируйте позу йоги
- Шаг 4. Обнаружение в реальном времени с помощью вашей веб-камеры
Полезные ресурсы
Руководство для начинающих по ML5 от Coding Train — https://thecodingtrain.com/learning/ml5/
Сделано с Youtube-каналом Tensorflow.js — https://www.youtube.com/watch?v=h9i7d4R36Lw&list=PLQY2H8rRoyvzSZZuF0qJpoJxZR1NgzcZw
Документация по ML5.js — https://learn.ml5js.org/
Заинтересованы в дополнительных семинарах?
Оставайтесь с нами на нашей странице Eventbrite, чтобы узнать о предстоящих семинарах, основных докладах и сетевых мероприятиях!
Спасибо, Эрик!
Это руководство полностью основано на семинаре, разработанном и организованном Эриком для AIxDesign в ноябре и декабре 2021 года. Большое спасибо Эрику за эту замечательную работу! Эрик Катерборг — креативный технолог и преподаватель креативных медиа в Роттердамском университете прикладных наук. Он особенно заинтересован в том, чтобы сделать технологии и программирование более доступными для людей с творческим или дизайнерским опытом.
Чтобы оставаться на связи, вы можете связаться с Эриком в Linkedin, Twitter или Instagram.
Об AIxDesign
AIxDesign — это место, где объединяются практики и развиваются практики на стыке AI/ML и дизайна. В настоящее время мы организуем ежемесячные виртуальные мероприятия (такие как это), делимся контентом, изучаем совместные проекты и развиваем плодотворные партнерские отношения.
Чтобы оставаться в курсе, подпишитесь на нас в Instagram, Linkedin или подпишитесь на нашу ежемесячную рассылку, чтобы получать всю информацию в свой почтовый ящик. Теперь вы также можете найти нас на aixdesign.co.
