-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0838e5a
commit d68792f
Showing
9 changed files
with
263 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)に基づいてライセンス供与されます。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.