PowerHTML

Свой PowerPoint в одном файле: как учитель физики вайбкодил офлайн-редактор интерактивных презентаций

Сразу честно: навайбкодил

Я — школьный учитель физики, в этом проекте автор идеи, архитектор, заказчик, тестировщик и главный придира. Но не автор кода в классическом смысле.

Пишу это заранее, потому что не хочу, чтобы из статьи сложилось впечатление, будто перед вами гениальный самоучка, в одиночку осиливший видеоредактор. Нет. Перед вами учитель, который вечерами объяснял ИИ, чего он хочет, и не сдавался, пока оно не заработало. Это, как выяснилось, тоже отдельный навык — но точно не «я крутой программист».

Так что красивых алгоритмов, которыми я мог бы хвастаться как инженер, тут не будет. Будет история о том, зачем я вообще в это влез, что в итоге получилось, и несколько слов о том, где было интересно и где больно. Поехали.

Давным-давно понял силу интерактивных симуляций для физического образования. В интернете есть куча готовых решений PhET, JavaLab, Ophysics. Но многие уже заблокированы(?! физике-то за что?) или были недостаточно полны для использования на уроках. У Phet, оказывается, почти все интерактивы можно украсть в виде html-кода, или просто решить проблему с помощью vpn, но это всё имеет свои недостатки. Так что решил делать интерактивные симуляции физических процессов сам. Внизу можете некоторые из них попробовать, чтобы понимать что это такое.

PowerPoint открывает файл и радостно сообщает, что шрифтов таких нет, поэтому вёрстка теперь выглядит как после лёгкого землетрясения. Google Slides просит залогиниться, а интернета нет. Онлайн-конструкторы интерактивных заданий (тот же Genially, LearningApps, H5P) — прекрасны, но живут в облаке: нет сети — нет урока. А ещё почти все хотят аккаунт, а часть — ещё и денег за то, чтобы твои же материалы не были заперты за пейволлом. Ты заранее сделал презентацию, но интерактивные симуляции физических процессов в ней могут не работать, а если и работать то криво.

И вот стоишь ты у доски, за спиной 30 человек, которым обещал «сегодня будет интересно», и понимаешь, что интересно будет тебе — искать, где что отвалилось.

В какой-то момент я сформулировал желание предельно тупо: хочу презентацию, которая является одним файлом и просто работает. Без установки. Без аккаунта. Без интернета. Скинул на флешку, открыл на любом компьютере — и всё на месте: шрифты, картинки, видео, анимации, интерактив. Как PDF, только живой.

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

Почему не взял что-то готовое

Честно перебрал варианты, прежде чем городить велосипед.

PowerPoint / Keynote / LibreOffice Impress. Отличные редакторы, но интерактив там — это боль через макросы и триггеры, а переносимость между машинами — лотерея. И это всё-таки отдельные программы: на чужом компьютере может не оказаться нужной.

reveal.js и подобные HTML-фреймворки. Технически близко к тому, что я хотел: презентация как веб-страница. Но это инструмент для тех, кто пишет слайды руками в разметке. Я хотел визуальный редактор, чтобы можно было мышкой — и чтобы результатом был один файл, а не папка с кучей зависимостей.

H5P. Идеологически — то, что надо: интерактивное видео, вопросы, задания. Но H5P заточен под LMS и сайты, ему нужен хостинг. Офлайн, «одним файлом на флешке» — это не его сценарий.

Вырисовывалось три жёстких требования, которые в готовых решениях вместе не встречались:

1. Полностью офлайн. Ноль обращений к сети во время работы и показа.

2. Один файл. Не проект, не папка, не архив — именно один .html, который и редактор, и плеер одновременно.

3. Никаких зависимостей и установки для пользователя. Открыл в браузере — работает.

Всё остальное выросло из этих трёх пунктов.

Главная идея: один HTML-файл, который сам себе и редактор, и плеер

Ключевое решение, которое определило вообще всё: приложение — это один HTML-файл, внутри которого лежит и редактор, и движок показа. А когда ты сохраняешь свою презентацию, она экспортируется в другой самостоятельный HTML-файл — уже без редактора, только показ. Тоже один файл. Тоже офлайн. И главное, интерактивные html элементы работают без костылей.

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

Из этого следует куча приятных штук:

• Приватность по умолчанию. Ничего никуда не улетает. Все ваши материалы, все ответы учеников, всё — остаётся на устройстве. Для школы это, внезапно, важно.

• Вечность. Файл не протухнет, когда какой-нибудь сервис закроется или сменит тариф. Через пять лет он откроется ровно так же.

