LaravelでChatGPTとDALL·E 2 のAPIを使用:AIに文章と画像を作ってもらう方法

AI/ChatGPT

Laravelを使って、OpenAIのChatGPTとDALL·E 2 を使ったWebアプリを開発してみました。

食材を入れると、メニューを考えてくれて、さらにメニューに合った画像を作ってくれるWebアプリです。

今回のコードを元にした実際のWebアプリ【今日のメニュー】もこちら にあります。

サンプル動画は、下記をご覧ください。

それでは早速始めてみましょう♪

初期設定

まずは、OpenAIのAPIキーを取得して、Laravelに設定します。

また必要なライブラリもインストールしておきましょう。

手順は、下記記事の「ChatGPT APIを使ってLaravelでWebアプリを作成:APIキー設定」をご覧ください。

コントローラ作成

下記コマンドでコントローラを作ります。

app/Http/Controllersの中のChatController.phpを開きます。

use宣言には、次の通りいれておきましょう。

【app/Http/Controllers/ChatContoller.php】

最初にimageメソッドを作ります。

$request->foodがnullではない、つまり、フォームから処理を受け渡されていれば、if($inputText!=null) 以下のコードを実行します。

まずgenerateResponseメソッドに処理を受け渡します。ここでは、ChatGPTにフォームから送信された値を受け渡して、これを元にメニューを作ってもらいます。

次にgenerateImageメソッドに処理を受け渡します。ここでは、DALL·E 2にChatGPTが考えたメニューを受け渡して、これを元に画像を作ってもらいます。

generateResponseメソッドは、下記のように入れます。

  • temperatureは、多様性を制御するためのパラメータとなります。高い(例:0.8)と、ランダムで多様性に富んでいる回答が得られ、低い(例:0.2)と、より保守的な回答が得られます。
  • max_tokensは、最大トークンとなります。今回はメニュー名なので、少な目に30までとしました。30トークンは大体30文字程度ですが、文字によると1トークン1文字以上でカウントされます。また、漢字が入ったりすると増えます。

日本語の場合は、英語よりも多めにトークンが使われます。

トークンがどれだけ使われたか知るには、openAIのPlaygroundページでテストができます。右下に、やりとりに使われたトークン数が表示されます。

generateImageメソッドは、下記のように入れます。

  • sizeは、画像のサイズです。512*512、1024*1024のサイズ指定も可能です。ただ、大きい画像にすると、それだけAPIの利用料金も高くなります。
  • response_formatは、画像のフォーマットです。今回はurlにしました。他にもb64_jsonが選択可能です。b64_jsonの場合は、base64によって変換されたデータが得られます。表示の際には、デコードが必要です。

ルート設定作成

次にルート設定を作ります。routes/web.phpファイルを開き、下記ルートを追加しましょう。

【routes/web.php】

ビュー作成

最後にビュー部分です。resources/viewsの中にimage.blade.phpファイルを作り、下記のコードを追記します。

【resources/views/image.blade.php】

サイトにアクセスして、画像をチェックしてみましょう。

こちらは良い画像ですが、時々、変な画像が生成されたりします。

$responseText の値を変更したりして、調整してみてください。

APIの利用料金について

以上がChatGPTとDALL·E 2 APIを使ったコード例です。

APIの利用料金や注意点については、下記記事の 「ChatGPTのAPIを使う時の料金について」をご覧ください。

今回は新たに画像を使ってみました。今回使用したDALL·E 2 APIは、256*256サイズの画像で、1個につき0.016ドルかかります。

100回使われると1.6ドル。今日のレートでは1ドル133円だったので、213円程となります。

正直、希望通りの画像が作れるわけではないので、このお値段は安くはないかなという印象です。

APIの利用料金は、ログイン後、右上のユーザー名をクリックして【Manage account】を選択すると分かります。

実際のWebアプリ

なお、今回のコードを元にした実際のWebアプリ【今日のメニュー】も公開しています。

今日のメニュー

上記ボタンをクリックして、ぜひ遊んでみてくださいね♪

なお、画像生成APIは、DALL·E 2ではなく、Pexelsを使っています。最初は、DALL·E 2を使っていたのですが、画像生成に時間がかかる・関係のない画像ができる・そのわりに安くはない、という理由から、変更しました。

ちなみに、DALL·E 2にりんごと肉でメニューを作ってもらうと、こんな画像ができたりしました。

これはこれで面白いのですが。AI画像生成は、また後日、試してみたいと思います。

さいごに

今回は、OpenAI社のChatGPTとDALL·E 2 をLaravelと連携させて、Webアプリを作る方法を解説しました。

AI系のAPIを使うと、Webアプリ開発の幅が広がってきますよね。

参考にしたOpenAI社の公式ドキュメントはこちらです。アレンジしたい時に参考にしてください。

ただ、コードのアレンジは。Laravelやプログラミングについて、ある程度の知識がないと難しいかと思います。

もし

「参考記事をコピペするだけじゃなく、自分でコードを編集できるようになりたい」

と思ったら、まずは基本からひとつずつ、学んでいきましょう♪

Laravelについては、わたしが運営している学習サイト【Laravelの教科書】で、基本的な使い方を習得していただけます。

【Laravelの教科書を通じて作成するWebアプリの画面例】

Laravelを学びつつ、フォーラムサイトを学んでいく実践的な教材です。ご興味あれば、下記ボタンをクリックしてください。

Laravelの教科書について詳しく知る

基礎編は無料です♪

AI/ChatGPT

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。

デプロイ講座とVue.js講座付

StripeやChatGPT連携など過去10回分のセミナー動画視聴可能。

Laravel実践スキルをのばしたい方におすすめです。

ラボの案内を見てみる

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました