Дашборды на Python без фронтенда: Prefab собирает интерфейс из скрипта за 40 минут

Библиотека Prefab UI появилась как инструмент для тех, кто пишет на Python, но не хочет разбираться в вёрстке. Вы описываете компоненты (графики, таблицы, формы, вкладки, метрики) на Python, а Prefab превращает описание в React-приложение и экспортирует результат в один HTML-файл. Гайд ниже проведёт от установки до работающего дашборда мониторинга пайплайнов (конвейеров обработки данных), который можно адаптировать под любые локальные задачи.

Что понадобится?

• Google Colab (бесплатный аккаунт Google) или локальный Python 3.8+
• Библиотека Prefab UI версии 0.20.2 (устанавливается одной командой)
• Базовое знание Python: переменные, списки, словари
• Примерно 40 минут на весь цикл от установки до готового файла
• Никакого опыта с фронтендом, JavaScript, React: всё берёт на себя Prefab

Пошаговая инструкция

1. Установите Prefab в Colab

Откройте новый блокнот в Google Colab и выполните:

import subprocess, sys

subprocess.check_call([
    sys.executable, "-m", "pip", "install", "-q",
    "prefab-ui==0.20.2",
])

Команда ставит фиксированную версию, чтобы код из гайда работал без сюрпризов с совместимостью.

2. Импортируйте компоненты и подготовьте данные

Prefab строит интерфейс из готовых «кубиков»: карточки, графики, таблицы, вкладки, алерты (уведомления). Импортируйте их одним блоком:

from prefab_ui.app import PrefabApp
from prefab_ui.components import (
    Alert, Badge, Button, Card, CardContent, CardHeader,
    CardTitle, DataTable, DataTableColumn, Grid, Column,
    Metric, Row, Tabs, Tab, Form, Input, Switch, Slider
)
from prefab_ui.components.charts import (
    BarChart, LineChart, PieChart, ChartSeries, Sparkline
)
from prefab_ui.actions import SetState, ShowToast
from prefab_ui.rx import STATE

3. Сгенерируйте тестовые данные мониторинга

В гайде используются синтетические данные: 30 дней, четыре региона (APAC, EMEA, NA, LATAM), шесть пайплайнов. Каждый «прогон» получает статус («Completed», «Late», «Failed»), длительность, стоимость и приоритет.

import random
from datetime import date, timedelta

random.seed(42)
TODAY = date.today()
DATES = [TODAY - timedelta(days=29 - i) for i in range(30)]
REGIONS = ["APAC", "EMEA", "NA", "LATAM"]
PIPELINES = [
    "Customer 360 ETL", "Invoice OCR", "LLM Triage",
    "Risk Scoring", "Forecast Sync", "Warehouse Load",
]

Дальше цикл по датам и регионам формирует список словарей daily_region_rows с полями date, region, runs, failures, success_rate, avg_latency, cost_usd. Полный код генерации занимает около 60 строк и приведён в оригинальном туториале.

4. Создайте приложение и добавьте метрики

app = PrefabApp(title="Ops Dashboard")

app.add(
    Row(
        Metric(label="Всего прогонов", value=str(total_runs)),
        Metric(label="Успешность, %", value=f"{success_rate}%"),
        Metric(label="Средняя задержка, с", value=str(avg_latency)),
        Metric(label="Расходы, $", value=f"${total_cost}"),
    )
)

Metric это карточка с одним числом и подписью. Четыре метрики в Row дают верхнюю панель дашборда.

5. Добавьте интерактивные графики и фильтры

app.add(
    Tabs(
        Tab(
            "Тренды",
            LineChart(
                data=daily_data,
                series=[
                    ChartSeries(key="success_rate", name="Успешность"),
                    ChartSeries(key="avg_latency", name="Задержка"),
                ],
            ),
        ),
        Tab(
            "По регионам",
            BarChart(
                data=region_data,
                series=[ChartSeries(key="failures", name="Сбои")],
            ),
        ),
    )
)

Вкладки (Tabs) переключаются прямо в браузере, без сервера. Графики рисуются на React-компонентах, вы только передаёте список словарей.

6. Добавьте таблицу с сортировкой и фильтрацией

app.add(
    DataTable(
        data=runs,
        columns=[
            DataTableColumn(key="run_id", label="ID"),
            DataTableColumn(key="pipeline", label="Пайплайн"),
            DataTableColumn(key="state", label="Статус"),
            DataTableColumn(key="priority", label="Приоритет"),
            DataTableColumn(key="duration_s", label="Время, с"),
        ],
    )
)

DataTable автоматически добавляет сортировку по столбцам. Фильтры по региону или статусу подключаются через реактивное состояние (STATE).

7. Экспортируйте в HTML и откройте

from pathlib import Path

html_path = Path("/content/dashboard.html")
app.export(str(html_path))

from IPython.display import HTML, display
display(HTML(html_path.read_text()))

Файл dashboard.html весит обычно от 200 Кб до 1 Мб. Его можно скачать из Colab, открыть в любом браузере, отправить коллеге или встроить в корпоративный портал.

Что делать с этим прямо сейчас, по ролям

Автору Дзена. Дашборды на Python пригодятся для визуализации статистики канала. Выгрузите данные из Метрики в CSV, загрузите в Colab, замените тестовые данные своими и получите наглядный отчёт, который можно вставить скриншотом в статью или отправить заказчику.

Маркетологу. Prefab убирает зависимость от фронтенд-разработчика. Если вы уже работаете с Python-аналитикой, добавьте экспорт в HTML и покажите результаты кампании клиенту в интерактивном виде, а не в статичном PDF.

Предпринимателю в РФ. Prefab и Google Colab доступны из России без ограничений. Для локальных данных можно использовать аналогичные библиотеки: Streamlit (потребует запущенный сервер) или Dash от Plotly. Но если нужен именно статический файл без сервера, Prefab пока единственный вариант с таким подходом.

Если вы давно хотели собирать дашборды на Python, но останавливало «а кто будет писать фронтенд», этот гайд снимает барьер: семь шагов, ноль JavaScript, один HTML-файл на выходе.