Upload 8 files

Dockerfile

@@ -0,0 +1,36 @@
+# Dockerfile for Hugging Face Spaces Deployment
+# This runs the Streamlit version for best compatibility with HF Spaces
+
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements-hf.txt .
+RUN pip install --no-cache-dir -r requirements-hf.txt
+
+# Copy application files
+COPY streamlit.py .
+COPY web ./web
+
+# Expose port for Streamlit
+EXPOSE 7860
+
+# Hugging Face Spaces expects the app to run on port 7860
+ENV STREAMLIT_SERVER_PORT=7860
+ENV STREAMLIT_SERVER_ADDRESS=0.0.0.0
+ENV STREAMLIT_SERVER_HEADLESS=true
+ENV STREAMLIT_BROWSER_GATHER_USAGE_STATS=false
+
+# Health check
+HEALTHCHECK CMD curl --fail http://localhost:7860/_stcore/health || exit 1
+
+# Run Streamlit app
+CMD ["streamlit", "run", "streamlit.py", "--server.port=7860", "--server.address=0.0.0.0"]

mcp_server.py

@@ -0,0 +1,300 @@
+"""
+t-SNE Explorer - MCP Server
+Model Context Protocol server for handling heavy computations
+
+This server provides tools for:
+- Synthetic data generation
+- t-SNE computation
+- MNIST loading
+- Clustering algorithms
+
+Android/mobile clients connect to this server to offload heavy computations.
+"""
+
+import asyncio
+import numpy as np
+from mcp.server.models import InitializationOptions
+from mcp.server import NotificationOptions, Server
+from mcp.server.stdio import stdio_server
+from mcp.types import Tool, TextContent
+
+# Import the backend
+import sys
+import os
+sys.path.append(os.path.dirname(__file__))
+
+# Import TSNEExplorer from streamlit.py
+try:
+    # Try to import the backend class
+    import importlib.util
+    spec = importlib.util.spec_from_file_location("tsne_backend", "streamlit.py")
+    tsne_module = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(tsne_module)
+    TSNEExplorer = tsne_module.TSNEExplorer
+except:
+    # Fallback: define minimal backend
+    print("Warning: Could not import TSNEExplorer, using minimal fallback")
+    from sklearn.manifold import TSNE as SklearnTSNE
+    from sklearn.datasets import fetch_openml
+
+    class TSNEExplorer:
+        def __init__(self):
+            pass
+
+        def generate_simplex_points(self, n, d, k, seed=42):
+            # Minimal implementation
+            np.random.seed(seed)
+            X = np.random.randn(n, d)
+            return {
+                'success': True,
+                'points': X.tolist(),
+                'n': n, 'd': d, 'k': k,
+                'actual_k': k
+            }
+
+        def run_tsne(self, X, perplexity=30, learning_rate=200, n_iter=1000,
+                     early_exaggeration=12, momentum=0.8, seed=42, progress_callback=None):
+            X_array = np.array(X) if not isinstance(X, np.ndarray) else X
+            tsne = SklearnTSNE(
+                n_components=2,
+                perplexity=perplexity,
+                learning_rate=learning_rate,
+                n_iter=n_iter,
+                random_state=seed
+            )
+            Y = tsne.fit_transform(X_array)
+            return {
+                'success': True,
+                'Y': Y.tolist(),
+                'P': [[0]],
+                'Q': [[0]],
+                'C_history': [0] * 10,
+                'n': len(Y)
+            }
+
+        def load_mnist(self, max_samples=1000, subset='train'):
+            mnist = fetch_openml('mnist_784', version=1, as_frame=False, parser='auto')
+            all_images = np.array(mnist.data, dtype=np.float32)
+
+            if isinstance(mnist.target[0], str):
+                all_labels = np.array([int(label) for label in mnist.target], dtype=np.int32)
+            else:
+                all_labels = np.array(mnist.target, dtype=np.int32)
+
+            if subset == 'train':
+                images_flat = all_images[:60000]
+                labels = all_labels[:60000]
+            else:
+                images_flat = all_images[60000:]
+                labels = all_labels[60000:]
+
+            if max_samples > 0 and max_samples < len(images_flat):
+                images_flat = images_flat[:max_samples]
+                labels = labels[:max_samples]
+
+            X = images_flat / 255.0
+
+            return {
+                'success': True,
+                'X': X.tolist(),
+                'labels': labels.tolist(),
+                'count': len(images_flat),
+                'shape': list(X.shape),
+                'message': f'Loaded {len(images_flat)} MNIST {subset} samples'
+            }
+
+        def run_clustering(self, Y, method='kmeans', k=3, eps=0.5, min_samples=5):
+            Y_array = np.array(Y) if not isinstance(Y, np.ndarray) else Y
+
+            if method == 'kmeans':
+                from sklearn.cluster import KMeans
+                kmeans = KMeans(n_clusters=k, random_state=42)
+                labels = kmeans.fit_predict(Y_array)
+            else:
+                from sklearn.cluster import DBSCAN
+                dbscan = DBSCAN(eps=eps, min_samples=min_samples)
+                labels = dbscan.fit_predict(Y_array)
+
+            unique_labels = np.unique(labels)
+            summary = []
+            for label in unique_labels:
+                count = np.sum(labels == label)
+                summary.append({'label': int(label), 'count': int(count)})
+
+            return {
+                'success': True,
+                'labels': labels.tolist(),
+                'summary': summary
+            }
+
+
+# Create backend instance
+backend = TSNEExplorer()
+
+# Create MCP server
+server = Server("t-sne-explorer-server")
+
+
+@server.list_tools()
+async def handle_list_tools() -> list[Tool]:
+    """List available computation tools"""
+    return [
+        Tool(
+            name="generate_simplex_points",
+            description="Generate n points in d dimensions with k distinct distance types",
+            inputSchema={
+                "type": "object",
+                "properties": {
+                    "n": {"type": "integer", "description": "Number of points"},
+                    "d": {"type": "integer", "description": "Dimensions"},
+                    "k": {"type": "integer", "description": "Distinct distance types"},
+                    "seed": {"type": "integer", "description": "Random seed", "default": 42}
+                },
+                "required": ["n", "d", "k"]
+            }
+        ),
+        Tool(
+            name="run_tsne",
+            description="Run t-SNE dimensionality reduction",
+            inputSchema={
+                "type": "object",
+                "properties": {
+                    "X": {
+                        "type": "array",
+                        "description": "Input data matrix (n x d)",
+                        "items": {"type": "array", "items": {"type": "number"}}
+                    },
+                    "perplexity": {"type": "integer", "default": 30},
+                    "learning_rate": {"type": "integer", "default": 200},
+                    "n_iter": {"type": "integer", "default": 1000},
+                    "early_exaggeration": {"type": "integer", "default": 12},
+                    "momentum": {"type": "number", "default": 0.8},
+                    "seed": {"type": "integer", "default": 42}
+                },
+                "required": ["X"]
+            }
+        ),
+        Tool(
+            name="load_mnist",
+            description="Load MNIST handwritten digits dataset",
+            inputSchema={
+                "type": "object",
+                "properties": {
+                    "max_samples": {"type": "integer", "default": 1000},
+                    "subset": {"type": "string", "enum": ["train", "test"], "default": "train"}
+                }
+            }
+        ),
+        Tool(
+            name="run_clustering",
+            description="Run clustering on 2D embeddings",
+            inputSchema={
+                "type": "object",
+                "properties": {
+                    "Y": {
+                        "type": "array",
+                        "description": "2D embedding coordinates",
+                        "items": {"type": "array", "items": {"type": "number"}}
+                    },
+                    "method": {"type": "string", "enum": ["kmeans", "dbscan"], "default": "kmeans"},
+                    "k": {"type": "integer", "default": 3},
+                    "eps": {"type": "number", "default": 0.5},
+                    "min_samples": {"type": "integer", "default": 5}
+                },
+                "required": ["Y"]
+            }
+        )
+    ]
+
+
+@server.call_tool()
+async def handle_call_tool(name: str, arguments: dict) -> list[TextContent]:
+    """Handle tool execution"""
+
+    try:
+        if name == "generate_simplex_points":
+            n = arguments.get("n")
+            d = arguments.get("d")
+            k = arguments.get("k")
+            seed = arguments.get("seed", 42)
+
+            result = backend.generate_simplex_points(n, d, k, seed)
+
+            return [TextContent(
+                type="text",
+                text=str(result)
+            )]
+
+        elif name == "run_tsne":
+            X = np.array(arguments.get("X"))
+            perplexity = arguments.get("perplexity", 30)
+            learning_rate = arguments.get("learning_rate", 200)
+            n_iter = arguments.get("n_iter", 1000)
+            early_exaggeration = arguments.get("early_exaggeration", 12)
+            momentum = arguments.get("momentum", 0.8)
+            seed = arguments.get("seed", 42)
+
+            result = backend.run_tsne(
+                X, perplexity, learning_rate, n_iter,
+                early_exaggeration, momentum, seed
+            )
+
+            return [TextContent(
+                type="text",
+                text=str(result)
+            )]
+
+        elif name == "load_mnist":
+            max_samples = arguments.get("max_samples", 1000)
+            subset = arguments.get("subset", "train")
+
+            result = backend.load_mnist(max_samples, subset)
+
+            return [TextContent(
+                type="text",
+                text=str(result)
+            )]
+
+        elif name == "run_clustering":
+            Y = np.array(arguments.get("Y"))
+            method = arguments.get("method", "kmeans")
+            k = arguments.get("k", 3)
+            eps = arguments.get("eps", 0.5)
+            min_samples = arguments.get("min_samples", 5)
+
+            result = backend.run_clustering(Y, method, k, eps, min_samples)
+
+            return [TextContent(
+                type="text",
+                text=str(result)
+            )]
+
+        else:
+            raise ValueError(f"Unknown tool: {name}")
+
+    except Exception as e:
+        return [TextContent(
+            type="text",
+            text=str({"success": False, "error": str(e)})
+        )]
+
+
+async def main():
+    """Run the MCP server"""
+    async with stdio_server() as (read_stream, write_stream):
+        await server.run(
+            read_stream,
+            write_stream,
+            InitializationOptions(
+                server_name="t-sne-explorer",
+                server_version="1.0.0",
+                capabilities=server.get_capabilities(
+                    notification_options=NotificationOptions(),
+                    experimental_capabilities={}
+                )
+            )
+        )
+
+
+if __name__ == "__main__":
+    asyncio.run(main())

requirements-hf.txt

@@ -0,0 +1,13 @@
+# Requirements for Hugging Face Spaces Deployment
+# Optimized for cloud deployment with minimal dependencies
+
+# Core dependencies
+streamlit==1.30.0
+numpy==1.24.3
+pandas==2.0.3
+scikit-learn==1.3.2
+Pillow==10.1.0
+plotly==5.18.0
+
+# Additional for stability
+protobuf==3.20.3

streamlit.py

