見出し画像

【無料公開】自作の画像生成AIアプリを作ろう!(2/2)-AppGyverでアプリ開発-

【この記事は、以下⬇︎の記事の続きになります】


・前回までのおさらい

前回(#1)までで、DeepLのAPIを使って、日本語のテキストの英訳までできました。

今回は、全2回のうち2回目、Stable DiffusionAPIを使った、画像生成とダウンロードの機能を設計したいと思います!

今回のアプリの概要です(再掲)⬇️

ユーザー (日本語入力)
   ↓
AppGyverアプリ
   ↓ APIリクエスト
翻訳API (DeepL)
   ↓ 翻訳された英語のテキスト
AppGyverアプリ
   ↓ APIリクエスト
画像生成API (stability.ai)
   ↓ 生成された画像
AppGyverアプリ
   ↓
ユーザー (画像表示)

全て無料公開で紹介していますので、ぜひ最後までご覧いただければと思います。

・実際の開発の流れ

1. Stability AIのAPIキーの取得

前回と同様、今回はStability AIのAPIキーが必要となりますので、事前にし取得しておきます。

取得する際は以下のリンクからStability AIのページに飛びます。

下のような画面になりますので、「Get Started with API」をクリックします。

「Get Started with API」をクリック

Developer Platformに移りますので、右上のLoginボタンをクリックします。

右上のLoginボタンをクリック

アカウント作成のページに移ります。(Googleのアカウントも使えるので、新しく作成するのが面倒な方はそちらを使っても大丈夫です)

すると、自分のアカウントメージが作成できますので、右上の自分のアイコンをクリックします。

右上の自分のアイコンをクリック

一番上がAPI keyとなってますので、「Create API Key」ボタンを押して、新しいAPI キーを作成します。

「Create API Key」ボタンを押して、新しいAPI キーを作成

【注意】
APIキーは他人に知られると悪用される可能性がありますので、知られないように管理には注意が必要です。

また、3段目のBillingを選択すると残クレジットが表示されます。

25クレジットが無料で配布される

初回登録時には25クレジットが無料で配布されるので、ぜひ使ってみましょう!!(モデルにも寄りますが、一番下のモデルでは25クレジットで125枚の画像が生成できます)

下の通り、モデルによって以下のように使用するクレジットが異なります。

画像生成にかかるクレジット一覧(2024/8/14時点)

【注意】
今回紹介するアプリ開発では、一番消費量が少ないモデル(SDXL 1.0)を使用しておりますので、一度の生成では0.2〜0.6クレジットを消費する形となります。

以上で、APIキーの取得は完了です・

2. AppGyver上でアプリの設計

次にAppGyverのアプリ上でアプリ画面の設計を行なっていきます。

大まかな流れとしては、前回と同様に

2-1. 画面(View)の設計
2-2. 変数(Variables)の設計
2-3. フロー(Logic)の設計

の4つです。

2-1. 画面(View)の設計

まず、前回の続きからとなりますので、アプリ開発画面に戻ります。

そして、翻訳結果の下にButtonコンポーネントを設置します。

翻訳結果の下にButtonコンポーネントを設置

分かりやすいように、ボタン上の文字を変えておきます。

ボタン上の文字を変更

続いて、その下にImageコンポーネントを設置します。

Imageコンポーネントを設置

以上で、画面(View)の設計はひとまず終わりです。

2-2. 変数(Variables)の設計

続いて、変数(VARIABLES)の設定を行なっていきます。

前回と同様、右上のVARIABLESをクリックします。

VARIABLESに変更

PAGE VARIABLESを選択し、ADD PAGE VARIABLESをクリックしてページ変数(Page variable)を追加します。

ページ変数(Page variable)の追加

ページ変数は「base64data」の1つの変数を作成しておきます。
ここで、Variable value typeは「Any text」に変更します。

変数の名称:base64data、変数の型:Any text

変数の設定は以上で終わりです。

2-3. フロー(Logic)の設計

次に、ボタンをクリックした時にStable DiffusionにAPIリクエストを送るように、フロー(Logic)の設計を行なっていきます。

まず、Buttonコンポーネントを選択し、右下にある上下の矢印ボタンを押し、LOGIC CANVASを広げます。

LOGIC CANVASを広げる

続いて、Component tapのイベントの隣に、JavaScriptのフローを設置します。

JavaScriptのフローを設置

次に、Set page variablesのフローをJavaScriptの隣に設置します。

Set page variablesのフローをJavaScriptの隣に設置

その後、「Component tap JavaScript → Set page variables」の順にフローを繋げていきます。

「Component tap → JavaScript → Set page variables」の順にフローを繋げる

ここで新しいフローをインストールする必要があるため、MARKETPLACEをクリックします。

MARKETPLACEをクリック

すると、検索ページに移るので、検索欄にbaseと入力します。
Download Base64 text as file (web only)」を探してクリックします。

「Download Base64 text as file (web only)」を探す

インストールボタンをクリックします。

インストールボタンをクリック

先ほどインストールした、「Download Base64 text as file (web only)」フローを設置します。

「Download Base64 text as file (web only)」フローを設置

Download Base64 text as file (web only)のフローとSet page variablesのフローを繋げます。

Download Base64 text as file (web only)のフローとSet page variablesのフローを繋げる

その後、JavaScriptのフローをダブルクリックします。

JavaScriptのフローをダブルクリック

JavaScriptの画面が開きますので、もともとあったJavaScriptのコードを削除しておきます。

JavaScriptの画面

そして、下のコードをコピーして削除した真ん中のコードの記載欄に貼り付けます

const { prompt, apiKey } = inputs;

try {
    // リクエストボディの作成
    const requestBody = JSON.stringify({
        text_prompts: [{ text: prompt }],
        width: 1024,
        height: 1024
    });

    const response = await fetch('https://api.stability.ai/v1/generation/stable-diffusion-xl-1024-v1-0/text-to-image', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Content-Type': 'application/json', // Content-Typeヘッダーをapplication/jsonに設定
            'Accept': 'application/json' // Acceptヘッダーもapplication/jsonに設定
        },
        body: requestBody
    });

    // レスポンスを取得して処理
    if (response.ok) {
        const jsonResponse = await response.json();
        const base64data = jsonResponse.artifacts[0].base64; // 生成された画像のBase64データを取得
        return [0, { base64data: base64data }]; // Base64データをそのまま返す
    } else {
        // エラーが発生した場合の処理
        const error = await response.json(); // JSONレスポンスを取得
        throw new Error(`Image generation failed: ${error.message}`);
    }
} catch (error) {
    return [1, { error: error.message }];
}

