Agile育成ブログ
未来を変える喜びを
未分類

Next.jsとStable Diffusionで画像生成アプリ

  / 
npx create-next-app@latest .

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use src/ directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

jszipはJavaScript で .zip ファイルを作成、読み込み、編集するためのライブラリ。
ライブラリ「rc-slider」をインストールすると、色んなタイプのスライダーの実装が可能です。

npm i @heroicons/react jszip rc-slider

ページ作成

型ファイル

型ファイル

imagesType[]としているのは配列だから。

const [images, setImages] = useState<imagesType[] | null>(null)

型ファイル

eの型はReact.FormEvent<HTMLFormElement>

seedが入力されなかったとき

!seedは論理否定演算子（NOT演算子）として機能します。
seedがfalse、null、undefined、0、空文字列などの”falsy”な値の場合にtrueを返します。

    const seedList = []
    for (let i = 0; i < count; i++) {
      if (!seed) {
        // シードが指定されていない場合は、ランダムなシードを設定
        seedList.push(Math.floor(Math.random() * 1000000000))
      } else {
        // シードが指定されている場合は、指定されたシードを設定
        seedList.push(seed)
      }
    }

デバック

console.log('seedList', seedList) では、seedList という変数の中身が 'seedList' という文字列とともに表示されますが、console.log(seedList) では、seedList という変数の中身のみが表示されます。

seedList [ 12345, 67890, 54321, ... ]
[ 12345, 67890, 54321, ... ]

エラー画面

  • Image Count:画像生成数
  • Size:画像生成サイズ
  • Guidance Scale:画像がプロンプトにどれだけ従うか
  • Number of Interface Steps:

Gene

モーダルをクリックしても閉じないようにする。

  const handleModalClick = (e: MouseEvent) => {
    e.stopPropagation()
  }

バックエンド

backendフォルダ作成
.gitignoreファイル作成

pyTorchインストール

pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu117
python
import torch
torch.cuda.is_available()
pip3 install -r requirements.txt

FastAPIのインスタンスを作成。

app = FastAPI()

CORSは、ウェブブラウザのセキュリティ制約により、異なるオリジン（ドメイン・ポート・プロトコルの組み合わせ）からのリクエストを制限する仕組みです。一般的に、ウェブブラウザ上で動作するアプリケーションにおいて、異なるオリジンへのリクエストを許可する必要がある場合にCORSを有効にします。

VAE

VAEを設定すると画像の質感を変更することができる。

https://huggingface.co/xyn-ai/anything-v4.0/tree/main

vaeフォルダ作成
diffusersライブラリはvaeファイルをそのまま読み込むことはできない。
diffusers用のvaeに変換する

https://github.com/huggingface/diffusers/blob/main/scripts/convert_vae_pt_to_diffusers.py
python ./convert_vae_pt_to_diffusers.py --vae_pt_path ./vae/anything-v4.0.vae.pt --dump_path ./vae/anythingv4_vae
RELATED POST