Большая часть разработок в области машинного обучения берет свое начало в академических кругах, которые зачастую являются очень техническими и сложными для понимания неспециалистами. Лично мне нравится, что я могу взаимодействовать с конечным результатом с помощью собственных входных данных, не вникая в технические особенности модели. Еще одним мотивом для написания этой статьи стало то, что я не видел много публичных статей или примеров использования Gradio и хостинга HuggingFace для демонстрации моделей компьютерного зрения с вводом и выводом изображений, поскольку HuggingFace традиционно является центром знаний по обработке естественного языка (NLP) (но они переходят к включению других областей ML, таких как компьютерное зрение).

Что такое HuggingFace и Gradio

Нет, HuggingFace — это не те захватчики лиц из фильма «Чужие» (хотя сначала я подумал именно так). На самом деле это обнимающийся эмодзи, который сейчас находится на вершине моего списка самых используемых эмодзи на клавиатуре! HuggingFace — это не только центр для ML-моделей и демонстраций, но и библиотека Python, которая позволяет любому создавать и обучать избранные архитектуры моделей без необходимости писать все с нуля (например, трансформаторы). В нашем случае HuggingFace Spaces позволяет нам свободно разместить нашу модель для публичного развертывания без каких-либо дополнительных платежей, знаний о полнофункциональной разработке или головной боли при использовании других платформ. Обратите внимание, что демонстрация с использованием GPU стоит дополнительных денег, поэтому я буду показывать пример только на CPU.

Gradio, с другой стороны, является библиотекой Python, которая позволяет использовать удобные функции и разрабатывать внешний интерфейс с помощью одной строки кода. Этот интерфейс можно использовать для создания простых визуальных демонстраций, как моя (ссылка в следующем абзаце), и сложных интерфейсов, как этот.

Демонстрация моего исследовательского проекта

В этом руководстве я покажу вам, как быстро развернуть демонстрацию модели, которая принимает на вход изображение и выдает карту сегментации экземпляров, наложенную на изображение. Эта демонстрация связана с частью моего исследовательского проекта по обнаружению областей зеркального отражения, созданных светом, отраженным от влажных поверхностей органов, и ослеплению камеры для определения истинных цветов и особенностей в этой области. Созданная карта сегментации впоследствии используется для восстановления региона с помощью информации из соседних кадров видеозаписи эндоскопии. Предупреждение о срабатывании триггера: Кровь, биологические ткани. EDIT: публичная демонстрация удалена до дальнейшего уведомления. Пожалуйста, свяжитесь со мной, если вы хотите получить демо-версию.

Создание скелета кода

Для любого кода, над которым я работаю, мне нравится сначала написать комментарии и создать систему контроля версий, например Github (у HuggingFace есть своя версия Git, которая в этом случае размещается на их платформе). Чтобы начать работу, создайте учетную запись на HuggingFace и создайте Spaces. Там вы можете указать имя репозитория и тип лицензии, а также выбрать Gradio в качестве опции отображения.

Затем вы можете либо клонировать репозиторий на свое локальное хранилище с помощью git bash, либо напрямую изменить код на HuggingFace. Далее необходимо создать два важных файла: requirements.txt и app.py. В текстовом файле requirements будут храниться все зависимости библиотек pip, которые должны быть установлены в среде хостинга HuggingFace для запуска всех библиотек Python, которые вы используете в своем коде. Файл app.py определяет, как должен выглядеть и функционировать ваш интерфейс. Самое базовое приложение, которое вы можете создать, — это что-то вроде программы «hello world» с использованием Gradio, которую вам покажут после создания репозитория.

import gradio as gr

def greet(name):
    return "Hello " + name + "!!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

Давайте немного разберем этот код. Оператор import сообщает Python, что вы хотите использовать всю функциональность Gradio (предполагается, что вы указали это в файле requirements.txt). Функция «greet» — это место, куда вы поместите всю логику модели машинного обучения для обработки входных данных и возврата предсказания или вывода модели на экран. Interface — это основная функция, которая определяет, как вы хотите, чтобы выглядела ваша демонстрация — мы подробнее рассмотрим варианты позже в этом посте. Затем, все, что вам нужно сделать, это запустить демо, и HuggingFace развернет весь этот код для вас автоматически. Это так просто!

Определение поведения модели

