AI Image Generator (Next.js + Azure Functions)

An AI-powered image generator that lets users create artwork from text prompts and browse a gallery of generated images.

• Frontend: Next.js App Router (TypeScript), Tailwind CSS, SWR, next/image
• AI: OpenAI (DALL·E for images, GPT for prompt suggestions)
• Backend: Azure Functions (Node.js)
• Storage: Azure Blob Storage with SAS tokens

This project is portfolio-ready: it demonstrates full‑stack integration with AI services, cloud functions, secure media storage, and modern React patterns.

Key Features

• Text-to-image generation via OpenAI DALL·E
• Smart prompt suggestions via GPT (server-side)
• Image gallery with on-demand revalidation (SWR)
• Optimized delivery using next/image and domain allowlisting
• Secure uploads to Azure Blob Storage via SAS tokens

How It Works

1. User enters a prompt (or fetches a suggestion).
2. The Next.js API forwards the request to Azure Functions.
3. Azure Function calls OpenAI to generate the image, downloads the result, and uploads it to Azure Blob Storage using a short‑lived SAS token.
4. The gallery fetches signed URLs from Azure Functions and renders images using next/image.

High-Level Architecture

• Frontend routes and UI in app/ and components/
• API proxy endpoints in app/api/*/route.ts
• Azure Functions in azure/src/functions/
• Azure helpers in azure/lib/

Project Structure

app/
  api/
    generateImage/route.ts      # Forwards image generation requests to Azure Function
    getImages/route.ts          # Fetches gallery entries from Azure Function
    suggestion/route.ts         # Fetches GPT-generated prompt suggestion
  layout.tsx, page.tsx          # App Router layout and page
components/                     # UI components (Header, Images, PromptInput)
lib/                            # Client-side fetch helpers
azure/
  src/functions/                # Azure Functions: generateImage, getImages, getChatGPTSuggestion, generateSASToken
  lib/                          # Azure helpers: OpenAI client and SAS token generator
  local.settings.example.json   # Example Azure Functions local settings

Prerequisites

• Node.js 16+ (recommended 18)
• Azure account with a Storage Account and a Blob container named images
• OpenAI account and API key
• Azure Functions Core Tools for local development (func)

Setup

1) Install dependencies

npm i
cd ./azure && npm i

2) Configure environment variables

• Frontend (.env.local at project root):

# Azure Functions base URL (local or deployed)
AZURE_FUNCTIONS_ENDPOINT_URL=http://localhost:7071

• Azure Functions (azure/local.settings.json): copy from the example and fill values.

cd ./azure && copy local.settings.example.json local.settings.json
# then edit local.settings.json and set:
# - AZURE_STORAGE_ACCOUNT_NAME
# - AZURE_STORAGE_ACCOUNT_KEY
# - OPENAI_ORGANIZATION_ID
# - OPENAI_API_KEY

Important: Never commit real secrets. Use the example files and environment‑specific overrides.

3) Run locally

In two terminals:

# Terminal A (frontend)
npm run dev

# Terminal B (azure functions)
cd ./azure && npm run start

Open http://localhost:3000.

API Endpoints (Next.js)

• POST /api/generateImage

  • Body: { "prompt": string }
  • Forwards to Azure Function generateImage and returns a status message.

• GET /api/getImages

  • Returns { imageUrls: { name: string; url: string }[] } from Azure Function getImages.

• GET /api/suggestion

  • Returns a GPT‑generated prompt suggestion (string).

Azure Functions

• generateImage (POST): Creates image via OpenAI, uploads to Blob Storage.
• getImages (GET): Lists blobs, returns signed URLs and names (sorted by timestamp).
• getChatGPTSuggestion (GET): Returns a creative prompt suggestion.
• generateSASToken (GET): Issues short‑lived SAS tokens (internal helper).

Configuration Notes

• next.config.js whitelists image domains. Update images.domains if your storage account name differs.
• Gallery container name is images. Ensure this container exists in your Storage Account.
• Frontend uses SWR with cache: 'no-store' for fresh data.

Best Practices Implemented

• Secrets management: Use .env.local (frontend) and local.settings.json (functions). Do not commit secrets.
• Edge‑safe API proxying: Frontend never exposes OpenAI keys; all AI calls run server‑side in Azure Functions.
• Short‑lived access: Blob access secured via SAS tokens with minimal permissions and limited expiry.
• Optimized media: next/image for responsive, optimized delivery; domain allowlisting in next.config.js.
• Type safety & linting: TypeScript, ESLint, and conventional React patterns.
• Clear separation of concerns: UI in Next.js, AI + storage in Azure Functions.

Deploy

• Frontend: Deploy to Vercel or Azure Static Web Apps. Set AZURE_FUNCTIONS_ENDPOINT_URL to your deployed functions base URL.
• Azure Functions: Deploy via Azure Functions Core Tools or Azure Portal. Configure app settings to match local.settings.json keys.

Attribution

Built with Next.js, OpenAI, and Microsoft Azure. Inspired by modern AI tooling demos and adapted for production‑ready patterns.