Кишеньковий Photomath у Telegram: Як я створив математичного бота з розпізнаванням фото та власною веб-адмінкою

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, DOU! Я соло-розробник і за сумісництвом майбутній вчитель математики. Раніше я вже ділився досвідом створення генератора уроків, а сьогодні хочу розповісти про свій пет-проєкт — BrainMathX (t.me/brainmathx_bot).

Це Telegram-бот, який працює як розумний математичний асистент. У цій статті я розповім, чому зручність месенджера перемагає окремі додатки, як я реалізував розпізнавання та розв’язання рівнянь з фото, і навіщо Telegram-боту потрібен повноцінний дашборд на React.

Ідея: Zero-friction доступ до математики

Зараз існує безліч крутих додатків для розв’язання математики. Але всі вони мають один мінус: їх треба завантажувати, встановлювати, іноді реєструватися або купувати підписку.

Я хотів зробити інструмент, який доступний у два кліки. Telegram є майже у всіх українських школярів та студентів. Тобі не треба ніде реєструватися: просто відкрив бота, написав рівняння текстом або сфотографував зошит — і отримав результат.

Що вміє бот:

• Шкільна програма та Вища математика: Від звичайних дробів, рівнянь та тригонометрії до інтегралів, границь, матриць та диференціальних рівнянь.
• Розв’язання з фото: Бот розпізнає текст з фотографії підручника чи рукописного зошита.
• Кроки як у Photomath: Замість сухої відповіді бот видає детальні кроки з поясненнями простими словами, перевіркою та порадами.

Архітектура під капотом: Чому Groq, а не повільні LLM?

Технічно проєкт побудований як повноцінний веб-додаток (TypeScript, React, Tailwind CSS), який одночасно слугує бекендом для бота та адмін-панеллю.

1. Робота з Telegram API (Webhooks) Замість того, щоб тримати постійно запущений Node.js скрипт із Long Polling, я реалізував бота на вебхуках (src/routes/api/public/telegram/webhook.ts). Коли користувач відправляє фото або текст, Telegram смикає цей ендпоінт. Це дозволяє розгорнути проєкт на serverless-інфраструктурі.

2. Серце логіки та швидкість Groq API (math-solver.server.ts) Вся магія обробки виразів та генерації покрокових розв’язків лежить у math-solver.server.ts. Спочатку я експериментував із базовими моделями (на скріншоті адмінки навіть видно неактивне поле для ключа Gemini), але вони часто тупили в математиці і довго генерували відповідь.

Тому я перевів логіку на Groq API. Завдяки їхній швидкості (LPU-інференс), бот розв’язує рівняння і розписує кроки практично миттєво. Для Telegram-бота, де UX будується на швидкості реакції, це стало ідеальним рішенням.

Веб-панель керування ботом (React + shadcn/ui)

Я не став керувати ботом через консоль бази даних або хардкодити ключі. Натомість розробив повноцінну панель управління на React (bot-control-panel.tsx), використовуючи компоненти shadcn/ui.

Цей дашборд дозволяє мені:

• Відстежувати статуси вебхуків та API-ключів (як раз на скріншоті видно перевірку підключень).
• Керувати станом бота прямо з браузера.
• Бачити, що працює, а що відключено, без потреби лізти в код.

Що далі

Зараз @brainmathx_bot повністю закриває потреби в обчисленнях та покрокових поясненнях. У майбутньому планую поліпшувати алгоритми розпізнавання дуже поганого почерку та додати можливість побудови графіків функцій, щоб бот одразу генерував і відправляв картинку з графіком.

Буду радий почути фідбек спільноти! Як ви вирішуєте проблему адміністрування своїх Telegram-ботів? Чи пишете власні дашборди (як я з React-панеллю), чи використовуєте готові рішення? Діліться в коментарях!