本文へ移動

§03-14AI

AI 画像生成 in-app

入力したプロンプトから画像を生成して表示する。

アプリ内で説明文から画像を作り、外部ツールを往復せずに使える。挿絵やサムネイルなど、素材を用意する手間を省きたい場面に向く。

実装のポイント

生成中は出力枚数ぶんのプレースホルダを skeleton で確保し、レイアウトのずれを防ぐ。生成は時間がかかるので中断ボタンと進捗表示を用意する。

特徴
  • モック
  • 非同期
デモで使っているもの
  • shadcn/ui
  • lucide-react
  • SVG
ソース
ai-image.tsx