⛱️

Reactpy をローカル環境で試す。Ryeも使う

2023/06/14に公開

この記事は

「うすい」というものが機械学習・AI で何か作りたい気持ちで書いています。

最近画像生成AI や ChatGPT と戯れてばかりでまともに技術やってないので、『創作に寄与するツール』や『つくよみちゃん応援』以外でも少しアウトプットを考えます。

モチベ その1:最近の Python ツールをキャッチアップ

巷では Pythonで Web の UI を作れる様々なツールが出ています。Python で Web を作れるようなツールというと思い出すのは、2019年くらいから Streamlit が出てきました。

そこから、NiceGUI や Gradio といったツールが出てきましたが、最近は又他にも ReactPy のようなフロントエンドを Python で構築できるようなツールが出てきているようです。少し試してみたいと思います。

モチベ その2:ローカル環境構築の一軍を定着させたい

LLMや画像生成などは、多くの場合私は、Colab あるいは Paperspace の Cloud で済ましてしまいます。

強いGPUが利用できる事が一番のメリットですが、地味に
『都度環境が破棄されるので毎回クリーンな実行環境で構築・利用できる』
というのも魅力の一つではないでしょうか?

pythonやtorchなど、バージョンが変わると動かないことも多い AI 系のツールは、ローカルで複数環境が動作するようにする方法にいつも頭を悩ませます。

最近、『Rye』というPython環境管理のツールが出ており、これが便利との噂ですので、まずは利用してみます。

利用環境

  • Windows11 WSL2 (Ubuntu 20.04.6 LTS)
  • Rye

下はインストール後の pyproject.toml の中身(一部抜粋)

[project]
dependencies = [
    "reactpy[fastAPI]~=1.0.0",
    "fastapi~=0.97.0",
]
requires-python = ">= 3.8"

Rye新規環境構築(不要であればスキップ)

Rye のインストールは以下のコマンド。

$ curl -sSf https://rye-up.com/get | bash

Rye を最新状態にアップデートします。

rye self update

Ryeの環境変数を設定。

$ source "$HOME/.rye/env"

これで環境構築は終了です。

ReactPy を使う

Rye でプロジェクトの初期化をします。既存のプロジェクトを扱う場合もpyproject.tomlのあるフォルダでこちらのコマンドを実行してください。

$ rye init reactpy-project

プロジェクト名を指定した場合は cd コマンドでフォルダに移動しましょう。そうでないとpyproject.toml がないと怒られます。

$ cd reactpy-project

まずは、Pythonのバージョンを指定します。

$ rye pin 3.10

次に、ReactPy のインストールを指定します。今回こちらのツールでサポートされているサーバとしてFastAPIも利用できますね。FastAPIも入れていきます。

$ rye add reactpy[fastAPI] fastapi

まだ add が終わっても、インストールはされていません。pyproject.toml に書き込まれただけなので、指定が終わったら、最後に sync コマンドでインストールを試みます。

$ rye sync

rye sync が終わったら、サンプルを実行してみます。

$ rye run python -c "import reactpy; reactpy.run(reactpy.sample.SampleApp)"

http://127.0.0.1:8000/

以下のような画面が出てくれば成功です。

ReactPy を使う、FastAPIで

しかし、上記のサンプルは Starlette を利用してしまい、せっかく入れた FastAPI を使ってくれません。少し公式のサンプルを変更します。以下をコピペして main.py というファイルに保存してください。

from fastapi import FastAPI
from uvicorn import run
from reactpy import component, html
from reactpy.backend.fastapi import configure

@component
def HelloWorld():
    return html.h1("Hello, world!")

app = FastAPI()
configure(app, HelloWorld)

if __name__ == "__main__":
    run(app)

これで、 FastAPI での起動ができるようになります。

$ rye run python main.py

実行のログもこのように Uvicorn が利用されている、と出たら成功です。

INFO:     Started server process [2059]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     ('127.0.0.1', 38044) - "WebSocket /_reactpy/stream" [accepted]
INFO:     connection open

ReactPy の UI サンプル追加

うーん、『Hello World!』しただけでは、面白い画面にならないですね。これだと Python でなくても……という感じもしますので、もう少しだけサンプル追加します。

公式サンプルもありますが、『画像生成AI』界の麒麟児、だだっこぱんだ様がいち早く、ご自分用のUIライブラリを作成中のようですので、少し拝借いたしましょう。

まずはライブラリを持ってきます。

$ git clone https://github.com/ddPn08/dukkha

あとは、そのまま実行して、以下のような画面が表示されれば成功です。
 しかし、こんな凝った UI が Python で作れるとは……。

$rye run python dukkha/view.py

Python というサーバサイドから TailwindCSSやフロントエンドの技術も利用ができるということで、すごいことになりそうな予感がします。

私自体は、サーバサイド中心ですのであまりフロントエンド技術は分からないのですが、このように素晴らしいサイトが構築できるようになるのなら、もう少しフロントエンド側やデザインの基礎くらいは学習して良いサイトを作っていきたいですね。

『フロントエンドが作れる Python』でやりたいこと

様々な将来性は感じますが、私が現時点で利用しようと考えるのは、「Chatbotでの利用」です。

ChatGPT は現在色々なライブラリで利用できます。しかし、embedding や Langchain などで独自データを学習しようとすると、どうしても Python ライブラリを利用することが必須になります。

ものぐさな人間としては、どうしてもバックとフロント両方の利用に時間がかかるので、Pythonに技術が集約しているのは大変に助かるのですよね。

NextやReactなど、フロント技術で全てが集約されるか、バックエンドからフロント技術が利用できる、あるいはクロスプラットフォームのような技術など、統合的な仕組みになっていくのは新技術を覚えるのに苦労している身としては、大歓迎です。

そういえば、Chainlit という新ツールもありました。次回はChainlit を触ってみようかな。

Rye 関係ない人向け

Rye は別にやりたくないけど ReactPy はやってみたい……という人向けに ReactPy 以降のpythonコマンドをこちらにまとめます。

ReactPyのインストール

$pip install reactpy[fastAPI] fastapi

サンプルの実行

$python -c "import reactpy; reactpy.run(reactpy.sample.SampleApp)"

上に貼った、FastAPI版の main.py作成し、以下のコマンドで実行

$python main.py

だだっこぱんだ様のライブラリを持ってくる

$ git clone https://github.com/ddPn08/dukkha

あとは、view.pyを実行して、表示を確認

$rye run python dukkha/view.py

紹介したURL参考にしたURL

RyeによるPython環境の管理
https://zenn.dev/3w36zj6/scraps/0c3b04151796fc

Rye メモ
https://zenn.dev/voluntas/scraps/4520c74c814219

pythonパッケージ管理ツールryeを使う - 肉球でキーボード
https://nsakki55.hatenablog.com/entry/2023/05/29/013658

ReactPy公式ドキュメント
https://reactpy.dev/docs/index.html

Reactpyとか言う面白いライブラリ
https://zenn.dev/ddpn08/articles/reactpy-introduction

Discussion