# AUFBAU EINES BILDGENERATORS MIT FLET UND PYTHON-Python-Tutorial-php.cn

Einführung

Hallo Software-Entwickler ?‍?, Arsey hier?,

Entschuldigung für das späte Update, ich bin Student und habe an einigen persönlichen Projekten gearbeitet, aber ich werde Sie von nun an auf dem Laufenden halten.

Also in meinem letzten Tutorial hat jemand kommentiert, ob wir GenAI in Python-Frameworks wie Kivy und Flet verwenden können. Meine Antwort war: Ja, Sie können damit GenAI-Apps erstellen. Es sind vielleicht nicht die am besten skalierbaren, aber für ein Nebenprojekt mit diesen Frameworks ist es durchaus ein Versuch.

In diesem Tutorial erstellen wir eine einfache Bildgenerator-App in Python mit Flet und einem Bildgenerierungsmodell namens „flux.dev“.

Da Flux ein leistungsstarkes Bildgeneratormodell ist, erfordert es eine hohe Rechenleistung, um auf Ihrem Computer ausgeführt zu werden. Mein Computer ist so leistungsstark, daher verwenden wir hier Replicate, eine Plattform, die uns einen API-Endpunkt für Flux bietet, sodass wir uns darauf konzentrieren können auf die Benutzererfahrung, und die Bildgenerierung wird von der API übernommen, so dass keine Systemabstürze oder Verzögerungen auftreten. Sie können zwar Huggingsface verwenden, das auch über die Flux-API verfügt, aber folgen Sie uns, wir werden mit der Replikation fortfahren. Worauf warten wir? Lasst uns eintauchen.

Voraussetzungen

Bevor wir mit der Erstellung unserer Anwendung beginnen, empfehle ich Ihnen, über Grundkenntnisse der Python-Grundlagen wie Funktionen und einige Oop-Konzepte zu verfügen und sicherzustellen, dass Sie die erforderlichen Pakete in Ihrem System installiert haben. Wir werden die folgenden Pakete verwenden:

flet zum Erstellen der Benutzeroberfläche, für diejenigen, die Flet nicht kennen. Flet ist eine Python-Bibliothek, die auf Flutter basiert, einem der beliebtesten mobilen Frameworks. Mit Flet können wir schnelle und schöne Benutzeroberflächen in Echtzeit erstellen und plattformübergreifend ausführen.
replicate Replicate ist eine Platform as a Service (PAAS), eine Plattform, die uns vorgefertigte Modelle bereitstellt, die wir verwenden können, ohne sie zu installieren. Was ich damit meine, ist, dass „Replikat“ die API-Endpunkte bereitstellt, die wir von unserer Anwendung aus erreichen. Replicate verarbeitet die Anfragen und Antworten in der Cloud, sodass Sie sich unbesorgt auf die Funktionalitäten Ihrer Anwendung konzentrieren können.
Anfragen für unseren API-Endpunkt hier können wir Anfragen senden und Antworten von ihnen empfangen und replizieren.
Oh, sogar Betriebssysteme für die Dateiverwaltung, dies wird es uns ermöglichen, unser Bild auf unserem lokalen System zu speichern.

Projekt-Setup (Umgebungs-Setup)

Erforderliche Pakete installieren,

Pip-Installations-Flet-Replikationsanforderung

Einmal installiert und bereit, mit Ihrer Tastatur herumzuspielen; Sie müssen von hier aus ein Replikatkonto erstellen. Erstellen Sie ein Replikatkonto. Stellen Sie sicher, dass Sie sich mit Ihren GitHub-Anmeldeinformationen authentifizieren und autorisieren.

Nachdem Sie Ihr Konto erstellt haben, werden Sie nun zum Replikat-Dashboard weitergeleitet. Hier können Sie verschiedene Modelle sehen. Für dieses Tutorial verwenden wir jedoch flux.dev. Finden und verwenden Sie das Flux.dev-Modell. Jeder andere gewählte Modus könnte auch funktionieren.