@@ -0,0 +1,1049 @@
+"""
+t-SNE Explorer - Streamlit Application
+A transparent t-SNE implementation with synthetic data generation and file upload support
+
+This version uses Streamlit for the UI while maintaining the same functionality as app.py.
+Backend is MCP-ready for future Android app integration.
+"""
+
+import os
+import warnings
+import numpy as np
+import pandas as pd
+import streamlit as st
+import plotly.graph_objects as go
+from io import BytesIO
+from PIL import Image
+from pathlib import Path
+
+# Suppress warnings
+warnings.filterwarnings('ignore')
+os.environ['PYTHONWARNINGS'] = 'ignore'
+
+try:
+    from sklearn.manifold import TSNE as SklearnTSNE
+    from sklearn.datasets import fetch_openml
+except Exception:
+    SklearnTSNE = None
+    fetch_openml = None
+
+
+# ==================== Styling ====================
+
+def inject_custom_css():
+    """Inject custom CSS from web/style.css to match the original design"""
+    st.markdown("""
+    <style>
+    /* Import styling from web folder */
+    :root {
+        --primary: #667eea;
+        --primary-dark: #5568d3;
+        --secondary: #764ba2;
+        --success: #10b981;
+        --warning: #f59e0b;
+        --error: #ef4444;
+    }
+
+    /* Main app styling */
+    .stApp {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+
+    /* Sidebar styling */
+    .css-1d391kg {
+        background-color: #f8f9fa;
+    }
+
+    /* Headers */
+    h1 {
+        color: white;
+        font-weight: 800;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    }
+
+    h2, h3 {
+        color: #667eea;
+        font-weight: 700;
+    }
+
+    /* Buttons */
+    .stButton > button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 12px 24px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+    }
+
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+
+    /* Info boxes */
+    .stAlert {
+        border-radius: 8px;
+        border-left: 4px solid #667eea;
+    }
+
+    /* Dataframes */
+    .dataframe {
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    /* Cards */
+    .element-container {
+        background: white;
+        border-radius: 12px;
+        padding: 10px;
+        margin-bottom: 10px;
+    }
+
+    /* Progress bar */
+    .stProgress > div > div {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+
+# ==================== TSNEExplorer Backend Class (MCP-Ready) ====================
+
+class TSNEExplorer:
+    """
+    Backend API for t-SNE computations.
+    This class is MCP-ready - all methods return JSON-serializable data
+    and can be called directly (Streamlit) or via API endpoints (future Android app).
+    """
+
+    def __init__(self):
+        pass
+
+    # ==================== Synthetic Data Generation ====================
+
+    def generate_simplex_points(self, n, d, k, seed=42):
+        """Generate n points in d dimensions with k distinct distance types"""
+        np.random.seed(seed)
+
+        # Validate inputs
+        max_distances = (n * (n - 1)) // 2
+        if k > max_distances:
+            return {
+                'success': False,
+                'error': f'Cannot create {k} distinct distances with only {n} points. '
+                        f'Maximum possible is {max_distances} distinct distances.'
+            }
+
+        if k < 1:
+            return {
+                'success': False,
+                'error': f'k must be at least 1 (you specified k={k}).'
+            }
+
+        # Special case: k=1
+        if k == 1:
+            if n > d + 1:
+                return {
+                    'success': False,
+                    'error': f'For k=1 (equidistant points), maximum n is {d+1} in {d}D.'
+                }
+            X = self._generate_regular_simplex(n, d)
+        else:
+            X = self._generate_k_distance_set(n, d, k, seed)
+
+        # Compute pairwise distances
+        distances = self._compute_pairwise_distances(X)
+        unique_distances = np.unique(np.round(distances[distances > 0], decimals=6))
+
+        return {
+            'success': True,
+            'points': X.tolist(),
+            'n': n,
+            'd': d,
+            'k': k,
+            'actual_k': len(unique_distances),
+            'unique_distances': unique_distances.tolist(),
+            'distances_min': float(np.min(distances[distances > 0])) if n > 1 else 0,
+            'distances_mean': float(np.mean(distances[distances > 0])) if n > 1 else 0,
+            'distances_max': float(np.max(distances)),
+        }
+
+    def _generate_regular_simplex(self, n, d):
+        """Generate regular n-simplex with equal pairwise distances"""
+        if n == 1:
+            return np.zeros((1, d))
+
+        if n == 2:
+            X = np.zeros((2, d))
+            X[0, 0] = -0.5
+            X[1, 0] = 0.5
+            return X
+
+        vertices = np.eye(n)
+        vertices = vertices - np.mean(vertices, axis=0)
+        vertices = vertices / np.sqrt(2)
+
+        if d >= n - 1:
+            X = vertices[:, :min(d, n)]
+            if d > n:
+                X = np.pad(X, ((0, 0), (0, d - n)), 'constant')
+        else:
+            X = vertices[:, :d]
+
+        return X
+
+    def _generate_k_distance_set(self, n, d, k, seed):
+        """Generate points aiming for k distinct pairwise distances"""
+        np.random.seed(seed)
+
+        if n <= 0 or d <= 0:
+            return np.zeros((0, max(d, 0)))
+
+        if n == 1:
+            return np.zeros((1, d))
+
+        # Exact k=2 constructions
+        if k == 2:
+            if d >= 2 and n == 5:
+                return self._regular_ngon(n=5, d=d)
+            if n <= 2 * d:
+                return self._cross_polytope(n=n, d=d)
+            return self._optimize_k_distance_set(n=n, d=d, k=k, seed=seed)
+
+        # Exact k>=3 constructions
+        if k >= 3 and d >= k and k <= 12 and n <= (2 ** k):
+            return self._k_cube_k_distance_set(n=n, d=d, k=k)
+
+        if k == 3 and d >= 2 and n in (6, 7):
+            return self._regular_ngon(n=n, d=d)
+
+        return self._optimize_k_distance_set(n=n, d=d, k=k, seed=seed)
+
+    def _regular_ngon(self, n, d):
+        """Regular n-gon in 2D"""
+        X = np.zeros((n, d))
+        if d < 2:
+            return X
+        angles = np.linspace(0, 2 * np.pi, n + 1)[:-1]
+        X[:, 0] = np.cos(angles)
+        X[:, 1] = np.sin(angles)
+        return X
+
+    def _cross_polytope(self, n, d):
+        """Cross polytope vertices"""
+        X = np.zeros((n, d))
+        if n == 1:
+            return X
+        point_idx = 0
+        for i in range(d):
+            if point_idx >= n:
+                break
+            X[point_idx, i] = 1.0
+            point_idx += 1
+            if point_idx >= n:
+                break
+            X[point_idx, i] = -1.0
+            point_idx += 1
+        return X
+
+    def _k_cube_k_distance_set(self, n, d, k):
+        """k-dimensional hypercube vertices"""
+        vertices = []
+        seen = set()
+
+        origin = tuple([0] * k)
+        vertices.append(origin)
+        seen.add(origin)
+
+        for weight in range(1, k + 1):
+            if len(vertices) >= n:
+                break
+            v = tuple([1] * weight + [0] * (k - weight))
+            if v not in seen:
+                vertices.append(v)
+                seen.add(v)
+
+        for mask in range(1, 2 ** k):
+            if len(vertices) >= n:
+                break
+            v = tuple((mask >> bit) & 1 for bit in range(k))
+            if v in seen:
+                continue
+            vertices.append(v)
+            seen.add(v)
+
+        Xk = np.array(vertices[:n], dtype=float)
+        X = np.zeros((n, d), dtype=float)
+        X[:, :k] = Xk
+        X = X - X.mean(axis=0, keepdims=True)
+        return X
+
+    def _optimize_k_distance_set(self, n, d, k, seed, n_iter=2000, lr=0.02):
+        """Heuristic optimization for k distances"""
+        rng = np.random.default_rng(seed)
+        X = rng.standard_normal((n, d)) * 0.1
+
+        if n < 2:
+            return X
+
+        D0 = self._compute_pairwise_distances(X)
+        upper = D0[np.triu_indices(n, k=1)]
+        if upper.size == 0:
+            return X
+
+        r_min = float(np.percentile(upper, 10))
+        r_max = float(np.percentile(upper, 90))
+        if r_max <= 1e-8:
+            r_max = 1.0
+        radii = np.linspace(max(r_min, 1e-3), max(r_max, 1e-3), k)
+
+        use_minibatch = n > 150
+        batch_size = min(5000, (n * (n - 1)) // 2) if use_minibatch else 0
+        ema = 0.15
+
+        for _ in range(n_iter):
+            if use_minibatch:
+                ii = rng.integers(0, n, size=batch_size)
+                jj = rng.integers(0, n, size=batch_size)
+                mask = ii != jj
+                if not np.any(mask):
+                    continue
+                ii = ii[mask]
+                jj = jj[mask]
+
+                diff = X[ii] - X[jj]
+                dist = np.sqrt(np.sum(diff * diff, axis=1))
+                dist_safe = np.maximum(dist, 1e-12)
+
+                assign = np.argmin(np.abs(dist[:, np.newaxis] - radii[np.newaxis, :]), axis=1)
+                target = radii[assign]
+
+                for m in range(k):
+                    m_mask = assign == m
+                    if np.any(m_mask):
+                        radii[m] = (1 - ema) * radii[m] + ema * float(np.mean(dist[m_mask]))
+
+                err = dist_safe - target
+                coef = (2.0 * err / dist_safe)[:, np.newaxis]
+                grad_pairs = coef * diff
+
+                grad = np.zeros_like(X)
+                np.add.at(grad, ii, grad_pairs)
+                np.add.at(grad, jj, -grad_pairs)
+            else:
+                D = self._compute_pairwise_distances(X)
+                iu, ju = np.triu_indices(n, k=1)
+                dist = D[iu, ju]
+                dist_safe = np.maximum(dist, 1e-12)
+
+                assign = np.argmin(np.abs(dist[:, np.newaxis] - radii[np.newaxis, :]), axis=1)
+                target = radii[assign]
+
+                for m in range(k):
+                    m_mask = assign == m
+                    if np.any(m_mask):
+                        radii[m] = float(np.mean(dist[m_mask]))
+
+                err = dist_safe - target
+                coef = (2.0 * err / dist_safe)[:, np.newaxis]
+                diff = X[iu] - X[ju]
+                grad_pairs = coef * diff
+
+                grad = np.zeros_like(X)
+                np.add.at(grad, iu, grad_pairs)
+                np.add.at(grad, ju, -grad_pairs)
+
+            grad += 1e-3 * X
+            X = X - lr * grad
+            X = X - X.mean(axis=0, keepdims=True)
+
+        return X
+
+    def _compute_pairwise_distances(self, X):
+        """Compute pairwise Euclidean distances"""
+        n = X.shape[0]
+        distances = np.zeros((n, n))
+        for i in range(n):
+            for j in range(i+1, n):
+                dist = np.linalg.norm(X[i] - X[j])
+                distances[i, j] = dist
+                distances[j, i] = dist
+        return distances
+
+    # ==================== MNIST Dataset ====================
+
+    def load_mnist(self, max_samples=1000, subset='train'):
+        """Load MNIST dataset"""
+        try:
+            if fetch_openml is None:
+                return {'success': False, 'error': 'scikit-learn not available'}
+
+            mnist = fetch_openml('mnist_784', version=1, as_frame=False, parser='auto')
+
+            all_images = np.array(mnist.data, dtype=np.float32)
+
+            if isinstance(mnist.target[0], str):
+                all_labels = np.array([int(label) for label in mnist.target], dtype=np.int32)
+            else:
+                all_labels = np.array(mnist.target, dtype=np.int32)
+
+            if subset == 'train':
+                images_flat = all_images[:60000]
+                labels = all_labels[:60000]
+            else:
+                images_flat = all_images[60000:]
+                labels = all_labels[60000:]
+
+            if max_samples > 0 and max_samples < len(images_flat):
+                images_flat = images_flat[:max_samples]
+                labels = labels[:max_samples]
+
+            X = images_flat / 255.0
+
+            return {
+                'success': True,
+                'X': X,
+                'labels': labels,
+                'count': len(images_flat),
+                'shape': X.shape,
+                'message': f'Loaded {len(images_flat)} MNIST {subset} samples'
+            }
+
+        except Exception as e:
+            return {'success': False, 'error': str(e)}
+
+    # ==================== t-SNE Implementation ====================
+
+    def run_tsne(self, X, perplexity=30, learning_rate=200, n_iter=1000,
+                 early_exaggeration=12, momentum=0.8, seed=42, progress_callback=None):
+        """Run t-SNE with transparent internals"""
+        try:
+            n, d = X.shape
+
+            if n > 1000:
+                return {'success': False, 'error': f'Dataset too large ({n} points). Please use n <= 1000.'}
+
+            # Initialize Y
+            np.random.seed(seed)
+            Y = np.random.randn(n, 2) * 0.0001
+
+            # Compute P
+            if progress_callback:
+                progress_callback(0, 'Computing P matrix...')
+            P = self._compute_P(X, perplexity)
+
+            # Optimize
+            if progress_callback:
+                progress_callback(0, 'Starting t-SNE optimization...')
+            Y, Q, C_history = self._optimize_tsne(
+                P, Y, learning_rate, n_iter, early_exaggeration, momentum, progress_callback
+            )
+
+            return {
+                'success': True,
+                'Y': Y,
+                'P': P,
+                'Q': Q,
+                'C_history': C_history,
+                'n': n
+            }
+
+        except Exception as e:
+            return {'success': False, 'error': str(e)}
+
+    def _compute_P(self, X, perplexity):
+        """Compute pairwise affinities P_ij"""
+        n = X.shape[0]
+
+        sum_X = np.sum(X**2, axis=1)
+        D = sum_X[:, np.newaxis] + sum_X[np.newaxis, :] - 2 * X @ X.T
+        D = np.maximum(D, 0)
+
+        P = np.zeros((n, n))
+        target_entropy = np.log2(perplexity)
+
+        for i in range(n):
+            beta_min = -np.inf
+            beta_max = np.inf
+            beta = 1.0
+
+            for _ in range(50):
+                Di = D[i].copy()
+                Di[i] = 0
+
+                P_i = np.exp(-Di * beta)
+                P_i[i] = 0
+                sum_P_i = np.sum(P_i)
+
+                if sum_P_i == 0:
+                    P_i = np.ones(n) / n
+                    sum_P_i = 1.0
+
+                P_i = P_i / sum_P_i
+
+                P_i_nonzero = P_i[P_i > 1e-12]
+                H = -np.sum(P_i_nonzero * np.log2(P_i_nonzero))
+
+                H_diff = H - target_entropy
+                if np.abs(H_diff) < 1e-5:
+                    break
+
+                if H_diff > 0:
+                    beta_min = beta
+                    if beta_max == np.inf:
+                        beta = beta * 2
+                    else:
+                        beta = (beta + beta_max) / 2
+                else:
+                    beta_max = beta
+                    if beta_min == -np.inf:
+                        beta = beta / 2
+                    else:
+                        beta = (beta + beta_min) / 2
+
+            P[i] = P_i
+
+        P = (P + P.T) / (2 * n)
+        P = np.maximum(P, 1e-12)
+
+        return P
+
+    def _optimize_tsne(self, P, Y, learning_rate, n_iter, early_exaggeration, momentum, progress_callback=None):
+        """Optimize t-SNE using gradient descent"""
+        n = Y.shape[0]
+        Y_velocity = np.zeros_like(Y)
+        C_history = []
+
+        P_exag = P * early_exaggeration
+
+        for iteration in range(n_iter):
+            P_current = P_exag if iteration < 250 else P
+
+            sum_Y = np.sum(Y**2, axis=1)
+            D_low = sum_Y[:, np.newaxis] + sum_Y[np.newaxis, :] - 2 * Y @ Y.T
+            D_low = np.maximum(D_low, 0)
+
+            Q = (1 + D_low) ** (-1)
+            np.fill_diagonal(Q, 0)
+            sum_Q = np.sum(Q)
+            if sum_Q < 1e-12:
+                sum_Q = 1e-12
+            Q = Q / sum_Q
+            Q = np.maximum(Q, 1e-12)
+
+            C = np.sum(P_current * np.log((P_current + 1e-12) / (Q + 1e-12)))
+            C_history.append(float(C))
+
+            PQ_diff = P_current - Q
+            repulsion = (1 + D_low) ** (-1)
+            attraction_repulsion = (PQ_diff * repulsion)[:, :, np.newaxis]
+            Y_diff = Y[:, np.newaxis, :] - Y[np.newaxis, :, :]
+            gradient = 4 * (attraction_repulsion * Y_diff).sum(axis=1)
+
+            Y_velocity = momentum * Y_velocity - learning_rate * gradient
+            Y = Y + Y_velocity
+            Y = Y - Y.mean(axis=0)
+
+            if progress_callback and iteration % 10 == 0:
+                progress_callback(iteration / n_iter, f'Iteration {iteration}/{n_iter}, Cost: {C:.4f}')
+
+        # Final Q computation
+        sum_Y = np.sum(Y**2, axis=1)
+        D_low = sum_Y[:, np.newaxis] + sum_Y[np.newaxis, :] - 2 * Y @ Y.T
+        D_low = np.maximum(D_low, 0)
+        Q = (1 + D_low) ** (-1)
+        np.fill_diagonal(Q, 0)
+        sum_Q = np.sum(Q)
+        if sum_Q < 1e-12:
+            sum_Q = 1e-12
+        Q = Q / sum_Q
+        Q = np.maximum(Q, 1e-12)
+
+        if progress_callback:
+            progress_callback(1.0, 'Complete!')
+
+        return Y, Q, C_history
+
+    # ==================== Clustering ====================
+
+    def run_clustering(self, Y, method='kmeans', k=3, eps=0.5, min_samples=5):
+        """Run clustering on t-SNE results"""
+        try:
+            if method == 'kmeans':
+                labels = self._kmeans(Y, k)
+            elif method == 'dbscan':
+                labels = self._dbscan(Y, eps, min_samples)
+            else:
+                return {'success': False, 'error': 'Unknown clustering method'}
+
+            unique_labels = np.unique(labels)
+            summary = []
+            for label in unique_labels:
+                count = np.sum(labels == label)
+                summary.append({
+                    'label': int(label),
+                    'count': int(count)
+                })
+
+            return {
+                'success': True,
+                'labels': labels.tolist(),
+                'summary': summary
+            }
+
+        except Exception as e:
+            return {'success': False, 'error': str(e)}
+
+    def _kmeans(self, X, k, max_iter=100):
+        """K-means clustering"""
+        n = X.shape[0]
+        indices = np.random.choice(n, k, replace=False)
+        centroids = X[indices].copy()
+        labels = np.zeros(n, dtype=int)
+
+        for _ in range(max_iter):
+            distances = np.zeros((n, k))
+            for i in range(k):
+                distances[:, i] = np.sum((X - centroids[i])**2, axis=1)
+
+            new_labels = np.argmin(distances, axis=1)
+
+            if np.all(labels == new_labels):
+                break
+
+            labels = new_labels
+
+            for i in range(k):
+                cluster_points = X[labels == i]
+                if len(cluster_points) > 0:
+                    centroids[i] = cluster_points.mean(axis=0)
+
+        return labels
+
+    def _dbscan(self, X, eps, min_samples):
+        """DBSCAN clustering"""
+        n = X.shape[0]
+        labels = -np.ones(n, dtype=int)
+        cluster_id = 0
+
+        for i in range(n):
+            if labels[i] != -1:
+                continue
+
+            neighbors = self._find_neighbors(X, i, eps)
+
+            if len(neighbors) < min_samples:
+                labels[i] = -1
+            else:
+                self._expand_cluster(X, labels, i, neighbors, cluster_id, eps, min_samples)
+                cluster_id += 1
+
+        return labels
+
+    def _find_neighbors(self, X, point_idx, eps):
+        """Find neighbors within eps distance"""
+        distances = np.sum((X - X[point_idx])**2, axis=1)
+        return np.where(distances <= eps**2)[0]
+
+    def _expand_cluster(self, X, labels, point_idx, neighbors, cluster_id, eps, min_samples):
+        """Expand cluster from seed point"""
+        labels[point_idx] = cluster_id
+
+        i = 0
+        while i < len(neighbors):
+            neighbor_idx = neighbors[i]
+
+            if labels[neighbor_idx] == -1:
+                labels[neighbor_idx] = cluster_id
+
+            if labels[neighbor_idx] != -1:
+                i += 1
+                continue
+
+            labels[neighbor_idx] = cluster_id
+
+            new_neighbors = self._find_neighbors(X, neighbor_idx, eps)
+            if len(new_neighbors) >= min_samples:
+                neighbors = np.concatenate([neighbors, new_neighbors])
+
+            i += 1
+
+
+# ==================== Streamlit UI ====================
+
+def main():
+    # Page config
+    st.set_page_config(
+        page_title="t-SNE Explorer",
+        page_icon="📊",
+        layout="wide",
+        initial_sidebar_state="expanded"
+    )
+
+    # Inject custom CSS
+    inject_custom_css()
+
+    # Header
+    st.markdown("""
+    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                padding: 40px; text-align: center; border-radius: 16px; margin-bottom: 20px;">
+        <h1 style="color: white; font-size: 3em; margin-bottom: 10px;">t-SNE Explorer</h1>
+        <p style="color: white; font-size: 1.2em; opacity: 0.95;">
+            Transparent t-SNE with synthetic data generation and file uploads
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Initialize backend
+    if 'backend' not in st.session_state:
+        st.session_state.backend = TSNEExplorer()
+
+    # Initialize session state
+    if 'datasets' not in st.session_state:
+        st.session_state.datasets = {}
+    if 'current_results' not in st.session_state:
+        st.session_state.current_results = None
+
+    # Sidebar navigation
+    st.sidebar.title("Navigation")
+    tab = st.sidebar.radio("Select Section", ["t-SNE", "Upload"])
+
+    if tab == "t-SNE":
+        tsne_tab()
+    else:
+        upload_tab()
+
+
+def tsne_tab():
+    """Main t-SNE tab"""
+    st.header("t-SNE Analysis")
+
+    # Section A: Synthetic Data Generator
+    with st.expander("A) Synthetic Data Generator", expanded=True):
+        st.info("Generate n points in d dimensions with k distinct distance types. "
+                "Optimal: k=1 (n≤d+1 simplex), k=2 (n=5 pentagon), k=3 (n=7 heptagon).")
+
+        col1, col2, col3, col4 = st.columns(4)
+        with col1:
+            n = st.number_input("n (points)", min_value=1, max_value=100, value=6)
+        with col2:
+            d = st.number_input("d (dimensions)", min_value=1, max_value=100, value=10)
+        with col3:
+            k = st.number_input("k (distance types)", min_value=1, value=2)
+        with col4:
+            seed = st.number_input("seed", min_value=0, value=42)
+
+        if st.button("Generate Points", key="gen_points"):
+            with st.spinner("Generating synthetic data..."):
+                result = st.session_state.backend.generate_simplex_points(n, d, k, seed)
+
+                if result['success']:
+                    # Store dataset
+                    dataset_id = f"synthetic_{len(st.session_state.datasets)}"
+                    st.session_state.datasets[dataset_id] = {
+                        'type': 'synthetic',
+                        'X': np.array(result['points']),
+                        'shape': (result['n'], result['d'])
+                    }
+
+                    # Display stats
+                    st.success(f"Generated {result['n']} points successfully!")
+
+                    col1, col2, col3, col4 = st.columns(4)
+                    col1.metric("Points", result['n'])
+                    col2.metric("Dimensions", result['d'])
+                    col3.metric("Target k", result['k'])
+                    col4.metric("Actual k", result['actual_k'])
+
+                    st.write(f"**Unique Distances:** {', '.join([f'{d:.4f}' for d in result['unique_distances']])}")
+                    st.write(f"**Range:** min={result['distances_min']:.4f}, "
+                            f"mean={result['distances_mean']:.4f}, max={result['distances_max']:.4f}")
+
+                    # Display points table
+                    points_df = pd.DataFrame(
+                        result['points'],
+                        columns=[f'x{i+1}' for i in range(result['d'])]
+                    )
+                    st.dataframe(points_df.head(10), use_container_width=True)
+                else:
+                    st.error(result['error'])
+
+    # Section B: MNIST Loader
+    with st.expander("B) Load MNIST Dataset"):
+        col1, col2 = st.columns(2)
+        with col1:
+            subset = st.selectbox("Subset", ["train", "test"])
+        with col2:
+            max_samples = st.number_input("Samples", min_value=100, max_value=10000, value=1000, step=100)
+
+        if st.button("Load MNIST", key="load_mnist"):
+            with st.spinner("Loading MNIST dataset..."):
+                progress_bar = st.progress(0)
+                progress_bar.progress(0.3)
+
+                result = st.session_state.backend.load_mnist(max_samples, subset)
+                progress_bar.progress(1.0)
+
+                if result['success']:
+                    dataset_id = f"mnist_{len(st.session_state.datasets)}"
+                    st.session_state.datasets[dataset_id] = {
+                        'type': 'mnist',
+                        'X': result['X'],
+                        'labels': result['labels'],
+                        'count': result['count']
+                    }
+                    st.success(result['message'])
+                else:
+                    st.error(result['error'])
+
+    # Section C: t-SNE Runner
+    with st.expander("C) t-SNE Runner", expanded=True):
+        # Dataset selector
+        dataset_options = {f"{k} ({v['type']})": k for k, v in st.session_state.datasets.items()}
+
+        if len(dataset_options) == 0:
+            st.warning("No datasets available. Generate synthetic data or load MNIST first.")
+            return
+
+        selected_dataset_key = st.selectbox(
+            "Select Dataset",
+            options=list(dataset_options.keys())
+        )
+        selected_dataset_id = dataset_options[selected_dataset_key]
+
+        # t-SNE parameters
+        col1, col2, col3 = st.columns(3)
+        with col1:
+            perplexity = st.number_input("Perplexity", min_value=5, max_value=50, value=30)
+            learning_rate = st.number_input("Learning Rate", min_value=10, max_value=1000, value=200)
+        with col2:
+            iterations = st.number_input("Iterations", min_value=100, max_value=5000, value=1000)
+            early_exag = st.number_input("Early Exaggeration", min_value=1, max_value=50, value=12)
+        with col3:
+            momentum = st.number_input("Momentum", min_value=0.0, max_value=1.0, value=0.8, step=0.1)
+            tsne_seed = st.number_input("Seed", min_value=0, value=42, key="tsne_seed")
+
+        if st.button("Run t-SNE", key="run_tsne"):
+            dataset = st.session_state.datasets[selected_dataset_id]
+            X = dataset['X']
+
+            progress_bar = st.progress(0)
+            progress_text = st.empty()
+
+            def progress_callback(progress, message):
+                progress_bar.progress(progress)
+                progress_text.text(message)
+
+            result = st.session_state.backend.run_tsne(
+                X, perplexity, learning_rate, iterations,
+                early_exag, momentum, tsne_seed, progress_callback
+            )
+
+            if result['success']:
+                st.session_state.current_results = result
+                st.session_state.current_results['dataset_id'] = selected_dataset_id
+                st.session_state.current_results['labels'] = dataset.get('labels')
+                st.success("t-SNE completed successfully!")
+                st.rerun()
+            else:
+                st.error(result['error'])
+
+    # Section D: Results Display
+    if st.session_state.current_results:
+        display_results()
+
+
+def display_results():
+    """Display t-SNE results"""
+    st.header("Results & Internals")
+
+    results = st.session_state.current_results
+    Y = np.array(results['Y'])
+    P = np.array(results['P'])
+    Q = np.array(results['Q'])
+    C_history = results['C_history']
+    labels = results.get('labels')
+
+    # 2D Scatter Plot
+    st.subheader("2D t-SNE Embedding")
+
+    if labels is not None:
+        # Color by labels
+        fig = go.Figure()
+
+        unique_labels = np.unique(labels)
+        colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6',
+                  '#1abc9c', '#e67e22', '#95a5a6', '#34495e', '#c0392b']
+
+        for label in unique_labels:
+            mask = labels == label
+            fig.add_trace(go.Scatter(
+                x=Y[mask, 0],
+                y=Y[mask, 1],
+                mode='markers',
+                name=f'Digit {label}',
+                marker=dict(size=8, color=colors[int(label) % len(colors)],
+                           line=dict(color='white', width=1))
+            ))
+    else:
+        # Default plot
+        fig = go.Figure(data=go.Scatter(
+            x=Y[:, 0],
+            y=Y[:, 1],
+            mode='markers+text',
+            text=[f'y{i+1}' for i in range(len(Y))],
+            textposition='top center',
+            marker=dict(size=10, color='#667eea', line=dict(color='white', width=1))
+        ))
+
+    fig.update_layout(
+        title="t-SNE Embedding",
+        xaxis_title="Dimension 1",
+        yaxis_title="Dimension 2",
+        height=500
+    )
+    st.plotly_chart(fig, use_container_width=True)
+
+    # Cost Plot
+    st.subheader("Cost (KL Divergence) Over Iterations")
+    fig_cost = go.Figure(data=go.Scatter(
+        y=C_history,
+        mode='lines',
+        line=dict(color='#e74c3c', width=2)
+    ))
+    fig_cost.update_layout(
+        xaxis_title="Iteration",
+        yaxis_title="Cost (KL Divergence)",
+        height=400
+    )
+    st.plotly_chart(fig_cost, use_container_width=True)
+
+    # Matrices
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.subheader("P Matrix (High-D Affinities)")
+        fig_p = go.Figure(data=go.Heatmap(z=P, colorscale='Viridis'))
+        fig_p.update_layout(height=400)
+        st.plotly_chart(fig_p, use_container_width=True)
+
+    with col2:
+        st.subheader("Q Matrix (Low-D Affinities)")
+        fig_q = go.Figure(data=go.Heatmap(z=Q, colorscale='Viridis'))
+        fig_q.update_layout(height=400)
+        st.plotly_chart(fig_q, use_container_width=True)
+
+    # Coordinates Table
+    st.subheader("2D Coordinates")
+    coords_df = pd.DataFrame(Y, columns=['Dim 1', 'Dim 2'])
+    coords_df.index = [f'y{i+1}' for i in range(len(Y))]
+    st.dataframe(coords_df.head(20), use_container_width=True)
+
+    # Export
+    if st.button("Export Results (CSV)"):
+        csv = coords_df.to_csv()
+        st.download_button(
+            label="Download CSV",
+            data=csv,
+            file_name="tsne_results.csv",
+            mime="text/csv"
+        )
+        st.success("Results exported!")
+
+    # Clustering section
+    if labels is not None:
+        st.subheader("Clustering")
+        cluster_method = st.selectbox("Method", ["kmeans", "dbscan"])
+
+        if cluster_method == "kmeans":
+            k = st.number_input("k (clusters)", min_value=2, max_value=10, value=3)
+            if st.button("Run K-Means"):
+                result = st.session_state.backend.run_clustering(Y, 'kmeans', k=k)
+                if result['success']:
+                    st.success("Clustering complete!")
+                    st.write("**Cluster Summary:**")
+                    st.json(result['summary'])
+        else:
+            col1, col2 = st.columns(2)
+            with col1:
+                eps = st.number_input("eps", min_value=0.1, value=0.5, step=0.1)
+            with col2:
+                min_samples = st.number_input("min_samples", min_value=1, value=5)
+            if st.button("Run DBSCAN"):
+                result = st.session_state.backend.run_clustering(Y, 'dbscan', eps=eps, min_samples=min_samples)
+                if result['success']:
+                    st.success("Clustering complete!")
+                    st.write("**Cluster Summary:**")
+                    st.json(result['summary'])
+
+
+def upload_tab():
+    """Upload tab for CSV and images"""
+    st.header("Upload Data")
+
+    st.subheader("CSV Files")
+    uploaded_csv = st.file_uploader("Upload CSV", type=['csv'], accept_multiple_files=False)
+
+    if uploaded_csv:
+        try:
+            df = pd.read_csv(uploaded_csv)
+
+            dataset_id = f"csv_{len(st.session_state.datasets)}"
+            numeric_columns = df.select_dtypes(include=[np.number]).columns.tolist()
+
+            st.success(f"Uploaded {uploaded_csv.name}")
+            st.write(f"Shape: {df.shape}")
+            st.write(f"Numeric columns: {', '.join(numeric_columns)}")
+
+            st.dataframe(df.head())
+
+            # Column selector
+            selected_cols = st.multiselect("Select numeric columns", numeric_columns, default=numeric_columns)
+            handle_missing = st.selectbox("Handle missing values", ["drop", "mean", "zero"])
+
+            if st.button("Prepare Dataset"):
+                if selected_cols:
+                    df_subset = df[selected_cols]
+
+                    if handle_missing == 'drop':
+                        df_subset = df_subset.dropna()
+                    elif handle_missing == 'mean':
+                        df_subset = df_subset.fillna(df_subset.mean())
+                    elif handle_missing == 'zero':
+                        df_subset = df_subset.fillna(0)
+
+                    X = df_subset.values
+
+                    st.session_state.datasets[dataset_id] = {
+                        'type': 'csv',
+                        'X': X,
+                        'shape': X.shape,
+                        'name': uploaded_csv.name
+                    }
+
+                    st.success(f"Dataset prepared: {X.shape[0]} rows × {X.shape[1]} columns")
+                else:
+                    st.warning("Please select at least one column")
+
+        except Exception as e:
+            st.error(f"Error uploading CSV: {str(e)}")
+
+    # Dataset list
+    st.subheader("Uploaded Datasets")
+    if len(st.session_state.datasets) == 0:
+        st.info("No datasets uploaded yet")
+    else:
+        for dataset_id, dataset in st.session_state.datasets.items():
+            if dataset['type'] == 'synthetic':
+                st.write(f"🔢 Synthetic: {dataset['shape'][0]}×{dataset['shape'][1]}")
+            elif dataset['type'] == 'csv':
+                st.write(f"📊 CSV: {dataset.get('name', 'Unknown')} ({dataset['shape'][0]}×{dataset['shape'][1]})")
+            elif dataset['type'] == 'mnist':
+                st.write(f"✏️ MNIST: {dataset['count']} samples")
+
+
+if __name__ == '__main__':
+    main()

web/api-adapter.js

@@ -0,0 +1,282 @@
+/**
+ * API Adapter for Flask Backend (android.py)
+ *
+ * This file provides a pywebview.api compatible interface that works with
+ * the Flask REST API instead of the pywebview Python bridge.
+ *
+ * Include this BEFORE app.js when running on Android/Flask:
+ * <script src="api-adapter.js"></script>
+ * <script src="app.js"></script>
+ */
+
+(function() {
+    'use strict';
+
+    // API base URL - will be automatically set to current origin
+    const API_BASE = window.location.origin;
+
+    /**
+     * Make API call to Flask backend
+     */
+    async function apiCall(endpoint, data = null) {
+        const url = `${API_BASE}/api/${endpoint}`;
+
+        const options = {
+            method: data ? 'POST' : 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        };
+
+        if (data) {
+            options.body = JSON.stringify(data);
+        }
+
+        try {
+            const response = await fetch(url, options);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const result = await response.json();
+            return result;
+        } catch (error) {
+            console.error(`API call failed: ${endpoint}`, error);
+            throw error;
+        }
+    }
+
+    /**
+     * Create pywebview.api compatible interface
+     */
+    window.pywebview = {
+        api: {
+            // ==================== Synthetic Data Generation ====================
+
+            generate_simplex_points: async function(n, d, k, seed) {
+                return await apiCall('generate_simplex_points', { n, d, k, seed });
+            },
+
+            save_synthetic_dataset: async function(points) {
+                return await apiCall('save_synthetic_dataset', { points });
+            },
+
+            // ==================== MNIST Dataset ====================
+
+            load_mnist: async function(max_samples, subset) {
+                return await apiCall('load_mnist', { max_samples, subset });
+            },
+
+            // ==================== Upload Handling ====================
+
+            upload_csv: async function(name, content, delimiter) {
+                return await apiCall('upload_csv', { name, content, delimiter });
+            },
+
+            upload_images: async function(files) {
+                return await apiCall('upload_images', { files });
+            },
+
+            list_datasets: async function() {
+                return await apiCall('list_datasets');
+            },
+
+            prepare_csv_dataset: async function(dataset_id, selected_columns, handle_missing) {
+                return await apiCall('prepare_csv_dataset', {
+                    dataset_id,
+                    selected_columns,
+                    handle_missing
+                });
+            },
+
+            // ==================== Embeddings ====================
+
+            compute_embeddings: async function(dataset_id, method) {
+                return await apiCall('compute_embeddings', { dataset_id, method });
+            },
+
+            // ==================== t-SNE ====================
+
+            run_tsne: async function(dataset_id, perplexity, learning_rate, n_iter,
+                                    early_exaggeration, momentum, init_method, init_data, seed) {
+                return await apiCall('run_tsne', {
+                    dataset_id,
+                    perplexity,
+                    learning_rate,
+                    n_iter,
+                    early_exaggeration,
+                    momentum,
+                    init_method,
+                    init_data,
+                    seed
+                });
+            },
+
+            stop_tsne: async function() {
+                // Note: stop functionality needs to be implemented in Flask backend
+                return { success: true };
+            },
+
+            // ==================== Clustering ====================
+
+            run_clustering: async function(dataset_id, method, k, eps, min_samples) {
+                return await apiCall('run_clustering', {
+                    dataset_id,
+                    method,
+                    k,
+                    eps,
+                    min_samples
+                });
+            },
+
+            // ==================== Export ====================
+
+            export_results: async function(dataset_id) {
+                return await apiCall('export_results', { dataset_id });
+            },
+
+            get_image_at_index: async function(dataset_id, index) {
+                return await apiCall('get_image_at_index', { dataset_id, index });
+            }
+        },
+
+        // ==================== API Status ====================
+
+        /**
+         * Check if we're running in Flask/Android mode
+         */
+        isFlaskMode: function() {
+            return true;
+        },
+
+        /**
+         * Check MCP connection status
+         */
+        checkMCPStatus: async function() {
+            try {
+                const status = await apiCall('mcp_status');
+                return status;
+            } catch (error) {
+                return { connected: false, available: false };
+            }
+        }
+    };
+
+    // ==================== Progress Updates ====================
+
+    /**
+     * Progress updates for t-SNE
+     * In Flask mode, we use polling instead of callbacks
+     */
+    let progressInterval = null;
+
+    window.startProgressPolling = function() {
+        if (progressInterval) {
+            clearInterval(progressInterval);
+        }
+
+        // Poll for progress updates every 500ms
+        progressInterval = setInterval(async () => {
+            try {
+                const progress = await apiCall('tsne_progress');
+                if (progress && progress.current !== undefined) {
+                    window.updateProgress(progress.current, progress.total, progress.message);
+
+                    // Stop polling when complete
+                    if (progress.current >= progress.total) {
+                        clearInterval(progressInterval);
+                        progressInterval = null;
+                    }
+                }
+            } catch (error) {
+                // Silently fail if progress endpoint not available
+            }
+        }, 500);
+    };
+
+    window.stopProgressPolling = function() {
+        if (progressInterval) {
+            clearInterval(progressInterval);
+            progressInterval = null;
+        }
+    };
+
+    // ==================== Connection Status Indicator ====================
+
+    /**
+     * Show connection status in UI
+     */
+    async function showConnectionStatus() {
+        try {
+            const health = await apiCall('health');
+            const statusDiv = document.createElement('div');
+            statusDiv.id = 'connection-status';
+            statusDiv.style.cssText = `
+                position: fixed;
+                top: 10px;
+                right: 10px;
+                padding: 8px 12px;
+                background: ${health.mcp_connected ? '#10b981' : '#f59e0b'};
+                color: white;
+                border-radius: 6px;
+                font-size: 0.85em;
+                font-weight: 600;
+                z-index: 9999;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+            `;
+            statusDiv.innerHTML = health.mcp_connected
+                ? '🟢 MCP Connected'
+                : '🟡 Local Mode';
+
+            document.body.appendChild(statusDiv);
+
+            // Add tooltip
+            statusDiv.title = health.mcp_connected
+                ? 'Connected to MCP server for heavy computations'
+                : 'Using local fallback (computations may be slower)';
+
+        } catch (error) {
+            console.error('Failed to check connection status:', error);
+        }
+    }
+
+    // ==================== Initialization ====================
+
+    /**
+     * Initialize Flask API adapter
+     */
+    function initAdapter() {
+        console.log('Flask API Adapter initialized');
+        console.log(`API Base URL: ${API_BASE}`);
+
+        // Show connection status
+        showConnectionStatus();
+
+        // Dispatch ready event
+        window.dispatchEvent(new Event('pywebviewready'));
+    }
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initAdapter);
+    } else {
+        initAdapter();
+    }
+
+    // ==================== Helper Functions ====================
+
+    /**
+     * Download file helper (for CSV export)
+     */
+    window.downloadFile = function(content, filename, type) {
+        const blob = new Blob([content], { type: type });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+
+})();

