Interactive visualization of image and text embeddings using CLIP and sentence-transformers, rendered as a topographical map and network graph.
Toggle between Image (IMG) and Text (TXT) modes to visualize different embedding types:
Image Mode: Visualizes image embeddings from CLIP model, showing semantic clusters of similar images with labeled categories like:
- FURNITURE / PRODUCT PHOTO
- SCREENSHOT / ILLUSTRATION
- UI DESIGN / POSTER
- PRODUCT PHOTO / TECHNOLOGY
- PRODUCT PHOTO / FASHION
- MILITARY / VEHICLE
- VEHICLE / CAR
Text Mode: Visualizes text embeddings from sentence-transformers, clustering related concepts such as:
- PHILOSOPHY
- CHORDS
- APPLE
- WALL
- WOOD
- SOIL
The main view renders embeddings as a topographic map with:
- Colored clusters: Semi-transparent nodes grouped by similarity
- Contour lines: Light blue elevation lines showing embedding density
- Cluster labels: White text labels identifying semantic categories
- Color coding: Different colors represent distinct clusters or categories
Clicking on clusters reveals detailed views:
Image Detail: Shows actual product images connected by curved lines, indicating similarity relationships. Features:
- Thumbnail grid of related images
- Connection lines showing proximity in embedding space
- Category focus (e.g., "PRODUCT PHOTO / FASHION")
Text Detail: Displays interconnected text nodes in a network graph:
- Rectangular nodes containing document titles and metadata
- Teal connection lines showing semantic relationships
- Creation/update timestamps
- Text previews and excerpts
- Pink-highlighted nodes indicating selected items
See embedding-viz/DECISIONS.md for technical details.
cd embedding-viz/frontend
npm install
npm run devVisit http://localhost:3000
cd embedding-viz/pipeline
uv run python main.py --input /path/to/images --mode image- Generate embeddings using the pipeline
- Place JSON output in
embedding-viz/frontend/public/data/ - Open the app in browser
- Toggle between IMG/TXT modes
- Click clusters to explore detailed views