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 を開始します。これは指定された "main" フィールドの package.json にあります。実質的な開発サーバーが起動し、デスクトップウィンドウのプレビューが開きます。
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