KioskAI — Презентация

1.

АНПОО «Международный Восточно-Европейский колледж»
Специальность 09.02.07 — Информационные системы и программирование
ДИПЛОМНАЯ РАБОТА
Разработка интерактивного
информационного веб-киоска KioskAI
Демонстрационное внедрение — Театр имени П. И. Чайковского
Выполнил:
Руководитель:
Блинов О.В, Дис 224.1/21
Пашкина Л.В
г. Ижевск, 2026 г.

2.

Актуальность темы
Статичные таблички
Информационные панели в музеях и театрах работают как обычные
сайты — посетитель должен сам начать взаимодействие
Вертикальные дисплеи 9:16
Растёт парк FullHD-экранов 1080×1920, под которые типовые вебинтерфейсы не проектируются
Низкая вовлечённость
Современные веб-возможности — компьютерное зрение в браузере,
REST, адаптивная вёрстка — не применяются
KioskAI — защита дипломной работы
2 / 13

3.

Цель и задачи работы
ЦЕЛЬ
Проектирование и реализация цифрового интерактивного терминала для театра оперы и балета УР им. П. И.
Чайковского — знакомство с историей театра, медиагалерея и памятные AR-фотографии с виртуальным образом
композитора
ЗАДАЧИ
1
3
5
7
Проанализировать методики создания интерактивных терминалов и вебприложений
Разработать ТЗ с опорой на пожелания заказчика
Реализовать ИС на Django (бэкенд) и HTML5/CSS3/JS (фронтенд)
Выполнить функциональное тестирование готового продукта
KioskAI — защита дипломной работы
2
4
6
8
Рассмотреть инструменты дополненной реальности в браузере (MediaPipe)
Спроектировать архитектуру ИС, состав БД и графический интерфейс
Интегрировать AR-модуль на базе MediaPipe Pose Landmarker
Оформить инструкцию посетителя и техдокументацию
3 / 13

4.

Технологический стек
BACKEND
Python 3
Django 5.x
БАЗА ДАННЫХ
SQLite
Нулевая стоимость администрирования
MTV, ORM, admin-панель
FRONTEND
HTML5 / CSS3 / JS
MediaPipe (AR)
PRODUCTION
Caddy + Gunicorn
Reverse-proxy, автоматический TLS
Без тяжёлых SPA-фреймворков
Проект развёрнут и доступен онлайн: kioskai.mooo.com
KioskAI — защита дипломной работы
4 / 13

5.

Архитектура приложения
Браузер
киоска
Caddy :8001
HTTPS / TLS
Gunicorn :8000
WSGI
Django
(views + ORM)
SQLite
DB
↓
Media-хранилище (фото, видео) • SMTP-сервер для отправки писем
Caddy автоматически выпускает и обновляет TLS-сертификат, Django доверяет заголовку X-Forwarded-Proto от reverse-proxy
KioskAI — защита дипломной работы
5 / 13

6.

Личный вклад автора
01
02
03
04
Проектирование
ТЗ, архитектура, схема URL и ER-модель из 6 сущностей
Backend на Django
6 моделей, 6 view-функций, маршрутизация, email-backend
UnverifiedSSLBackend
Frontend под 9:16
Вёрстка под 1080×1920, touch-оптимизация, кнопки увеличенного
размера
Автозапуск через камеру
Система реагирует на появление человека и запускает сценарий без
касания
KioskAI — защита дипломной работы
05
06
07
08
AR «Фото с Чайковским»
Захват кадра, наложение PNG, POST /capture/, отправка через /send/
на email
Трёхшаговый сценарий
Шаг 1 — История, Шаг 2 — Галерея, Шаг 3 — Фото с Чайковским
Production-развёртывание
Caddy + Gunicorn, автоматический TLS, домен kioskai.mooo.com
Безопасность
CSRF_TRUSTED_ORIGINS, SECURE_PROXY_SSL_HEADER, секреты в .env
вне репозитория
6 / 13

