Привет, меня зовут Лёня! Я автор YouTube‑канала eleday о программировании на Python. Недавно в школе была проверочная работа и мне пришлось писать код на бумаге. Такой подход показался странным: все-таки программа может исполняться только на компьютере и логично набирать ее там же. Подобная цепочка рассуждений привела к интересной идее — редактору рукописного ввода. В этой статье расскажу о задумке и деталях ее реализации. Создадим виртуальный лист, на котором можно набросать код от руки — и он будет исполняться!
Используйте оглавление, если не хотите читать текст полностью:
→ Основная идея
→ Создание поля для рисования
→ Улучшение интерфейса
→ Серверная часть
→ Отправка изображения на сервер
→ Исполнение кода
→ Деплой
Основная идея
Концепция проста: создаем поле для рисования, распознаем написанный текст с учетом отступов и пытаемся его «запустить». С точки зрения архитектуры проект представляет собой веб-приложение. Фронтенд — JavaScript для работы «пера», а также исполнения кода в браузере. Бэкенд — Python для распознавания рукописного ввода.
Закончив с реализацией и отладкой, развернем проект на облачном сервере, чтобы сделать его легкодоступным для всех устройств.
Создание поля для рисования
Первым шагом стало проектирование веб-интерфейса. Для разметки страницы я создал index.html, где разместил несколько компонентов.
Кнопки для управления кистью
<div class="brushControls"> <div class="sliderOuter"> <input type="range" min="2" max="100" step="1" value="4" id="brushSize"> </div> <span class="material-symbols-rounded active notranslate" id="brushBtn">brush</span> <span class="material-symbols-rounded notranslate" id="eraserBtn">ink_eraser</span> </div>
Кнопки для запуска кода и очистки экрана
<div class="controls"> <span class="material-symbols-rounded notranslate" id="runBtn">play_arrow</span> <span class="material-symbols-rounded notranslate" id="clearScreenBtn">delete</span> </div>
Поле для отображения распознанного кода и результата его выполнения
<div class="codePreviewOuter"> <span class="material-symbols-rounded notranslate" id="hideBtn">arrow_back_ios_new</span> <div> <textarea name="codePreview notranslate" id="codePreview" readonly>код</textarea> <textarea name="codeOutput notranslate" id="codeOutput" readonly>вывод</textarea> </div> </div>
И, конечно же, главный элемент для рисования — холст
<canvas oncontextmenu="return false;"></canvas>
Затем добавил стили, чтобы сделать интерфейс приятным, и подключил drawing.js, в котором реализовал логику рисования.
Как работает «холст»
Как только пользователь касается экрана, запускается процесс рисования: переменной isDrawing присваивается true, а текущие координаты сохраняются. При движении по экрану предыдущие координаты соединяются с текущей линией. Когда палец отходит от экрана (или отпускается кнопка мыши), isDrawing становится false, завершая процесс.
// Объявляем переменные var canvas = document.querySelector('canvas'); var sendBtn = document.querySelector('.sendBtn'); var codePreview = document.querySelector('#codePreview'); var loading = document.querySelector('.loading'); var ctx = canvas.getContext('2d'); var isDrawing = false; var lastX = 0; var lastY = 0; var brushSize = 2; var color = '#fff' // Разворачиваем холст на весь экран canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Функция начала рисования function startDrawing(e) { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; } // Функция рисования function draw(e) { if (!isDrawing) return; // Задаем параметры кисти ctx.strokeStyle = color; ctx.lineWidth = brushSize; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // Соединяем линией предыдущие координаты и текущие ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); // Обновляем предыдущие координаты [lastX, lastY] = [e.offsetX, e.offsetY]; } // Функция окончания рисования function stopDrawing(e) { if (!isDrawing) return; isDrawing = false; ctx.closePath(); } // Привязываем вышеописанные функции к действиям пользователя canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing);
Рисовать уже можно, но интерфейс пока нельзя назвать удобным.
Улучшение интерфейса
Чтобы работать было удобнее, в модуле ui.js я реализовал несколько дополнительных возможностей.
Настройка толщины кисти через ползунок
var slicer = document.getElementById('brushSize'); // Увеличение ползунка при наведении мыши slicer.addEventListener('mouseover', () => { document.documentElement.style.setProperty('--thumb-size', `25px`); document.documentElement.style.setProperty('--brush-size', `${brushSize}px`); brushPreview.style.opacity = 1; cursor.style.opacity = 0; }); // Уменьшение ползунка, когда мышь сдвинули slicer.addEventListener('mouseout', () => { document.documentElement.style.setProperty('--thumb-size', `15px`); brushPreview.style.opacity = 0; }); // Изменение размера кисти при перетаскивании ползунка slicer.addEventListener('input', () => { brushSize = slicer.value; document.documentElement.style.setProperty('--brush-size', `${brushSize}px`); });
Смена кисти и ластика
var brushBtn = document.getElementById('brushBtn'); var eraserBtn = document.getElementById('eraserBtn'); // При нажатии кнопки кисти цвет меняется на белый brushBtn.addEventListener('click', () => { color = '#fff'; document.documentElement.style.setProperty('--cursor-color', '#fff'); brushSize = 2; document.documentElement.style.setProperty('--brush-size', `2px`); slicer.value = 2; brushBtn.classList.add('active'); eraserBtn.classList.remove('active'); }); // При нажатии кнопки ластика цвет меняется на черный eraserBtn.addEventListener('click', () => { color = '#000'; brushSize = 32; document.documentElement.style.setProperty('--brush-size', `32px`); document.documentElement.style.setProperty('--cursor-color', '#101010'); slicer.value = 32; brushBtn.classList.remove('active'); eraserBtn.classList.add('active'); });
Поддержка горячих клавиш
Клавиши [ и ] используются для изменения размера кисти, P — выбора кисти, E — включения ластика.
window.addEventListener('keydown', (e) => { // Увеличение размера кисти if (e.key == ']' || e.key == '}' || e.key == 'ъ' || e.key == 'Ъ') { let step = 1; if (e.shiftKey) step = 10; brushSize = Math.min(Number(slicer.max), brushSize + step); slicer.value = brushSize; document.documentElement.style.setProperty('--brush-size', `${brushSize}px`); } // Уменьшение размера кисти if (e.key == '[' || e.key == '{' || e.key == 'х' || e.key == 'Х') { let step = 1; if (e.shiftKey) step = 10; brushSize = Math.max(Number(slicer.min), brushSize - step); slicer.value = brushSize; document.documentElement.style.setProperty('--brush-size', `${brushSize}px`); } // Выбор кисти if (e.key == 'p' || e.key == 'з') { color = '#fff'; document.documentElement.style.setProperty('--cursor-color', '#fff'); brushSize = 2; document.documentElement.style.setProperty('--brush-size', `2px`); slicer.value = 2; brushBtn.classList.add('active'); eraserBtn.classList.remove('active'); } // Выбор ластика if (e.key == 'e' || e.key == 'у') { color = '#000'; document.documentElement.style.setProperty('--cursor-color', '#101010'); brushSize = 32; document.documentElement.style.setProperty('--brush-size', `32px`); slicer.value = 32; brushBtn.classList.remove('active'); eraserBtn.classList.add('active'); } });
Теперь управление стало удобным. Пора переходить к серверной части.
Серверная часть
Серверная часть — Python‑программа, написанная с помощью микрофреймворка Flask.
Я создал папку app, в которой находятся:
__init__.py— инициализация Flask-приложения,routes.py— маршруты,image_utils.py— обработка изображений.
Для распознавания текста я сначала попробовал pytesseract. Однако выяснилось, что эта библиотека плохо справляется с рукописным вводом. Окончательный выбор пал на easyocr — она хоть и медленнее работает, зато точнее.
Обработка изображений
В image_utils.py реализовано несколько функций, необходимых для восприятия изображения.
Декодирование картинки из base64
def base64_to_image(base64_string: str) -> np.ndarray: image = base64.b64decode(base64_string.split(',')[1]) image = np.frombuffer(image, np.uint8) image = cv2.imdecode(image, cv2.IMREAD_GRAYSCALE) return image
Инвертирование цветов и увеличение контрастности
def prepare_image(image: np.ndarray) -> str: image = cv2.bitwise_not(image) _, image = cv2.threshold(image, 127, 255, cv2.THRESH_BINARY) files = list(map(lambda x: int(x.split('.')[0]), os.listdir('app/static/user_images'))) i = max(files) + 1 if files else 0 cv2.imwrite(f'app/static/user_images/{i}.png', image) return f'app/static/user_images/{i}.png'
Распознавание текста с учетом отступов (по количеству пробелов перед строкой)
def image_to_code(image: str) -> str: # Распознавание блоков текста на картинке blocks = reader.readtext(image) blocks = sorted(blocks, key=lambda x: x[0][0][1]) # Толерантность к высоте строки в пикселях. Чем больше значение - тем более дальние строки по вертикали будут определяться как одна строка tolerance = 20 # Список из средних значений ширины для символов в блоках symbol_widths = [(block[0][2][0] - block[0][0][0]) / len(block[1]) for block in blocks] # Разбиение на строки last_y = None block_lines = [] for block in blocks: if last_y is not None and abs(block[0][0][1] - last_y) <= tolerance: block_lines[-1].append(block) else: block_lines.append([block]) last_y = block[0][0][1] block_lines = [sorted(e, key=lambda x: x[0][0][0]) for e in block_lines] lines = [[line[0][0][:2], ' '.join([e[1] for e in line])] for line in block_lines] # Вычисление средней ширины символа av_symbol_widths = float(sum(symbol_widths) / len(symbol_widths)) if symbol_widths else 0 for i, line in enumerate(lines[1:], 1): # поиск чего-то похожего на отступ и замена на реальный отступ tabs = (float(line[0][0][0]) - float(lines[0][0][0][0])) // (av_symbol_widths * 3) lines[i][1] = ' ' * (4 * int(tabs)) + line[1] lines = [e[1] for e in lines] return ' '.join(lines)
Теперь сервер может преобразовывать рукописный текст в Python-код и отправлять его обратно на страницу.
Отправка изображения на сервер
В drawing.js я добавил функцию, которая отправляет изображение на сервер, если пользователь прекратил рисование и прошло полсекунды. Такая небольшая задержка снижает нагрузку и предотвращает отправку избыточных запросов.
function sendImage() { if (waitingForServer) return; waitingForServer = true; loading.style.opacity = 1; // Получаем изображение в виде base64 строки const dataURL = canvas.toDataURL('image/png'); // Делаем запрос к серверу, отправляя строку fetch('/image', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: dataURL }) }) .then((response) => response.json()) .then((data) => { // В ответ сервер отдает распознанный текст, который вставляется в окно для отображения console.log(data.text); codePreview.textContent = data.text; }) .catch((error) => { console.error(error); }) .finally(() => { loading.style.opacity = 0; waitingForServer = false; if (needToUpdate) { needToUpdate = false; serverAskTimeout = setTimeout(sendImage, 500); } }); }
Исполнение кода
Для выполнения кода прямо в браузере я использовал pyodide.
В codeEval.js инициализируется библиотека, которая блокирует страницу на пару секунд. Чтобы пользователи не испытывали неудобства от ожидания, я добавил экран загрузки.
async function load() { let pyodide = await loadPyodide(); pyodide.setStdout({batched: (str) => { if (outputBlock.innerHTML != '') outputBlock.innerHTML += ' ' + str; else outputBlock.innerHTML = str; }}); document.querySelector('.loading_block').remove(); return pyodide; }; let pyodideReadyPromise = load();
Функция evaluatePython выполняет код и отображает результат на странице.
async function evaluatePython(code) { if (code == '' || code == 'код') { outputBlock.innerHTML = 'Ну хоть что-нибудь напиши'; return; } outputBlock.innerHTML = ''; let pyodide = await pyodideReadyPromise; try { outputBlock.style.color = 'white'; let output = await pyodide.runPythonAsync(code); console.log(output); } catch (err) { console.log(err); outputBlock.innerHTML = err; outputBlock.style.color = 'red'; } }
Деплой
Когда проект был готов, я развернул его на облачном сервере. Процесс несложен и включал в себя несколько шагов.
Шаг 1. Переходим в панели управления my.selectel.ru. Заходим в существующий аккаунт или создаем новый, если его еще нет.
Шаг 2. Нажимаем на раздел Продукты и выбираем вкладку Облачные серверы.
Переходим на страничку Создать сервер, выбираем подходящую конфигурацию, selectel.ru/blog/ssh-authentication настраиваем SSH-ключ и нажимаем кнопку Создать сервер.
Дожидаемся создания и запуска сервера. Статус можно отслеживать на странице, напротив названия сервера.
Шаг 3. Подключаемся к серверу по SSH и устанавливаем необходимые программы:
ssh root@[ip сервера] (ssh root@31.128.50.164 для примера выше) sudo apt update sudo apt install git gunicorn ufw python3.12-venv certbot
Шаг 4. Клонируем Git-репозиторий:
git clone https://github.com/eledays/handCode
После переходим в папку handCode, появившуюся в результате клонирования:
cd handCode
Шаг 5. Создаем виртуальное окружение и устанавливаем зависимости:
python3 -m venv .venv source .venv/bin/activate pip install -r requirements.txt
Осуществляем тестовый запуск, чтобы проверить сервер:
flask run
Шаг 6. Запускаем приложение с помощью gunicorn:
/home/handCode/.venv/bin/python3 -m gunicorn --bind 0.0.0.0:5000 main:app
Шаг 7. Создаем пользователя и группу handcodeuser, но без домашней директории и права на запуск интерактивного сеанса:
sudo useradd -r -s /sbin/nologin -M -c "Пользователь для запуска приложения handCode" handcodeuser
Делаем его владельцем проекта:
sudo chown -R handcodeuser:handcodeuser /home/handCode
Добавляем себя в группу, чтобы редактировать файлы:
sudo usermod -aG handcodeuser <имя текущего пользователя>
Шаг 8. Создаем системный сервис. Для этого подготавливаем специальный файл:
sudo nano /etc/systemd/system/handCode.service
Содержимое файла следующее:
[Unit] Description=gunicorn daemon After=network.target [Service] User=handcodeuser Group=handcodeuser WorkingDirectory=/home/handCode Environment="PATH=/home/handCode/.venv/bin" ExecStart=/home/handCode/.venv/bin/gunicorn --workers 3 --bind 0.0.0.0:80 main:app [Install] WantedBy=multi-user.target
В редакторе nano для сохранения сначала нажимаем Ctrl+X, а затем Y.
Запускаем системный сервис:
sudo systemctl start handCode sudo systemctl enable handCode
Проверить статус приложения можно следующей командой:
sudo systemctl status handCode
Шаг 9. Настраиваем межсетевой экран — он должен пропускать соединения по 80‑му порту.
ufw allow 80
Шаг 10. Подключаемся из интернета. Достаточно набрать в адресной строке браузера IP‑адрес нашего сервера. Можно приобрести доменное имя и привязать его к IP‑адресу.
http://<IP‑адрес или домен сервера>
Готово! Делитесь своими вариантами, как можно улучшить проект. Мне интересно услышать ваше мнение. А также задавайте интересующие вопросы — с удовольствием отвечу на них в комментариях.
ссылка на оригинал статьи https://habr.com/ru/articles/910602/
Добавить комментарий