web/app.js

@@ -0,0 +1,1253 @@
+// Global state
+let currentDatasetId = null;
+let currentResults = null;
+let uploadedDatasets = [];
+
+// Check if pywebview is available
+function ensureAPI() {
+    if (typeof pywebview === 'undefined' || !pywebview.api) {
+        throw new Error('PyWebView API not available. Please ensure the app is running in pywebview.');
+    }
+}
+
+// Wait for DOM and pywebview to be ready
+function init() {
+    console.log('Initializing t-SNE Explorer...');
+
+    // Setup tab switching
+    setupTabs();
+
+    // Setup all event listeners with try-catch
+    setupSyntheticDataGenerator();
+    setupDataSourceManagement();
+    setupTSNERunner();
+    setupClustering();
+    setupExport();
+    setupUpload();
+    setupModal();
+
+    // Load initial data
+    safeAPICall(async () => {
+        await updateDataSourceDropdown();
+        await refreshDatasetList();
+    });
+}
+
+// Safe API call wrapper
+async function safeAPICall(fn, errorMsg = 'An error occurred') {
+    try {
+        ensureAPI();
+        return await fn();
+    } catch (error) {
+        console.error(errorMsg, error);
+        showNotification(errorMsg + ': ' + error.message, 'error');
+        return null;
+    }
+}
+
+// Notification system
+function showNotification(message, type = 'info') {
+    // Create notification element if it doesn't exist
+    let notif = document.getElementById('notification');
+    if (!notif) {
+        notif = document.createElement('div');
+        notif.id = 'notification';
+        document.body.appendChild(notif);
+    }
+
+    notif.textContent = message;
+    notif.className = `notification ${type} show`;
+
+    setTimeout(() => {
+        notif.classList.remove('show');
+    }, 4000);
+}
+
+// ==================== Tab Management ====================
+
+function setupTabs() {
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.addEventListener('click', () => {
+            const tabId = button.dataset.tab;
+
+            // Update button states
+            document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
+            button.classList.add('active');
+
+            // Update tab content
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            document.getElementById(tabId).classList.add('active');
+        });
+    });
+}
+
+// ==================== Synthetic Data Generation ====================
+
+function setupSyntheticDataGenerator() {
+    const generateBtn = document.getElementById('generate-btn');
+    if (!generateBtn) return;
+
+    generateBtn.addEventListener('click', async () => {
+        const n = parseInt(document.getElementById('synth-n').value);
+        const d = parseInt(document.getElementById('synth-d').value);
+        const k = parseFloat(document.getElementById('synth-k').value);
+        const seed = parseInt(document.getElementById('synth-seed').value);
+
+        const result = await safeAPICall(
+            async () => await pywebview.api.generate_simplex_points(n, d, k, seed),
+            'Error generating synthetic data'
+        );
+
+        if (!result) return;
+
+        if (!result.success) {
+            showNotification(result.error, 'error');
+            return;
+        }
+
+        // Display results
+        const output = document.getElementById('synth-output');
+        output.classList.remove('hidden');
+
+        const stats = document.getElementById('synth-stats');
+        stats.innerHTML = `
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-label">Points</div>
+                    <div class="stat-value">${result.n}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">Dimensions</div>
+                    <div class="stat-value">${result.d}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">Target k</div>
+                    <div class="stat-value">${result.k}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">Actual k</div>
+                    <div class="stat-value">${result.actual_k}</div>
+                </div>
+            </div>
+            <div class="distance-info">
+                <strong>Unique Distance Values:</strong> [${result.unique_distances.map(d => d.toFixed(4)).join(', ')}]
+                <br>
+                <strong>Range:</strong> min=${result.distances_min.toFixed(4)}, mean=${result.distances_mean.toFixed(4)}, max=${result.distances_max.toFixed(4)}
+            </div>
+        `;
+
+        // Display points table
+        displayPointsTable(result.points, result.d);
+
+        // Display distance matrix
+        displayDistanceMatrix(result.points);
+
+        // Save as dataset
+        const saveResult = await safeAPICall(
+            async () => await pywebview.api.save_synthetic_dataset(result.points)
+        );
+
+        if (saveResult && saveResult.success) {
+            currentDatasetId = saveResult.dataset_id;
+            await updateDataSourceDropdown();
+            await refreshDatasetList();
+            showNotification('Synthetic dataset generated successfully!', 'success');
+        }
+    });
+}
+
+function displayPointsTable(points, d) {
+    const tableContainer = document.getElementById('synth-table-container');
+    const maxRows = Math.min(10, points.length);
+
+    let tableHTML = '<div class="table-wrapper"><table class="data-table"><thead><tr><th>Point</th>';
+    for (let j = 0; j < d; j++) {
+        tableHTML += `<th>x<sub>${j+1}</sub></th>`;
+    }
+    tableHTML += '</tr></thead><tbody>';
+
+    for (let i = 0; i < maxRows; i++) {
+        tableHTML += `<tr><td>x<sub>${i+1}</sub></td>`;
+        for (let j = 0; j < d; j++) {
+            tableHTML += `<td>${points[i][j].toFixed(4)}</td>`;
+        }
+        tableHTML += '</tr>';
+    }
+
+    if (points.length > 10) {
+        tableHTML += `<tr><td colspan="${d + 1}" class="more-rows">... (${points.length - 10} more rows)</td></tr>`;
+    }
+
+    tableHTML += '</tbody></table></div>';
+    tableContainer.innerHTML = tableHTML;
+}
+
+function displayDistanceMatrix(points) {
+    const distContainer = document.getElementById('synth-distances-container');
+    const n = points.length;
+
+    // Compute pairwise distances
+    const distances = [];
+    for (let i = 0; i < n; i++) {
+        distances[i] = [];
+        for (let j = 0; j < n; j++) {
+            if (i === j) {
+                distances[i][j] = 0;
+            } else {
+                let sum = 0;
+                for (let k = 0; k < points[i].length; k++) {
+                    sum += (points[i][k] - points[j][k]) ** 2;
+                }
+                distances[i][j] = Math.sqrt(sum);
+            }
+        }
+    }
+
+    // Build table HTML
+    let tableHTML = '<div class="table-wrapper"><table class="data-table distance-matrix"><thead><tr><th></th>';
+    for (let j = 0; j < n; j++) {
+        tableHTML += `<th>x<sub>${j+1}</sub></th>`;
+    }
+    tableHTML += '</tr></thead><tbody>';
+
+    for (let i = 0; i < n; i++) {
+        tableHTML += `<tr><td><strong>x<sub>${i+1}</sub></strong></td>`;
+        for (let j = 0; j < n; j++) {
+            const cellClass = i === j ? 'diagonal' : '';
+            tableHTML += `<td class="${cellClass}">${distances[i][j].toFixed(4)}</td>`;
+        }
+        tableHTML += '</tr>';
+    }
+
+    tableHTML += '</tbody></table></div>';
+    distContainer.innerHTML = tableHTML;
+}
+
+// ==================== Data Source Management ====================
+
+function setupDataSourceManagement() {
+    const dataSource = document.getElementById('data-source');
+    if (!dataSource) return;
+
+    dataSource.addEventListener('change', async (e) => {
+        const value = e.target.value;
+        currentDatasetId = value === 'synthetic' ? null : value;
+
+        // Show/hide relevant controls
+        document.getElementById('csv-columns-group').style.display = 'none';
+        document.getElementById('image-embed-group').style.display = 'none';
+        document.getElementById('mnist-load-group').style.display = 'none';
+
+        if (value === 'load-mnist') {
+            // Show MNIST loading controls
+            console.log('Showing MNIST load group');
+            document.getElementById('mnist-load-group').style.display = 'block';
+            currentDatasetId = null;
+        } else if (value && value.startsWith('csv_')) {
+            document.getElementById('csv-columns-group').style.display = 'block';
+            await loadCsvColumns(value);
+        } else if (value && value.startsWith('images_')) {
+            document.getElementById('image-embed-group').style.display = 'block';
+            currentDatasetId = value;
+        } else if (value && value.startsWith('mnist_')) {
+            // MNIST datasets are ready to use, no preparation needed
+            currentDatasetId = value;
+        }
+    });
+
+    // Prepare CSV button
+    const prepareCsvBtn = document.getElementById('prepare-csv-btn');
+    if (prepareCsvBtn) {
+        prepareCsvBtn.addEventListener('click', async () => {
+            const datasetId = document.getElementById('data-source').value;
+            const checkboxes = document.querySelectorAll('#csv-columns-list input:checked');
+            const selectedColumns = Array.from(checkboxes).map(cb => cb.value);
+            const handleMissing = document.getElementById('csv-missing').value;
+
+            if (selectedColumns.length === 0) {
+                showNotification('Please select at least one column', 'warning');
+                return;
+            }
+
+            const result = await safeAPICall(
+                async () => await pywebview.api.prepare_csv_dataset(datasetId, selectedColumns, handleMissing)
+            );
+
+            if (result && result.success) {
+                showNotification(`Dataset prepared: ${result.shape[0]} rows x ${result.shape[1]} columns`, 'success');
+            }
+        });
+    }
+
+    // MNIST loading button
+    const loadMnistBtn = document.getElementById('load-mnist-btn');
+    if (loadMnistBtn) {
+        console.log('✓ MNIST button found, attaching click handler');
+        loadMnistBtn.addEventListener('click', async () => {
+            console.log('MNIST Load button clicked!');
+
+            const subset = document.getElementById('mnist-subset').value;
+            const maxSamples = parseInt(document.getElementById('mnist-samples').value);
+            const statusDiv = document.getElementById('mnist-status');
+            const progressContainer = document.getElementById('mnist-progress-container');
+            const progressBar = document.getElementById('mnist-progress-bar');
+            const progressText = document.getElementById('mnist-progress-text');
+
+            console.log(`Loading MNIST: subset=${subset}, samples=${maxSamples}`);
+
+            // Show progress bar
+            progressContainer.style.display = 'block';
+            statusDiv.style.display = 'none';
+            loadMnistBtn.disabled = true;
+            loadMnistBtn.textContent = 'Loading...';
+
+            // Simulate progress steps
+            const updateProgress = (percent, message) => {
+                progressBar.style.width = percent + '%';
+                progressText.textContent = message;
+            };
+
+            updateProgress(10, 'Connecting to OpenML...');
+            await new Promise(resolve => setTimeout(resolve, 500));
+
+            updateProgress(30, 'Downloading MNIST dataset...');
+
+            const result = await safeAPICall(
+                async () => await pywebview.api.load_mnist(maxSamples, subset),
+                'Error loading MNIST dataset'
+            );
+
+            console.log('MNIST load result:', result);
+
+            if (result && result.success) {
+                updateProgress(70, 'Processing images...');
+                await new Promise(resolve => setTimeout(resolve, 300));
+
+                updateProgress(90, 'Creating dataset...');
+                await new Promise(resolve => setTimeout(resolve, 300));
+
+                updateProgress(100, 'Complete!');
+                await new Promise(resolve => setTimeout(resolve, 500));
+
+                // Hide progress, show success message
+                progressContainer.style.display = 'none';
+                statusDiv.style.display = 'block';
+                statusDiv.textContent = `✓ ${result.message}`;
+                statusDiv.style.color = '#10b981';
+                statusDiv.style.background = '#d1fae5';
+
+                showNotification(result.message, 'success');
+                await updateDataSourceDropdown();
+                await refreshDatasetList();
+
+                // Auto-select the newly loaded dataset
+                const datasets = await safeAPICall(async () => await pywebview.api.list_datasets());
+                if (datasets && datasets.length > 0) {
+                    const mnistDataset = datasets.find(d => d.type === 'mnist');
+                    if (mnistDataset) {
+                        dataSource.value = mnistDataset.id;
+                        currentDatasetId = mnistDataset.id;
+                        document.getElementById('mnist-load-group').style.display = 'none';
+                    }
+                }
+            } else {
+                progressContainer.style.display = 'none';
+                statusDiv.style.display = 'block';
+                statusDiv.textContent = `✗ Failed to load MNIST: ${result?.error || 'Unknown error'}`;
+                statusDiv.style.color = '#ef4444';
+                statusDiv.style.background = '#fee2e2';
+            }
+
+            loadMnistBtn.disabled = false;
+            loadMnistBtn.textContent = 'Load MNIST Dataset';
+        });
+    } else {
+        console.error('✗ MNIST button NOT found!');
+    }
+
+    // Compute embeddings button
+    const computeEmbedBtn = document.getElementById('compute-embed-btn');
+    if (computeEmbedBtn) {
+        computeEmbedBtn.addEventListener('click', async () => {
+            const datasetId = document.getElementById('data-source').value;
+            const method = document.getElementById('embed-method').value;
+            const statusDiv = document.getElementById('embed-status');
+
+            statusDiv.textContent = 'Computing embeddings...';
+            statusDiv.className = 'embed-status computing';
+
+            const result = await safeAPICall(
+                async () => await pywebview.api.compute_embeddings(datasetId, method)
+            );
+
+            if (result && result.success) {
+                statusDiv.textContent = `✓ Embeddings computed using ${result.method}: ${result.shape[0]}x${result.shape[1]}`;
+                statusDiv.className = 'embed-status success';
+                showNotification('Embeddings computed successfully!', 'success');
+            } else {
+                statusDiv.textContent = '✗ Failed to compute embeddings';
+                statusDiv.className = 'embed-status error';
+            }
+        });
+    }
+}
+
+async function updateDataSourceDropdown() {
+    const select = document.getElementById('data-source');
+    if (!select) return;
+
+    const datasets = await safeAPICall(async () => await pywebview.api.list_datasets());
+    if (!datasets) return;
+
+    // Clear existing options except first three (includes Load MNIST Dataset)
+    while (select.options.length > 3) {
+        select.remove(3);
+    }
+
+    // Add dataset options
+    datasets.forEach(dataset => {
+        const option = document.createElement('option');
+        option.value = dataset.id;
+
+        if (dataset.type === 'csv') {
+            option.textContent = `📊 CSV: ${dataset.name} (${dataset.shape[0]}×${dataset.shape[1]})`;
+        } else if (dataset.type === 'images') {
+            option.textContent = `🖼️ Images: ${dataset.count} files`;
+        } else if (dataset.type === 'synthetic') {
+            option.textContent = `🔢 Synthetic: ${dataset.shape[0]}×${dataset.shape[1]}`;
+        } else if (dataset.type === 'mnist') {
+            option.textContent = `✏️ ${dataset.name}`;
+        }
+
+        select.appendChild(option);
+
+        if (dataset.id === currentDatasetId) {
+            select.value = dataset.id;
+        }
+    });
+}
+
+async function loadCsvColumns(datasetId) {
+    // This would need a separate API call to get column info
+    // For now, it's a placeholder
+}
+
+// ==================== t-SNE Runner ====================
+
+function setupTSNERunner() {
+    const runBtn = document.getElementById('run-tsne-btn');
+    const stopBtn = document.getElementById('stop-tsne-btn');
+    const initMethodSelect = document.getElementById('init-method');
+    const customInitGroup = document.getElementById('custom-init-group');
+
+    // Handle initialization method change
+    if (initMethodSelect && customInitGroup) {
+        initMethodSelect.addEventListener('change', (e) => {
+            if (e.target.value === 'custom') {
+                customInitGroup.style.display = 'block';
+            } else {
+                customInitGroup.style.display = 'none';
+            }
+        });
+    }
+
+    if (runBtn) {
+        runBtn.addEventListener('click', async () => {
+            const datasetId = document.getElementById('data-source').value;
+
+            if (!datasetId) {
+                showNotification('Please select a data source first', 'warning');
+                return;
+            }
+
+            const params = {
+                perplexity: parseInt(document.getElementById('perplexity').value),
+                learning_rate: parseInt(document.getElementById('learning-rate').value),
+                n_iter: parseInt(document.getElementById('iterations').value),
+                early_exaggeration: parseInt(document.getElementById('early-exag').value),
+                momentum: parseFloat(document.getElementById('momentum').value),
+                init_method: document.getElementById('init-method').value,
+                seed: parseInt(document.getElementById('tsne-seed').value)
+            };
+
+            // Handle custom initialization
+            let init_data = null;
+            if (params.init_method === 'custom') {
+                const customInitText = document.getElementById('custom-init-coords').value.trim();
+                if (customInitText) {
+                    try {
+                        init_data = JSON.parse(customInitText);
+                    } catch (e) {
+                        showNotification('Invalid JSON format for custom initialization', 'error');
+                        return;
+                    }
+                } else {
+                    showNotification('Please provide custom initialization coordinates', 'warning');
+                    return;
+                }
+            }
+
+            // Show progress
+            const progressContainer = document.getElementById('progress-container');
+            progressContainer.classList.remove('hidden');
+            runBtn.style.display = 'none';
+            stopBtn.style.display = 'inline-block';
+
+            const result = await safeAPICall(
+                async () => await pywebview.api.run_tsne(
+                    datasetId,
+                    params.perplexity,
+                    params.learning_rate,
+                    params.n_iter,
+                    params.early_exaggeration,
+                    params.momentum,
+                    params.init_method,
+                    init_data,
+                    params.seed
+                ),
+                'Error running t-SNE'
+            );
+
+            progressContainer.classList.add('hidden');
+            runBtn.style.display = 'inline-block';
+            stopBtn.style.display = 'none';
+
+            if (result && result.success) {
+                currentResults = result;
+                displayResults(result, datasetId);
+
+                // Show clustering section for image/MNIST datasets
+                const clusteringSection = document.getElementById('clustering-section');
+                const isImageDataset = datasetId && (datasetId.startsWith('images_') || datasetId.startsWith('mnist_'));
+
+                if (clusteringSection) {
+                    if (isImageDataset) {
+                        clusteringSection.style.display = 'block';
+                    } else {
+                        clusteringSection.style.display = 'none';
+                    }
+                }
+
+                showNotification('t-SNE completed successfully!', 'success');
+            }
+        });
+    }
+
+    if (stopBtn) {
+        stopBtn.addEventListener('click', async () => {
+            await safeAPICall(async () => await pywebview.api.stop_tsne());
+            showNotification('t-SNE stopped', 'info');
+        });
+    }
+}
+
+// Progress callback
+window.updateProgress = (current, total, message) => {
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.getElementById('progress-text');
+
+    if (progressBar && progressText) {
+        const percentage = (current / total) * 100;
+        progressBar.style.width = percentage + '%';
+        progressText.textContent = message;
+    }
+};
+
+// ==================== Results Display ====================
+
+function displayResults(result, datasetId) {
+    console.log('Displaying results:', {
+        Y_shape: [result.Y.length, result.Y[0]?.length],
+        P_shape: [result.P?.length, result.P?.[0]?.length],
+        Q_shape: [result.Q?.length, result.Q?.[0]?.length],
+        C_history_length: result.C_history?.length,
+        has_labels: result.has_labels
+    });
+
+    document.getElementById('results-section').style.display = 'block';
+
+    const Y = result.Y;
+
+    // 2D Scatter Plot
+    plotScatter(Y, datasetId, result.labels);
+
+    // Cost Plot
+    if (result.C_history && result.C_history.length > 0) {
+        plotCost(result.C_history);
+    } else {
+        console.warn('No cost history available');
+    }
+
+    // Matrix Heatmaps and Grids
+    if (result.P && result.P.length > 0) {
+        plotMatrix(result.P, 'p-matrix-plot', 'P Matrix (High-D Affinities)');
+        displayMatrixGrid(result.P, 'p-matrix-grid', 'P', 'y');
+    } else {
+        console.warn('P matrix not available');
+    }
+
+    if (result.Q && result.Q.length > 0) {
+        plotMatrix(result.Q, 'q-matrix-plot', 'Q Matrix (Low-D Affinities)');
+        displayMatrixGrid(result.Q, 'q-matrix-grid', 'Q', 'y');
+    } else {
+        console.warn('Q matrix not available');
+    }
+
+    // Distances between y_i in the embedding
+    const distances = computePairwiseDistances(Y);
+    result.D = distances;
+    plotMatrix(distances, 'd-matrix-plot', 'Distances Between y_i (Embedding)');
+    displayMatrixGrid(distances, 'd-matrix-grid', 'D', 'y');
+
+    // Coordinates Table
+    displayCoordinatesTable(Y);
+}
+
+function computePairwiseDistances(Y) {
+    const n = Y.length;
+    const distances = new Array(n);
+
+    for (let i = 0; i < n; i++) {
+        distances[i] = new Array(n);
+        for (let j = 0; j < n; j++) {
+            if (i === j) {
+                distances[i][j] = 0;
+                continue;
+            }
+            const dx = Y[i][0] - Y[j][0];
+            const dy = Y[i][1] - Y[j][1];
+            distances[i][j] = Math.sqrt(dx * dx + dy * dy);
+        }
+    }
+
+    return distances;
+}
+
+function plotScatter(Y, datasetId, labels) {
+    // Color palette for MNIST digits (0-9)
+    const digitColors = [
+        '#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6',
+        '#1abc9c', '#e67e22', '#95a5a6', '#34495e', '#c0392b'
+    ];
+
+    let trace;
+
+    if (labels && labels.length === Y.length) {
+        // Create separate trace for each digit class
+        const traces = [];
+        const uniqueLabels = [...new Set(labels)].sort((a, b) => a - b);
+
+        uniqueLabels.forEach(label => {
+            const indices = labels.map((l, i) => l === label ? i : -1).filter(i => i >= 0);
+            const color = digitColors[label % digitColors.length];
+
+            traces.push({
+                x: indices.map(i => Y[i][0]),
+                y: indices.map(i => Y[i][1]),
+                mode: 'markers',
+                type: 'scatter',
+                name: `Digit ${label}`,
+                marker: {
+                    size: 8,
+                    color: color,
+                    line: {
+                        color: '#ffffff',
+                        width: 1
+                    }
+                },
+                hovertext: indices.map(i => `Digit ${label}<br>Point ${i+1}<br>Dim 1: ${Y[i][0].toFixed(3)}<br>Dim 2: ${Y[i][1].toFixed(3)}`),
+                hoverinfo: 'text'
+            });
+        });
+
+        const layout = {
+            title: {
+                text: 't-SNE Embedding (Colored by True Labels)',
+                font: { size: 18, family: 'Segoe UI, sans-serif' }
+            },
+            xaxis: { title: 'Dimension 1', gridcolor: '#e0e0e0' },
+            yaxis: { title: 'Dimension 2', gridcolor: '#e0e0e0' },
+            hovermode: 'closest',
+            plot_bgcolor: '#fafafa',
+            paper_bgcolor: '#ffffff',
+            showlegend: true,
+            legend: {
+                orientation: 'h',
+                y: -0.2
+            }
+        };
+
+        Plotly.newPlot('tsne-plot', traces, layout);
+    } else {
+        // Default plot without labels
+        trace = {
+            x: Y.map(p => p[0]),
+            y: Y.map(p => p[1]),
+            mode: 'markers+text',
+            type: 'scatter',
+            marker: {
+                size: 10,
+                color: '#667eea',
+                line: {
+                    color: '#ffffff',
+                    width: 1
+                }
+            },
+            text: Y.map((p, i) => `y${i+1}`),
+            textposition: 'top center',
+            textfont: {
+                size: 10,
+                color: '#1f2937'
+            },
+            hovertext: Y.map((p, i) => `Point y${i+1}<br>Dim 1: ${p[0].toFixed(3)}<br>Dim 2: ${p[1].toFixed(3)}`),
+            hoverinfo: 'text'
+        };
+
+        const layout = {
+            title: {
+                text: 't-SNE Embedding',
+                font: { size: 18, family: 'Segoe UI, sans-serif' }
+            },
+            xaxis: { title: 'Dimension 1', gridcolor: '#e0e0e0' },
+            yaxis: { title: 'Dimension 2', gridcolor: '#e0e0e0' },
+            hovermode: 'closest',
+            plot_bgcolor: '#fafafa',
+            paper_bgcolor: '#ffffff'
+        };
+
+        Plotly.newPlot('tsne-plot', [trace], layout);
+    }
+
+    // Add click handler for images
+    if (datasetId && (datasetId.startsWith('images_') || datasetId.startsWith('mnist_'))) {
+        document.getElementById('tsne-plot').on('plotly_click', async (data) => {
+            const pointIndex = data.points[0].pointIndex;
+            await showImagePreview(datasetId, pointIndex);
+        });
+    }
+}
+
+function plotCost(costHistory) {
+    const trace = {
+        y: costHistory,
+        type: 'scatter',
+        mode: 'lines',
+        line: { color: '#e74c3c', width: 2 }
+    };
+
+    const layout = {
+        title: {
+            text: 'KL Divergence over Iterations',
+            font: { size: 18, family: 'Segoe UI, sans-serif' }
+        },
+        xaxis: { title: 'Iteration', gridcolor: '#e0e0e0' },
+        yaxis: { title: 'Cost (KL Divergence)', gridcolor: '#e0e0e0' },
+        plot_bgcolor: '#fafafa',
+        paper_bgcolor: '#ffffff'
+    };
+
+    Plotly.newPlot('cost-plot', [trace], layout);
+}
+
+function plotMatrix(matrix, elementId, title) {
+    const maxSize = 100;
+    const n = matrix.length;
+
+    let displayMatrix = matrix;
+    if (n > maxSize) {
+        const step = Math.ceil(n / maxSize);
+        displayMatrix = [];
+        for (let i = 0; i < n; i += step) {
+            const row = [];
+            for (let j = 0; j < n; j += step) {
+                row.push(matrix[i][j]);
+            }
+            displayMatrix.push(row);
+        }
+    }
+
+    const trace = {
+        z: displayMatrix,
+        type: 'heatmap',
+        colorscale: 'Viridis'
+    };
+
+    const layout = {
+        title: {
+            text: title + (n > maxSize ? ' (downsampled)' : ''),
+            font: { size: 16, family: 'Segoe UI, sans-serif' }
+        },
+        xaxis: { title: 'Point j' },
+        yaxis: { title: 'Point i' },
+        paper_bgcolor: '#ffffff'
+    };
+
+    Plotly.newPlot(elementId, [trace], layout);
+}
+
+function displayCoordinatesTable(Y) {
+    const coordsTable = document.getElementById('coords-table');
+    let html = '<div class="table-wrapper"><table class="data-table"><thead><tr><th>Point</th><th>Dim 1</th><th>Dim 2</th></tr></thead><tbody>';
+
+    const maxRows = Math.min(20, Y.length);
+    for (let i = 0; i < maxRows; i++) {
+        html += `<tr><td>y${i+1}</td><td>${Y[i][0].toFixed(4)}</td><td>${Y[i][1].toFixed(4)}</td></tr>`;
+    }
+
+    if (Y.length > 20) {
+        html += `<tr><td colspan="3" class="more-rows">... (${Y.length - 20} more rows)</td></tr>`;
+    }
+
+    html += '</tbody></table></div>';
+    coordsTable.innerHTML = html;
+}
+
+function displayMatrixGrid(matrix, elementId, matrixName, labelPrefix = '') {
+    const gridContainer = document.getElementById(elementId);
+    const n = matrix.length;
+    const maxDisplay = 20; // Show max 20x20 for performance
+
+    let html = '<div class="table-wrapper" style="max-height: 500px; overflow: auto;"><table class="data-table matrix-grid"><thead><tr><th></th>';
+
+    // Column headers
+    const displayN = Math.min(n, maxDisplay);
+    for (let j = 0; j < displayN; j++) {
+        const label = labelPrefix ? `${labelPrefix}${j + 1}` : `${j + 1}`;
+        html += `<th>${label}</th>`;
+    }
+    if (n > maxDisplay) {
+        html += '<th>...</th>';
+    }
+    html += '</tr></thead><tbody>';
+
+    // Matrix rows
+    for (let i = 0; i < displayN; i++) {
+        const label = labelPrefix ? `${labelPrefix}${i + 1}` : `${i + 1}`;
+        html += `<tr><td><strong>${label}</strong></td>`;
+        for (let j = 0; j < displayN; j++) {
+            const value = matrix[i][j];
+            const cellClass = i === j ? 'diagonal' : '';
+            html += `<td class="${cellClass}">${value.toFixed(6)}</td>`;        
+        }
+        if (n > maxDisplay) {
+            html += '<td>...</td>';
+        }
+        html += '</tr>';
+    }
+
+    if (n > maxDisplay) {
+        html += `<tr><td><strong>...</strong></td>${'<td>...</td>'.repeat(displayN + 1)}</tr>`;
+    }
+
+    html += '</tbody></table></div>';
+    html += `<p class="info">Showing ${displayN}x${displayN} of ${n}x${n} matrix</p>`;
+
+    gridContainer.innerHTML = html;
+}
+
+function toggleMatrixView(matrixName, viewType) {
+    const plotId = `${matrixName.toLowerCase()}-matrix-plot`;
+    const gridId = `${matrixName.toLowerCase()}-matrix-grid`;
+
+    const plotDiv = document.getElementById(plotId);
+    const gridDiv = document.getElementById(gridId);
+
+    if (viewType === 'heatmap') {
+        plotDiv.style.display = 'block';
+        gridDiv.style.display = 'none';
+    } else if (viewType === 'grid') {
+        plotDiv.style.display = 'none';
+        gridDiv.style.display = 'block';
+    }
+}
+
+// ==================== Clustering ====================
+
+// Auto-clustering removed - user can manually run clustering from the Clustering section
+// async function runAutoClusteringForMNIST(datasetId) {
+//     ...
+// }
+
+function setupClustering() {
+    const methodSelect = document.getElementById('cluster-method');
+    const runBtn = document.getElementById('run-cluster-btn');
+
+    if (methodSelect) {
+        methodSelect.addEventListener('change', (e) => {
+            const method = e.target.value;
+            document.getElementById('kmeans-params').classList.toggle('hidden', method !== 'kmeans');
+            document.getElementById('dbscan-params').classList.toggle('hidden', method !== 'dbscan');
+        });
+    }
+
+    if (runBtn) {
+        runBtn.addEventListener('click', async () => {
+            const datasetId = document.getElementById('data-source').value;
+            const method = document.getElementById('cluster-method').value;
+
+            const params = {
+                k: parseInt(document.getElementById('kmeans-k').value) || 3,
+                eps: parseFloat(document.getElementById('dbscan-eps').value) || 0.5,
+                min_samples: parseInt(document.getElementById('dbscan-minsamples').value) || 5
+            };
+
+            const result = await safeAPICall(
+                async () => await pywebview.api.run_clustering(
+                    datasetId, method, params.k, params.eps, params.min_samples
+                )
+            );
+
+            if (result && result.success) {
+                updateScatterWithClusters(result.labels, result.summary);
+                showNotification('Clustering completed!', 'success');
+            }
+        });
+    }
+}
+
+function updateScatterWithClusters(labels, summary) {
+    const Y = currentResults.Y;
+
+    const trace = {
+        x: Y.map(p => p[0]),
+        y: Y.map(p => p[1]),
+        mode: 'markers',
+        type: 'scatter',
+        marker: {
+            size: 10,
+            color: labels,
+            colorscale: 'Viridis',
+            showscale: true,
+            line: { color: '#ffffff', width: 1 }
+        },
+        text: Y.map((p, i) => `Point y${i + 1}<br>Cluster: ${labels[i]}<br>Dim 1: ${p[0].toFixed(3)}<br>Dim 2: ${p[1].toFixed(3)}`),
+        hoverinfo: 'text'
+    };
+
+    const layout = {
+        title: {
+            text: 't-SNE Embedding (Colored by Cluster)',
+            font: { size: 18, family: 'Segoe UI, sans-serif' }
+        },
+        xaxis: { title: 'Dimension 1', gridcolor: '#e0e0e0' },
+        yaxis: { title: 'Dimension 2', gridcolor: '#e0e0e0' },
+        hovermode: 'closest',
+        plot_bgcolor: '#fafafa',
+        paper_bgcolor: '#ffffff'
+    };
+
+    Plotly.newPlot('tsne-plot', [trace], layout);
+
+    // Display summary
+    displayClusterSummary(summary);
+}
+
+function displayClusterSummary(summary) {
+    const summaryDiv = document.getElementById('cluster-summary');
+    let html = '<h4>Cluster Summary</h4><div class="table-wrapper"><table class="data-table"><thead><tr><th>Cluster</th><th>Count</th></tr></thead><tbody>';
+
+    summary.forEach(item => {
+        html += `<tr><td>${item.label}</td><td>${item.count}</td></tr>`;
+    });
+
+    html += '</tbody></table></div>';
+    summaryDiv.innerHTML = html;
+}
+
+// ==================== Export ====================
+
+function setupExport() {
+    const exportBtn = document.getElementById('export-btn');
+    if (exportBtn) {
+        exportBtn.addEventListener('click', async () => {
+            const datasetId = document.getElementById('data-source').value;
+            const result = await safeAPICall(
+                async () => await pywebview.api.export_results(datasetId)
+            );
+
+            if (result && result.success) {
+                downloadFile(result.csv, 'tsne_results.csv', 'text/csv');
+                showNotification('Results exported successfully!', 'success');
+            }
+        });
+    }
+}
+
+window.downloadMatrix = function(matrixType) {
+    if (!currentResults) {
+        showNotification('No results to export', 'warning');
+        return;
+    }
+
+    let matrix = null;
+    if (matrixType === 'P') matrix = currentResults.P;
+    if (matrixType === 'Q') matrix = currentResults.Q;
+    if (matrixType === 'D') matrix = currentResults.D;
+
+    if (!matrix) {
+        showNotification(`Matrix ${matrixType} not available`, 'warning');
+        return;
+    }
+
+    const csv = matrix.map(row => row.join(',')).join('\n');
+    const filename = matrixType === 'D' ? 'embedding_distances.csv' : `${matrixType}_matrix.csv`;
+    downloadFile(csv, filename, 'text/csv');
+    showNotification(`${matrixType} matrix exported!`, 'success');
+};
+
+function downloadFile(content, filename, type) {
+    const blob = new Blob([content], { type: type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
+// ==================== Upload ====================
+
+function setupUpload() {
+    setupCSVUpload();
+    setupImageUpload();
+}
+
+function setupCSVUpload() {
+    const uploadBtn = document.getElementById('csv-upload-btn');
+    if (uploadBtn) {
+        uploadBtn.addEventListener('click', async () => {
+            const fileInput = document.getElementById('csv-upload');
+            const files = fileInput.files;
+
+            if (files.length === 0) {
+                showNotification('Please select CSV file(s)', 'warning');
+                return;
+            }
+
+            for (let file of files) {
+                const reader = new FileReader();
+                reader.onload = async (e) => {
+                    const content = e.target.result;
+                    const result = await safeAPICall(
+                        async () => await pywebview.api.upload_csv(file.name, content, ',')
+                    );
+
+                    if (result && result.success) {
+                        showNotification(`Uploaded ${file.name}`, 'success');
+                        await updateDataSourceDropdown();
+                        await refreshDatasetList();
+
+                        if (result.numeric_columns.length > 0) {
+                            displayCSVColumns(result.numeric_columns);
+                        }
+                    }
+                };
+                reader.readAsText(file);
+            }
+        });
+    }
+}
+
+function displayCSVColumns(columns) {
+    const columnsList = document.getElementById('csv-columns-list');
+    if (!columnsList) return;
+
+    columnsList.innerHTML = '';
+    columns.forEach(col => {
+        const label = document.createElement('label');
+        label.className = 'checkbox-label';
+        label.innerHTML = `<input type="checkbox" value="${col}" checked> ${col}`;
+        columnsList.appendChild(label);
+    });
+}
+
+function setupImageUpload() {
+    const imageUploadBtn = document.getElementById('image-upload-btn');
+    const folderUploadBtn = document.getElementById('folder-upload-btn');
+    const imageInput = document.getElementById('image-upload');
+    const folderInput = document.getElementById('folder-upload');
+
+    if (imageUploadBtn) {
+        imageUploadBtn.addEventListener('click', () => imageInput.click());
+    }
+
+    if (folderUploadBtn) {
+        folderUploadBtn.addEventListener('click', () => folderInput.click());
+    }
+
+    if (imageInput) {
+        imageInput.addEventListener('change', (e) => handleImageUpload(e.target.files));
+    }
+
+    if (folderInput) {
+        folderInput.addEventListener('change', (e) => handleImageUpload(e.target.files));
+    }
+}
+
+async function handleImageUpload(files) {
+    if (files.length === 0) return;
+
+    showNotification('Uploading images...', 'info');
+    const imageFiles = [];
+
+    for (let file of files) {
+        if (!file.type.startsWith('image/')) continue;
+
+        const content = await readFileAsDataURL(file);
+        imageFiles.push({ name: file.name, content: content });
+    }
+
+    if (imageFiles.length === 0) {
+        showNotification('No valid image files found', 'warning');
+        return;
+    }
+
+    const result = await safeAPICall(
+        async () => await pywebview.api.upload_images(imageFiles)
+    );
+
+    if (result && result.success) {
+        showNotification(`Uploaded ${result.count} images`, 'success');
+        await updateDataSourceDropdown();
+        await refreshDatasetList();
+    }
+}
+
+function readFileAsDataURL(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.readAsDataURL(file);
+    });
+}
+
+async function refreshDatasetList() {
+    const datasets = await safeAPICall(async () => await pywebview.api.list_datasets());
+    if (!datasets) return;
+
+    const container = document.getElementById('datasets-container');
+    if (!container) return;
+
+    if (datasets.length === 0) {
+        container.innerHTML = '<p class="empty-state">📭 No datasets uploaded yet</p>';
+        return;
+    }
+
+    let html = '<ul class="dataset-list">';
+    datasets.forEach(dataset => {
+        let icon = '📊';
+        let label = '';
+
+        if (dataset.type === 'csv') {
+            icon = '📊';
+            label = `CSV: ${dataset.name} (${dataset.shape[0]}×${dataset.shape[1]})`;
+        } else if (dataset.type === 'images') {
+            icon = '🖼️';
+            label = `Images: ${dataset.count} files`;
+        } else if (dataset.type === 'synthetic') {
+            icon = '🔢';
+            label = `Synthetic: ${dataset.shape[0]}×${dataset.shape[1]}`;
+        } else if (dataset.type === 'mnist') {
+            icon = '✏️';
+            label = `${dataset.name}`;
+        }
+
+        html += `<li class="dataset-item"><span class="dataset-icon">${icon}</span><span class="dataset-label">${label}</span></li>`;
+    });
+    html += '</ul>';
+
+    container.innerHTML = html;
+}
+
+// ==================== Modal ====================
+
+function setupModal() {
+    const closeBtn = document.querySelector('.modal-close');
+    const modal = document.getElementById('image-modal');
+
+    if (closeBtn) {
+        closeBtn.addEventListener('click', () => {
+            modal.classList.add('hidden');
+        });
+    }
+
+    window.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            modal.classList.add('hidden');
+        }
+    });
+}
+
+async function showImagePreview(datasetId, index) {
+    const result = await safeAPICall(
+        async () => await pywebview.api.get_image_at_index(datasetId, index)
+    );
+
+    if (result && result.success) {
+        const modal = document.getElementById('image-modal');
+        const modalTitle = document.getElementById('modal-title');
+        const modalImage = document.getElementById('modal-image');
+
+        modalTitle.textContent = result.name;
+        modalImage.src = result.image;
+        modal.classList.remove('hidden');
+    }
+}
+
+// ==================== Initialize ====================
+
+// Wait for pywebview API to be available
+function waitForPyWebView() {
+    return new Promise((resolve) => {
+        if (typeof pywebview !== 'undefined' && pywebview.api) {
+            console.log('PyWebView API already available');
+            resolve();
+        } else {
+            console.log('Waiting for PyWebView API...');
+            window.addEventListener('pywebviewready', () => {
+                console.log('PyWebView API ready!');
+                resolve();
+            });
+
+            // Fallback: poll for API availability
+            const checkInterval = setInterval(() => {
+                if (typeof pywebview !== 'undefined' && pywebview.api) {
+                    console.log('PyWebView API detected via polling');
+                    clearInterval(checkInterval);
+                    resolve();
+                }
+            }, 100);
+
+            // Timeout after 10 seconds
+            setTimeout(() => {
+                clearInterval(checkInterval);
+                if (typeof pywebview === 'undefined' || !pywebview.api) {
+                    console.error('PyWebView API failed to load within 10 seconds');
+                    showNotification('Failed to connect to backend. Please restart the application.', 'error');
+                }
+            }, 10000);
+        }
+    });
+}
+
+// Initialize when both DOM and pywebview are ready
+async function startApp() {
+    console.log('Starting app initialization...');
+
+    // Wait for pywebview API
+    await waitForPyWebView();
+
+    // Initialize the app
+    init();
+
+    console.log('App initialization complete!');
+}
+
+// Start when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startApp);
+} else {
+    startApp();
+}

