laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PR zh/zh_tw readme update (#1557)

Browse Source
This commit is contained in:
Milo Chen 2023-08-11 00:43:46 +08:00 committed by GitHub
parent bd9a8126d3
commit 2c61077796
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 87 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
docs/zh/zh_tw/README.md
View File

@ -1,79 +1,70 @@
<div align="center"> ```diff
+ 正在尋找 Pynecone？ 你在正確的 repo 中。 Pynecone 已更名為 Reflex。 +
```
<div align="center">
<img src="../../images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
<img src="../../images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
<img src="../../images/cones.png">
<hr> <hr>
**✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。** **✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。✨**
📑 [Docs](https://pynecone.io/docs/getting-started/introduction) &nbsp; 📱 [Component Library](https://pynecone.io/docs/library) &nbsp; 🖼️ [Gallery](https://pynecone.io/docs/gallery) &nbsp; 🛸 [Deployment](https://pynecone.io/docs/hosting/deploy)
[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex) [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
![tests](https://github.com/pynecone-io/pynecone/actions/workflows/build.yml/badge.svg) ![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
![versions](https://img.shields.io/pypi/pyversions/reflex-dev.svg) ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
[![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ) [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
</div> </div>
### 不同語言的 README
--- ---
[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)
[English](../../../README.md) | [简体中文](../zh_cn/README.md) | [繁體中文](README.md)
--- ---
## ⚙️ 安裝
## 📦 1. 安裝 開啟一個終端機並且執行 (需要 Python 3.7+):
Reflex 需要以下最低要求: ```bash
- Python 3.7+
- [Node.js 16.8.0+](https://nodejs.org/en/) (不用擔心，你不需要寫任何 JavaScript!)
```
pip install reflex pip install reflex
``` ```
## 🥳 2. 建立你的第一個應用程式 ## 🥳 建立你的第一個應用程式
安裝 Reflex 的同時也會安裝 `rx` 命令行工具. 通過創建一個新專案來測試是否安裝成功。 安裝 Reflex 的同時也會安裝 `reflex` 命令行工具。
把 my_app_name 替代為你的專案名字: 通過創建一個新專案來測試是否安裝成功。(把 my_app_name 作為新專案名稱):
``` ```bash
mkdir my_app_name mkdir my_app_name
cd my_app_name cd my_app_name
reflex init reflex init
``` ```
當你第一次運行這個命令，將會自動下載與安裝 [bun](https://bun.sh/)。 此命令會初始化一個應用程式模板在你的新資料夾中。
這個命令會初始化一個應用程式模板在一個新的資料夾。
## 🏃 3. 運行
你可以在開發者模式運行這個應用程式: 你可以在開發者模式運行這個應用程式:
``` ```bash
reflex run reflex run
``` ```
你可以看到你的應用程式運行在 http://localhost:3000。 你可以看到你的應用程式運行在 http://localhost:3000。
現在在以下位置修改原始碼 `my_app_name/my_app_name.py`，Reflex 擁有快速重整所以你可以在保存程式碼後馬上看到更改。 現在在以下位置修改原始碼 `my_app_name/my_app_name.py`，Reflex 擁有快速刷新功能，存儲程式碼後便可立即看到改變。
## 🫧 範例 ## 🫧 範例應用程式
讓我們來看一個例子: 建立一個使用 DALL·E 的圖形使用者介面，為了保持範例簡單，我們只使用 OpenAI API，但是你可以將其替換成本地端的 ML 模型。 讓我們來看一個例子: 建立一個使用 DALL·E 的圖形使用者介面，為了保持範例簡單，我們只呼叫 OpenAI API，而這部份可以置換掉，改為執行成本地端的 ML 模型。
&nbsp; &nbsp;
<div align="center"> <div align="center">
<img src="../images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" /> <img src="../../images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" />
</div> </div>
&nbsp; &nbsp;
這是上述範例的完整程式碼，只需要一個 Python 檔案就可以完成! 下方為該應用之完整程式碼，這一切都只需要一個 Python 檔案就能作到!
```python ```python
import reflex as rx import reflex as rx
@ -85,63 +76,58 @@ class State(rx.State):
"""應用程式狀態""" """應用程式狀態"""
prompt = "" prompt = ""
image_url = "" image_url = ""
image_processing = False processing = False
image_made = False complete = False
def process_image(self):
"""設置圖片處理旗標為 True 並設定還未產生圖片"""
self.image_processing = True
self.image_made = False
def get_image(self): def get_image(self):
"""運用 prompt 取得的參數產生圖片""" """透過提示詞取得圖片"""
if self.prompt == "":
return rx.window_alert("Prompt Empty")
self.processing, self.complete = True, False
yield
response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024") response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
self.image_url = response["data"][0]["url"] self.image_url = response["data"][0]["url"]
self.image_processing = False self.processing, self.complete = False, True
self.image_made = True
def index(): def index():
return rx.center( return rx.center(
rx.vstack( rx.vstack(
rx.heading("DALL·E", font_size="1.5em"), rx.heading("DALL·E"),
rx.input(placeholder="Enter a prompt..", on_blur=State.set_prompt), rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt),
rx.button( rx.button(
"產生圖片", "Generate Image",
on_click=[State.process_image, State.get_image], on_click=State.get_image,
is_loading=State.processing,
width="100%", width="100%",
), ),
rx.divider(),
rx.cond( rx.cond(
State.image_processing, State.complete,
rx.circular_progress(is_indeterminate=True),
rx.cond(
State.image_made,
rx.image( rx.image(
src=State.image_url, src=State.image_url,
height="25em", height="25em",
width="25em", width="25em",
) )
)
), ),
bg="white",
padding="2em", padding="2em",
shadow="lg", shadow="lg",
border_radius="lg", border_radius="lg",
), ),
width="100%", width="100%",
height="100vh", height="100vh",
bg="radial-gradient(circle at 22% 11%,rgba(62, 180, 137,.20),hsla(0,0%,100%,0) 19%)",
) )
# 把狀態跟頁面添加到應用程式。 # 把狀態跟頁面添加到應用程式。
app = rx.App(state=State) app = rx.App()
app.add_page(index, title="Reflex:DALL·E") app.add_page(index, title="reflex:DALL·E")
app.compile() app.compile()
``` ```
### **Reflex 中的圖形使用者介面** ## 讓我們來拆解一下。
### **Reflex 使用者介面**
讓我們分解以上步驟。 讓我們從使用介面開始。
```python ```python
def index(): def index():
@ -150,17 +136,15 @@ def index():
) )
``` ```
這個 `index` function 定義了應用程式的前端. 這個 `index` 函式定義了應用程式的前端.
我們用不同的元件像是 `center`, `vstack`, `input`, 和 `button` 來建立前端， 元件之間可以相互嵌入，來建立複雜的佈局。 我們用不同的元件像是 `center`, `vstack`, `input`, 和 `button` 來建立前端，元件之間可互相套入以建立出複雜的版面配置。並且您可使用關鍵字引數 *keyword args* 運行 CSS 全部功能來設計這些元件們的樣式。
並且你可以使用關鍵字參數來使用 CSS 的全部功能。
Reflex 擁有 [60+ built-in components](https://pynecone.io/docs/library) 來幫助你開始建立應用程式。 Reflex 擁有 [60+ 內建元件](https://reflex.dev/docs/library) 來幫助你開始建立應用程式。我們正積極添加元件，你也可以簡單地 [創建自己所屬的元件](https://reflex.dev/docs/advanced-guide/wrapping-react)。
我們正在積極添加元件， 但是你也可以簡單的自己創建一些元件 [create your own components](https://pynecone.io/docs/advanced-guide/wrapping-react)。
### **狀態** ### **應用程式狀態**
Reflex 用 State 來渲染你的 UI。 Reflex 使用應用程式狀態中的函式來渲染你的 UI。
```python ```python
class State(rx.State): class State(rx.State):
@ -171,55 +155,66 @@ class State(rx.State):
image_made = False image_made = False
``` ```
State 定義了應用程式中所有可以更改的變數及變更他們的 function (稱為 vars)。 應用程式狀態定義了應用程式中所有可以更改的變數及變更他們的函式 (稱為 vars)。
這裡的狀態由 `prompt` 和 `image_url`組成， 以及布林變數 `image_processing` 和 `image_made` 來決定何時顯示進度條及圖片。 這裡的狀態由 `prompt` 和 `image_url`組成， 以及布林變數 `processing` 和 `complete` 來指示何時顯示進度條及圖片。
### **事件處理程序** ### **事件處理程序**
```python ```python
def process_image(self): def get_image(self):
"""設置圖片處理旗標為 True 並設定還未產生圖片""" """透過提示詞取得圖片"""
self.image_processing = True if self.prompt == "":
self.image_made = False return rx.window_alert("Prompt Empty")
def get_image(self): self.processing, self.complete = True, False
"""運用 prompt 取得的參數產生圖片""" yield
response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024") response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
self.image_url = response["data"][0]["url"] self.image_url = response["data"][0]["url"]
self.image_processing = False self.processing, self.complete = False, True
self.image_made = True
``` ```
在 State 中我們定義了事件處理程序來更改狀態變數，事件處理程序是我們在 Reflex 中修改狀態的方法，可以使用它們來回應使用者操作，像是點擊按鈕或在文字框輸入這些動作都是一種事件。 在應用程式狀態中，我們定義稱之為事件處理程序的函式來改變其 vars. 事件處理程序是我們用來改變 Reflex 應用程式狀態的方法。
我們的 DALL·E. 應用程式有兩個事件處理程序 `process_image` 表示正在生成圖片和 `get_image` 呼叫 OpenAI API。 當使用者動作被響應時，對應的事件處理程序就會被呼叫。點擊按鈕或是文字框輸入都是使用者動作，它們被稱之為事件。
我們的 DALL·E. 應用程式有一個事件處理程序 `get_image`，它透過 Open AI API 取得圖片。在事件處理程序中使用 `yield` 將讓使用者介面中途更新，若不使用的話，使用介面只能在事件處理程序結束時才更新。
### **路由** ### **路由**
最後定義我們的應用程式並傳送狀態給它。 最後，我們定義我們的應用程式 app。
```python ```python
app = rx.App(state=State) app = rx.App()
``` ```
添加從應用程式根目錄到 index 元件的路由。 我們也添加了一個標題將會顯示在 預覽/瀏覽 分頁。 添加從應用程式根目錄(root of the app) 到 index 元件的路由。 我們也添加了一個標題將會顯示在 預覽/瀏覽 分頁。
```python ```python
app.add_page(index, title="Reflex:DALL-E") app.add_page(index, title="DALL-E")
app.compile() app.compile()
``` ```
你可以藉由通過添加路由來增加更多頁面。 你可以添加更多頁面至路由藉此來建立多頁面應用程式(multi-page app)
## Reflex 狀態 ## 📑 資源
Reflex 於 2022 年 12 月推出。 <div align="center">
截至 2023 年 3 月，我們處於 **Public Beta** 階段。 📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Gallery](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy) &nbsp;
</div>
## ✅ Reflex 狀態
Reflex 於 2022 年 12 月推出，當時名為 Pynecone。
截至 2023 年 7 月，我們處於 **Public Beta** 階段。
- :white_check_mark: **Public Alpha**: 任何人都可以安裝與使用 Reflex，或許包含問題， 但我們正在積極的解決他們。 - :white_check_mark: **Public Alpha**: 任何人都可以安裝與使用 Reflex，或許包含問題， 但我們正在積極的解決他們。
- :large_orange_diamond: **Public Beta**: 對於非軟體產品來說足夠穩定。 - :large_orange_diamond: **Public Beta**: 對於不涉及商業目的使用情境來說足夠穩定。
- **Public Hosting Beta**: _Optionally_, 部屬跟託管你的 Reflex! - **Public Hosting Beta**: _Optionally_, 部屬跟託管你的 Reflex!
- **Public**: 這版本的 Reflex 是可用於軟體產品的。 - **Public**: 這版本的 Reflex 是可用於軟體產品的。
@ -233,7 +228,7 @@ Reflex 每周都有新功能和釋出新版本! 確保你按下 :star: 和 :eyes
- **GitHub Discussions**: 一個來討論你想要添加的功能或是需要澄清的事情的好地方。 - **GitHub Discussions**: 一個來討論你想要添加的功能或是需要澄清的事情的好地方。
- **GitHub Issues**: 報告錯誤的絕佳地方，另外你可以試著解決一些 issue 和送出 PR。 - **GitHub Issues**: 報告錯誤的絕佳地方，另外你可以試著解決一些 issue 和送出 PR。
我們正在積極尋找貢獻者，無關你的技能或經驗水平。 我們正在積極尋找貢獻者，無關你的技能水平或經驗。
## 授權 ## 授權