Python と DuckDB と uPlot で作るブラウザ向けダッシュボード
optuna/optuna-dashboard を知って、PyPI 経由でインストールできてブラウザで動作するダッシュボードがとてもいいなと思い、雑にマネをしてみることにしました。
実現するのは Sora Python SDK を利用して WebRTC を Python 経由で配信しつつ、ブラウザでその統計情報を確認できる仕組みです。
仕組みは至ってシンプルで Sora Python SDK で取得できる統計情報を DuckDB に突っ込んで、aiohttp 経由でデータを取得できるようにします。
Vite と React と uPlot を使って簡単なグラフ表示ページを作ります。あとは vite build して dist 以下にできた静的サイトを aiohttp でサーブするだけです。
こうすることで uv run python main.py を実行すれば WebRTC で配信しつつ、ブラウザで DuckDB にため込まれた統計情報が見られるようになりました。
やはり CLI ツールの統計情報をブラウザでグラフ化してリアルアイムに見れるのはとても便利です。
def create_app() -> web.Application:
app = web.Application()
# DuckDB接続を初期化
stats_collector = SoraStatsCollector()
app["stats_collector"] = stats_collector
# APIルート
app.router.add_get("/api/stats", handle_stats)
# 静的ファイルサービング
dist_path = Path("dist")
if dist_path.exists():
# index.html をルートで返す
async def index_handler(request):
return web.FileResponse(dist_path / "index.html")
app.router.add_get("/", index_handler)
# その他の静的ファイルをサーブ
app.router.add_static("/", dist_path, name="static", show_index=False)
return app
def main():
app = create_app()
port = int(os.environ.get("PORT", "8000"))
web.run_app(app, host="localhost", port=port)
if __name__ == "__main__":
main()aiohttp で dist 以下をサーブするだけ