+ Searching for Pynecone? You are in the right repo. Pynecone has been renamed to Reflex. +
英語 | 简体中文 | 繁體中文 |テュルクチェ | हिंदी |ポルトガル語 (ブラジル) |イタリアーノ |スペイン語 | 한국어 | 日本語 |ドイツ語 |ペルシア語 (پارسی) |ティエン・ヴィエット
Reflex は、純粋な Python でフルスタック Web アプリを構築するためのライブラリです。
主な特徴:
Reflex が内部でどのように機能するかについては、アーキテクチャのページを参照してください。
ターミナルを開いて実行します (Python 3.9 以降が必要):
pip install reflex
reflex
インストールすると、 reflex
コマンド ライン ツールもインストールされます。
新しいプロジェクトを作成して、インストールが成功したかどうかをテストします。 ( my_app_name
プロジェクト名に置き換えます):
mkdir my_app_name
cd my_app_name
reflex init
このコマンドは、新しいディレクトリ内のテンプレート アプリを初期化します。
このアプリは開発モードで実行できます。
reflex run
アプリが http://localhost:3000 で実行されていることがわかります。
これで、 my_app_name/my_app_name.py
のソース コードを変更できるようになりました。 Reflex は高速更新を備えているため、コードを保存するとすぐに変更を確認できます。
例を見てみましょう: DALL·E を中心とした画像生成 UI の作成。わかりやすくするために、OpenAI API を呼び出すだけですが、これをローカルで実行される ML モデルに置き換えることもできます。
これを作成するための完全なコードは次のとおりです。これはすべて 1 つの Python ファイルで行われます。
import reflex as rx
import openai
openai_client = openai . OpenAI ()
class State ( rx . State ):
"""The app state."""
prompt = ""
image_url = ""
processing = False
complete = False
def get_image ( self ):
"""Get the image from the prompt."""
if self . prompt == "" :
return rx . window_alert ( "Prompt Empty" )
self . processing , self . complete = True , False
yield
response = openai_client . images . generate (
prompt = self . prompt , n = 1 , size = "1024x1024"
)
self . image_url = response . data [ 0 ]. url
self . processing , self . complete = False , True
def index ():
return rx . center (
rx . vstack (
rx . heading ( "DALL-E" , font_size = "1.5em" ),
rx . input (
placeholder = "Enter a prompt.." ,
on_blur = State . set_prompt ,
width = "25em" ,
),
rx . button (
"Generate Image" ,
on_click = State . get_image ,
width = "25em" ,
loading = State . processing
),
rx . cond (
State . complete ,
rx . image ( src = State . image_url , width = "20em" ),
),
align = "center" ,
),
width = "100%" ,
height = "100vh" ,
)
# Add state and page to the app.
app = rx . App ()
app . add_page ( index , title = "Reflex:DALL-E" )
UI から始めましょう。
def index ():
return rx . center (
...
)
このindex
関数はアプリのフロントエンドを定義します。
フロントエンドを構築するには、 center
、 vstack
、 input
、 button
などのさまざまなコンポーネントを使用します。コンポーネントを相互にネストして、複雑なレイアウトを作成できます。また、キーワード引数を使用して、CSS のフルパワーでスタイルを設定することもできます。
Reflex には、使い始めるのに役立つ 60 以上の組み込みコンポーネントが付属しています。私たちはコンポーネントを積極的に追加しており、独自のコンポーネントを簡単に作成できます。
Reflex は UI を状態の関数として表します。
class State ( rx . State ):
"""The app state."""
prompt = ""
image_url = ""
processing = False
complete = False
状態は、アプリ内の変更可能なすべての変数 (var と呼ばれる) とそれらを変更する関数を定義します。
ここで、状態はprompt
とimage_url
で構成されます。また、ボタンをいつ無効にするか (画像生成中)、いつ結果の画像を表示するかを示すブール値processing
とcomplete
あります。
def get_image ( self ):
"""Get the image from the prompt."""
if self . prompt == "" :
return rx . window_alert ( "Prompt Empty" )
self . processing , self . complete = True , False
yield
response = openai_client . images . generate (
prompt = self . prompt , n = 1 , size = "1024x1024"
)
self . image_url = response . data [ 0 ]. url
self . processing , self . complete = False , True
状態内で、状態変数を変更するイベント ハンドラーと呼ばれる関数を定義します。イベント ハンドラーは、Reflex で状態を変更できる方法です。これらは、ボタンのクリックやテキスト ボックスへの入力などのユーザーのアクションに応じて呼び出すことができます。これらのアクションはイベントと呼ばれます。
私たちのDALL・E。アプリには、OpenAI API からこの画像を取得するイベント ハンドラーget_image
があります。イベント ハンドラーの途中でyield
使用すると、UI が更新されます。それ以外の場合、UI はイベント ハンドラーの最後に更新されます。
最後に、アプリを定義します。
app = rx . App ()
アプリのルートからインデックス コンポーネントにページを追加します。ページのプレビュー/ブラウザー タブに表示されるタイトルも追加します。
app . add_page ( index , title = "DALL-E" )
さらにページを追加して、複数ページのアプリを作成できます。
?ドキュメント | ⁉️ブログ | コンポーネントライブラリ | ⁉️ テンプレート | ?導入
Reflex は、Pynecone という名前で 2022 年 12 月に発売されました。
2024 年 2 月の時点で、ホスティング サービスはアルファ版です。この期間中は、誰でも無料でアプリをデプロイできます。何が計画されているかについては、ロードマップをご覧ください。
Reflex には毎週新しいリリースと機能が登場します。必ずスターを付けてください。このリポジトリを監視して最新の情報を入手してください。
規模を問わず寄付を歓迎します。以下に、Reflex コミュニティを始めるための良い方法をいくつか示します。
私たちはあなたのスキルレベルや経験を問わず、積極的に貢献者を探しています。貢献するには、CONTIBUTING.md をチェックしてください
Reflex はオープンソースであり、Apache License 2.0 に基づいてライセンスされています。