Erinnerung: Installieren Sie die Replikation, um ihre API nutzen zu können. Wenn alles erledigt ist, gehen Sie dann zur Replikation und erstellen Sie ein API-Token. Dadurch wird ein Endpunkt von der Replikation zu unserer clientseitigen App eingerichtet.

Hinweis: Die Entwicklungsversion wird nicht für Produktions- oder kommerzielle Zwecke verwendet. Beachten Sie, dass Sie nur begrenzte Token für die Verwendung der kostenlosen Version des Modells haben. Seien Sie also nicht aufgeregt und generieren Sie zufällige Bilder oder Andernfalls verlieren Sie alle Ihre kostenlosen Credits.

Wo waren wir jetzt? Nun gut, ich denke, Sie haben bis hierhin alles eingerichtet. Lassen Sie uns mit ihrer API herumexperimentieren.

Aufbau der Benutzeroberfläche

Zuerst erstellen wir die Benutzeroberfläche. Am Ende dieses Teils haben Sie eine simulierte Benutzeroberfläche. Jetzt können Sie Ihren bevorzugten IDE-/Code-Editor öffnen und diesen Code eingeben.

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)

Nach dem Login kopieren

Ausgabe
Sie werden für diesen Schritt so etwas haben,
# BUILDING AN IMAGE GENERATOR USING FLET WITH PYTHON

Code-Erklärung

Hier ist, was wir getan haben: Wir importieren zuerst unsere erforderlichen Module.
Anschließend legen wir unser durch „Replikat“ bereitgestelltes API-Token fest.
Dann legen wir hier unsere Platzhalterfunktionen fest, die später verwendet werden, wir haben eine Pass-Anweisung
verwendet sie zu ignorieren.

Die Hauptfunktion beschreibt und erstellt dann unsere Benutzeroberfläche. Hier legen wir den Seitentitel und die Ausrichtung fest.
Scrollverhalten, damit unsere Seite scrollbar ist. und der Rest sind UI-Elemente, wie Sie sehen können, haben wir die AppBar, Image, das es uns ermöglicht, Bilder in unserer UI anzuzeigen, und schließlich wir
Fügen Sie TextField hinzu, um Benutzereingaben zu erfassen. Die Schaltflächen „Generieren“ und „Speichern“ steuern die Bildgenerierung bzw. das Speichern.

Schließlich fügen wir der Seite unsere Komponenten hinzu. Beachten Sie, dass wir SafeArea verwendet haben. Dies wird uns helfen, für ausreichend Polsterung zu sorgen und Eingriffe des Betriebssystems zu vermeiden. In unserem Fall wird es eingerückt
Das Spalten-Widget verhindert, dass die AppBar interpoliert. Das Spalten-Widget ermöglicht uns die Anzeige von UI-Elementen in einem vertikalen Array.

Replizieren integrieren

Ich kann Ihre Aufregung spüren, das ist der wichtigste Schritt, also stellen Sie sicher, dass Sie keine Fehler machen, sonst brechen Sie den Code und landen am Ende beim Debuggen. Na ja, Debuggen ist eine gute Fähigkeit, denn dafür habe ich zwei Tage gebraucht Korrigieren Sie die Benutzeroberfläche und 3 Tage, um den API-Endpunkt zu debuggen, an dem ich ein ungültiges Token hatte.

Das ist wirklich frustrierend. Wenn Sie also auf irgendwelche Bugs/Fehler im Prozess stoßen, versuchen Sie, diese zu debuggen und die Ergebnisse zu sehen. Ich werde mein Bestes tun, um Ihnen zu helfen. Stellen Sie also Fragen, vielleicht helfen ich oder andere Entwickler weiter.

Okay, jetzt integrieren wir das Modell, gehen zu „Replizieren“ und so weiter zu „flux.dev“.
Kopieren Sie den bereitgestellten Code und wir nehmen einige Änderungen daran vor, okay! fertig.

Aktualisieren Sie die Funktion „generate_image“, sodass sie in etwa so aussieht,

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)

Nach dem Login kopieren

