# 使用 FLET 和 PYTHON 构建图像生成器-Python教程-PHP中文网

介绍

你们好，软件开发人员？‍？，这里是 Arsey？，

抱歉更新晚了，我是一名学生，正在处理一些个人项目，但从现在开始我会继续为您提供更新。

所以在我的上一篇教程中有人评论说我们是否可以在 kivy 和 flet 等 python 框架中使用 GenAI，我的答案是肯定的，你可以用它们构建 GenAI 应用程序。它可能不是最具可扩展性的框架，但对于使用这些框架的副项目来说，这是一个安静的选择。

在本教程中，我们将使用 flet 和名为 Flux.dev 的图像生成模型在 Python 中构建一个简单的图像生成器应用程序。

由于flux是一个强大的图像生成器模型，它需要很高的计算能力才能在您的机器上运行，我的机器就那么强大，所以在这里我们将使用replicate，这个平台将为我们提供flux的API端点，以便我们集中精力在用户体验上，图像生成将由 API 处理，因此不会出现系统崩溃或滞后的情况，尽管您可以使用 Huggingsface，它也具有 Flux API，但接下来我们将使用复制。还等什么，让我们开始吧。

先决条件

在我们开始构建我们的应用程序之前，我建议您了解 python 基础知识，例如函数和一些 oop 概念，并确保您的系统中安装了必要的软件包，我们将使用以下软件包：

flet 用于构建用户界面，对于那些不了解 Flet 的人。 Flet 是一个基于 flutter 的 python 库，flutter 是最受欢迎的移动框架之一。 Flet 使我们能够实时构建快速、美观的用户界面，并且可以跨平台运行。
replicate Replicate 是一个平台即服务 (PAAS)，该平台将为我们提供预制模型，我们无需安装即可使用它们。我在这里的意思是，复制将提供我们将从应用程序访问的 API 端点。 Replicate 将在云端处理请求和响应，让您无需担心就可以专注于应用程序的功能。
对 API 端点的请求，我们将能够在此处发送请求并接收来自复制的响应。
哦，即使是文件管理操作系统，这也将允许我们将图像保存在本地系统上。

项目设置（环境设置）

安装所需的软件包，

pip install flet 复制请求

安装完成后，就可以开始使用你的键盘了；您需要从这里创建一个具有复制功能的帐户创建复制帐户，确保使用您的 GitHub 凭据进行身份验证和授权。

创建帐户后，您现在将被重定向到复制仪表板，在这里您将能够看到不同的模型，但在本教程中我们将使用 Flux.dev。找到并使用 Flux.dev 模型，选择任何其他模型也可以工作。

提醒安装复制以便能够使用他们的 API。全部完成，然后前往复制并创建 API 令牌，这将设置从复制到我们的客户端应用程序的端点。

注意：开发版本不用于生产或商业目的，请注意，您使用免费版本模型的代币有限，所以不要兴奋并生成随机图像或否则你将失去所有免费积分。

现在我们在哪里，哦，好吧，我想到目前为止您已经完成了所有设置，让我们去使用他们的 API。

构建用户界面

首先我们将构建用户界面，在本部分结束时，您将拥有一个模拟 UI，现在就准备好，打开您最喜欢的 IDE/代码编辑器并输入此代码。

import os
import flet as ft
import replicate
import requests

# Set the Replicate API token in the environment
os.environ["REPLICATE_API_TOKEN"] = "YOUR_API_TOKEN"

# Function to interact with Replicate API for image generation
def generate_image(prompt):
    pass

# Function to save the image locally
def save_image(image_url, filename="generated_image.webp"):
    pass

