From 161a77ca23df8c45e39f0cd7e538259debb4bdc4 Mon Sep 17 00:00:00 2001 From: sszzz830 <32834442+sszzz830@users.noreply.github.com> Date: Thu, 31 Aug 2023 00:48:16 +0800 Subject: [PATCH] Update zh_cn README.md (#1685) --- docs/zh/zh_cn/README.md | 210 ++++++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 106 deletions(-) diff --git a/docs/zh/zh_cn/README.md b/docs/zh/zh_cn/README.md index db76ba96a..f04a2a8e8 100644 --- a/docs/zh/zh_cn/README.md +++ b/docs/zh/zh_cn/README.md @@ -1,43 +1,40 @@ -
+```diff ++ 寻找 Pynecone 吗？您来对了.Pynecone 已经更名为 Reflex.+ +``` + +
+Reflex Logo +Reflex Logo -
-**✨ 使用 Python 创建高效且可自订的网页应用程序，几秒钟内即可部署。** +**✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.** -📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   📱 [Component Library](https://reflex.dev/docs/library)   🖼️ [Gallery](https://reflex.dev/docs/gallery)   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy) [![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) -![versions](https://img.shields.io/pypi/pyversions/reflex-dev.svg) +![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.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)
-### 不同语言的 README - --- - -[English](../../../README.md) | [简体中文](README.md) | [繁体中文](../zh_tw/README.md) - +[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) --- +## ⚙️ 安装 -## 📦 1. 安装 - -Reflex 需要以下最低要求: - -- Python 3.7+ -- [Node.js 16.8.0+](https://nodejs.org/en/) (不用担心，你不需要写任何 JavaScript!) +打开一个终端并且运行(要求Python3.7+): ``` pip install reflex ``` -## 🥳 2. 创建你的第一个应用程序 +## 🥳 创建您的第一个应用程序 -安装 Reflex 的同时也会安装 `rx` 命令行工具. 通过创建一个新项目来测试是否安装成功。 +安装 Reflex 的同时也会安装 `rx` 命令行工具. -把 my_app_name 替代为你的项目名字: +通过创建一个新项目来测试是否安装成功(请把 my_app_name 替代为您的项目名字): ``` mkdir my_app_name @@ -45,35 +42,30 @@ cd my_app_name reflex init ``` -当你第一次运行这个命令，将会自动下载与安装 [bun](https://bun.sh/)。 +这段命令会在新文件夹初始化一个应用程序模板. -这个命令会初始化一个应用程序模板在一个新的文件夹。 - -## 🏃 3. 运行 - -你可以在开发者模式运行这个应用程序: - -``` +您可以在开发者模式下运行这个应用程序: +```bash 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 模型.  
-A frontend wrapper for DALL·E, shown in the process of generating an image. +DALL·E的前端界面, 展示了图片生成的进程
  -这是上述范例的完整代码，只需要一个 Python 文件就可以完成! +这是这个范例的完整代码,只需要一个 Python 文件就可以完成! ```python import reflex as rx @@ -82,66 +74,62 @@ import openai openai.api_key = "YOUR_API_KEY" class State(rx.State): - """应用程序状态""" + """The app state.""" prompt = "" image_url = "" - image_processing = False - image_made = False - - def process_image(self): - """设置图片处理旗标为 True 并设置还未产生图片""" - self.image_processing = True - self.image_made = False + processing = False + complete = False def get_image(self): - """运用 prompt 取得的参数产生图片""" + """Get the image from the 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") self.image_url = response["data"][0]["url"] - self.image_processing = False - self.image_made = True + 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), + rx.heading("DALL·E"), + rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt), rx.button( - "产生图片", - on_click=[State.process_image, State.get_image], + "Generate Image", + on_click=State.get_image, + is_loading=State.processing, width="100%", ), - rx.divider(), rx.cond( - State.image_processing, - rx.circular_progress(is_indeterminate=True), - rx.cond( - State.image_made, + State.complete, rx.image( src=State.image_url, height="25em", width="25em", ) - ) ), - bg="white", padding="2em", shadow="lg", border_radius="lg", ), width="100%", 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.add_page(index, title="Reflex:DALL·E") +# Add state and page to the app. +app = rx.App() +app.add_page(index, title="reflex:DALL·E") app.compile() ``` -### **Reflex 中的图形用户接口** +## 让我们分解以上步骤. -让我们分解以上步骤。 +### **Reflex UI** + +让我们从UI开始. ```python def index(): @@ -150,91 +138,101 @@ def index(): ) ``` -这个 `index` function 定义了应用程序的前端. +这个 `index` 函数定义了应用程序的前端. -我们用不同的组件像是 `center`, `vstack`, `input`, 和 `button` 来创建前端， 组件之间可以相互嵌入，来创建复杂的布局。 -并且你可以使用关键字参数来使用 CSS 的全部功能。 +我们用不同的组件比如 `center`, `vstack`, `input`, 和 `button` 来创建前端, 组件之间可以相互嵌入,来创建复杂的布局. +并且您可以使用关键字参数来使用 CSS 的全部功能. -Reflex 拥有 [60+ built-in components](https://reflex.dev/docs/library) 来帮助你开始创建应用程序。 -我们正在积极添加组件， 但是你也可以简单的自己创建一些组件 [create your own components](https://reflex.dev/docs/advanced-guide/wrapping-react)。 +Reflex 拥有 [60多个内置组件](https://reflex.dev/docs/library) 来帮助您开始创建应用程序. 我们正在积极添加组件, 但是您也可以 [创建自己的组件](https://reflex.dev/docs/advanced-guide/wrapping-react). -### **状态** +### **State** -Reflex 用 State 来渲染你的 UI。 +Reflex 用 State 来渲染您的 UI. ```python class State(rx.State): - """应用程序状态""" + """The app state.""" prompt = "" image_url = "" - image_processing = False - image_made = False + processing = False + complete = False ``` -State 定义了应用程序中所有可以更改的变量及变更他们的 function (称为 vars)。 -这里的状态由 `prompt` 和 `image_url`组成， 以及布尔变量 `image_processing` 和 `image_made` 来决定何时显示进度条及图片。 +State定义了所有可能会发生变化的变量(称为 vars)以及能够改变这些变量的函数. -### **事件处理进程** +在这个范例中,State由 prompt 和 image_url 组成.此外,State还包含有两个布尔值 processing 和 complete,用于指示何时显示循环进度指示器和图像. + +### **Event Handlers** ```python - def process_image(self): - """设置图片处理旗标为 True 并设置还未产生图片""" - self.image_processing = True - self.image_made = False +def get_image(self): + """Get the image from the prompt.""" + if self.prompt == "": + return rx.window_alert("Prompt Empty") - def get_image(self): - """运用 prompt 取得的参数产生图片""" - response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024") - self.image_url = response["data"][0]["url"] - self.image_processing = False - self.image_made = True + self.processing, self.complete = True, False + yield + response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024") + self.image_url = response["data"][0]["url"] + self.processing, self.complete = False, True ``` -在 State 中我们定义了事件处理进程来更改状态变量，事件处理进程是我们在 Reflex 中修改状态的方法，可以使用它们来回应用户操作，像是点击按钮或在文本框输入这些动作都是一种事件。 +在 State 中,我们定义了称为事件处理器(event handlers)的函数,用于改变状态变量(state vars).在Reflex中,事件处理器是我们可以修改状态的方式.它们可以作为对用户操作的响应而被调用,例如点击一个按钮或在文本框中输入.这些操作被称为事件. -我们的 DALL·E. 应用程序有两个事件处理进程 `process_image` 表示正在生成图片和 `get_image` 调用 OpenAI API。 +我们的DALL·E应用有一个事件处理器,名为 get_image,它用于从OpenAI API获取图像.在事件处理器中使用 yield 将导致UI进行更新.否则,UI将在事件处理器结束时进行更新. -### **路由** +### **Routing** -最后定义我们的应用程序并发送状态给它。 +最后,定义我们的应用程序. ```python -app = rx.App(state=State) +app = rx.App() ``` -添加从应用程序根目录到 index 组件的路由。 我们也添加了一个标题将会显示在 预览/浏览 分页。 +We add a page from the root of the app to the index component. We also add a title that will show up in the page preview/browser tab. +添加从应用程序根目录到 index 组件的路由.我们还添加了一个在页面预览或浏览器标签中显示的标题. ```python -app.add_page(index, title="Reflex:DALL-E") +app.add_page(index, title="DALL-E") app.compile() ``` -你可以借由通过添加路由来增加更多页面。 +您可以通过增加更多页面来创建一个多页面的应用. -## Reflex 状态 +## 📑 资源 -Reflex 于 2022 年 12 月推出。 +
-截至 2023 年 3 月，我们处于 **Public Beta** 阶段。 +📑 [文档](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [日志](https://reflex.dev/blog)   |   📱 [组件库](https://reflex.dev/docs/library)   |   🖼️ [展览](https://reflex.dev/docs/gallery)   |   🛸 [部署](https://reflex.dev/docs/hosting/deploy)   -- :white_check_mark: **Public Alpha**: 任何人都可以安装与使用 Reflex，或许包含问题， 但我们正在积极的解决他们。 -- :large_orange_diamond: **Public Beta**: 对于非软件产品来说足够稳定。 -- **Public Hosting Beta**: _Optionally_, 部属跟托管你的 Reflex! -- **Public**: 这版本的 Reflex 是可用于软件产品的。 +
-Reflex 每周都有新功能和发布新版本! 确保你按下 :star: 和 :eyes: watch 这个 repository 来确保知道最新信息。 + + +## ✅ Reflex 的状态 + +Reflex 于 2022 年 12 月以Pynecone的名称推出. + +在2023年7月, 我们处于 **Public Beta** 阶段. + +- :white_check_mark: **Public Alpha**: 任何人都可以安装与使用 Reflex,或许包含问题, 但我们正在积极的解决他们. +- :large_orange_diamond: **Public Beta**: 对于非软件产品来说足够稳定. +- **Public Hosting Beta**: _Optionally_, 部属跟托管您的 Reflex! +- **Public**: 这版本的 Reflex 是可用于软件产品的. + +Reflex 每周都有新功能和发布新版本! 确保您按下 :star: 和 :eyes: watch 这个 repository 来确保知道最新信息. ## 贡献 -我们欢迎任何大小的贡献，以下是几个好的方法来加入 Reflex 社群。 +我们欢迎任何大小的贡献,以下是几个好的方法来加入 Reflex 社群. -- **加入我们的 Discord**: 我们的 [Discord](https://discord.gg/T5WSbC2YtQ) 是帮助你加入 Reflex 项目和讨论或贡献最棒的地方。 -- **GitHub Discussions**: 一个来讨论你想要添加的功能或是需要澄清的事情的好地方。 -- **GitHub Issues**: 报告错误的绝佳地方，另外你可以试着解决一些 issue 和送出 PR。 +- **加入我们的 Discord**: 我们的 [Discord](https://discord.gg/T5WSbC2YtQ) 是帮助您加入 Reflex 项目和讨论或贡献最棒的地方. +- **GitHub Discussions**: 一个来讨论您想要添加的功能或是需要澄清的事情的好地方. +- **GitHub Issues**: 报告错误的绝佳地方,另外您可以试着解决一些 issue 和送出 PR. -我们正在积极寻找贡献者，无关你的技能或经验水平。 +我们正在积极寻找贡献者,无关您的技能或经验水平. ## 授权 -Reflex 是一个开源项目且使用 [Apache License 2.0](LICENSE) 授权。 \ No newline at end of file +Reflex 是一个开源项目,使用 [Apache License 2.0](LICENSE) 授权.