|
|
@@ -0,0 +1,255 @@
|
|
|
+```diff
|
|
|
++ PyneconeはReflexに名前を変えました。Pyneconeを探している方は、今、ご覧のページがPyneconeのリポジトリになります。 +
|
|
|
+```
|
|
|
+
|
|
|
+<div align="center">
|
|
|
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
|
|
|
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
|
|
|
+
|
|
|
+<hr>
|
|
|
+
|
|
|
+### **✨ 即時デプロイが可能な、Pure Pythonで作ったパフォーマンスと汎用性が高いWebアプリケーション✨**
|
|
|
+[](https://badge.fury.io/py/reflex)
|
|
|
+
|
|
|
+
|
|
|
+[](https://reflex.dev/docs/getting-started/introduction)
|
|
|
+[](https://discord.gg/T5WSbC2YtQ)
|
|
|
+</div>
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+# Reflex
|
|
|
+
|
|
|
+ReflexはPythonのみでフルスタックWebアプリケーションを作成できるライブラリです。
|
|
|
+
|
|
|
+主な特徴:
|
|
|
+* **Pure Python** - WebアプリケーションのフロントエンドとバックエンドをPythonのみで実装できるため、Javascriptを学ぶ必要がありません。
|
|
|
+* **高い柔軟性** - Reflexは簡単に始められて、複雑なアプリケーションまで作成できます。
|
|
|
+* **即時デプロイ** - ビルド後、すぐにデプロイが可能です。[単純なCLIコマンド](https://reflex.dev/docs/hosting/deploy-quick-start/)を使ったアプリケーションのデプロイや、自身のサーバーへのホストができます。
|
|
|
+
|
|
|
+Reflexがどのように動作しているかを知るには、[アーキテクチャページ](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)をご覧ください。
|
|
|
+
|
|
|
+## ⚙️ インストール
|
|
|
+
|
|
|
+ターミナルを開いて以下のコマンドを実行してください。（Python 3.8以上が必要です。）:
|
|
|
+
|
|
|
+```bash
|
|
|
+pip install reflex
|
|
|
+```
|
|
|
+
|
|
|
+## 🥳 最初のアプリケーションを作ろう
|
|
|
+
|
|
|
+`reflex`をインストールすると、`reflex`のCLIツールが自動でインストールされます。
|
|
|
+
|
|
|
+新しいプロジェクトを作成して、インストールが成功しているかを確認しましょう。（`my_app_name`を自身のプロジェクト名に書き換えて実行ください。）:
|
|
|
+
|
|
|
+```bash
|
|
|
+mkdir my_app_name
|
|
|
+cd my_app_name
|
|
|
+reflex init
|
|
|
+```
|
|
|
+
|
|
|
+上記のコマンドを実行すると、新しいフォルダにテンプレートアプリを作成します。
|
|
|
+
|
|
|
+下記のコマンドを実行すると、開発モードでアプリを開始します。
|
|
|
+
|
|
|
+```bash
|
|
|
+reflex run
|
|
|
+```
|
|
|
+
|
|
|
+http://localhost:3000 にアクセスしてアプリの動作を見ることができます。
|
|
|
+
|
|
|
+`my_app_name/my_app_name.py`のソースコードを編集してみましょう！Reflexはfast refreshなので、ソースを保存した直後に変更がWebページに反映されます。
|
|
|
+
|
|
|
+## 🫧 実装例
|
|
|
+
|
|
|
+実装例を見てみましょう: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node)を中心とした画像生成UIを作成しました。説明を簡単にするためにここでは[OpenAI API](https://platform.openai.com/docs/api-reference/authentication)を呼んでいますが、ローカルで動作している機械学習モデルに置き換えることも可能です。
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<div align="center">
|
|
|
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="DALL·Eのフロントエンドラッパーです。画像を生成している過程を表示しています。" width="550" />
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+画像生成UIのソースコードの全貌を見てみましょう。下記のように、単一のPythonファイルで作れます！
|
|
|
+
|
|
|
+```python
|
|
|
+import reflex as rx
|
|
|
+import openai
|
|
|
+
|
|
|
+openai_client = openai.OpenAI()
|
|
|
+
|
|
|
+
|
|
|
+class State(rx.State):
|
|
|
+ """アプリのステート"""
|
|
|
+
|
|
|
+ prompt = ""
|
|
|
+ image_url = ""
|
|
|
+ processing = False
|
|
|
+ complete = False
|
|
|
+
|
|
|
+ def get_image(self):
|
|
|
+ """プロンプトからイメージを取得する"""
|
|
|
+ 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"),
|
|
|
+ rx.cond(
|
|
|
+ State.processing,
|
|
|
+ rx.chakra.circular_progress(is_indeterminate=True),
|
|
|
+ rx.cond(
|
|
|
+ State.complete,
|
|
|
+ rx.image(src=State.image_url, width="20em"),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ align="center",
|
|
|
+ ),
|
|
|
+ width="100%",
|
|
|
+ height="100vh",
|
|
|
+ )
|
|
|
+
|
|
|
+# ステートとページをアプリに追加
|
|
|
+app = rx.App()
|
|
|
+app.add_page(index, title="Reflex:DALL-E")
|
|
|
+```
|
|
|
+
|
|
|
+
|
|
|
+## それぞれの実装を見てみましょう
|
|
|
+
|
|
|
+<div align="center">
|
|
|
+<img src="../../docs/images/dalle_colored_code_example.png" alt="DALL-E appのフロントエンドとバックエンドのパーツの違いを説明しています。" width="900" />
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+### **Reflex UI**
|
|
|
+
|
|
|
+UIから見てみましょう。
|
|
|
+
|
|
|
+```python
|
|
|
+def index():
|
|
|
+ return rx.center(
|
|
|
+ ...
|
|
|
+ )
|
|
|
+```
|
|
|
+
|
|
|
+`index`関数において、アプリのフロントエンドを定義しています。
|
|
|
+
|
|
|
+フロントエンドを実装するにあたり、`center`、`vstack`、`input`、`button`など異なるコンポーネントを使用しています。コンポーネントはお互いにネストが可能であり、複雑なレイアウトを作成できます。また、keyword argsを使うことで、CSSの機能をすべて使ったスタイルが可能です。
|
|
|
+
|
|
|
+Reflexは[60を超える内臓コンポーネント](https://reflex.dev/docs/library)があるため、すぐに始められます。私たちは、積極的にコンポーネントを追加していますが、簡単に[自身のコンポーネントを追加](https://reflex.dev/docs/wrapping-react/overview/)することも可能です。
|
|
|
+
|
|
|
+### **ステート**
|
|
|
+
|
|
|
+Reflexはステートの関数を用いてUIを表示します。
|
|
|
+
|
|
|
+```python
|
|
|
+class State(rx.State):
|
|
|
+ """アプリのステート"""
|
|
|
+ prompt = ""
|
|
|
+ image_url = ""
|
|
|
+ processing = False
|
|
|
+ complete = False
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+ステートでは、アプリで変更が可能な全ての変数（varsと呼びます）と、varsの変更が可能な関数を定義します。
|
|
|
+
|
|
|
+この例では、ステートを`prompt`と`image_url`で構成しています。そして、ブール型の`processing`と`complete`を用いて、プログレスサークルと画像の表示を切り替えています。
|
|
|
+
|
|
|
+### **イベントハンドラ**
|
|
|
+
|
|
|
+```python
|
|
|
+def get_image(self):
|
|
|
+ """プロンプトからイメージを取得する"""
|
|
|
+ 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
|
|
|
+```
|
|
|
+
|
|
|
+ステートにおいて、ステートのvarsを変更できるイベントハンドラ関数を定義しています。イベントハンドラはReflexにおいて、ステートのvarsを変更する方法です。ボタンクリックやテキストボックスの入力など、ユーザのアクションに応じてイベントハンドラが呼ばれます。
|
|
|
+
|
|
|
+DALL·E.アプリには、OpenAI APIからイメージを取得する`get_image`関数があります。イベントハンドラの最後でUIの更新がかかるため、関数の途中に`yield`を入れることで先にUIを更新しています。
|
|
|
+
|
|
|
+### **ルーティング**
|
|
|
+
|
|
|
+最後に、アプリを定義します。
|
|
|
+
|
|
|
+```python
|
|
|
+app = rx.App()
|
|
|
+```
|
|
|
+
|
|
|
+アプリにページを追加し、ドキュメントルートをindexコンポーネントにルーティングしています。更に、ページのプレビューやブラウザタブに表示されるタイトルを記載しています。
|
|
|
+
|
|
|
+```python
|
|
|
+app.add_page(index, title="DALL-E")
|
|
|
+```
|
|
|
+
|
|
|
+ページを追加することで、マルチページアプリケーションを作成できます。
|
|
|
+
|
|
|
+## 📑 リソース
|
|
|
+
|
|
|
+<div align="center">
|
|
|
+
|
|
|
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Component Library](https://reflex.dev/docs/library) | 🖼️ [Gallery](https://reflex.dev/docs/gallery) | 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+## ✅ ステータス
|
|
|
+
|
|
|
+2022年12月に、ReflexはPyneconeという名前でローンチしました。
|
|
|
+
|
|
|
+2024年2月に、ホスティングサービスをアルファ版でリリースしました！アルファ版では、だれでもReflexアプリケーションを無料でデプロイできます。今後の予定は[ロードマップ](https://github.com/reflex-dev/reflex/issues/2727)において見れます。
|
|
|
+
|
|
|
+Reflexは毎週、新しいリリースや機能追加を行っています！最新情報を逃さないために、 :star: Starや :eyes: Watchをお願いします。
|
|
|
+
|
|
|
+## コントリビュート
|
|
|
+
|
|
|
+様々なサイズのコントリビュートを歓迎しています！Reflexコミュニティに入るための方法を、いくつかリストアップします。
|
|
|
+
|
|
|
+- **Discordに参加**: [Discord](https://discord.gg/T5WSbC2YtQ)は、Reflexプロジェクトの相談や、コントリビュートについての話し合いをするための、最適な場所です。
|
|
|
+- **GitHub Discussions**: GitHub Discussionsでは、追加したい機能や、複雑で解明が必要な事柄についての議論に適している場所です。
|
|
|
+- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)はバグの報告に適している場所です。また、課題を解決したPRのサブミットにチャレンジしていただくことも、可能です。
|
|
|
+
|
|
|
+スキルや経験に関わらず、私たちはコントリビュータを積極的に探しています。コントリビュートするために、[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)をご覧ください。
|
|
|
+
|
|
|
+
|
|
|
+## 私たちのコントリビュータに感謝！:
|
|
|
+<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
|
|
|
+ <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
|
|
|
+</a>
|
|
|
+
|
|
|
+## ライセンス
|
|
|
+
|
|
|
+Reflexはオープンソースであり、[Apache License 2.0](LICENSE)に基づいてライセンス供与されます。
|
PeterYusuke