Image Generation

The Image Generation demo application allows users to create unique visuals from textual descriptions using various AI models. It provides a simple interface to input prompts, select models, and view generated images.

Features

Explore the capabilities of the AI-powered image generation tool:

Setup

To implement image generation in your application, you'll need to configure the necessary backend services.

You'll also need API keys for your preferred AI models. Follow the detailed setup instructions in the provider documentation linked below.

AI models

The Image Generation app leverages the AI SDK to support various models capable of creating images from text. Configure the providers for the models you wish to use:

For detailed implementation guidance, refer to the AI SDK documentation covering the generateImage function and supported providers.

Data persistence

Details about image generation requests and the resulting images are stored to maintain user history.

Database

Learn more about database services in TurboStarter AI.

Data is organized within a dedicated PostgreSQL schema named image:

• generations: captures detailed information about each generation request, including the prompt, selected model, aspectRatio, requested image count, userId, and precise timestamps.
• images: stores complete metadata for each generated image, linked to its parent generation record via generationId and maintaining the url reference to the stored image file.

Storage

Learn more about cloud storage services in TurboStarter AI.

The generated image files are securely stored in cloud storage (S3-compatible). Each image's location is tracked via the url field in the images table for reliable retrieval.

Structure

The Image Generation feature is architected across the monorepo for optimal code organization and reusability.

Core

The @turbostarter/ai package (packages/ai) contains the essential logic under modules/image:

• Comprehensive types, validation schemas (for prompts, aspect ratios, etc.), and constants
• Core API logic for processing image generation requests and interfacing with AI models
• Database operations for recording generation details and image metadata
• Utilities for uploading generated images to cloud storage

API

The packages/api package defines the backend API endpoints using Hono:

• src/modules/ai/image/image.router.ts: implements Hono RPC routes for image generation, handles input validation, applies necessary middleware (authentication, credit management), and invokes the core logic from @turbostarter/ai.

Web

The Next.js application (apps/web) delivers an intuitive user interface:

• src/app/[locale]/(apps)/image/**: contains the Next.js App Router pages and layouts for the image generation experience
• src/components/image/**: houses reusable React components tailored to the image generation UI (prompt input, model selector, image gallery, etc.)

Mobile

The Expo/React Native application (apps/mobile) provides a native mobile experience:

• src/app/image/**: defines the screens for the mobile image generation interface
• src/components/image/**: contains React Native components optimized for mobile interaction
• API integration: utilizes the same Hono RPC client (packages/api) as the web app for consistent backend communication

This architecture ensures perfect consistency across platforms while enabling tailored UI implementations optimized for each environment.