# Main function to define the Flet app
def main(page: ft.Page):
    page.title = "ArseyGen"
    page.horizontal_alignment = 'center'
    page.scroll = ft.ScrollMode.AUTO
    page.theme_mode = ft.ThemeMode.DARK

    page.appbar = ft.AppBar(
        title=ft.Text("REPLICATE IMAGE GENERATOR"), center_title=True
    )

    # Placeholder image to avoid missing src error
    result_image = ft.Image(
        src="https://via.placeholder.com/512", width=512, height=512
        )

    # Define the save button (initially disabled)
    save_image_button = ft.ElevatedButton(text="Save Image", disabled=True)

    # Function to handle image generation
    def generate_and_display_image(e):
        pass

    prompt_input = ft.TextField(label="Enter a text prompt")
    generate_button = ft.ElevatedButton(
        text="Generate Image", on_click=generate_and_display_image
        )

    # Add components to the page
    page.add(
        ft.SafeArea(
            content=ft.Column(
                [
                    prompt_input,
                    generate_button, result_image,
                    save_image_button,
                ],
                horizontal_alignment=ft.CrossAxisAlignment.CENTER
            )
        )
    )

# Run the Flet app
if __name__ == '__main__':
    ft.app(target=main)

登录后复制

输出
这一步你会得到这样的东西，
# BUILDING AN IMAGE GENERATOR USING FLET WITH PYTHON

代码说明

这就是我们所做的，我们首先导入所需的模块。
然后我们设置复制提供的 api_token。
然后在这里我们设置稍后将使用的占位符函数，我们使用了 pass 语句
忽略他们。

主函数然后描述并构建我们的UI，在这里我们设置页面标题，对齐方式，
滚动行为，使我们的页面可滚动。其余的是 UI 元素，如您所见，我们有 AppBar、Image，它允许我们在 UI 中显示图像，最后我们
添加TextField来捕获用户的提示；生成和保存按钮分别用于处理图像生成和保存。

最后我们将组件添加到页面，注意我们使用了 SafeArea，这将帮助我们提供足够的填充并避免操作系统的入侵，在我们的例子中它将缩进
Column 小部件可以避免 AppBar 进行插值，至于 Column 小部件，允许我们在垂直数组中显示 UI 元素。

整合复制

我能感受到你的兴奋，这是最关键的一步，所以请确保你没有犯任何错误，否则你将最终破坏代码，并最终进行调试，哦，调试是一项很好的技能，因为我花了2天时间才完成修复 ui 和 3days 来调试我有无效令牌的 api 端点。

令人沮丧的是，所以如果您在尝试调试并查看结果的过程中遇到任何错误/错误，我会尽力帮助您，所以提出问题可能是我或其他开发人员会提供帮助。

好吧，现在让我们集成模型，前往 Flux.dev 进行复制等。
复制提供的代码，我们将对其进行一些更改，好吗！完成。

更新generate_image函数，使其看起来像这样，

import os
import flet as ft
import replicate
import requests

# Set the Replicate API token in the environment
os.environ["REPLICATE_API_TOKEN"] = "YOUR_API_TOKEN"

# Function to interact with Replicate API for image generation
def generate_image(prompt):
    pass

# Function to save the image locally
def save_image(image_url, filename="generated_image.webp"):
    pass

# Main function to define the Flet app
def main(page: ft.Page):
    page.title = "ArseyGen"
    page.horizontal_alignment = 'center'
    page.scroll = ft.ScrollMode.AUTO
    page.theme_mode = ft.ThemeMode.DARK

    page.appbar = ft.AppBar(
        title=ft.Text("REPLICATE IMAGE GENERATOR"), center_title=True
    )

    # Placeholder image to avoid missing src error
    result_image = ft.Image(
        src="https://via.placeholder.com/512", width=512, height=512
        )

    # Define the save button (initially disabled)
    save_image_button = ft.ElevatedButton(text="Save Image", disabled=True)

    # Function to handle image generation
    def generate_and_display_image(e):
        pass

    prompt_input = ft.TextField(label="Enter a text prompt")
    generate_button = ft.ElevatedButton(
        text="Generate Image", on_click=generate_and_display_image
        )

    # Add components to the page
    page.add(
        ft.SafeArea(
            content=ft.Column(
                [
                    prompt_input,
                    generate_button, result_image,
                    save_image_button,
                ],
                horizontal_alignment=ft.CrossAxisAlignment.CENTER
            )
        )
    )

# Run the Flet app
if __name__ == '__main__':
    ft.app(target=main)

登录后复制

这个函数的作用是，它与 Replicate API 交互，根据用户提供的文本提示生成图像。
然后它发送提示和其他模型参数
到 API 并返回生成图像的 URL，如果出现问题，它会通过返回 None 来处理错误。

粘贴从复制中复制的 API 令牌。所以它看起来像这样，

os.environ["REPLICATE_API_TOKEN"]="r8_KhysOWTKUjRsagyyyLNIWvvg2K78qrE48RwTh"

确保您拥有令牌，您可以通过此处获取您的 api 令牌来获取您的 API 令牌

应用生成和显示图像功能

完成后，我们还可以更新generate_and_display_image函数，在下面输入此代码，

 def generate_image(prompt):
    try:
        # Make the API call to Replicate to generate an image
        output = replicate.run(
            "bingbangboom-lab/flux-dreamscape:b761fa16918356ee07f31fad9b0d41d8919b9ff08f999e2d298a5a35b672f47e",
            # "black-forest-labs/flux-dev",
            input={
                "model": "dev",
                "prompt": prompt,
                "lora_scale": 1,
                "num_outputs": 1,
                "aspect_ratio": "1:1",
                "output_format": "webp",
                "guidance_scale": 3.5,
                "output_quality": 80,
                "prompt_strength": 0.8,
                "extra_lora_scale": 0.8,
                "num_inference_steps": 28
            }
        )
        # Return the generated image URL
        return output[0]
    except Exception as e:
        print(f"Error: {e}")
        return None

登录后复制

此时，当您运行应用程序时，尝试输入提示并单击生成按钮，您将看到一个进度条，几秒钟内您将在 UI 中看到生成的图像。请记住不要过度生成，否则您将失去您的积分。我向你保证这不会很有趣。

代码说明

此函数管理在我们的应用程序中生成和显示图像的工作流程。它需要用户的提示，调用generate_image()来
生成 image_url 并使用 result_image 更新应用程序 UI。如果该过程失败，则会显示错误对话框。并且在图像成功生成后启用“保存图像”按钮。

应用 save_image 函数

累了已经节省你的精力了，喝点咖啡并完成项目，因为我们现在要添加节省功能。

到目前为止，我们已经有了基本的用户界面，我们现在可以成功生成图像，但是我们有一个问题，如果我们想将图像保存在我们的系统上怎么办，因为现在我们当前的应用程序刚刚生成并且......
完成了，为了解决这个问题我们必须添加保存功能。

因此，在您的代码中更新 save_image 函数，使其看起来像这样：

def generate_and_display_image(e):
        prompt = prompt_input.value
        if prompt:
            page.splash = ft.ProgressBar()  # Display progress bar while generating image
            page.update()

            # Generate image based on user's prompt
            image_url = generate_image(prompt)
            page.splash = None  # Hide progress bar

            if image_url:
                # Update image source only if we have a valid URL
                result_image.src = image_url
                result_image.update()

                # Enable save button after image is generated
                save_image_button.disabled = False
                save_image_button.update()

                # Define save button's functionality (save the image locally when clicked)
                def save_image_click(e):
                    save_image(image_url, "anime.webp")

                save_image_button.on_click = save_image_click

            else:
                # Display an error message if image generation fails
                page.dialog = ft.AlertDialog(
                    title=ft.Text("Error"),
                    content=ft.Text("Failed to generate image. Please try again."),
                    actions=[
                        ft.TextButton(
                            "OK",
                            on_click=lambda _: page.dialog.close()
                            )
                        ]
                    )

                page.dialog.open = True
                page.update()

登录后复制

代码解释

现在我们做了什么，让我们来分解一下。
该函数允许我们下载并保存generate_image到本地系统。它采用 image_url 和可选的文件名，通过 HTTP 请求检索图像数据，并将其写入文件。
它确保下载失败时的错误处理。