DocumentBuilderAIModal

AI image generation modal (Nano Banana integration).

Overview

DocumentBuilderAIModal provides the interface for generating AI before/after images. Users select an input image, optionally attach material references, enter a prompt, and receive generated variants.

Workflow

1. Select Input — Choose from project images or upload new
2. Add Materials — Optional material references from the library
3. Enter Prompt — Describe the desired transformation
4. Generate — Creates a job via the Nano Banana API
5. Review — View generated variants
6. Refine — Send refinement messages for iteration
7. Insert — Add to document as image or image_compare block

Features

• Image selection from project library
• Material reference attachment
• Prompt input with template suggestions
• Job status tracking (queued → running → succeeded/failed)
• Output gallery with variant previews
• Iterative refinement via chat
• Insert as before/after comparison or single image

Key Dependencies

• useNanoBanana — AI generation composable

Source

app/components/document-builder/DocumentBuilderAIModal.vue