Знакомство с Gradio
Gradio — фреймворк на Python, который сильно упрощает создание интерактивных веб-интерфейсов для моделей машинного обучения. Достаточно нескольких строк кода, чтобы собрать аккуратное приложение: оно принимает разные входные данные вроде текста, изображений или аудио и выводит результаты понятно и удобно. Такой подход подходит исследователям, дата-сайентистам и разработчикам — теперь развертывание моделей доступно любому.
Gradio предлагает такие возможности:
- Переход от модели к рабочему демо занимает минуты.
- Никаких навыков фронтенда — всё на чистом Python.
- Поддержка текста, изображений, аудио и других форматов.
- Простое локальное тестирование, публикация и бесплатный публичный хостинг.
Установка Gradio и первый запуск
Чтобы начать, установите пакет через pip.
pip install gradioПосле установки создайте файл gradio_app.py и добавьте в него код:
import gradio as gr
def greet(name):
return f"Hello {name}!"
demo = gr.Interface(
fn=greet,
inputs="text",
outputs="text",
title="Greeting App"
)
demo.launch()Запустите файл командой python gradio_app.py — откроется веб-приложение по адресу http://127.0.0.1:7860/. Интерфейс сам сгенерирует поле для текста, кнопку отправки и область вывода на основе вашего описания.
Как работает gr.Interface
Класс gr.Interface — это основной инструмент Gradio, который скрывает технические детали. Ему нужны три ключевых элемента:
- Функция (
fn): обработчик входных данных на Python. - Входы: типы компонентов для ввода.
- Выходы: типы компонентов для результата.
Компоненты ввода и вывода
Вместо простых строк вроде "text", "image" или "audio" лучше использовать классы компонентов для большего контроля.
import gradio as gr
demo = gr.Interface(
fn=lambda x: x,
inputs=gr.Textbox(lines=2, placeholder="Enter text here..."),
outputs=gr.Textbox(label="Output")
)Популярные компоненты:
gr.Textbox(): поле для многострочного текста.gr.Image(): загрузка и предпросмотр изображений.gr.Audio(): работа с аудиофайлами.gr.Checkbox(): флажок для булевых значений.gr.Slider(): ползунок для чисел в диапазоне.gr.Radio(): выбор из вариантов.gr.Dropdown(): выпадающий список опций.
Работа с несколькими входами и выходами
Для реальных задач часто требуется несколько полей ввода или результатов. Gradio справляется с этим через списки.
import gradio as gr
def process_form(name, is_morning, temperature):
greeting = "Good morning" if is_morning else "Hello"
message = f"{greeting}, {name}! Temperature: {temperature}°C"
return message, temperature * 1.8 + 32 # Convert to Fahrenheit
demo = gr.Interface(
fn=process_form,
inputs=[
gr.Textbox(label="Name"),
gr.Checkbox(label="Is it morning?"),
gr.Slider(0, 100, label="Temperature (°C)")
],
outputs=[
gr.Textbox(label="Greeting"),
gr.Number(label="Temperature (°F)")
]
)
demo.launch()
Функция должна принимать столько параметров, сколько входов, и возвращать столько значений, сколько выходов.
Обработка изображений
Демонстрация моделей для изображений проходит без проблем:
import gradio as gr
import numpy as np
def apply_sepia(image):
# Image comes as numpy array with shape (height, width, channels)
sepia_filter = np.array([[0.393, 0.769, 0.189],
[0.349, 0.686, 0.168],
[0.272, 0.534, 0.131]])
sepia_image = image.dot(sepia_filter.T)
sepia_image = np.clip(sepia_image, 0, 255).astype(np.uint8)
return sepia_image
demo = gr.Interface(
fn=apply_sepia,
inputs=gr.Image(label="Input Image"),
outputs=gr.Image(label="Sepia Filtered"),
title="Sepia Filter App"
)
demo.launch()
Компонент gr.Image берёт на себя загрузку файлов, предпросмотр и преобразование в массивы NumPy для обработки.
Обработка аудио
С аудио всё так же просто:
import gradio as gr
def transcribe_audio(audio):
return "Transcribed text would appear here"
demo = gr.Interface(
fn=transcribe_audio,
inputs=gr.Audio(label="Upload Audio", type="filepath"),
outputs=gr.Textbox(label="Transcription"),
title="Speech-to-Text Demo"
)
demo.launch()
В полноценном приложении внутри transcribe_audio(audio) вызывается модель распознавания речи. Здесь для примера возвращается заглушка.
Сложные интерфейсы с помощью Gradio Blocks
Если gr.Interface хорош для базовых случаев, то gr.Blocks даёт полный контроль над расположением и потоком данных. Это низкоуровневый инструмент для многошаговых приложений.
Простой пример на Blocks
import gradio as gr
def greet(name):
return f"Hello {name}!"
with gr.Blocks() as demo:
name_input = gr.Textbox(label="Your Name")
greet_button = gr.Button("Greet")
output = gr.Textbox(label="Greeting")
greet_button.click(
fn=greet,
inputs=name_input,
outputs=output
)
demo.launch()
Сложная верстка с рядами и колонками
Вот продвинутый пример с интеграцией Transformers. Сначала установите пакет Transformers.
pip install transformers
import gradio as gr
from transformers import pipeline
# Load a translation model
translator = pipeline("translation_en_to_de", model="t5-small")
def translate_text(text):
result = translator(text, max_length=40)[0]
return result['translation_text']
with gr.Blocks(title="English to German Translator") as demo:
gr.Markdown("# 🌍 English to German Translator")
with gr.Row():
with gr.Column():
english_input = gr.Textbox(
label="English Text",
placeholder="Enter text to translate...",
lines=4
)
translate_btn = gr.Button("Translate", variant="primary")
with gr.Column():
german_output = gr.Textbox(
label="German Translation",
lines=4
)
# Add example prompts
gr.Examples(
examples=[
["Hello, how are you?"],
["The weather is beautiful today"],
["Machine learning is fascinating"]
],
inputs=english_input
)
translate_btn.click(
fn=translate_text,
inputs=english_input,
outputs=german_output
)
demo.launch()
Управление состоянием в приложениях Gradio
Для интерактивных приложений важно отслеживать состояние. Gradio поддерживает глобальное состояние и состояние сессии.
Состояние сессии для каждого пользователя
Состояние сессии сохраняет данные для конкретного пользователя. Пример простого чат-бота с историей сообщений:
import gradio as gr
with gr.Blocks() as demo:
chatbot = gr.Chatbot(label="Conversation")
msg = gr.Textbox(label="Your Message")
clear = gr.Button("Clear")
state = gr.State([])
def user_message(message, history):
# Update history with user message and placeholder for bot
return "", history + [[message, None]]
def bot_response(history):
# Simple echo bot logic
response = f"I received: {history[-1][0]}"
history[-1][1] = response
return history
msg.submit(
user_message,
[msg, state],
[msg, state]
).then(
bot_response,
state,
chatbot
)
clear.click(lambda: (None, []), None, [chatbot, state])
demo.launch()Развертывание и публикация приложений
Для быстрой публикации Gradio создаёт публичную ссылку:
demo.launch(share=True)Такая ссылка временная, доступна всем и действует обычно 72 часа — идеально для демо и обмена с коллегами.
Бесплатный постоянный хостинг через Hugging Face:
- Зарегистрируйтесь на Hugging Face.
- Создайте новый Space с SDK Gradio.
- Загрузите файлы:
app.py(основное приложение) иrequirements.txt(зависимости). Пример содержимогоrequirements.txt:
torch
transformers- Отправьте код в Git:
git add .
git commit -m "Initial commit"
git pushПриложение будет доступно по адресу https://huggingface.co/spaces/your-username/your-space-name.
Gradio работает на любых платформах для Python-веб-приложений:
demo.launch(server_name="0.0.0.0", server_port=7860).- Упакуйте с зависимостями в Docker-контейнер.
- Разверните на AWS, Google Cloud, Azure или других сервисах.
Дашборд для классификации изображений
Соберём всё воедино: создадим дашборд для классификации изображений на PyTorch с Gradio. Пользователи загружают фото через браузер, а модель выдаёт топ-5 предсказанных классов.
Используем ResNet-50 — свёрточную сеть, обученную на ImageNet. Модель готовая, без дообучения или своих данных. Проект подходит для экспериментов и обучения, а не для продакшена.
Gradio обеспечит лёгкий интерфейс для взаимодействия с моделью прямо в браузере.
import gradio as gr
import torch
from torchvision import models, transforms
from PIL import Image
# Load pre-trained model
model = models.resnet50(pretrained=True)
model.eval()
# Preprocessing
preprocess = transforms.Compose([
transforms.Resize(256),
transforms.CenterCrop(224),
transforms.ToTensor(),
transforms.Normalize(
mean=[0.485, 0.456, 0.406],
std=[0.229, 0.224, 0.225]
)
])
def classify_image(image):
image = Image.fromarray(image)
input_tensor = preprocess(image)
input_batch = input_tensor.unsqueeze(0)
with torch.no_grad():
output = model(input_batch)
# Get top 5 predictions
probabilities = torch.nn.functional.softmax(output[0], dim=0)
top5_prob, top5_catid = torch.topk(probabilities, 5)
results = []
for i in range(top5_prob.size(0)):
results.append(f"Category {top5_catid[i].item()}: {top5_prob[i].item()*100:.2f}%")
return "\n".join(results)
demo = gr.Interface(
fn=classify_image,
inputs=gr.Image(label="Upload Image"),
outputs=gr.Textbox(label="Top 5 Predictions"),
title="Image Classifier"
)
demo.launch()Итоги
Gradio убирает преграды между разработкой моделей и общением с пользователями. В этом гиде разобраны основы интерфейсов, компоненты для разных типов данных, продвинутые layouts на Blocks, работа с состоянием и способы публикации.
Сила Gradio в простоте и гибкости: подходит как для быстрых прототипов внутри команды, так и для публичных приложений, где модели оживают в действии.