§03-14AI
AI 画像生成 in-app
入力したプロンプトから画像を生成して表示する。
アプリ内で説明文から画像を作り、外部ツールを往復せずに使える。挿絵やサムネイルなど、素材を用意する手間を省きたい場面に向く。
実装のポイント
生成中は出力枚数ぶんのプレースホルダを skeleton で確保し、レイアウトのずれを防ぐ。生成は時間がかかるので中断ボタンと進捗表示を用意する。
- 特徴
- モック
- 非同期
- デモで使っているもの
- shadcn/ui
- lucide-react
- SVG
- ソース
- ai-image.tsx