貼り付けた後の画面が以下になります。

JavaScriptのコピー&ペースト後の画面

次に左側のインプットの設定を行います。

まず、もとからあった、input1を削除します。

input1を削除

次に、Add new propertyで名称を「prompt」として新しくプロパティを追加します。

名称:prompt のプロパティを新しく追加

同様に「apiKey」のプロパティも追加します。

名称:apiKey のプロパティも追加

prompt」のプロパティをクリックします。

「prompt」のプロパティをクリック

Data and Variablesを選択します。

Data and Variablesを選択

Page variablesを選択します。

Page variablesを選択

englishtextを選択します。

englishtextを選択

次に「apiKey」のプロパティには、先ほど取得したAPIキーを入力します。

「apiKey」のプロパティに先ほど取得したAPIキーを入力

以上で、左側の「intputs」の部分の設定は完了です。

続いて、右側の「Outputs」の部分を設定していきます。

初めに、Number of outputsを「2」に変更します。

Number of outputsを「2」に変更

Output1の「result」を削除します。

Output1の「result」を削除

次に、Add new propertyで名称を「base64data」として新しくプロパティを追加します。

名称:base64data のプロパティを追加

Property typeは「Any text」に設定します。

Property typeは「Any text」に設定

同じように、Output2の「result」を削除し、Add new propertyで名称を「error」として新しくプロパティを追加します。

名称:error のプロパティを追加

