Веб-приложение, которое превращает набранный текст в фотографии исписанных от руки страниц. Пользователь вводит текст, выбирает рукописный шрифт и лист бумаги — из встроенного набора или свою фотографию тетради, — а приложение рисует страницы прямо в браузере и отдаёт их в JPEG: по одной или всю пачку архивом.
Лист берётся фотографией, поэтому текстура, свет и тени на бумаге настоящие, а чернила им подчиняются. Разлиновку приложение находит на снимке само — шаг линий, поля, наклон, изгиб бумаги и перспективу листа, снятого лежащим на столе, — и ставит строки точно на линии. Почерк неровный: у каждой буквы свой рисунок контура, но соединения связного письма не рвутся.
Всё работает в браузере, сервера нет: фотографии и тексты никуда не отправляются.
Нужен Node.js — проект собирается и тестируется на 24-й версии.
npm install
npm run dev # http://localhost:5173
npm run build # production-сборка в dist/
npm run preview # раздача dist/, http://localhost:4173Приложение — SPA: хостинг должен отдавать index.html на неизвестные пути, иначе прямой заход на вложенный адрес
вернёт 404.
| Команда | Что делает |
|---|---|
npm test |
юнит- и компонентные тесты (vitest) |
npm run test:stories |
stories в Chromium через Playwright |
npm run test:visual |
скриншотные тесты в docker-образе Playwright |
npm run lint |
eslint, tsc, stylelint, prettier и steiger параллельно |
npm run storybook |
Storybook, http://localhost:6006 |
npm run build:paper |
пересчёт разлиновки встроенных листов в public/paper/profiles.json |
npm run measure:sheet -- <фото> [grid|lined|blank] |
разбор одной фотографии листа без записи результата |
Скриншотные тесты снимаются только в docker: рукописные шрифты растрируются в macOS и Linux по-разному.
React 19, TypeScript (strict), Vite 7, Tailwind 4, Radix, zustand, react-router. Страница рисуется на canvas в Web
Worker; контуры глифов читает opentype.js, архив собирает jszip. Код разложен по Feature-Sliced Design.
Подробное устройство — разбор фотографии, калибровка геометрии, отрисовка, экспорт — описано в
CLAUDE.md.
Код распространяется под лицензией MIT.
Лицензия MIT не распространяется на шрифты в public/fonts/:
- Pacifico — © The Pacifico Project Authors, SIL Open Font License 1.1;
- Abram, Anselmo, Benvolio, Capuletty, Djiovanni, Eskal, Gregory, Lexa, Lorenco, Montekky, Pag, Paris, Salavat, Samson, Stefano — © Font4You, все права защищены. Автор выкладывал их для бесплатного использования; прежде чем использовать их в своём проекте, особенно коммерческом, проверьте условия сами.