Spaces:
Sleeping
Sleeping
File size: 3,587 Bytes
68f7925 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
# HTML生成シーケンス図
## 概要
FV（ファーストビュー）とコンテンツHTMLの生成フローを示すシーケンス図です。それぞれ独立したエンドポイントで、即座にHTMLを返します。
## FV HTML生成シーケンス
```mermaid
sequenceDiagram
participant Client as クライアント
participant API as /html-preview/generate-fv-html
participant UseCase as FVGenerationUseCase
participant Pipeline as SimplePipeline
Client->>API: POST /html-preview/generate-fv-html<br/>{tabName, fvData, provider, screenshotUrl}
API->>API: fvDataからメインコピー抽出
API->>API: サブコピー抽出（最大3つ）
API->>UseCase: executeSimplePipeline({
screenshotUrl,
mainCopy,
subCopies,
fvData,
tabName,
provider
})
UseCase->>Pipeline: FV画像生成（AI使用）
alt 生成成功
Pipeline-->>UseCase: {html, css, imageUrl}
UseCase-->>API: 生成結果
API-->>Client: 200 OK<br/>{html, css, imageUrl, pipelineType}
else 生成失敗
Pipeline-->>UseCase: エラー
UseCase-->>API: エラー情報
API-->>Client: 200 OK<br/>{html: error_message, css: "", imageUrl: null}
end
Note over Client: FVを即座に表示
```
## コンテンツHTML生成シーケンス
```mermaid
sequenceDiagram
participant Client as クライアント
participant API as /html-preview/generate-contents-html
participant GenFunc as generateContentsHtmlWithImages
participant HTMLGen as HTMLGenerator
Client->>API: POST /html-preview/generate-contents-html<br/>{tabName, cnData}
alt ダミーモード(?dummyMode=true)
API->>API: 事前生成HTMLを読み込み
API-->>Client: 200 OK<br/>{html: dummy_html, css, message: "ダミーモード"}
else 通常モード
API->>GenFunc: generateContentsHtmlWithImages(tabName, cnData)
alt cnDataが存在する場合
GenFunc->>HTMLGen: new HTMLGenerator()
GenFunc->>HTMLGen: generateHTML(requestData)
Note over HTMLGen: テンプレートベースで<br/>HTML生成（プレースホルダー<br/>画像を自動埋め込み）
HTMLGen-->>GenFunc: 完全なHTML
GenFunc->>GenFunc: コンテンツセクション抽出
GenFunc->>GenFunc: 画像更新スクリプト追加
else cnDataが空の場合
GenFunc-->>GenFunc: デフォルトHTML返却
end
GenFunc-->>API: {html, css}
API-->>Client: 200 OK<br/>{html, css, message}
end
Note over Client: プレビュー画面に<br/>即座に表示
```
## 主要な特徴
1. **FVとコンテンツの分離**
- FV: `/html-preview/generate-fv-html` - AIを使った画像生成を含む
- コンテンツ: `/html-preview/generate-contents-html` - プレースホルダー画像付き
2. **ダミーモードのサポート**
- クエリパラメータ `?dummyMode=true` で事前生成HTMLを使用
- 開発時の高速テストが可能
3. **即座のレスポンス**
- プレースホルダー画像付きのHTMLを即座に返却
- ユーザーは待ち時間なくレイアウトを確認可能
4. **画像更新対応**
- 画像更新用のJavaScriptを自動付与
- 後から画像生成APIで生成された画像に置換可能
5. **エラーハンドリング**
- FV生成失敗時もエラーメッセージ付きHTMLを返却
- システムが完全に停止することを防ぐ
|