Pythonで動く画面を簡単作成、HTML出力も

このチュートリアルでは、Pythonだけで対話型ダッシュボードを作成する方法を示すPrefabアプリケーションを構築します。PrefabのコンポーネントベースのPythonインターフェースを使用して、リアクティブな状態、チャート、テーブル、フィルター、フォーム、タブ、アラート、メトリクス、クライアントサイドのアクションを備えた洗練された運用ダッシュボードを設計します。現実的なパイプライン監視データを生成し、それをライブUIコントロールに接続し、最終的なアプリをGoogle Colab内で直接プレビューできる静的HTMLダッシュボードとしてエクスポートします。このワークフローを通じて、PrefabがいかにPythonのデータロジックから、手動でフロントエンドコードを書くことなく、最新のReactベースのユーザーインターフェースへ移行できるかを学びます。ColabでのPrefabのインストール

コードをコピー コードをコピーしました 別のブラウザを使用してください

import os

import sys

import base64

import subprocess

from pathlib import Path

from IPython.display import HTML, display, FileLink

PREFAB_VERSION = "0.20.2"

APP_PATH = Path("/content/prefab_advanced_tutorial_app.py")

HTML_PATH = Path("/content/prefab_advanced_dashboard.html")

subprocess.check_call([

sys.executable, "-m", "pip", "install", "-q", f"prefab-ui=={PREFAB_VERSION}",

])

APP_CODE = ""

必要なPythonユーティリティをインポートし、Prefabのバージョン、アプリのパス、HTMLエクスポートパスを定義してColab環境をセットアップします。バージョン関連の問題なくチュートリアルが一貫して実行されるように、固定されたprefab-uiパッケージをインストールします。また、完全なPrefabアプリケーションを段階的に構築するために使用する空のAPP_CODE文字列を初期化します。

コードをコピー コードをコピーしました 別のブラウザを使用してください

APP_CODE += r'''

合成運用データの生成

コードをコピー コードをコピーしました 別のブラウザを使用してください

import random

from collections import Counter, defaultdict

from datetime import date, timedelta

from prefab_ui.actions import AppendState, OpenLink, PopState, SetState, ShowToast, ToggleState

from prefab_ui.app import PrefabApp

from prefab_ui.components import (

Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHead