# CONSTRUIRE UN GÉNÉRATEUR D'IMAGES EN UTILISANT FLET AVEC PYTHON

Introduction

Bonjour les développeurs de logiciels ?‍?, Arsey ici ?,

Désolé pour la mise à jour tardive, je suis étudiant et je travaillais sur des projets personnels, mais je vous suivrai et vous tiendrai au courant à partir de maintenant.

Donc, dans mon dernier tutoriel, quelqu'un a commenté si nous pouvons utiliser GenAI dans des frameworks python tels que kivy et flet, ma réponse a été oui, vous pouvez créer des applications GenAI avec eux. Ce ne sont peut-être pas les plus évolutifs, mais pour un projet parallèle avec ces frameworks, c'est une solution idéale.

Dans ce tutoriel, nous allons créer une application simple de génération d'images en python avec flet et un modèle de génération d'images connu sous le nom de flux.dev.

Puisque Flux est un modèle de générateur d'images puissant, il nécessite une puissance de calcul élevée pour fonctionner sur votre machine, ma machine est si puissante, nous allons donc utiliser ici Replicate, une plate-forme qui nous fournira un point de terminaison API pour le flux tel que nous nous concentrons. sur l'expérience utilisateur, et la génération d'images sera gérée par l'API, donc pas d'écrasement ou de retard du système, bien que vous puissiez utiliser huggingsface qui a également l'API de flux, mais continuez, nous allons procéder à la réplication. qu'est-ce qu'on attend, allons-y.

Conditions préalables

Avant de commencer à créer notre application, je vous recommande d'avoir une connaissance de base des bases de Python telles que les fonctions et certains concepts oop, et de vous assurer que les packages nécessaires sont installés sur votre système, nous utiliserons les packages suivants :

• flet pour construire l'interface utilisateur, pour ceux qui ne connaissent pas Flet. Flet est une bibliothèque Python basée sur Flutter, l'un des frameworks mobiles les plus appréciés. Flet nous permet de créer des interfaces utilisateur rapides et esthétiques en temps réel et peut fonctionner sur plusieurs plates-formes.

• replicate Replicate est une plateforme en tant que service (PAAS), une plateforme qui nous fournira des modèles prédéfinis que nous pourrons utiliser sans les installer. Ce que je veux dire ici, c'est que la réplication fournira les points de terminaison de l'API que nous atteindrons à partir de notre application. Replicate gérera les requêtes et les réponses dans le cloud quant à vous, concentrez-vous sur les fonctionnalités de votre application sans vous inquiéter.

• demandes pour notre point de terminaison API, nous pourrons ici envoyer des demandes et recevoir des réponses et les répliquer.

• Oh même un système de gestion de fichiers, cela nous permettra de sauvegarder notre image sur notre système local.

Configuration du projet (configuration de l'environnement)

Installer les packages requis,

demande de réplication de flet d'installation pip

Une fois installé et prêt à jouer avec votre clavier ; vous devez créer un compte avec réplication à partir d'ici, créez un compte répliqué, assurez-vous de vous authentifier et d'autoriser à l'aide de vos informations d'identification GitHub.

Après avoir créé votre compte, vous serez maintenant redirigé vers le tableau de bord répliqué, ici vous pourrez voir différents modèles, mais pour ce tutoriel, nous utiliserons flux.dev. trouvez et utilisez le modèle flux.dev, tout autre mode choisi pourrait également fonctionner.

Rappel d'installation répliquée pour pouvoir utiliser leur API. Tout est fait, puis passez à la réplication et à la création d'un jeton API, cela configurera un point de terminaison de la réplication vers notre application côté client.

Remarque : la version dev n'est pas utilisée à des fins de production ou commerciales, et sachez que vous disposez d'un nombre limité de jetons pour utiliser la version gratuite du modèle, alors ne vous excitez pas et générez des images aléatoires ou sinon vous perdrez tous vos crédits gratuits.

Maintenant, où en étions-nous, eh bien, je pense que vous avez tout configuré à ce point, allons jouer avec leur API.

Construire l'interface utilisateur

Tout d'abord, nous allons construire l'interface utilisateur, à la fin de cette partie, vous aurez une interface utilisateur simulée, prête maintenant, ouvrez votre IDE/éditeur de code préféré et tapez ce code.

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)

Sortie
tu auras quelque chose comme ça pour cette étape,

Explication du code

Voici ce que nous avons fait, nous importons d'abord nos modules requis.
nous définissons ensuite notre api_token fourni par réplication.
puis ici nous définissons nos fonctions d'espace réservé qui seront utilisées plus tard, nous avons utilisé une instruction pass
pour les ignorer.

La fonction principale décrit et construit ensuite notre interface utilisateur, ici nous définissons le titre de la page, l'alignement,
comportement de défilement pour que notre page puisse défiler. et le reste sont des éléments d'interface utilisateur, comme vous pouvez le voir, nous avons l'AppBar, Image qui nous permettra d'afficher des images dans notre UI, et enfin nous
ajoutez TextField pour capturer les invites de l'utilisateur ; Boutons Générer et Enregistrer pour gérer respectivement la génération et l'enregistrement d'images.

Enfin, nous ajoutons nos composants à la page, notez que nous avons utilisé la SafeArea, cela nous aidera à fournir un remplissage suffisant et à éviter les intrusions du système d'exploitation, dans notre cas, cela sera en retrait
le widget Colonne pour éviter l'interpolation de l'AppBar, comme pour le widget Colonne, nous permet d'afficher les éléments de l'interface utilisateur dans un tableau vertical.

Intégration de la réplique

Je peux sentir votre enthousiasme, c'est l'étape la plus cruciale, alors assurez-vous de ne faire aucune erreur sinon vous finirez par casser le code et finirez par déboguer, eh bien, le débogage est une bonne compétence car il m'a fallu 2 jours pour corrigez l'interface utilisateur et 3 jours pour déboguer le point de terminaison de l'API où j'avais un jeton invalide.

C'est frustrant, donc si vous rencontrez des bugs/erreurs dans le processus, essayez de déboguer et de voir les résultats, je ferai de mon mieux pour vous aider, alors posez des questions, peut-être que moi ou d'autres développeurs vous aideront.

D'accord, intégrons maintenant le modèle, passons à la réplication et autres pour flux.dev.
copiez le code fourni et nous y apporterons quelques modifications, d'accord ! fait.

Mettez à jour la fonction generate_image pour qu'elle ressemble à ceci,

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)

Cette fonction interagit avec l'API Replicate pour générer une image basée sur l'invite de texte fournie par l'utilisateur.
il envoie ensuite l'invite et d'autres paramètres du modèle
à l'API et renvoie l'URL de l'image générée, et si quelque chose ne va pas, il gère l'erreur en renvoyant Aucun.

Collez votre jeton API copié depuis la réplication. donc ça ressemble à ça,

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

Assurez-vous d'avoir le jeton, vous pouvez obtenir votre jeton API en obtenant votre jeton API ici

Application de la fonction de génération et d'affichage d'image

Une fois terminé, mettons également à jour la fonction generate_and_display_image, tapez ce code ci-dessous,

 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

À ce stade, lorsque vous exécutez l'application, essayez de saisir une invite et cliquez sur le bouton Générer, vous verrez une barre de progression et en quelques secondes, vous verrez l'image générée dans votre interface utilisateur. Et n'oubliez pas de ne pas trop générer, sinon vous perdrez vos crédits. et je te promets que ce ne sera pas amusant.

Explication du code

Cette fonction gère ici le flux de travail de génération et d'affichage de l'image dans notre application. il prend l'invite de l'utilisateur, appelle generate_image() à
génère l'image_url et met à jour l'interface utilisateur de l'application avec l'image_résultat. si le processus échoue, il affiche une boîte de dialogue d'erreur. et également t Active le bouton "Enregistrer l'image" une fois l'image générée avec succès.

Application de la fonction save_image

Vous êtes déjà fatigué, économisez votre énergie, prenez un café et terminez le projet car nous allons maintenant ajouter la fonction d'économie.

Jusqu'à présent, nous avons l'interface utilisateur de base et nous pouvons maintenant générer des images avec succès, mais nous avons un problème, que se passe-t-il si nous voulons enregistrer nos images sur notre système, car maintenant notre application actuelle génère simplement et...
c'est fait, pour résoudre ce problème, nous devons ajouter la fonction de sauvegarde.

Donc, dans votre code, mettez à jour la fonction save_image pour qu'elle ressemble à ceci :

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()

Explication du code

Maintenant, qu'avons-nous fait ici, décomposons-le.
Cette fonction nous permet de télécharger et de sauvegarder le generate_image sur le système local. il prend l'image_url et un nom de fichier facultatif, récupère les données de l'image via une requête HTTP et les écrit dans un fichier.
il garantit la gestion des erreurs en cas d'échec du téléchargement.

Conclusion

Eh bien ! ça y est, chers développeurs, un simple générateur d'images utilisant python, flet et flux.
Cela a été amusant de travailler sur ce projet et j'aimerais avoir votre retour.

Voici ma sortie finale,

Je n'ai pas téléchargé depuis que j'ai participé à un hackathon récent et j'écris également un livre pour les étudiants, ainsi que pour les professions actives et cela a été un casse-tête, j'ai donc mis un peu de programmation en pause et me reposer pendant un moment.

Mais maintenant, je vais télécharger du contenu à partir de maintenant.

Merci d'avoir été patient, je vais en télécharger davantage pour vous les développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!