CodeToImageGenerator

Веб-приложение на ASP NET MVC для генерации изображения (скриншота) из предоставленного пользователем фрагмента кода.

Посмотреть, как приложение реализовано, можно в боте Codepic.

Видео демонстрация на RuTube

Состав репозитория:

• CodeToImageGenerator.Demo : Консольное приложение для быстрой демонстрации возможностей. Внутри Program.cs нужно только поменять значения переменных code и programmingLanguage на, соответственно, фрагмент кода и язык программирования. После запуска консольного приложения в папке ~/bin/Debug/net8.0 будет сохранен файл с изображением.
• CodeToImageGenerator.Common : Бибилотека классов, в которой происходит создание изображения.
• CodeToImageGenerator.Web : Веб-приложение, в котором запускается сайт, для веб-версии, и телеграм бот с мини-приложением. Функционально сайт от мини-приложения не отличаются. Разница во внешнем виде - на сайте есть header и footer, в мини приложении они отсутствуют за ненадобностью.

Сборка и запуск

Локальный запуск

Локальная отладочная сборка от релизной версии отличается тем, что для размещения на сервере используется docker-контейнер. Внутри приложения для релизной версии используется kestrel и есть различия в работе библиотеки, отвечающей за генерацию скриншотов. Для запуска приложения нужно задать две переменные окружения:

"BOT_TOKEN" - токена вашего бота телеграм
"WEB_APP_URL" - адрес мини приложения

Важно, что обе переменные обязательны и без них приложение не стартует. Для пробного запуска адрес мини приложения может быть любым, он используется внутри приложения только для формирования ссылки на mini-app внутри бота.

Запуск на сервере

Для запуска на сервере собирается docker образ. При запуске необходимо передать две переменные окружения, например в файле .env в формате:

BOT_TOKEN=your_token
WEB_APP_URL=your_url

Затем при старте образа добавить --env-file .env , например команда запуска может выглядеть так:

docker run --env-file .env -d -p 8080:80 codetoimagegenerator:latest

Технологии

Для создания скриншотов используется библиотека Puppeteer.Sharp -> скачивает (или использует предварительно скачанный дистрибутив) Chromium. Для релизной сборки в dokerfile прописана установка с зависимостями => самостоятельно устанавливать не нужно, Chromium скачается во время сборки образа.

Для работы Телеграм бота - Telegram.Bot

Для отдельных операций с json - Newtonsoft.Json

Для подсветки синтаксиса на скриншоте используется бибилотека HLJS

Схема работы

Пользователь открывает мини-приложение в Телеграм одним из четырех доступных способов:

• По прямой ссылке (создается в BotFather)
• По нажатию на кнопку клавиатуры в чате с ботом

• По нажатию на кнопку Меню в чате с ботом

• По нажатию на кнопку "Открыть приложение" в профиле бота

Так же, можно зайти на страницу веб-приложения на сайте.

Далее выбираете в выпадающем меню один из языков программирования. На данный момент Доступно ~20 самых популярных языков, плюс cmd, powerShell и bash. Можно добавить все, доступные в hljs, их там более 100. В поле ввода вставляете фрагмент кода и нажимаете "Скачать изображение".

Результат в чате:

Итоговое изображение:

На картинке выше код метода, генерирующего уникальное имя для скачиваемого файла

Для пользователей телеграм изображение будет отправлено в бота. Для посетителей веб-версии изображение скачается на устройство.

TODO

На данный момент остается реализовать:

• Прием обновлений Телеграм через WebHook
• Всплывающее окно или уведомление об успешном создании изображения внутри интерфейсас мини приложения
• Поддержка мультиязычности
• Темы (светлая/темная)

Как научиться создавать своих ботов на .NET

Курс PRO C#. Создание Telegram бота