AIが作った画像でパズルができるサイトを作った話
サイトURL
※今はサーバーを停止中のためアクセスできません><
（AWS料金節約中..）
GitHubリポジトリ公開中
lambdaの関数urlやhugging faceのアクセスキーは無効化しているのでご心配無用です。
サイトのあそびかた
今遊べないけど一応書いとく
- 難易度の設定 パズルは3×3、4×4、5×5の三種類から選択できます
- ランダムな猫の画像か、AIが作った画像のどちらで遊ぶか選びます
- 2.でAIを選んだ場合 どのような画像を作りたいか設定します
- スライドパズルで遊ぶ
- 完成した画像を保存する
使ったAWS技術（ざっくりと！）
EC2:Amazon Linux, t2-micro
lambda:python3.9
こちらがAWSの構築図になります。
CI/CDっぽくコード適用を自動でしたかったのでcode pipelineとcode deployを使うことでgitのmainブランチにpushするだけで本番環境にデプロイされるようにしてます。
lambdaは、コードの中でapiにアクセスするためネットワーク接続を実現したかったのですが、パブリックサブネットに入れてもつながらないらしいのでNATに向いてるプライベートサブネットに配置しました。
lambdaのecrとefsの矢印は大変だったことで説明します。
AIの自動生成についてはgsdf/Counterfeit-V2.5というモデルを使わせていただきました。
背景も綺麗なキャラクター画像を作ることが得意なモデルなのですが、冒頭で表示したものと公式が出しているサンプル画像を比べると少し見劣りしています。ここはステップ数を増やす、プロンプトを工夫することでより質の高い画像を出力するAPIにしたいです。
大変だったこと
lambdaでAPIを実装しようと思っていたのですが、pythonでAPIを作っていたため例えばデフォルトで入っていないcv2やfastapiなどのライブラリをインポートするときにそのままだとエラーが出るんですよね。
これを解決するには難易度順で3パターンありました。
1.カスタムレイヤーを使う方法
lambdaレイヤーはパッケージ化したライブラリをlambdaに取り込める機能です。
ざっくりやり方を説明すると、cv2をインストール後、zipで圧縮してs3におき、そこからlambdaカスタムレイヤーにアップロードしてlambdaにそのレイヤーを追加します。
するとimport cv2が無事実行できますが、問題があってこのzipファイルの上限数が50MB、zip前で250MBとなっていることです。
そのためcv2やstabble diffusionなどの大規模なライブラリをimportする今回のAPIには不向きな方法でした。
2. EFSを使う方法
EFSをEC2の指定フォルダにマウントして必要なライブラリをそのフォルダにインストールします。そしてそのフォルダをアクセスポイントとしてlambdaから設定するとインストールしたライブラリが使えるというものです。
しかしこれをstabble difusionでやると個人で払うには少し高い金額がかかってしまいまたNGとなってしまいました。
3.ECRを使う方法
必要なファイルをパッケージ化したコンテナをECRにアップロードして、lambdaからそのECRにアクセスする方法です。
コンテナの知識があまりなかったため同様の技術を使っている知人から助言をもらい、なんとか実装できました。
ちなみに、画像生成はメモリをたくさん食うのでlambdaのメモリを最大値3008から10240に解放する必要がありました。このように申請すると二つ返事であっさり解放されました👍
便利だったサイト
Game UI Database
画面のレイアウトを考える時に参考になります。
僕の場合、スライドパズルをメインとしたアプリなのでpuzzleでフィルタをかけるといい感じの参考ゲーム画面が出てきてすごく助かりました。
デザイナー？の方が個人でまとめてるっぽいです🙏
Lottie
ローディング画面でリスがぐるぐる回るのがこちらのlottieから拝借しました。
可愛いアニメーションがいっぱいです。
あのairbnbが作ったライブラリで、affter effectで作ったアニメーションをwebサイトに乗っけれます。
Youtube
NextjsとTypescriptでシンプルなアプリケーションを作る動画です。
お初の技術でしたがこれでNextjsとTypescriptの使用感がわかりました。
コード書くの早くてさすがっす。。
ChatGPT
最強
説明不要の素晴らしい先生
質問力と答えが間違っているか判断する知識はいるかんじでしたけどかなーーり助かりました。
Discussion