web/index.html

@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>t-SNE Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>t-SNE Explorer</h1>
+            <p class="subtitle">Transparent t-SNE with synthetic data generation and file uploads</p>
+        </header>
+
+        <div class="tabs">
+            <button class="tab-button active" data-tab="tsne-tab">t-SNE</button>
+            <button class="tab-button" data-tab="upload-tab">Upload</button>
+        </div>
+
+        <!-- Tab 1: t-SNE -->
+        <div id="tsne-tab" class="tab-content active">
+            <!-- Section A: Synthetic Data Generator -->
+            <section class="card">
+                <h2>A) Synthetic Data Generator</h2>
+                <p class="info">Generate n points in d dimensions with k distinct distance types. Optimal: k=1 (n≤d+1 simplex), k=2 (n=5 pentagon), k=3 (n=7 heptagon). Larger n uses approximate lattice constructions.</p>
+
+                <div class="controls">
+                    <div class="control-group">
+                        <label>n (number of points):</label>
+                        <input type="number" id="synth-n" value="6" min="1" max="100">
+                    </div>
+                    <div class="control-group">
+                        <label>d (dimensions):</label>
+                        <input type="number" id="synth-d" value="10" min="1" max="100">
+                    </div>
+                    <div class="control-group">
+                        <label>k (distinct distance types):</label>
+                        <input type="number" id="synth-k" value="2" min="1" step="1">
+                    </div>
+                    <div class="control-group">
+                        <label>seed:</label>
+                        <input type="number" id="synth-seed" value="42" min="0">
+                    </div>
+                </div>
+
+                <button id="generate-btn" class="btn btn-primary">Generate Points</button>
+
+                <div id="synth-output" class="output hidden">
+                    <h3>Generated Points</h3>
+                    <div id="synth-stats"></div>
+                    <div id="synth-table-container"></div>
+                    <h3>Pairwise Distances</h3>
+                    <div id="synth-distances-container"></div>
+                </div>
+            </section>
+
+            <!-- Section B: t-SNE Runner -->
+            <section class="card">
+                <h2>B) t-SNE Runner</h2>
+
+                <div class="controls">
+                    <div class="control-group">
+                        <label>Data Source:</label>
+                        <select id="data-source">
+                            <option value="">-- Select Dataset --</option>
+                            <option value="synthetic">Use Synthetic Points</option>
+                            <option value="load-mnist">Load MNIST Dataset</option>
+                        </select>
+                        <small style="color: #10b981; display: block; margin-top: 5px; font-weight: bold;">✓ v6: tqdm-style progress bars for loading & t-SNE!</small>
+                    </div>
+
+                    <div class="control-group" id="mnist-load-group" style="display: none; background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; border: 2px solid #667eea;">
+                        <label style="font-weight: bold; color: #667eea; margin-bottom: 10px; display: block;">📊 MNIST Configuration</label>
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
+                            <div>
+                                <label style="display: block; margin-bottom: 5px; font-size: 0.9em;">Subset:</label>
+                                <select id="mnist-subset" style="width: 100%; padding: 6px;">
+                                    <option value="train">Training Set</option>
+                                    <option value="test">Test Set</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label style="display: block; margin-bottom: 5px; font-size: 0.9em;">Number of Samples:</label>
+                                <input type="number" id="mnist-samples" value="1000" min="100" max="10000" step="100" style="width: 100%; padding: 6px;">
+                            </div>
+                        </div>
+                        <button id="load-mnist-btn" class="btn btn-primary" style="width: 100%; padding: 10px; font-weight: bold;">Load MNIST Dataset</button>
+
+                        <!-- Progress Bar -->
+                        <div id="mnist-progress-container" style="display: none; margin-top: 15px;">
+                            <div style="background: #e5e7eb; border-radius: 8px; height: 24px; overflow: hidden; position: relative;">
+                                <div id="mnist-progress-bar" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); height: 100%; width: 0%; transition: width 0.3s ease; display: flex; align-items: center; justify-content: center;">
+                                    <span id="mnist-progress-text" style="color: white; font-size: 0.85em; font-weight: bold; position: absolute; left: 50%; transform: translateX(-50%);"></span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div id="mnist-status" style="margin-top: 10px; font-size: 0.9em; color: #666; padding: 8px; background: white; border-radius: 4px; display: none;"></div>
+                    </div>
+
+                    <div class="control-group" id="csv-columns-group" style="display: none;">
+                        <label>Select Numeric Columns:</label>
+                        <div id="csv-columns-list"></div>
+                        <div style="margin-top: 5px;">
+                            <label>Handle Missing Values:</label>
+                            <select id="csv-missing">
+                                <option value="drop">Drop rows with NA</option>
+                                <option value="mean">Fill with mean</option>
+                                <option value="zero">Fill with zero</option>
+                            </select>
+                        </div>
+                        <button id="prepare-csv-btn" class="btn btn-secondary">Prepare Dataset</button>
+                    </div>
+
+                    <div class="control-group" id="image-embed-group" style="display: none;">
+                        <label>Embedding Method:</label>
+                        <select id="embed-method">
+                            <option value="hist">Color Histogram (fast)</option>
+                            <option value="clip">CLIP (requires torch/clip)</option>
+                        </select>
+                        <button id="compute-embed-btn" class="btn btn-secondary">Compute Embeddings</button>
+                        <div id="embed-status"></div>
+                    </div>
+
+                    <div class="control-group">
+                        <label>Initialization:</label>
+                        <select id="init-method">
+                            <option value="random">Random</option>
+                            <option value="custom">Custom (User-defined)</option>
+                        </select>
+                    </div>
+
+                    <div class="control-group" id="custom-init-group" style="display: none;">
+                        <label>Custom Initial Coordinates (JSON format):</label>
+                        <textarea id="custom-init-coords" rows="4" placeholder='[[x1, y1], [x2, y2], ...]'></textarea>
+                        <p class="info" style="font-size: 0.85em;">Provide n×2 array of initial 2D coordinates</p>
+                    </div>
+
+                    <div class="control-group">
+                        <label>Perplexity:</label>
+                        <input type="number" id="perplexity" value="30" min="5" max="50">
+                    </div>
+
+                    <div class="control-group">
+                        <label>Learning Rate:</label>
+                        <input type="number" id="learning-rate" value="200" min="10" max="1000">
+                    </div>
+
+                    <div class="control-group">
+                        <label>Iterations:</label>
+                        <input type="number" id="iterations" value="1000" min="100" max="5000">
+                    </div>
+
+                    <div class="control-group">
+                        <label>Early Exaggeration:</label>
+                        <input type="number" id="early-exag" value="12" min="1" max="50">
+                    </div>
+
+                    <div class="control-group">
+                        <label>Momentum:</label>
+                        <input type="number" id="momentum" value="0.8" min="0" max="1" step="0.1">
+                    </div>
+
+                    <div class="control-group">
+                        <label>Seed:</label>
+                        <input type="number" id="tsne-seed" value="42" min="0">
+                    </div>
+                </div>
+
+                <div class="button-group">
+                    <button id="run-tsne-btn" class="btn btn-primary">Run t-SNE</button>
+                    <button id="stop-tsne-btn" class="btn btn-danger" style="display: none;">Stop</button>
+                </div>
+
+                <div id="progress-container" class="progress-container hidden">
+                    <div style="background: #e5e7eb; border-radius: 8px; height: 24px; overflow: hidden; position: relative;">
+                        <div id="progress-bar" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); height: 100%; width: 0%; transition: width 0.3s ease; display: flex; align-items: center; justify-content: center;">
+                            <span id="progress-text" style="color: white; font-size: 0.85em; font-weight: bold; position: absolute; left: 50%; transform: translateX(-50%);">Initializing...</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Section C: Outputs & Internals -->
+            <section class="card" id="results-section" style="display: none;">
+                <h2>C) Outputs & Internals</h2>
+
+                <div class="results-grid">
+                    <!-- 2D Scatter Plot -->
+                    <div class="result-box">
+                        <h3>2D t-SNE Result</h3>
+                        <div id="tsne-plot"></div>
+                    </div>
+
+                    <!-- Cluster Results (for MNIST/Images) - REMOVED -->
+                    <div class="result-box" id="cluster-results-box" style="display: none !important;">
+                        <h3>Cluster Distribution</h3>
+                        <div id="cluster-summary" style="min-height: 200px;">
+                            <p style="color: #999; text-align: center; padding: 40px;">Run t-SNE to see cluster results</p>
+                        </div>
+                    </div>
+
+                    <!-- Cost over iterations -->
+                    <div class="result-box">
+                        <h3>Cost (KL Divergence) Over Iterations</h3>
+                        <div id="cost-plot"></div>
+                    </div>
+
+                    <!-- P matrix heatmap -->
+                    <div class="result-box">
+                        <h3>P Matrix (High-D Affinities)</h3>
+                        <div class="button-group">
+                            <button class="btn btn-secondary" onclick="toggleMatrixView('P', 'heatmap')">Heatmap</button>
+                            <button class="btn btn-secondary" onclick="toggleMatrixView('P', 'grid')">Grid View</button>
+                            <button class="btn btn-secondary" onclick="downloadMatrix('P')">Download CSV</button>
+                        </div>
+                        <div id="p-matrix-plot"></div>
+                        <div id="p-matrix-grid" style="display: none;"></div>
+                    </div>
+
+                    <!-- Q matrix heatmap -->
+                    <div class="result-box">
+                        <h3>Q Matrix (Low-D Affinities)</h3>
+                        <div class="button-group">
+                            <button class="btn btn-secondary" onclick="toggleMatrixView('Q', 'heatmap')">Heatmap</button>
+                            <button class="btn btn-secondary" onclick="toggleMatrixView('Q', 'grid')">Grid View</button>
+                            <button class="btn btn-secondary" onclick="downloadMatrix('Q')">Download CSV</button>
+                        </div>
+                        <div id="q-matrix-plot"></div>
+                        <div id="q-matrix-grid" style="display: none;"></div>   
+                    </div>
+
+                    <!-- Y distances heatmap -->
+                    <div class="result-box">
+                        <h3>Distances Between y<sub>i</sub> (Embedding)</h3>
+                        <div class="button-group">
+                            <button class="btn btn-secondary" onclick="toggleMatrixView('D', 'heatmap')">Heatmap</button>
+                            <button class="btn btn-secondary" onclick="toggleMatrixView('D', 'grid')">Grid View</button>
+                            <button class="btn btn-secondary" onclick="downloadMatrix('D')">Download CSV</button>
+                        </div>
+                        <div id="d-matrix-plot"></div>
+                        <div id="d-matrix-grid" style="display: none;"></div>
+                    </div>
+
+                    <!-- Coordinates table -->
+                    <div class="result-box">
+                        <h3>2D Coordinates</h3>
+                        <div id="coords-table"></div>
+                    </div>
+
+                    <!-- Clustering -->
+                    <div class="result-box" id="clustering-section" style="display: none;">
+                        <h3>Clustering</h3>
+                        <div class="controls">
+                            <div class="control-group">
+                                <label>Method:</label>
+                                <select id="cluster-method">
+                                    <option value="kmeans">K-Means</option>
+                                    <option value="dbscan">DBSCAN</option>
+                                </select>
+                            </div>
+                            <div class="control-group" id="kmeans-params">
+                                <label>k (clusters):</label>
+                                <input type="number" id="kmeans-k" value="3" min="2" max="10">
+                            </div>
+                            <div class="control-group hidden" id="dbscan-params">
+                                <label>eps:</label>
+                                <input type="number" id="dbscan-eps" value="0.5" min="0.1" step="0.1">
+                                <label>min_samples:</label>
+                                <input type="number" id="dbscan-minsamples" value="5" min="1">
+                            </div>
+                        </div>
+                        <button id="run-cluster-btn" class="btn btn-primary">Run Clustering</button>
+                        <div id="cluster-summary"></div>
+                    </div>
+                </div>
+
+                <div class="button-group">
+                    <button id="export-btn" class="btn btn-primary">Export Results (CSV)</button>
+                </div>
+            </section>
+        </div>
+
+        <!-- Tab 2: Upload -->
+        <div id="upload-tab" class="tab-content">
+            <section class="card">
+                <h2>Upload Data</h2>
+
+                <div class="upload-section">
+                    <h3>CSV Files</h3>
+                    <input type="file" id="csv-upload" accept=".csv" multiple>
+                    <button id="csv-upload-btn" class="btn btn-primary">Upload CSV</button>
+                </div>
+
+                <div class="upload-section">
+                    <h3>Images</h3>
+                    <p class="info">Upload individual images or an entire folder</p>
+                    <input type="file" id="image-upload" accept="image/*" multiple>
+                    <input type="file" id="folder-upload" webkitdirectory directory multiple style="display: none;">
+                    <div class="button-group">
+                        <button id="image-upload-btn" class="btn btn-primary">Upload Images</button>
+                        <button id="folder-upload-btn" class="btn btn-primary">Upload Folder</button>
+                    </div>
+                </div>
+
+                <div id="upload-list" class="upload-list">
+                    <h3>Uploaded Datasets</h3>
+                    <div id="datasets-container"></div>
+                </div>
+            </section>
+        </div>
+
+        <!-- Image Preview Modal -->
+        <div id="image-modal" class="modal hidden">
+            <div class="modal-content">
+                <span class="modal-close">&times;</span>
+                <h3 id="modal-title"></h3>
+                <img id="modal-image" src="" alt="Preview">
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