• Переносимость. Флешка, почта, мессенджер, облако — неважно. Это один файл, с ним ничего не случится.

Что оно умеет (и почему этим захочется пользоваться)

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

Обычный редактор — как ожидаешь

Слайды, текст, фигуры, таблицы, картинки, списки, выравнивание, порядок слоёв, дублирование, шаблоны. Темы оформления (тёмная, светлая, контрастная, тёплая) и отдельно — темы самой презентации. Переходы между слайдами и анимация появления объектов с триггерами. Всё мышкой, как привык. Это база, на ней я не задерживаюсь — оно просто есть и работает.

Штуки, которые оживляют выступление

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

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

• Кубики — бросить дайс прямо на слайде.

• Конфетти — да, кнопка, которая сыпет конфетти. Смешно, но на уроке в конце четверти работает безотказно.

• Таймеры — обратный отсчёт на задание, с сотыми долями секунды, если надо.

• Чёрный / белый экран — мгновенно погасить слайд, чтобы переключить внимание на себя или на доску.

• Режим докладчика — свои заметки и следующий слайд перед глазами, а на проекторе — только презентация.

• Рисование поверх слайдов во время показа: ручка, маркер, выделитель, ластик, свои цвета. Обвёл формулу, подчеркнул главное — и стёр.

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

Мультимедиа и встроенный видеоредактор

Можно положить звук на слайд (например, озвучку) и фоновую музыку на всю презентацию. Но самое неожиданное — внутри оказался небольшой видеоредактор. Прямо в презентации можно:

• обрезать видео и вырезать куски (монтаж по сегментам);

• менять скорость (вплоть до 16×);

• «запикать» фрагмент — заглушить кусок звука пикающим сигналом (регулируемой громкости), классика;

• разрезать дорожку и переставлять части.

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

Интерактивное видео — то, ради чего многие и придут

Это, пожалуй, главная фишка. Идея как в H5P Interactive Video, только всё офлайн и внутри одного файла.

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

• Пауза с заметкой — просто текст и кнопка «Продолжить». «Обратите внимание на стрелку в левом углу».

• Вопрос с одним правильным ответом — выбор из вариантов, с проверкой.

• Вопрос с несколькими правильными — галочки, засчитывается только точный набор.

• Числовой ответ с допуском — ввёл число, оно сравнивается с эталоном с точностью ±. Для физики родное: ответ 9.8, допуск 0.2, единица «м/с²».

• Заполнение пропусков — в тексте отмечаешь пропуски, ученик вписывает; можно задать несколько допустимых вариантов.

• Открытый ответ — поле для размышления без автопроверки.

• Ветвление по таймкоду — вот это красиво: каждый вариант ответа перематывает видео в свою точку. Выбрал А — смотри одно продолжение, выбрал Б — другое. Нелинейное видео прямо в файле.

• Повтор фрагмента при ошибке — ответил неправильно, появляется кнопка «Посмотреть ещё раз», видео отматывается назад к нужному месту.

• Итоговый экран — в конце показывает набранный балл: «Результат: 7 из 8».

И всё это — в экспортированном файле, который вы отдаёте зрителю. Ему не нужен ни аккаунт, ни LMS, ни сеть. Открыл видео, посмотрел, ответил на вопросы, увидел свой результат. Для дистанционки, для перевёрнутого класса, для онлайн-курса без платформы — очень удобно.

Встроенные инструменты и симуляции

Отдельная категория — то, что генерируется прямо в презентации:

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

• Графики из CSV — закинул данные, получил диаграмму.

• Формулы (KaTeX) — нормальный набор математики, а не «икс в квадрате» скриншотом.

• Физические симуляции — интерактивные модели прямо на слайде: преломление света, оптическая скамья, парабола с ползунками коэффициентов, таблица Менделеева и другие. Это уже профдеформация физика, но лекторам по другим темам ничто не мешает просто не заходить в этот раздел.

Смысл в том, что интерактив не «прикручен сбоку», а живёт внутри презентации как обычные элементы. Подвигал ползунок на показе — график перестроился.

Как это делалось: честно про вайбкодинг

Раз уж я в начале обещал честность — вот самое интересное, пожалуй, не в самой программе, а в процессе.

Строить реальный инструмент на пять тысяч строк, не умея программировать, — странный опыт. Ты не пишешь код, но ты постоянно принимаешь решения: как это должно вести себя, что важнее, где упростить, что выкинуть. Роль смещается с «программиста» на «человека, который очень чётко знает, чего хочет, и умеет это объяснить».

Что реально работало:

