#3321: Update Chinese README.md (#3350)

docs/zh/zh_cn/README.md

@@ -8,25 +8,36 @@
 
 <hr>
 
-**✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.**
-
-
+### **✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![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)
-
 </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/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md)
+
 ---
+
+# Reflex
+
+Reflex 是一个使用纯Python构建全栈web应用的库。
+
+关键特性：
+* **纯Python** - 前端、后端开发全都使用Python，不需要学习Javascript。
+* **完整的灵活性** - Reflex很容易上手, 并且也可以扩展到复杂的应用程序。
+* **立即部署** - 构建后，使用[单个命令](https://reflex.dev/docs/hosting/deploy-quick-start/)就能部署应用程序；或者也可以将其托管在您自己的服务器上。
+
+请参阅我们的[架构页](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)了解Reflex如何工作。
+
 ## ⚙️ 安装
 
 打开一个终端并且运行(要求Python3.8+):
 
-```
+```bash
 pip install reflex
 ```
 
@@ -36,7 +47,7 @@ pip install reflex
 
 通过创建一个新项目来测试是否安装成功(请把 my_app_name 替代为您的项目名字):
 
-```
+```bash
 mkdir my_app_name
 cd my_app_name
 reflex init
@@ -45,6 +56,7 @@ reflex init
 这段命令会在新文件夹初始化一个应用程序模板.
 
 您可以在开发者模式下运行这个应用程序:
+
 ```bash
 reflex run
 ```
@@ -55,7 +67,7 @@ reflex run
 
 ## 🫧 范例
 
-让我们来看一个例子: 创建一个使用 DALL·E 进行图像生成的图形界面.为了保持范例简单,我们只使用 OpenAI API,但是您可以将其替换成本地端的 ML 模型.
+让我们来看一个例子: 创建一个使用 [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node) 进行图像生成的图形界面.为了保持范例简单,我们只使用 OpenAI API,但是您可以将其替换成本地端的 ML 模型.
 
 &nbsp;
 
@@ -67,14 +79,19 @@ reflex run
 
 这是这个范例的完整代码,只需要一个 Python 文件就可以完成!
 
+
+
+
 ```python
 import reflex as rx
 import openai
 
-openai.api_key = "YOUR_API_KEY"
+openai_client = openai.OpenAI()
+
 
 class State(rx.State):
     """The app state."""
+    
     prompt = ""
     image_url = ""
     processing = False
@@ -87,33 +104,33 @@ class State(rx.State):
 
         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"]
+        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"),
-            rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt),
+            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",
+                "Generate Image", 
                 on_click=State.get_image,
-                is_loading=State.processing,
-                width="100%",
+                width="25em",
+                loading=State.processing
             ),
             rx.cond(
                 State.complete,
-                     rx.image(
-                         src=State.image_url,
-                         height="25em",
-                         width="25em",
-                    )
+                rx.image(src=State.image_url, width="20em"),
             ),
-            padding="2em",
-            shadow="lg",
-            border_radius="lg",
+            align="center",
         ),
         width="100%",
         height="100vh",
@@ -121,11 +138,20 @@ def index():
 
 # Add state and page to the app.
 app = rx.App()
-app.add_page(index, title="reflex:DALL·E")
+app.add_page(index, title="Reflex:DALL-E")
 ```
 
+
+
+
+
 ## 让我们分解以上步骤.
 
+<div align="center">
+<img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
+</div>
+
+
 ### **Reflex UI**
 
 让我们从UI开始.
@@ -142,7 +168,7 @@ def index():
 我们用不同的组件比如 `center`, `vstack`, `input`, 和 `button` 来创建前端, 组件之间可以相互嵌入,来创建复杂的布局.
 并且您可以使用关键字参数来使用 CSS 的全部功能.
 
-Reflex 拥有 [60+ 个内置组件](https://reflex.dev/docs/library) 来帮助您开始创建应用程序. 我们正在积极添加组件, 但是您也可以 [创建自己的组件](https://reflex.dev/docs/wrapping-react/overview/).
+Reflex 拥有 [60+ 个内置组件](https://reflex.dev/docs/library) 来帮助您开始创建应用程序. 我们正在积极添加组件, 但是您也可以容易的 [创建自己的组件](https://reflex.dev/docs/wrapping-react/overview/).
 
 ### **State**
 
@@ -155,12 +181,12 @@ class State(rx.State):
     image_url = ""
     processing = False
     complete = False
-```
 
+```
 
 State定义了所有可能会发生变化的变量(称为 vars)以及能够改变这些变量的函数.
 
-在这个范例中,State由 prompt 和 image_url 组成.此外,State还包含有两个布尔值 processing 和 complete,用于指示何时显示循环进度指示器和图像.
+在这个范例中,State由 `prompt` 和 `image_url` 组成.此外,State还包含有两个布尔值 `processing` 和 `complete`,用于指示何时显示循环进度指示器和图像.
 
 ### **Event Handlers**
 
@@ -172,14 +198,16 @@ def get_image(self):
 
     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"]
+    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
 ```
 
 在 State 中,我们定义了称为事件处理器(event handlers)的函数,用于改变状态变量(state vars).在Reflex中,事件处理器是我们可以修改状态的方式.它们可以作为对用户操作的响应而被调用,例如点击一个按钮或在文本框中输入.这些操作被称为事件.
 
-我们的DALL·E应用有一个事件处理器,名为 get_image,它用于从OpenAI API获取图像.在事件处理器中使用 yield 将导致UI进行更新.否则,UI将在事件处理器结束时进行更新.
+我们的DALL·E应用有一个事件处理器,名为 `get_image`,它用于从OpenAI API获取图像.在事件处理器中使用 `yield` 将导致UI进行更新.否则,UI将在事件处理器结束时进行更新.
 
 ### **Routing**
 
@@ -206,19 +234,13 @@ app.add_page(index, title="DALL-E")
 </div>
 
 
-
 ## ✅ 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 是可用于软件产品的.
+截至2024年2月，我们的托管服务处于alpha测试阶段！在此期间，任何人都可以免费部署他们的应用程序。请查看我们的[路线图](https://github.com/reflex-dev/reflex/issues/2727)以了解我们的计划。
 
-Reflex 每周都有新功能和发布新版本! 确保您按下 :star: 和 :eyes: watch 这个 repository 来确保知道最新信息.
+Reflex 每周都有新功能和发布新版本! 确保您按下 :star: 收藏和 :eyes: 关注 这个 仓库来确保知道最新信息.
 
 ## 贡献
 
@@ -226,10 +248,16 @@ Reflex 每周都有新功能和发布新版本! 确保您按下 :star: 和 :eyes
 
 -   **加入我们的 Discord**: 我们的 [Discord](https://discord.gg/T5WSbC2YtQ) 是帮助您加入 Reflex 项目和讨论或贡献最棒的地方.
 -   **GitHub Discussions**: 一个来讨论您想要添加的功能或是需要澄清的事情的好地方.
--   **GitHub Issues**: 报告错误的绝佳地方,另外您可以试着解决一些 issue 和送出 PR.
+-   **GitHub Issues**: [报告错误](https://github.com/reflex-dev/reflex/issues)的绝佳地方,另外您可以试着解决一些 issue 和送出 PR.
 
 我们正在积极寻找贡献者,无关您的技能或经验水平.
 
+
+## 感谢我们所有的贡献者:
+<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) 授权.