はじめに
自社開発のエンジニアをやっているものです。
日頃から chatGPT にはお世話になっていたのですが、API の方は触らぬまま拗らしていました。
昨今いろんな gpt の派生系が出ている中で触れないわけにはいかないと思い、OpenAI API を使用した極々簡単なツールを作成してみました。
一旦形にした段階でこちらの記事を書き始めているので細かいところはスルーいただけると助かります。
作成したツール
手書き風画像ジェネレータ
手書き風画像ジェネレータというものを作成しました。
概要
テキストボックスにお題を入れて生成ボタンを押下すると、上記のようにお題にあった絵を手書き風で出力してくれます。
chatGPT でも画像生成機能はあるのですが、特に要望を入れないでお願いすると結構リアリティの高い画像が出力されがちで個人的にはもう少し簡素なレイアウトが欲しいと感じたところからこのツールを作成するきっかけに繋がりました。
参考として同じお題で chatGPT にお願いした場合の画像になります。
技術
選定
-
Golang
- Gin
- html/css
- javascript
高パフォーマンスなのと、最近学習しているという理由でバックエンドは Go 言語にしました。
フロント周りは実装の負担が少なかったのでフルスクラッチ？で実装しました。
OpenAI API のモデルはググってみて、使用可能かつ新めっぽかったのでdall-e-3を使用しました。
設計
１画面構成なのでモノリスチックな構成で良いと判断しました。
バックエンドに API を 2 本(GET,POST)立てまして、GET メソッドは HTML を返し、POST メソッドは OpenAI API から生成画像 URL を取得し、json で返すような設計になっています。
処理フローは下記のようになります。
- GET
- クライアントサイドから GET メソッドで API を呼ぶ
- API が HTML ファイルが返す
- POST
- クライアントサイドからプロンプトをリクエストボディに設定し POST メソッドで API を呼ぶ
- API から必要なデータをリクエストボディに設定し POST メソッドで OpenAI API を呼ぶ
- OpenAI API が画像を生成し URL を返却する
- API が URL を返す
- URL を元にクライアントサイドで画像を表示させる
実装
題に合わせて OpenAI API にリクエストを送るところの実装を簡単に説明します。
下記がリクエスト送るところの実装になります。
response, err := client.R().
SetHeader("Authorization", "Bearer "+os.Getenv("OPEN_AI_SECRET")). // *1
SetHeader("Content-Type", "application/json").
SetBody(map[string]interface{}{
"model": "dall-e-3", // *2
"prompt": prompt, // *3
"n": 1,
"size": size, // *4
"response_format": "url",
}).
Post(openaiURL)
OpenAI API はOpenAI overviewで api キーを取得が必要でありその値を*1 のところで設定しています。
リクエストボディは使用するモデル*2、プロンプト*3、画像サイズ(ex.1024×1024)*4 は自分好みに合わせて設定しました。あとの値は他の方の実装に真似て設定しました。
作成してみた感想
やはりですが、汎用性と利便性がとても高いなと感じました。
実際「お題にあった画像を生成する」という要件を自力で実現するのはかなり難しく（自分は無理）そこを API に問い合わせるだけでできてしまうのは感動しますよね。工夫すればもっと面白い使い方ができると思うので、もう少し奇抜な使い方を考えてみたいと思いました。
あとは WEB の技術を学ぶことを目的として OpenAI API を使用するのもとても有意義になりそうと感じました。よく何を作るかで困りがちですが、gpt ならいろんなことができるので考え耽ることは少なくなるでしょうし、実装も簡単なので挫折経験も少なくなりそうだなと思いました。