AI Lab: Semantic Embedding Visualizer

Understanding how AI "sees" text and makes connections is abstract and difficult to grasp. Questions like:

• How does AI understand the similarity between "Product Manager" and "Product Owner"?
• Why does semantic search retrieve certain experiences over others?
• How do embeddings capture meaning in high-dimensional space?
• What patterns emerge when visualizing career experiences semantically?

The Challenge: Make the invisible visible - show how AI embeddings work through interactive visualization.

Built an interactive visualization tool that makes semantic embeddings tangible:

Embedding Generation:

• Converts 72 knowledge base entries into 1536-dimensional vectors using OpenAI text-embedding-3-small
• Each dimension captures different semantic features (skills, domain, impact, etc.)
• Similar experiences cluster together in vector space

Dimensionality Reduction:

• PCA (Principal Component Analysis): Linear reduction preserving maximum variance
• UMAP: Non-linear reduction preserving local structure and global patterns
• Reduces 1536 dimensions → 2D/3D for human visualization
• Shows variance explained (e.g., "First 2 components explain 45.2% of total variance")

Interactive Visualization:

• Recharts scatter plots for 2D/3D exploration
• Hover previews (200 chars) for quick context
• Click-to-expand modals with full content and markdown rendering
• Responsive design for mobile and desktop
• ESC key support and multiple interaction patterns

Technical Stack:

• Next.js 14 API routes with server-side caching
• ml-pca library for PCA implementation
• umap-js for UMAP dimensionality reduction
• ReactMarkdown for rich content rendering

Solo Learning Project:

• Self-directed exploration to understand embeddings deeply
• Built to visualize the knowledge base powering portfolio AI assistant
• Demonstrates ability to make complex AI concepts accessible through UX

Key Technical Decisions:

PCA vs UMAP:

• Implemented both to show different perspectives
• PCA: Faster, preserves global variance, linear
• UMAP: Slower, preserves local structure, non-linear
• Users can toggle between methods to explore patterns

2D vs 3D:

• Started with 2D (simpler, more accessible)
• Added 3D for exploring more variance
• Trade-off: 3D harder to interact with but shows more information

Hover vs Click:

• Hover: Quick 200-char previews
• Click: Full modal with markdown
• Trade-off: Two interaction patterns to learn, but better UX

Technical Constraints:

• OpenAI API costs for embedding generation (cached to reduce)
• Browser performance for rendering 72+ data points
• React re-renders for expensive visualizations (solved with React.memo)
• Markdown rendering performance in modals

vs Static Embedding Tutorials:

• Interactive exploration vs static diagrams
• Real professional data vs toy examples
• Working implementation vs conceptual explanation

Educational Value:

• Demonstrates embeddings through hands-on visualization
• Shows real-world application (portfolio knowledge base)
• Proves technical fluency with ML concepts

Key Learnings:

Embeddings Are Powerful: Building this tool deepened my understanding of how RAG systems work. Seeing semantic clustering makes it clear why vector search outperforms keyword search.

What Worked Well:

• React.memo() prevented expensive chart re-renders
• Server-side caching avoided regenerating embeddings
• Click-to-expand pattern balanced quick preview vs deep exploration

What I'd Do Differently:

• Add search/filter functionality (find specific entries by keyword)
• Implement color coding by category (experience, project, skill)
• Add cluster labels showing what each group represents
• Export visualization as image for sharing