Этот репозиторий содержит исходный код фреймворка для создания визуализаторов алгоритмов машинного обучения и некоторые примеры визуализаторов.
С помощью фреймворка можно создавать визуализаторы не только для алгоритмов машинного обучения, но и для других алгоритмов.
Визуализаторы позволяют визуализировать процесс обучения алгоритмов машинного обучения, а также их результаты.
Визуализаторы могут быть использованы для обучения студентов, а также для демонстрации работы алгоритмов машинного обучения.
Проект состоит из трех частей: библиотека для написания алгоритмов, библиотека для написания визуализаторов и примеры визуализаторов.
С точки зрения написания алгоритмов библиотека содержит две функции: bind и here.
Функция bind позволяет связать внутренние переменные алгоритма с текущим состоянием визуализатора, которое в последствии будет отображено на экране.
Функция here позволяет создать виртуальную точку остановки в алгоритме. При достижении этой точки алгоритм будет остановлен и текущее состояние визуализатора будет отображено на экране.
У пользователя затем появится возможность продолжить выполнение алгоритма до следующей точки остановки.
Пример использования функций bind и here есть в визуализаторе алгоритма сортировки пузырьком.
Библиотека так же позволяет описать три типа:
State- обьект который содержит текущее состояние алгоритма с его внутренними переменными которые были связаны с визуализатором с помощью функции bind.Event- обьект который содержит информацию о событии которое произошло в алгоритме. Каждый вызов функции here создает новое событие.Arguments- обьект который содержит типы для аргументов функции алгоритма. Этот тип используется для описания входных данных алгоритма.
Пример использования типов есть в визуализаторе алгоритма сортировки пузырьком, но на момент написания документации строгая типизация не была реализована.
TODO
Примеры визуализаторов находятся в папке src/visualizers.
Каждый визуализатор представляет из себя директорию с тремя файлами:
[alg-name].tsx- файл в котором реализован алгоритм.render.tsx- файл в котором реализован компонент визуализатора.start.tsx- файл в котором реализован компонент для запуска алгоритма.
В текущей стадии развития проекта всё использование и структура визуализаторов может быть изменена.
На момент написания документации в репозитории есть следующие примеры визуализаторов:
Для запуска проекта необходимо:
- установить Node.js и pnpm (необходимо использовать VPN).
- склонировать репозиторий
- установить зависимости командой
pnpm i - запустить проект командой
pnpm run dev
На момент написания документации проект умеет запускать только алгоритм сортировки пузырьком. Чтобы поменять запускаемый алгоритм необходимо изменить файл ./src/lib/index.tsx и ./src/App.tsx в местах где явно используется bubble sort.
@startuml
actor Пользователь as user
participant Браузер as browser
participant Фреймворк as framework
participant Алгоритм as algorithm
participant Визуализатор as visualizer
autonumber 1
user -> browser : Нажатие на "Start"
browser -> framework : Обработка события
framework -> algorithm : Запуск алгоритма
algorithm -> framework : Объекты состояния
algorithm -> framework : await here
framework -> visualizer : Состояние алгоритма
visualizer -> browser : Состояние интерфейса
user -> browser : Нажатие на "Next"
browser -> framework : Обработка события
framework -> algorithm : Promise.resolve
algorithm -> framework : await here
framework -> visualizer : Состояние алгоритма
visualizer -> browser : Состояние интерфейса
user -> browser : Нажатие на "Prev"
browser -> framework : Обработка события
framework -> visualizer : Предыдущее состояние алгоритма
visualizer -> browser : Состояние интерфейса
@enduml