Нужно разработать плагин для Wordpress.
При включенном плагине на фронтенде в редакторе при редактировании картинки должна появиться кнопка "Enhance image quality". Нажатие на эту кнопку должно инициировать модальное окно примерно следующего вида:
Нажатия на кнопку clean artifacts и improve colors должны инициировать отправление оригинальной картинки на бэкенд, после чего справа должны отобразиться полученная с бэкенда улучшенная картинка и сообщение (Success или текст ошибки). По нажатию на save улучшенная картинка должна заменить оригинальную.
Предложения по улучшению UI/UX приветствуются.
Страница настроек плагина должна иметь одно поле License key и кнопку Save. По нажатию save заданная строка-ключ валидируется запросом на бэкенд и, в случае успеха, сохраняется для будущих запросов. Кроме того, пользователю отображается сообщение из ответа сервера.
Бэкенд предоставляет три ендпоинта:
GET /validate - принимает {"auth_key": SOME_KEY_STRING} , возвращает {"is_valid": bool, "message": string}
POST /improve_colors - принимает {"auth_key": KEY_STRING, "image": BASE64_ENCODED_IMAGE}, возвращает {"error": bool, "image": BASE64_ENCODED_IMAGE, "message": string}
POST /filter_artifacts полностью аналогичен предыдущему. В будущем может появиться больше ендпоинтов с таким API.
Пример использования:
curl --header "Content-Type: application/json" \\
--request POST \\
--data '{"auth_key":"test","image":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD0iiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//2Q=="}' \\
<https://zm20yxnpb2.execute-api.us-east-2.amazonaws.com/api/improve_colors>