AI Image Generator

Overview

The AI Image Generator is a sophisticated full-stack application that leverages the cutting edge of Google's Generative AI ecosystem. Designed as a production-ready alternative to common wrapper-style apps, it provides deep integration with Vertex AI for both reasoning and generation.

The project highlights the transition from a simple OpenAI-based project to a high-performance orchestration of the latest Google Gemini and Imagen models, using infrastructure-as-code and edge function scalability.

Features

Generative AI Capabilities

• Intelligent Prompting: Powered by Google Gemini, the platform recommends enhanced prompts based on user intent.
• Image Generation: Utilizes the latest Imagen models via Vertex AI for high-fidelity, photorealistic image creation.
• Model Selector: Granular control over specific model versions and provider settings.

Production Infrastructure

• Type-Safe API: Powered by tRPC, ensuring end-to-end type safety between the server and client.
• Scalable Hosting: Orchestrated via Vercel Edge Functions and Google Cloud for low-latency global delivery.
• Infrastructure as Code: Managed with Terraform, specifically utilizing Google App Hub for resource discovery and management.

Developer & User Experience

• Smart Metadata: Sophisticated image handling with sharp, preserving and displaying prompt metadata.
• Secure Authentication: Integrated with Next.js Auth for optional user accounts and favorite image tracking.
• Real-Time UI: Built with the latest Tailwind CSS, providing a theme-aware, high-performance interface.

Architecture & Tech Stack

The architecture is designed to maximize both performance and security, separating AI orchestration from user-facing logic.

• Frontend: Next.js 16 (App Router) with TypeScript, Tailwind CSS, and framer-motion for fluid animations.
• AI Orchestration: Deeply integrated with Vertex AI via the @google/genai SDK, utilizing Google Gemini and Imagen.
• DevOps: Terraform Scripts for App Hub enable repeatable and discoverable cloud deployments.
• Backend: Edge Functions provide ultra-fast response times for global users in the Singapore region.

Milestones & Impact

Documenting the evolution from a simple experiment to a scalable AI platform.

2026: Scale & Modernization

• SonarCloud SAST Hardening: Integrated static analysis to resolve technical debt and security vulnerabilities.
• Modern Performance Patterns: Transitioned to TypeScript 6.0, node: protocols, and immutable patterns.
• Next.js Type Safety: Fully adopted the latest Page and Layout property types.

2025: Tooling & AI Infrastructure

• Biome & Next.js 16 Migration (Oct 2025): Transitioned to Biome and Next.js 16 for improved performance.
• Migrated to ESLint flat config and upgraded Tailwind CSS to v4.0.
• Upgraded the project runtime engine to Node.js 22.
• Deprecated older AI models (PaLM 2) and introduced Imagen 4 models.
• Adopted BProgress for page load indication.
• Enabled Turbopack for faster local development and builds.
• Integrated Terraform scripts for App Hub for Infrastructure as Code (May 2025).

2024: AI Integrations & Feature Expansion

• Upgraded core AI models, including Gemini 1.0/1.5 Flash and Imagen 2.
• Migrated from OpenAI to Vertex AI (Gemini and Imagen) as the primary AI engine.
• Implemented key features such as a favorites section for images, an individual image page, and a model selector.
• Introduced optional login and server-side rendering for authentication using Next.js Auth.
• Enhanced image handling with sharp for processing and new prompt metadata.
• Improved developer experience by switching Next.js config to TypeScript and adopting clsx/tailwind-merge utilities.

2023: Foundation & Modernization

• Project initiated with Next.js 13, Tailwind CSS, and initial OpenAI integration (Mar 2023).
• Adopted Edge Functions for all APIs, enhancing performance and scalability.
• Implemented Firebase Functions V2 and moved all API logic to callable functions in the Singapore region.
• Introduced tRPC for type-safe API routes.
• Integrated Vertex AI and implemented a UI for selecting AI providers.
• Standardized code formatting with Prettier and enhanced linting with ESLint, including type import rules.
• Introduced a dark mode UI.