Skip to content
JavaScript.study

JavaScript.study

The Art of Programming

Безызвестных Денис, Denis Bezyzvestnykh, Дата-журналистика, Расследования, Аналитика, Интерактив, Данные, Сбор-данных, Опросы, Интервью, Большие-данные, Data-mining, Разработка-интерфейсов, UX-дизайн, Верстка, Frontend-разработка, Web-разработка, React, Vue, Data-journalism, Investigations, Analytics, Interactive, Data, Data-collection, Surveys, Interviews, Big-data, Data-mining, Senior-frontend, Expert, Master, Interface-development, UX-design, HTML, CSS, Frontend-development, Web-development

Нейросеть определяет жанр игры

Posted on 7 апреля, 202317 ноября, 2023 By Den Bezyzvestnykh
How to, Основы JavaScript

Часть 1

Привет, меня зовут Ярослав, мне 8 лет и Владимир, мне 12 лет. Мы изучаем программирование и сегодня расскажем как мы обучили нейросеть определять жанр игры по скриншоту.

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

Например описание к такому скриншоту:

У нас была подсказка — в описании к картинке нужно упомянуть жанр игры но не обязательно использовать ее название.

Чтобы решить эту задачу мы попросили ChatGPT составить план работы и вот что он предложил:

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

* Собрать и подготовить набор данных, состоящий из скриншотов игр разных жанров и размеченных меток жанра для каждого изображения.
* Обучить модель машинного обучения, используя этот набор данных, чтобы она могла классифицировать изображения на различные жанры.
* Написать программу, которая принимает скриншоты игры и подает их на вход модели машинного обучения.
* Модель будет классифицировать скриншот и возвращать жанр игры.
* Использовать полученную информацию о жанре игры для вывода результата анализа пользователю.

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

Мы приступили к выполнению.

1. Собрать и подготовить набор данных, состоящий из скриншотов игр разных жанров и размеченных меток жанра для каждого изображения.

Для подготовки картинок наш заказчик (наш папа) посоветовал использовать браузер Firefox и плагин «Download All Images». Список жанров для игр мы тоже попросили составить ChatGPT:

  1. Экшен (Action)
  2. Аркады (Arcade)
  3. Приключения (Adventure)
  4. Ролевые игры (Role-playing games, RPG)
  5. Симуляторы (Simulator)
  6. Стратегии (Strategy)
  7. Спортивные игры (Sports)
  8. Гонки (Racing)
  9. Шутеры (Shooter)
  10. ММОРПГ (Massively multiplayer online role-playing game)
  11. Симуляторы жизни (Life simulation)
  12. Головоломки (Puzzle)
  13. Инди (Indie)
  14. Тактические игры (Tactical)
  15. Визуальные новеллы (Visual Novel)
  16. Квесты (Quest)
  17. Стелс-экшен (Stealth-action)
  18. Файтинг (Fighting)
  19. Карточные игры (Card games)
  20. Музыкальные игры (Music games)
  21. Виртуальная реальность (Virtual reality, VR)
  22. Мобильные игры (Mobile games)

Заказчик посоветовал добавить еще один пункт «Это не скриншот» для тех случаев когда на картинке не скриншот игры.

Мы по очереди 22 раза вводили на сайте Yandex в разделе поиска по картинкам такие запросы «Спортивные игры (Sports) screenshot» и сохраняли результаты нажав на иконку плагина «Save All Images». в итоге получили 22 архива с набором по примерно 300 картинок в каждом. 23 запрос сделали «разные картинки» и тоже сохранили их.

Затем по совету заказчика мы пошли на сайте Teachable Machine и выбрали раздел обучения нейросети по изображениям. Там мы добавили 23 новых класса по названиям жанров игр:

По плану далее нужно «Обучить модель машинного обучения, используя этот набор данных, чтобы она могла классифицировать изображения на различные жанры«. В Teachable machine мы просто нажимаем кнопку «Train model» и ждем. Обучение заняло примерно 4 минуты и в правой части экрана мы стали нажимать на «Choose image…» и проверять как наша нейросеть определяет жанр игры:

Ответы программа дает вот в таком виде:

Результаты были плоховатые. Жанр большинства игр определялся как Виртуальная реальность (Virtual reality, VR). Заказчик посоветовал проверить картинки для этого жанра. Мы проверили и оказалось что там почти все картинки это фотографии в очках вирутальной реальности, а не скриншоты из игр. Мы решили просто удалить этот жанр и обучить модель заново.

Вторая версия работает здорово! Вот примеры определения жанров:

Тетрис был определен в жанр Головоломки (Puzzle)
Inside определился как Инди (Indie).
Limbo определился как тоже Инди (Indie)
Cats goes fishing — Аркады (Arcade) и немного Инди (Indie)

Мы не знаем что значит Аркада и спросили у ChatGPT, вот его ответ:

