# Python で FLET を使用してイメージ ジェネレーターを構築する

導入

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

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

前回のチュートリアルで、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)

出力
このステップでは次のようなものになります。

コードの説明

これが私たちが行ったことです。最初に必要なモジュールをインポートします。
次に、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 リクエスト経由で画像データを取得し、それをファイルに書き込みます。
ダウンロードが失敗した場合のエラー処理が確実に行われます。

結論

そうですね！開発者の皆さん、これは Python、flet、flux を使用したシンプルな画像ジェネレーターです。
このプロジェクトに取り組むのはとても楽しかったので、ぜひここに参加したいと思っています。

これが私の最終出力です。

最近のハッカソンに参加して以来、アップロードしていませんでした。また、学生や社会人向けの本も書いていますが、頭痛の種だったので、プログラミングを一時停止して、しばらく休んでいました。

しかし、今からコンテンツをアップロードします。

お待ちいただきありがとうございます。開発者の皆様のためにさらにアップロードいたします。

以上が# Python で FLET を使用してイメージ ジェネレーターを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。