Zenn
🍣

AIでどんなネタも寿司にする！寿司画像生成iOSアプリをつくった

2023/12/12に公開
iOS
Python
個人開発
SwiftUI
OpenAI
tech

クソアプリアドベントカレンダー2023 12日めの記事です。

お寿司が食べたい

お寿司食べたいですよね？

でもお寿司って高くないですか？
ひと味ちがうお寿司を食べたいな〜なんて思ってお店を探すと、会員制だったりしてね。
手軽にデリバリーで頼んでも、いつも混んでて届くまでちょっと時間がかかりません？

・・・そんなお寿司民たちに朗報です！

OpenAIの DALL·E と GPT をつかって、お寿司アプリをつくりました。


🔗 Sushify

OpenAI DALL·E と GPT とは...

DALL·E

OpenAI 提供する画像生成ができるモデルです。

GPT

OpenAIが提供する大規模言語モデル（Large Language Model: LLM）です。文章の生成などができます。

遊びかた

https://apps.apple.com/jp/app/sushify/id6473835970
App Store から、アプリをインストールしてください🍣

お好みの寿司ネタを入力、注文ボタンをタップ

※AIがお寿司つくるのには少し時間がかかるので、しばしお待ちください🙇

美味しそうなお寿司ができたら、みんなにシェア

自分の作ったお寿司はシェアボタンからシェアできます。

みんなのお寿司からインスピレーションをもらう

「みんなのお寿司」タブをタップしてみてください。
ほかのユーザーがつくったお寿司が閲覧できます。

つかった技術

AI

  • OpenAI DALL·E 3（お寿司の画像生成）
  • OpenAI gpt-3.5-turbo（お寿司の名前や説明など文章生成）

バックエンド

  • Python
  • Firebase
  • Google Cloud Platform

フロント

  • Swift / SwiftUI

こだわったこと

流したい！そのお寿司！

アプリ内では、ほかのユーザーが生成したお寿司画像を閲覧できる画面を実装しました。
しかしこれが難しかった。なんならいちばん苦労した。
うまくいかなすぎて、UIKitで実装しようかと思いました。


流れるお寿司

結論からいって、SwiftUIの AsyncImage と Animation View Modifier の組み合わせがうまく動作していないようでした。

もう少しくわしく...

寿司の画像は URLからデータのロードを行い、表示をしています。
SwiftUIでは、URLから画像を非同期に読み込むために、AsyncImage のビューを用いるのが今の標準的な実装方法だと思います。しかし、この画像の非同期読み込みと、SwiftUIのアニメーションの組合せの相性が悪かったのか、ロードされた画像のリサイズが適用されずに表示されない、などの課題がありました。

ちなみに、関連しそうなissueもありました。
https://stackoverflow.com/questions/70550484/swiftui-asyncimage-animation-misbehavior

この部分について、どう対応したかについては別の記事に書きたいと思います。

NGワード

ユーザーが入力した寿司ネタは、ほかのユーザーに閲覧されることがあります。その際に不適切なワードが混ざらないように、NGワードを判定を実装しました。具体的なワードの選定は、放送禁止用語などを中心に行ました。

https://ja.wikipedia.org/wiki/放送禁止用語

また、あえて記載しませんが、入力値の検証については改善点があるので今後ブラッシュアップしていけたら、と思っています。

開発中に困ったこと

GPT 突然の文字化け

こちらについては、モデルの変更で対応しました。

2023年12月3日時点ですが、モデル別の文字化けは下記のような状態でした。

  • gpt-4-1106-preview: 文字化けする
  • gpt-4-0613: OK
  • gpt-4: OK
  • gpt-3.5-turbo-1106: 文字化けする
  • gpt-3.5-turbo: OK

画像生成には時間がかかる

こればっかりは、なんとかなりませんでした。せめて、画像生成と文章生成は並列処理を行うようにしています。

DALL·E 3の利用料金が心配

OpenAIで利用できる画像生成モデルはDALL·E 2とDALL·E 3のふたつですが、利用料金が異なります。

※レンジは、品質と解像度によるもの

  • DALL·E 2は 0.016 〜 0.020 ドル
  • DALL·E 3は 0.040 〜 0.120 ドル

しかし、生成された画像を見ると、お寿司のクオリティが段違いで妥協はできません。


左から：DALL·E 2、DALL·E 3

OpenAIのアカウントクレジットは拡張していますが、公開アプリにすることで上限に達するのではないかとヒヤヒヤです。そうなったらそうなっただ。

（ぶっちゃけつくりたいものを早くつくるのが目的で、費用対効果とか何も考えていませんでした。）

一応利用できなくなる状態も考慮して、メンテナンスモードをアプリに実装しました。

開発期間

フロントとバックエンドで、およそ合計1週間くらいかけました。
一番大変だったのは、SwiftUIです。バックエンドは書けば書けるのですが、前述のSwiftUIでのアニメーション箇所はとくに詰まりました。

あとがき

このクソアプリをつくって良かったこと

DALL·E 3モデルを使えた

ChatGPTやImage Creatorを通じてDALL·E 3モデルで遊んでみて、生成画像のクオリティに驚きました。画像生成モデルをつかっていろいろ楽しいことができると良いなと思っていたので、良い機会になりました。

SwiftUIを学んでリリースできた

数年前まではiOSアプリエンジニアをメインでやっていたのですが、最近バックエンド開発の仕事が多く、アプリをさわる時間が減りました。あまり経験のないSwiftUIで、サービスをつくることができてよかったです。

ユーザー参加型のサービスをつくれた

正直実装が足りない部分はあるものの、どんなことを考慮すべきか考える良い機会になりました。

さいごに

ちなみに「寿司流し」のアニメーションは、わたしの所属しているコミュニティの方にインスピレーションをいただきました。（実際には、回ってないし、レーンもないけど🥲）

エンジニアと人生コミュニティSlack

そのほか、所属しているコミュニティのtimes でクソアプリの進捗をつぶやいていたのですが、ちょくちょく反応を頂けたことが励みになりました。さいこう。

エンジニアと人生コミュニティSlack

以上です🎉
ありがとうございました。

Discussion