# 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を返却
   - システムが完全に停止することを防ぐ