Architecture overview
The application uses a serverless architecture with clear separation of concerns:Next.js frontend
User-facing web application built with Next.js 13, hosted separately from backend services.
Azure Functions
Four serverless functions handle all backend operations: image generation, suggestion generation, image retrieval, and SAS token generation.
This architecture ensures that expensive compute operations (AI generation) scale automatically based on demand without maintaining dedicated servers.
Azure Functions
VisionaryAI uses four Azure Functions, each handling a specific responsibility:Generate image function
Handles the complete image generation workflow:azure/src/functions/generateImage.js
Why download and re-upload?
Why download and re-upload?
DALL-E 3 provides temporary URLs that expire after a short time. Downloading and uploading to Azure Blob Storage ensures permanent access to generated images.
ArrayBuffer usage
ArrayBuffer usage
The image is downloaded as an
arraybuffer (binary data) to preserve image quality during the transfer to Azure Blob Storage.Get images function
Retrieves all stored images with secure access tokens:azure/src/functions/getImages.js
This function lists all blobs in the container, appends SAS tokens for secure access, and sorts by timestamp for chronological display.
Get ChatGPT suggestion function
Generates creative prompt suggestions using GPT-3.5:azure/src/functions/getChatGPTSuggestion.js
Generate SAS token function
Creates time-limited access tokens for secure image retrieval:azure/lib/generateSASToken.js
Azure Blob Storage
Images are stored in Azure Blob Storage for reliable, scalable persistence:Storage container
- Container name:
images - Access level: Private (requires SAS token)
- Storage tier: Hot (optimized for frequent access)
Blob naming convention
All images follow a consistent naming pattern:Benefits of this format
Benefits of this format
- Searchable: Prompts are visible in filenames
- Sortable: Unix timestamps enable chronological ordering
- Unique: Timestamp ensures no filename collisions
- Parseable: Easy to extract prompt and creation time
Storage operations
Upload operation
- Uses block blob type (optimized for large files)
- Direct upload from memory (arraybuffer)
- Automatic content type detection
List operation
- Lists all blobs in flat structure (no virtual folders)
- Async iteration for memory efficiency
- Returns metadata including name and properties
The
listBlobsFlat() method is efficient even with thousands of images, as it uses pagination internally.Security model
VisionaryAI implements multiple security layers:Environment variables
Sensitive credentials are stored as environment variables:SAS tokens
Shared Access Signatures provide:- Time-limited access: 24-hour expiration
- Permission scoping: Read-only access
- No credential exposure: Account keys stay on server
Authentication levels
All Azure Functions use:While functions are anonymous (no auth header required), they should be behind a Next.js API layer in production to implement rate limiting and access control.
Deployment configuration
Azure Functions require specific configuration files:host.json
Defines global function app settings:package.json
Specifies Azure Functions dependencies:Scaling and performance
Azure’s serverless platform provides automatic scaling:Cold starts
- First request: 2-5 seconds for function initialization
- Subsequent requests: Less than 100ms response time
- Keep-warm strategies: Use monitoring to ping functions
Concurrent executions
- Azure automatically scales function instances based on load
- Each instance can handle multiple requests
- No configuration needed for basic scaling
Rate limiting
OpenAI API rate limits apply:- DALL-E 3: Varies by account tier
- GPT-3.5 Turbo: Typically 3,500 requests/minute
Cost optimization
VisionaryAI’s Azure architecture is designed for cost efficiency:Consumption plan pricing
- Execution time: Charged per million executions
- Compute time: Charged per GB-second
- Free tier: 1 million executions + 400,000 GB-seconds/month
Blob storage costs
- Storage: ~$0.018/GB/month (hot tier)
- Operations: Minimal cost for writes and reads
- Bandwidth: Free egress to Azure Functions
OpenAI API costs
- DALL-E 3: $0.040 per image (standard quality, 1024x1024)
- GPT-3.5 Turbo: ~$0.0015 per suggestion
For a typical user generating 10 images and 20 suggestions per day, monthly costs would be approximately:
- OpenAI: $12.90 (300 images + 600 suggestions)
- Azure Functions: Less than $1 (within free tier)
- Blob Storage: Less than $1 (assuming ~50GB)
Local development
To run Azure Functions locally:Monitoring and debugging
Azure provides built-in monitoring capabilities:Application Insights
- Automatic telemetry collection
- Request/response logging
- Performance metrics
- Error tracking
Console logging
- Azure Portal (Function Monitor)
- Application Insights (Logs)
- Local terminal (during development)
Next steps
Image generation
Learn how the generation process uses Azure Functions
Image gallery
Understand how images are retrieved from Blob Storage