web/style.css

@@ -0,0 +1,1012 @@
+/* ==================== CSS Variables ==================== */
+:root {
+    --primary: #667eea;
+    --primary-dark: #5568d3;
+    --secondary: #764ba2;
+    --accent: #f093fb;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    --info: #3b82f6;
+
+    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --bg-light: #f8f9fa;
+    --bg-white: #ffffff;
+    --bg-dark: #1a1a2e;
+
+    --text-primary: #1f2937;
+    --text-secondary: #6b7280;
+    --text-light: #9ca3af;
+
+    --border-color: #e5e7eb;
+    --border-radius: 12px;
+    --border-radius-lg: 16px;
+    --border-radius-sm: 8px;
+
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ==================== Reset & Base Styles ==================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg-gradient);
+    color: var(--text-primary);
+    min-height: 100vh;
+    padding: 20px;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* ==================== Container ==================== */
+.container {
+    max-width: 1600px;
+    margin: 0 auto;
+    background: var(--bg-white);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-xl);
+    overflow: hidden;
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ==================== Header ==================== */
+header {
+    background: var(--bg-gradient);
+    color: white;
+    padding: 40px 30px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+    opacity: 0.3;
+}
+
+header h1 {
+    font-size: 3em;
+    margin-bottom: 10px;
+    font-weight: 800;
+    position: relative;
+    letter-spacing: -1px;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.subtitle {
+    font-size: 1.2em;
+    opacity: 0.95;
+    position: relative;
+    font-weight: 400;
+}
+
+/* ==================== Tabs ==================== */
+.tabs {
+    display: flex;
+    background: var(--bg-light);
+    border-bottom: 2px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+}
+
+.tab-button {
+    flex: 1;
+    padding: 18px 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--text-secondary);
+    transition: var(--transition);
+    position: relative;
+    border-bottom: 3px solid transparent;
+}
+
+.tab-button::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 3px;
+    background: var(--bg-gradient);
+    transition: var(--transition);
+    transform: translateX(-50%);
+}
+
+.tab-button:hover {
+    background: rgba(102, 126, 234, 0.05);
+    color: var(--primary);
+}
+
+.tab-button.active {
+    color: var(--primary);
+    background: var(--bg-white);
+}
+
+.tab-button.active::before {
+    width: 100%;
+}
+
+/* ==================== Tab Content ==================== */
+.tab-content {
+    display: none;
+    padding: 30px;
+    animation: slideIn 0.3s ease-out;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* ==================== Cards ==================== */
+.card {
+    background: var(--bg-white);
+    border-radius: var(--border-radius);
+    padding: 30px;
+    margin-bottom: 25px;
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
+}
+
+.card:hover {
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-2px);
+}
+
+.card h2 {
+    color: var(--primary);
+    margin-bottom: 20px;
+    font-size: 1.8em;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.card h2::before {
+    content: '';
+    width: 4px;
+    height: 28px;
+    background: var(--bg-gradient);
+    border-radius: 2px;
+}
+
+.card h3 {
+    color: var(--text-primary);
+    margin-bottom: 15px;
+    font-size: 1.3em;
+    font-weight: 600;
+}
+
+/* ==================== Info Blocks ==================== */
+.info {
+    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
+    border-left: 4px solid var(--info);
+    padding: 15px 20px;
+    margin: 15px 0;
+    border-radius: var(--border-radius-sm);
+    font-size: 0.95em;
+    color: #0c4a6e;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.info::before {
+    content: 'ℹ️';
+    font-size: 1.2em;
+}
+
+/* ==================== Controls ==================== */
+.controls {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+    margin-bottom: 25px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.control-group label {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.95em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.control-group input,
+.control-group select {
+    padding: 12px 16px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    font-size: 1em;
+    font-family: inherit;
+    transition: var(--transition);
+    background: var(--bg-white);
+    color: var(--text-primary);
+}
+
+.control-group input:focus,
+.control-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.control-group input:hover,
+.control-group select:hover {
+    border-color: var(--primary-dark);
+}
+
+/* ==================== Buttons ==================== */
+.btn {
+    padding: 14px 28px;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    font-size: 1em;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    font-family: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.btn:active::before {
+    width: 300px;
+    height: 300px;
+}
+
+.btn-primary {
+    background: var(--bg-gradient);
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+.btn-secondary {
+    background: var(--text-secondary);
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: var(--text-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+.btn-danger {
+    background: var(--error);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+.button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 20px;
+}
+
+/* ==================== Progress Bar ==================== */
+.progress-container {
+    margin: 25px 0;
+    background: var(--bg-light);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    padding: 20px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-color);
+}
+
+.progress-bar {
+    height: 32px;
+    background: var(--bg-gradient);
+    border-radius: var(--border-radius-sm);
+    transition: width 0.3s ease;
+    width: 0%;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+#progress-text {
+    text-align: center;
+    margin-top: 12px;
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.95em;
+}
+
+/* ==================== Output Sections ==================== */
+.output {
+    background: var(--bg-light);
+    border-radius: var(--border-radius);
+    padding: 25px;
+    margin-top: 20px;
+    border: 1px solid var(--border-color);
+}
+
+.output.hidden {
+    display: none;
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.stat-card {
+    background: var(--bg-white);
+    padding: 20px;
+    border-radius: var(--border-radius-sm);
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
+}
+
+.stat-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+}
+
+.stat-label {
+    font-size: 0.85em;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.stat-value {
+    font-size: 2em;
+    font-weight: 700;
+    background: var(--bg-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.distance-info {
+    background: var(--bg-white);
+    padding: 15px;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+    font-size: 0.95em;
+}
+
+/* ==================== Tables ==================== */
+.table-wrapper {
+    overflow-x: auto;
+    border-radius: var(--border-radius-sm);
+    box-shadow: var(--shadow-sm);
+    margin-top: 15px;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bg-white);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+}
+
+.data-table thead {
+    background: var(--bg-gradient);
+    color: white;
+}
+
+.data-table th,
+.data-table td {
+    padding: 14px 18px;
+    text-align: left;
+}
+
+.data-table th {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.85em;
+    letter-spacing: 0.5px;
+}
+
+.data-table tbody tr {
+    transition: var(--transition);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.data-table tbody tr:hover {
+    background: var(--bg-light);
+}
+
+.data-table tbody tr:last-child {
+    border-bottom: none;
+}
+
+.more-rows {
+    text-align: center;
+    font-style: italic;
+    color: var(--text-secondary);
+    background: var(--bg-light);
+}
+
+/* Distance Matrix */
+.distance-matrix {
+    font-size: 0.85em;
+}
+
+.distance-matrix td {
+    text-align: center;
+    padding: 8px 12px;
+}
+
+.distance-matrix th {
+    text-align: center;
+    padding: 8px 12px;
+}
+
+.distance-matrix .diagonal {
+    background: var(--bg-light);
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+/* Matrix Grid View */
+.matrix-grid {
+    font-size: 0.75em;
+}
+
+.matrix-grid td {
+    text-align: center;
+    padding: 6px 10px;
+    font-family: 'Courier New', monospace;
+}
+
+.matrix-grid th {
+    text-align: center;
+    padding: 6px 10px;
+    font-size: 0.9em;
+}
+
+.matrix-grid .diagonal {
+    background: #fff3cd;
+    font-weight: 600;
+}
+
+/* ==================== Results Grid ==================== */
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 25px;
+    margin-top: 25px;
+}
+
+.result-box {
+    background: var(--bg-light);
+    border-radius: var(--border-radius);
+    padding: 25px;
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
+}
+
+.result-box:hover {
+    box-shadow: var(--shadow-lg);
+}
+
+.result-box h3 {
+    color: var(--primary);
+    margin-bottom: 15px;
+    font-size: 1.2em;
+    font-weight: 600;
+}
+
+#tsne-plot,
+#cost-plot,
+#p-matrix-plot,
+#q-matrix-plot {
+    min-height: 400px;
+    background: var(--bg-white);
+    border-radius: var(--border-radius-sm);
+    margin-top: 10px;
+}
+
+#coords-table {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+/* ==================== Upload Section ==================== */
+.upload-section {
+    background: var(--bg-light);
+    border-radius: var(--border-radius);
+    padding: 25px;
+    margin-bottom: 25px;
+    border: 2px dashed var(--border-color);
+    transition: var(--transition);
+}
+
+.upload-section:hover {
+    border-color: var(--primary);
+    background: rgba(102, 126, 234, 0.02);
+}
+
+.upload-section h3 {
+    color: var(--primary);
+    margin-bottom: 15px;
+    font-size: 1.3em;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+/* Dataset List */
+.upload-list {
+    background: var(--bg-light);
+    border-radius: var(--border-radius);
+    padding: 25px;
+    border: 1px solid var(--border-color);
+}
+
+.dataset-list {
+    list-style: none;
+}
+
+.dataset-item {
+    padding: 15px 20px;
+    margin-bottom: 12px;
+    background: var(--bg-white);
+    border-radius: var(--border-radius-sm);
+    border-left: 4px solid var(--primary);
+    font-size: 1em;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    transition: var(--transition);
+}
+
+.dataset-item:hover {
+    transform: translateX(5px);
+    box-shadow: var(--shadow-md);
+}
+
+.dataset-icon {
+    font-size: 1.5em;
+}
+
+.dataset-label {
+    flex: 1;
+    font-weight: 500;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-secondary);
+    font-size: 1.1em;
+}
+
+/* CSV Columns Selector */
+#csv-columns-list {
+    background: var(--bg-white);
+    padding: 20px;
+    border-radius: var(--border-radius-sm);
+    max-height: 250px;
+    overflow-y: auto;
+    border: 2px solid var(--border-color);
+    margin-top: 10px;
+}
+
+.checkbox-label {
+    display: block;
+    padding: 12px;
+    cursor: pointer;
+    transition: var(--transition);
+    border-radius: var(--border-radius-sm);
+    font-weight: 500;
+}
+
+.checkbox-label:hover {
+    background: var(--bg-light);
+}
+
+.checkbox-label input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+}
+
+/* Embed Status */
+.embed-status {
+    margin-top: 15px;
+    padding: 12px 20px;
+    border-radius: var(--border-radius-sm);
+    font-weight: 500;
+    display: inline-block;
+}
+
+.embed-status.computing {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.embed-status.success {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.embed-status.error {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+/* ==================== Modal ==================== */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.modal.hidden {
+    display: none;
+}
+
+.modal-content {
+    background: var(--bg-white);
+    border-radius: var(--border-radius-lg);
+    padding: 40px;
+    max-width: 900px;
+    max-height: 90vh;
+    overflow: auto;
+    position: relative;
+    box-shadow: var(--shadow-xl);
+    animation: scaleIn 0.3s ease-out;
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.modal-close {
+    position: absolute;
+    top: 20px;
+    right: 25px;
+    font-size: 2.5em;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: var(--transition);
+    line-height: 1;
+}
+
+.modal-close:hover {
+    color: var(--error);
+    transform: rotate(90deg);
+}
+
+#modal-image {
+    max-width: 100%;
+    border-radius: var(--border-radius);
+    margin-top: 20px;
+    box-shadow: var(--shadow-lg);
+}
+
+/* ==================== Notifications ==================== */
+#notification {
+    position: fixed;
+    top: -100px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-white);
+    color: var(--text-primary);
+    padding: 16px 32px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-xl);
+    z-index: 2000;
+    font-weight: 600;
+    min-width: 300px;
+    text-align: center;
+    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 4px solid var(--primary);
+}
+
+#notification.show {
+    top: 30px;
+}
+
+#notification.success {
+    border-left-color: var(--success);
+    background: #ecfdf5;
+    color: #065f46;
+}
+
+#notification.error {
+    border-left-color: var(--error);
+    background: #fef2f2;
+    color: #991b1b;
+}
+
+#notification.warning {
+    border-left-color: var(--warning);
+    background: #fffbeb;
+    color: #92400e;
+}
+
+#notification.info {
+    border-left-color: var(--info);
+    background: #eff6ff;
+    color: #1e40af;
+}
+
+/* ==================== Utility Classes ==================== */
+.hidden {
+    display: none !important;
+}
+
+.text-center {
+    text-align: center;
+}
+
+/* ==================== Scrollbar Styling ==================== */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-light);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--bg-gradient);
+    border-radius: 10px;
+    border: 2px solid var(--bg-light);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #5568d3 0%, #653a8a 100%);
+}
+
+/* ==================== Responsive Design ==================== */
+@media (max-width: 1200px) {
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+
+    .container {
+        border-radius: var(--border-radius);
+    }
+
+    header {
+        padding: 25px 20px;
+    }
+
+    header h1 {
+        font-size: 2em;
+    }
+
+    .subtitle {
+        font-size: 1em;
+    }
+
+    .tabs {
+        flex-direction: column;
+    }
+
+    .tab-button {
+        padding: 15px 20px;
+    }
+
+    .tab-content {
+        padding: 20px;
+    }
+
+    .card {
+        padding: 20px;
+    }
+
+    .controls {
+        grid-template-columns: 1fr;
+    }
+
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .modal-content {
+        margin: 20px;
+        padding: 25px;
+        max-width: 90%;
+    }
+}
+
+@media (max-width: 480px) {
+    header h1 {
+        font-size: 1.6em;
+    }
+
+    .btn {
+        padding: 12px 20px;
+        font-size: 0.9em;
+    }
+
+    .button-group {
+        flex-direction: column;
+    }
+
+    .button-group .btn {
+        width: 100%;
+    }
+}
+
+/* ==================== Animations ==================== */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.loading {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* ==================== Print Styles ==================== */
+@media print {
+    body {
+        background: white;
+        padding: 0;
+    }
+
+    .container {
+        box-shadow: none;
+    }
+
+    header {
+        background: none;
+        color: black;
+    }
+
+    .tabs,
+    .btn,
+    .upload-section {
+        display: none;
+    }
+}