⛩️
Describe a building, space, or structural vision — and watch AI render it into stunning architectural concept art.
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 🎨 Text-to-Image Generation Describe → AI renders it │
│ 🏛️ 6 Style Presets Brutalist, Japanese, Deco… │
│ 🖼️ Personal Gallery Auto-saved, session-based │
│ 🔄 Refine & Regenerate Tweak prompts seamlessly │
│ 🛡️ Dual AI Fallback Gemini → Pollinations.ai │
│ 🍪 Zero-Auth Sessions No signup, just create │
│ 🗑️ Gallery Management Delete concepts you don't │
│ need anymore │
│ │
└─────────────────────────────────────────────────────────────────┘
| Style Preset | Aesthetic |
|---|---|
| 🏗️ Brutalist | Raw concrete, monolithic forms, dramatic shadows |
| 🏯 Minimalist Japanese | Wabi-sabi, clean lines, zen spatial composition |
| 🔲 Bauhaus | Functional modernism, primary colors, flat roofs |
| 🚀 Futuristic | Parametric design, fluid curves, sci-fi aesthetic |
| ✨ Art Deco | Geometric patterns, gold accents, 1920s opulence |
| 🌿 Organic | Biomorphic forms, living walls, landscape blending |
The journey of a single prompt — from your mind to a rendered concept:
┌─────────────────────┐
│ 👤 User Types a │
│ Prompt + Styles │
└────────┬────────────┘
│
▼
┌─────────────────────┐
│ 🌐 POST Request │
│ /api/generate │
│ { prompt, styles } │
└────────┬────────────┘
│
▼
┌─────────────────────┐
│ 🔧 Server-Side │
│ Prompt Enrichment │
│ + Style Descriptors │
└────────┬────────────┘
│
┌────────┴────────────┐
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ 🤖 Gemini 2.0 │ │ 🎨 Pollinations │
│ Flash (Primary) │──▶│ .ai (Fallback) │
│ │ │ │
└────────┬─────────┘ └────────┬──────────┘
│ │
└──────────┬───────────┘
│
▼
┌─────────────────────┐
│ 💾 Vercel Blob │
│ CDN Storage │
│ {uuid}.png │
└────────┬────────────┘
│
▼
┌─────────────────────┐
│ 🗃️ Prisma ORM │
│ → PostgreSQL │
│ Record Created │
└────────┬────────────┘
│
▼
┌─────────────────────┐
│ ✅ Response Sent │
│ Image Rendered │
│ in the Browser │
└─────────────────────┘
🛡️ Key Design Decision: The browser never talks to AI APIs directly. All requests are proxied through secure Next.js API routes, keeping API keys hidden and preventing abuse.
archvision/
├── 📁 prisma/
│ └── schema.prisma # Generation model + PostgreSQL config
├── 📁 public/
│ └── 📁 generated/ # AI-generated images stored here
├── 📁 src/
│ ├── 📁 app/
│ │ ├── 📁 api/
│ │ │ ├── 📁 generate/ # POST — AI image generation endpoint
│ │ │ └── 📁 gallery/ # GET/DELETE — Gallery CRUD operations
│ │ ├── 📁 gallery/ # Gallery page (browse saved concepts)
│ │ ├── layout.tsx # Root layout with fonts + metadata
│ │ ├── page.tsx # Generator page (main interface)
│ │ └── globals.css # Global styles + design tokens
│ ├── 📁 components/
│ │ ├── Nav.tsx # Navigation bar (Generate / Gallery)
│ │ ├── StyleSelector.tsx # Style preset toggle buttons
│ │ ├── ImageResult.tsx # Generated image display + save
│ │ ├── GalleryGrid.tsx # Responsive grid of saved concepts
│ │ ├── GalleryModal.tsx # Full-screen image viewer + actions
│ │ ├── LoadingSkeleton.tsx # Shimmer loading animation
│ │ └── ErrorMessage.tsx # Error state display
│ ├── 📁 lib/
│ │ ├── imageApi.ts # AI providers + prompt construction
│ │ └── prisma.ts # Prisma client singleton
│ └── 📁 types/
│ └── index.ts # TypeScript interfaces
├── .env.example # Environment variable template
├── tailwind.config.ts # Tailwind + custom design tokens
├── package.json
└── tsconfig.json
Before you begin, make sure you have:
| Requirement | Version | Note |
|---|---|---|
| Node.js | 18+ |
Download |
| PostgreSQL | Any | Local install, Neon (free), or Supabase (free) |
| Git | Any | Download |
ステップ 1 — Clone the Repository
git clone https://github.com/ABHAY627/ArchVision_Technical_Assessment.git
cd ArchVision_Technical_Assessmentステップ 2 — Install Dependencies
npm installステップ 3 — Configure Environment Variables
cp .env.example .env.localNow open .env.local and fill in your values:
# ──────────────────────────────────────────────
# 🗄️ Database — Your PostgreSQL connection string
# ──────────────────────────────────────────────
# 💡 Get a free hosted DB from https://neon.tech or https://supabase.com
# Format: postgresql://USER:PASSWORD@HOST:PORT/DATABASE?sslmode=require
DATABASE_URL=postgresql://username:password@host:5432/archvision?sslmode=require
# ──────────────────────────────────────────────
# 🗂️ Vercel Blob — Persistent image storage
# ──────────────────────────────────────────────
# Get from: Vercel Dashboard → Storage → Blob → your store → .env.local tab
BLOB_READ_WRITE_TOKEN=vercel_blob_rw_...
# ──────────────────────────────────────────────
# 🤖 AI Provider — Choose your image generation engine
# ──────────────────────────────────────────────
# Options: "pollinations" (free, no key needed) or "gemini" (needs API key)
AI_PROVIDER=pollinations
# ──────────────────────────────────────────────
# 🔑 Gemini API Key — Only required if AI_PROVIDER=gemini
# ──────────────────────────────────────────────
# Get yours free at https://aistudio.google.com/apikey
GEMINI_API_KEY=ステップ 4 — Initialize the Database
npx prisma migrate dev --name initThis creates the
Generationtable in your PostgreSQL database and generates the Prisma client.
ステップ 5 — Start the Development Server
npm run devステップ 6 — Open and Create! 🎉
🌐 Open http://localhost:3000 in your browser
You're all set. Type a prompt, pick a style, and hit Generate Concept!
- Navigate to the Generate page (homepage)
- Describe your architectural vision in the text area
- Example:
"A modern glass skyscraper surrounded by zen gardens with flowing water"
- Example:
- Select style presets (optional) — click one or more style chips:
Brutalist·Minimalist Japanese·Bauhaus·Futuristic·Art Deco·Organic
- Click
Generate Conceptand wait 10–30 seconds - View your AI-rendered concept art!
- After generating an image, it's automatically saved to your gallery
- Navigate to the Gallery page via the top nav bar
- Click any image to open the full-screen modal view, where you can:
- 📋 View the original prompt and style tags used
- 🔄 Refine & Regenerate — sends the prompt back to the generator for tweaking
- 🗑️ Delete — permanently removes the concept from your gallery
ArchVision supports two AI providers that you can switch between:
| Provider | API Key? | Speed | Quality |
|---|---|---|---|
| Pollinations.ai (default) | ❌ Not needed | 10–30s | High quality, free public API |
| Gemini 2.0 Flash | ✅ Required | 5–15s | Excellent quality, Google AI |
To switch providers, update .env.local:
AI_PROVIDER=gemini
GEMINI_API_KEY=your_api_key_hereThen restart the dev server (Ctrl+C → npm run dev).
💡 Pro Tip: ArchVision has a built-in fallback mechanism. If your primary provider (Gemini) fails due to rate limits, it automatically falls back to Pollinations.ai — ensuring your generation always succeeds.
model Generation {
id String @id @default(cuid()) // Unique ID (collision-safe)
sessionId String // Anonymous user session
prompt String // Original user prompt
styles String[] // Selected style presets
imagePath String // Path to saved image
createdAt DateTime @default(now()) // Timestamp
@@index([sessionId]) // Fast session-scoped queries
}Session Model:
- On first visit, a UUID is generated and stored as an HTTP-only cookie (
archvision_session) - All database queries are scoped to this session ID — your gallery is private to your browser
- No login required — zero-friction anonymous sessions with a 1-year cookie TTL
1. Push your code to GitHub
2. Import the project on Vercel (vercel.com/import)
3. Create a Vercel Blob store (Storage → Blob) and connect it to your project
4. Add environment variables in the Vercel dashboard:
→ DATABASE_URL
→ BLOB_READ_WRITE_TOKEN (auto-added when Blob store is connected)
→ AI_PROVIDER
→ GEMINI_API_KEY (if using Gemini)
5. Deploy 🚀
| Layer | Technology | Why? |
|---|---|---|
| Framework | Next.js 14 (App Router) | Full-stack React — frontend + API routes in one repo |
| Language | TypeScript | Strict type safety across frontend/backend contract |
| Styling | Tailwind CSS | Rapid iteration with a curated, warm design system |
| Database | PostgreSQL (Neon) | Reliable, scalable, free hosted options available |
| ORM | Prisma | Type-safe queries, auto-generated client, migrations |
| Image Storage | Vercel Blob | Persistent CDN-backed storage — survives every redeploy |
| AI (Primary) | Gemini 2.0 Flash | Google's fast image generation with high fidelity |
| AI (Fallback) | Pollinations.ai | Free, no-key-needed public API for resilience |
| Session | HTTP-only Cookie | Secure, anonymous session management (no auth needed) |
| Limitation | Details | Production Fix |
|---|---|---|
| 🔒 No Authentication | Gallery is cookie-scoped — clearing cookies loses gallery | Add OAuth / NextAuth.js |
| 🚦 No Rate Limiting | /api/generate is unprotected |
Add middleware (e.g., next-rate-limit) |
| ⏱️ Pollinations SLA | Free public API — generation time varies (10–30s) | Use Gemini as primary provider |
⛩️
/ \
/ \
/ 🌸 \
/─────────\
Made with ❤️ by Abhay Gautam
🏯 「建築のビジョン」 — Where imagination meets architecture