# Python で FLET を使用してイメージジェネレーターを構築する-Python チュートリアル-php.cn

導入

ソフトウェア開発者の皆さん、こんにちは?‍?、アーシーはこちらですか?

更新が遅くなり申し訳ありません。私は学生で個人的なプロジェクトに取り組んでいましたが、これからも最新情報をお知らせしていきます。

前回のチュートリアルで、kivy や flet などの Python フレームワークで GenAI を使用できるかどうかについて誰かがコメントしましたが、私の答えは「はい、それらを使用して GenAI アプリを構築できる」です。最もスケーラブルなものではないかもしれませんが、これらのフレームワークを使用したサイドプロジェクトには、静かに使用できます。

このチュートリアルでは、flet と flux.dev として知られる画像生成モデルを使用して、Python で単純な画像生成アプリを構築します。

flux は強力な画像生成モデルであるため、お使いのマシンで実行するには高いコンピューティング能力が必要です。私のマシンはそれほど強力なので、ここでは、flux の API エンドポイントを提供するプラットフォームであるレプリケートを使用します。ユーザーエクスペリエンスを重視し、画像生成は API によって処理されるため、システムのクラッシュダウンや遅延は発生しません。ただし、flux API を備えた Huggingsface を使用することもできますが、ここではレプリケートを使用します。何を待っているのでしょう、飛び込みましょう。

前提条件

アプリケーションの構築を開始する前に、関数やいくつかの oop の概念などの Python の基礎に関する基礎知識を身につけておくことをお勧めします。また、必要なパッケージがシステムにインストールされていることを確認してください。次のパッケージを使用します。

ユーザーインターフェースを構築するための Flet を知らない人のために説明します。 Flet は、最も愛されているモバイルフレームワークの 1 つである Flutter をベースにした Python ライブラリです。 Flet を使用すると、迅速で美しいユーザーインターフェイスをリアルタイムで構築でき、クロスプラットフォームで実行できます。
replicate Replicate はサービスとしてのプラットフォーム (PAAS) であり、インストールせずに使用できる既製のモデルを提供するプラットフォームです。ここで私が言いたいのは、レプリケートはアプリケーションからヒットする API エンドポイントを提供するということです。 Replicate はリクエストとレスポンスをクラウドで処理するため、心配することなくアプリケーションの機能に集中できます。
API エンドポイントのリクエスト。ここでリクエストの送信とレスポンスの受信、複製が可能です。
ああ、ファイル管理用の OS でも、これによりローカルシステムにイメージを保存できるようになります。

プロジェクトのセットアップ（環境セットアップ）

必要なパッケージをインストールします。

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

コードの説明

これが私たちが行ったことです。最初に必要なモジュールをインポートします。
次に、replicate によって提供された api_token を設定します。
次に、ここで後で使用するプレースホルダー関数を設定します。 pass ステートメント
を使用しました。無視してください。

次に、main 関数が UI を記述して構築します。ここで、ページのタイトル、配置を設定します。
ページがスクロール可能になるようにスクロール動作を調整します。ご覧のとおり、残りは UI 要素です。AppBar、UI に画像を表示できるようにする Image、そして最後に
TextField を追加してユーザーのプロンプトをキャプチャします。画像の生成と保存をそれぞれ処理する [生成] ボタンと [保存] ボタン。

最後に、コンポーネントをページに追加します。セーフエリアを使用していることに注意してください。これは、十分なパディングを提供し、オペレーティングシステムによる侵入を回避するのに役立ちます。この場合、インデントされます
列ウィジェットを使用すると、AppBar の補間を回避できます。列ウィジェットと同様に、UI 要素を垂直配列で表示できます。

レプリケートの統合

あなたの興奮はわかります。これが最も重要なステップです。間違えないように注意してください。そうしないと、コードが壊れてデバッグが終わってしまいます。まあ、デバッグは良いスキルです。なぜなら、私はこれを理解するのに 2 日かかりました。 UI を修正し、無効なトークンがあった API エンドポイントをデバッグするのに 3 日間かかりました。

確かにイライラします。プロセス中にバグやエラーが発生した場合は、デバッグして結果を確認してください。私ができる限りのお手伝いをいたしますので、質問していただければ私か他の開発者がお手伝いします。

さて、モデルを統合して、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 リクエスト経由で画像データを取得し、それをファイルに書き込みます。
ダウンロードが失敗した場合のエラー処理が確実に行われます。