Streamlit デスクトッププロジェクトの始め方

フレームワーク#

Streamlit は、機械学習やデータビジュアライゼーションのための Python フレームワークで、数行のコードで美しいオンラインアプリケーションを構築できます。フロントエンドの初心者にとっては、さまざまな難しいフロントエンドフレームワークを学ぶ必要がなく、バックエンドでは Flask を使用してさまざまな API を簡単に作成でき、フロントエンドを美しくするためにはさまざまなフレームワークを学び、どのように美化するかを理解する必要がありますが、Streamlit はこの痛点を解決しました。

しかし、Streamlit はネイティブではサーバー上にのみデプロイでき、ウェブブラウザでの閲覧が必要です。これは産業用ソフトウェアには適しておらず、日本の友人が Streamlit プロジェクトをデスクトップアプリケーションにパッケージ化するためのラッパーフレームワークを構築しました。

Streamlit + Wasm + Electron = Desktop app

whitphx/stlite: In-browser Streamlit 🎈🚀

環境インストール#

[!NOTE]

既に nvm と基本的な node.js 環境を理解し、インストールしていることが前提です。未インストールの場合は、別の記事ブログ前端の二次開発 - 土星環の基地を参照してください。

Python の仮想環境の作成と pip の基本的な使い方を理解していることが前提です。この部分は Python の基礎です。

日本の友人のリポジトリにあるチュートリアルに従って、プロジェクトフォルダとして新しいフォルダを作成し、以下のpackage.jsonファイルを作成して新しい NPM プロジェクトを開始し、nameフィールドを編集します。

{
  "name": "xxx",
  "version": "0.1.0",
  "main": "./build/electron/main.js",
  "scripts": {
    "dump": "dump-stlite-desktop-artifacts",
    "serve": "cross-env NODE_ENV=production electron .",
    "app:dir": "electron-builder --dir",
    "app:dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "files": ["build/**/*"],
    "directories": {
      "buildResources": "assets"
    }
  },
  "devDependencies": {
    "@stlite/desktop": "^0.69.2",
    "cross-env": "^7.0.3",
    "electron": "33.3.1",
    "electron-builder": "^25.1.7"
  },
  "stlite": {
    "desktop": {
      "files": ["app.py"],
      "entrypoint": "app.py"
    }
  }
}

npm installを実行します。

この時、npm error Cannot read properties of null (reading 'matches')やnpm error RequestError: unable to verify the first certificateといったエラーが発生することがあります。プロジェクトフォルダ内の既存の node_modules フォルダを削除する必要があります。npm プロキシソースと electron プロキシソースを設定し、npm キャッシュをクリアします。

electron プロキシソースを変更するための良いコマンド方法がないため（ネット上のコマンド方法は無意味です）、Windows では C:\Users\ あなたのユーザー名フォルダ内の.npmrc ファイルを以下のように変更する必要があります。

registry=https://registry.npmmirror.com
strict-ssl=false
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

次に、以下のコマンドを実行してキャッシュをクリアし、再度npm installを実行すれば問題ありません。

npm cache clean --force

app.pyを作成し、Streamlit アプリケーションのコードを記述します。

ここでは、package.json内の関連設定項目stlite.desktop.filesおよびstlite.desktop.entrypointがapp.pyと指定されているため、ファイル名は必ずapp.pyでなければなりません。

stlite.desktop.filesで指定されたファイルとフォルダはデスクトップアプリにバンドルされ、stlite.desktop.entrypointはエントリーストリームリットアプリケーションを指定します。

以下は一例です。

import altair as alt
import numpy as np
import pandas as pd
import streamlit as st

"""
# Streamlitへようこそ！

このアプリをあなたの心のままにカスタマイズするには`/streamlit_app.py`を編集してください :heart:。
質問がある場合は、私たちの[ドキュメント](https://docs.streamlit.io)や[コミュニティフォーラム](https://discuss.streamlit.io)をチェックしてください。

その間に、数行のコードでできることの例を以下に示します：
"""

num_points = st.slider("スパイラルのポイント数", 1, 10000, 1100)
num_turns = st.slider("スパイラルのターン数", 1, 300, 31)

indices = np.linspace(0, 1, num_points)
theta = 2 * np.pi * num_turns * indices
radius = indices

x = radius * np.cos(theta)
y = radius * np.sin(theta)

