Pynecone纯 Python 全栈 Web 框架-技术圈

Pynecone 是一个全栈 Python 框架，可以使用纯 Python 构建高性能、可自定义的 Web 应用程序。

Pynecone 应用程序示例

下面是一个围绕 DALL·E 创建 UI 的示例，这个示例调用了 OpenAI 的 DALL·E API，但您可以在本地将其替换为任何 ML 模型。

下面是创建它的完整代码，这一切都在一个 Python 文件中完成！

import pynecone as pc
import openai

openai.api_key = "YOUR_API_KEY"

class State(pc.State):
    """The app state."""
    prompt = ""
    image_url = ""
    image_processing = False
    image_made = False

    def process_image(self):
        """Set the image processing flag to true and indicate image is not made yet."""
        self.image_processing = True
        self.image_made = False        

    def get_image(self):
        """Get the image from the 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

def index():
    return pc.center(
        pc.vstack(
            pc.heading("DALL·E", font_size="1.5em"),
            pc.input(placeholder="Enter a prompt..", on_blur=State.set_prompt),
            pc.button(
                "Generate Image",
                on_click=[State.process_image, State.get_image],
                width="100%",
            ),
            pc.divider(),
            pc.cond(
                State.image_processing,
                pc.circular_progress(is_indeterminate=True),
                pc.cond(
                     State.image_made,
                     pc.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%)",
    )

# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index, title="Pynecone:DALL·E")
app.compile()

Pynecone 中的 UI

从用户界面开始。

def index():
    return pc.center(
        ...
    )

此index函数定义应用程序的前端。可使用不同的组件，例如center、vstack、input和button来构建前端。组件可以相互嵌套以创建复杂的布局。您可以使用关键字参数来使用 CSS 的全部功能来设置它们的样式。

Pynecone 附带60 多个内置组件。

状态

class State(pc.State):
    """The app state."""
    prompt = ""
    image_url = ""
    image_processing = False
    image_made = False

状态定义了应用程序中可以更改的所有变量（称为 vars）以及更改它们的函数。这里的状态由prompt和组成image_url。还有布尔值image_processing和image_made指示何时显示循环进度和图像。

事件处理器

    def process_image(self):
        """Set the image processing flag to true and indicate image is not made yet."""
        self.image_processing = True
        self.image_made = False        

    def get_image(self):
        """Get the image from the 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

在状态中定义了称为事件处理程序的函数来更改状态变量。事件处理程序是在 Pynecone 中修改状态的方式。可以调用它们以响应用户操作，例如单击按钮或在文本框中键入，这些动作称为事件。

我们的DALL·E。应用程序有两个事件处理程序，process_image用于指示正在生成图像和get_image调用 OpenAI API。

路由

最后定义应用程序并告诉它使用什么状态。

app = pc.App(state=State)

添加一条从应用程序根目录到索引组件的路由，还添加了一个标题，该标题将显示在页面预览/浏览器选项卡中。

app.add_page(index, title="Pynecone:DALL-E")
app.compile()

安装

Pynecone 需要以下内容才能开始：

Python 3.7+
Node.js 12.22.0+ （不必编写任何 Javascript）

$ pip install pynecone

创建您的第一个 Pynecone 应用程序

安装 Pynecone 也会安装pc命令行工具，可通过创建一个新项目来测试安装是否成功。

将 my_app_name 替换为自己的项目名称：

$ mkdir my_app_name $ cd my_app_name $ pc init

第一次运行此命令时，会自动下载并安装bun 。

此命令会在您的新目录中初始化模板应用程序，可以在开发模式下运行此应用程序：

$ pc run

应用程序将在 http://localhost:3000 上运行。现在可以修改my_app_name/my_app_name.py.

Pynecone 具有快速刷新功能，可以在保存代码时立即看到更改。