Image Generation Integration
Relevant source files
The following files were used as context for generating this wiki page:
The Image Generation Integration in Driveway Estimator Pro is a core feature that allows users to visualize various driveway materials (such as hot mix asphalt, millings, tar and chip, or gravel) on their actual property photos. By leveraging AI-powered image generation, the system creates photorealistic overlays that assist homeowners and contractors in the decision-making process.
This system bridges the gap between raw measurements and final project expectations. It integrates tightly with the backend tRPC router for processing, S3-compatible storage for persistence, and the frontend estimator flow to provide a seamless user experience from photo capture to material visualization.
Sources: README.md:10-14, todo.md:27-28
System Architecture
The image generation workflow is a multi-stage process involving client-side triggers, backend AI orchestration, and cloud storage. The primary entry point is the generateMaterialPreview tRPC procedure, which coordinates the transformation of an original driveway photo into a material-specific preview.
Data Flow Overview
The following diagram illustrates the lifecycle of a material preview request:
The system uses a prompt-based approach to instruct the AI to modify only the driveway surface while maintaining perspective, lighting, and surroundings from the original image.
Sources: server/routers/projects.ts:114-166, client/src/pages/Estimator.tsx:165-188
Backend Implementation
The backend logic resides within the projectsRouter. It handles the construction of natural language prompts and the persistence of generated assets.
tRPC Procedure: generateMaterialPreview
This procedure accepts the original photoUrl and the selectedMaterial. It maps internal material keys to descriptive names used in the AI prompt:
| Material Key | AI Prompt Description |
|---|---|
hotmix | hot mix asphalt |
millings | asphalt millings |
tar_and_chip | tar and chip |
gravel | gravel |
Sources: server/routers/projects.ts:122-127
AI Prompt Construction
The backend constructs a specific prompt to ensure consistency:
"Take this driveway photo and generate a photorealistic preview showing what it would look like with [material] applied. Keep the same perspective, lighting, and surroundings. Only modify the driveway surface itself."
Sources: server/routers/projects.ts:129-130
Storage and Persistence
Once the AI generates an image, the server performs the following:
- Retrieval: Fetches the image from the temporary AI-generated URL.
- Buffering: Converts the response into a Buffer.
- Storage: Uploads the buffer to S3 using a unique key format:
previews/${userId}/${nanoid()}-preview.jpg. - Tracking: Returns the
previewUrlandpreviewKeyto be saved with the project record.
Sources: server/routers/projects.ts:140-158
Frontend Integration
The Estimator.tsx component manages the user interface for triggering and displaying these previews.
Step 4: Preview Visualization
The estimator workflow includes a dedicated step for viewing the generated output. The UI utilizes a "Material Preview" card that displays the AI-rendered image in a 16:9 aspect ratio container.
Technical Requirements for Previews
- Loading States: The UI displays a "Generating Preview..." state while the backend processes the request.
- Error Handling: Toasts are used to notify users if the preview generation fails.
- Persistence: Once a preview is generated, its URL is included in the project creation payload to ensure it is available in the
ProjectDetailandSharedProjectviews.
Sources: client/src/pages/Estimator.tsx:182-187, client/src/pages/Estimator.tsx:223-224
Project Summary and Export
Generated previews are integrated into the final project documentation and sharing features.
PDF Integration
When a user downloads a project PDF, the system summarizes the project details. While the text-based PDF generation in server/services/pdfExport.ts currently focuses on project metadata (measurements, material types, and pricing), the database schema ensures that the previewImageUrl is associated with the project for future visual reporting needs.
| Data Field | Description | Source |
|---|---|---|
previewImageUrl | Public URL of the AI-generated material preview | projects table |
previewImageKey | Storage key for the preview image in S3 | projects table |
Sources: server/services/pdfExport.ts:60-75, server/routers/projects.ts:210-211
Shared Projects
Contractors accessing a project via a share token can view the material preview alongside the original photo. This ensures that the contractor understands the homeowner's visual expectations for the selected material.
Sources: client/src/pages/SharedProject.tsx:129-148
Summary
The Image Generation Integration is a sophisticated pipeline that transforms static photos into interactive sales and planning tools. By automating prompt engineering and managing image persistence through S3, the system provides users with immediate visual feedback on material choices while maintaining a permanent record of the visualization for homeowners and contractors alike.