Встроенные водяные знаки на изображениях, сгенерированных нейросетями вроде Gemini или Doubao, часто раздражают. Обычно для их удаления требуется устанавливать настольное ПО или пользоваться платными онлайн-сервисами, что не всегда удобно, быстро и безопасно для конфиденциальности. Я решил создать инструмент, который работает прямо в браузере, бесплатно, мгновенно и не загружает ваши изображения на какие-либо серверы. Так появился CleanMark.
Архитектура решения: четыре инструмента в одном
CleanMark — это не единичный скрипт, а набор из четырёх специализированных инструментов, объединённых в одном интерфейсе. Все вычисления выполняются на стороне клиента.
- Автоматическое удаление водяного знака Gemini. Инструмент самостоятельно обнаруживает и удаляет фирменный водяной знак, который добавляет AI Gemini.
- Автоматическое удаление водяного знака Doubao. Аналогичный автоматический детектор и «затиратель» для изображений, созданных этим китайским AI-сервисом.
- Ручной ластик. Универсальная кисть, позволяющая пользователю вручную закрасить любой водяной знак или нежелательный объект на изображении.
- Накладыватель логотипа. Альтернативный подход: вместо удаления можно наложить поверх водяного знака свой собственный логотип или любой другой PNG-изображение, что полезно для брендирования.
Технологический стек: современный веб в действии
Для реализации был выбран стек, который обеспечивает и производительность, и удобство разработки:
- Next.js 16 с App Router. Этот фреймворк предоставляет отличную основу для React-приложения с оптимизированной маршрутизацией, что важно для многостраничного интерфейса с несколькими инструментами.
- Canvas API. Сердце проекта. Вся магия обработки изображений — анализ пикселей, закрашивание, наложение — происходит с помощью нативного браузерного API
<canvas>. - next-intl. Для интернационализации интерфейса. Первые поддерживаемые языки — английский и китайский.
Принцип работы: «заплатка» на основе соседних пикселей
Основная идея удаления водяного знака основана на технике инпейнтинга (inpainting) прямо в Canvas. Проще говоря, мы анализируем пиксели, окружающие область с водяным знаком, и используем их цвет и текстуру, чтобы аккуратно «залатать» эту область.
Автоматическое удаление для Gemini и Doubao
Ключевое наблюдение, которое делает автоматизацию возможной: такие сервисы, как Gemini и Doubao, добавляют водяные знаки в строго определённые, предсказуемые места на изображении (например, в нижнем правом углу). Алгоритм работает так:
- Изображение загружается в элемент
<canvas>. - Программа идентифицирует область водяного знака по заранее известным координатам или шаблону.
- Происходит сэмплирование (выборка) цвета пикселей из области, непосредственно прилегающей к водяному знаку.
- Целевая область (водяной знак) заполняется вычисленным цветом. Часто используется взвешенное среднее значение окружающих пикселей, чтобы переход выглядел максимально естественно и не создавал резких границ.
Ручной ластик для произвольных водяных знаков
Не все водяные знаки имеют фиксированное положение. Для таких случаев нужен ручной инструмент:
- Пользователь выбирает кисть и проводит ею по области с водяным знаком.
- Для каждой точки под курсором алгоритм в реальном времени анализирует пиксели вокруг этой точки.
- На основе этой окружающей текстуры вычисляется цвет, которым нужно закрасить текущую позицию кисти. Часто применяется лёгкое размытие или усреднение, чтобы результат лучше смешался с фоном.
- Поскольку «заплатка» каждый раз формируется из локального окружения, результат выглядит естественно, повторяя текстуру и градиенты исходного изображения.
Почему клиентская обработка — это важно
Главное преимущество CleanMark в том, что вся обработка происходит исключительно в браузере пользователя. Это достигается за счёт использования Canvas API, который не требует подключения к серверу для манипуляций с пикселями.
Это даёт три ключевых преимущества:
- Конфиденциальность. Ваше изображение никогда не покидает ваше устройство. Его не увидит и не сохранит какой-либо удалённый сервер.
- Скорость. Нет задержек на загрузку файла на сервер и ожидание ответа. Результат появляется практически мгновенно.
- Бесплатность. Отсутствие серверной инфраструктуры делает возможным предоставлять инструмент совершенно бесплатно, без скрытых платежей или ограничений по подписке.
Инструмент доступен для использования на сайте cleanmark.org, а его исходный код открыт и размещён на GitHub, что позволяет другим разработчикам изучить реализацию или предложить свои улучшения.