はじめに
最近、画像生成AIを利用したWebアプリケーションが増えています。
その中でも、既存の写真をもとに新しいデザインを生成するサービスは、一般的なテキストからの画像生成とは少し異なる設計が必要です。
例えば、部屋の写真をアップロードし、「北欧風のインテリアに変更したい」と指定するケースを考えてみます。
一見すると、画像をアップロードして生成ボタンを押すだけのシンプルな機能です。
しかし、実際にWebアプリケーションとして設計する場合、いくつかの課題があります。
- 画像ファイルをどのように検証するか
- ユーザーのデザイン指示をどう構造化するか
- 生成中の状態をどのように管理するか
- 生成結果をどのように評価するか
今回は、住宅デザインAIを題材に、TypeScriptによる入力検証と非同期処理の基本的な実装例を整理します。
なお、掲載するコードは設計パターンを説明するためのサンプルであり、特定サービスの内部実装ではありません。
1. 画像生成アプリの基本的な処理フロー
住宅デザインAIの処理を単純化すると、次のようになります。
ユーザーが画像を選択
↓
画像形式・サイズを検証
↓
部屋タイプ・デザインスタイルを選択
↓
画像をアップロード
↓
生成リクエストを送信
↓
生成結果を受信
↓
Before / After を表示
ここで重要なのは、AIモデルの処理だけでなく、前後のユーザー体験も考慮することです。
画像のアップロードに失敗した場合、適切なエラーメッセージが必要です。
また、生成に時間がかかる場合には、進行状況や処理状態を表示する必要があります。
2. TypeScriptで画像アップロードを検証する
最初に考えるべきなのは、アップロードするファイルの検証です。
例えば、JPEG、PNG、WebPの画像のみを受け付け、ファイルサイズを10MB以下に制限する仕様を考えます。
const ALLOWED_TYPES = [
"image/jpeg",
"image/png",
"image/webp",
];
const MAX_FILE_SIZE = 10 * 1024 * 1024;
function validateImage(file: File): string[] {
const errors: string[] = [];
if (!ALLOWED_TYPES.includes(file.type)) {
errors.push("対応していない画像形式です");
}
if (file.size > MAX_FILE_SIZE) {
errors.push("画像サイズは10MB以下にしてください");
}
if (file.size === 0) {
errors.push("空のファイルは使用できません");
}
return errors;
}
この関数では、検証エラーを配列として返しています。
複数の問題がある場合でも、ユーザーにまとめて通知できるようにするためです。
なお、10MBという上限は今回のサンプル仕様です。実際のサービスでは、モデルやインフラの制約に合わせて設定します。
また、ブラウザ側の検証だけでは不十分です。サーバー側でもファイル内容や形式を検証する必要があります。
3. AI画像生成の状態を管理する
次に、非同期処理の状態管理を考えます。
画像生成では、アップロードと生成処理が別々に実行されることがあります。
そのため、単純な isLoading だけでは、現在どの処理を実行しているのか判断しにくくなります。
TypeScriptのUnion型を使うと、状態を明確に表現できます。
type GenerationState =
| { status: "idle" }
| { status: "uploading" }
| { status: "generating" }
| { status: "success"; imageUrl: string }
| { status: "error"; message: string };
この設計では、各状態に必要な情報を限定できます。
例えば、生成が成功した場合のみ imageUrl を持ち、エラーが発生した場合のみ message を持つ構造です。
画面表示も状態に応じて切り替えられます。
| 状態 | UI表示 |
|---|---|
| idle | 画像選択・生成ボタン |
| uploading | アップロード中 |
| generating | AIが画像を生成中 |
| success | 生成画像と比較画面 |
| error | エラーメッセージと再試行 |
実際の実装では、リクエストの重複送信防止やタイムアウト処理も必要になります。
4. 生成パラメータは構造化して管理する
住宅デザインAIでは、画像だけでなく、ユーザーの希望するスタイルも入力情報になります。
例えば、次のような型を定義できます。
type DesignStyle =
| "modern"
| "scandinavian"
| "minimalist"
| "japandi";
type RoomType =
| "living_room"
| "bedroom"
| "kitchen";
interface DesignRequest {
imageId: string;
roomType: RoomType;
style: DesignStyle;
prompt?: string;
}
このように入力を構造化することで、フロントエンドとバックエンドの間で扱うデータを明確にできます。
また、ユーザーにすべての指示を文章で入力させる必要もなくなります。
例えば、デザインスタイルは選択式にして、より細かい希望だけを自由入力にする方法が考えられます。
これは、プロンプトの作成に慣れていないユーザーにとっても使いやすい設計です。
5. 実際の住宅デザインAIのUIを参考にする
公開されているインターフェースの例として、house design というAI住宅デザインツールがあります。
このサービスでは、室内・外観のデザインに対応しており、室内デザイン画面では次のような入力項目が確認できます。
- 部屋タイプ
- デザインスタイル
- ライティング
- 雰囲気
- 参考画像
- 追加のプロンプト
技術的な観点から興味深いのは、自然言語入力だけに依存していない点です。
ユーザーが選択できる項目と、自由に記述できる項目を組み合わせています。
こうしたUIは、ユーザーの入力負担を下げるだけでなく、生成リクエストを構造化して扱ううえでも参考になります。
ただし、ここで紹介したのは公開UIから確認できる機能であり、内部APIやモデル構成について推測するものではありません。
6. 画像生成結果はどう評価すべきか？
一般的な画像生成では、画像の美しさやプロンプトとの一致度が重視されます。
一方、住宅デザインの場合は、それだけでは不十分です。
例えば、ユーザーが既存のリビングを北欧風に変更したい場合、窓やドアの位置が大きく変わってしまうと、実際の空間をイメージしにくくなります。
そのため、以下の観点から評価することが重要です。
| 評価項目 | 確認内容 |
|---|---|
| 構造の一貫性 | 壁、窓、ドアの配置が維持されているか |
| スタイルの一致 | 指定したデザインに近いか |
| 視覚的品質 | 家具、素材、光と影が自然か |
| 操作性 | 再生成や結果比較が簡単か |
特に、生成結果を元画像と比較できるUIは、ユーザーの判断を助けます。
画像生成の性能だけでなく、結果を理解し、評価できる仕組みまで設計する必要があります。
7. 実装時に注意したいポイント
最後に、実装面で注意したい点を整理します。
エラーハンドリング
画像のアップロード失敗と生成処理の失敗は、区別して表示した方がわかりやすくなります。
非同期処理
生成時間が長い場合は、タイムアウトや再試行の設計を検討する必要があります。
プライバシー
ユーザーが自宅の写真をアップロードするため、画像の保存期間や削除方法を明確にすることが重要です。
結果の保存
再生成した画像を比較できるようにする場合、画像と生成パラメータを関連付けて管理する設計が考えられます。
まとめ
住宅デザインAIを例にすると、画像生成アプリケーションの開発では、モデルの性能だけでなく、入力設計や状態管理も重要であることがわかります。
特に意識したいのは、次の3点です。
- 入力データを適切に検証する
- 非同期処理の状態を明確に管理する
- 生成結果をユーザーが評価しやすいUIにする
今回は住宅デザインを題材にしましたが、これらの考え方はAI商品画像生成、画像編集、バーチャル試着などにも応用できます。
AIの機能をそのままユーザーに提供するのではなく、目的に合わせて使