以上で、JavaScriptのコードの設計は完了ですので、UPDATEをクリックし設定を保存します。

UPDATEをクリック

JavaScriptのフローを見ると、アウトプットの部分が2つになっていますので、エラー時にアラートが出るように設計します。

まず、Alertフローを設置します。

Alertフローを設置

JavaScriptのフローの2つ目のアプトプットにAlertフローを接続させ、「Dialog title」をクリックします。

「Dialog title」をクリック

Output value of another nodeを選択します。

Output value of another nodeを選択

Function / errorを選択します。

Function / errorを選択

続いて、Set page variablesを選択し、Variable namebase64dataがセットされていることを確認したのち、Assigned valueをクリックします。

Set page variablesを選択後、Assigned valueをクリック

Output value of another nodeを選択します。

Output value of another nodeを選択

Function / base64dataを選択します。

Function / base64dataを選択

Download Base64 text as file (web only)を選択し、Base64 textをクリックします。

Download Base64 text as file (web only)を選択し、Base64 textをクリック

Data and Variablesを選択します。

Data and Variablesを選択

Page variablesを選択します。

Page variablesを選択

base64dataを選択します。

base64dataを選択

続いて、Base64 textの下にある、Filenameをクリックします。

Filenameをクリック

Formulaを選択します。

Formulaを選択

Filenameでは、生成された画像をダウンロードする際に、どのような名称にするかを決められます。
今回は「NOW("YYYY-MM-DDTHH:MM:SS") + ".jpeg"」としております。
名称としては、「作成日時.jpeg」の形式となります。
注意点としては、.jpegの部分はファイル形式になるため必須です。

「NOW("YYYY-MM-DDTHH:MM:SS") + ".jpeg"」と保存時の名称を設定

次に、OPTIONAL INPUTSの部分を開き、MIME typeを「Image」にします。

MIME typeを「Image」にする

次に、LOGIC CANVASからアプリの画面に戻ります。

Imageを選択し、右側のSourceをクリックします。

Imageを選択し、右側のSourceをクリック

Formulaを選択します。

Formulaを選択

Formulaでは以下の式をそのままコピーして貼り付けてください。

"data:image/webp;base64,"+pageVars.base64data

「"data:image/webp;base64,"+pageVars.base64data」を貼り付け

最後に保存を押したら、アプリの設計は完了です!!

ここまでおつかれさまでした!

3. テストしてみる

ここまで完成したらもう一度アプリを動かしてみます。

方法は前回と同様ですが、再度説明します。

画面上部にある、LAUNCHをクリックします。

LAUNCHをクリック

Open preview portalを選択します。

Open preview portalを選択

Web上で確認するため、Preview on webをクリックします。

Preview on webをクリック

先ほど作成したアプリを開きます。

まず、テキスト入力欄に生成したい画像を日本語で入力後、「翻訳ボタン」を押すと、英訳結果が表示されます。

その後、「翻訳結果から画像を生成」ボタンを押すことで、ボタンの下に画像が生成されれば完成です!

【注意】画像のサイズが大きいため、生成後うまく表示されないことがありますが、画面の最大化や最大化の解除を行うとうまく表示されるはずです

アプリのテスト画面

また、生成された画像は自動的にダウンロードされます。

ダウンロードした画像を貼り付けたのが以下の通り。

『夏の空、白い砂浜、青い海、白いワンピースの少女、日本のアニメ調』で作成

以上で完成です!

ここまでおつかれさまでした!!

・最後に

今回はいかがだったでしょうか。

DeepLのAPIStable DiffusionのAPI使うことで日本語から画像を生成できる、自作の画像生成AIアプリができることがわかったかと思います。

なんと言っても、このアプリ開発にかかった費用は0円というところがAppGyverの魅力だと思います。

今後も、ノーコード・ローコードのアプリ開発ツール、AppGyverを使って、アプリ開発の紹介をしていきたく思います。

気になった方は、スキフォローをお願いいたします。

また、ご意見・ご要望もお待ちしております。

それでは次回の記事もよろしくお願いします!

いいなと思ったら応援しよう!

この記事が参加している募集