11 КБ
страница по сети
Движок — отдельным файлом и только когда понадобится. Открытую заранее страницу он тихо догружает в простое.
html → pptx
Нейросеть присылает веб-страницу.
PowerPoint получает объекты.
MPGA пересобирает HTML-презентацию в настоящий .pptx: каждый заголовок, абзац и фигура становятся обычным объектом — выделяются, правятся, двигаются. Не картинка слайда, а слайд.
в браузере · офлайн · файл никуда не уходит
Слайд 2 · Классификация
Основные группы сетевых ресурсов
Разные типы ресурсов решают разные задачи.
Веб-сайты
Многофункциональные системы с поиском и навигацией
Библиотеки
Коллекции документов и оцифрованных изданий
Базы данных
Организованные массивы записей с запросами
2
<section class="slide">
<h2>Основные группы сетевых ресурсов</h2>
<div class="card">…</div>
<i data-lucide="globe">
</section>
01разбор
Что происходит с вашим слайдом
Движок не фотографирует страницу. Он замеряет каждый элемент, определяет, каким объектом PowerPoint тот станет, и собирает файл заново.
deck.html
PПрезентация.pptxготово к правке
Слайд 2 · Классификация
Основные группы сетевых ресурсов
Разные типы ресурсов решают разные задачи.
Веб-сайты
Многофункциональные системы с поиском и навигацией
Библиотеки
Коллекции документов и оцифрованных изданий
Базы данных
Организованные массивы записей с запросами
2
00 / 1910 текстовый блок6 фигура3 картинкаЗамер
Ведите ползунок — или просто смотрите
02сравнение
Скриншот против объектов
Два предыдущих скрипта снимали слайд в PNG и клали картинкой на весь лист. Выглядит один в один — править нечего. Ведите разделитель.
Слайд 2 · Классификация
Основные группы сетевых ресурсов
Разные типы ресурсов решают разные задачи.
Веб-сайты
Многофункциональные системы с поиском и навигацией
Библиотеки
Коллекции документов и оцифрованных изданий
Базы данных
Организованные массивы записей с запросами
2
Слайд 2 · Классификация
Основные группы сетевых ресурсов
Разные типы ресурсов решают разные задачи.
Веб-сайты
Многофункциональные системы с поиском и навигацией
Библиотеки
Коллекции документов и оцифрованных изданий
Базы данных
Организованные массивы записей с запросами
2
Один объект на слайде. Текст не выделяется, опечатку не поправить, цвет не сменить.
Девятнадцать объектов вместо одного: любой заголовок — текстовый блок, любая карточка — фигура с заливкой.
03соответствия
Что во что превращается
Таблица маппинга — это и есть движок. Слева то, что пишет нейросеть; справа то, что открывает PowerPoint.
h1 · h2 · p · b · smallТекстовый блокредактируетсяПозиция берётся не с бокса элемента, а с ink-бокса букв.
div c background · border · border-radiusФигураредактируетсяЗаливка, рамка и скругление переносятся значениями, а не растром.
border-left у выноскиФигура + полосаредактируетсяУ фигуры PPTX рамка только по всему периметру, поэтому полоса — отдельный объект.
<i data-lucide="globe">Картинка из наборакартинкойИконки лежат внутри: подключать ничего не нужно, интернет не нужен.
<svg viewBox="0 0 900 290">Картинка + нативные подписиредактируетсяГрафика схемы растрируется с погашенным текстом, подписи кладутся поверх объектами.
[data-raster]Люк: что угодно картинкойкартинкойДля графики, которую фигурами не собрать надёжно. Честная плата за свободу.
04устройство
Чем за это заплачено
Ни одной цифры «из головы»: всё измеримо на собранном сайте.
0
запросов после загрузки
Не обещание, а заголовок: CSP страницы содержит connect-src ‘none’. Отключите сеть и соберите файл — проверяется за минуту.
1160 × 652.5
контракт слайда, 16:9
Единственный размер, который движок считает слайдом. Всё, что вокруг, — тулбары, навигация — в файл не попадает.
1 файл
работает с диска
MPGA.html — вся программа в одном файле: скачал, открыл двойным щелчком, интернет больше не нужен.
LibreOffice
сверка результата
Тесты открывают собранный .pptx, рендерят его и сравнивают с тем, как та же презентация выглядит в браузере.
MIT
исходники открыты
Без регистрации, без подписки, без ограничения на число презентаций.
05грабли
Цена точности
Четыре вещи, каждая из которых стоила отдельной пересборки. Они объясняют, почему «просто скриншот» — это не решение.
01
× 0.75 · × 10510.34Две единицы, которые легко перепутать
Кегль шрифта переводится в пункты (72/96), а координаты фигур — в EMU. Верные фигуры при неверном масштабе текста означают ровно одно: кегль умножили не на то число.
02
Range.selectNodeContents(el)Бокс элемента — не бокс букв
getBoundingClientRect даёт border-box с отступами и лишним воздухом. Попасть в позицию, которую задаёт центрирование внутри карточки, можно только по ink-боксу выделения.
03
h > size × 1.6Перенос строк ломает короткие подписи
«Преподаватель» превращался в «Преподавател» и «ь» на новой строке: Arial в PowerPoint чуть шире, чем в браузере. Перенос включается только для реально многострочного текста.
04
text { visibility: hidden }Схема: картинка без подписей
Графику диаграммы фигурами не собрать надёжно. Поэтому SVG снимается с погашенным текстом, а подписи кладутся сверху нативными объектами — схема выглядит один в один и правится.