Arakawa 101 Or How To Build a Data App by Python

※この資料は以下イベントで発表した内容です。
https://lycorptech-jp.connpass.com/event/341890/
#PythonFukuoka

Transcript

1. Arakawa 101 Or How To Build a Data App by Python Agenda Arakawa 101 How To build a data app by Python (or how Arakawa, Steamlit, Dash, etc. work) What Is Data App? ChatGPT says: 「データアプリ」とは、データを対話的に表示、分析、視覚化するために特別に設計されたアプリケーションを指します。これらのアプリケーショ ンは、データサイエンティスト、アナリスト、開発者がダッシュボード、レポート、およびインサイトを伝えるのに役立つインタラクティブツール を作成するためによく使用されます。Streamlit は、そのようなデータアプリを構築するための人気のあるフレームワークの一つです。 Key Features of Data Apps Interactivity データアプリは、ユーザーがデータの視覚化や分析をリアルタイムで操作できるように、スライダー、ドロップダウン、ボタンなどのインタラクティ ブな要素をしばしば含んでいます。 Data Visualization 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 1/24
2. シンプルなチャートやグラフから複雑でダイナミックな多次元ビジュアライゼーションまで、様々なビジュアライゼーションを作成するためのツー ルを提供します。 Ease of Use Streamlit のようなフレームワークは、最小限のコードでアプリを迅速に構築して展開できるようにユーザーフレンドリーに設計されています。 Example Use Cases Dashboarding ビジネスメトリクス、財務データ、運用パフォーマンスを監視するためのダッシュボード作成。 Data Exploration データセットをインタラクティブに探索するツールを構築し、ユーザーがデータをさまざまな方法でフィルタリングして視覚化できるようにする。 Arakawa 101 Arakawa は、純粋な Python でスタンドアロンのデータアプリを作成するためのライブラリです。 スタンドアロンとは、バックエンド（例: Flask, FastAPI など）なしでアプリが機能することを意味します。 Acknowledgements Note 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 2/24
3. Arakawa は datapane/datapane のフォークで、Datapane の作成者から正式にフォーキングおよび名前変更の許可を得ています。 Why Forking? シンプルな回答は、Datapane の開発が停止された一方で私はそのユーザーであるためです。 Datapane launched Datapana v0.2.76 has been published on PyPI. 2020/05 Started using Datapane My team has started using Datapane in an in-house project. 2022/12 Datapane declared EOL 2023/09 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 3/24
4. Why Renaming? The project name is too similar to an existing project and may be confusable. PyPI エラーを避けるため. プロジェクト名が既存のプロジェクトに似ている場合、PyPI はリリースを拒否します。 例えば、miniset という名前でプロジェクトを公開しようとしましたが、mindset という奇妙なプロジェクトがあるため拒否されました。 商標問題を避けるため。 ( 地名が商標として認められることはない?) Why Arakawa/Datapane? Arakawa は静的な HTML レポートを作成します。これは、plotly/dash や streamlit/streamlit などの動的データアプリに比べて以下の利点がありま す： Datapane announced the discontinue of the project. Reborn as Arakawa Arakawa has been published on PyPI. 2024/10 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 4/24
5. Arakawa creates a static HTML report. Which has benefits over dynamic data apps such as plotly/dash and streamlit/streamlit: コスト削減（Streamlit & Dash のように Web アプリを実行する必要はありません） 共有が簡単（HTML を送るだけ） What's New in Arakawa Pandas v1 to v2. NumPy v2 (support both v1 and v2). RELAX NG ( lxml ) to Pydantic. Misc.: Bokeh v2 to v3. Apache Arrow v9 to v18. CodeMirror v5 to v6. Vite v3 to v6. Demo Demo 詳細は公式ドキュメントをご覧ください。 Standard, In-House CDN and Standalone Modes Standard mode 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 5/24
6. このモードは https://cdn.jsdelivr.net/npm/arakawa@{VERSION}/dist か らアセットをロードします。 In-House CDN mode import arakawa as ar report = ar.Report(ar.Text("Hello, world!")) report.save("report.html", cdn_base="http://...") 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 6/24
7. Standalone mode スタンドアロンモードではアセットが HTML ファイルにインライン展開されるため、レポートのサイズが大幅に増加します。 How To Create a Data App by Python それでは、次のライブラリを見て、これがどのように設計されているかを理解しましょう: Arakawa/Datapane Streamlit Dash pydantic/FastUI ( 厳密にはこれはデータアプリではありませんが) report.save("report.html", standalone=True) Note 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 7/24
8. Data App Internals Python: Python オブジェクトを使用してデータをレイアウトします。 Python オブジェクトをシリアライズします。 Bridging: シリアライズされたオブジェクトを転送します。 Frontend: シリアライズされたオブジェクトを JavaScript オブジェクトにで Siri アライズします（optional ） 。 JavaScript オブジェクトをレンダリングします（オブジェクトをコンポーネントに変換します） 。 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 8/24
9. Data Layout Name How Arakawa Pydantic Datapane POPO Streamlit POPO Dash POPO FastUI Pydantic 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 9/24
10. POPO は Plain Old Python Object の略です。 Serialization Name How Arakawa JSON (Pydantic) Datapane XML (lxml / RELAX NG) Streamlit Protobuf Dash JSON FastUI JSON (Pydantic) Arakawa は JSON としてシリアライズされます: Note import arakawa as ar ar.Report(ar.Text("Hello, world!")) 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 10/24
11. Datapane は XML としてシリアライズされます: Streamlit { "blocks": [ { "content": "Hello, world!", "_type": "Text" } ], "_type": "View", "fragment": false, "version": 1 } import datapane as dp dp.Report(dp.Text("Hello, world!")) <View version="1" fragment="false"> <Text><![CDATA[Hello, world!]]></Text> </View> # test2.py import streamlit as st st.text("Hello, world!") 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 11/24
12. は Protobuf でシリアライズされます: 0a206336323266336238653032306362313661616462396233303666323438303535122612020000222037383363363064346534623164306165633430623539 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 12/24
13. 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 13/24
14. デコードされた Protobuf データにHello, world! が含まれていることがわかります。 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 14/24
15. 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 15/24
16. Dash は JSON としてシリアライズされます: from dash import Dash, html app = Dash() app.layout = [ html.P("Hello, world!"), ] if __name__ == "__main__": app.run(debug=True) 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 16/24
17. FastUI from fastapi import FastAPI from fastapi.responses import HTMLResponse from fastui import FastUI, prebuilt_html from fastui import components as c c.ModelForm.model_rebuild() 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 17/24
18. は JSON としてシリアライズされます: app = FastAPI() @app.get("/api/", response_model=FastUI, response_model_exclude_none=True) def api_index(): return c.Page(components=[c.Markdown(text="Hello, world!")]) @app.get("/{path:path}") async def html_landing() -> HTMLResponse: return HTMLResponse(prebuilt_html(title="FastUI Demo")) 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 18/24
19. Data Transfer Name How Arakawa JSON in HTML 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 19/24
20. Name How Datapane XML/JSON in HTML Streamlit WebSocket & REST API (Tornado) Dash HTTP/REST API (Flask) FastUI HTTP/REST API (FastAPI) Arakawa <!DOCTYPE html> <html lang="en"> <head> ... <script> ... window.reportProps = { id: "933e323547624153a21d16d1f1c275bf", htmlHeader, isLightProse: false, mode: "VIEW", reportWidthClass: "max-w-screen-xl", }; window.reportProps["appData"] = { data: { result: { viewJson: { blocks: [ { 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 20/24
21. Datapane content: "Hello, world!", _type: "Text", }, ], _type: "View", fragment: false, version: 1, }, assets: {}, }, }, }; </script> </head> ... </html> <!DOCTYPE html> <html lang="en"> <head> ... <script> window.reportProps = { htmlHeader, isLightProse: false, isOrg: false, mode: "VIEW", reportWidthClass: "max-w-screen-xl", }; if (!window.dpAppRunner) { window.reportProps["appData"] = { data: { result: { view_xml: 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 21/24
22. Frontend Name How Arakawa Vue Datapane Vue Streamlit React Dash React FastUI React Appendix: Serializing DataFrame '\u003cView version="1" fragment="false"\u003e\u003cText\u003e\u003c![CDATA[Hello, world!]]\u003e\u003c/Text\u003e\u003c/View\u003e', assets: {}, }, }, }; } </script> </head> ... </html> 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 22/24
23. データフレームは非常に大きくなることがあり、パフォーマンス問題やストレージ問題を引き起こす可能性があります。 Apache Arrow は、DataFrame をシリアライズするためのデファクトスタンダードで、フットプリントを小さくすることができます。 Arakawa/Datapane: Pandas DataFrame から Apache Arrow Table への変換をサポート。 Streamlit: Pandas/Dask/Modin/Polars/Snowpar k などから Apache Arrow Table への変換をサポート。 Dash: N/A. Streamlit Arakawa/Datapane import pandas as pd from vega_datasets import data from streamlit.dataframe_util import convert_pandas_df_to_arrow_bytes source: pd.DataFrame = data.flights_200k() >>> csv_bytes = source.to_csv().encode() >>> len(csv_bytes) 6219127 >>> arrow_bytes = convert_pandas_df_to_arrow_bytes(source) >>> len(arrow_bytes) 5547192 from arakawa.common.df_processor import process_df from streamlit.dataframe_util import convert_arrow_table_to_arrow_bytes source: pd.DataFrame = data.flights_200k() 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 23/24
24. Wrap-ups データアプリは、データアナリスト、リサーチャーなどにビジュアライゼーションとオンデマンドのデータ探索を通じて助けを提供します。 データアプリには二つのタイプがあります。スタンドアロンとクライアントサーバー。 Type Libraries What For Standalone Arakawa, Datapane 定期的なレポーティング Client-server Streamlit, Dash インタラクティブ性の高いデータアプリ 厳格なセキュリティポリシーが強制される場合には、スタンドアロンデータアプリが向いています。 例: https://github.com/CDPHE-bioinformatics/ncbi-cluster-tracker. 典型的なデータアプリは、Python とフロントエンドの SPA フレームワークに基づいて構築されます。 それは魔法ではなく、どのように動作するかを理解することで、自分だけのデータアプリを作成することができます（あるいは、既存のデ ータアプリライブラリを拡張することができます） 。 processed = process_df(source) >>> table = pa.Table.from_pandas(processed, preserve_index=False) >>> arrow_bytes = convert_arrow_table_to_arrow_bytes(table) >>> len(arrow_bytes) 2774016 1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python 127.0.0.1:8000 24/24