• Маленькие шаги. «Сделай кнопку конфетти» заходит куда лучше, чем «сделай мне редактор презентаций». Большие запросы превращаются в кашу, которую потом не разгрести.

• Я как живой тест-стенд. После каждой итерации я открывал файл и тыкал во всё подряд. Нейросеть уверенно говорит «готово», а на деле поехала вёрстка или отвалилась соседняя кнопка. Ловить это — моя работа.

• Упрямство. Половина фич доводилась не с первого и не с третьего раза. Ты объясняешь, оно делает не то, ты переобъясняешь. Кто сдаётся — у того остаётся полуфабрикат.

Что бесило:

• «Чинит» одно — ломает другое. Классика. Особенно на большом файле, где всё связано.

• Уверенный тон при неверном результате. ИИ никогда не говорит «я не уверен». Он говорит «готово», и ты сам решаешь, верить или проверять. Правильный ответ — всегда проверять.

• Дрейф. Если не следить, стиль и логика внутри файла начинают расползаться. Приходится возвращать в русло.

Отдельно скажу вот что. Мне кажется, вайбкодинг — это не «программирование отменили». Это скорее «порог входа для конкретной прикладной задачи резко упал». Я бы никогда не сел писать это на голом JS с нуля — не потому что тупой, а потому что у меня уроки, проверки тетрадей и своя жизнь. А так — вечерами, короткими итерациями, за несколько месяцев — вырос вполне рабочий инструмент. Не идеальный. Рабочий.

Несколько честных технических заметок (без понтов)

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

Всё живёт в одном файле — и это больно с видео. Раз артефакт один, значит, картинки, звук и видео надо зашивать прямо внутрь (как base64). С картинками ок. А вот видео в виде гигантской base64-строки намертво тормозит перемотку: браузер каждый раз перегрызает эту простыню. Проблему в итоге решили так — данные на лету превращаются в Blob, и уже blob-ссылка отдаётся видео:

// в сохранённом файле лежит base64 (иначе какой же это «один файл»),// а на показе используется быстрая blob-ссылкаconst blob = dataURLtoBlob(base64video);video.src = URL.createObjectURL(blob);

Разница в отзывчивости — как небо и земля. Не бином Ньютона, но пока упрёшься — намучаешься.

</script> внутри строк. Весь редактор — это один большой скрипт. И как только браузер видит в тексте </script> (даже внутри строки в коде), он считает, что скрипт кончился, и всё разваливается. Лечится экранированием: <\/script>. Мелочь, из-за которой можно поседеть, пока догадаешься.

События видео привязаны ко времени оригинала, а не монтажа. Это оказалось важным решением: если порезать видео, метка вопроса на 42-й секунде исходника сработает там, где надо, даже после монтажа. А если этот кусок вырезан — вопрос просто не всплывёт. Ведёт себя предсказуемо, и это приятно.

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

Для кого это в итоге

Начинал я как учитель физики для учителей физики. Но по дороге стало ясно, что аудитория шире.

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

• Репетиторы и авторы курсов — раздал ученикам один файл с видео и вопросами, без всяких платформ и подписок.

• Лекторы и спикеры — режим докладчика, рисование поверх слайдов, таймеры, никакой зависимости от чужого Wi-Fi на конференции.

• Вообще все, кому нужна нескучная презентация — потому что колесо, конфетти, интерактивные графики и видео с вопросами делают выступление живым, а не «двадцать слайдов с буллетами».

Общий знаменатель простой: если вам когда-нибудь было тревожно от мысли «а вдруг на месте не будет интернета / не откроется / попросит логин» — это лекарство от той тревоги. Один файл. Работает.

Чего пока нет и что дальше

Не буду делать вид, что всё идеально.

• Из H5P-интерактива я сознательно не тащил то, что честно делается вставкой обычного HTML, и то, что офлайн невозможно в принципе (отправка результатов в LMS через xAPI/SCORM — это уже требует сервера).

• Видеоредактор — намеренно простой. Это «подрезать и почистить», а не Premiere.

• И да, где-то наверняка живут баги. Файл большой, вайбкоженый, тестировал в основном я сам.

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

Ссылка и пара слов напоследок

Проект бесплатный, работает офлайн, живёт в одном файле. Скачать можно тут:

https://alphabet-physics.ru/powerhtml-интерактивные-презентации/

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

Я не программист и не претендую на то, что заменил PowerPoint для всего человечества. Я закрыл свою конкретную боль — с помощью нейросети, честными вечерними итерациями — и по дороге понял, что боль эта, кажется, не только моя. Если у вас похожая — попробуйте. Найдёте баг (а вы найдёте) — пишите, будем чинить.

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