df = pd.DataFrame({
    "x": x,
    "y": y,
    "idx": indices,
    "rand": np.random.randn(num_points),
})

st.altair_chart(alt.Chart(df, height=700, width=700)
.mark_point(filled=True)
.encode(
    x=alt.X("x", axis=None),
    y=alt.Y("y", axis=None),
    color=alt.Color("idx", legend=None, scale=alt.Scale()),
    size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
))

必要な 4 つのパッケージについては、新しい仮想環境を作成し、その仮想環境内でpython -m pip install altairのようなコマンドを使用してインストールすることをお勧めします。

さらに多くのファイルやディレクトリを追加します。

package.json内の関連設定項目stlite.desktop.filesを以下のように編集できます。これらのディレクトリや.py ファイルはすべて Streamlit のアプリケーションルールに従う必要があります。簡単に言えば、Python プロジェクトで使用するファイルをすべてここに追加します。

{
  // ...他のフィールド...
  "stlite": {
    "desktop": {
      // ...他のフィールド...
      "files": ["app.py", "pages/*.py", "assets"]
    }
  }
}

デスクトップアプリケーション内にパッケージをインストールするよう指定します。

package.json内の関連設定項目stlite.desktop.dependenciesを以下のように編集できます。簡単に言えば、Python プロジェクトで使用するパッケージをすべてここに追加します。

{
  // ...他のフィールド...
  "stlite": {
    "desktop": {
      // ...他のフィールド...
      "dependencies": ["altair", "numpy", "pandas", "streamlit"]
    }
  }
}

また、stlite.desktop.requirementsTxtFilesを以下のように編集することもできます。これは Python の標準依存関係指定ファイルで、一連の依存関係を指定できます。

{
  // ...他のフィールド...
  "stlite": {
    "desktop": {
      // ...他のフィールド...
      "requirementsTxtFiles": ["requirements.txt"]
    }
  }
}

Node ワーカースレッドを有効にします。

ワーカースレッドとは何かはまだよくわかりませんが、現象的にはワーカースレッドを有効にしないと Python コードの実行能力がなく、Pyodide が正常に起動せず、Streamlit アプリが起動できなくなります。

stlite.desktop.nodeJsWorkerを以下のように編集します。

{
  // ...他のフィールド...
  "stlite": {
    "desktop": {
      "nodeJsWorker": true
    }
  }
}

npm run dumpコマンドを使用します。

./buildディレクトリが作成され、多くの雑多なものが含まれています。これらはこのアプリケーションフレームワークに必要なものですが、これらは後の開発サーバーのためのものであり、実行可能なプログラムとして公開することはできません。
npm run serveコマンドを使用します。

このコマンドは単なるラッパーのelectronコマンドで、package.json内で実際のコマンドを確認できます。electronを起動し、アプリケーション./build/electron/main.jsを開始します。これはpackage.json内の"main"フィールドで指定されたものです。実質的な開発サーバーが起動し、デスクトップウィンドウのプレビューが開きます。
npm run app:distコマンドを使用します。

これもまたラッパーのelectronコマンドで、./buildディレクトリ内の雑多なものを組み合わせてインストーラーパッケージを作成し、./distフォルダに配置します。electron-builderには詳細な説明があります。
より適切なのはnpm run app:dirコマンドで、これにより./buildディレクトリにインストール不要のアプリケーションが生成されます。

後記#

このフレームワークは簡単なローカルアプリケーションを実行できず、完全なサーバーサポートが必要です。私の構想では、ローカルループバックアドレスを使用して socketio 通信を行うことができないため、使用を断念しました。

日本の兄貴の言葉によれば、Electron security best practices by whitphx · #445 · whitphx/stlite、これは Electron のセキュリティベストプラクティスに合致していません。

さらに、彼のラッパーは実際には指定された Python バージョンを使用して、私たちの package.json で指定されたパッケージをダウンロードし、サンドボックスで実行するものであり、私たちの産業界のデスクトップアプリケーションは 32 ビットシステムをサポートする必要がありますが、Streamlit の開発計画では 32 ビットシステムをサポートしておらず、0.62.0 の古いバージョンしか使用できません。したがって、全体のフレームワークの研究を断念しました。

この記事はMix Spaceによって xLog に同期更新されました。元のリンクはhttps://www.yono233.cn/posts/shoot/25_1_15_Streamlit_desktop