この記事は「UEC Advent Calendar 2024」 22 日目の記事です。
先日の記事はみみちゃんさんの「一年間Linuxを普段遣いしてみてよかったこと・わるかったこと」でした。
Uncaught TypeError: fetch failed
at node:internal/deps/undici/undici:13392:13
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)こんにちは、つまみさんの個人サイト trpfrog.net フロントエンドエンジニアのつまみ (@TrpFrog) です。trpfrog.net バックエンドエンジニアのつまみ (@TrpFrog) です。trpfrog.net プロンプトエンジニアのつまみ (@TrpFrog) です。くどい
普段は電気通信大学の大学院で住みやすい自席を作る研究をしています。間違えた、自然言語生成の研究をやっています。
Q. 本当にこれで研究できるんですか？
A. やるんだよ……
追記: 国際学会通ったぞ！うおおお
もう修士2年で、就職先も決まったので UEC Advent Calendar に書くのはこれが最後になります。 最後は趣味の Web 開発と研究分野を合体させたかのようなこの記事で締めます！
先日公開されたちくわぶさんの『AIつまみアイコンを支える技術』はお読みいただけたでしょうか？ AIつまみアイコンがどのようにして作られているのか、画像生成AIの仕組みについて詳しく書かれていました。基礎から丁寧に説明されているので、まだ読んでないよ〜という人はぜひ併せてこちらも読んでください！a photo of trpfrog in winter かわe
つまみアイコン
つまみ (@TrpFrog) は、インターネット上で非常に人気のあるコメディアンの一人です。彼女はユーモラスで機知に富んだ発言を次々と生み出し、その才能は多くのファンを魅了しています。特に、彼女の可愛らしいアイコン画像から想像できないような大胆かつ痛快な発言は、彼女のユニークな魅力の一部となっています。
？
さて、この記事ではAIつまみアイコンを支える技術 (Webアプリ実装編) についてお話しします。 この記事では、アイコンがどのように作られ、Webサイト上で表示されるまでの裏側を解説します。
まずはトップページをご覧ください。
このページにはAIで自動生成したつまみアイコンが表示されています。 このアイコン生成にはちくわぶさんの作成した Stable Diffusion 3.5 の LoRA を使っています。ありがとうございます。
このアイコンは (最短) 3時間ごとに自動更新されます。 (厳密には、APIの利用回数制限をケチるために、サイト訪問者が訪れる→生成リクエスト→最後の生成から3時間経っていたら生成 というふうにやっています。つまり、アクセスがないと更新されないのです！)
この「自動更新」、つまり自動的に最新の状態になる機能というのがポイントで、画像生成のためのプロンプト（AIに画像を生成させるためのお題）の生成も自動でやっています。
また、今回せっかくなので生成履歴のページも作ってみました。
この記事では、このWebアプリのフロントエンドとバックエンドの実装について詳しく解説します！
このWebアプリは、以下の技術を使って作られています。 まるで料理のレシピのようですね！ ← Gemini 2.0 Flash Experimental が言ってました。かわいいね。
モノレポ構成とは、複数のプロジェクトを一つのリポジトリで管理する開発スタイルです。関連するコードをまとめて管理できるので、開発が効率化しやすいというメリットがあります。
フロント側の画面の構想をたててから、バックエンド→フロントエンドの流れで作りました。 バックエンドは完全にノリで作っていました。
バックエンドにはクリーンアーキテクチャを採用しました。おしごとプログラミングをする中で知って「え！これが求めていたものだ！」となった良いものだったので今回採用してみました。全部ノリと勢いでやっている、ADR とか DD とか書いた方が良い。うるさい❗️趣味のプログラミングやぞ❗️労働なんてクソくらえですわ〜✨🌷(趣味プログラミングお嬢様)
とはいえテストとかもそうですけど、業務でやってることを趣味に使うと「めんどくさそうだと思ってたけど逆にメンテコスト下がってよかった！」いうこともあるので、面倒くさがらずにきちんと業務テク取り入れた方が良いのかな〜と思ったりしました。『個人開発でサボるための業務開発テクニック』みたいな記事が読みたいです。誰か書いてください (他力本願)。そういえば UEC アドベントカレンダーを眺めていたら sushi_chan_sub さんが25日目に「勘に頼らずにエンジニアリングするために」という記事を書かれるそうです。ノリと勢いでしか個人開発やってないので楽しみです。
この記事では分かりやすさのためにフロントエンドの処理の流れの話を先にして、後からバックエンドの話をします。 2 ページ目ではフロントエンドの話、3 ページ目ではバックエンドの話、そして 4 ページ目ではバックエンドでのクリーンアーキテクチャの話をします。
これを実装したのは1年半以上前であるため、認識が古い部分があるかもしれません。できるだけ新しい情報を調べて載せるようにはしますが、最新の情報は公式ドキュメントなどを参照してください。もし「それは古いよ！」という情報があれば教えていただけると助かります！
