Загрузка 0
ПОДЕЛИТЬСЯ

Мой блог

Листай вниз

Lapka: как я создал локальный аниме-плеер с помощью ИИ

Lapka: как я создал локальный аниме-плеер с помощью ИИ

Привет! Меня зовут Сергей Багров, и сегодня я хочу рассказать вам, как я разработал локальный аниме-плеер под названием Lapka. Этот проект вырос из простого эксперимента: мне надоело скачивать файлы и постоянно переключать серии и озвучки на сайтах вручную. За техническую реализацию и написание кода отвечала нейросеть Claude Fable 5.1, в то время как я полностью взял на себя продуктовую логику, дизайн и пользовательский опыт.

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

Интерфейс ввода ссылки в плеере Lapka
Процесс превращения простой веб-ссылки в полноценный плейлист внутри приложения.
Индикатор фавикона и закладки в плеере Lapka
Динамический фавикон во вкладке браузера отражает текущий статус воспроизведения.
Интерфейс остановленного сервера Lapka
Сообщение о завершении работы серверной части программы.
Lapka: как я создал локальный аниме-плеер с помощью ИИ
Lapka: как я создал локальный аниме-плеер с помощью ИИ
Lapka: как я создал локальный аниме-плеер с помощью ИИ
Lapka: как я создал локальный аниме-плеер с помощью ИИ
Lapka: как я создал локальный аниме-плеер с помощью ИИ
Lapka: как я создал локальный аниме-плеер с помощью ИИ
Lapka: как я создал локальный аниме-плеер с помощью ИИ

Создание концепции и архитектура парсинга

Всё началось с моего предыдущего мини-проекта PIP-Player, который умел крутить локальные видео в режиме «картинка в картинке» и запоминать звуковую дорожку. Шаг к Lapka потребовал научить софт работать со ссылками напрямую. Главный вопрос звучал так: зачем тратить время на скачивание, если можно транслировать контент «на лету»?

Реклама

Как устроен разбор сайтов без жестких инструкций

Страницы с аниме устроены хаотично: где-то списки серий оформлены обычными ссылками, где-то спрятаны в выпадающие списки, а плееры и вовсе встроены во фреймы. Чтобы не превращать проект в бесконечную коллекцию костылей под каждый отдельный ресурс, мы внедрили принципы дизайн-систем. Утилита анализирует паттерны: однотипные ссылки с возрастающей нумерацией воспринимаются как эпизоды, а группы кнопок управления — как переключатели озвучек.

Очередь серий франшизы аниме в плеере Lapka
Все сезоны и части любимой франшизы собираются в единую последовательную очередь.

Сама Lapka работает как локальный сервер на Node.js, который запускается прямо на вашем компьютере. Программа считывает открываемую страницу, находит видеопоток и пропускает его через себя в браузер. Благодаря этому видео воспроизводится так, будто это обычные локальные файлы. Важно отметить, что утилита не обходит DRM-защиту и не работает с закрытыми сайтами, требующими предварительной авторизации.

Меню выбора озвучек и качества видео в Lapka
Удобное меню выбора локализации с указанием доступных источников и разрешений.

Озвучка, франшизы и история просмотров

В привычном понимании зрителя озвучка — это единая аудиодорожка. На практике же разные плееры на сайтах отдают её как отдельный видеопоток с уникальным звуком. Модель предложила разделить выбор: пользователь указывает желаемую студию озвучки, а программа сама подбирает нужный плеер и приводит названия к единому стандарту.

Интеллектуальная очередь и сохранение истории

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

История вставленных ссылок и поиска в плеере Lapka
История ссылок сохраняет точки остановки, выбранную озвучку и позволяет искать контент внизу экрана.

Интерфейс ожидания и поведение пикселей

Поскольку разбор массивных страниц крупных франшиз может занимать некоторое время, мы уделили особое внимание UX ожидания. В первой версии пустой экран во время загрузки создавал ощущение зависания. Теперь же интерфейс сразу выводит детальный системный лог в стиле командной строки, где от лица самой программы отображаются понятные статусы: «Нашла 12 серий», «Открыла 3 плеера» и так далее.

Журнал разбора страницы в реальном времени в Lapka
Консольный лог наглядно показывает этапы парсинга сайта и обнаружения видеопотоков.

Борьба с дефолтными шаблонами ИИ

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

Реклама

Кроме того, мы столкнулись с системными ограничениями браузеров: в Chrome на macOS встроенные субтитры перекрывались системными стилями, поэтому нейросеть реализовала собственный слой отрисовки поверх видео. А для пущей индивидуальности мы добавили забавную анимацию: кнопка настроек при клике забавно «жмякает», повторяя движение фирменного кошачьего логотипа.

Меню настройки субтитров в плеере Lapka
Параметры кастомизации субтитров: выбор дорожки, размера, подложки и положения.

Безопасность локального сервера и обновления

Я изначально отказался от идеи разворачивать проект на общем внешнем сервере, чтобы не превращать личный инструмент в платный сервис-посредник с аккаунтами. Lapka функционирует изолированно на машине пользователя.

Кнопка настроек интерфейса Lapka
Интерактивная кнопка настроек реагирует на клики фирменной анимацией лапки.

Защита и правила вежливого гостя

С первого дня модель предложила надежную защиту локального сервера: бэкенд принимает запросы исключительно с адреса 127.0.0.1, сверяет заголовки Host, Sec-Fetch-Site и Origin, а все изменения состояния обрабатывает только по кастомному заголовку Lapka. Вся служебная информация и медиафайлы хранятся в специальной папке, расположение которой можно изменить через настройки.

Как я работал с ИИ: изнанка разработки

Создание проекта в рамках одной непрерывной сессии неизбежно упирается в лимиты контекста. Чтобы модель не теряла ключевые договорённости при сжатии памяти, я веду специальный файл с жесткими правилами и принципами разработки.

Панель параметров приложения Lapka на одном листе
Все ключевые параметры, версия, плеер и горячие клавиши собраны на одном экране.

Борьба с перекосами модели

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

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

Итоги эксперимента

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

npx -y lapka

Пошаговый процесс обновления приложения Lapka
Проверка версий и обновление программы прямо из панели настроек в несколько шагов.
Подсказки для запуска Lapka на разных ОС
Подсказки для корректного запуска локального сервера в Windows, macOS и Linux.

Если вам привычнее графический интерфейс, в официальном репозитории на GitHub подготовлены подробные пошаговые инструкции для операционных систем Windows, macOS и Linux, а готовые сборки запускаются простым двойным кликом по ланчеру.

01.