Skip to main content
VisionaryAI’s backend infrastructure is built entirely on Microsoft Azure, leveraging serverless functions for compute and blob storage for persistent image storage. This architecture provides scalability, reliability, and cost-efficiency.

Architecture overview

The application uses a serverless architecture with clear separation of concerns:
1

Next.js frontend

User-facing web application built with Next.js 13, hosted separately from backend services.
2

Azure Functions

Four serverless functions handle all backend operations: image generation, suggestion generation, image retrieval, and SAS token generation.
3

OpenAI API

Azure Functions communicate directly with OpenAI’s API for DALL-E 3 and GPT-3.5 Turbo.
4

Azure Blob Storage

Generated images are stored persistently in a blob container named “images”.
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
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.
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
The high temperature (0.9) ensures varied, creative suggestions rather than repetitive responses.

Generate SAS token function

Creates time-limited access tokens for secure image retrieval:
azure/lib/generateSASToken.js
SAS tokens provide read-only access and expire after 24 hours, ensuring secure but convenient image access.

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:
Example:
  • 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:
Never commit .env files or hardcode credentials in source code. Always use environment variables for production deployments.

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
For production applications with consistent traffic, consider using Azure Functions Premium Plan to eliminate cold starts.

Rate limiting

OpenAI API rate limits apply:
  • DALL-E 3: Varies by account tier
  • GPT-3.5 Turbo: Typically 3,500 requests/minute
Implement client-side rate limiting or request queuing to prevent exceeding OpenAI’s rate limits during high traffic.

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:
1

Install Azure Functions Core Tools

2

Navigate to Azure directory

3

Install dependencies

4

Configure environment

Create a local.settings.json file:
5

Start function host

Functions available at http://localhost:7071/api/
The local.settings.json file should be in .gitignore to prevent committing credentials.

Monitoring and debugging

Azure provides built-in monitoring capabilities:

Application Insights

  • Automatic telemetry collection
  • Request/response logging
  • Performance metrics
  • Error tracking

Console logging

Logs appear in:
  • Azure Portal (Function Monitor)
  • Application Insights (Logs)
  • Local terminal (during development)
Use structured logging with consistent prefixes (like PROMPT=>) to make logs easier to search and filter in Application Insights.

Next steps

Image generation

Learn how the generation process uses Azure Functions

Image gallery

Understand how images are retrieved from Blob Storage