+ 正在搜索Pynecone？您来对地方了。Pynecone已更名为Reflex。+

✨ 使用纯Python构建高性能、可定制的Web应用。几秒内即可部署。✨

Reflex

Reflex是一个用纯Python构建全栈Web应用的库。

主要特点：

纯Python - 使用Python编写应用的前端和后端，无需学习JavaScript。
完全灵活 - Reflex易于上手，同时也能扩展到复杂的应用。
即时部署 - 构建完成后，可以通过单个命令部署您的应用，或在自己的服务器上托管。

查看我们的架构页面了解Reflex的工作原理。

⚙️ 安装

打开终端并运行（需要Python 3.8+）：

pip install reflex

🥳 创建您的第一个应用

安装reflex的同时也会安装reflex命令行工具。

通过创建一个新项目来测试安装是否成功。（将my_app_name替换为您的项目名称）：

mkdir my_app_name
cd my_app_name
reflex init

此命令会在您的新目录中初始化一个模板应用。

您可以在开发模式下运行此应用：

reflex run

您应该能在http://localhost:3000看到您的应用运行。

现在您可以修改my_app_name/my_app_name.py中的源代码。Reflex具有快速刷新功能，因此当您保存代码时，可以立即看到更改。

🫧 示例应用

让我们来看一个示例：创建一个围绕DALL·E的图像生成UI。为简单起见，我们只调用OpenAI API，但您可以将其替换为本地运行的ML模型。

以下是创建此应用的完整代码。这全部在一个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("提示为空")

        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="输入提示..",
                on_blur=State.set_prompt,
                width="25em",
            ),
            rx.button(
                "生成图像", 
                on_click=State.get_image,
                width="25em",
                loading=State.processing
            ),
            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="https://yellow-cdn.veclightyear.com/835a84d5/afe9f57e-87de-457b-b3a0-6e9a91edfc92.png" alt="解释DALL-E应用程序的后端和前端部分之间的差异。" width="900" />
</div>

### **Reflex UI**

我们从UI开始。

```python
def index():
    return rx.center(
        ...
    )

这个index函数定义了应用程序的前端。

我们使用不同的组件，如center、vstack、input和button来构建前端。组件可以相互嵌套以创建复杂的布局。你可以使用关键字参数来使用CSS的全部功能对它们进行样式设置。

Reflex提供了60多个内置组件来帮助你入门。我们正在积极添加更多组件，并且创建自己的组件也很容易。

状态

Reflex将你的UI表示为状态的函数。

class State(rx.State):
    """应用程序状态。"""
    prompt = ""
    image_url = ""
    processing = False
    complete = False

状态定义了应用程序中所有可以改变的变量（称为vars）以及改变它们的函数。

这里的状态由prompt和image_url组成。还有布尔值processing和complete，用于指示何时禁用按钮（在图像生成期间）以及何时显示生成的图像。

事件处理器

def get_image(self):
    """从提示中获取图像。"""
    if self.prompt == "":
        return rx.window_alert("提示为空")

    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

在状态内，我们定义了称为事件处理器的函数，用于更改状态变量。事件处理器是我们在Reflex中修改状态的方式。它们可以响应用户操作而被调用，比如点击按钮或在文本框中输入。这些操作被称为事件。

我们的DALL·E应用程序有一个事件处理器get_image，用于从OpenAI API获取图像。在事件处理器中间使用yield将导致UI更新。否则，UI将在事件处理器结束时更新。