Жанр игр «Аркада» (Arcade) обычно описывает игры, которые были разработаны для простых и быстрых игровых сессий с небольшим количеством правил и контролей. Они обычно имеют низкий порог входа и не требуют от игроков большого количества времени на обучение. Игры в жанре «Аркада» могут быть различных типов: от платформеров и шутеров до головоломок и спортивных игр.

Plants VS Zombie — Аркады (Arcade) и Головоломки (Puzzle)

The Last of us — Ролевые игры (Role-playing games, RPG) и Экшен (Action)

Мафия 2 определилась как гонки

Очень хорошие результаты!

Мы сделали нашу нейросеть доступной для всех, можете сами проверить ее работу по ссылке: https://teachablemachine.withgoogle.com/models/BoZDOJAiM/ (Лучше работает с компьютера, а не телефона).

Половина задачи решена. В следующий раз мы напишем программу на языке программирования JavaScript. Эта программа будет создавать описание для скриншотов используя ответы от нашей нейросети

Всем спасибо!

начинающие разработчики Владимир и Ярослав Безызвестных

Den Bezyzvestnykh

Материал подготовил Денис Безызвестных Опытный фулл стек разработчик с более чем 5 годами опыта в создании сайтов, приложений и сервисов. Имеет широкий спектр навыков, включающих в себя разработку на языках программирования JavaScript, TypeScript в том числе на платформе node.js Имеет опыт работы с различными фреймворками, такими как React, Vue, Express, Koa и др. Владеет навыками работы с базами данных MySQL, MongoDB, PostgreSQL, Neo4j и др.

Метки: automation computer games descriptions game genres Machine Learning neural network programming screenshots website автоматизация жанры игр компьютерные игры нейросеть обработка изображений. обучение описания программирование сайт скриншоты

Навигация по записям

❮ Previous Post: Webpack — упаковщик web-приложений
Next Post: 8 важных практик в JavaScript для больших проектов ❯

You may also like

Безызвестных Денис, Denis Bezyzvestnykh, Дата-журналистика, Расследования, Аналитика, Интерактив, Данные, Сбор-данных, Опросы, Интервью, Большие-данные, Data-mining, Разработка-интерфейсов, UX-дизайн, Верстка, Frontend-разработка, Web-разработка, React, Vue, Data-journalism, Investigations, Analytics, Interactive, Data, Data-collection, Surveys, Interviews, Big-data, Data-mining, Senior-frontend, Expert, Master, Interface-development, UX-design, HTML, CSS, Frontend-development, Web-development
How to
Как создать колоду для ANKI: учимся учиться
5 апреля, 2023
Безызвестных Денис, Denis Bezyzvestnykh, Дата-журналистика, Расследования, Аналитика, Интерактив, Данные, Сбор-данных, Опросы, Интервью, Большие-данные, Data-mining, Разработка-интерфейсов, UX-дизайн, Верстка, Frontend-разработка, Web-разработка, React, Vue, Data-journalism, Investigations, Analytics, Interactive, Data, Data-collection, Surveys, Interviews, Big-data, Data-mining, Senior-frontend, Expert, Master, Interface-development, UX-design, HTML, CSS, Frontend-development, Web-development
How to
Webpack — упаковщик web-приложений
5 апреля, 2023
Безызвестных Денис, Denis Bezyzvestnykh, Дата-журналистика, Расследования, Аналитика, Интерактив, Данные, Сбор-данных, Опросы, Интервью, Большие-данные, Data-mining, Разработка-интерфейсов, UX-дизайн, Верстка, Frontend-разработка, Web-разработка, React, Vue, Data-journalism, Investigations, Analytics, Interactive, Data, Data-collection, Surveys, Interviews, Big-data, Data-mining, Senior-frontend, Expert, Master, Interface-development, UX-design, HTML, CSS, Frontend-development, Web-development
Основы JavaScript
Операторы и выражения в JavaScript
12 сентября, 2022
Безызвестных Денис, Denis Bezyzvestnykh, Дата-журналистика, Расследования, Аналитика, Интерактив, Данные, Сбор-данных, Опросы, Интервью, Большие-данные, Data-mining, Разработка-интерфейсов, UX-дизайн, Верстка, Frontend-разработка, Web-разработка, React, Vue, Data-journalism, Investigations, Analytics, Interactive, Data, Data-collection, Surveys, Interviews, Big-data, Data-mining, Senior-frontend, Expert, Master, Interface-development, UX-design, HTML, CSS, Frontend-development, Web-development
How to
Оптимальное обновление — метод shouldComponentUpdate в React JS
5 апреля, 2023

Recent Posts

  • ECMA-262, 14-е издание, июнь 2023 г. Спецификация языка ECMAScript® 2023
  • Использование Class Components в ReactJS: Руководство с примерами
  • Ускоряем React и Vue-разработку с Vite
  • 8 важных практик в JavaScript для больших проектов
  • Нейросеть определяет жанр игры

Recent Comments

Нет комментариев для просмотра.

Copyright © 2023 JavaScript.study. Калининградская область, г. Калининград

Theme: Oceanly News by ScriptsTown