Amplifier

The Problem

Design studios face two recurring pain points:

• Unorganized reference libraries — thousands of saved images with no consistent tagging, making them unsearchable when you actually need them
• Inefficient client onboarding — lengthy back-and-forth to understand brand vision, then manually curating mood boards from that disorganized library

The Solution

Amplifier is two connected systems:

1. AI Image Tagger — Upload reference images in bulk. Claude Sonnet analyzes each image and suggests tags across dynamic categories (industry, style, mood, color, etc.). The designer reviews, corrects, and saves. Over time, the AI learns from corrections — tracking frequently missed and over-suggested tags to improve future accuracy.
2. Visual Briefing Tool — Clients fill out a guided brand questionnaire. Claude Haiku extracts keywords from their responses. Those keywords automatically search the tagged reference library and surface relevant images. Clients favorite the ones that resonate. The complete brief — answers, keywords, selected references — is packaged into an HTML email and sent to the studio.

The tagger builds the library. The briefing tool makes it useful.

Key Features

AI-Powered Image Analysis

• Claude Sonnet Vision analyzes each image against a configurable vocabulary
• Prompt caching reduces API response time by ~60–70%
• Next-image prefetching — AI analyzes the next image while you tag the current one
• Correction learning — the system tracks where designers disagree with AI and adjusts future prompts

Smart Duplicate Detection

• Three-tier detection: SHA-256 hash (exact match), perceptual hash (visually similar), filename match
• Perceptual hashing uses 8x8 grayscale representation with Hamming distance at 90% threshold
• Catches duplicates before upload, saving storage and preventing confusion

Dynamic Vocabulary System

• Categories, tags, storage types, and search weights are all configurable via JSON — no schema changes needed
• Supports arrays, nested JSONB, and text fields
• Add new tag categories without touching code

Guided Briefing Workflow

• 9-step questionnaire covering brand strategy, personality, visual identity, audience, and vision
• Auto-saves progress to localStorage with resume prompt on return
• AI keyword extraction from free-form responses
• Weighted search across the reference library
• Favorite selection with visual gallery
• HTML email generation with full brief + curated images

Analytics Dashboard

• AI accuracy tracking per category
• Frequently missed tags (AI under-suggests)
• Frequently wrong tags (AI over-suggests)
• Per-image correction analysis
• Vocabulary usage statistics

Architecture

Client (React)
  ├── Briefing Flow (public)
  │     ├── Questionnaire → /api/extract-keywords (Claude Haiku)
  │     ├── Keywords → /api/search-references (weighted DB search)
  │     └── Submit → /api/send-briefing (HTML email)
  │
  └── Tagger System (auth-protected)
        ├── Upload → Duplicate Detection (SHA-256 + pHash)
        ├── Tag → /api/suggest-tags (Claude Sonnet Vision + prompt cache)
        ├── Save → Supabase (images + tags + corrections)
        └── Analytics → /api/retrain-prompt (correction analysis)

Supabase
  ├── PostgreSQL (reference_images, tag_vocabulary, tag_corrections)
  ├── Auth (email/password, RLS policies)
  └── Storage (originals + thumbnails)

Engineering Highlights

Prompt Caching Strategy

The vocabulary (which can be large) is placed in the system message with Anthropic's ephemeral cache. The first request in a session pays the full cost, but subsequent image analyses reuse the cached vocabulary — reducing latency by 60–70% and cutting token costs.

Correction-Based Learning

Every time a designer overrides the AI's suggestions, the delta is recorded. The analytics engine aggregates corrections to identify patterns — "you frequently miss the 'tech' tag" or "you over-suggest 'minimal' in 40% of images." These insights are injected into the system prompt for future requests, creating a feedback loop without fine-tuning.

72% Component Code Reduction

The original ImageTaggerClient was a 2,400-line monolith. It was decomposed into 9 custom hooks (useAISuggestions, useImageUpload, useDuplicateDetection, etc.) and focused UI components, reducing the main component to ~640 lines while improving testability and reuse.

Security Hardening

• Defense-in-depth: both middleware-level and per-route authentication using getUser() (server-verified, not just JWT)
• All API inputs validated with Zod
• HTML escaping on all email template interpolation points (XSS prevention)
• Prompt injection prevention by separating system instructions from user data
• Rate limiting on public endpoints
• Generic error responses (no internal details leaked)

Tech Stack

Results

• From unstructured to searchable — reference images tagged and discoverable by keyword in seconds
• Client onboarding time reduced — guided questionnaire replaces unstructured emails and calls
• AI accuracy improves over time — correction tracking creates a self-improving tagging system
• Zero manual mood board curation — briefing tool auto-surfaces relevant references from the library