はじめに

どうも、@nittannittanです。

趣味でAndroid/iOS/Webアプリを作成しているアニメオタクです。

今回は、AIで画像コンテンツを作成しその画像を利用したアプリを開発したので、利用技術などを紹介したいと思います。

AIでの画像生成にはStable Diffusion Web UIを、アプリ開発にはFlutterを利用しました。

AI画像生成へようこそ

まず手始めに、ローカル環境へStable Diffusion Web UIをインストールして操作方法や基礎的なことを学びました。
下記のサイトが参考になります。

モデル探しの奇妙な冒険

なんとなく使い方が理解できたら次は生成したい画像にあったモデルを探す旅の始まりです。
下記サイトで探しわまったり、モデルを比較しているサイトもGoogle検索で見つかるので手当たり次第に試してみましょう。良し悪しがあって面白いです。

この素晴らしいAI画像生成に爆速を

私のローカル環境は未だにIntel Macなので、Stable Diffusion Web UIで高品質な画像を生成しようとすると1枚生成するのに5分くらい時間がかかります。

同じプロンプト（生成呪文）でもSeedが変わると結構違ったりするので、思い通りの画像ができるまで生成の繰り返し（ガチャ）をする必要があります。

ガチャ一回に5分は待てませんよね・・・

そこで利用するのが、Google Colabです。

ただし、昔は低スペックのCPUであればStable Diffusion Web UIも無料で動かせたのですが、今は課金をしないと数分で強制停止されてしまいます。

2024/02/14時点だと100コンピューティングで1000円ほどなので、爆速を金で買いましょう。A100のCPUを利用すると1枚の生成が数秒で完了します。ただし時間帯にもよると思いますが、1時間A100を起動すると13コンピューティングほど消費します。なれないうちは低スペックなCPUを選択しましょう。

リソースモニタで消費率などがわかるので、注意しながら利用するのがおすすめです。

画像転生 ~Colab行ったらクオリティ出す~

速さを得たので次は、画像のクオリティアップを目指します。

私が試した中だと拡張機能の『MultiDiffusion』『Tiled Diffusion』が優秀でした。

それと私は背景画像を消したいことがあったので拡張機能のABG Removerもインストールしています。

私のColabのnotebookの記載は下記のような形です。モデルは好きなものに置き換えてください。

%pip install torch==2.0.0+cu118 torchvision==0.15.1+cu118 torchtext torchaudio torchdata==0.6.0 --index-url https://download.pytorch.org/whl/cu118

!git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
%cd /content/stable-diffusion-webui

#モデルのインストール
!wget https://huggingface.co/nuigurumi/basil_mix/resolve/main/Basil_mix_fixed.safetensors -O /content/stable-diffusion-webui/models/Stable-diffusion/Basil_mix_fixed.safetensors
!wget https://huggingface.co/stabilityai/sd-vae-ft-mse-original/resolve/main/vae-ft-mse-840000-ema-pruned.safetensors -O /content/stable-diffusion-webui/models/VAE/vae-ft-mse-840000-ema-pruned.safetensors

#multidiffusion-upscaler-for-automatic1111インストール
!git clone https://github.com/pkuliyi2015/multidiffusion-upscaler-for-automatic1111 /content/stable-diffusion-webui/extensions/multidiffusion-upscaler-for-automatic1111

#ABG Removerインストール
!git clone https://github.com/KutsuyaYuki/ABG_extension /content/stable-diffusion-webui/extensions/ABG_extension

!python launch.py --share --xformers --enable-insecure-extension-access

Flutter!キミにきめた！

無事画像が生成できるようになったら個人開発者の強い味方Flutterの出番です。

一度Flutterに手を出したらやめられないですね。iOSとAndroid同時開発は、涙が出るくらいリリースまでの時間が短縮できます。

ベースは下記の記事と同じです。

ただし、moorはdriftに名前が変わっているので注意です。移行用の手順なども整備されているので比較的移行はしやすかったです。

新しいパッケージ入れるよ！

前回作ったアプリには入れなかった新しいパッケージを紹介します。

convex_bottom_bar

今回は画面下にメニューバーがあるUIにしたかったのでこちらを入れました。
Android, iOS両方でメニューバーを実装する場合慣れていないと色々苦労しますが、そこはさすがのFlutter。パッケージインストールして数行書くだけでキレイなメニューバーが出来上がります。

しかも見た目やアニメーションもちょっと設定するだけでこの綺麗さです。楽して綺麗。素晴らしい。

webサイトで設定毎の見栄えの確認もできます。

flutter_animate

今回はUIにちょっと動きもつけたいと思いこちらを入れました。
これもwidgetの記述のあとにメソッドを追加するだけでアニメーションがそのwidgetに適応されるので感動モノです。

Androidでアニメーションをやろうと思って、面倒くさそうでやめた私には神すぎたパッケージです。

下記サイトのgif画像を見ながらアニメーションを選びました。

cached_network_image

今回は画像を多く扱うので、描画速度向上のためとサーバー費用のことも考えて画像をキャッシュすることにしました。

こちらもImageのWidgetをCachedNetworkImageに置き換えて少しメソッドを追加するだけなのでかなりお手軽です。

開発したアプリ「AniQ」紹介

最後に新しくリリースした「AniQ」を紹介して終わりたいと思います。

「AniQ」はAIが生成したイラストからアニメを当てる新感覚のクイズアプリです。

「AniQ」を使用すれば、楽しみながらAIイラストの世界を楽しむことができます。

先日のアップデートで連続正解数を記録する機能を追加したので、是非記録更新を狙ってみてください！

ちなみに全アニメランダムで私も挑戦してみましたが、難易度鬼畜なものが何個かあり連続正解数二桁いけずの状態です。

今期(2024年冬アニメ)に限定すると流石に今見ているものなのでほぼ正解できるんですけどね（笑）