7.

Главный экран и сценарий 3 шагов
ШАГ 1
История театра
Видеоприветствие
+ интерактивный текст
ШАГ 3
Фото с Чайковским
AR-сценарий
на MediaPipe
ШАГ 2
Галерея
Архивные фото
и современные снимки
Формат FullHD 1080×1920 (9:16) — touch-вёрстка, увеличенные элементы для работы пальцем
KioskAI — защита дипломной работы
7 / 13

8.

Контентные разделы
Контент управляется через админ-панель Django — без участия разработчика
KioskAI — защита дипломной работы
8 / 13

9.

Редактор результата и отправка на email
Endpoint /send/<photo_id>/ → кастомный email-backend UnverifiedSSLBackend → SMTP с TLS
KioskAI — защита дипломной работы
9 / 13

10.

КЛЮЧЕВАЯ ФУНКЦИЯ ПРОЕКТА
AR-сценарий «Фото с Чайковским»
AR-ПАЙПЛАЙН
1
2
Захват кадра
1
Веб-камера → canvas
через MediaDevices API
TchaikovskyPose — PNG-образы с прозрачным фоном (несколько поз). CapturedPhoto —
снимки посетителей: base64-кадр, email, timestamp, флаг отправки.
Pose Landmarker
MediaPipe определяет
33 точки скелета
Модели данных
2
URL-эндпоинты
/photo/ — страница камеры с MediaPipe. /capture/ — POST base64-кадра, сохранение в БД,
JSON-ответ. /send/<id>/ — отправка фото на email через UnverifiedSSLBackend.
3
4
5
Позиция и размер
Рост = нос→стопы,
стопы PNG = стопы человека
Анализ сцены
3
Touch-оптимизация: экранная клавиатура, быстрые кнопки доменов (@mail.ru, @gmail.com,
@yandex.ru). Три действия после съёмки: Переснять / Сменить образ / Отправить.
Средний цвет кадра →
CSS-фильтр под освещение
Композитинг
PNG + фото + тень →
DOM-редактор → отправка
UI-решения
4
Отказоустойчивость
Без камеры — ручной режим (прогрессия по клику). Ошибки SMTP — JSON с кодом ошибки,
без падения. Валидация email на фронте перед отправкой.
KioskAI — защита дипломной работы
10 / 13

11.

Тестирование системы
Тип тестирования
Что проверялось
Результат
Функциональное
Все URL-маршруты, рендеринг шаблонов, работа 6 моделей через админку
OK
Интеграционное
Цепочка камера → захват → БД → SMTP, крайние случаи и обработка ошибок
OK
UX-сценарии
Поведение с камерой и без камеры (режим прогрессии по кликам)
OK
Целевое устройство
Реальный FullHD-дисплей 9:16, touch-взаимодействие, читаемость с расстояния
OK
По результатам тестирования проведены оптимизация и рефакторинг клиентского JavaScript и серверных view-функций
KioskAI — защита дипломной работы
11 / 13

12.

Практическая значимость и перспективы
СЕЙЧАС МОЖНО ПРИМЕНЯТЬ
ПЕРСПЕКТИВЫ РАЗВИТИЯ
Готов к развёртыванию
Архитектура открыта к расширению
• Театры, музеи, выставочные пространства
• AI-ассистент и голосовое управление
• Образовательные учреждения
• Сбор аналитики поведения посетителей
• Информационные терминалы
• Offline-режим для работы без интернета
• Презентационные зоны
• Перенос на PostgreSQL для multi-site
• Интерактивные стенды
• Распознавание эмоций для адаптации сценария
Архитектура позволяет переносить систему на другие учреждения — достаточно заменить контент через админку
KioskAI — защита дипломной работы
12 / 13

13.

Спасибо за внимание
Готов ответить на ваши вопросы
Проект развёрнут и доступен онлайн
kioskai.mooo.com