Теперь, когда у нас есть скелет кода, который мы хотим написать, мы наполним его желаемой функциональностью. Вместо функции greet мы хотим создать функцию, которая будет принимать изображение (читаемое Gradio как NumPy или PIL), предварительно обрабатывать его для подачи в модель, пропускать через модель с прямым проходом для предсказания и выводить карту сегментации, наложенную на исходное изображение.

def speclab(img):

    # initialize the model
    model = torch.hub.load('Nano1337/SpecLab', 'srdetect', force_reload=True) # for some reasons loads the model in src rather than demo
    model.eval()

    # preprocess image to be used as input
    transforms = A.Compose([
        A.Normalize(mean=(0.5, 0.5, 0.5), std=(0.5, 0.5, 0.5)),
        ToTensorV2()
    ])
    input = transforms(image=img)['image']
    input = input.unsqueeze(0)

    # model prediction
    output = model(input)

    # overlay output onto original image
    img[output==255] = [0, 255, 0]

    return img

Небольшая деталь, которую вы можете заметить: я использовал torch.hub для загрузки моей модели из сохраненного места в моем личном аккаунте на Github. Вы можете видеть, как я создал там файл hubconf.py, чтобы указать, как я хочу загрузить свою модель для внешнего использования.

Импорт примеров изображений

Поскольку тема, над которой я работаю, довольно нишевая, у пользователей не всегда будут подходящие данные для демонстрации. Мы можем определить готовые к использованию примеры для демонстрации. Я хранил изображения в том же личном репозитории Github, как показано здесь, и импортировал адрес необработанного изображения, как показано ниже.

from urllib.request import urlretrieve

# get image examples from github
urlretrieve("https://github.com/Nano1337/SpecLab/blob/main/examples/05829.png?raw=true", "05829.png") # make sure to use "copy image address when copying image from Github"
urlretrieve("https://github.com/Nano1337/SpecLab/blob/main/examples/10384.png?raw=true", "10384.png")
examples = [ # need to manually delete cache everytime new examples are added
    ['05829.png'], 
    ["10384.png"]

Еще одна небольшая деталь, которую вы можете заметить, заключается в том, что позже в коде я указал, что хочу, чтобы эти примеры и их результаты кэшировались, чтобы пользователям не приходилось ждать, пока изображения примеров будут прогоняться через модель (что может занять значительно больше времени, поскольку модель работает только на CPU).

Создание интерфейса

Теперь начинается работа над интерфейсом, которая, к счастью, очень проста для такого новичка в веб-разработке, как я. Ниже приведен мой код для определения внешнего вида демо с помощью функции Interface, но Gradio также имеет более настраиваемую и расширенную функциональность, если вы хотите больше гибкости в работе с внешним интерфейсом.

# define app features and run
title = "SpecLab Demo"
description = "<p style='text-align: center'>Gradio demo for an ASPP model architecture trained on the SpecLab dataset. To use it, simply add your image, or click one of the examples to load them. Since this demo is run on CPU only, please allow additional time for processing. </p>"
article = "<p style='text-align: center'><a href='https://github.com/Nano1337/SpecLab'>Github Repo</a></p>"
css = "#0 {object-fit: contain;} #1 {object-fit: contain;}"
demo = gr.Interface(fn=speclab, 
                    title=title, 
                    description=description,
                    article=article,
                    inputs=gr.Image(elem_id=0, show_label=False), 
                    outputs=gr.Image(elem_id=1, show_label=False),
                    css=css, 
                    examples=examples, 
                    cache_examples=True,
                    allow_flagging='never')
demo.launch()

Давайте пройдемся по этому коду вместе. Заголовок и описание не требуют пояснений, а статья показывает еще немного текста в нижней части экрана. Если вы разбираетесь во внешнем интерфейсе (а я точно не разбираюсь), вы также можете задать пользовательский CSS, чтобы украсить интерфейс. Мы указываем, что компоненты ввода и вывода должны быть изображениями Gradio, но это могут быть любые компоненты, которые поддерживает Gradio (аналогично разнообразным компонентам, найденным в компонентах React.js, если вы знакомы с этим фреймворком). Другие параметры — это просто приятные мелочи, которые можно найти в документации по интерфейсу.

Поздравляем

Вот и все! После примерно 50 строк кода (или даже меньше) у вас есть функционирующая демонстрация, развертывание которой ничего не стоит. Не стесняйтесь поделиться этой статьей, и если вам понравился этот контент, дайте мне знать, что бы вы хотели увидеть от меня дальше! Счастливого глубокого обучения, друзья мои :))