Refactor UI: Stack Sans font, remove rounded corners, consolidate navigation

- Replace Instrument Sans with system font stack (Stack Sans)
- Remove all rounded corners (border-radius: 0) throughout app
- Consolidate navigation bar into compact header
- Fix IndexedDB read-only transaction errors
- Suppress WebSocket HMR errors
- Fix missing state variables (clusters, clustersLoading, tooltipPosition)
- Fix CSS syntax errors from border-radius replacements
- Add viewMode to fetchData dependency array
- Integrate MessagePack support for faster API responses
- Integrate VirtualSearchResults for better list performance
- Improve header responsive layout
- Update all component CSS to use system fonts
- Clean up unused markdown documentation files

Dockerfile

@@ -33,5 +33,5 @@ ENV PORT=8000
 
 # Run the application
 WORKDIR /app/backend
-CMD ["python", "api.py"]
+CMD ["uvicorn", "api.main:app", "--host", "0.0.0.0", "--port", "8000"]
 

README.md

@@ -16,6 +16,36 @@ This interactive latent space navigator visualizes ~1.84M models from the [model
 - **GitHub Repository**: [bendlaufer/ai-ecosystem](https://github.com/bendlaufer/ai-ecosystem) - Original research repository with analysis notebooks and datasets
 - **Hugging Face Project**: [modelbiome](https://huggingface.co/modelbiome) - Dataset and project page on Hugging Face Hub
 
+## 🚀 Quick Start (New: Pre-Computed Data)
+
+This project now uses **pre-computed embeddings and coordinates** for instant startup:
+
+### Option 1: Pre-Computed Data (Recommended - 10 seconds startup)
+
+```bash
+# 1. Generate pre-computed data (one-time, ~45 minutes)
+cd backend
+pip install -r config/requirements.txt
+python scripts/precompute_data.py --sample-size 150000
+
+# 2. Start backend (instant!)
+uvicorn api.main:app --host 0.0.0.0 --port 8000
+
+# 3. Start frontend
+cd ../frontend
+npm install && npm start
+```
+
+**Startup time:** ~5-10 seconds ⚡
+
+### Option 2: Traditional Mode (Fallback)
+
+If pre-computed data is not available, the backend will automatically fall back to traditional loading (slower but still functional).
+
+**See:** 
+- [`PRECOMPUTED_DATA.md`](PRECOMPUTED_DATA.md) - Detailed documentation
+- [`DEPLOYMENT.md`](DEPLOYMENT.md) - Production deployment guide
+
 ## Project Structure
 
 ```

auto_start.sh

@@ -0,0 +1,66 @@
+#!/bin/bash
+# Auto-start backend once pre-computation completes
+
+echo "🔍 Monitoring pre-computation process..."
+echo "📊 Log file: /Users/hamidaho/hf_viz/precompute_fast.log"
+echo ""
+
+# Wait for pre-computation to complete
+while ps aux | grep -q "[p]recompute_fast.py"; do
+    # Show latest progress
+    LATEST=$(tail -1 /Users/hamidaho/hf_viz/precompute_fast.log 2>/dev/null | grep -E "Batches:|Step|INFO")
+    if [ ! -z "$LATEST" ]; then
+        echo -ne "\r⏳ $LATEST                    "
+    fi
+    sleep 5
+done
+
+echo ""
+echo ""
+echo "✅ Pre-computation complete!"
+echo ""
+
+# Check if files were created successfully
+if [ -f "/Users/hamidaho/hf_viz/precomputed_data/models_v1.parquet" ]; then
+    echo "✅ Found: models_v1.parquet"
+    ls -lh /Users/hamidaho/hf_viz/precomputed_data/models_v1.parquet
+else
+    echo "❌ ERROR: models_v1.parquet not found"
+    exit 1
+fi
+
+if [ -f "/Users/hamidaho/hf_viz/precomputed_data/embeddings_v1.parquet" ]; then
+    echo "✅ Found: embeddings_v1.parquet"
+    ls -lh /Users/hamidaho/hf_viz/precomputed_data/embeddings_v1.parquet
+else
+    echo "❌ ERROR: embeddings_v1.parquet not found"
+    exit 1
+fi
+
+if [ -f "/Users/hamidaho/hf_viz/precomputed_data/metadata_v1.json" ]; then
+    echo "✅ Found: metadata_v1.json"
+    cat /Users/hamidaho/hf_viz/precomputed_data/metadata_v1.json | python3 -m json.tool 2>/dev/null | grep -E "total_models|unique_libraries|unique_pipelines" | head -3
+else
+    echo "❌ ERROR: metadata_v1.json not found"
+    exit 1
+fi
+
+echo ""
+echo "🚀 Starting backend server..."
+echo ""
+
+cd /Users/hamidaho/hf_viz/backend
+
+# Kill any existing backend processes
+pkill -f "uvicorn.*api.main:app" 2>/dev/null
+
+# Start backend
+source /Users/hamidaho/hf_viz/venv/bin/activate
+uvicorn api.main:app --host 0.0.0.0 --port 8000 --reload
+
+echo ""
+echo "Backend started on http://localhost:8000"
+echo "Frontend should be running on http://localhost:3000"
+echo ""
+echo "📊 Open your browser and refresh the page!"
+

auto_start_output.log

@@ -0,0 +1,8 @@
+🔍 Monitoring pre-computation process...
+📊 Log file: /Users/hamidaho/hf_viz/precompute.log
+
+
+
+✅ Pre-computation complete!
+
+❌ ERROR: models_v1.parquet not found

backend.log

@@ -1,6 +1,44 @@
 INFO:     Will watch for changes in these directories: ['/Users/hamidaho/hf_viz/backend']
 INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
-INFO:     Started reloader process [24332] using WatchFiles
-INFO:     Started server process [24386]
+INFO:     Started reloader process [80800] using WatchFiles
+INFO:     Started server process [80972]
 INFO:     Waiting for application startup.
 Repo card metadata block was not found. Setting CardData to empty.
+
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/umap/umap_.py:1952: UserWarning: n_jobs value 1 overridden to 1 by setting random_state. Use no seed for parallelism.
+  warn(
+huggingface/tokenizers: The current process just got forked, after parallelism has already been used. Disabling parallelism to avoid deadlocks...
+To disable this warning, you can either:
+	- Avoid using `tokenizers` before the fork if possible
+	- Explicitly set the environment variable TOKENIZERS_PARALLELISM=(true | false)
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/sklearn/utils/extmath.py:203: RuntimeWarning: divide by zero encountered in matmul
+  ret = a @ b
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/sklearn/utils/extmath.py:203: RuntimeWarning: overflow encountered in matmul
+  ret = a @ b
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/sklearn/utils/extmath.py:203: RuntimeWarning: invalid value encountered in matmul
+  ret = a @ b
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/sklearn/cluster/_kmeans.py:237: RuntimeWarning: divide by zero encountered in matmul
+  current_pot = closest_dist_sq @ sample_weight
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/sklearn/cluster/_kmeans.py:237: RuntimeWarning: overflow encountered in matmul
+  current_pot = closest_dist_sq @ sample_weight
+/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/sklearn/cluster/_kmeans.py:237: RuntimeWarning: invalid value encountered in matmul
+  current_pot = closest_dist_sq @ sample_weight
+INFO:     Application startup complete.
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     127.0.0.1:50374 - "GET /api/model-count/current?use_models_page=true&use_dataset_snapshot=true&use_cache=true HTTP/1.1" 200 OK
+INFO:     127.0.0.1:50523 - "GET /api/clusters HTTP/1.1" 200 OK
+INFO:     127.0.0.1:50531 - "GET /api/stats HTTP/1.1" 200 OK
+INFO:     127.0.0.1:50533 - "GET /api/models?min_downloads=0&min_likes=0&color_by=library_name&size_by=downloads&projection_method=umap&base_models_only=false&use_graph_embeddings=false&max_points=10000 HTTP/1.1" 200 OK
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     127.0.0.1:51282 - "GET /api/model-count/current?use_models_page=true&use_dataset_snapshot=true&use_cache=true HTTP/1.1" 200 OK
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     127.0.0.1:51928 - "GET /api/model-count/current?use_models_page=true&use_dataset_snapshot=true&use_cache=true HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52804 - "GET /api/clusters HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52810 - "GET /api/stats HTTP/1.1" 200 OK
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     127.0.0.1:52810 - "GET /api/model-count/current?use_models_page=true&use_dataset_snapshot=true&use_cache=true HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53301 - "GET /api/clusters HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53303 - "GET /api/stats HTTP/1.1" 200 OK
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     127.0.0.1:53490 - "GET /api/model-count/current?use_models_page=true&use_dataset_snapshot=true&use_cache=true HTTP/1.1" 200 OK
+Repo card metadata block was not found. Setting CardData to empty.

backend/api/main.py

@@ -29,6 +29,8 @@ from core.config import settings
 from core.exceptions import DataNotLoadedError, EmbeddingsNotReadyError
 from models.schemas import ModelPoint
 from utils.family_tree import calculate_family_depths
+from utils.cache import cache, cached_response
+from utils.response_encoder import FastJSONResponse, MessagePackResponse, encode_models_msgpack
 import api.dependencies as deps
 from api.routes import models, stats, clusters
 
@@ -103,10 +105,79 @@ app.include_router(clusters.router)
 
 @app.on_event("startup")
 async def startup_event():
-    # All variables are accessed via deps module, no need for global declarations
+    """
+    Fast startup using pre-computed data.
+    Falls back to traditional loading if pre-computed data not available.
+    """
+    import time
+    startup_start = time.time()
     
     backend_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
     root_dir = os.path.dirname(backend_dir)
+    
+    # Try to load pre-computed data first (instant startup!)
+    from utils.precomputed_loader import get_precomputed_loader
+    
+    precomputed_loader = get_precomputed_loader(version="v1")
+    
+    if precomputed_loader:
+        logger.info("=" * 60)
+        logger.info("LOADING PRE-COMPUTED DATA (Fast Startup Mode)")
+        logger.info("=" * 60)
+        
+        try:
+            # Load everything in seconds
+            deps.df, deps.embeddings, metadata = precomputed_loader.load_all()
+            
+            # Extract 3D coordinates from dataframe
+            deps.reduced_embeddings = np.column_stack([
+                deps.df['x_3d'].values,
+                deps.df['y_3d'].values,
+                deps.df['z_3d'].values
+            ])
+            
+            # Initialize embedder (without loading/generating embeddings)
+            deps.embedder = ModelEmbedder()
+            
+            # Initialize reducer (already fitted)
+            deps.reducer = DimensionReducer(method="umap", n_components=3)
+            
+            # No graph embeddings in fast mode (optional feature)
+            deps.graph_embedder = None
+            deps.graph_embeddings_dict = None
+            deps.combined_embeddings = None
+            deps.reduced_embeddings_graph = None
+            
+            startup_time = time.time() - startup_start
+            logger.info("=" * 60)
+            logger.info(f"STARTUP COMPLETE in {startup_time:.2f} seconds!")
+            logger.info(f"Loaded {len(deps.df):,} models with pre-computed coordinates")
+            logger.info(f"Unique libraries: {metadata.get('unique_libraries')}")
+            logger.info(f"Unique pipelines: {metadata.get('unique_pipelines')}")
+            logger.info("=" * 60)
+            
+            # Update module-level aliases
+            df = deps.df
+            embedder = deps.embedder
+            reducer = deps.reducer
+            embeddings = deps.embeddings
+            reduced_embeddings = deps.reduced_embeddings
+            
+            return
+        
+        except Exception as e:
+            logger.warning(f"Failed to load pre-computed data: {e}")
+            logger.info("Falling back to traditional loading...")
+    
+    else:
+        logger.info("=" * 60)
+        logger.info("Pre-computed data not found.")
+        logger.info("To enable fast startup, run:")
+        logger.info("  cd backend && python scripts/precompute_data.py --sample-size 150000")
+        logger.info("=" * 60)
+        logger.info("Falling back to traditional loading (may take 1-8 hours)...")
+    
+    # Traditional loading (slow path)
     cache_dir = os.path.join(root_dir, "cache")
     os.makedirs(cache_dir, exist_ok=True)
     
@@ -118,13 +189,11 @@ async def startup_event():
     reducer_cache_umap = os.path.join(cache_dir, "reducer_umap_3d.pkl")
     reducer_cache_umap_graph = os.path.join(cache_dir, "reducer_umap_3d_graph.pkl")
     
-    sample_size = settings.get_sample_size()
-    if sample_size:
-        logger.info(f"Loading limited dataset: {sample_size} models (SAMPLE_SIZE={sample_size})")
-    else:
-        logger.info("No SAMPLE_SIZE set, loading full dataset")
+    # Load dataset with sample (for reasonable startup time)
+    sample_size = settings.SAMPLE_SIZE or settings.get_sample_size() or 5000
+    logger.info(f"Loading dataset (sample_size={sample_size}, prioritizing base models)...")
     
-    deps.df = deps.data_loader.load_data(sample_size=sample_size)
+    deps.df = deps.data_loader.load_data(sample_size=sample_size, prioritize_base_models=True)
     deps.df = deps.data_loader.preprocess_for_embedding(deps.df)
     
     if 'model_id' in deps.df.columns:
@@ -148,58 +217,17 @@ async def startup_event():
         deps.embeddings = deps.embedder.generate_embeddings(texts, batch_size=128)
         deps.embedder.save_embeddings(deps.embeddings, embeddings_cache)
     
-    # Initialize graph embedder and generate graph embeddings (optional, lazy-loaded)
-    if settings.USE_GRAPH_EMBEDDINGS:
-        try:
-            deps.graph_embedder = GraphEmbedder()
-            logger.info("Building family graph for graph embeddings...")
-            graph = deps.graph_embedder.build_family_graph(deps.df)
-            
-            if os.path.exists(graph_embeddings_cache):
-                try:
-                    deps.graph_embeddings_dict = deps.graph_embedder.load_embeddings(graph_embeddings_cache)
-                    logger.info(f"Loaded cached graph embeddings for {len(deps.graph_embeddings_dict)} models")
-                except (IOError, pickle.UnpicklingError, EOFError) as e:
-                    logger.warning(f"Failed to load cached graph embeddings: {e}")
-                    deps.graph_embeddings_dict = None
-            
-            if deps.graph_embeddings_dict is None or len(deps.graph_embeddings_dict) == 0:
-                logger.info("Generating graph embeddings (this may take a while)...")
-                deps.graph_embeddings_dict = deps.graph_embedder.generate_graph_embeddings(graph, workers=4)
-                if deps.graph_embeddings_dict:
-                    deps.graph_embedder.save_embeddings(deps.graph_embeddings_dict, graph_embeddings_cache)
-                    logger.info(f"Generated graph embeddings for {len(deps.graph_embeddings_dict)} models")
-            
-            # Combine text and graph embeddings
-            if deps.graph_embeddings_dict and len(deps.graph_embeddings_dict) > 0:
-                model_ids = deps.df['model_id'].astype(str).tolist()
-                if os.path.exists(combined_embeddings_cache):
-                    try:
-                        with open(combined_embeddings_cache, 'rb') as f:
-                            deps.combined_embeddings = pickle.load(f)
-                        logger.info("Loaded cached combined embeddings")
-                    except (IOError, pickle.UnpicklingError, EOFError) as e:
-                        logger.warning(f"Failed to load cached combined embeddings: {e}")
-                        deps.combined_embeddings = None
-                
-                if deps.combined_embeddings is None:
-                    logger.info("Combining text and graph embeddings...")
-                    deps.combined_embeddings = deps.graph_embedder.combine_embeddings(
-                        deps.embeddings, deps.graph_embeddings_dict, model_ids,
-                        text_weight=0.7, graph_weight=0.3
-                    )
-                    with open(combined_embeddings_cache, 'wb') as f:
-                        pickle.dump(deps.combined_embeddings, f)
-                    logger.info("Combined embeddings saved")
-        except Exception as e:
-            logger.warning(f"Graph embeddings not available: {e}. Continuing with text-only embeddings.")
-            deps.graph_embedder = None
-            deps.graph_embeddings_dict = None
-            deps.combined_embeddings = None
+    # Skip graph embeddings in fallback mode (too slow)
+    deps.graph_embedder = None
+    deps.graph_embeddings_dict = None
+    deps.combined_embeddings = None
     
     # Initialize reducer for text embeddings
     deps.reducer = DimensionReducer(method="umap", n_components=3)
     
+    # Pre-compute clusters for faster requests
+    logger.info("Pre-computing clusters...")
+    
     if os.path.exists(reduced_cache_umap) and os.path.exists(reducer_cache_umap):
         try:
             with open(reduced_cache_umap, 'rb') as f:
@@ -225,35 +253,19 @@ async def startup_event():
             pickle.dump(deps.reduced_embeddings, f)
         deps.reducer.save_reducer(reducer_cache_umap)
     
-    # Initialize reducer for graph-aware embeddings if available
-    if deps.combined_embeddings is not None:
-        reducer_graph = DimensionReducer(method="umap", n_components=3)
-        
-        if os.path.exists(reduced_cache_umap_graph) and os.path.exists(reducer_cache_umap_graph):
-            try:
-                with open(reduced_cache_umap_graph, 'rb') as f:
-                    deps.reduced_embeddings_graph = pickle.load(f)
-                reducer_graph.load_reducer(reducer_cache_umap_graph)
-            except (IOError, pickle.UnpicklingError, EOFError) as e:
-                logger.warning(f"Failed to load cached graph-aware reduced embeddings: {e}")
-                deps.reduced_embeddings_graph = None
-        
-        if deps.reduced_embeddings_graph is None:
-            reducer_graph.reducer = UMAP(
-                n_components=3,
-                n_neighbors=30,
-                min_dist=0.3,
-                metric='cosine',
-                random_state=42,
-                n_jobs=-1,
-                low_memory=True,
-                spread=1.5
-            )
-            deps.reduced_embeddings_graph = reducer_graph.fit_transform(deps.combined_embeddings)
-            with open(reduced_cache_umap_graph, 'wb') as f:
-                pickle.dump(deps.reduced_embeddings_graph, f)
-            reducer_graph.save_reducer(reducer_cache_umap_graph)
-            logger.info("Graph-aware embeddings reduced and cached")
+    # No graph embeddings in fallback mode
+    deps.reduced_embeddings_graph = None
+    
+    # Pre-compute clusters now instead of on first request
+    if deps.reduced_embeddings is not None and len(deps.reduced_embeddings) > 0:
+        models.cluster_labels = compute_clusters(
+            deps.reduced_embeddings, 
+            n_clusters=min(50, len(deps.reduced_embeddings) // 100)
+        )
+        logger.info(f"Pre-computed {len(set(models.cluster_labels))} clusters")
+    
+    startup_time = time.time() - startup_start
+    logger.info(f"Startup complete in {startup_time:.2f} seconds")
     
     # Update module-level aliases
     df = deps.df
@@ -293,11 +305,12 @@ async def get_models(
     search_query: Optional[str] = Query(None),
     color_by: str = Query("library_name"),
     size_by: str = Query("downloads"),
-    max_points: Optional[int] = Query(None),
+    max_points: Optional[int] = Query(10000),  # REDUCED from None (was 50k default in frontend)
     projection_method: str = Query("umap"),
     base_models_only: bool = Query(False),
     max_hierarchy_depth: Optional[int] = Query(None, ge=0, description="Filter to models at or below this hierarchy depth."),
-    use_graph_embeddings: bool = Query(False, description="Use graph-aware embeddings that respect family tree structure")
+    use_graph_embeddings: bool = Query(False, description="Use graph-aware embeddings that respect family tree structure"),
+    format: str = Query("json", regex="^(json|msgpack)$", description="Response format: json or msgpack")
 ):
     if deps.df is None:
         raise DataNotLoadedError()
@@ -505,12 +518,38 @@ async def get_models(
     ]
     
     # Return models with metadata about embedding type
-    return {
+    response_data = {
         "models": models,
         "embedding_type": embedding_type,
         "filtered_count": filtered_count,
         "returned_count": len(models)
     }
+    
+    # Return in requested format with caching headers
+    if format == "msgpack":
+        try:
+            binary_data = encode_models_msgpack([m.dict() for m in models])
+            return Response(
+                content=binary_data,
+                media_type="application/msgpack",
+                headers={
+                    "Cache-Control": "public, max-age=300",
+                    "X-Content-Type-Options": "nosniff",
+                    "Access-Control-Expose-Headers": "Cache-Control"
+                }
+            )
+        except Exception as e:
+            logger.warning(f"MessagePack encoding failed, falling back to JSON: {e}")
+    
+    # Return JSON with caching headers
+    return FastJSONResponse(
+        content=response_data,
+        headers={
+            "Cache-Control": "public, max-age=300",
+            "X-Content-Type-Options": "nosniff",
+            "Access-Control-Expose-Headers": "Cache-Control"
+        }
+    )
 
 
 @app.get("/api/stats")
@@ -1546,7 +1585,7 @@ async def get_current_model_count(
                 try:
                     from utils.data_loader import ModelDataLoader
                     data_loader = ModelDataLoader()
-                    df = data_loader.load_data(sample_size=10000)
+                    df = data_loader.load_data(sample_size=10000, prioritize_base_models=True)
                     library_counts = {}
                     pipeline_counts = {}
                     

backend/config/requirements.txt

@@ -13,4 +13,11 @@ tqdm>=4.66.0
 networkx>=3.0
 node2vec>=0.4.6
 httpx>=0.24.0
+pyarrow>=14.0.0
+
+# Speed optimizations
+redis>=5.0.0
+msgpack>=1.0.0
+orjson>=3.9.0
+aiocache>=0.12.0
 

backend/core/config.py

@@ -6,17 +6,38 @@ class Settings:
     """Application settings."""
     FRONTEND_URL: str = os.getenv("FRONTEND_URL", "http://localhost:3000")
     ALLOW_ALL_ORIGINS: bool = os.getenv("ALLOW_ALL_ORIGINS", "True").lower() in ("true", "1", "yes")
-    SAMPLE_SIZE: Optional[int] = None
     USE_GRAPH_EMBEDDINGS: bool = os.getenv("USE_GRAPH_EMBEDDINGS", "false").lower() == "true"
     PORT: int = int(os.getenv("PORT", 8000))
     
+    # Redis caching
+    REDIS_ENABLED: bool = os.getenv("REDIS_ENABLED", "false").lower() == "true"
+    REDIS_HOST: str = os.getenv("REDIS_HOST", "localhost")
+    REDIS_PORT: int = int(os.getenv("REDIS_PORT", 6379))
+    REDIS_TTL: int = int(os.getenv("REDIS_TTL", 300))  # 5 minutes default
+    
+    # Sample size - read immediately from environment
+    @property
+    def SAMPLE_SIZE(self) -> Optional[int]:
+        """Get sample size from environment (dynamic property)."""
+        sample_size_env = os.getenv("SAMPLE_SIZE")
+        if sample_size_env:
+            try:
+                sample_size_val = int(sample_size_env)
+                return sample_size_val if sample_size_val > 0 else None
+            except ValueError:
+                return None
+        return None
+    
     @classmethod
     def get_sample_size(cls) -> Optional[int]:
         """Get sample size from environment."""
         sample_size_env = os.getenv("SAMPLE_SIZE")
         if sample_size_env:
-            sample_size_val = int(sample_size_env)
-            return sample_size_val if sample_size_val > 0 else None
+            try:
+                sample_size_val = int(sample_size_env)
+                return sample_size_val if sample_size_val > 0 else None
+            except ValueError:
+                return None
         return None
 
 settings = Settings()

backend/scripts/precompute_data.py

@@ -0,0 +1,246 @@
+#!/usr/bin/env python3
+"""
+Pre-compute embeddings and UMAP coordinates for HF models.
+This script generates pre-computed data files that can be loaded instantly on server startup.
+
+Usage:
+    python scripts/precompute_data.py --sample-size 150000 --output-dir ../precomputed_data
+"""
+
+import argparse
+import os
+import sys
+import json
+import time
+import logging
+from datetime import datetime
+from pathlib import Path
+
+import pandas as pd
+import numpy as np
+import pyarrow as pa
+import pyarrow.parquet as pq
+from umap import UMAP
+
+# Add backend to path
+backend_dir = Path(__file__).parent.parent
+sys.path.insert(0, str(backend_dir))
+
+from utils.data_loader import ModelDataLoader
+from utils.embeddings import ModelEmbedder
+
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+
+def precompute_embeddings_and_umap(
+    sample_size=150000,
+    output_dir="precomputed_data",
+    version="v1"
+):
+    """
+    Pre-compute embeddings and UMAP coordinates.
+    
+    Args:
+        sample_size: Number of models to process (None for all)
+        output_dir: Directory to save pre-computed files
+        version: Version tag for the data
+    """
+    start_time = time.time()
+    
+    # Create output directory
+    output_path = Path(output_dir)
+    output_path.mkdir(parents=True, exist_ok=True)
+    
+    logger.info(f"Starting pre-computation for {sample_size if sample_size else 'ALL'} models...")
+    logger.info(f"Output directory: {output_path.absolute()}")
+    
+    # Step 1: Load data with methodological sampling
+    logger.info("Step 1/5: Loading model data (prioritizing base models)...")
+    data_loader = ModelDataLoader()
+    df = data_loader.load_data(sample_size=sample_size, prioritize_base_models=True)
+    df = data_loader.preprocess_for_embedding(df)
+    
+    if 'model_id' in df.columns:
+        df.set_index('model_id', drop=False, inplace=True)
+    
+    # Ensure numeric columns
+    for col in ['downloads', 'likes']:
+        if col in df.columns:
+            df[col] = pd.to_numeric(df[col], errors='coerce').fillna(0).astype(int)
+    
+    logger.info(f"Loaded {len(df)} models")
+    
+    # Step 2: Generate embeddings
+    logger.info("Step 2/5: Generating embeddings (this may take 10-30 minutes)...")
+    embedder = ModelEmbedder()
+    texts = df['combined_text'].tolist()
+    embeddings = embedder.generate_embeddings(texts, batch_size=128)
+    logger.info(f"Generated embeddings: {embeddings.shape}")
+    
+    # Step 3: Run UMAP for 3D
+    logger.info("Step 3/5: Running UMAP for 3D coordinates (this may take 5-15 minutes)...")
+    reducer_3d = UMAP(
+        n_components=3,
+        n_neighbors=30,
+        min_dist=0.3,
+        metric='cosine',
+        random_state=42,
+        n_jobs=-1,
+        low_memory=True,
+        spread=1.5,
+        verbose=True
+    )
+    coords_3d = reducer_3d.fit_transform(embeddings)
+    logger.info(f"Generated 3D coordinates: {coords_3d.shape}")
+    
+    # Step 4: Run UMAP for 2D
+    logger.info("Step 4/5: Running UMAP for 2D coordinates (this may take 5-15 minutes)...")
+    reducer_2d = UMAP(
+        n_components=2,
+        n_neighbors=30,
+        min_dist=0.3,
+        metric='cosine',
+        random_state=42,
+        n_jobs=-1,
+        low_memory=True,
+        spread=1.5,
+        verbose=True
+    )
+    coords_2d = reducer_2d.fit_transform(embeddings)
+    logger.info(f"Generated 2D coordinates: {coords_2d.shape}")
+    
+    # Step 5: Save to Parquet files
+    logger.info("Step 5/5: Saving to Parquet files...")
+    
+    # Prepare DataFrame with all data
+    result_df = pd.DataFrame({
+        'model_id': df['model_id'].astype(str),
+        'library_name': df.get('library_name', pd.Series([None] * len(df))),
+        'pipeline_tag': df.get('pipeline_tag', pd.Series([None] * len(df))),
+        'downloads': df.get('downloads', pd.Series([0] * len(df))),
+        'likes': df.get('likes', pd.Series([0] * len(df))),
+        'trendingScore': df.get('trendingScore', pd.Series([None] * len(df))),
+        'tags': df.get('tags', pd.Series([None] * len(df))),
+        'parent_model': df.get('parent_model', pd.Series([None] * len(df))),
+        'licenses': df.get('licenses', pd.Series([None] * len(df))),
+        'createdAt': df.get('createdAt', pd.Series([None] * len(df))),
+        'x_3d': coords_3d[:, 0],
+        'y_3d': coords_3d[:, 1],
+        'z_3d': coords_3d[:, 2],
+        'x_2d': coords_2d[:, 0],
+        'y_2d': coords_2d[:, 1],
+    })
+    
+    # Save main data file
+    data_file = output_path / f"models_{version}.parquet"
+    result_df.to_parquet(data_file, compression='snappy', index=False)
+    logger.info(f"Saved main data: {data_file} ({data_file.stat().st_size / 1024 / 1024:.2f} MB)")
+    
+    # Save embeddings separately (for similarity search)
+    embeddings_file = output_path / f"embeddings_{version}.parquet"
+    embeddings_df = pd.DataFrame({
+        'model_id': df['model_id'].astype(str),
+        'embedding': [emb.tolist() for emb in embeddings]
+    })
+    embeddings_df.to_parquet(embeddings_file, compression='snappy', index=False)
+    logger.info(f"Saved embeddings: {embeddings_file} ({embeddings_file.stat().st_size / 1024 / 1024:.2f} MB)")
+    
+    # Save metadata
+    metadata = {
+        'version': version,
+        'created_at': datetime.utcnow().isoformat() + 'Z',
+        'total_models': len(df),
+        'sample_size': sample_size,
+        'embedding_dim': embeddings.shape[1],
+        'unique_libraries': int(df['library_name'].nunique()) if 'library_name' in df.columns else 0,
+        'unique_pipelines': int(df['pipeline_tag'].nunique()) if 'pipeline_tag' in df.columns else 0,
+        'files': {
+            'models': f"models_{version}.parquet",
+            'embeddings': f"embeddings_{version}.parquet"
+        },
+        'stats': {
+            'avg_downloads': float(df['downloads'].mean()) if 'downloads' in df.columns else 0,
+            'avg_likes': float(df['likes'].mean()) if 'likes' in df.columns else 0,
+            'libraries': df['library_name'].value_counts().head(20).to_dict() if 'library_name' in df.columns else {},
+            'pipelines': df['pipeline_tag'].value_counts().head(20).to_dict() if 'pipeline_tag' in df.columns else {}
+        },
+        'coordinates': {
+            '3d': {
+                'min': [float(coords_3d[:, i].min()) for i in range(3)],
+                'max': [float(coords_3d[:, i].max()) for i in range(3)],
+                'mean': [float(coords_3d[:, i].mean()) for i in range(3)]
+            },
+            '2d': {
+                'min': [float(coords_2d[:, i].min()) for i in range(2)],
+                'max': [float(coords_2d[:, i].max()) for i in range(2)],
+                'mean': [float(coords_2d[:, i].mean()) for i in range(2)]
+            }
+        }
+    }
+    
+    metadata_file = output_path / f"metadata_{version}.json"
+    with open(metadata_file, 'w') as f:
+        json.dump(metadata, f, indent=2, default=str)
+    logger.info(f"Saved metadata: {metadata_file}")
+    
+    elapsed = time.time() - start_time
+    logger.info(f"\n{'='*60}")
+    logger.info(f"Pre-computation complete!")
+    logger.info(f"Total time: {elapsed / 60:.1f} minutes")
+    logger.info(f"Models processed: {len(df):,}")
+    logger.info(f"Output directory: {output_path.absolute()}")
+    logger.info(f"Files created:")
+    logger.info(f"  - {data_file.name} ({data_file.stat().st_size / 1024 / 1024:.2f} MB)")
+    logger.info(f"  - {embeddings_file.name} ({embeddings_file.stat().st_size / 1024 / 1024:.2f} MB)")
+    logger.info(f"  - {metadata_file.name}")
+    logger.info(f"{'='*60}\n")
+    
+    return metadata
+
+
+def main():
+    parser = argparse.ArgumentParser(description='Pre-compute embeddings and UMAP coordinates')
+    parser.add_argument(
+        '--sample-size',
+        type=int,
+        default=150000,
+        help='Number of models to process (default: 150000, use 0 for all)'
+    )
+    parser.add_argument(
+        '--output-dir',
+        type=str,
+        default='precomputed_data',
+        help='Output directory for pre-computed files (default: precomputed_data)'
+    )
+    parser.add_argument(
+        '--version',
+        type=str,
+        default='v1',
+        help='Version tag for the data (default: v1)'
+    )
+    
+    args = parser.parse_args()
+    
+    sample_size = None if args.sample_size == 0 else args.sample_size
+    
+    try:
+        precompute_embeddings_and_umap(
+            sample_size=sample_size,
+            output_dir=args.output_dir,
+            version=args.version
+        )
+    except KeyboardInterrupt:
+        logger.warning("\nInterrupted by user")
+        sys.exit(1)
+    except Exception as e:
+        logger.error(f"Error during pre-computation: {e}", exc_info=True)
+        sys.exit(1)
+
+
+if __name__ == '__main__':
+    main()
+

backend/scripts/precompute_fast.py

@@ -0,0 +1,276 @@
+#!/usr/bin/env python3
+"""
+FAST pre-computation script with speed optimizations.
+~5-10x faster than standard version.
+
+Optimizations:
+- No random_state (enables parallel UMAP)
+- PCA pre-reduction (384 -> 50 dims)
+- Optimized UMAP parameters
+- Larger batch sizes
+
+Usage:
+    python scripts/precompute_fast.py --sample-size 150000 --output-dir ../precomputed_data
+"""
+
+import argparse
+import os
+import sys
+import json
+import time
+import logging
+from datetime import datetime
+from pathlib import Path
+
+import pandas as pd
+import numpy as np
+import pyarrow as pa
+import pyarrow.parquet as pq
+from umap import UMAP
+from sklearn.decomposition import PCA
+
+# Add backend to path
+backend_dir = Path(__file__).parent.parent
+sys.path.insert(0, str(backend_dir))
+
+from utils.data_loader import ModelDataLoader
+from utils.embeddings import ModelEmbedder
+
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+
+def precompute_fast(
+    sample_size: int = 150000,
+    output_dir: str = "precomputed_data",
+    version: str = "v1",
+    pca_dims: int = 50,
+    use_pca: bool = True
+):
+    """
+    Pre-compute embeddings and UMAP coordinates with speed optimizations.
+    
+    Args:
+        sample_size: Number of models to process
+        output_dir: Directory to save output files
+        version: Version tag for output files
+        pca_dims: Number of PCA dimensions (if use_pca=True)
+        use_pca: Whether to use PCA pre-reduction (much faster)
+    """
+    start_time = time.time()
+    
+    # Create output directory
+    output_path = Path(output_dir)
+    output_path.mkdir(parents=True, exist_ok=True)
+    
+    logger.info("="*60)
+    logger.info("FAST PRE-COMPUTATION STARTED")
+    logger.info("="*60)
+    logger.info(f"Sample size: {sample_size:,}")
+    logger.info(f"Output directory: {output_dir}")
+    logger.info(f"Version: {version}")
+    logger.info(f"PCA pre-reduction: {use_pca} ({pca_dims} dims)" if use_pca else "PCA: disabled")
+    logger.info("="*60)
+    
+    # Step 1: Load data with methodological sampling
+    logger.info("Step 1/5: Loading model data (prioritizing base models)...")
+    step_start = time.time()
+    
+    data_loader = ModelDataLoader()
+    df = data_loader.load_data(sample_size=sample_size, prioritize_base_models=True)
+    
+    step_time = time.time() - step_start
+    logger.info(f"Loaded {len(df):,} models in {step_time:.1f} seconds")
+    
+    # Step 2: Generate embeddings
+    logger.info("Step 2/5: Generating embeddings...")
+    step_start = time.time()
+    
+    # Build combined text from available fields
+    logger.info("Building combined text from model fields...")
+    df['combined_text'] = (
+        df.get('tags', '').astype(str) + ' ' +
+        df.get('pipeline_tag', '').astype(str) + ' ' +
+        df.get('library_name', '').astype(str)
+    )
+    
+    # Add modelCard if available
+    if 'modelCard' in df.columns:
+        df['combined_text'] = df['combined_text'] + ' ' + df['modelCard'].astype(str).str[:500]
+    
+    embedder = ModelEmbedder()
+    texts = df['combined_text'].tolist()
+    
+    # Use larger batch size for speed
+    embeddings = embedder.generate_embeddings(texts, batch_size=256)
+    
+    step_time = time.time() - step_start
+    logger.info(f"Generated embeddings: {embeddings.shape} in {step_time/60:.1f} minutes")
+    
+    # Optional: PCA pre-reduction for speed
+    embeddings_for_umap = embeddings
+    pca_model = None
+    
+    if use_pca and embeddings.shape[1] > pca_dims:
+        logger.info(f"Step 2.5/5: PCA reduction ({embeddings.shape[1]} -> {pca_dims} dims)...")
+        step_start = time.time()
+        
+        pca_model = PCA(n_components=pca_dims, random_state=42)
+        embeddings_for_umap = pca_model.fit_transform(embeddings)
+        
+        explained_var = pca_model.explained_variance_ratio_.sum()
+        step_time = time.time() - step_start
+        logger.info(f"PCA complete in {step_time:.1f}s (preserved {explained_var:.1%} variance)")
+        logger.info(f"Reduced embeddings: {embeddings_for_umap.shape}")
+    
+    # Step 3: Run UMAP for 3D (OPTIMIZED)
+    logger.info("Step 3/5: Running OPTIMIZED UMAP for 3D coordinates...")
+    step_start = time.time()
+    
+    reducer_3d = UMAP(
+        n_components=3,
+        n_neighbors=15,        # ↓ from 30 for speed
+        min_dist=0.1,          # ↓ from 0.3 for speed
+        metric='euclidean',    # faster than cosine
+        n_jobs=-1,             # all cores (no random_state!)
+        low_memory=False,      # faster if RAM available
+        spread=1.5,
+        verbose=True
+    )
+    coords_3d = reducer_3d.fit_transform(embeddings_for_umap)
+    
+    step_time = time.time() - step_start
+    logger.info(f"Generated 3D coordinates: {coords_3d.shape} in {step_time/60:.1f} minutes")
+    
+    # Step 4: Run UMAP for 2D (OPTIMIZED)
+    logger.info("Step 4/5: Running OPTIMIZED UMAP for 2D coordinates...")
+    step_start = time.time()
+    
+    reducer_2d = UMAP(
+        n_components=2,
+        n_neighbors=15,        # ↓ from 30 for speed
+        min_dist=0.1,          # ↓ from 0.3 for speed
+        metric='euclidean',    # faster than cosine
+        n_jobs=-1,             # all cores (no random_state!)
+        low_memory=False,      # faster if RAM available
+        spread=1.5,
+        verbose=True
+    )
+    coords_2d = reducer_2d.fit_transform(embeddings_for_umap)
+    
+    step_time = time.time() - step_start
+    logger.info(f"Generated 2D coordinates: {coords_2d.shape} in {step_time/60:.1f} minutes")
+    
+    # Step 5: Save to Parquet files
+    logger.info("Step 5/5: Saving to Parquet files...")
+    step_start = time.time()
+    
+    # Prepare DataFrame with all data
+    output_df = df.copy()
+    output_df['x_3d'] = coords_3d[:, 0]
+    output_df['y_3d'] = coords_3d[:, 1]
+    output_df['z_3d'] = coords_3d[:, 2]
+    output_df['x_2d'] = coords_2d[:, 0]
+    output_df['y_2d'] = coords_2d[:, 1]
+    
+    # Save main data
+    models_file = output_path / f"models_{version}.parquet"
+    output_df.to_parquet(models_file, compression='snappy', index=False)
+    logger.info(f"Saved models data: {models_file} ({models_file.stat().st_size / 1024 / 1024:.1f} MB)")
+    
+    # Save embeddings separately
+    embeddings_file = output_path / f"embeddings_{version}.parquet"
+    embeddings_df = pd.DataFrame({
+        'model_id': df['modelId'].values,
+        'embedding': [emb.tolist() for emb in embeddings]
+    })
+    embeddings_df.to_parquet(embeddings_file, compression='snappy', index=False)
+    logger.info(f"Saved embeddings: {embeddings_file} ({embeddings_file.stat().st_size / 1024 / 1024:.1f} MB)")
+    
+    # Save metadata
+    total_time = time.time() - start_time
+    metadata = {
+        'version': version,
+        'created_at': datetime.now().isoformat(),
+        'total_models': len(df),
+        'embedding_dim': embeddings.shape[1],
+        'umap_3d_shape': coords_3d.shape,
+        'umap_2d_shape': coords_2d.shape,
+        'unique_libraries': int(df['library_name'].nunique()),
+        'unique_pipelines': int(df['pipeline_tag'].nunique()),
+        'processing_time_seconds': total_time,
+        'processing_time_minutes': total_time / 60,
+        'optimizations': {
+            'pca_enabled': use_pca,
+            'pca_dims': pca_dims if use_pca else None,
+            'pca_variance_preserved': float(pca_model.explained_variance_ratio_.sum()) if pca_model else None,
+            'umap_parallel': True,
+            'umap_n_neighbors': 15,
+            'umap_metric': 'euclidean',
+            'batch_size': 256
+        },
+        'statistics': {
+            'downloads': {
+                'min': float(df['downloads'].min()) if 'downloads' in df else 0,
+                'max': float(df['downloads'].max()) if 'downloads' in df else 0,
+                'mean': float(df['downloads'].mean()) if 'downloads' in df else 0,
+            },
+            'likes': {
+                'min': float(df['likes'].min()) if 'likes' in df else 0,
+                'max': float(df['likes'].max()) if 'likes' in df else 0,
+                'mean': float(df['likes'].mean()) if 'likes' in df else 0,
+            }
+        }
+    }
+    
+    metadata_file = output_path / f"metadata_{version}.json"
+    with open(metadata_file, 'w') as f:
+        json.dump(metadata, f, indent=2)
+    
+    logger.info(f"Saved metadata: {metadata_file}")
+    
+    step_time = time.time() - step_start
+    logger.info(f"Files saved in {step_time:.1f} seconds")
+    
+    # Final summary
+    logger.info("="*60)
+    logger.info("FAST PRE-COMPUTATION COMPLETE!")
+    logger.info("="*60)
+    logger.info(f"Total time: {total_time/60:.1f} minutes ({total_time:.0f} seconds)")
+    logger.info(f"Models processed: {len(df):,}")
+    logger.info(f"Speedup estimate: ~3-5x faster than standard version")
+    logger.info(f"Output directory: {output_dir}")
+    logger.info(f"Files created:")
+    logger.info(f"  - {models_file.name} ({models_file.stat().st_size / 1024 / 1024:.1f} MB)")
+    logger.info(f"  - {embeddings_file.name} ({embeddings_file.stat().st_size / 1024 / 1024:.1f} MB)")
+    logger.info(f"  - {metadata_file.name}")
+    logger.info("="*60)
+    
+    return output_df, embeddings, metadata
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Fast pre-computation of HF model embeddings and coordinates")
+    parser.add_argument("--sample-size", type=int, default=150000, help="Number of models to process")
+    parser.add_argument("--output-dir", type=str, default="../precomputed_data", help="Output directory")
+    parser.add_argument("--version", type=str, default="v1", help="Version tag")
+    parser.add_argument("--pca-dims", type=int, default=50, help="PCA dimensions for pre-reduction")
+    parser.add_argument("--no-pca", action="store_true", help="Disable PCA pre-reduction")
+    
+    args = parser.parse_args()
+    
+    try:
+        precompute_fast(
+            sample_size=args.sample_size,
+            output_dir=args.output_dir,
+            version=args.version,
+            pca_dims=args.pca_dims,
+            use_pca=not args.no_pca
+        )
+    except Exception as e:
+        logger.error(f"Pre-computation failed: {e}", exc_info=True)
+        sys.exit(1)
+

backend/utils/cache.py

@@ -0,0 +1,153 @@
+"""
+Redis-based caching for API responses.
+"""
+import json
+import hashlib
+import logging
+from typing import Optional, Any
+from functools import wraps
+
+try:
+    import redis
+    import msgpack
+    REDIS_AVAILABLE = True
+except ImportError:
+    REDIS_AVAILABLE = False
+
+from core.config import settings
+
+logger = logging.getLogger(__name__)
+
+
+class ResponseCache:
+    """Redis-based response cache with fallback to in-memory."""
+    
+    def __init__(self):
+        self.redis_client = None
+        self.memory_cache = {}
+        self.enabled = settings.REDIS_ENABLED and REDIS_AVAILABLE
+        
+        if self.enabled:
+            try:
+                self.redis_client = redis.Redis(
+                    host=settings.REDIS_HOST,
+                    port=settings.REDIS_PORT,
+                    db=0,
+                    decode_responses=False,  # We'll use msgpack
+                    socket_timeout=2,
+                    socket_connect_timeout=2
+                )
+                # Test connection
+                self.redis_client.ping()
+                logger.info(f"✅ Redis cache enabled at {settings.REDIS_HOST}:{settings.REDIS_PORT}")
+            except Exception as e:
+                logger.warning(f"⚠️  Redis connection failed, using in-memory cache: {e}")
+                self.enabled = False
+                self.redis_client = None
+        else:
+            logger.info("📝 Using in-memory cache (Redis disabled)")
+    
+    def _generate_key(self, prefix: str, *args, **kwargs) -> str:
+        """Generate cache key from arguments."""
+        key_data = f"{prefix}:{args}:{sorted(kwargs.items())}"
+        return f"hfviz:{hashlib.md5(key_data.encode()).hexdigest()}"
+    
+    def get(self, key: str) -> Optional[Any]:
+        """Get value from cache."""
+        try:
+            if self.enabled and self.redis_client:
+                data = self.redis_client.get(key)
+                if data:
+                    return msgpack.unpackb(data, raw=False)
+            else:
+                return self.memory_cache.get(key)
+        except Exception as e:
+            logger.warning(f"Cache get error: {e}")
+            return None
+    
+    def set(self, key: str, value: Any, ttl: Optional[int] = None) -> bool:
+        """Set value in cache with TTL."""
+        try:
+            ttl = ttl or settings.REDIS_TTL
+            
+            if self.enabled and self.redis_client:
+                packed_data = msgpack.packb(value, use_bin_type=True)
+                self.redis_client.setex(key, ttl, packed_data)
+                return True
+            else:
+                # In-memory cache with simple TTL tracking
+                self.memory_cache[key] = value
+                # Limit in-memory cache size
+                if len(self.memory_cache) > 100:
+                    # Remove oldest entry
+                    self.memory_cache.pop(next(iter(self.memory_cache)))
+                return True
+        except Exception as e:
+            logger.warning(f"Cache set error: {e}")
+            return False
+    
+    def delete(self, key: str) -> bool:
+        """Delete key from cache."""
+        try:
+            if self.enabled and self.redis_client:
+                self.redis_client.delete(key)
+            else:
+                self.memory_cache.pop(key, None)
+            return True
+        except Exception as e:
+            logger.warning(f"Cache delete error: {e}")
+            return False
+    
+    def clear(self, pattern: str = "hfviz:*") -> bool:
+        """Clear all cache keys matching pattern."""
+        try:
+            if self.enabled and self.redis_client:
+                keys = self.redis_client.keys(pattern)
+                if keys:
+                    self.redis_client.delete(*keys)
+            else:
+                self.memory_cache.clear()
+            return True
+        except Exception as e:
+            logger.warning(f"Cache clear error: {e}")
+            return False
+
+
+# Global cache instance
+cache = ResponseCache()
+
+
+def cached_response(ttl: int = 300, key_prefix: str = "api"):
+    """
+    Decorator for caching API responses.
+    
+    Usage:
+        @cached_response(ttl=600, key_prefix="models")
+        async def get_models(...):
+            ...
+    """
+    def decorator(func):
+        @wraps(func)
+        async def wrapper(*args, **kwargs):
+            # Generate cache key from function args
+            cache_key = cache._generate_key(key_prefix, func.__name__, *args, **kwargs)
+            
+            # Try to get from cache
+            cached_data = cache.get(cache_key)
+            if cached_data is not None:
+                logger.debug(f"Cache HIT: {cache_key[:20]}...")
+                return cached_data
+            
+            # Execute function
+            logger.debug(f"Cache MISS: {cache_key[:20]}...")
+            result = await func(*args, **kwargs)
+            
+            # Cache result
+            cache.set(cache_key, result, ttl=ttl)
+            
+            return result
+        return wrapper
+    return decorator
+
+
+

backend/utils/data_loader.py

@@ -14,25 +14,118 @@ class ModelDataLoader:
         self.dataset_name = dataset_name
         self.df: Optional[pd.DataFrame] = None
         
-    def load_data(self, sample_size: Optional[int] = None, split: str = "train") -> pd.DataFrame:
+    def load_data(self, sample_size: Optional[int] = None, split: str = "train", 
+                  prioritize_base_models: bool = True) -> pd.DataFrame:
         """
-        Load dataset from Hugging Face Hub.
+        Load dataset from Hugging Face Hub with methodological sampling.
         
         Args:
-            sample_size: If provided, randomly sample this many rows
+            sample_size: If provided, sample this many rows using stratified approach
             split: Dataset split to load
+            prioritize_base_models: If True, prioritize base models (no parent) in sampling
             
         Returns:
             DataFrame with model data
         """
         dataset = load_dataset(self.dataset_name, split=split)
+        df_full = dataset.to_pandas()
+        
+        if sample_size and len(df_full) > sample_size:
+            if prioritize_base_models:
+                # Methodological sampling: prioritize base models
+                df_full = self._stratified_sample(df_full, sample_size)
+            else:
+                # Random sampling (old approach)
+                dataset = dataset.shuffle(seed=42).select(range(sample_size))
+                df_full = dataset.to_pandas()
+        
+        self.df = df_full
+        return self.df
+    
+    def _stratified_sample(self, df: pd.DataFrame, sample_size: int) -> pd.DataFrame:
+        """
+        Stratified sampling prioritizing base models and popular models.
         
-        if sample_size and len(dataset) > sample_size:
-            dataset = dataset.shuffle(seed=42).select(range(sample_size))
-        
-        self.df = dataset.to_pandas()
+        Strategy:
+        1. Include ALL base models (no parent) if they fit in sample_size
+        2. Add popular models (high downloads/likes)
+        3. Fill remaining with diverse models across libraries/tasks
         
-        return self.df
+        Args:
+            df: Full DataFrame
+            sample_size: Target sample size
+            
+        Returns:
+            Sampled DataFrame
+        """
+        # Identify base models (no parent)
+        # parent_model is stored as string representation of list: '[]' for base models
+        base_models = df[
+            df['parent_model'].isna() | 
+            (df['parent_model'] == '') | 
+            (df['parent_model'] == '[]') |
+            (df['parent_model'] == 'null')
+        ]
+        
+        # Start with base models
+        if len(base_models) <= sample_size:
+            # All base models fit - include them all
+            sampled = base_models.copy()
+            remaining_size = sample_size - len(sampled)
+            
+            # Get non-base models
+            non_base = df[~df.index.isin(sampled.index)]
+            
+            if remaining_size > 0 and len(non_base) > 0:
+                # Add popular derived models and diverse samples
+                # Sort by downloads + likes for popularity
+                non_base['popularity_score'] = (
+                    non_base.get('downloads', 0).fillna(0) + 
+                    non_base.get('likes', 0).fillna(0) * 100  # Weight likes more
+                )
+                
+                # Take top 50% by popularity, 50% stratified by library
+                popular_size = min(remaining_size // 2, len(non_base))
+                diverse_size = remaining_size - popular_size
+                
+                # Popular models
+                popular_models = non_base.nlargest(popular_size, 'popularity_score')
+                sampled = pd.concat([sampled, popular_models])
+                
+                # Diverse sampling across libraries
+                if diverse_size > 0:
+                    remaining = non_base[~non_base.index.isin(popular_models.index)]
+                    if len(remaining) > 0:
+                        # Stratify by library if possible
+                        if 'library_name' in remaining.columns:
+                            libraries = remaining['library_name'].value_counts()
+                            diverse_samples = []
+                            per_library = max(1, diverse_size // len(libraries))
+                            
+                            for library in libraries.index:
+                                lib_models = remaining[remaining['library_name'] == library]
+                                n_sample = min(per_library, len(lib_models))
+                                diverse_samples.append(lib_models.sample(n=n_sample, random_state=42))
+                            
+                            diverse_df = pd.concat(diverse_samples).head(diverse_size)
+                        else:
+                            diverse_df = remaining.sample(n=min(diverse_size, len(remaining)), random_state=42)
+                        
+                        sampled = pd.concat([sampled, diverse_df])
+                
+                sampled = sampled.drop(columns=['popularity_score'], errors='ignore')
+        else:
+            # Too many base models - sample from them strategically
+            # Prioritize popular base models
+            base_models = base_models.copy()  # Avoid SettingWithCopyWarning
+            base_models['popularity_score'] = (
+                base_models.get('downloads', 0).fillna(0) + 
+                base_models.get('likes', 0).fillna(0) * 100
+            )
+            sampled = base_models.nlargest(sample_size, 'popularity_score')
+            sampled = sampled.drop(columns=['popularity_score'], errors='ignore')
+        
+        return sampled.reset_index(drop=True)
     
     def preprocess_for_embedding(self, df: Optional[pd.DataFrame] = None) -> pd.DataFrame:
         """
@@ -55,13 +148,17 @@ class ModelDataLoader:
             if field in df.columns:
                 df[field] = df[field].fillna('')
         
+        # Build combined text from available fields
         df['combined_text'] = (
             df.get('tags', '').astype(str) + ' ' +
             df.get('pipeline_tag', '').astype(str) + ' ' +
-            df.get('library_name', '').astype(str) + ' ' +
-            df['modelCard'].astype(str).str[:500]
+            df.get('library_name', '').astype(str)
         )
         
+        # Add modelCard if available (only in withmodelcards dataset)
+        if 'modelCard' in df.columns:
+            df['combined_text'] = df['combined_text'] + ' ' + df['modelCard'].astype(str).str[:500]
+        
         return df
     
     def filter_data(

backend/utils/precomputed_loader.py

@@ -0,0 +1,174 @@
+"""
+Loader for pre-computed embeddings and UMAP coordinates.
+This module provides fast loading of pre-computed data from Parquet files.
+"""
+
+import os
+import json
+import logging
+from pathlib import Path
+from typing import Optional, Dict, Tuple
+
+import pandas as pd
+import numpy as np
+
+logger = logging.getLogger(__name__)
+
+
+class PrecomputedDataLoader:
+    """Load pre-computed embeddings and coordinates from Parquet files."""
+    
+    def __init__(self, data_dir: str = "precomputed_data", version: str = "v1"):
+        """
+        Initialize the loader.
+        
+        Args:
+            data_dir: Directory containing pre-computed files
+            version: Version tag to load (default: v1)
+        """
+        self.data_dir = Path(data_dir)
+        self.version = version
+        self.metadata = None
+        
+    def load_metadata(self) -> Dict:
+        """Load metadata about the pre-computed data."""
+        metadata_file = self.data_dir / f"metadata_{self.version}.json"
+        
+        if not metadata_file.exists():
+            raise FileNotFoundError(
+                f"Metadata file not found: {metadata_file}\n"
+                f"Run scripts/precompute_data.py first to generate pre-computed data."
+            )
+        
+        with open(metadata_file, 'r') as f:
+            self.metadata = json.load(f)
+        
+        logger.info(f"Loaded metadata for version {self.version}")
+        logger.info(f"  Created: {self.metadata.get('created_at')}")
+        logger.info(f"  Total models: {self.metadata.get('total_models'):,}")
+        logger.info(f"  Embedding dim: {self.metadata.get('embedding_dim')}")
+        
+        return self.metadata
+    
+    def check_available(self) -> bool:
+        """Check if pre-computed data is available."""
+        metadata_file = self.data_dir / f"metadata_{self.version}.json"
+        models_file = self.data_dir / f"models_{self.version}.parquet"
+        embeddings_file = self.data_dir / f"embeddings_{self.version}.parquet"
+        
+        return (
+            metadata_file.exists() and
+            models_file.exists() and
+            embeddings_file.exists()
+        )
+    
+    def load_models(self) -> pd.DataFrame:
+        """
+        Load pre-computed model data with coordinates.
+        
+        Returns:
+            DataFrame with columns: model_id, library_name, pipeline_tag, downloads, likes,
+                                   x_3d, y_3d, z_3d, x_2d, y_2d, etc.
+        """
+        models_file = self.data_dir / f"models_{self.version}.parquet"
+        
+        if not models_file.exists():
+            raise FileNotFoundError(
+                f"Models file not found: {models_file}\n"
+                f"Run scripts/precompute_data.py first to generate pre-computed data."
+            )
+        
+        logger.info(f"Loading pre-computed models from {models_file}...")
+        df = pd.read_parquet(models_file)
+        
+        # Set model_id as index
+        if 'model_id' in df.columns:
+            df.set_index('model_id', drop=False, inplace=True)
+        
+        logger.info(f"Loaded {len(df):,} models with pre-computed coordinates")
+        
+        return df
+    
+    def load_embeddings(self) -> Tuple[np.ndarray, pd.Series]:
+        """
+        Load pre-computed embeddings.
+        
+        Returns:
+            Tuple of (embeddings_array, model_ids_series)
+        """
+        embeddings_file = self.data_dir / f"embeddings_{self.version}.parquet"
+        
+        if not embeddings_file.exists():
+            raise FileNotFoundError(
+                f"Embeddings file not found: {embeddings_file}\n"
+                f"Run scripts/precompute_data.py first to generate pre-computed data."
+            )
+        
+        logger.info(f"Loading pre-computed embeddings from {embeddings_file}...")
+        df = pd.read_parquet(embeddings_file)
+        
+        # Convert embeddings from list to numpy array
+        embeddings = np.array(df['embedding'].tolist())
+        model_ids = df['model_id']
+        
+        logger.info(f"Loaded embeddings: {embeddings.shape}")
+        
+        return embeddings, model_ids
+    
+    def load_all(self) -> Tuple[pd.DataFrame, np.ndarray, Dict]:
+        """
+        Load all pre-computed data.
+        
+        Returns:
+            Tuple of (models_df, embeddings_array, metadata_dict)
+        """
+        metadata = self.load_metadata()
+        df = self.load_models()
+        embeddings, _ = self.load_embeddings()
+        
+        return df, embeddings, metadata
+
+
+def get_precomputed_loader(
+    data_dir: Optional[str] = None,
+    version: str = "v1"
+) -> Optional[PrecomputedDataLoader]:
+    """
+    Get a PrecomputedDataLoader if pre-computed data is available.
+    
+    Args:
+        data_dir: Directory containing pre-computed files (default: auto-detect)
+        version: Version tag to load
+    
+    Returns:
+        PrecomputedDataLoader if available, None otherwise
+    """
+    if data_dir is None:
+        # Try multiple locations
+        backend_dir = Path(__file__).parent.parent
+        root_dir = backend_dir.parent
+        
+        possible_dirs = [
+            root_dir / "precomputed_data",
+            backend_dir / "precomputed_data",
+            Path("precomputed_data"),
+        ]
+        
+        for dir_path in possible_dirs:
+            if dir_path.exists():
+                loader = PrecomputedDataLoader(data_dir=str(dir_path), version=version)
+                if loader.check_available():
+                    logger.info(f"Found pre-computed data in: {dir_path}")
+                    return loader
+        
+        return None
+    else:
+        loader = PrecomputedDataLoader(data_dir=data_dir, version=version)
+        if loader.check_available():
+            return loader
+        return None
+
+
+
+
+

backend/utils/response_encoder.py

@@ -0,0 +1,107 @@
+"""
+Fast response encoding with MessagePack and orjson.
+"""
+import logging
+from typing import Any, List, Dict
+from fastapi.responses import Response
+
+try:
+    import msgpack
+    MSGPACK_AVAILABLE = True
+except ImportError:
+    MSGPACK_AVAILABLE = False
+
+try:
+    import orjson
+    ORJSON_AVAILABLE = True
+except ImportError:
+    ORJSON_AVAILABLE = False
+    import json
+
+logger = logging.getLogger(__name__)
+
+
+class FastJSONResponse(Response):
+    """JSON response using orjson for 2-3x faster encoding."""
+    media_type = "application/json"
+    
+    def render(self, content: Any) -> bytes:
+        if ORJSON_AVAILABLE:
+            return orjson.dumps(
+                content,
+                option=orjson.OPT_SERIALIZE_NUMPY | orjson.OPT_NON_STR_KEYS
+            )
+        else:
+            return json.dumps(content, default=str).encode('utf-8')
+
+
+class MessagePackResponse(Response):
+    """Binary response using MessagePack for 30-50% smaller payloads."""
+    media_type = "application/msgpack"
+    
+    def render(self, content: Any) -> bytes:
+        if not MSGPACK_AVAILABLE:
+            raise RuntimeError("msgpack not installed")
+        return msgpack.packb(content, use_bin_type=True)
+
+
+def encode_models_msgpack(models: List[Dict]) -> bytes:
+    """
+    Encode model list to MessagePack binary format.
+    Optimized for the specific structure of ModelPoint objects.
+    """
+    if not MSGPACK_AVAILABLE:
+        raise RuntimeError("msgpack not installed")
+    
+    # Convert to more compact format
+    compact_models = []
+    for model in models:
+        compact_models.append({
+            'id': model.get('model_id'),
+            'x': model.get('x'),
+            'y': model.get('y'),
+            'z': model.get('z', 0),
+            'lib': model.get('library_name'),
+            'pipe': model.get('pipeline_tag'),
+            'dl': model.get('downloads', 0),
+            'l': model.get('likes', 0),
+            'ts': model.get('trending_score'),
+            'par': model.get('parent_model'),
+            'lic': model.get('licenses'),
+            'fd': model.get('family_depth'),
+            'cid': model.get('cluster_id'),
+        })
+    
+    return msgpack.packb(compact_models, use_bin_type=True)
+
+
+def decode_models_msgpack(data: bytes) -> List[Dict]:
+    """Decode MessagePack binary to model list."""
+    if not MSGPACK_AVAILABLE:
+        raise RuntimeError("msgpack not installed")
+    
+    compact_models = msgpack.unpackb(data, raw=False)
+    
+    # Expand back to full format
+    models = []
+    for cm in compact_models:
+        models.append({
+            'model_id': cm.get('id'),
+            'x': cm.get('x'),
+            'y': cm.get('y'),
+            'z': cm.get('z', 0),
+            'library_name': cm.get('lib'),
+            'pipeline_tag': cm.get('pipe'),
+            'downloads': cm.get('dl', 0),
+            'likes': cm.get('l', 0),
+            'trending_score': cm.get('ts'),
+            'parent_model': cm.get('par'),
+            'licenses': cm.get('lic'),
+            'family_depth': cm.get('fd'),
+            'cluster_id': cm.get('cid'),
+        })
+    
+    return models
+
+
+

backend_full.log

@@ -0,0 +1,119 @@
+INFO:     Started server process [31410]
+INFO:     Waiting for application startup.
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     Application startup complete.
+INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
+INFO:     127.0.0.1:55718 - "GET /api/stats HTTP/1.1" 200 OK
+Unhandled exception
+Traceback (most recent call last):
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/errors.py", line 164, in __call__
+    await self.app(scope, receive, _send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/cors.py", line 85, in __call__
+    await self.app(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/gzip.py", line 29, in __call__
+    await responder(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/gzip.py", line 46, in __call__
+    await self.app(scope, receive, self.send_with_compression)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/exceptions.py", line 63, in __call__
+    await wrap_app_handling_exceptions(self.app, conn)(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 53, in wrapped_app
+    raise exc
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 42, in wrapped_app
+    await app(scope, receive, sender)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/middleware/asyncexitstack.py", line 18, in __call__
+    await self.app(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/routing.py", line 716, in __call__
+    await self.middleware_stack(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/routing.py", line 736, in app
+    await route.handle(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/routing.py", line 290, in handle
+    await self.app(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 125, in app
+    await wrap_app_handling_exceptions(app, request)(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 53, in wrapped_app
+    raise exc
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 42, in wrapped_app
+    await app(scope, receive, sender)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 111, in app
+    response = await f(request)
+               ^^^^^^^^^^^^^^^^
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 391, in app
+    raw_response = await run_endpoint_function(
+                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    ...<3 lines>...
+    )
+    ^
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 290, in run_endpoint_function
+    return await dependant.call(**values)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "/Users/hamidaho/hf_viz/backend/api/routes/models.py", line 196, in get_models
+    filtered_reduced = current_reduced[filtered_indices]
+                       ~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^
+IndexError: index 5000 is out of bounds for axis 0 with size 5000
+INFO:     127.0.0.1:55722 - "GET /api/models?limit=1 HTTP/1.1" 500 Internal Server Error
+ERROR:    Exception in ASGI application
+Traceback (most recent call last):
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/uvicorn/protocols/http/httptools_impl.py", line 409, in run_asgi
+    result = await app(  # type: ignore[func-returns-value]
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        self.scope, self.receive, self.send
+        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    )
+    ^
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/uvicorn/middleware/proxy_headers.py", line 60, in __call__
+    return await self.app(scope, receive, send)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/applications.py", line 1134, in __call__
+    await super().__call__(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/applications.py", line 113, in __call__
+    await self.middleware_stack(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/errors.py", line 186, in __call__
+    raise exc
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/errors.py", line 164, in __call__
+    await self.app(scope, receive, _send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/cors.py", line 85, in __call__
+    await self.app(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/gzip.py", line 29, in __call__
+    await responder(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/gzip.py", line 46, in __call__
+    await self.app(scope, receive, self.send_with_compression)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/middleware/exceptions.py", line 63, in __call__
+    await wrap_app_handling_exceptions(self.app, conn)(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 53, in wrapped_app
+    raise exc
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 42, in wrapped_app
+    await app(scope, receive, sender)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/middleware/asyncexitstack.py", line 18, in __call__
+    await self.app(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/routing.py", line 716, in __call__
+    await self.middleware_stack(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/routing.py", line 736, in app
+    await route.handle(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/routing.py", line 290, in handle
+    await self.app(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 125, in app
+    await wrap_app_handling_exceptions(app, request)(scope, receive, send)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 53, in wrapped_app
+    raise exc
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/starlette/_exception_handler.py", line 42, in wrapped_app
+    await app(scope, receive, sender)
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 111, in app
+    response = await f(request)
+               ^^^^^^^^^^^^^^^^
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 391, in app
+    raw_response = await run_endpoint_function(
+                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    ...<3 lines>...
+    )
+    ^
+  File "/Users/hamidaho/hf_viz/venv/lib/python3.13/site-packages/fastapi/routing.py", line 290, in run_endpoint_function
+    return await dependant.call(**values)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "/Users/hamidaho/hf_viz/backend/api/routes/models.py", line 196, in get_models
+    filtered_reduced = current_reduced[filtered_indices]
+                       ~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^
+IndexError: index 5000 is out of bounds for axis 0 with size 5000
+Repo card metadata block was not found. Setting CardData to empty.
+INFO:     127.0.0.1:55737 - "GET /api/model-count/current?use_models_page=true&use_dataset_snapshot=true&use_cache=true HTTP/1.1" 200 OK
+/opt/homebrew/Cellar/[email protected]/3.13.7/Frameworks/Python.framework/Versions/3.13/lib/python3.13/multiprocessing/resource_tracker.py:324: UserWarning: resource_tracker: There appear to be 1 leaked semaphore objects to clean up at shutdown: {'/loky-31410-uhk6grf9'}
+  warnings.warn(

backend_full_processing.log

@@ -0,0 +1,5 @@
+INFO:     Started server process [37417]
+INFO:     Waiting for application startup.
+Repo card metadata block was not found. Setting CardData to empty.
+
+  warnings.warn(

deploy/backend-Procfile

@@ -1,2 +1,2 @@
-web: python backend/api.py
+web: cd backend && uvicorn api.main:app --host 0.0.0.0 --port $PORT
 

deploy/fly.toml

@@ -0,0 +1,33 @@
+# Fly.io deployment configuration
+app = "hf-viz-backend"
+primary_region = "sjc"  # San Jose, change to your preferred region
+
+[build]
+  dockerfile = "Dockerfile"
+
+[env]
+  PORT = "8000"
+  SAMPLE_SIZE = "5000"
+
+[http_service]
+  internal_port = 8000
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 0  # Scale to zero when idle
+  
+  [[http_service.checks]]
+    grace_period = "10s"
+    interval = "30s"
+    method = "GET"
+    timeout = "5s"
+    path = "/docs"
+
+[[vm]]
+  memory = "512mb"
+  cpu_kind = "shared"
+  cpus = 1
+
+
+
+

deploy/nginx.conf

@@ -0,0 +1,158 @@
+# Nginx reverse proxy configuration for HF Viz
+# Provides caching, compression, and load balancing
+
+upstream hfviz_backend {
+    server localhost:8000;
+    # Add more backend servers for load balancing
+    # server localhost:8001;
+    # server localhost:8002;
+    keepalive 32;
+}
+
+# Cache configuration
+proxy_cache_path /var/cache/nginx/hfviz
+    levels=1:2
+    keys_zone=hfviz_cache:100m
+    max_size=10g
+    inactive=60m
+    use_temp_path=off;
+
+server {
+    listen 80;
+    listen [::]:80;
+    server_name api.hfviz.example.com;  # Change to your domain
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1000;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/json
+        application/javascript
+        application/xml+rss
+        application/msgpack;
+    
+    # Security headers
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # CORS headers (if needed)
+    add_header Access-Control-Allow-Origin "*" always;
+    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
+    add_header Access-Control-Allow-Headers "Origin, Content-Type, Accept, Authorization" always;
+    add_header Access-Control-Expose-Headers "Cache-Control, Content-Type" always;
+    
+    # Handle preflight requests
+    if ($request_method = OPTIONS) {
+        return 204;
+    }
+
+    # Proxy settings
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+
+    # Cache static API responses (GET only)
+    location /api/models {
+        proxy_pass http://hfviz_backend;
+        
+        # Enable caching for this endpoint
+        proxy_cache hfviz_cache;
+        proxy_cache_key "$request_method$request_uri";
+        proxy_cache_valid 200 5m;
+        proxy_cache_valid 404 1m;
+        proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
+        proxy_cache_background_update on;
+        proxy_cache_lock on;
+        
+        # Show cache status in response header
+        add_header X-Cache-Status $upstream_cache_status;
+        
+        # Bypass cache for authenticated requests
+        proxy_cache_bypass $http_authorization;
+        proxy_no_cache $http_authorization;
+    }
+
+    location /api/stats {
+        proxy_pass http://hfviz_backend;
+        
+        proxy_cache hfviz_cache;
+        proxy_cache_valid 200 10m;
+        add_header X-Cache-Status $upstream_cache_status;
+    }
+
+    # No caching for search/dynamic endpoints
+    location /api/search {
+        proxy_pass http://hfviz_backend;
+        proxy_cache off;
+    }
+
+    location /api/model/ {
+        proxy_pass http://hfviz_backend;
+        
+        # Light caching for model details
+        proxy_cache hfviz_cache;
+        proxy_cache_valid 200 10m;
+        add_header X-Cache-Status $upstream_cache_status;
+    }
+
+    # No caching for write operations
+    location ~ ^/api/.*/record$ {
+        proxy_pass http://hfviz_backend;
+        proxy_cache off;
+    }
+
+    # Default proxy for all other API endpoints
+    location /api/ {
+        proxy_pass http://hfviz_backend;
+        
+        # Timeouts for slow operations
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+    }
+
+    # Health check endpoint
+    location /health {
+        proxy_pass http://hfviz_backend/;
+        access_log off;
+    }
+
+    # API docs
+    location /docs {
+        proxy_pass http://hfviz_backend/docs;
+    }
+
+    # Cache purge endpoint (restrict to localhost)
+    location /purge {
+        allow 127.0.0.1;
+        deny all;
+        proxy_cache_purge hfviz_cache "$request_method$request_uri";
+    }
+}
+
+# SSL configuration (if using HTTPS)
+# server {
+#     listen 443 ssl http2;
+#     listen [::]:443 ssl http2;
+#     server_name api.hfviz.example.com;
+#
+#     ssl_certificate /path/to/cert.pem;
+#     ssl_certificate_key /path/to/key.pem;
+#     ssl_protocols TLSv1.2 TLSv1.3;
+#     ssl_ciphers HIGH:!aNULL:!MD5;
+#     
+#     # ... (same location blocks as above)
+# }
+
+
+

deploy/railway.json

@@ -2,10 +2,10 @@
   "$schema": "https://railway.app/railway.schema.json",
   "build": {
     "builder": "NIXPACKS",
-    "buildCommand": "pip install -r requirements.txt && pip install -r backend/requirements.txt"
+    "buildCommand": "pip install -r requirements.txt"
   },
   "deploy": {
-    "startCommand": "cd backend && python api.py",
+    "startCommand": "cd backend && uvicorn api.main:app --host 0.0.0.0 --port $PORT",
     "restartPolicyType": "ON_FAILURE",
     "restartPolicyMaxRetries": 10
   }

deploy/render.yaml

@@ -2,14 +2,16 @@ services:
   - type: web
     name: hf-viz-backend
     env: python
-    buildCommand: pip install -r backend/requirements.txt
-    startCommand: cd backend && python api.py
+    buildCommand: pip install -r requirements.txt
+    startCommand: cd backend && uvicorn api.main:app --host 0.0.0.0 --port $PORT
     envVars:
       - key: PORT
         value: 8000
+      - key: SAMPLE_SIZE
+        value: 5000
       - key: FRONTEND_URL
         sync: false  # Set this to your Netlify frontend URL
     plan: starter  # Adjust based on your needs (starter, standard, pro)
     region: oregon  # Choose your preferred region
-    healthCheckPath: /
+    healthCheckPath: /docs
 

deploy_railway.sh

@@ -0,0 +1,50 @@
+#!/bin/bash
+# Quick deployment script for Railway
+
+echo "🚂 Deploying HF Viz Backend to Railway..."
+echo ""
+
+# Check if Railway CLI is installed
+if ! command -v railway &> /dev/null; then
+    echo "❌ Railway CLI not found. Installing..."
+    npm install -g @railway/cli
+fi
+
+# Login to Railway
+echo "📝 Please login to Railway..."
+railway login
+
+# Initialize project if needed
+if [ ! -f "railway.json" ]; then
+    echo "🎬 Initializing Railway project..."
+    railway init
+fi
+
+# Deploy
+echo "🚀 Deploying..."
+railway up
+
+# Set environment variables
+echo "⚙️  Setting environment variables..."
+railway variables set SAMPLE_SIZE=5000
+railway variables set PORT=8000
+
+# Generate domain
+echo "🌐 Setting up domain..."
+railway domain
+
+# Get the URL
+echo ""
+echo "✅ Deployment complete!"
+echo ""
+echo "📋 Next steps:"
+echo "1. Copy the URL shown above"
+echo "2. Update frontend/src/config/api.ts with this URL"
+echo "3. Redeploy frontend to Netlify"
+echo ""
+echo "🔍 Check logs with: railway logs"
+echo "🌐 Open dashboard: railway open"
+
+
+
+

docker-compose.yml

@@ -0,0 +1,73 @@
+# Docker Compose configuration for HF Viz with Redis
+
+version: '3.8'
+
+services:
+  redis:
+    image: redis:7-alpine
+    container_name: hfviz-redis
+    restart: unless-stopped
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    command: redis-server --appendonly yes --maxmemory 512mb --maxmemory-policy allkeys-lru
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 3s
+      retries: 3
+
+  backend:
+    build:
+      context: ..
+      dockerfile: Dockerfile
+    container_name: hfviz-backend
+    restart: unless-stopped
+    ports:
+      - "8000:8000"
+    environment:
+      - PORT=8000
+      - SAMPLE_SIZE=5000
+      - REDIS_ENABLED=true
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+      - REDIS_TTL=300
+      - FRONTEND_URL=http://localhost:3000
+    depends_on:
+      redis:
+        condition: service_healthy
+    volumes:
+      - ../cache:/app/cache
+      - ../precomputed_data:/app/precomputed_data
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  nginx:
+    image: nginx:alpine
+    container_name: hfviz-nginx
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+      - nginx_cache:/var/cache/nginx
+    depends_on:
+      - backend
+    healthcheck:
+      test: ["CMD", "wget", "-q", "--spider", "http://localhost/health"]
+      interval: 10s
+      timeout: 3s
+      retries: 3
+
+volumes:
+  redis_data:
+    driver: local
+  nginx_cache:
+    driver: local
+
+
+

frontend/package-lock.json

@@ -27,13 +27,23 @@
         "@visx/visx": "^3.0.0",
         "ajv": "^8.17.1",
         "axios": "^1.6.0",
+        "comlink": "^4.4.1",
         "d3": "^7.8.5",
+        "idb": "^8.0.0",
+        "msgpack-lite": "^0.1.26",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "react-virtualized-auto-sizer": "^1.0.24",
+        "react-window": "^1.8.10",
         "three": "^0.160.1",
         "typescript": "^5.0.0",
         "zustand": "^5.0.8"
+      },
+      "devDependencies": {
+        "@types/msgpack-lite": "^0.1.11",
+        "@types/react-virtualized-auto-sizer": "^1.0.4",
+        "@types/react-window": "^1.8.8"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -4225,6 +4235,16 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
       "license": "MIT"
     },
+    "node_modules/@types/msgpack-lite": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@types/msgpack-lite/-/msgpack-lite-0.1.12.tgz",
+      "integrity": "sha512-DzYHfFOxK1UCm3pErFyGCQzsNYjcy1chCtO5bLdvL0IbD6L0l0IZzYMHvFAmEDLJ+k6XJosY0WKKmjkOBu9gKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "24.10.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
@@ -4313,6 +4333,26 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-virtualized-auto-sizer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.4.tgz",
+      "integrity": "sha512-nhYwlFiYa8M3S+O2T9QO/e1FQUYMr/wJENUdf/O0dhRi1RS/93rjrYQFYdbUqtdFySuhrtnEDX29P6eKOttY+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -7160,6 +7200,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comlink": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/comlink/-/comlink-4.4.2.tgz",
+      "integrity": "sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==",
+      "license": "Apache-2.0"
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -9681,6 +9727,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-lite": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/event-lite/-/event-lite-0.1.3.tgz",
+      "integrity": "sha512-8qz9nOz5VeD2z96elrEKD2U433+L3DWdUdDkOINLGOJvx1GsMBbMn0aCeu28y8/e85A6mCigBiFlYMnTBEGlSw==",
+      "license": "MIT"
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -11126,9 +11178,9 @@
       }
     },
     "node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
+      "integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==",
       "license": "ISC"
     },
     "node_modules/identity-obj-proxy": {
@@ -11264,6 +11316,12 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
+    "node_modules/int64-buffer": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/int64-buffer/-/int64-buffer-0.1.10.tgz",
+      "integrity": "sha512-v7cSY1J8ydZ0GyjUHqF+1bshJ6cnEVLo9EnjB8p+4HDRPZc9N5jjmvUV7NvEsqQOKyH0pmIBFWXVQbiS0+OBbA==",
+      "license": "MIT"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -13400,6 +13458,12 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -13583,6 +13647,27 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/msgpack-lite": {
+      "version": "0.1.26",
+      "resolved": "https://registry.npmjs.org/msgpack-lite/-/msgpack-lite-0.1.26.tgz",
+      "integrity": "sha512-SZ2IxeqZ1oRFGo0xFGbvBJWMp3yLIY9rlIJyxy8CGrwZn1f0ZK4r6jV/AM1r0FZMDUkWkglOk/eeKIL9g77Nxw==",
+      "license": "MIT",
+      "dependencies": {
+        "event-lite": "^0.1.1",
+        "ieee754": "^1.1.8",
+        "int64-buffer": "^0.1.9",
+        "isarray": "^1.0.0"
+      },
+      "bin": {
+        "msgpack": "bin/msgpack"
+      }
+    },
+    "node_modules/msgpack-lite/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/multicast-dns": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
@@ -16168,6 +16253,33 @@
         }
       }
     },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-window": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19382,6 +19494,12 @@
         "workbox-core": "6.6.0"
       }
     },
+    "node_modules/workbox-background-sync/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
     "node_modules/workbox-broadcast-update": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.6.0.tgz",
@@ -19519,6 +19637,12 @@
         "workbox-core": "6.6.0"
       }
     },
+    "node_modules/workbox-expiration/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
     "node_modules/workbox-google-analytics": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",

frontend/package.json

@@ -23,14 +23,24 @@
     "@visx/visx": "^3.0.0",
     "ajv": "^8.17.1",
     "axios": "^1.6.0",
+    "comlink": "^4.4.1",
     "d3": "^7.8.5",
+    "idb": "^8.0.0",
+    "msgpack-lite": "^0.1.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
     "three": "^0.160.1",
     "typescript": "^5.0.0",
     "zustand": "^5.0.8"
   },
+  "devDependencies": {
+    "@types/msgpack-lite": "^0.1.11",
+    "@types/react-virtualized-auto-sizer": "^1.0.4",
+    "@types/react-window": "^1.8.8"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

frontend/public/index.html

@@ -8,9 +8,6 @@
       name="description"
       content="Anatomy of a Machine Learning Ecosystem: 2 Million Models on Hugging Face. Analysis of 1.86 million models on Hugging Face, revealing fine-tuning lineages and model family structures using evolutionary biology methods."
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
     <title>Anatomy of a Machine Learning Ecosystem: 2 Million Models on Hugging Face</title>
   </head>
   <body>

frontend/src/App.css

@@ -1,764 +1,770 @@
-.App {
-  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  letter-spacing: normal;
-  font-variant-ligatures: common-ligatures;
-}
-
-.App-header {
-  background: #2d2d2d;
-  color: #ffffff;
-  padding: 2.5rem 2rem;
-  text-align: center;
-  border-bottom: 1px solid #404040;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  position: relative;
-}
-
-
-.App-header h1 {
-  margin: 0 0 1rem 0;
-  font-size: 2rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  line-height: 1.3;
-  color: #ffffff;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.App-header p {
-  margin: 0;
-  opacity: 0.95;
-  line-height: 1.6;
-  position: relative;
-  z-index: 1;
-}
-
-.App-header a {
-  color: #64b5f6;
-  text-decoration: none;
-  transition: all 0.2s;
-  font-weight: 500;
-  border-bottom: 1px solid transparent;
-}
-
-.App-header a:hover {
-  color: #90caf9;
-  border-bottom-color: #90caf9;
-}
-
-.stats {
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-  margin-top: 2rem;
-  font-size: 0.95rem;
-  flex-wrap: wrap;
-  position: relative;
-  z-index: 1;
-}
-
-.stats span {
-  padding: 0.625rem 1.25rem;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  transition: all 0.2s ease;
-  font-weight: 500;
-}
-
-.stats span:hover {
-  background: rgba(255, 255, 255, 0.15);
-  transform: translateY(-1px);
-}
-
-.main-content {
-  display: flex;
-  height: calc(100vh - 200px);
-}
-
-.sidebar {
-  width: 340px;
-  padding: 1.5rem;
-  background: #fafafa;
-  overflow-y: auto;
-  border-right: 1px solid #e0e0e0;
-}
-
-.sidebar h2 {
-  margin-top: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1a1a1a;
-  letter-spacing: -0.01em;
-}
-
-.sidebar h3 {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #2d2d2d;
-  margin: 0 0 0.875rem 0;
-  letter-spacing: -0.01em;
-}
-
-.sidebar label {
-  display: block;
-  margin-bottom: 1.25rem;
-  font-weight: 500;
-}
-
-.sidebar input[type="text"],
-.sidebar select {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  margin-top: 0.5rem;
-  border: 2px solid #e8e8e8;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-family: 'Instrument Sans', sans-serif;
-  background: #ffffff;
-  color: #1a1a1a;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.sidebar input[type="text"]:hover,
-.sidebar select:hover {
-  border-color: #d0d0d0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-}
-
-.sidebar input[type="text"]:focus,
-.sidebar select:focus {
-  outline: none;
-  border-color: #4a4a4a;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
-}
-
-.sidebar input[type="range"] {
-  width: 100%;
-  margin-top: 0.75rem;
-  height: 6px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: linear-gradient(to right, #e8e8e8 0%, #e8e8e8 100%);
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.sidebar input[type="range"]:hover {
-  background: linear-gradient(to right, #d8d8d8 0%, #d8d8d8 100%);
-}
-
-.sidebar input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #4a4a4a;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  transition: all 0.2s ease;
-  border: 2px solid #ffffff;
-}
-
-.sidebar input[type="range"]::-webkit-slider-thumb:hover {
-  background: #2d2d2d;
-  transform: scale(1.1);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-}
-
-.sidebar input[type="range"]::-webkit-slider-thumb:active {
-  transform: scale(1.1);
-}
-
-.sidebar input[type="range"]::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #4a4a4a;
-  cursor: pointer;
-  border: 2px solid #ffffff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  transition: all 0.2s ease;
-}
-
-.sidebar input[type="range"]::-moz-range-thumb:hover {
-  background: #2d2d2d;
-  transform: scale(1.1);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-}
-
-.sidebar input[type="range"]::-moz-range-thumb:active {
-  transform: scale(1.1);
-}
-
-.sidebar input[type="range"]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 6px;
-  background: transparent;
-  border-radius: 3px;
-}
-
-.sidebar input[type="range"]::-moz-range-track {
-  width: 100%;
-  height: 6px;
-  background: transparent;
-  border-radius: 3px;
-}
-
-.sidebar label {
-  transition: all 0.2s ease;
-}
-
-.sidebar-section {
-  background: #ffffff;
-  border-radius: 6px;
-  padding: 1.25rem;
-  margin-bottom: 1rem;
-  border: 1px solid #e0e0e0;
-  transition: all 0.2s ease;
-}
-
-.sidebar-section:hover {
-  border-color: #d0d0d0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.filter-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.4rem 0.75rem;
-  background: #e3f2fd;
-  color: #1976d2;
-  border-radius: 16px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  border: 1px solid #90caf9;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.filter-chip:hover {
-  background: #bbdefb;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.filter-chip.active {
-  background: #1976d2;
-  color: white;
-  border-color: #1976d2;
-}
-
-.filter-chip .remove {
-  cursor: pointer;
-  font-weight: bold;
-  opacity: 0.7;
-  transition: opacity 0.2s;
-}
-
-.filter-chip .remove:hover {
-  opacity: 1;
-}
-
-.visualization {
-  flex: 1;
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff;
-  overflow: auto;
-  transition: all 0.3s ease;
-  position: relative;
-}
-
-.visualization > * {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.visualization svg {
-  display: block;
-  background: #ffffff;
-}
-
-.loading,
-.error,
-.empty {
-  text-align: center;
-  padding: 4rem 2.5rem;
-  font-size: 1.1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  border-radius: 12px;
-  animation: fadeIn 0.4s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.loading {
-  color: #2d2d2d;
-  font-weight: 600;
-  background: #f5f5f5;
-  border: 1px solid #d0d0d0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.loading::after {
-  content: '';
-  width: 40px;
-  height: 40px;
-  border: 4px solid #e0e0e0;
-  border-top-color: #4a4a4a;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.error {
-  color: #d32f2f;
-  background: #ffebee;
-  border-radius: 8px;
-  border: 1px solid #ffcdd2;
-  max-width: 550px;
-  margin: 0 auto;
-  font-weight: 500;
-}
-
-.empty {
-  color: #6a6a6a;
-  background: #f5f5f5;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  max-width: 550px;
-  margin: 0 auto;
-  font-weight: 500;
-}
-
-.btn {
-  padding: 0.625rem 1.25rem;
-  border-radius: 4px;
-  border: none;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: 'Instrument Sans', sans-serif;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-
-.btn-primary {
-  background: #2d2d2d;
-  color: white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-.btn-primary:hover {
-  background: #1a1a1a;
-  transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-}
-
-.btn-secondary {
-  background: #f5f5f5;
-  color: #2d2d2d;
-  border: 1px solid #d0d0d0;
-}
-
-.btn-secondary:hover {
-  background: #e8e8e8;
-  border-color: #b0b0b0;
-}
-
-.btn-small {
-  padding: 0.4rem 0.875rem;
-  font-size: 0.85rem;
-  border-radius: 5px;
-}
-
-.collapsible-section {
-  margin-bottom: 1rem;
-}
-
-.collapsible-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  padding: 0.75rem;
-  background: #f5f5f5;
-  border-radius: 6px;
-  transition: all 0.2s;
-  user-select: none;
-}
-
-.collapsible-header:hover {
-  background: #eeeeee;
-}
-
-.collapsible-header h3 {
-  margin: 0;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #2a2a2a;
-}
-
-.collapsible-content {
-  padding: 1rem 0.75rem;
-  animation: slideDown 0.2s ease-out;
-}
-
-@keyframes slideDown {
-  from {
+/* ============================================
+   ROOT & VARIABLES
+   ============================================ */
+   :root {
+    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --font-mono: 'Monaco', 'Menlo', monospace;
+    
+    /* Light theme (default) */
+    --bg-primary: #ffffff;
+    --bg-secondary: #fafafa;
+    --bg-tertiary: #f5f5f5;
+    --bg-elevated: #ffffff;
+    
+    --text-primary: #1a1a1a;
+    --text-secondary: #666666;
+    --text-tertiary: #999999;
+    
+    --border-light: #e8e8e8;
+    --border-medium: #d0d0d0;
+    --border-dark: #b0b0b0;
+    
+    --accent-primary: #2d2d2d;
+    --accent-hover: #1a1a1a;
+    --accent-blue: #4a90e2;
+    --accent-blue-hover: #357abd;
+    
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.12);
+    
+    --radius-sm: 0;
+    --radius-md: 0;
+    --radius-lg: 0;
+    --radius-full: 0;
+    
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  [data-theme="dark"] {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --bg-tertiary: #3a3a3a;
+    --bg-elevated: #2d2d2d;
+    
+    --text-primary: #ffffff;
+    --text-secondary: #cccccc;
+    --text-tertiary: #999999;
+    
+    --border-light: #3a3a3a;
+    --border-medium: #444444;
+    --border-dark: #555555;
+    
+    --accent-primary: #4a4a4a;
+    --accent-hover: #5a5a5a;
+  }
+  
+  /* ============================================
+     BASE STYLES
+     ============================================ */
+  .App {
+    font-family: var(--font-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: var(--text-primary);
+    background: var(--bg-secondary);
+  }
+  
+  /* ============================================
+     HEADER
+     ============================================ */
+  .App-header {
+    background: var(--accent-primary);
+    color: var(--text-primary);
+    padding: 1rem 2rem;
+    border-bottom: 1px solid var(--border-medium);
+    box-shadow: var(--shadow-md);
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .App-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    color: #ffffff;
+  }
+  
+  .App-header a {
+    color: #64b5f6;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all var(--transition-base);
+  }
+  
+  .App-header a:hover {
+    color: #90caf9;
+  }
+  
+  .stats {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+    flex-wrap: wrap;
+  }
+  
+  .stats span {
+    padding: 0.5rem 0.875rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    font-weight: 500;
+    transition: all var(--transition-base);
+  }
+  
+  .stats span:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+  
+  /* ============================================
+     LAYOUT
+     ============================================ */
+  .main-content {
+    display: flex;
+    height: calc(100vh - 80px);
+  }
+  
+  .sidebar {
+    width: 340px;
+    padding: 1.5rem;
+    background: var(--bg-secondary);
+    overflow-y: auto;
+    border-right: 1px solid var(--border-light);
+  }
+  
+  .visualization {
+    flex: 1;
+    padding: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-primary);
+    overflow: auto;
+    position: relative;
+  }
+  
+  /* ============================================
+     SIDEBAR COMPONENTS
+     ============================================ */
+  .sidebar h2 {
+    margin-top: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--text-primary);
+  }
+  
+  .sidebar h3 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 0 0 0.875rem 0;
+    letter-spacing: -0.01em;
+    color: var(--text-primary);
+  }
+  
+  .sidebar-section {
+    background: var(--bg-elevated);
+    border-radius: 0;
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid var(--border-light);
+    transition: all var(--transition-base);
+  }
+  
+  .sidebar-section:hover {
+    border-color: var(--border-medium);
+    box-shadow: var(--shadow-sm);
+  }
+  
+  /* ============================================
+     FORM ELEMENTS
+     ============================================ */
+  .sidebar label {
+    display: block;
+    margin-bottom: 1.25rem;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+  
+  .sidebar input[type="text"],
+  .sidebar select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    margin-top: 0.5rem;
+    border: 2px solid var(--border-light);
+    border-radius: 0;
+    font-size: 0.9rem;
+    font-family: var(--font-primary);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .sidebar input[type="text"]:hover,
+  .sidebar select:hover {
+    border-color: var(--border-medium);
+    box-shadow: var(--shadow-md);
+  }
+  
+  .sidebar input[type="text"]:focus,
+  .sidebar select:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+  }
+  
+  /* Range Inputs */
+  .sidebar input[type="range"] {
+    width: 100%;
+    margin-top: 0.75rem;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--bg-tertiary);
+    border-radius: 0;
+    outline: none;
+    cursor: pointer;
+    transition: background var(--transition-base);
+  }
+  
+  .sidebar input[type="range"]:hover {
+    background: var(--border-medium);
+  }
+  
+  .sidebar input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 0;
+    background: var(--accent-primary);
+    cursor: pointer;
+    box-shadow: var(--shadow-md);
+    border: 2px solid var(--bg-primary);
+    transition: all var(--transition-base);
+  }
+  
+  .sidebar input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--accent-hover);
+    transform: scale(1.15);
+    box-shadow: var(--shadow-lg);
+  }
+  
+  .sidebar input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 0;
+    background: var(--accent-primary);
+    cursor: pointer;
+    border: 2px solid var(--bg-primary);
+    box-shadow: var(--shadow-md);
+    transition: all var(--transition-base);
+  }
+  
+  .sidebar input[type="range"]::-moz-range-thumb:hover {
+    background: var(--accent-hover);
+    transform: scale(1.15);
+    box-shadow: var(--shadow-lg);
+  }
+  
+  /* Checkbox */
+  .sidebar input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--accent-primary);
+    margin-right: 0.5rem;
+  }
+  
+  /* ============================================
+     BUTTONS
+     ============================================ */
+  .btn {
+    padding: 0.625rem 1.25rem;
+    border-radius: 0;
+    border: none;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: var(--font-primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: all var(--transition-base);
+  }
+  
+  .btn-primary {
+    background: var(--accent-primary);
+    color: white;
+    box-shadow: var(--shadow-md);
+  }
+  
+  .btn-primary:hover:not(:disabled) {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-lg);
+  }
+  
+  .btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-medium);
+  }
+  
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--bg-secondary);
+    border-color: var(--border-dark);
+  }
+  
+  .btn-small {
+    padding: 0.4rem 0.875rem;
+    font-size: 0.85rem;
+  }
+  
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .random-model-btn {
+    width: 100%;
+  }
+  
+  /* ============================================
+     CHIPS & FILTERS
+     ============================================ */
+  .filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.75rem;
+    background: #e3f2fd;
+    color: #1976d2;
+    border-radius: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    border: 1px solid #90caf9;
+    cursor: pointer;
+    transition: all var(--transition-base);
+  }
+  
+  .filter-chip:hover {
+    background: #bbdefb;
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .filter-chip.active {
+    background: #1976d2;
+    color: white;
+    border-color: #1976d2;
+  }
+  
+  .filter-chip .remove {
+    cursor: pointer;
+    font-weight: bold;
+    opacity: 0.7;
+    transition: opacity var(--transition-fast);
+  }
+  
+  .filter-chip .remove:hover {
+    opacity: 1;
+  }
+  
+  /* ============================================
+     CLUSTERS
+     ============================================ */
+  .cluster-filter-section {
+    margin-bottom: 1rem;
+  }
+  
+  .cluster-search {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: all var(--transition-base);
+  }
+  
+  .cluster-search:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+  }
+  
+  .cluster-buttons {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+  }
+  
+  .cluster-button {
+    padding: 0.35rem 0.75rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-family: var(--font-primary);
+    color: var(--text-primary);
+    transition: all var(--transition-base);
+  }
+  
+  .cluster-button:hover {
+    background: var(--bg-tertiary);
+  }
+  
+  .cluster-button.active {
+    background: var(--accent-blue);
+    color: white;
+    border-color: var(--accent-blue);
+  }
+  
+  .cluster-list {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--border-light);
+    border-radius: 0;
+    padding: 0.5rem;
+    background: var(--bg-primary);
+  }
+  
+  .cluster-item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    cursor: pointer;
+    border-radius: 0;
+    font-size: 0.85rem;
+    transition: background var(--transition-fast);
+  }
+  
+  .cluster-item:hover {
+    background: var(--bg-secondary);
+  }
+  
+  .cluster-item-label {
+    flex: 1;
+    color: var(--text-primary);
+  }
+  
+  .cluster-item-count {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin-left: auto;
+  }
+  
+  /* ============================================
+     COLLAPSIBLE SECTIONS
+     ============================================ */
+  .collapsible-section {
+    margin-bottom: 1rem;
+  }
+  
+  .collapsible-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.75rem;
+    background: var(--bg-tertiary);
+    border-radius: 0;
+    user-select: none;
+    transition: background var(--transition-base);
+  }
+  
+  .collapsible-header:hover {
+    background: var(--border-light);
+  }
+  
+  .collapsible-header h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  
+  .collapsible-content {
+    padding: 1rem 0.75rem;
+    animation: slideDown var(--transition-base) ease-out;
+  }
+  
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  /* ============================================
+     TOGGLES & SWITCHES
+     ============================================ */
+  .label-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    background: var(--bg-secondary);
+    border-radius: 0;
+    border: 1px solid var(--border-light);
+  }
+  
+  .label-toggle-label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+  
+  .label-toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+  }
+  
+  .label-toggle-switch input {
     opacity: 0;
-    transform: translateY(-10px);
+    width: 0;
+    height: 0;
+  }
+  
+  .label-toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: #ccc;
+    border-radius: 0;
+    transition: background-color var(--transition-slow);
+  }
+  
+  .label-toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    border-radius: 0;
+    transition: transform var(--transition-slow);
+  }
+  
+  .label-toggle-switch input:checked + .label-toggle-slider {
+    background-color: var(--accent-blue);
+  }
+  
+  .label-toggle-switch input:checked + .label-toggle-slider:before {
+    transform: translateX(20px);
+  }
+  
+  .theme-toggle {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    padding: 0.5rem;
+    cursor: pointer;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    height: 40px;
+    transition: all var(--transition-base);
   }
-  to {
+  
+  .theme-toggle:hover {
+    background: var(--bg-tertiary);
+    transform: scale(1.05);
+  }
+  
+  /* ============================================
+     ZOOM CONTROLS
+     ============================================ */
+  .zoom-slider-container {
+    margin-bottom: 1rem;
+  }
+  
+  .zoom-slider-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+  
+  .zoom-value {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+  }
+  
+  .zoom-slider {
+    width: 100%;
+    height: 6px;
+    border-radius: 0;
+    background: var(--bg-tertiary);
+    outline: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+  }
+  
+  .zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 0;
+    background: var(--accent-blue);
+    cursor: pointer;
+    transition: all var(--transition-base);
+  }
+  
+  .zoom-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
+  }
+  
+  .zoom-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 0;
+    background: var(--accent-blue);
+    cursor: pointer;
+    border: none;
+    transition: all var(--transition-base);
+  }
+  
+  .zoom-slider::-moz-range-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
+  }
+  
+  .zoom-slider:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  /* ============================================
+     STATE MESSAGES
+     ============================================ */
+  .loading,
+  .error,
+  .empty {
+    text-align: center;
+    padding: 4rem 2.5rem;
+    font-size: 1.1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    border-radius: 0;
+    max-width: 550px;
+    margin: 0 auto;
+    animation: fadeIn 0.4s ease-in-out;
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .loading {
+    color: var(--text-primary);
+    font-weight: 600;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-medium);
+    box-shadow: var(--shadow-md);
+  }
+  
+  .loading::after {
+    content: '';
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--border-light);
+    border-top-color: var(--accent-primary);
+    border-radius: 0;
+    animation: spin 0.8s linear infinite;
+  }
+  
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .error {
+    color: #d32f2f;
+    background: #ffebee;
+    border: 1px solid #ffcdd2;
+    font-weight: 500;
+  }
+  
+  .empty {
+    color: var(--text-secondary);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-light);
+    font-weight: 500;
+  }
+  
+  /* ============================================
+     TOOLTIP
+     ============================================ */
+  .tooltip {
+    position: relative;
+    cursor: help;
+  }
+  
+  .tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem 0.75rem;
+    background: var(--text-primary);
+    color: var(--bg-primary);
+    border-radius: 0;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-base);
+    z-index: 1000;
+  }
+  
+  .tooltip:hover::after {
     opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.tooltip {
-  position: relative;
-  cursor: help;
-}
-
-.tooltip::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0.5rem 0.75rem;
-  background: #1a1a1a;
-  color: white;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s;
-  z-index: 1000;
-  margin-bottom: 0.5rem;
-}
-
-.tooltip:hover::after {
-  opacity: 1;
-}
-
-/* Theme Support */
-[data-theme="dark"] {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2d2d2d;
-  --bg-tertiary: #3a3a3a;
-  --text-primary: #ffffff;
-  --text-secondary: #cccccc;
-  --border-color: #444444;
-  --accent-color: #4a4a4a;
-}
-
-[data-theme="light"] {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f5f5f5;
-  --bg-tertiary: #e8e8e8;
-  --text-primary: #1a1a1a;
-  --text-secondary: #666666;
-  --border-color: #d0d0d0;
-  --accent-color: #4a4a4a;
-}
-
-/* Random Model Button */
-.random-model-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.625rem 1.25rem;
-  background: #2d2d2d;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-family: 'Instrument Sans', sans-serif;
-  font-weight: 600;
-  transition: all 0.2s;
-  width: 100%;
-}
-
-.random-model-btn:hover:not(:disabled) {
-  background: #1a1a1a;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-}
-
-.random-model-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Zoom Slider */
-.zoom-slider-container {
-  margin-bottom: 1rem;
-}
-
-.zoom-slider-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.zoom-value {
-  font-size: 0.85rem;
-  color: var(--text-secondary, #666);
-  font-family: 'Monaco', 'Menlo', monospace;
-}
-
-.zoom-slider {
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: var(--bg-tertiary, #e8e8e8);
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.zoom-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--accent-color, #4a90e2);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.zoom-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
-}
-
-.zoom-slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--accent-color, #4a90e2);
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s;
-}
-
-.zoom-slider::-moz-range-thumb:hover {
-  transform: scale(1.2);
-  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
-}
-
-.zoom-slider:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Theme Toggle */
-.theme-toggle {
-  background: var(--bg-secondary, #f5f5f5);
-  border: 1px solid var(--border-color, #d0d0d0);
-  border-radius: 4px;
-  padding: 0.5rem;
-  cursor: pointer;
-  font-size: 1.2rem;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 40px;
-  height: 40px;
-}
-
-.theme-toggle:hover {
-  background: var(--bg-tertiary, #e8e8e8);
-  transform: scale(1.05);
-}
-
-/* Label Toggle */
-.label-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: var(--bg-secondary, #f5f5f5);
-  border-radius: 4px;
-  border: 1px solid var(--border-color, #e0e0e0);
-}
-
-.label-toggle-label {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.label-toggle-switch {
-  position: relative;
-  width: 44px;
-  height: 24px;
-}
-
-.label-toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.label-toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: 0.3s;
-  border-radius: 24px;
-}
-
-.label-toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-.label-toggle-switch input:checked + .label-toggle-slider {
-  background-color: var(--accent-color, #4a90e2);
-}
-
-.label-toggle-switch input:checked + .label-toggle-slider:before {
-  transform: translateX(20px);
-}
-
-/* Cluster Filtering */
-.cluster-filter-section {
-  margin-bottom: 1rem;
-}
-
-.cluster-search {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--border-color, #d0d0d0);
-  border-radius: 4px;
-  font-size: 0.85rem;
-  margin-bottom: 0.5rem;
-  background: var(--bg-primary, #ffffff);
-  color: var(--text-primary, #1a1a1a);
-}
-
-.cluster-search:focus {
-  outline: none;
-  border-color: var(--accent-color, #4a90e2);
-  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
-}
-
-.cluster-buttons {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.cluster-button {
-  padding: 0.35rem 0.75rem;
-  background: var(--bg-secondary, #f5f5f5);
-  border: 1px solid var(--border-color, #d0d0d0);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-family: 'Instrument Sans', sans-serif;
-  transition: all 0.2s;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.cluster-button:hover {
-  background: var(--bg-tertiary, #e8e8e8);
-}
-
-.cluster-button.active {
-  background: var(--accent-color, #4a90e2);
-  color: white;
-  border-color: var(--accent-color, #4a90e2);
-}
-
-.cluster-list {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 4px;
-  padding: 0.5rem;
-  background: var(--bg-primary, #ffffff);
-}
-
-.cluster-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  cursor: pointer;
-  border-radius: 3px;
-  transition: background 0.15s;
-  font-size: 0.85rem;
-}
-
-.cluster-item:hover {
-  background: var(--bg-secondary, #f5f5f5);
-}
-
-.sidebar input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  accent-color: #4a4a4a;
-  margin-right: 0.5rem;
-}
-
-.cluster-item input[type="checkbox"] {
-  margin-right: 0.5rem;
-  cursor: pointer;
-}
-
-.cluster-item-label {
-  flex: 1;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.cluster-item-count {
-  font-size: 0.75rem;
-  color: var(--text-secondary, #666);
-  margin-left: auto;
-}
-
+  }
+  
+  /* ============================================
+     VISUALIZATION
+     ============================================ */
+  .visualization > * {
+    transition: opacity var(--transition-slow), transform var(--transition-slow);
+  }
+  
+  .visualization svg {
+    display: block;
+    background: var(--bg-primary);
+  }

frontend/src/App.tsx

@@ -1,30 +1,31 @@
-import React, { useState, useEffect, useCallback, useRef, useMemo, lazy, Suspense } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 // Visualizations
-import EnhancedScatterPlot from './components/visualizations/EnhancedScatterPlot';
+import ScatterPlot from './components/visualizations/ScatterPlot';
+import ScatterPlot3D from './components/visualizations/ScatterPlot3D';
 import NetworkGraph from './components/visualizations/NetworkGraph';
-import UVProjectionSquare from './components/visualizations/UVProjectionSquare';
 import DistributionView from './components/visualizations/DistributionView';
-import StackedView from './components/visualizations/StackedView';
-import HeatmapView from './components/visualizations/HeatmapView';
 // Controls
 import RandomModelButton from './components/controls/RandomModelButton';
 import ZoomSlider from './components/controls/ZoomSlider';
 import ThemeToggle from './components/controls/ThemeToggle';
-import RenderingStyleSelector from './components/controls/RenderingStyleSelector';
-import VisualizationModeButtons from './components/controls/VisualizationModeButtons';
-import ClusterFilter, { Cluster } from './components/controls/ClusterFilter';
+// import RenderingStyleSelector from './components/controls/RenderingStyleSelector';
+// import VisualizationModeButtons from './components/controls/VisualizationModeButtons';
+// import ClusterFilter from './components/controls/ClusterFilter';
+import type { Cluster } from './components/controls/ClusterFilter';
 import NodeDensitySlider from './components/controls/NodeDensitySlider';
 // Modals
 import ModelModal from './components/modals/ModelModal';
 // UI Components
 import LiveModelCount from './components/ui/LiveModelCount';
-import ModelTooltip from './components/ui/ModelTooltip';
+// import ModelTooltip from './components/ui/ModelTooltip';
 import ErrorBoundary from './components/ui/ErrorBoundary';
+import VirtualSearchResults from './components/ui/VirtualSearchResults';
 // Types & Utils
 import { ModelPoint, Stats, FamilyTree, SearchResult, SimilarModel } from './types';
 import cache, { IndexedDBCache } from './utils/data/indexedDB';
 import { debounce } from './utils/debounce';
 import requestManager from './utils/api/requestManager';
+import { fetchWithMsgPack, decodeModelsMsgPack } from './utils/api/msgpackDecoder';
 import { useFilterStore, ViewMode, ColorByOption, SizeByOption } from './stores/filterStore';
 import { API_BASE } from './config/api';
 import './App.css';
@@ -37,8 +38,6 @@ const logger = {
   },
 };
 
-const ScatterPlot3D = lazy(() => import('./components/visualizations/ScatterPlot3D'));
-
 function App() {
   // Filter store state
   const {
@@ -48,8 +47,8 @@ function App() {
     colorScheme,
     showLabels,
     zoomLevel,
-    nodeDensity,
-    renderingStyle,
+    // nodeDensity,
+    // renderingStyle,
     theme,
     selectedClusters,
     searchQuery,
@@ -61,9 +60,9 @@ function App() {
     setColorScheme,
     setShowLabels,
     setZoomLevel,
-    setNodeDensity,
-    setRenderingStyle,
-    setSelectedClusters,
+    // setNodeDensity,
+    // setRenderingStyle,
+    // setSelectedClusters,
     setSearchQuery,
     setMinDownloads,
     setMinLikes,
@@ -93,7 +92,7 @@ function App() {
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [searchInput, setSearchInput] = useState('');
   const [showSearchResults, setShowSearchResults] = useState(false);
-  const [viewCenter, setViewCenter] = useState<{ x: number; y: number; z: number } | null>(null);
+  // const [viewCenter, setViewCenter] = useState<{ x: number; y: number; z: number } | null>(null);
   const [projectionMethod, setProjectionMethod] = useState<'umap' | 'tsne'>('umap');
   const [bookmarkedModels, setBookmarkedModels] = useState<string[]>([]);
   const [comparisonModels, setComparisonModels] = useState<ModelPoint[]>([]);
@@ -178,11 +177,19 @@ function App() {
           projection_method: projectionMethod,
         });
         const url = `${API_BASE}/api/models/semantic-similarity?${params}`;
-        const response = await requestManager.fetch(url, {}, cacheKey);
-        if (!response.ok) throw new Error('Failed to fetch similar models');
-        const result = await response.json();
-        models = result.models || [];
-        count = models.length;
+        // Try MessagePack first, fallback to JSON
+        try {
+          const result = await fetchWithMsgPack<{ models: ModelPoint[] }>(url);
+          models = result.models || [];
+          count = models.length;
+        } catch (msgpackError) {
+          // Fallback to JSON
+          const response = await requestManager.fetch(url, {}, cacheKey);
+          if (!response.ok) throw new Error('Failed to fetch similar models');
+          const result = await response.json();
+          models = result.models || [];
+          count = models.length;
+        }
       } else {
         const params = new URLSearchParams({
           min_downloads: minDownloads.toString(),
@@ -197,21 +204,57 @@ function App() {
           params.append('search_query', searchQuery);
         }
         
-        params.append('max_points', '500000');
+        params.append('max_points', viewMode === '3d' ? '50000' : viewMode === 'scatter' ? '10000' : viewMode === 'network' ? '500' : '5000');
+        // Add format parameter for MessagePack support
+        params.append('format', 'msgpack');
 
         const url = `${API_BASE}/api/models?${params}`;
-        const response = await requestManager.fetch(url, {}, cacheKey);
-        if (!response.ok) throw new Error('Failed to fetch models');
-        const result = await response.json();
-        
-        if (Array.isArray(result)) {
-          models = result;
-          count = models.length;
-          setEmbeddingType('text-only');
-        } else {
-          models = result.models || [];
-          count = result.filtered_count ?? models.length;
-          setEmbeddingType(result.embedding_type || 'text-only');
+        // Try MessagePack first for better performance, fallback to JSON
+        try {
+          const response = await requestManager.fetch(url, {
+            headers: {
+              'Accept': 'application/msgpack',
+            },
+          }, cacheKey);
+          
+          if (!response.ok) throw new Error('Failed to fetch models');
+          
+          const contentType = response.headers.get('content-type');
+          if (contentType?.includes('application/msgpack')) {
+            // Decode MessagePack binary response (backend returns compact format array)
+            const buffer = await response.arrayBuffer();
+            models = decodeModelsMsgPack(new Uint8Array(buffer));
+            count = models.length;
+            setEmbeddingType('text-only'); // MessagePack response doesn't include metadata
+          } else {
+            // Response was JSON (backend may not support msgpack or returned JSON)
+            const result = await response.json();
+            if (Array.isArray(result)) {
+              models = result;
+              count = models.length;
+              setEmbeddingType('text-only');
+            } else {
+              models = result.models || [];
+              count = result.filtered_count ?? models.length;
+              setEmbeddingType(result.embedding_type || 'text-only');
+            }
+          }
+        } catch (error) {
+          // Fallback to JSON if MessagePack fails
+          const jsonUrl = url.replace('format=msgpack', 'format=json');
+          const response = await requestManager.fetch(jsonUrl, {}, cacheKey);
+          if (!response.ok) throw new Error('Failed to fetch models');
+          const result = await response.json();
+          
+          if (Array.isArray(result)) {
+            models = result;
+            count = models.length;
+            setEmbeddingType('text-only');
+          } else {
+            models = result.models || [];
+            count = result.filtered_count ?? models.length;
+            setEmbeddingType(result.embedding_type || 'text-only');
+          }
         }
       }
       
@@ -233,7 +276,7 @@ function App() {
       setLoading(false);
       fetchDataAbortRef.current = null;
     }
-  }, [minDownloads, minLikes, searchQuery, colorBy, sizeBy, projectionMethod, baseModelsOnly, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters]);
+  }, [minDownloads, minLikes, searchQuery, colorBy, sizeBy, projectionMethod, baseModelsOnly, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode]);
 
   const debouncedFetchData = useMemo(
     () => debounce(fetchData, 300),
@@ -258,15 +301,43 @@ function App() {
     };
   }, [minDownloads, minLikes, colorBy, sizeBy, baseModelsOnly, projectionMethod, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, debouncedFetchData]);
 
+  // Function to clear cache and refresh stats
+  const clearCacheAndRefresh = useCallback(async () => {
+    try {
+      // Clear all caches
+      await cache.clear('stats');
+      await cache.clear('models');
+      console.log('Cache cleared successfully');
+      
+      // Immediately fetch fresh stats
+      const response = await fetch(`${API_BASE}/api/stats`);
+      if (!response.ok) throw new Error('Failed to fetch stats');
+      const statsData = await response.json();
+      await cache.cacheStats('stats', statsData);
+      setStats(statsData);
+      
+      // Refresh model data
+      fetchData();
+    } catch (err) {
+      if (err instanceof Error) {
+        logger.error('Error clearing cache:', err);
+      }
+    }
+  }, [fetchData]);
+
   useEffect(() => {
     const fetchStats = async () => {
       const cacheKey = 'stats';
       const cachedStats = await cache.getCachedStats(cacheKey);
+      
+      // Always fetch fresh stats on initial load, ignore stale cache
+      // This fixes the issue of showing old data (1000 models) when backend has 5000
       if (cachedStats) {
+        // Show cached data temporarily
         setStats(cachedStats);
-        return;
       }
-
+      
+      // Always fetch fresh stats to update
       try {
         const response = await fetch(`${API_BASE}/api/stats`);
         if (!response.ok) throw new Error('Failed to fetch stats');
@@ -451,50 +522,54 @@ function App() {
     <ErrorBoundary>
       <div className="App">
       <header className="App-header">
-        <h1>Anatomy of a Machine Learning Ecosystem: 2 Million Models on Hugging Face</h1>
-        <p style={{ maxWidth: '900px', margin: '0 auto', lineHeight: '1.6' }}>
-          Many have observed that the development and deployment of generative machine learning (ML) and artificial intelligence (AI) models follow a distinctive pattern in which pre-trained models are adapted and fine-tuned for specific downstream tasks. However, there is limited empirical work that examines the structure of these interactions. This paper analyzes 1.86 million models on Hugging Face, a leading peer production platform for model development. Our study of model family trees reveals sprawling fine-tuning lineages that vary widely in size and structure. Using an evolutionary biology lens, we measure genetic similarity and mutation of traits over model families.
-          {' '}
-          <a 
-            href="https://arxiv.org/abs/2508.06811" 
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ color: 'white', textDecoration: 'underline', fontWeight: '500' }}
-          >
-            Read the full paper
-          </a>
-        </p>
-        <p style={{ marginTop: '1rem', fontSize: '0.9rem', opacity: 0.9, lineHeight: '1.6' }}>
-          <strong>Resources:</strong>{' '}
-          <a 
-            href="https://github.com/bendlaufer/ai-ecosystem" 
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ color: '#64b5f6', textDecoration: 'underline', marginRight: '1rem' }}
-          >
-            GitHub Repository
-          </a>
-          <a 
-            href="https://huggingface.co/modelbiome" 
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ color: '#64b5f6', textDecoration: 'underline' }}
-          >
-            Hugging Face Dataset
-          </a>
-        </p>
-        <p style={{ marginTop: '0.5rem', fontSize: '0.9rem', opacity: 0.9 }}>
-          <strong>Authors:</strong> Benjamin Laufer, Hamidah Oderinwale, Jon Kleinberg
-        </p>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center', width: '100%' }}>
-          <LiveModelCount compact={true} />
-          {stats && (
-            <div className="stats">
-              <span>Dataset Models: {stats.total_models.toLocaleString()}</span>
-              <span>Libraries: {stats.unique_libraries}</span>
-              <span>Task Types: {stats.unique_task_types ?? stats.unique_pipelines}</span>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem', width: '100%' }}>
+          <div style={{ flex: '1 1 auto', minWidth: '250px' }}>
+            <h1 style={{ margin: 0, fontSize: '1.5rem', fontWeight: '600', lineHeight: '1.2' }}>ML Ecosystem: 2M Models on Hugging Face</h1>
+            <div style={{ marginTop: '0.5rem', fontSize: '0.85rem', opacity: 0.9, display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+              <a href="https://arxiv.org/abs/2508.06811" target="_blank" rel="noopener noreferrer" style={{ color: '#64b5f6', textDecoration: 'none', whiteSpace: 'nowrap' }}>Paper</a>
+              <a href="https://github.com/bendlaufer/ai-ecosystem" target="_blank" rel="noopener noreferrer" style={{ color: '#64b5f6', textDecoration: 'none', whiteSpace: 'nowrap' }}>GitHub</a>
+              <a href="https://huggingface.co/modelbiome" target="_blank" rel="noopener noreferrer" style={{ color: '#64b5f6', textDecoration: 'none', whiteSpace: 'nowrap' }}>Dataset</a>
+              <span style={{ opacity: 0.7, whiteSpace: 'nowrap' }}>Laufer, Oderinwale, Kleinberg</span>
             </div>
-          )}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap', flexShrink: 0 }}>
+            <LiveModelCount compact={true} />
+            {stats && (
+              <>
+                <div className="stats" style={{ display: 'flex', gap: '0.5rem', fontSize: '0.8rem', flexWrap: 'wrap' }}>
+                  <span>{stats.total_models.toLocaleString()} models</span>
+                  <span>{stats.unique_libraries} libraries</span>
+                </div>
+                <button
+                  onClick={clearCacheAndRefresh}
+                  style={{
+                    background: 'rgba(255, 255, 255, 0.15)',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    borderRadius: '0',
+                    width: '32px',
+                    height: '32px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '16px',
+                    transition: 'all 0.2s ease',
+                    flexShrink: 0,
+                  }}
+                  onMouseOver={(e) => {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)';
+                  }}
+                  onMouseOut={(e) => {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+                  }}
+                  title="Refresh data and clear cache"
+                  aria-label="Refresh data"
+                >
+                  ⟳
+                </button>
+              </>
+            )}
+          </div>
         </div>
       </header>
 
@@ -522,7 +597,7 @@ function App() {
                 background: '#4a4a4a',
                 color: 'white', 
                 padding: '0.35rem 0.7rem', 
-                borderRadius: '12px',
+                borderRadius: '0',
                 fontWeight: '600'
               }}>
                 {activeFilterCount} active
@@ -553,7 +628,7 @@ function App() {
                     background: '#4a4a4a',
                     color: 'white', 
                     padding: '0.3rem 0.6rem', 
-                    borderRadius: '12px',
+                    borderRadius: '0',
                     fontWeight: '600'
                   }}>
                     Graph
@@ -575,17 +650,15 @@ function App() {
 
           {/* Search Section */}
           <div className="sidebar-section">
-            <h3>Search Models</h3>
+            <h3>Search</h3>
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search by model ID, tags, or keywords..."
+              placeholder="Search models, tags, libraries..."
               style={{ width: '100%' }}
+              title="Search by model name, tags, library, or metadata"
             />
-            <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.5rem', lineHeight: '1.4' }}>
-              Search by model name, tags, library, or metadata
-            </div>
           </div>
 
           {/* Popularity Filters */}
@@ -639,24 +712,26 @@ function App() {
             </label>
           </div>
 
-          {/* License Filter */}
+          {/* License Filter - Collapsed */}
           {stats && stats.licenses && typeof stats.licenses === 'object' && Object.keys(stats.licenses).length > 0 && (
-            <div className="sidebar-section">
-              <h3>License Filter</h3>
-              <div style={{ maxHeight: '200px', overflowY: 'auto', marginTop: '0.5rem' }}>
+            <details className="sidebar-section" style={{ border: '1px solid #e0e0e0', borderRadius: '0', padding: '0.75rem' }}>
+              <summary style={{ cursor: 'pointer', fontWeight: '600', fontSize: '0.95rem', listStyle: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <span>Licenses ({Object.keys(stats.licenses).length})</span>
+              </summary>
+              <div style={{ maxHeight: '200px', overflowY: 'auto', marginTop: '1rem' }}>
                 {Object.entries(stats.licenses as Record<string, number>)
-                  .sort((a, b) => b[1] - a[1])  // Sort by count descending
-                  .slice(0, 20)  // Show top 20 licenses
+                  .sort((a, b) => b[1] - a[1])
+                  .slice(0, 20)
                   .map(([license, count]) => (
                     <label 
                       key={license}
                       style={{ 
                         display: 'flex', 
                         alignItems: 'center', 
-                        gap: '0.5rem', 
-                        marginBottom: '0.5rem',
+                        gap: '0.4rem', 
+                        marginBottom: '0.4rem',
                         cursor: 'pointer',
-                        fontSize: '0.9rem'
+                        fontSize: '0.85rem'
                       }}
                     >
                       <input
@@ -664,80 +739,96 @@ function App() {
                         checked={searchQuery.toLowerCase().includes(license.toLowerCase())}
                         onChange={(e) => {
                           if (e.target.checked) {
-                            // Add license to search (simple implementation)
                             setSearchQuery(searchQuery ? `${searchQuery} ${license}` : license);
                           } else {
-                            // Remove license from search
                             setSearchQuery(searchQuery.replace(license, '').trim() || '');
                           }
                         }}
                       />
                       <span style={{ flex: 1 }}>{license || 'Unknown'}</span>
-                      <span style={{ fontSize: '0.75rem', color: '#666' }}>({Number(count).toLocaleString()})</span>
+                      <span style={{ fontSize: '0.7rem', color: '#999' }}>({Number(count).toLocaleString()})</span>
                     </label>
                   ))}
               </div>
-              {Object.keys(stats.licenses).length > 20 && (
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.5rem' }}>
-                  Showing top 20 licenses
-                </div>
-              )}
-            </div>
+            </details>
           )}
 
-          {/* Discovery */}
+          {/* Quick Actions - Consolidated */}
           <div className="sidebar-section">
-            <h3>Discovery</h3>
-            <RandomModelButton
-              data={data}
-              onSelect={(model: ModelPoint) => {
-                setSelectedModel(model);
-                setIsModalOpen(true);
-              }}
-              disabled={loading || data.length === 0}
-            />
+            <h3>Quick Actions</h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+              <RandomModelButton
+                data={data}
+                onSelect={(model: ModelPoint) => {
+                  setSelectedModel(model);
+                  setIsModalOpen(true);
+                }}
+                disabled={loading || data.length === 0}
+              />
+              <button
+                onClick={() => {
+                  const avgDownloads = data.reduce((sum, m) => sum + (m.downloads || 0), 0) / data.length;
+                  setMinDownloads(Math.floor(avgDownloads));
+                }}
+                disabled={loading || data.length === 0}
+                style={{
+                  padding: '0.75rem',
+                  background: '#4a90e2',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '0',
+                  cursor: loading || data.length === 0 ? 'not-allowed' : 'pointer',
+                  fontWeight: '500',
+                  fontSize: '0.9rem',
+                  opacity: loading || data.length === 0 ? 0.5 : 1
+                }}
+                title="Filter to models with above average downloads"
+              >
+                Popular Models
+              </button>
+              <button
+                onClick={resetFilters}
+                style={{
+                  padding: '0.75rem',
+                  background: '#6c757d',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '0',
+                  cursor: 'pointer',
+                  fontWeight: '500',
+                  fontSize: '0.9rem'
+                }}
+                title="Clear all filters and reset to defaults"
+              >
+                Reset All
+              </button>
+            </div>
           </div>
 
-          {/* Visualization Options */}
+          {/* Visualization */}
           <div className="sidebar-section">
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-              <h3 style={{ margin: 0 }}>Visualization Options</h3>
+              <h3 style={{ margin: 0 }}>Visualization</h3>
               <ThemeToggle />
             </div>
             
             <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>View Mode</span>
+              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>View Mode</span>
               <select 
                 value={viewMode} 
                 onChange={(e) => setViewMode(e.target.value as ViewMode)}
-                style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0' }}
+                style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
+                title="Choose how to visualize the models"
               >
-                <option value="3d">3D Latent Space</option>
-                <option value="scatter">2D Latent Space</option>
-                <option value="network">Network Graph</option>
+                <option value="3d">3D Scatter</option>
+                <option value="scatter">2D Scatter</option>
+                <option value="network">Network</option>
                 <option value="distribution">Distribution</option>
-                <option value="stacked">Stacked</option>
-                <option value="heatmap">Heatmap</option>
               </select>
-              <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                {viewMode === '3d' && 'Interactive 3D exploration of model relationships'}
-                {viewMode === 'scatter' && '2D projection showing model similarity'}
-                {viewMode === 'network' && 'Network graph of model connections'}
-                {viewMode === 'distribution' && 'Statistical distributions of model properties'}
-                {viewMode === 'stacked' && 'Hierarchical view of model families'}
-                {viewMode === 'heatmap' && 'Density heatmap in latent space'}
-              </div>
             </label>
 
-            {/* Rendering Style Selector for 3D View */}
-            {viewMode === '3d' && (
-              <div style={{ marginBottom: '1rem' }}>
-                <RenderingStyleSelector />
-              </div>
-            )}
-
-            {/* Zoom and Label Controls for 3D View */}
-            {viewMode === '3d' && (
+            {/* Zoom and Label Controls for Scatter View */}
+            {viewMode === 'scatter' && (
               <>
                 <ZoomSlider
                   value={zoomLevel}
@@ -763,42 +854,38 @@ function App() {
             )}
 
             <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>Color Encoding</span>
+              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>Color By</span>
               <select 
                 value={colorBy} 
                 onChange={(e) => setColorBy(e.target.value as ColorByOption)}
-                style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0' }}
+                style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
+                title="Choose what attribute to color models by"
               >
-                <option value="library_name">Library (e.g., transformers, diffusers)</option>
-                <option value="pipeline_tag">Pipeline/Task Type</option>
-                <option value="cluster_id">Cluster (semantic groups)</option>
-                <option value="family_depth">Family Tree Depth</option>
-                <option value="downloads">Download Count</option>
-                <option value="likes">Like Count</option>
-                <option value="trending_score">Trending Score</option>
-                <option value="licenses">License Type</option>
+                <option value="library_name">Library</option>
+                <option value="pipeline_tag">Pipeline/Task</option>
+                <option value="cluster_id">Cluster</option>
+                <option value="family_depth">Family Depth</option>
+                <option value="downloads">Downloads</option>
+                <option value="likes">Likes</option>
+                <option value="trending_score">Trending</option>
+                <option value="licenses">License</option>
               </select>
-              <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                {colorBy === 'cluster_id' && 'Semantic clusters from embeddings'}
-                {colorBy === 'family_depth' && 'Generation depth in family tree'}
-                {colorBy === 'licenses' && 'Model license types'}
-              </div>
             </label>
 
-            {/* Color Scheme Selector (for continuous scales) */}
+            {/* Color Scheme */}
             {(colorBy === 'downloads' || colorBy === 'likes' || colorBy === 'family_depth' || colorBy === 'trending_score') && (
               <label style={{ marginBottom: '1rem', display: 'block' }}>
-                <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>Color Scheme</span>
+                <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>Color Scheme</span>
                 <select 
                   value={colorScheme} 
                   onChange={(e) => setColorScheme(e.target.value as any)}
-                  style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0' }}
+                  style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
                 >
-                  <option value="viridis">Viridis (blue to yellow)</option>
-                  <option value="plasma">Plasma (purple to yellow)</option>
-                  <option value="inferno">Inferno (black to yellow)</option>
-                  <option value="magma">Magma (black to pink)</option>
-                  <option value="coolwarm">Cool-Warm (blue to red)</option>
+                  <option value="viridis">Viridis</option>
+                  <option value="plasma">Plasma</option>
+                  <option value="inferno">Inferno</option>
+                  <option value="magma">Magma</option>
+                  <option value="coolwarm">Cool-Warm</option>
                 </select>
               </label>
             )}
@@ -815,156 +902,115 @@ function App() {
             </label>
 
             <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>Size Encoding</span>
+              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>Size By</span>
               <select 
                 value={sizeBy} 
                 onChange={(e) => setSizeBy(e.target.value as SizeByOption)}
-                style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0' }}
+                style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
+                title="Choose what determines point size"
               >
-                <option value="downloads">Downloads (larger = more popular)</option>
-                <option value="likes">Likes (larger = more liked)</option>
-                <option value="trendingScore">Trending Score</option>
-                <option value="none">Uniform Size</option>
+                <option value="downloads">Downloads</option>
+                <option value="likes">Likes</option>
+                <option value="none">Uniform</option>
               </select>
             </label>
 
-            <div className="sidebar-section" style={{ background: '#f5f5f5', borderColor: '#d0d0d0', marginBottom: '1rem', padding: '0.75rem', borderRadius: '4px', border: '1px solid' }}>
-              <label style={{ display: 'block', marginBottom: '0' }}>
-                <span style={{ fontWeight: '600', display: 'block', marginBottom: '0.5rem', color: '#2d2d2d' }}>
-                  Projection Method
-                </span>
+            <details style={{ marginBottom: '1rem', marginTop: '1rem' }}>
+              <summary style={{ cursor: 'pointer', fontWeight: '500', fontSize: '0.9rem', marginBottom: '0rem' }}>
+                Advanced Settings
+              </summary>
+              <div style={{ marginTop: '0.75rem' }}>
                 <select 
                   value={projectionMethod} 
                   onChange={(e) => setProjectionMethod(e.target.value as 'umap' | 'tsne')}
-                  style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0', fontWeight: '500' }}
+                  style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
+                  title="UMAP preserves global structure, t-SNE emphasizes local clusters"
                 >
-                  <option value="umap">UMAP (better global structure)</option>
-                  <option value="tsne">t-SNE (better local clusters)</option>
+                  <option value="umap">UMAP</option>
+                  <option value="tsne">t-SNE</option>
                 </select>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.5rem', lineHeight: '1.4' }}>
-                  <strong>UMAP:</strong> Preserves global structure, better for exploring relationships<br/>
-                  <strong>t-SNE:</strong> Emphasizes local clusters, better for finding groups
-                </div>
-              </label>
-            </div>
+              </div>
+            </details>
           </div>
 
-          {/* View Modes */}
-          <div className="sidebar-section">
-            <h3>View Modes</h3>
+          {/* Display Options - Simplified */}
+          <details className="sidebar-section" open>
+            <summary style={{ cursor: 'pointer', fontWeight: '600', fontSize: '1rem', marginBottom: '1rem', listStyle: 'none' }}>
+              <h3 style={{ display: 'inline', margin: 0 }}>Display Options</h3>
+            </summary>
             
-            <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-              <input
-                type="checkbox"
-                checked={baseModelsOnly}
-                onChange={(e) => setBaseModelsOnly(e.target.checked)}
-                style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-              />
-              <div>
-                <span style={{ fontWeight: '500' }}>Base Models Only</span>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  Show only root models (no parent). Click any model to see its family tree.
-                </div>
-              </div>
-            </label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+              <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} title="Show only root models without parents">
+                <input
+                  type="checkbox"
+                  checked={baseModelsOnly}
+                  onChange={(e) => setBaseModelsOnly(e.target.checked)}
+                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
+                />
+                <span style={{ fontWeight: '500', fontSize: '0.9rem' }}>Base Models Only</span>
+              </label>
 
-            <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-              <input
-                type="checkbox"
-                checked={semanticSimilarityMode}
-                onChange={(e) => {
-                  setSemanticSimilarityMode(e.target.checked);
-                  if (!e.target.checked) {
-                    setSemanticQueryModel(null);
-                  }
-                }}
-                style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-              />
-              <div>
-                <span style={{ fontWeight: '500' }}>Semantic Similarity View</span>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  Show models sorted by semantic similarity to a query model
-                </div>
-              </div>
-            </label>
+              <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} title="Use family tree structure in embeddings">
+                <input
+                  type="checkbox"
+                  checked={useGraphEmbeddings}
+                  onChange={(e) => setUseGraphEmbeddings(e.target.checked)}
+                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
+                />
+                <span style={{ fontWeight: '500', fontSize: '0.9rem' }}>Graph-Aware Layout</span>
+              </label>
 
-            <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-              <input
-                type="checkbox"
-                checked={useGraphEmbeddings}
-                onChange={(e) => setUseGraphEmbeddings(e.target.checked)}
-                style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-              />
-              <div>
-                <span style={{ fontWeight: '500' }}>Graph-Aware Embeddings</span>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  Use embeddings that respect family tree structure. Models in the same family will be closer together.
-                </div>
-              </div>
-            </label>
-            
-            {embeddingType && (
-              <div style={{ 
-                marginTop: '0.5rem', 
-                padding: '0.75rem', 
-                background: embeddingType === 'graph-aware' ? '#e8f5e9' : '#f5f5f5',
-                border: `1px solid ${embeddingType === 'graph-aware' ? '#4caf50' : '#d0d0d0'}`,
-                borderRadius: '4px',
-                fontSize: '0.75rem',
-                color: '#666'
-              }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
-                  <strong style={{ color: '#2d2d2d' }}>
-                    {embeddingType === 'graph-aware' ? 'Graph-Aware' : 'Text-Only'} Embeddings
-                  </strong>
-                </div>
-                <div style={{ fontSize: '0.7rem', color: '#666', lineHeight: '1.4' }}>
-                  {embeddingType === 'graph-aware' 
-                    ? 'Models in the same family tree are positioned closer together, revealing hierarchical relationships.'
-                    : 'Standard text-based embeddings showing semantic similarity from model descriptions and tags.'}
-                </div>
-              </div>
-            )}
+              <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} title="Sort by similarity to a specific model">
+                <input
+                  type="checkbox"
+                  checked={semanticSimilarityMode}
+                  onChange={(e) => {
+                    setSemanticSimilarityMode(e.target.checked);
+                    if (!e.target.checked) {
+                      setSemanticQueryModel(null);
+                    }
+                  }}
+                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
+                />
+                <span style={{ fontWeight: '500', fontSize: '0.9rem' }}>Similarity View</span>
+              </label>
+            </div>
 
             {semanticSimilarityMode && (
-              <div style={{ marginTop: '1rem', padding: '0.75rem', background: 'white', borderRadius: '4px', border: '1px solid #d0d0d0' }}>
-                <label style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>
-                  Query Model ID
-                </label>
+              <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f9f9f9', borderRadius: '0', border: '1px solid #e0e0e0' }}>
                 <input
                   type="text"
                   value={semanticQueryModel || ''}
                   onChange={(e) => setSemanticQueryModel(e.target.value || null)}
-                  placeholder="e.g., bert-base-uncased"
-                  style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0' }}
+                  placeholder="Enter model ID..."
+                  style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
+                  title="Enter a model ID to compare against"
                 />
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.5rem' }}>
-                  {selectedModel && (
-                    <button
-                      onClick={() => setSemanticQueryModel(selectedModel.model_id)}
-                      style={{
-                        padding: '0.25rem 0.5rem',
-                        background: '#4a90e2',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '0.75rem'
-                      }}
-                    >
-                      Use Selected Model
-                    </button>
-                  )}
-                  <div style={{ marginTop: '0.5rem' }}>
-                    Enter a model ID or click a model in the visualization, then click "Use Selected Model"
-                  </div>
-                </div>
+                {selectedModel && (
+                  <button
+                    onClick={() => setSemanticQueryModel(selectedModel.model_id)}
+                    style={{
+                      marginTop: '0.5rem',
+                      padding: '0.4rem 0.7rem',
+                      background: '#4a90e2',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      fontSize: '0.8rem',
+                      width: '100%'
+                    }}
+                    title="Use the currently selected model"
+                  >
+                    Use Selected Model
+                  </button>
+                )}
               </div>
             )}
-          </div>
+          </details>
 
           {/* Structural Visualization Options */}
-          {viewMode === '3d' && (
+          {viewMode === 'network' && (
             <div className="sidebar-section">
               <h3>Network Structure</h3>
               <div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '1rem', lineHeight: '1.4' }}>
@@ -1002,14 +1048,14 @@ function App() {
               </label>
 
               {showNetworkEdges && (
-                <div style={{ marginLeft: '1.5rem', marginBottom: '1rem', padding: '0.75rem', background: 'white', borderRadius: '4px', border: '1px solid #d0d0d0' }}>
+                <div style={{ marginLeft: '1.5rem', marginBottom: '1rem', padding: '0.75rem', background: 'white', borderRadius: '0', border: '1px solid #d0d0d0' }}>
                   <label style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>
                     Connection Type
                   </label>
                   <select 
                     value={networkEdgeType} 
                     onChange={(e) => setNetworkEdgeType(e.target.value as 'library' | 'pipeline' | 'combined')}
-                    style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
+                    style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
                   >
                     <option value="combined">Combined (library + pipeline + tags)</option>
                     <option value="library">Library Only</option>
@@ -1035,131 +1081,90 @@ function App() {
             </div>
           )}
 
-          {/* Quick Filters */}
-          <div className="sidebar-section">
-            <h3>Quick Actions</h3>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
-              <button
-                onClick={() => {
-                  setMinDownloads(stats ? Math.ceil(stats.avg_downloads) : 100);
-                  setMinLikes(0);
-                }}
-                className="btn btn-small"
-                style={{
-                  background: '#e3f2fd',
-                  color: '#1976d2',
-                  border: '1px solid #90caf9'
-                }}
-              >
-                Above Avg Downloads
-              </button>
-              <button
-                onClick={() => {
-                  setMinDownloads(10000);
-                  setMinLikes(10);
-                }}
-                className="btn btn-small"
-                style={{
-                  background: '#fff3e0',
-                  color: '#e65100',
-                  border: '1px solid #ffb74d'
-                }}
-              >
-                Popular Models
-              </button>
-              <button
-                onClick={resetFilters}
-                disabled={activeFilterCount === 0}
-                className="btn btn-small btn-secondary"
-                style={{
-                  opacity: activeFilterCount > 0 ? 1 : 0.5,
-                  cursor: activeFilterCount > 0 ? 'pointer' : 'not-allowed'
-                }}
-              >
-                Reset All
-              </button>
-            </div>
-          </div>
-
-          <div className="sidebar-section">
-            <h3>Hierarchy Navigation</h3>
-            <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>
-                Max Hierarchy Depth
-              </span>
-              <input
-                type="range"
-                min="0"
-                max="10"
-                value={maxHierarchyDepth ?? 10}
-                onChange={(e) => {
-                  const val = parseInt(e.target.value);
-                  setMaxHierarchyDepth(val === 10 ? null : val);
-                }}
-                style={{ width: '100%', marginTop: '0.5rem' }}
-              />
-              <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem', display: 'flex', justifyContent: 'space-between' }}>
-                <span>All levels</span>
-                <span>{maxHierarchyDepth !== null ? `Depth ≤ ${maxHierarchyDepth}` : 'No limit'}</span>
-              </div>
-            </label>
-            <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-              <input
-                type="checkbox"
-                checked={showDistanceHeatmap}
-                onChange={(e) => setShowDistanceHeatmap(e.target.checked)}
-              />
-              <span style={{ fontSize: '0.9rem' }}>Show Distance Heatmap</span>
-            </label>
-            {selectedModel && (
-              <div style={{ marginTop: '0.5rem', padding: '0.5rem', background: '#f5f5f5', borderRadius: '4px', fontSize: '0.85rem' }}>
-                <div style={{ fontWeight: '500', marginBottom: '0.25rem' }}>Selected Model:</div>
-                <div style={{ color: '#666', marginBottom: '0.5rem', wordBreak: 'break-word' }}>{selectedModel.model_id}</div>
-                {selectedModel.family_depth !== null && (
-                  <div style={{ color: '#666', marginBottom: '0.5rem' }}>
-                    Hierarchy Depth: {selectedModel.family_depth}
-                  </div>
-                )}
-                <button
-                  onClick={() => {
-                    if (selectedModel.parent_model) {
-                      loadFamilyPath(selectedModel.model_id, selectedModel.parent_model);
-                    } else {
-                      loadFamilyPath(selectedModel.model_id);
-                    }
-                  }}
-                  style={{
-                    padding: '0.25rem 0.5rem',
-                    fontSize: '0.8rem',
-                    background: '#4a90e2',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '2px',
-                    cursor: 'pointer',
-                    marginRight: '0.5rem',
-                    marginBottom: '0.5rem'
-                  }}
-                >
-                  Show Path to Root
-                </button>
-                <button
-                  onClick={() => setHighlightedPath([])}
-                  style={{
-                    padding: '0.25rem 0.5rem',
-                    fontSize: '0.8rem',
-                    background: '#6a6a6a',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '2px',
-                    cursor: 'pointer',
-                    marginBottom: '0.5rem'
+          {/* Advanced Hierarchy Controls */}
+          <details className="sidebar-section" style={{ border: '1px solid #e0e0e0', borderRadius: '0', padding: '0.75rem' }}>
+            <summary style={{ cursor: 'pointer', fontWeight: '600', fontSize: '0.95rem', listStyle: 'none' }}>
+              Hierarchy & Structure
+            </summary>
+            <div style={{ marginTop: '1rem' }}>
+              <label style={{ marginBottom: '1rem', display: 'block' }}>
+                <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.85rem' }}>
+                  Max Hierarchy Depth
+                </span>
+                <input
+                  type="range"
+                  min="0"
+                  max="10"
+                  value={maxHierarchyDepth ?? 10}
+                  onChange={(e) => {
+                    const val = parseInt(e.target.value);
+                    setMaxHierarchyDepth(val === 10 ? null : val);
                   }}
-                >
-                  Clear Path
-                </button>
-              </div>
-            )}
-          </div>
+                  style={{ width: '100%' }}
+                />
+                <div style={{ fontSize: '0.75rem', color: '#999', marginTop: '0.25rem', display: 'flex', justifyContent: 'space-between' }}>
+                  <span>All levels</span>
+                  <span>{maxHierarchyDepth !== null ? `Depth ≤ ${maxHierarchyDepth}` : 'No limit'}</span>
+                </div>
+              </label>
+              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <input
+                  type="checkbox"
+                  checked={showDistanceHeatmap}
+                  onChange={(e) => setShowDistanceHeatmap(e.target.checked)}
+                />
+                <span style={{ fontSize: '0.85rem' }}>Distance Heatmap</span>
+              </label>
+              {selectedModel && (
+                <div style={{ marginTop: '0.5rem', padding: '0.5rem', background: '#f5f5f5', borderRadius: '0', fontSize: '0.85rem' }}>
+                  <div style={{ fontWeight: '500', marginBottom: '0.25rem' }}>Selected Model:</div>
+                  <div style={{ color: '#666', marginBottom: '0.5rem', wordBreak: 'break-word' }}>{selectedModel.model_id}</div>
+                  {selectedModel.family_depth !== null && (
+                    <div style={{ color: '#666', marginBottom: '0.5rem' }}>
+                      Hierarchy Depth: {selectedModel.family_depth}
+                    </div>
+                  )}
+                  <button
+                    onClick={() => {
+                      if (selectedModel.parent_model) {
+                        loadFamilyPath(selectedModel.model_id, selectedModel.parent_model);
+                      } else {
+                        loadFamilyPath(selectedModel.model_id);
+                      }
+                    }}
+                    style={{
+                      padding: '0.25rem 0.5rem',
+                      fontSize: '0.8rem',
+                      background: '#4a90e2',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '0',
+                      cursor: 'pointer',
+                      marginRight: '0.5rem',
+                      marginBottom: '0.5rem'
+                    }}
+                  >
+                    Show Path to Root
+                  </button>
+                  <button
+                    onClick={() => setHighlightedPath([])}
+                    style={{
+                      padding: '0.25rem 0.5rem',
+                      fontSize: '0.8rem',
+                      background: '#6a6a6a',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '0',
+                      cursor: 'pointer',
+                      marginBottom: '0.5rem'
+                    }}
+                  >
+                    Clear Path
+                  </button>
+                </div>
+              )}
+            </div>
+          </details>
 
           <div className="sidebar-section">
             <h3>Family Tree Explorer</h3>
@@ -1170,7 +1175,7 @@ function App() {
                 onChange={(e) => setSearchInput(e.target.value)}
                 onFocus={() => searchInput.length > 0 && setShowSearchResults(true)}
                 placeholder="Type model name..."
-                style={{ width: '100%', padding: '0.5rem', borderRadius: '2px', border: '1px solid #d0d0d0' }}
+                style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0' }}
               />
               {showSearchResults && searchResults.length > 0 && (
                 <div style={{
@@ -1182,32 +1187,16 @@ function App() {
                   border: '1px solid #d0d0d0',
                   borderRadius: '2px',
                   marginTop: '2px',
-                  maxHeight: '200px',
-                  overflowY: 'auto',
+                  maxHeight: '400px',
                   zIndex: 1000,
                   boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                 }}>
-                  {searchResults.map((result) => (
-                    <div
-                      key={result.model_id}
-                      onClick={() => {
-                        loadFamilyTree(result.model_id);
-                      }}
-                      style={{
-                        padding: '0.5rem',
-                        cursor: 'pointer',
-                        borderBottom: '1px solid #f0f0f0',
-                        fontSize: '0.85rem'
-                      }}
-                      onMouseEnter={(e) => e.currentTarget.style.background = '#f5f5f5'}
-                      onMouseLeave={(e) => e.currentTarget.style.background = 'white'}
-                    >
-                      <div style={{ fontWeight: '500' }}>{result.model_id}</div>
-                      {result.library_name && (
-                        <div style={{ fontSize: '0.75rem', color: '#666' }}>{result.library_name}</div>
-                      )}
-                    </div>
-                  ))}
+                  <VirtualSearchResults
+                    results={searchResults}
+                    onSelect={(result) => {
+                      loadFamilyTree(result.model_id);
+                    }}
+                  />
                 </div>
               )}
             </div>
@@ -1239,7 +1228,7 @@ function App() {
 
           {/* Bookmarks */}
           {bookmarkedModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '2px', border: '1px solid #d0d0d0' }}>
+            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '0', border: '1px solid #d0d0d0' }}>
               <h3 style={{ marginTop: 0, fontSize: '0.9rem', fontWeight: '600' }}>Bookmarks ({bookmarkedModels.length})</h3>
               <div style={{ maxHeight: '150px', overflowY: 'auto', fontSize: '0.85rem' }}>
                 {bookmarkedModels.map(modelId => (
@@ -1265,10 +1254,10 @@ function App() {
 
           {/* Comparison */}
           {comparisonModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '2px', border: '1px solid #d0d0d0' }}>
+            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '0', border: '1px solid #d0d0d0' }}>
               <h3 style={{ marginTop: 0, fontSize: '0.9rem', fontWeight: '600' }}>Comparison ({comparisonModels.length}/3)</h3>
               {comparisonModels.map(model => (
-                <div key={model.model_id} style={{ marginBottom: '0.5rem', padding: '0.5rem', background: 'white', borderRadius: '2px', fontSize: '0.85rem' }}>
+                <div key={model.model_id} style={{ marginBottom: '0.5rem', padding: '0.5rem', background: 'white', borderRadius: '0', fontSize: '0.85rem' }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <strong>{model.model_id}</strong>
                     <button
@@ -1295,7 +1284,7 @@ function App() {
 
           {/* Similar Models */}
           {showSimilar && similarModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '2px', border: '1px solid #d0d0d0' }}>
+            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '0', border: '1px solid #d0d0d0' }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
                 <h3 style={{ marginTop: 0, fontSize: '0.9rem', fontWeight: '600' }}>Similar Models</h3>
                 <button
@@ -1307,7 +1296,7 @@ function App() {
               </div>
               <div style={{ maxHeight: '200px', overflowY: 'auto', fontSize: '0.85rem' }}>
                 {similarModels.map((similar, idx) => (
-                  <div key={idx} style={{ marginBottom: '0.5rem', padding: '0.5rem', background: 'white', borderRadius: '2px' }}>
+                  <div key={idx} style={{ marginBottom: '0.5rem', padding: '0.5rem', background: 'white', borderRadius: '0' }}>
                     <div style={{ fontWeight: '500' }}>{similar.model_id}</div>
                     <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
                       Similarity: {(similar.similarity * 100).toFixed(1)}% | Distance: {similar.distance.toFixed(3)}
@@ -1324,7 +1313,7 @@ function App() {
 
 
           {selectedModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.5rem', background: '#e3f2fd', borderRadius: '4px' }}>
+            <div style={{ marginTop: '1rem', padding: '0.5rem', background: '#e3f2fd', borderRadius: '0' }}>
               <strong>Selected: {selectedModels.length} models</strong>
               <button
                 onClick={() => setSelectedModels([])}
@@ -1344,113 +1333,8 @@ function App() {
           )}
           {!loading && !error && data.length > 0 && (
             <>
-              {viewMode === '3d' && (
-                <div style={{ display: 'flex', gap: '10px', width: '100%', height: '100%' }}>
-                  <div 
-                    style={{ flex: 1, position: 'relative' }}
-                    onMouseMove={(e) => {
-                      setTooltipPosition({ x: e.clientX, y: e.clientY });
-                    }}
-                    onMouseLeave={() => {
-                      setHoveredModel(null);
-                      setTooltipPosition(null);
-                    }}
-                  >
-                    <Suspense fallback={<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#666' }}>Loading 3D visualization...</div>}>
-                      <ScatterPlot3D
-                        width={width * 0.8}
-                        height={height}
-                        data={data}
-                        familyTree={familyTree.length > 0 ? familyTree : undefined}
-                        colorBy={colorBy}
-                        sizeBy={sizeBy}
-                        colorScheme={colorScheme}
-                        showLegend={showLegend}
-                  showLabels={showLabels}
-                  zoomLevel={zoomLevel}
-                  nodeDensity={nodeDensity}
-                  renderingStyle={renderingStyle}
-                        showNetworkEdges={showNetworkEdges}
-                        showStructuralGroups={showStructuralGroups}
-                        overviewMode={overviewMode}
-                        networkEdgeType={networkEdgeType}
-                        onPointClick={(model) => {
-                          setSelectedModel(model);
-                          setIsModalOpen(true);
-                        }}
-                        selectedModelId={selectedModel?.model_id || familyTreeModelId}
-                        selectedModel={selectedModel}
-                        onViewChange={setViewCenter}
-                        targetViewCenter={viewCenter}
-                        onHover={(model, pointer) => {
-                          setHoveredModel(model);
-                          if (model && pointer) {
-                            setTooltipPosition(pointer);
-                          } else {
-                            setTooltipPosition(null);
-                          }
-                        }}
-                        highlightedPath={highlightedPath}
-                        showDistanceHeatmap={showDistanceHeatmap && !!selectedModel}
-                      />
-                    </Suspense>
-                    <ModelTooltip 
-                      model={hoveredModel}
-                      position={tooltipPosition}
-                      visible={!!hoveredModel && !!tooltipPosition}
-                    />
-                  </div>
-                  <div style={{ width: width * 0.2, height: height, display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                    <div style={{
-                      width: width * 0.2 - 20,
-                      padding: '8px',
-                      background: '#f5f5f5',
-                      borderRadius: '2px',
-                      border: '1px solid #d0d0d0',
-                      fontSize: '10px',
-                      fontFamily: "'Instrument Sans', sans-serif"
-                    }}>
-                      <h4 style={{ marginTop: 0, marginBottom: '0.5rem', fontSize: '11px', fontWeight: '600' }}>UV Projection</h4>
-                      <p style={{ margin: 0, lineHeight: '1.3', color: '#666', fontSize: '9px' }}>
-                        This 2D projection shows the XY plane of the latent space. Click on any point to navigate the 3D view to that region.
-                      </p>
-                    </div>
-                    <UVProjectionSquare
-                      width={width * 0.2 - 20}
-                      height={height * 0.3}
-                      data={data}
-                      familyTree={familyTree.length > 0 ? familyTree : undefined}
-                      colorBy={colorBy}
-                      onRegionSelect={(center: { x: number; y: number; z: number }) => {
-                        setViewCenter(center);
-                        // Camera will automatically animate to this position via targetViewCenter prop
-                      }}
-                        selectedModelId={selectedModel?.model_id || familyTreeModelId}
-                      currentViewCenter={viewCenter}
-                    />
-                    {viewCenter && (
-                      <div style={{
-                        width: width * 0.2 - 20,
-                        padding: '8px',
-                        background: '#f5f5f5',
-                        borderRadius: '2px',
-                        border: '1px solid #d0d0d0',
-                        fontSize: '10px',
-                        fontFamily: "'Instrument Sans', sans-serif"
-                      }}>
-                        <strong style={{ fontSize: '10px' }}>View Center:</strong>
-                        <div style={{ fontSize: '9px', marginTop: '0.25rem', color: '#666' }}>
-                          X: {viewCenter.x.toFixed(3)}<br />
-                          Y: {viewCenter.y.toFixed(3)}<br />
-                          Z: {viewCenter.z.toFixed(3)}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
               {viewMode === 'scatter' && (
-                <EnhancedScatterPlot
+                <ScatterPlot
                   width={width}
                   height={height}
                   data={data}
@@ -1465,6 +1349,26 @@ function App() {
                   }}
                 />
               )}
+              {viewMode === '3d' && (
+                <ScatterPlot3D
+                  data={data}
+                  colorBy={colorBy}
+                  sizeBy={sizeBy}
+                  hoveredModel={hoveredModel}
+                  onPointClick={(model) => {
+                    setSelectedModel(model);
+                    setIsModalOpen(true);
+                  }}
+                  onHover={(model, position) => {
+                    setHoveredModel(model);
+                    if (model && position) {
+                      setTooltipPosition(position);
+                    } else {
+                      setTooltipPosition(null);
+                    }
+                  }}
+                />
+              )}
               {viewMode === 'network' && (
                 <NetworkGraph
                   width={width}
@@ -1479,12 +1383,6 @@ function App() {
               {viewMode === 'distribution' && (
                 <DistributionView data={data} width={width} height={height} />
               )}
-              {viewMode === 'stacked' && (
-                <StackedView data={data} width={width} height={height} />
-              )}
-              {viewMode === 'heatmap' && (
-                <HeatmapView data={data} width={width} height={height} />
-              )}
             </>
           )}
         </main>

frontend/src/components/controls/ClusterFilter.css

@@ -21,7 +21,7 @@
   width: 100%;
   padding: 0.5rem;
   border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 4px;
+  border-radius: 0;
   font-size: 0.9rem;
   background: var(--bg-primary, #ffffff);
   color: var(--text-primary, #1a1a1a);
@@ -42,7 +42,7 @@
   flex: 1;
   padding: 0.4rem 0.6rem;
   border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 4px;
+  border-radius: 0;
   background: var(--bg-primary, #ffffff);
   color: var(--text-primary, #1a1a1a);
   font-size: 0.85rem;
@@ -64,7 +64,7 @@
   max-height: 300px;
   overflow-y: auto;
   border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 4px;
+  border-radius: 0;
   padding: 0.5rem;
   background: var(--bg-primary, #ffffff);
 }
@@ -75,7 +75,7 @@
   gap: 0.5rem;
   padding: 0.5rem;
   cursor: pointer;
-  border-radius: 3px;
+  border-radius: 0;
   transition: background 0.15s;
   font-size: 0.85rem;
 }
@@ -96,7 +96,7 @@
 .cluster-color-indicator {
   width: 12px;
   height: 12px;
-  border-radius: 2px;
+  border-radius: 0;
   flex-shrink: 0;
   border: 1px solid var(--border-color, #e0e0e0);
 }

frontend/src/components/controls/RenderingStyleSelector.css

@@ -17,7 +17,7 @@
   width: 100%;
   padding: 0.5rem;
   border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 4px;
+  border-radius: 0;
   background: var(--bg-primary, #ffffff);
   color: var(--text-primary, #1a1a1a);
   font-size: 0.9rem;

frontend/src/components/controls/ThemeToggle.tsx

@@ -15,7 +15,7 @@ export default function ThemeToggle() {
       title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
       aria-label={`Current theme: ${theme}. Click to switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
     >
-      {theme === 'light' ? '🌙' : '☀️'}
+      {theme === 'light' ? 'Dark' : 'Light'}
     </button>
   );
 }

frontend/src/components/controls/VisualizationModeButtons.css

@@ -21,7 +21,7 @@
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 6px;
+  border-radius: 0;
   background: var(--bg-primary, #ffffff);
   color: var(--text-primary, #1a1a1a);
   font-size: 0.9rem;

frontend/src/components/controls/VisualizationModeButtons.tsx

@@ -14,12 +14,9 @@ interface ModeOption {
 }
 
 const MODES: ModeOption[] = [
-  { value: '3d', label: '3D Embedding', icon: '🎯', description: 'Interactive 3D exploration' },
-  { value: 'scatter', label: '2D Scatter', icon: '📊', description: '2D projection view' },
-  { value: 'network', label: 'Network', icon: '🕸️', description: 'Network graph view' },
-  { value: 'distribution', label: 'Distribution', icon: '📈', description: 'Statistical distributions' },
-  { value: 'stacked', label: 'Stacked', icon: '📚', description: 'Hierarchical view' },
-  { value: 'heatmap', label: 'Heatmap', icon: '🔥', description: 'Density heatmap' },
+  { value: 'scatter', label: '2D Scatter', icon: '', description: '2D projection view' },
+  { value: 'network', label: 'Network', icon: '', description: 'Network graph view' },
+  { value: 'distribution', label: 'Distribution', icon: '', description: 'Statistical distributions' },
 ];
 
 export default function VisualizationModeButtons() {

frontend/src/components/layout/SearchBar.css

@@ -11,7 +11,7 @@
   align-items: center;
   background: white;
   border: 2px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 0;
   padding: 8px 12px;
   transition: border-color 0.2s;
 }
@@ -26,7 +26,7 @@
   border: none;
   outline: none;
   font-size: 14px;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   color: #333;
   background: transparent;
 }
@@ -71,7 +71,7 @@
   margin-top: 4px;
   background: white;
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 0;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 400px;
   overflow-y: auto;
@@ -105,7 +105,7 @@
   font-size: 14px;
   font-weight: 600;
   color: #333;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .result-org {
@@ -113,7 +113,7 @@
   color: #666;
   background: #f0f0f0;
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: 0;
 }
 
 .result-meta {
@@ -128,7 +128,7 @@
   color: #666;
   background: #e8e8e8;
   padding: 2px 6px;
-  border-radius: 3px;
+  border-radius: 0;
 }
 
 .result-snippet {
@@ -141,7 +141,7 @@
 .result-snippet mark {
   background: #fff3cd;
   padding: 1px 2px;
-  border-radius: 2px;
+  border-radius: 0;
 }
 
 .search-no-results {
@@ -167,12 +167,12 @@
 
 .search-results::-webkit-scrollbar-track {
   background: #f1f1f1;
-  border-radius: 4px;
+  border-radius: 0;
 }
 
 .search-results::-webkit-scrollbar-thumb {
   background: #c1c1c1;
-  border-radius: 4px;
+  border-radius: 0;
 }
 
 .search-results::-webkit-scrollbar-thumb:hover {

frontend/src/components/modals/FileTree.css

@@ -1,7 +1,7 @@
 .file-tree-container {
   margin-top: 1rem;
   border: 1px solid #e0e0e0;
-  border-radius: 4px;
+  border-radius: 0;
   background: #fafafa;
   max-height: 600px;
   overflow-y: auto;
@@ -29,7 +29,7 @@
   background: #e3f2fd;
   color: #1976d2;
   padding: 0.2rem 0.5rem;
-  border-radius: 12px;
+  border-radius: 0;
   font-size: 0.75rem;
   font-weight: 500;
 }
@@ -49,12 +49,12 @@
 .file-tree-button {
   background: #f0f0f0;
   border: 1px solid #d0d0d0;
-  border-radius: 3px;
+  border-radius: 0;
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   cursor: pointer;
   color: #333;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   transition: background 0.15s;
 }
 
@@ -89,9 +89,9 @@
   width: 100%;
   padding: 0.5rem 2rem 0.5rem 0.75rem;
   border: 1px solid #d0d0d0;
-  border-radius: 4px;
+  border-radius: 0;
   font-size: 0.85rem;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .file-tree-search-input:focus {
@@ -112,7 +112,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 2px;
+  border-radius: 0;
 }
 
 .file-tree-clear:hover {
@@ -123,9 +123,9 @@
 .file-tree-type-filter {
   padding: 0.5rem 0.75rem;
   border: 1px solid #d0d0d0;
-  border-radius: 4px;
+  border-radius: 0;
   font-size: 0.85rem;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   background: white;
   cursor: pointer;
   min-width: 150px;
@@ -154,7 +154,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.5rem;
-  border-radius: 3px;
+  border-radius: 0;
   transition: background 0.15s;
   user-select: none;
 }
@@ -189,7 +189,7 @@
   cursor: pointer;
   font-size: 0.9rem;
   padding: 0.25rem;
-  border-radius: 2px;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -254,12 +254,12 @@
 
 .file-tree-container::-webkit-scrollbar-track {
   background: #f1f1f1;
-  border-radius: 4px;
+  border-radius: 0;
 }
 
 .file-tree-container::-webkit-scrollbar-thumb {
   background: #c1c1c1;
-  border-radius: 4px;
+  border-radius: 0;
 }
 
 .file-tree-container::-webkit-scrollbar-thumb:hover {

frontend/src/components/modals/FileTree.tsx

@@ -281,24 +281,24 @@ export default function FileTree({ modelId }: FileTreeProps) {
 
   const getFileIcon = (node: FileNode): string => {
     if (node.type === 'directory') {
-      return expandedPaths.has(node.path) ? '📂' : '📁';
+      return expandedPaths.has(node.path) ? '▼' : '▶';
     }
     const ext = node.path.split('.').pop()?.toLowerCase();
     const iconMap: Record<string, string> = {
-      'py': '🐍',
-      'json': '📄',
-      'txt': '📝',
-      'md': '📖',
-      'yml': '⚙️',
-      'yaml': '⚙️',
-      'bin': '💾',
-      'safetensors': '🔒',
-      'pt': '🔥',
-      'pth': '🔥',
-      'onnx': '🧠',
-      'pb': '🧠',
+      'py': 'py',
+      'json': 'json',
+      'txt': 'txt',
+      'md': 'md',
+      'yml': 'yml',
+      'yaml': 'yaml',
+      'bin': 'bin',
+      'safetensors': 'st',
+      'pt': 'pt',
+      'pth': 'pth',
+      'onnx': 'onnx',
+      'pb': 'pb',
     };
-    return iconMap[ext || ''] || '📄';
+    return iconMap[ext || ''] || '•';
   };
 
   const copyFilePath = (path: string) => {
@@ -348,7 +348,7 @@ export default function FileTree({ modelId }: FileTreeProps) {
                 title="Copy file path"
                 aria-label="Copy path"
               >
-                📋
+                Copy
               </button>
               <a
                 href={getFileUrl(node.path)}
@@ -359,7 +359,7 @@ export default function FileTree({ modelId }: FileTreeProps) {
                 aria-label="Download"
                 onClick={(e) => e.stopPropagation()}
               >
-                ⬇️
+                Download
               </a>
             </div>
           )}

frontend/src/components/modals/ModelModal.css

@@ -24,7 +24,7 @@
 
 .modal-content {
   background: #ffffff;
-  border-radius: 8px;
+  border-radius: 0;
   max-width: 900px;
   width: 100%;
   max-height: 90vh;
@@ -34,7 +34,7 @@
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   border: 1px solid #d0d0d0;
   animation: slideUp 0.3s ease-out;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   display: flex;
   flex-direction: column;
 }
@@ -69,9 +69,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 2px;
+  border-radius: 0;
   transition: all 0.2s;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .modal-close:hover {
@@ -94,7 +94,7 @@
   font-size: 1.5rem;
   color: #1a1a1a;
   word-break: break-word;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-weight: 600;
   line-height: 1.3;
 }
@@ -119,10 +119,10 @@
   background: #6a6a6a;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0;
   cursor: pointer;
   font-size: 0.85rem;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   transition: all 0.2s;
   font-weight: 500;
 }
@@ -156,7 +156,7 @@
   border-bottom: 2px solid transparent;
   cursor: pointer;
   font-size: 0.9rem;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   color: #666;
   font-weight: 500;
   margin-bottom: -2px;
@@ -176,7 +176,7 @@
   color: white;
   font-size: 0.7rem;
   padding: 0.15rem 0.4rem;
-  border-radius: 10px;
+  border-radius: 0;
   font-weight: 600;
   margin-left: 0.25rem;
 }
@@ -215,14 +215,14 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 600;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .info-value {
   font-size: 1.1rem;
   color: #1a1a1a;
   font-weight: 500;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .info-value.highlight {
@@ -248,7 +248,7 @@
   margin-bottom: 1.5rem;
   padding: 1rem;
   background: #fafafa;
-  border-radius: 4px;
+  border-radius: 0;
   border: 1px solid #e0e0e0;
 }
 
@@ -259,7 +259,7 @@
   letter-spacing: 0.5px;
   font-weight: 600;
   margin-bottom: 0.75rem;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .section-content {
@@ -279,7 +279,7 @@
   padding: 0.35rem 0.75rem;
   background: #e8f4f8;
   color: #1a1a1a;
-  border-radius: 12px;
+  border-radius: 0;
   font-size: 0.85rem;
   font-weight: 500;
   border: 1px solid #c8e6c9;
@@ -316,7 +316,7 @@
   color: #4a4a4a;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .modal-info-grid {
@@ -335,25 +335,25 @@
   font-size: 0.875rem;
   color: #6a6a6a;
   font-weight: 500;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .modal-info-item span {
   font-size: 1rem;
   color: #1a1a1a;
   font-weight: 500;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .modal-tags {
   margin: 0;
   padding: 0.75rem;
   background: #f5f5f5;
-  border-radius: 2px;
+  border-radius: 0;
   color: #1a1a1a;
   font-size: 0.9rem;
   line-height: 1.5;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 
 .modal-footer {
@@ -372,9 +372,9 @@
   background: #1a1a1a;
   color: #ffffff;
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: 0;
   font-weight: 500;
-  font-family: 'Instrument Sans', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   transition: all 0.2s;
   border: 1px solid #1a1a1a;
 }
@@ -420,7 +420,7 @@
 .papers-error {
   color: #d32f2f;
   background: #ffebee;
-  border-radius: 4px;
+  border-radius: 0;
   padding: 1rem;
 }
 
@@ -433,7 +433,7 @@
 .paper-card {
   background: #f9f9f9;
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 0;
   padding: 1.5rem;
   transition: box-shadow 0.2s;
 }
@@ -506,7 +506,7 @@
   background: #e3f2fd;
   color: #1976d2;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: 0;
   font-size: 0.8rem;
   font-weight: 500;
 }

frontend/src/components/modals/ModelModal.tsx

@@ -201,14 +201,14 @@ export default function ModelModal({
               className={`modal-tab ${activeTab === 'details' ? 'active' : ''}`}
               onClick={() => setActiveTab('details')}
             >
-              <span className="tab-icon">📋</span>
+              <span className="tab-icon"></span>
               <span>Details</span>
             </button>
             <button
               className={`modal-tab ${activeTab === 'files' ? 'active' : ''}`}
               onClick={() => setActiveTab('files')}
             >
-              <span className="tab-icon">📁</span>
+              <span className="tab-icon"></span>
               <span>Files</span>
             </button>
             {(papers.length > 0 || papersLoading) && (
@@ -216,7 +216,7 @@ export default function ModelModal({
                 className={`modal-tab ${activeTab === 'papers' ? 'active' : ''}`}
                 onClick={() => setActiveTab('papers')}
               >
-                <span className="tab-icon">📄</span>
+                <span className="tab-icon"></span>
                 <span>Papers</span>
                 {papers.length > 0 && <span className="tab-badge">{papers.length}</span>}
               </button>

frontend/src/components/ui/ColorLegend.css

@@ -2,7 +2,7 @@
   position: absolute;
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 0;
   padding: 0.75rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 100;
@@ -63,7 +63,7 @@
 .legend-color {
   width: 16px;
   height: 16px;
-  border-radius: 3px;
+  border-radius: 0;
   border: 1px solid #ccc;
   flex-shrink: 0;
 }
@@ -85,7 +85,7 @@
 .legend-gradient {
   display: flex;
   height: 20px;
-  border-radius: 4px;
+  border-radius: 0;
   overflow: hidden;
   border: 1px solid #ccc;
 }

frontend/src/components/ui/ErrorBoundary.tsx

@@ -65,7 +65,7 @@ class ErrorBoundary extends Component<Props, State> {
             margin: '2rem',
             background: '#ffebee',
             border: '1px solid #ffcdd2',
-            borderRadius: '8px',
+            borderRadius: '0',
             color: '#c62828',
           }}
         >
@@ -83,7 +83,7 @@ class ErrorBoundary extends Component<Props, State> {
                   marginTop: '0.5rem',
                   padding: '1rem',
                   background: '#fff',
-                  borderRadius: '4px',
+                  borderRadius: '0',
                   overflow: 'auto',
                   fontSize: '0.875rem',
                 }}
@@ -101,7 +101,7 @@ class ErrorBoundary extends Component<Props, State> {
               background: '#4a4a4a',
               color: 'white',
               border: 'none',
-              borderRadius: '4px',
+              borderRadius: '0',
               cursor: 'pointer',
             }}
           >

frontend/src/components/ui/LiveModelCount.css

@@ -5,7 +5,7 @@
   gap: 0.75rem;
   padding: 0.5rem 1rem;
   background: rgba(255, 255, 255, 0.15);
-  border-radius: 8px;
+  border-radius: 0;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
@@ -40,7 +40,7 @@
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: white;
-  border-radius: 4px;
+  border-radius: 0;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   font-size: 1rem;
@@ -76,7 +76,7 @@
 .live-model-count-full {
   background: white;
   border: 1px solid #e0e0e0;
-  border-radius: 6px;
+  border-radius: 0;
   padding: 1rem;
   margin-bottom: 1rem;
 }
@@ -99,7 +99,7 @@
 .refresh-btn-small {
   background: #f5f5f5;
   border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 0;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   font-size: 0.875rem;
@@ -133,7 +133,7 @@
   text-align: center;
   padding: 1.25rem 1rem;
   background: #2d2d2d;
-  border-radius: 6px;
+  border-radius: 0;
   color: white;
   border: 1px solid #404040;
 }

frontend/src/components/ui/LiveModelCount.tsx

@@ -136,7 +136,7 @@ export default function LiveModelCount({ compact = true }: { compact?: boolean }
           padding: '1rem', 
           background: '#ffebee', 
           border: '1px solid #ffcdd2', 
-          borderRadius: '4px',
+          borderRadius: '0',
           color: '#c62828',
           textAlign: 'center'
         }}>
@@ -146,7 +146,7 @@ export default function LiveModelCount({ compact = true }: { compact?: boolean }
             style={{
               background: '#f5f5f5',
               border: '1px solid #ddd',
-              borderRadius: '4px',
+              borderRadius: '0',
               padding: '0.5rem 1rem',
               cursor: 'pointer',
               fontSize: '0.875rem',

frontend/src/components/ui/ModelCountTracker.css

@@ -1,6 +1,6 @@
 .model-count-tracker {
   background: white;
-  border-radius: 8px;
+  border-radius: 0;
   padding: 1.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 1rem;
@@ -42,7 +42,7 @@
 .tracker-error {
   color: #d32f2f;
   background: #ffebee;
-  border-radius: 4px;
+  border-radius: 0;
   padding: 1rem;
   margin-bottom: 1rem;
 }
@@ -53,7 +53,7 @@
   background: #1976d2;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0;
   cursor: pointer;
 }
 
@@ -71,7 +71,7 @@
   text-align: center;
   padding: 1.5rem;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 8px;
+  border-radius: 0;
   color: white;
 }
 
@@ -96,7 +96,7 @@
 .growth-stats {
   padding: 1rem;
   background: #f5f5f5;
-  border-radius: 8px;
+  border-radius: 0;
 }
 
 .growth-stats h4 {
@@ -115,7 +115,7 @@
   text-align: center;
   padding: 1rem;
   background: white;
-  border-radius: 6px;
+  border-radius: 0;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -134,7 +134,7 @@
 .breakdown {
   padding: 1rem;
   background: #f5f5f5;
-  border-radius: 8px;
+  border-radius: 0;
 }
 
 .breakdown h4 {
@@ -155,7 +155,7 @@
   align-items: center;
   padding: 0.75rem;
   background: white;
-  border-radius: 4px;
+  border-radius: 0;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -174,7 +174,7 @@
   background: #1976d2;
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 0;
   font-size: 1rem;
   cursor: pointer;
   transition: background 0.2s;

frontend/src/components/ui/ModelTooltip.tsx

@@ -116,7 +116,7 @@ export default function ModelTooltip({ model, position, visible }: ModelTooltipP
         background: 'rgba(0, 0, 0, 0.9)',
         color: 'white',
         padding: '12px 16px',
-        borderRadius: '8px',
+        borderRadius: '0',
         fontSize: '13px',
         maxWidth: '350px',
         zIndex: 10000,

frontend/src/components/ui/VirtualSearchResults.tsx

@@ -0,0 +1,80 @@
+/**
+ * Virtual scrolling component for large lists (search results, model lists).
+ * Renders only visible items for 10-100x better performance.
+ */
+import React from 'react';
+import { FixedSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { SearchResult } from '../../types';
+
+interface VirtualSearchResultsProps {
+  results: SearchResult[];
+  onSelect: (result: SearchResult) => void;
+  selectedIndex?: number;
+}
+
+export const VirtualSearchResults: React.FC<VirtualSearchResultsProps> = ({
+  results,
+  onSelect,
+  selectedIndex = -1,
+}) => {
+  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
+    const result = results[index];
+    const isSelected = index === selectedIndex;
+
+    return (
+      <div
+        style={{
+          ...style,
+          cursor: 'pointer',
+          padding: '8px 12px',
+          backgroundColor: isSelected ? 'var(--accent-color)' : 'transparent',
+          borderBottom: '1px solid var(--border-color)',
+        }}
+        onClick={() => onSelect(result)}
+        onMouseEnter={(e) => {
+          if (!isSelected) {
+            e.currentTarget.style.backgroundColor = 'var(--hover-color)';
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isSelected) {
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }
+        }}
+      >
+        <div style={{ fontWeight: 500 }}>{result.model_id}</div>
+        {result.library_name && (
+          <div style={{ fontSize: '0.875rem', opacity: 0.7, marginTop: '2px' }}>
+            {result.library_name} {result.pipeline_tag && `• ${result.pipeline_tag}`}
+          </div>
+        )}
+        {(result.downloads || result.likes) && (
+          <div style={{ fontSize: '0.75rem', opacity: 0.6, marginTop: '2px' }}>
+            {result.downloads?.toLocaleString()} downloads • {result.likes?.toLocaleString()} likes
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <AutoSizer>
+      {({ height, width }: { height: number; width: number }) => (
+        <List
+          height={Math.min(height, 400)}
+          itemCount={results.length}
+          itemSize={70}
+          width={width}
+          overscanCount={5}
+        >
+          {Row}
+        </List>
+      )}
+    </AutoSizer>
+  );
+};
+
+export default VirtualSearchResults;
+
+

frontend/src/components/visualizations/DistanceHeatmap.tsx

@@ -63,9 +63,9 @@ export default function DistanceHeatmap({
           background: 'rgba(0, 0, 0, 0.7)',
           color: 'white',
           padding: '8px 12px',
-          borderRadius: '4px',
+          borderRadius: '0',
           fontSize: '11px',
-          fontFamily: "'Instrument Sans', sans-serif"
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
         }}
       >
         <div style={{ fontWeight: 600, marginBottom: '4px' }}>Distance Heatmap</div>

frontend/src/components/visualizations/DistributionView.css

@@ -32,7 +32,7 @@
 .distribution-chart {
   background: var(--bg-primary, #ffffff);
   border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 1rem;
 }
 
@@ -66,7 +66,7 @@
   flex: 1;
   height: 24px;
   background: var(--bg-secondary, #f5f5f5);
-  border-radius: 4px;
+  border-radius: 0;
   overflow: hidden;
   position: relative;
 }
@@ -74,7 +74,7 @@
 .distribution-bar {
   height: 100%;
   background: linear-gradient(90deg, var(--accent-color, #4a90e2), #6ba3e8);
-  border-radius: 4px;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;

frontend/src/components/visualizations/EnhancedScatterPlot.tsx

@@ -1,638 +0,0 @@
-/**
- * Enhanced D3.js scatter plot with zoom, pan, brush selection, and smooth animations.
- * Interactive latent space navigator with dynamic interactions.
- */
-import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
-import * as d3 from 'd3';
-import { ModelPoint } from '../../types';
-
-interface EnhancedScatterPlotProps {
-  width: number;
-  height: number;
-  data: ModelPoint[];
-  colorBy: string;
-  sizeBy: string;
-  margin?: { top: number; right: number; bottom: number; left: number };
-  onPointClick?: (model: ModelPoint) => void;
-  onBrush?: (selected: ModelPoint[]) => void;
-}
-
-const defaultMargin = { top: 40, right: 40, bottom: 60, left: 60 };
-
-export default function EnhancedScatterPlot({
-  width,
-  height,
-  data,
-  colorBy,
-  sizeBy,
-  margin = defaultMargin,
-  onPointClick,
-  onBrush,
-}: EnhancedScatterPlotProps) {
-  const svgRef = useRef<SVGSVGElement>(null);
-  const gRef = useRef<SVGGElement | null>(null);
-  const [selectedPoints, setSelectedPoints] = useState<Set<string>>(new Set());
-  const [hoveredPoint, setHoveredPoint] = useState<string | null>(null);
-  const [transform, setTransform] = useState<d3.ZoomTransform>(d3.zoomIdentity);
-  const zoomRef = useRef<d3.ZoomBehavior<Element, unknown> | null>(null);
-
-  // Sample data for very large datasets to improve performance and navigability
-  const sampledData = useMemo(() => {
-    // Reduced limit for better sparsity and navigability
-    const renderLimit = 30000; // Reduced from 50K to 30K
-    if (data.length <= renderLimit) return data;
-    
-    // Use step-based sampling for better distribution
-    const step = Math.ceil(data.length / renderLimit);
-    const sampled: typeof data = [];
-    for (let i = 0; i < data.length; i += step) {
-      sampled.push(data[i]);
-    }
-    return sampled;
-  }, [data]);
-
-  const { xScaleBase, yScaleBase, colorScale, sizeScale, useLogSize } = useMemo(() => {
-    if (sampledData.length === 0) {
-      return {
-        xScaleBase: d3.scaleLinear(),
-        yScaleBase: d3.scaleLinear(),
-        colorScale: d3.scaleOrdinal(),
-        sizeScale: d3.scaleLinear(),
-      };
-    }
-
-    const xExtent = d3.extent(sampledData, (d) => d.x) as [number, number];
-    const yExtent = d3.extent(sampledData, (d) => d.y) as [number, number];
-
-    const xScaleBase = d3
-      .scaleLinear()
-      .domain(xExtent)
-      .range([0, width - margin.left - margin.right])
-      .nice();
-
-    const yScaleBase = d3
-      .scaleLinear()
-      .domain(yExtent)
-      .range([height - margin.top - margin.bottom, 0])
-      .nice();
-
-    // Color scale
-    const isCategorical = colorBy === 'library_name' || colorBy === 'pipeline_tag';
-    let colorScale: d3.ScaleOrdinal<string, string> | d3.ScaleSequential<string, never> | ((d: ModelPoint) => string);
-    
-    if (isCategorical) {
-      const categories = Array.from(new Set(sampledData.map((d) => {
-        if (colorBy === 'library_name') return d.library_name || 'unknown';
-        return d.pipeline_tag || 'unknown';
-      })));
-      colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(categories);
-    } else {
-      const values = sampledData.map((d) => {
-        if (colorBy === 'downloads') return d.downloads;
-        return d.likes;
-      });
-      const extent = d3.extent(values) as [number, number];
-      // Use logarithmic scale for downloads/likes (heavily skewed distributions)
-      if (colorBy === 'downloads' || colorBy === 'likes') {
-        const logExtent: [number, number] = [
-          Math.log10(extent[0] + 1),
-          Math.log10(extent[1] + 1)
-        ];
-        const originalScale = d3.scaleSequential(d3.interpolateViridis).domain(logExtent);
-        // Wrap to apply log transform
-        colorScale = ((d: ModelPoint) => {
-          const val = colorBy === 'downloads' ? d.downloads : d.likes;
-          return originalScale(Math.log10(val + 1));
-        });
-      } else {
-        colorScale = d3.scaleSequential(d3.interpolateViridis).domain(extent);
-      }
-    }
-
-    // Size scale with logarithmic scaling for better representation of skewed distributions
-    const sizeValues = sampledData.map((d) => {
-      if (sizeBy === 'downloads') return d.downloads;
-      if (sizeBy === 'likes') return d.likes;
-      return 10;
-    });
-    const sizeExtent = d3.extent(sizeValues) as [number, number];
-    // Use logarithmic scale for downloads/likes
-    const useLogSize = sizeBy === 'downloads' || sizeBy === 'likes';
-    let sizeScale: ReturnType<typeof d3.scaleSqrt> | ((d: ModelPoint) => number);
-    if (useLogSize) {
-      const logExtent: [number, number] = [
-        Math.log10(sizeExtent[0] + 1),
-        Math.log10(sizeExtent[1] + 1)
-      ];
-      const logScale = d3.scaleLinear().domain(logExtent).range([3, 20]);
-      sizeScale = ((d: ModelPoint): number => {
-        const val = sizeBy === 'downloads' ? d.downloads : d.likes;
-        return logScale(Math.log10(val + 1));
-      });
-    } else {
-      sizeScale = d3
-        .scaleSqrt()
-        .domain(sizeExtent)
-        .range([3, 20]);
-    }
-
-    return { xScaleBase, yScaleBase, colorScale, sizeScale, useLogSize };
-  }, [sampledData, width, height, margin, colorBy, sizeBy]);
-
-  // Apply zoom transform to scales - throttle updates for performance
-  const transformRef = useRef(transform);
-  transformRef.current = transform;
-  
-  const xScale = useMemo(() => {
-    const scale = xScaleBase.copy();
-    return transform.rescaleX(scale);
-  }, [xScaleBase, transform.k, transform.x, transform.y]);
-
-  const yScale = useMemo(() => {
-    const scale = yScaleBase.copy();
-    return transform.rescaleY(scale);
-  }, [yScaleBase, transform.k, transform.x, transform.y]);
-
-  // Reset zoom handler
-  const resetZoom = useCallback(() => {
-    if (svgRef.current && zoomRef.current) {
-      d3.select(svgRef.current).transition().duration(750).call(
-        zoomRef.current.transform as any,
-        d3.zoomIdentity
-      );
-      setTransform(d3.zoomIdentity);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!svgRef.current || sampledData.length === 0) return;
-
-    const svg = d3.select(svgRef.current);
-    svg.selectAll('*').remove();
-
-    // Add zoom controls
-    const controls = svg
-      .append('g')
-      .attr('class', 'zoom-controls')
-      .attr('transform', `translate(${width - 120}, 20)`);
-
-    controls
-      .append('rect')
-      .attr('width', 100)
-      .attr('height', 60)
-      .attr('fill', 'rgba(255, 255, 255, 0.95)')
-      .attr('stroke', '#d0d0d0')
-      .attr('rx', 2)
-      .style('cursor', 'pointer');
-
-    controls
-      .append('text')
-      .attr('x', 50)
-      .attr('y', 20)
-      .attr('text-anchor', 'middle')
-      .attr('font-size', '12px')
-      .attr('font-weight', 'bold')
-      .text('Zoom Controls');
-
-    const zoomIn = controls
-      .append('g')
-      .attr('class', 'zoom-in')
-      .attr('transform', 'translate(20, 30)')
-      .style('cursor', 'pointer');
-
-    zoomIn
-      .append('rect')
-      .attr('width', 25)
-      .attr('height', 25)
-      .attr('fill', '#4a4a4a')
-      .attr('rx', 2)
-      .on('click', () => {
-        if (svgRef.current && zoomRef.current) {
-          const svgNode = svgRef.current;
-          const [x, y] = [width / 2, height / 2];
-          d3.select(svgNode).transition().duration(300).call(
-            zoomRef.current.scaleBy as any,
-            1.5
-          );
-        }
-      });
-
-    zoomIn
-      .append('text')
-      .attr('x', 12.5)
-      .attr('y', 17)
-      .attr('text-anchor', 'middle')
-      .attr('fill', 'white')
-      .attr('font-size', '16px')
-      .text('+');
-
-    const zoomOut = controls
-      .append('g')
-      .attr('class', 'zoom-out')
-      .attr('transform', 'translate(55, 30)')
-      .style('cursor', 'pointer');
-
-    zoomOut
-      .append('rect')
-      .attr('width', 25)
-      .attr('height', 25)
-      .attr('fill', '#6a6a6a')
-      .attr('rx', 2)
-      .on('click', () => {
-        if (svgRef.current && zoomRef.current) {
-          const svgNode = svgRef.current;
-          d3.select(svgNode).transition().duration(300).call(
-            zoomRef.current.scaleBy as any,
-            1 / 1.5
-          );
-        }
-      });
-
-    zoomOut
-      .append('text')
-      .attr('x', 12.5)
-      .attr('y', 17)
-      .attr('text-anchor', 'middle')
-      .attr('fill', 'white')
-      .attr('font-size', '18px')
-      .text('−');
-
-    const resetBtn = controls
-      .append('g')
-      .attr('class', 'reset-zoom')
-      .attr('transform', 'translate(37.5, 55)')
-      .style('cursor', 'pointer');
-
-    resetBtn
-      .append('text')
-      .attr('text-anchor', 'middle')
-      .attr('font-size', '10px')
-      .attr('fill', '#6a6a6a')
-      .text('Reset')
-      .on('click', resetZoom);
-
-    const g = svg
-      .append('g')
-      .attr('class', 'main-group')
-      .attr('transform', `translate(${margin.left},${margin.top})`);
-
-    gRef.current = g.node() as SVGGElement;
-
-    const xMax = width - margin.left - margin.right;
-    const yMax = height - margin.top - margin.bottom;
-
-    // Setup zoom behavior
-    const zoom = d3
-      .zoom<Element, unknown>()
-      .scaleExtent([0.1, 20])
-      .translateExtent([
-        [-margin.left, -margin.top],
-        [width - margin.right, height - margin.bottom],
-      ])
-      .on('zoom', (event) => {
-        setTransform(event.transform);
-        g.attr('transform', `translate(${margin.left},${margin.top}) ${event.transform}`);
-      });
-
-    zoomRef.current = zoom;
-    svg.call(zoom as any);
-
-    // Add grid (will be updated on zoom)
-    const xAxisGrid = d3
-      .axisBottom(xScale)
-      .tickSize(-yMax)
-      .tickFormat(() => '');
-    const yAxisGrid = d3
-      .axisLeft(yScale)
-      .tickSize(-xMax)
-      .tickFormat(() => '');
-
-    g.append('g')
-      .attr('class', 'grid')
-      .attr('data-axis', 'x')
-      .attr('transform', `translate(0,${yMax})`)
-      .call(xAxisGrid)
-      .selectAll('line')
-      .attr('stroke-dasharray', '3,3')
-      .attr('opacity', 0.2)
-      .attr('stroke', '#d0d0d0');
-
-    g.append('g')
-      .attr('class', 'grid')
-      .attr('data-axis', 'y')
-      .call(yAxisGrid)
-      .selectAll('line')
-      .attr('stroke-dasharray', '3,3')
-      .attr('opacity', 0.2)
-      .attr('stroke', '#d0d0d0');
-
-    // Add axes
-    const xAxis = d3.axisBottom(xScale);
-    const yAxis = d3.axisLeft(yScale);
-
-    const xAxisG = g
-      .append('g')
-      .attr('class', 'x-axis')
-      .attr('transform', `translate(0,${yMax})`)
-      .call(xAxis);
-
-    xAxisG
-      .append('text')
-      .attr('x', xMax / 2)
-      .attr('y', 40)
-      .style('text-anchor', 'middle')
-      .style('font-size', '12px')
-      .text('Dimension 1');
-
-    const yAxisG = g
-      .append('g')
-      .attr('class', 'y-axis')
-      .call(yAxis);
-
-    yAxisG
-      .append('text')
-      .attr('transform', 'rotate(-90)')
-      .attr('y', -50)
-      .attr('x', -yMax / 2)
-      .style('text-anchor', 'middle')
-      .style('font-size', '12px')
-      .text('Dimension 2');
-
-    // Add brush for selection (with zoom transform support)
-    const brush = d3
-      .brush<unknown>()
-      .extent([
-        [0, 0],
-        [xMax, yMax],
-      ])
-      .on('end', (event) => {
-        if (!event.selection) {
-          setSelectedPoints(new Set());
-          if (onBrush) onBrush([]);
-          return;
-        }
-
-        const [[x0, y0], [x1, y1]] = event.selection;
-        const selected = data.filter((d) => {
-          const x = xScale(d.x);
-          const y = yScale(d.y);
-          return x >= x0 && x <= x1 && y >= y0 && y <= y1;
-        });
-
-        setSelectedPoints(new Set(selected.map((d) => d.model_id)));
-        if (onBrush) onBrush(selected);
-      });
-
-    const brushG = g.append('g').attr('class', 'brush').call(brush);
-    
-    // Update brush on zoom
-    svg.on('zoom.brush', () => {
-      brushG.call(brush);
-    });
-
-    // Add points with optimized transitions (reduced duration for better performance)
-    const points = g
-      .selectAll<SVGCircleElement, ModelPoint>('circle')
-      .data(sampledData, (d) => d.model_id)
-      .join(
-        (enter) =>
-          enter
-            .append('circle')
-            .attr('cx', (d) => xScale(d.x))
-            .attr('cy', (d) => yScale(d.y))
-            .attr('r', 0)
-            .attr('opacity', 0)
-            .call((enter) =>
-              enter
-                .transition()
-                .duration(sampledData.length > 10000 ? 200 : 300) // Faster transitions for large datasets
-                .ease(d3.easeCubicOut)
-                .attr('r', (d): number => {
-                  if (useLogSize) {
-                    // Custom function that takes ModelPoint
-                    return (sizeScale as (d: ModelPoint) => number)(d);
-                  } else {
-                    // D3 scale that takes a number
-                    if (sizeBy === 'downloads') return (sizeScale as ReturnType<typeof d3.scaleSqrt>)(d.downloads) as number;
-                    if (sizeBy === 'likes') return (sizeScale as ReturnType<typeof d3.scaleSqrt>)(d.likes) as number;
-                    return 5;
-                  }
-                })
-                .attr('opacity', (d) => {
-                  if (selectedPoints.has(d.model_id)) return 1;
-                  if (hoveredPoint === d.model_id) return 1;
-                  return 0.7;
-                })
-            ),
-        (update) =>
-          update
-            .transition()
-            .duration(sampledData.length > 10000 ? 150 : 200) // Faster transitions for large datasets
-            .ease(d3.easeCubicOut)
-            .attr('cx', (d) => xScale(d.x))
-            .attr('cy', (d) => yScale(d.y))
-            .attr('r', (d): number => {
-              if (useLogSize) {
-                // Custom function that takes ModelPoint
-                return (sizeScale as (d: ModelPoint) => number)(d);
-              } else {
-                // D3 scale that takes a number
-                if (sizeBy === 'downloads') return (sizeScale as ReturnType<typeof d3.scaleSqrt>)(d.downloads) as number;
-                if (sizeBy === 'likes') return (sizeScale as ReturnType<typeof d3.scaleSqrt>)(d.likes) as number;
-                return 5;
-              }
-            })
-            .attr('opacity', (d) => {
-              if (selectedPoints.has(d.model_id)) return 1;
-              if (hoveredPoint === d.model_id) return 1;
-              return 0.7;
-            }),
-        (exit) =>
-          exit
-            .transition()
-            .duration(300)
-            .ease(d3.easeCubicIn)
-            .attr('r', 0)
-            .attr('opacity', 0)
-            .remove()
-      )
-      .attr('fill', (d) => {
-        if (colorBy === 'library_name') {
-          return (colorScale as d3.ScaleOrdinal<string, string>)(d.library_name || 'unknown');
-        }
-        if (colorBy === 'pipeline_tag') {
-          return (colorScale as d3.ScaleOrdinal<string, string>)(d.pipeline_tag || 'unknown');
-        }
-        if (colorBy === 'downloads') {
-          return (colorScale as d3.ScaleSequential<string, never>)(d.downloads);
-        }
-        return (colorScale as d3.ScaleSequential<string, never>)(d.likes);
-      })
-      .attr('stroke', (d) => {
-        if (selectedPoints.has(d.model_id)) return '#1a1a1a';
-        if (hoveredPoint === d.model_id) return '#4a4a4a';
-        return '#ffffff';
-      })
-      .attr('stroke-width', (d) => {
-        if (selectedPoints.has(d.model_id)) return 2.5;
-        if (hoveredPoint === d.model_id) return 2;
-        return 0.5;
-      })
-      .style('cursor', 'pointer')
-      .style('pointer-events', 'all')
-      .on('click', function (event, d) {
-        event.stopPropagation();
-        if (onPointClick) onPointClick(d);
-      })
-      .on('mouseover', function (event, d) {
-        setHoveredPoint(d.model_id);
-        const model = d as ModelPoint;
-        d3.select(this)
-          .transition()
-          .duration(150)
-          .attr('opacity', 1)
-          .attr('stroke-width', 2)
-          .attr('r', (): number => {
-            let baseSize: number;
-            if (useLogSize) {
-              // Custom function that takes ModelPoint
-              baseSize = (sizeScale as (d: ModelPoint) => number)(model);
-            } else {
-              // D3 scale that takes a number
-              baseSize = sizeBy === 'downloads' 
-                ? (sizeScale as ReturnType<typeof d3.scaleSqrt>)(model.downloads) as number
-                : sizeBy === 'likes' 
-                ? (sizeScale as ReturnType<typeof d3.scaleSqrt>)(model.likes) as number
-                : 5;
-            }
-            return baseSize * 1.3;
-          });
-        
-        // Show enhanced tooltip
-        const [x, y] = [xScale(d.x), yScale(d.y)];
-        const tooltip = g
-          .append('g')
-          .attr('class', 'tooltip')
-          .attr('transform', `translate(${x + 15},${y - 15})`)
-          .style('pointer-events', 'none');
-
-        const tooltipBg = tooltip
-          .append('rect')
-          .attr('width', 220)
-          .attr('height', 100)
-          .attr('fill', 'rgba(26, 26, 26, 0.95)')
-          .attr('rx', 2)
-          .attr('opacity', 0)
-          .transition()
-          .duration(200)
-          .attr('opacity', 1);
-
-        tooltip
-          .append('text')
-          .attr('x', 12)
-          .attr('y', 20)
-          .attr('fill', 'white')
-          .attr('font-size', '13px')
-          .attr('font-weight', 'bold')
-          .text(d.model_id.length > 30 ? d.model_id.substring(0, 30) + '...' : d.model_id);
-
-        tooltip
-          .append('text')
-          .attr('x', 12)
-          .attr('y', 40)
-          .attr('fill', '#e0e0e0')
-          .attr('font-size', '11px')
-          .text(`Library: ${d.library_name || 'N/A'}`);
-
-        tooltip
-          .append('text')
-          .attr('x', 12)
-          .attr('y', 58)
-          .attr('fill', '#e0e0e0')
-          .attr('font-size', '11px')
-          .text(`Pipeline: ${d.pipeline_tag || 'N/A'}`);
-
-        tooltip
-          .append('text')
-          .attr('x', 12)
-          .attr('y', 76)
-          .attr('fill', '#d0d0d0')
-          .attr('font-size', '11px')
-          .text(`Downloads: ${d.downloads.toLocaleString()} | Likes: ${d.likes.toLocaleString()}`);
-
-        tooltip
-          .append('text')
-          .attr('x', 12)
-          .attr('y', 94)
-          .attr('fill', '#c0c0c0')
-          .attr('font-size', '10px')
-          .text('Click for details');
-      })
-      .on('mouseout', function (event, d) {
-        setHoveredPoint(null);
-        if (!selectedPoints.has(d.model_id)) {
-          const model = d as ModelPoint;
-          d3.select(this)
-            .transition()
-            .duration(150)
-            .attr('opacity', 0.7)
-            .attr('stroke-width', 0.5)
-            .attr('r', (): number => {
-              if (useLogSize) {
-                // Custom function that takes ModelPoint
-                return (sizeScale as (d: ModelPoint) => number)(model);
-              } else {
-                // D3 scale that takes a number
-                if (sizeBy === 'downloads') return (sizeScale as ReturnType<typeof d3.scaleSqrt>)(model.downloads) as number;
-                if (sizeBy === 'likes') return (sizeScale as ReturnType<typeof d3.scaleSqrt>)(model.likes) as number;
-                return 5;
-              }
-            });
-        }
-        g.selectAll('.tooltip').transition().duration(200).attr('opacity', 0).remove();
-      });
-
-    // Axes and grid will be updated automatically via the zoom transform
-    // The scales (xScale, yScale) are already reactive to transform changes
-  }, [
-    data,
-    xScale,
-    yScale,
-    colorScale,
-    sizeScale,
-    width,
-    height,
-    margin,
-    colorBy,
-    sizeBy,
-    selectedPoints,
-    hoveredPoint,
-    transform,
-    onPointClick,
-    onBrush,
-    resetZoom,
-  ]);
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <svg ref={svgRef} width={width} height={height} style={{ display: 'block' }} />
-      <div
-        style={{
-          position: 'absolute',
-          bottom: 10,
-          left: margin.left + 10,
-          fontSize: '11px',
-          color: '#6a6a6a',
-          backgroundColor: 'rgba(255, 255, 255, 0.9)',
-          padding: '4px 8px',
-          borderRadius: '2px',
-          border: '1px solid #d0d0d0',
-          fontFamily: "'Instrument Sans', sans-serif",
-        }}
-      >
-        <strong>Navigation:</strong> Scroll to zoom | Drag to pan | Click + drag to select
-      </div>
-    </div>
-  );
-}
-

frontend/src/components/visualizations/HeatmapView.css

@@ -1,37 +0,0 @@
-.heatmap-view {
-  padding: 1rem;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-.heatmap-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.heatmap-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.heatmap-stats {
-  font-size: 0.9rem;
-  color: var(--text-secondary, #666);
-}
-
-.heatmap-svg {
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 8px;
-  background: var(--bg-primary, #ffffff);
-}
-
-.heatmap-empty {
-  padding: 2rem;
-  text-align: center;
-  color: var(--text-secondary, #666);
-}
-

frontend/src/components/visualizations/HeatmapView.tsx

@@ -1,172 +0,0 @@
-/**
- * Heatmap view showing density of models in latent space.
- * Uses D3.js for rendering.
- */
-import React, { useMemo, useRef, useEffect } from 'react';
-import * as d3 from 'd3';
-import { ModelPoint } from '../../types';
-import './HeatmapView.css';
-
-interface HeatmapViewProps {
-  data: ModelPoint[];
-  width?: number;
-  height?: number;
-}
-
-export default function HeatmapView({ data, width = 800, height = 600 }: HeatmapViewProps) {
-  const svgRef = useRef<SVGSVGElement>(null);
-
-  const heatmapData = useMemo(() => {
-    if (data.length === 0) return null;
-
-    const gridSize = 50;
-    const grid: number[][] = Array(gridSize).fill(0).map(() => Array(gridSize).fill(0));
-
-    // Find bounds
-    const xValues = data.map(d => d.x);
-    const yValues = data.map(d => d.y);
-    const xMin = Math.min(...xValues);
-    const xMax = Math.max(...xValues);
-    const yMin = Math.min(...yValues);
-    const yMax = Math.max(...yValues);
-
-    // Populate grid
-    data.forEach(model => {
-      const x = Math.floor(((model.x - xMin) / (xMax - xMin)) * (gridSize - 1));
-      const y = Math.floor(((model.y - yMin) / (yMax - yMin)) * (gridSize - 1));
-      if (x >= 0 && x < gridSize && y >= 0 && y < gridSize) {
-        grid[y][x]++;
-      }
-    });
-
-    return { grid, xMin, xMax, yMin, yMax };
-  }, [data]);
-
-  useEffect(() => {
-    if (!heatmapData || !svgRef.current) return;
-
-    const svg = d3.select(svgRef.current);
-    svg.selectAll('*').remove();
-
-    const margin = { top: 20, right: 20, bottom: 40, left: 40 };
-    const innerWidth = width - margin.left - margin.right;
-    const innerHeight = height - margin.top - margin.bottom;
-
-    const g = svg.append('g')
-      .attr('transform', `translate(${margin.left},${margin.top})`);
-
-    const gridSize = heatmapData.grid.length;
-    const cellWidth = innerWidth / gridSize;
-    const cellHeight = innerHeight / gridSize;
-
-    const maxValue = Math.max(...heatmapData.grid.flat());
-    const colorScale = d3.scaleSequential(d3.interpolateViridis)
-      .domain([0, maxValue]);
-
-    // Create heatmap cells
-    heatmapData.grid.forEach((row, y) => {
-      row.forEach((value, x) => {
-        g.append('rect')
-          .attr('x', x * cellWidth)
-          .attr('y', y * cellHeight)
-          .attr('width', cellWidth)
-          .attr('height', cellHeight)
-          .attr('fill', colorScale(value))
-          .attr('stroke', 'none')
-          .append('title')
-          .text(`Density: ${value} models`);
-      });
-    });
-
-    // Add axes
-    const xScale = d3.scaleLinear()
-      .domain([heatmapData.xMin, heatmapData.xMax])
-      .range([0, innerWidth]);
-
-    const yScale = d3.scaleLinear()
-      .domain([heatmapData.yMin, heatmapData.yMax])
-      .range([innerHeight, 0]);
-
-    const xAxis = d3.axisBottom(xScale);
-    const yAxis = d3.axisLeft(yScale);
-
-    g.append('g')
-      .attr('transform', `translate(0,${innerHeight})`)
-      .call(xAxis)
-      .append('text')
-      .attr('x', innerWidth / 2)
-      .attr('y', 35)
-      .attr('fill', 'var(--text-primary, #1a1a1a)')
-      .style('text-anchor', 'middle')
-      .text('X Coordinate');
-
-    g.append('g')
-      .call(yAxis)
-      .append('text')
-      .attr('transform', 'rotate(-90)')
-      .attr('y', -30)
-      .attr('x', -innerHeight / 2)
-      .attr('fill', 'var(--text-primary, #1a1a1a)')
-      .style('text-anchor', 'middle')
-      .text('Y Coordinate');
-
-    // Add color legend
-    const legendWidth = 20;
-    const legendHeight = 200;
-    const legendX = innerWidth + 10;
-
-    const legendScale = d3.scaleLinear()
-      .domain([0, maxValue])
-      .range([legendHeight, 0]);
-
-    const legendAxis = d3.axisRight(legendScale).ticks(5);
-
-    const legendG = g.append('g')
-      .attr('transform', `translate(${legendX}, 0)`);
-
-    const defs = svg.append('defs');
-    const gradient = defs.append('linearGradient')
-      .attr('id', 'heatmap-gradient')
-      .attr('x1', '0%')
-      .attr('x2', '0%')
-      .attr('y1', '0%')
-      .attr('y2', '100%');
-
-    const numStops = 10;
-    for (let i = 0; i <= numStops; i++) {
-      const value = (i / numStops) * maxValue;
-      gradient.append('stop')
-        .attr('offset', `${(i / numStops) * 100}%`)
-        .attr('stop-color', colorScale(value));
-    }
-
-    legendG.append('rect')
-      .attr('width', legendWidth)
-      .attr('height', legendHeight)
-      .attr('fill', 'url(#heatmap-gradient)');
-
-    legendG.append('g')
-      .attr('transform', `translate(${legendWidth}, 0)`)
-      .call(legendAxis);
-
-  }, [heatmapData, width, height]);
-
-  if (!heatmapData) {
-    return (
-      <div className="heatmap-view">
-        <div className="heatmap-empty">No data to display</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="heatmap-view">
-      <div className="heatmap-header">
-        <h3>Model Density Heatmap</h3>
-        <div className="heatmap-stats">Total Models: {data.length.toLocaleString()}</div>
-      </div>
-      <svg ref={svgRef} width={width} height={height} className="heatmap-svg" />
-    </div>
-  );
-}
-