Как я создал веб-редактор реального времени для RenderCV с помощью Gemini

Резюме как код: Элегантность RenderCV

Если вы инженер или ученый, написание резюме в MS Word — это кошмар с форматированием, а кастомные шаблоны LaTeX часто слишком сложны в поддержке.

Недавно я наткнулся на отличный Python-проект под названием RenderCV. Он позволяет писать содержимое вашего резюме в чистом, структурированном файле YAML и генерирует красиво отформатированный PDF с идеальной типографикой, используя под капотом Typst. Он относится к резюме как к коду, а значит, вы можете использовать контроль версий, фокусироваться только на контенте и доверить инструменту настройку полей, выравнивания и стиля.

Однако RenderCV изначально разрабатывался как CLI-инструмент. Каждый раз при внесении изменений нужно запускать rendercv render John_Doe_CV.yaml, проверять результат и открывать PDF.

Я хотел исправить это, добавив веб-редактор реального времени — локальное веб-приложение на FastAPI с редактором Monaco, живым предпросмотром PDF, мгновенной валидацией схемы и интерактивным переключением разделов.

С помощью Gemini я успешно создал и интегрировал этот веб-интерфейс прямо в RenderCV! Вот как мы это сделали.


Технологический стек и архитектура

Чтобы веб-редактор оставался легким, быстрым и с минимумом зависимостей, мы выбрали:

  1. Backend: FastAPI + Uvicorn — идеально для создания высокопроизводительных API и раздачи статики.
  2. Frontend: Vanilla HTML5 + Modern CSS + Javascript — без сложных систем сборки. Мы использовали Monaco Editor (через CDN) для работы с YAML на уровне VS Code и иконки Lucide для плавных визуальных эффектов.
  3. Рендеринг: RenderCV Python API — прямой вызов внутренних методов библиотеки для парсинга, валидации и сборки документов в памяти.

1. Проектирование бэкенда на FastAPI (web_app.py)

Сердцем сервера является эндпоинт /api/render. Бэкенд выполняет три основные задачи:

  1. Рендеринг PDF: Компилирует строку YAML с помощью внутренних функций RenderCV и возвращает сырые байты PDF.
  2. Управление видимостью разделов: Парсит YAML, определяет доступные разделы и скрывает те, которые пользователь отключил в интерфейсе.
  3. Отображение ошибок валидации: Если проверка не пройдена, мы перехватываем ошибку RenderCVUserValidationError, извлекаем точную строку и колонку и возвращаем аккуратный JSON-ответ, чтобы Monaco мог показать красные волнистые линии прямо на месте ошибки!

2. Веб-интерфейс премиум-класса (index.html)

Для пользовательского интерфейса мы хотели сделать что-то качественное и быстрое. Gemini помог мне написать современный макет:

  • Темная тема HSL: Глубокие фоны, размытие оверлеев (backdrop-filter: blur) и яркие фиолетовые градиенты.
  • Разделенный экран: Редактор Monaco слева, просмотр PDF справа.
  • Динамические элементы управления: Выбор темы, скрываемые чекбоксы разделов и лог валидации с возможностью клика по строке.

3. Интеграция в CLI (web_command.py)

Для удобства запуска мы добавили команду в CLI RenderCV:

1
rendercv web

Она запускает локальный сервер Uvicorn FastAPI и автоматически открывает браузер.

Приятного программирования!