Text to Vector Visualization

A lightweight web application that converts text into vector representations and visualizes them in 2D space. Perfect for understanding semantic relationships between different texts through their vector embeddings.

Features

• Convert text to vectors using BERT embeddings (all-MiniLM-L6-v2 model)
• Visualize text relationships in 2D space using PCA
• Compare multiple texts simultaneously
• Interactive visualization with tooltips
• Clean, responsive UI

Quick Start

Prerequisites

• Python 3.7+
• Node.js 14+
• npm

Backend Setup

1. Create a Python virtual environment (recommended):

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Install Python dependencies:

pip install -r requirements.txt

Frontend Setup

1. Install Node.js dependencies:

npm install

Running the Application

1. Start both servers using the provided script:

chmod +x start.sh  # Make script executable (Unix/Mac only)
./start.sh

Or start them separately:

Backend:

cd backend
python -m uvicorn main:app --reload

Frontend:

npm start

2. Open http://localhost:3000 in your browser

How It Works

1. Text to Vector: Uses BERT (all-MiniLM-L6-v2) to convert text into high-dimensional vectors
2. Dimensionality Reduction: PCA reduces the vectors to 2D for visualization
3. Interactive Visualization: D3.js creates an interactive scatter plot showing relationships between texts

Technical Stack

• Frontend: React, TypeScript, D3.js, Tailwind CSS
• Backend: FastAPI, sentence-transformers, scikit-learn
• Vector Embedding: BERT (all-MiniLM-L6-v2)
• Dimensionality Reduction: PCA

Performance Considerations

• Uses PCA instead of t-SNE/UMAP for faster dimensionality reduction
• Lightweight backend with minimal dependencies
• Efficient frontend rendering with D3.js
• Responsive design for all screen sizes