Was diese Funktion bewirkt, ist, dass sie mit der Replikate-API interagiert, um eine Bildbasis auf der vom Benutzer bereitgestellten Textaufforderung zu generieren.
Anschließend werden die Eingabeaufforderung und andere Modellparameter gesendet
an die API und gibt die URL des generierten Bildes zurück. Wenn etwas schief geht, wird der Fehler behandelt, indem „None“ zurückgegeben wird.

Fügen Sie Ihr aus dem Replikat kopiertes API-Token ein. also sieht es ungefähr so aus,

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

Stellen Sie sicher, dass Sie über das Token verfügen. Sie können Ihr API-Token hier erhalten.

Anwenden der Funktion zum Generieren und Anzeigen von Bildern

Sobald wir fertig sind, aktualisieren wir auch die Funktion „generate_and_display_image“ und geben den folgenden Code ein.

 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

Nach dem Login kopieren

An diesem Punkt, wenn Sie die Anwendung ausführen, versuchen Sie, eine Eingabeaufforderung einzugeben und auf die Schaltfläche „Generieren“ zu klicken. Sie sehen einen Fortschrittsbalken und innerhalb von Sekunden sehen Sie das generierte Bild in Ihrer Benutzeroberfläche. Und denken Sie daran, nicht zu viel zu generieren, sonst verlieren Sie Ihre Credits. und ich verspreche dir, dass es keinen Spaß machen wird.

Code-Erklärung

Diese Funktion hier verwaltet den Arbeitsablauf der Generierung und Anzeige des Bildes in unserer Anwendung. Es nimmt die Eingabeaufforderung des Benutzers und ruft „generate_image()“ auf, um
Generieren Sie die image_url und aktualisieren Sie die App-Benutzeroberfläche mit dem result_image. Wenn der Vorgang fehlschlägt, wird ein Fehlerdialog angezeigt. und außerdem t Aktiviert die Schaltfläche „Bild speichern“, nachdem das Bild erfolgreich generiert wurde.

Anwenden der Funktion „save_image“

Wer schon müde wird, spart Energie, trinkt einen Kaffee und schließt das Projekt ab, denn jetzt werden wir die Sparfunktion hinzufügen.

Bisher haben wir die grundlegende Benutzeroberfläche und können nun erfolgreich Bilder generieren, aber wir haben ein Problem: Was ist, wenn wir unsere Bilder auf unserem System speichern möchten, weil unsere aktuelle Anwendung jetzt nur generiert und...
Es ist fertig. Um das Problem zu lösen, müssen wir die Speicherfunktion hinzufügen.

Aktualisieren Sie also in Ihrem Code die Funktion save_image so, dass sie etwa so aussieht:

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

Nach dem Login kopieren

Code-Erklärung

Was nun hier gemacht wurde, lasst es uns aufschlüsseln.
Mit dieser Funktion können wir das generic_image herunterladen und auf dem lokalen System speichern. Es nimmt die Bild-URL und einen optionalen Dateinamen, ruft die Bilddaten über eine HTTP-Anfrage ab und schreibt sie in die Datei.
Es stellt die Fehlerbehandlung sicher, falls der Download fehlschlägt.

Abschluss

Nun! Das ist es, liebe Entwickler, ein einfacher Bildgenerator mit Python, Flet und Flux.
Es hat Spaß gemacht, an diesem Projekt zu arbeiten, und ich würde mich freuen, von Ihnen zu hören.

Hier ist meine endgültige Ausgabe,

# BUILDING AN IMAGE GENERATOR USING FLET WITH PYTHON

Ich habe nichts mehr hochgeladen, seit ich kürzlich an einem Hackathon teilgenommen habe, und ich schreibe auch ein Buch für Studenten und Berufstätige, und es hat mir Kopfschmerzen bereitet, deshalb habe ich etwas Programmieren pausiert und mich für eine Weile ausgeruht.

Aber jetzt werde ich ab sofort Inhalte hochladen.

Danke für deine Geduld, ich werde mehr für euch Entwickler hochladen.

Das obige ist der detaillierte Inhalt von# AUFBAU EINES BILDGENERATORS MIT FLET UND PYTHON. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!