Init commit

.dockerignore

@@ -0,0 +1,14 @@
+__pycache__
+*.pyc
+*.pyo
+.git
+.gitignore
+.env
+*.md
+.venv
+venv
+.idea
+.vscode
+*.egg-info
+dist
+build

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
+
+# Set working directory to backend
+WORKDIR /app/backend
+
+# Expose port for HuggingFace Spaces
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "-m", "uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Omar Kamali
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,143 @@
+# ---
+title: "LLM Scope"
+subtitle: "Explore the inners of your favorite LLMs"
+sdk: docker
+license: mit
+tags:
+  - llm
+  - visualization
+  - transformer
+---
+
+# LLM Scope — Explore the inners of your favorite LLMs
+
+Explore the inners of your favorite LLMs. Visualize transformer architectures and parameter counts without downloading weights.
+
+**Space:** https://huggingface.co/spaces/omarkamali/llm-scope
+
+**Contact:** omarkamali.com · omneitylabs.com · hf:omarkamali · x.com/omarkamali · linkedin.com/in/omar-kamali
+
+---
+
+## About / Model Inspector
+
+A beautiful, interactive treemap visualizer for transformer model architectures. Enter a HuggingFace model ID or upload a config.json to see a proportional visualization of the model's structure - all without downloading weights.
+
+## Features
+
+- **No Weights Required**: Calculates parameter counts mathematically from config dimensions only
+- **Interactive Treemap**: D3.js zoomable treemap with area proportional to parameter count
+- **Multiple Architectures**: Supports LLaMA, Mistral, Mixtral, GPT-2, BERT, T5, Falcon, Gemma, Qwen, and more
+- **Beautiful Dark Theme**: Modern, minimal UI designed for ML/AI workflows
+- **Drag & Drop Upload**: Upload your own config.json files for analysis
+
+## Local Development
+
+### Prerequisites
+
+- Python 3.9+
+- Node.js (for serving frontend during development)
+
+### Setup
+
+1. Clone the repository:
+```bash
+git clone https://huggingface.co/omarkamali/llm-scope.git
+cd model-inspector
+```
+
+2. Install Python dependencies:
+```bash
+cd backend
+pip install -r requirements.txt
+```
+
+3. Run the server:
+```bash
+uvicorn main:app --reload --port 7860
+```
+
+4. Open http://localhost:7860 in your browser
+
+### Running with Docker
+
+```bash
+docker build -t model-inspector .
+docker run -p 7860:7860 model-inspector
+```
+
+## API Endpoints
+
+### POST /api/inspect
+
+Inspect a model by HuggingFace model ID or config object.
+
+**Request Body:**
+```json
+{
+  "model_id": "qwen/qwen3-4b-instruct-2507"
+}
+```
+
+or
+
+```json
+{
+  "config": { /* config.json contents */ }
+}
+```
+
+**Response:**
+```json
+{
+  "tree": {
+    "name": "Qwen Model",
+    "type": "model",
+    "params": 1234,
+    "children": [...]
+  },
+  "metadata": {
+    "model_id": "qwen/qwen3-4b-instruct-2507",
+    "model_type": "llama",
+    "total_params": 1234,
+    "formatted_params": "...",
+    "config": {...}
+  }
+}
+```
+
+### POST /api/upload
+
+Upload a config.json file for inspection.
+
+**Request:** `multipart/form-data` with `file` field
+
+### GET /api/health
+
+Health check endpoint.
+
+## Parameter Calculation
+
+Parameters are calculated mathematically from config dimensions:
+
+| Component | Formula |
+|-----------|---------|
+| Embedding | vocab_size × hidden_size |
+| Attention Q/K/V | hidden_size × (num_heads × head_dim) |
+| Attention Output | (num_heads × head_dim) × hidden_size |
+| MLP Up | hidden_size × intermediate_size |
+| MLP Gate (SwiGLU) | hidden_size × intermediate_size |
+| MLP Down | intermediate_size × hidden_size |
+| LayerNorm | 2 × hidden_size (weight + bias) |
+| RMSNorm | hidden_size (weight only) |
+| LM Head | hidden_size × vocab_size (if not tied) |
+
+## Tech Stack
+
+- **Backend**: FastAPI (Python)
+- **Frontend**: Vanilla JS + D3.js
+- **Deployment**: Docker-based HuggingFace Space
+
+## License
+
+MIT

backend/architecture_parser.py

@@ -0,0 +1,959 @@
+"""
+Architecture parser - produces LINEAR PIPELINE representation of transformer models.
+Shows the sequential flow of data through the model as a flowchart.
+"""
+
+import re
+from typing import Dict, Any, List, Optional, Tuple
+from collections import OrderedDict
+
+import torch
+import torch.nn as nn
+from transformers import AutoConfig, AutoModel, AutoModelForCausalLM, AutoModelForSeq2SeqLM
+
+
+def format_params(count: int) -> str:
+    """Format parameter count in human-readable form."""
+    if count >= 1e12:
+        return f"{count / 1e12:.2f}T"
+    elif count >= 1e9:
+        return f"{count / 1e9:.2f}B"
+    elif count >= 1e6:
+        return f"{count / 1e6:.2f}M"
+    elif count >= 1e3:
+        return f"{count / 1e3:.2f}K"
+    else:
+        return str(count)
+
+
+def get_module_type(module: nn.Module, name: str) -> str:
+    """Infer module type from class name and module name."""
+    class_name = module.__class__.__name__.lower()
+    name_lower = name.lower()
+
+    # Check if this is a model wrapper (contains "model" in class name) - should be treated as module
+    is_model_wrapper = 'model' in class_name and ('for' in class_name or class_name.endswith('model'))
+
+    if is_model_wrapper:
+        return 'module'
+
+    if 'embedding' in class_name:
+        return 'embedding'
+    elif 'attention' in class_name or 'attn' in class_name:
+        return 'attention'
+    elif 'mlp' in class_name or 'feedforward' in class_name or 'ffn' in class_name:
+        return 'mlp'
+    elif 'layernorm' in class_name or 'rmsnorm' in class_name:
+        return 'norm'
+    elif 'linear' in class_name:
+        return 'linear'
+    elif 'conv' in class_name:
+        return 'linear'
+    elif 'dropout' in class_name:
+        return 'dropout'
+    elif 'pool' in class_name:
+        return 'pooler'
+    elif 'head' in class_name or 'lm_head' in name_lower:
+        return 'head'
+    # Check for MoE/expert - but only for actual MoE layers, not model wrappers
+    elif ('expert' in class_name or 'moe' in class_name) and 'layer' in class_name:
+        return 'mlp'
+    elif 'expert' in class_name and 'model' not in class_name:
+        return 'mlp'
+
+    # Check name patterns
+    if 'embed' in name_lower:
+        return 'embedding'
+    elif 'attn' in name_lower or 'attention' in name_lower:
+        return 'attention'
+    elif 'mlp' in name_lower or 'fc' in name_lower or 'ffn' in name_lower:
+        return 'mlp'
+    elif 'norm' in name_lower or 'ln' in name_lower:
+        return 'norm'
+    elif 'head' in name_lower:
+        return 'head'
+    elif 'expert' in name_lower and 'model' not in name_lower:
+        return 'mlp'
+
+    return 'module'
+
+
+def count_parameters(module: nn.Module) -> int:
+    """Count all parameters in a module recursively."""
+    return sum(p.numel() for p in module.parameters())
+
+
+def humanize_name(name: str) -> str:
+    """Convert module name to human-readable format."""
+    # Handle indexed names like "0", "1" etc
+    if name.isdigit():
+        return f"Layer {name}"
+
+    # Convert snake_case to Title Case
+    name = name.replace('_', ' ')
+
+    # Handle common abbreviations
+    replacements = {
+        'Wte': 'Token Embedding',
+        'Wpe': 'Position Embedding',
+        'Ln F': 'Final LayerNorm',
+        'Ln 1': 'LayerNorm 1',
+        'Ln 2': 'LayerNorm 2',
+        'Attn': 'Attention',
+        'Mlp': 'MLP',
+        'Lm Head': 'LM Head',
+        'Q Proj': 'Query',
+        'K Proj': 'Key',
+        'V Proj': 'Value',
+        'O Proj': 'Output',
+        'Out Proj': 'Output',
+        'C Attn': 'QKV Projection',
+        'C Proj': 'Output Projection',
+        'C Fc': 'Up Projection',
+        'Up Proj': 'Up Projection',
+        'Down Proj': 'Down Projection',
+        'Gate Proj': 'Gate Projection',
+    }
+
+    result = name.title()
+    for old, new in replacements.items():
+        result = result.replace(old, new)
+
+    return result
+
+
+def is_modality_encoder(name: str, module: nn.Module) -> bool:
+    """
+    Check if a module is a separate MODALITY encoder (vision tower, audio encoder, etc.)
+    This should only match top-level modality-specific encoders, not internal components.
+    """
+    name_lower = name.lower()
+    class_lower = module.__class__.__name__.lower()
+
+    # Specific patterns for modality encoders (must have modality keyword)
+    modality_keywords = ['vision', 'image', 'audio', 'video', 'visual', 'pixel']
+
+    # Must contain a modality keyword
+    has_modality = any(kw in name_lower or kw in class_lower for kw in modality_keywords)
+    if not has_modality:
+        return False
+
+    # And should be a substantial module (tower, model, encoder)
+    structure_keywords = ['tower', 'model', 'encoder', 'backbone']
+    has_structure = any(kw in name_lower or kw in class_lower for kw in structure_keywords)
+
+    # Or just "vision_tower", "image_encoder" style names
+    return has_structure or name_lower in ['vision', 'visual', 'image']
+
+
+def extract_pipeline_steps(module: nn.Module, name: str, depth: int = 0, max_depth: int = 4, detect_parallel: bool = True) -> List[Dict[str, Any]]:
+    """
+    Extract pipeline steps from a module.
+    Handles both linear and parallel (multimodal) architectures.
+    Returns a list of steps where parallel branches are marked.
+
+    detect_parallel: Only look for parallel modality encoders at top level (depth 0-1)
+    """
+    steps = []
+    children = list(module.named_children())
+
+    if not children:
+        return steps
+
+    # Categorize children
+    embeddings = []
+    vision_modules = []  # Vision tower, projector
+    language_model = None  # Main language model
+    layer_container = None
+    layer_list = []
+    norms = []
+    heads = []
+    others = []
+
+    for child_name, child_module in children:
+        child_params = count_parameters(child_module)
+        if child_params == 0:
+            continue
+
+        child_type = get_module_type(child_module, child_name)
+        name_lower = child_name.lower()
+        class_lower = child_module.__class__.__name__.lower()
+
+        # Detect multimodal components at appropriate depth
+        if detect_parallel and depth <= 1:
+            # Vision tower or projector
+            if is_modality_encoder(child_name, child_module) or 'projector' in name_lower or 'projector' in class_lower:
+                vision_modules.append((child_name, child_module))
+                continue
+            # Main language model (separate from vision)
+            if 'language_model' in name_lower or 'text_model' in name_lower:
+                language_model = (child_name, child_module)
+                continue
+
+        if child_type == 'embedding':
+            embeddings.append((child_name, child_module))
+        elif child_type == 'norm':
+            norms.append((child_name, child_module))
+        elif child_type == 'head':
+            heads.append((child_name, child_module))
+        elif child_name.isdigit():
+            layer_list.append((child_name, child_module))
+        elif 'layer' in name_lower or 'block' in name_lower or name_lower == 'h':
+            sub_children = list(child_module.named_children())
+            if sub_children and sub_children[0][0].isdigit():
+                layer_container = (child_name, child_module)
+            else:
+                others.append((child_name, child_module))
+        else:
+            others.append((child_name, child_module))
+
+    # Handle multimodal: vision path + language model as parallel branches
+    if vision_modules and language_model:
+        parallel_branches = []
+
+        # Vision branch: vision_tower + projector in sequence
+        vision_steps = []
+        for vm_name, vm_module in vision_modules:
+            vm_substeps = extract_pipeline_steps(vm_module, vm_name, depth + 1, max_depth, detect_parallel=False)
+            if vm_substeps:
+                step = {
+                    "name": humanize_name(vm_name),
+                    "type": "encoder",
+                    "params": count_parameters(vm_module),
+                    "class": vm_module.__class__.__name__,
+                    "substeps": vm_substeps,
+                    "_collapsed": True,
+                }
+            else:
+                step = build_step(vm_module, vm_name, depth + 1, max_depth)
+            vision_steps.append(step)
+
+        vision_branch = {
+            "name": "Vision Path",
+            "type": "encoder",
+            "params": sum(count_parameters(m) for _, m in vision_modules),
+            "substeps": vision_steps,
+            "_collapsed": False,
+        }
+        parallel_branches.append(vision_branch)
+
+        # Language model branch
+        lm_name, lm_module = language_model
+        lm_steps = extract_pipeline_steps(lm_module, lm_name, depth + 1, max_depth, detect_parallel=False)
+        if not lm_steps:
+            lm_steps = [build_step(lm_module, lm_name, depth + 1, max_depth)]
+
+        lang_branch = {
+            "name": "Language Model",
+            "type": "module",
+            "params": count_parameters(lm_module),
+            "class": lm_module.__class__.__name__,
+            "substeps": lm_steps,
+            "_collapsed": False,
+        }
+        parallel_branches.append(lang_branch)
+
+        steps.append({
+            "name": "Multimodal Processing",
+            "type": "parallel",
+            "params": sum(b.get("params", 0) for b in parallel_branches),
+            "branches": parallel_branches,
+            "_collapsed": False,
+        })
+
+        # Skip normal processing - we handled everything
+        embeddings = []
+        norms = []
+        layer_container = None
+        layer_list = []
+        others = []
+
+    # Handle case where only vision modules exist (no separate language_model)
+    elif vision_modules:
+        for enc_name, enc_module in vision_modules:
+            enc_steps = extract_pipeline_steps(enc_module, enc_name, depth + 1, max_depth, detect_parallel=False)
+            if enc_steps:
+                steps.append({
+                    "name": humanize_name(enc_name),
+                    "type": "encoder",
+                    "params": count_parameters(enc_module),
+                    "class": enc_module.__class__.__name__,
+                    "substeps": enc_steps,
+                    "_collapsed": True,
+                })
+            else:
+                steps.append(build_step(enc_module, enc_name, depth + 1, max_depth))
+
+    # 1. Regular embeddings (if not already handled in parallel)
+    for child_name, child_module in embeddings:
+        step = build_step(child_module, child_name, depth + 1, max_depth)
+        steps.append(step)
+
+    # 2. Transformer layers
+    if layer_container:
+        container_name, container_module = layer_container
+        layer_children = [(n, m) for n, m in container_module.named_children() if count_parameters(m) > 0]
+
+        if layer_children:
+            first_layer = layer_children[0][1]
+            total_params = sum(count_parameters(m) for _, m in layer_children)
+            layer_substeps = extract_layer_internals(first_layer, depth + 2, max_depth)
+            layer_shape = get_layer_shape_info(first_layer)
+
+            layer_step = {
+                "name": f"Transformer Layers",
+                "type": "layers",
+                "params": total_params,
+                "class": first_layer.__class__.__name__,
+                "count": len(layer_children),
+                "substeps": layer_substeps,
+                "_collapsed": False,
+            }
+            if layer_shape:
+                layer_step["shape"] = layer_shape
+            steps.append(layer_step)
+    elif layer_list:
+        first_layer = layer_list[0][1]
+        total_params = sum(count_parameters(m) for _, m in layer_list)
+        layer_substeps = extract_layer_internals(first_layer, depth + 2, max_depth)
+        layer_shape = get_layer_shape_info(first_layer)
+
+        layer_step = {
+            "name": f"Transformer Layers",
+            "type": "layers",
+            "params": total_params,
+            "class": first_layer.__class__.__name__,
+            "count": len(layer_list),
+            "substeps": layer_substeps,
+            "_collapsed": False,
+        }
+        if layer_shape:
+            layer_step["shape"] = layer_shape
+        steps.append(layer_step)
+
+    # 3. Other modules
+    for child_name, child_module in others:
+        child_type = get_module_type(child_module, child_name)
+        if child_type == 'module':
+            sub_steps = extract_pipeline_steps(child_module, child_name, depth + 1, max_depth, detect_parallel=detect_parallel)
+            if sub_steps:
+                steps.extend(sub_steps)
+            else:
+                step = build_step(child_module, child_name, depth + 1, max_depth)
+                steps.append(step)
+        else:
+            step = build_step(child_module, child_name, depth + 1, max_depth)
+            steps.append(step)
+
+    # 4. Final norms
+    for child_name, child_module in norms:
+        step = build_step(child_module, child_name, depth + 1, max_depth)
+        steps.append(step)
+
+    # 5. Output heads
+    for child_name, child_module in heads:
+        step = build_step(child_module, child_name, depth + 1, max_depth)
+        steps.append(step)
+
+    return steps
+
+
+def extract_layer_internals(layer_module: nn.Module, depth: int, max_depth: int) -> List[Dict[str, Any]]:
+    """Extract the internal flow of a single transformer layer."""
+    steps = []
+    children = list(layer_module.named_children())
+
+    # Categorize
+    norms = []
+    attentions = []
+    mlps = []
+    others = []
+
+    for child_name, child_module in children:
+        child_params = count_parameters(child_module)
+        if child_params == 0:
+            continue
+
+        child_type = get_module_type(child_module, child_name)
+
+        if child_type == 'norm':
+            norms.append((child_name, child_module))
+        elif child_type == 'attention':
+            attentions.append((child_name, child_module))
+        elif child_type == 'mlp':
+            mlps.append((child_name, child_module))
+        else:
+            others.append((child_name, child_module))
+
+    # Typical transformer layer flow: norm1 -> attn -> norm2 -> mlp
+    # But order depends on architecture (pre-norm vs post-norm)
+
+    # For now, just order: attention first, then MLP, with norms interspersed
+    norm_idx = 0
+
+    # Attention block
+    if norms and norm_idx < len(norms):
+        step = build_step(norms[norm_idx][1], norms[norm_idx][0], depth, max_depth)
+        steps.append(step)
+        norm_idx += 1
+
+    for child_name, child_module in attentions:
+        step = build_step(child_module, child_name, depth, max_depth)
+        steps.append(step)
+
+    # MLP block
+    if norms and norm_idx < len(norms):
+        step = build_step(norms[norm_idx][1], norms[norm_idx][0], depth, max_depth)
+        steps.append(step)
+        norm_idx += 1
+
+    for child_name, child_module in mlps:
+        step = build_step(child_module, child_name, depth, max_depth)
+        steps.append(step)
+
+    # Remaining norms
+    while norm_idx < len(norms):
+        step = build_step(norms[norm_idx][1], norms[norm_idx][0], depth, max_depth)
+        steps.append(step)
+        norm_idx += 1
+
+    # Others
+    for child_name, child_module in others:
+        step = build_step(child_module, child_name, depth, max_depth)
+        steps.append(step)
+
+    return steps
+
+
+def get_module_shape(module: nn.Module) -> Optional[str]:
+    """Extract shape information from a module."""
+    class_name = module.__class__.__name__
+
+    # Linear layers
+    if hasattr(module, 'in_features') and hasattr(module, 'out_features'):
+        return f"{module.in_features} → {module.out_features}"
+
+    # Embedding layers
+    if hasattr(module, 'num_embeddings') and hasattr(module, 'embedding_dim'):
+        return f"{module.num_embeddings} × {module.embedding_dim}"
+
+    # LayerNorm / RMSNorm - check multiple possible attribute names
+    if hasattr(module, 'normalized_shape'):
+        shape = module.normalized_shape
+        if isinstance(shape, (list, tuple)):
+            return f"dim={shape[0]}" if len(shape) == 1 else str(shape)
+        return f"dim={shape}"
+
+    # RMSNorm often uses 'weight' shape
+    if 'rmsnorm' in class_name.lower() or 'layernorm' in class_name.lower():
+        if hasattr(module, 'weight') and module.weight is not None:
+            return f"dim={module.weight.shape[0]}"
+
+    # Conv layers
+    if hasattr(module, 'in_channels') and hasattr(module, 'out_channels'):
+        kernel = getattr(module, 'kernel_size', None)
+        if kernel:
+            return f"{module.in_channels}→{module.out_channels}, k={kernel}"
+        return f"{module.in_channels} → {module.out_channels}"
+
+    # Attention - try to get num_heads and head_dim
+    if hasattr(module, 'num_heads'):
+        head_dim = getattr(module, 'head_dim', None)
+        if head_dim:
+            return f"heads={module.num_heads}, dim={head_dim}"
+        return f"heads={module.num_heads}"
+
+    if hasattr(module, 'num_attention_heads'):
+        head_dim = getattr(module, 'head_dim', None)
+        if head_dim:
+            return f"heads={module.num_attention_heads}, dim={head_dim}"
+        return f"heads={module.num_attention_heads}"
+
+    # MLP/FFN - try to infer from children
+    if 'mlp' in class_name.lower() or 'feedforward' in class_name.lower():
+        # Look for up/gate projection to get intermediate size
+        for child_name, child in module.named_children():
+            if hasattr(child, 'out_features'):
+                return f"→ {child.out_features}"
+
+    # Try to get hidden_size from config stored on module
+    if hasattr(module, 'config'):
+        cfg = module.config
+        if hasattr(cfg, 'hidden_size'):
+            return f"hidden={cfg.hidden_size}"
+
+    return None
+
+
+def get_layer_shape_info(layer_module: nn.Module) -> Optional[str]:
+    """Extract shape info from a transformer layer by looking at its components."""
+    hidden_size = None
+    intermediate_size = None
+    num_heads = None
+
+    for name, child in layer_module.named_modules():
+        name_lower = name.lower()
+
+        # Find num_heads
+        if not num_heads:
+            if hasattr(child, 'num_heads'):
+                num_heads = child.num_heads
+            elif hasattr(child, 'num_attention_heads'):
+                num_heads = child.num_attention_heads
+
+        # Find hidden_size from multiple sources
+        if not hidden_size:
+            # From attention head_dim * num_heads
+            if hasattr(child, 'num_heads') and hasattr(child, 'head_dim'):
+                hidden_size = child.num_heads * child.head_dim
+            # From hidden_size attribute
+            elif hasattr(child, 'hidden_size'):
+                hidden_size = child.hidden_size
+            # From norm layers
+            elif hasattr(child, 'normalized_shape'):
+                shape = child.normalized_shape
+                if isinstance(shape, (list, tuple)):
+                    hidden_size = shape[0]
+                else:
+                    hidden_size = shape
+            # From norm weight shape
+            elif ('norm' in name_lower or 'ln' in name_lower) and hasattr(child, 'weight') and child.weight is not None:
+                try:
+                    hidden_size = child.weight.shape[0]
+                except:
+                    pass
+            # From q_proj or similar linear layers (in_features = hidden_size)
+            elif ('q_proj' in name_lower or 'query' in name_lower) and hasattr(child, 'in_features'):
+                hidden_size = child.in_features
+            # From o_proj output (out_features = hidden_size)
+            elif ('o_proj' in name_lower or 'out_proj' in name_lower) and hasattr(child, 'out_features'):
+                hidden_size = child.out_features
+
+        # Find intermediate size from MLP
+        if not intermediate_size:
+            if ('up' in name_lower or 'gate' in name_lower or 'fc1' in name_lower or 'w1' in name_lower or 'w2' in name_lower) and hasattr(child, 'out_features'):
+                intermediate_size = child.out_features
+
+    parts = []
+    if hidden_size:
+        parts.append(f"d={hidden_size}")
+    if intermediate_size:
+        parts.append(f"ffn={intermediate_size}")
+    if num_heads:
+        parts.append(f"h={num_heads}")
+
+    return ", ".join(parts) if parts else None
+
+
+def build_step(module: nn.Module, name: str, depth: int, max_depth: int) -> Dict[str, Any]:
+    """Build a single pipeline step from a module."""
+    params = count_parameters(module)
+    module_type = get_module_type(module, name)
+    display_name = humanize_name(name)
+
+    step = {
+        "name": display_name,
+        "type": module_type,
+        "params": params,
+        "class": module.__class__.__name__,
+    }
+
+    # Add shape information
+    shape = get_module_shape(module)
+    if shape:
+        step["shape"] = shape
+
+    # Add substeps for complex modules (if not too deep)
+    if depth < max_depth:
+        children = list(module.named_children())
+        if children:
+            substeps = []
+            for child_name, child_module in children:
+                child_params = count_parameters(child_module)
+                if child_params > 0:
+                    child_step = build_step(child_module, child_name, depth + 1, max_depth)
+                    substeps.append(child_step)
+            if substeps:
+                step["substeps"] = substeps
+                step["_collapsed"] = True
+
+    return step
+
+
+def build_pipeline(model: nn.Module, model_name: str = "Model") -> Dict[str, Any]:
+    """
+    Build a linear pipeline structure from a PyTorch model.
+    This shows the sequential flow of data through the model.
+    """
+    total_params = count_parameters(model)
+
+    # Extract pipeline steps
+    steps = extract_pipeline_steps(model, model_name, depth=0, max_depth=4)
+
+    return {
+        "name": model_name,
+        "params": total_params,
+        "class": model.__class__.__name__,
+        "steps": steps
+    }
+
+
+def load_model_for_inspection(model_id: str) -> Tuple[nn.Module, AutoConfig]:
+    """Load a model architecture without downloading weights."""
+    from huggingface_hub import hf_hub_download, list_repo_files
+    import json
+
+    # Check if this repo uses Mistral's native format (params.json instead of config.json)
+    try:
+        repo_files = list_repo_files(repo_id=model_id)
+        has_params_json = 'params.json' in repo_files
+        has_config_json = 'config.json' in repo_files
+    except:
+        has_params_json = False
+        has_config_json = True
+
+    if has_params_json and not has_config_json:
+        # Load Mistral native format and convert to pipeline directly
+        return None, None  # Signal to use parse_mistral_params instead
+
+    config = AutoConfig.from_pretrained(model_id, trust_remote_code=True)
+
+    # Use meta device to avoid allocating actual memory for weights
+    with torch.device('meta'):
+        model = None
+        errors = []
+
+        try:
+            model = AutoModelForCausalLM.from_config(config, trust_remote_code=True)
+        except Exception as e:
+            errors.append(f"CausalLM: {e}")
+
+        if model is None:
+            try:
+                model = AutoModelForSeq2SeqLM.from_config(config, trust_remote_code=True)
+            except Exception as e:
+                errors.append(f"Seq2SeqLM: {e}")
+
+        if model is None:
+            try:
+                model = AutoModel.from_config(config, trust_remote_code=True)
+            except Exception as e:
+                errors.append(f"AutoModel: {e}")
+
+    if model is None:
+        raise ValueError(f"Could not load model architecture. Errors: {errors}")
+
+    return model, config
+
+
+def parse_mistral_native_format(model_id: str) -> Dict[str, Any]:
+    """Parse Mistral's native params.json format."""
+    from huggingface_hub import hf_hub_download
+    import json
+
+    params_path = hf_hub_download(repo_id=model_id, filename='params.json')
+    with open(params_path) as f:
+        params = json.load(f)
+
+    # Extract dimensions
+    hidden_size = params.get('dim', 0)
+    num_layers = params.get('n_layers', 0)
+    num_heads = params.get('n_heads', 0)
+    num_kv_heads = params.get('n_kv_heads', num_heads)
+    vocab_size = params.get('vocab_size', 0)
+    intermediate_size = params.get('hidden_dim', hidden_size * 4)
+    head_dim = params.get('head_dim', hidden_size // num_heads if num_heads > 0 else 0)
+
+    # Check for MoE
+    moe_config = params.get('moe', {})
+    num_experts = moe_config.get('num_experts', 0)
+    num_experts_per_tok = moe_config.get('num_experts_per_tok', 2)
+    expert_hidden_dim = moe_config.get('expert_hidden_dim', intermediate_size)
+    num_shared_experts = moe_config.get('num_shared_experts', 0)
+    first_k_dense = moe_config.get('first_k_dense_replace', 0)  # First K layers use dense MLP
+
+    # Check for vision encoder
+    vision_config = params.get('vision_encoder', None)
+
+    # Calculate parameters
+    embed_params = vocab_size * hidden_size
+
+    # Attention params per layer (with potential LoRA/MLA components)
+    q_lora_rank = params.get('q_lora_rank', 0)
+    kv_lora_rank = params.get('kv_lora_rank', 0)
+    v_head_dim = params.get('v_head_dim', head_dim)  # V uses different head dim
+
+    if q_lora_rank > 0:
+        # Multi-head Latent Attention (MLA) - compressed projections
+        # Q: down_proj + up_proj
+        q_params = hidden_size * q_lora_rank + q_lora_rank * num_heads * head_dim
+        # K: down_proj + up_proj (shared with V in latent space)
+        k_params = hidden_size * kv_lora_rank + kv_lora_rank * num_kv_heads * head_dim
+        # V: uses v_head_dim
+        v_params = hidden_size * kv_lora_rank + kv_lora_rank * num_kv_heads * v_head_dim
+        # O: output projection from v_head_dim back to hidden
+        o_params = num_heads * v_head_dim * hidden_size
+        attn_params = q_params + k_params + v_params + o_params
+    else:
+        q_params = hidden_size * num_heads * head_dim
+        kv_params = hidden_size * num_kv_heads * head_dim
+        attn_params = q_params + 2 * kv_params + num_heads * head_dim * hidden_size
+
+    norm_params = hidden_size
+
+    # MLP params - handle dense vs MoE layers
+    dense_mlp_params = 3 * hidden_size * intermediate_size
+
+    if num_experts > 0:
+        # MoE: each expert has gate + up + down projections
+        single_expert_params = 3 * hidden_size * expert_hidden_dim
+        moe_mlp_params = num_experts * single_expert_params
+        if num_shared_experts > 0:
+            # Shared experts use same size as routed experts
+            moe_mlp_params += num_shared_experts * single_expert_params
+        moe_mlp_params += hidden_size * num_experts  # Router
+
+        # Calculate layer params for dense and MoE layers separately
+        num_dense_layers = min(first_k_dense, num_layers)
+        num_moe_layers = num_layers - num_dense_layers
+
+        dense_layer_params = attn_params + dense_mlp_params + 2 * norm_params
+        moe_layer_params = attn_params + moe_mlp_params + 2 * norm_params
+
+        total_layer_params = (dense_layer_params * num_dense_layers) + (moe_layer_params * num_moe_layers)
+        mlp_params = moe_mlp_params  # For display purposes, show MoE params
+    else:
+        mlp_params = dense_mlp_params
+        layer_params = attn_params + mlp_params + 2 * norm_params
+        total_layer_params = layer_params * num_layers
+    lm_head_params = 0 if params.get('tied_embeddings', True) else vocab_size * hidden_size
+    total_params = embed_params + total_layer_params + norm_params + lm_head_params
+
+    # Vision encoder params
+    vision_params = 0
+    vision_steps = []
+    if vision_config:
+        v_hidden = vision_config.get('hidden_size', 0)
+        v_layers = vision_config.get('num_hidden_layers', 0)
+        v_intermediate = vision_config.get('intermediate_size', v_hidden * 4)
+        v_heads = vision_config.get('num_attention_heads', 0)
+        patch_size = vision_config.get('patch_size', 14)
+
+        patch_embed_params = 3 * (patch_size ** 2) * v_hidden
+        v_attn = 4 * v_hidden * v_hidden
+        v_mlp = 2 * v_hidden * v_intermediate
+        v_layer_params = v_attn + v_mlp + 2 * v_hidden
+        vision_params = patch_embed_params + v_layer_params * v_layers
+
+        vision_steps = [
+            {
+                "name": "Patch Embedding",
+                "type": "embedding",
+                "params": patch_embed_params,
+                "shape": f"{patch_size}×{patch_size} patches → {v_hidden}",
+                "class": "Conv2d"
+            },
+            {
+                "name": "Vision Transformer Layers",
+                "type": "layers",
+                "params": v_layer_params * v_layers,
+                "count": v_layers,
+                "shape": f"d={v_hidden}, h={v_heads}",
+                "class": "ViTBlock",
+                "_collapsed": True
+            }
+        ]
+        total_params += vision_params
+
+    # Build pipeline
+    steps = []
+
+    # Embedding
+    steps.append({
+        "name": "Token Embedding",
+        "type": "embedding",
+        "params": embed_params,
+        "shape": f"{vocab_size:,} × {hidden_size}",
+        "class": "Embedding"
+    })
+
+    # Build layer substeps
+    layer_substeps = [
+        {
+            "name": "Input LayerNorm",
+            "type": "norm",
+            "params": norm_params,
+            "shape": f"dim={hidden_size}",
+            "class": "RMSNorm"
+        },
+        {
+            "name": "Self Attention",
+            "type": "attention",
+            "params": attn_params,
+            "shape": f"heads={num_heads}, kv_heads={num_kv_heads}, dim={head_dim}",
+            "class": "Attention",
+            "_collapsed": True
+        },
+        {
+            "name": "Post-Attention LayerNorm",
+            "type": "norm",
+            "params": norm_params,
+            "shape": f"dim={hidden_size}",
+            "class": "RMSNorm"
+        }
+    ]
+
+    if num_experts > 0:
+        layer_substeps.append({
+            "name": "MoE",
+            "type": "mlp",
+            "params": mlp_params,
+            "shape": f"{num_experts} experts, top-{num_experts_per_tok}",
+            "class": "MixtureOfExperts",
+            "_collapsed": True
+        })
+        layer_shape = f"d={hidden_size}, ffn={expert_hidden_dim}, h={num_heads}, experts={num_experts}"
+    else:
+        layer_substeps.append({
+            "name": "MLP",
+            "type": "mlp",
+            "params": mlp_params,
+            "shape": f"{hidden_size} → {intermediate_size} → {hidden_size}",
+            "class": "MLP",
+            "_collapsed": True
+        })
+        layer_shape = f"d={hidden_size}, ffn={intermediate_size}, h={num_heads}"
+
+    moe_label = " (MoE)" if num_experts > 0 else ""
+    steps.append({
+        "name": f"Transformer Layers{moe_label}",
+        "type": "layers",
+        "params": total_layer_params,
+        "count": num_layers,
+        "shape": layer_shape,
+        "class": "TransformerBlock",
+        "substeps": layer_substeps,
+        "_collapsed": False
+    })
+
+    # Final norm
+    steps.append({
+        "name": "Final LayerNorm",
+        "type": "norm",
+        "params": norm_params,
+        "shape": f"dim={hidden_size}",
+        "class": "RMSNorm"
+    })
+
+    # LM Head
+    steps.append({
+        "name": "LM Head",
+        "type": "head",
+        "params": lm_head_params if lm_head_params > 0 else embed_params,
+        "shape": f"{hidden_size} → {vocab_size:,}" + (" (tied)" if lm_head_params == 0 else ""),
+        "class": "Linear"
+    })
+
+    # Wrap with vision if present
+    if vision_config:
+        vision_branch = {
+            "name": "Vision Encoder",
+            "type": "encoder",
+            "params": vision_params,
+            "substeps": vision_steps,
+            "_collapsed": True
+        }
+
+        lang_branch = {
+            "name": "Language Model",
+            "type": "module",
+            "params": total_params - vision_params,
+            "substeps": steps,
+            "_collapsed": False
+        }
+
+        steps = [{
+            "name": "Multimodal Processing",
+            "type": "parallel",
+            "params": total_params,
+            "branches": [vision_branch, lang_branch],
+            "_collapsed": False
+        }]
+
+    model_type = "mistral"
+    if num_experts > 0:
+        model_type = "mistral_moe"
+
+    return {
+        "name": model_type.upper(),
+        "params": total_params,
+        "formatted_params": format_params(total_params),
+        "model_type": model_type,
+        "class": "MistralModel",
+        "steps": steps
+    }
+
+
+def load_model_from_config(config_dict: Dict[str, Any]) -> Tuple[nn.Module, AutoConfig]:
+    """Load a model architecture from a config dictionary."""
+    config = AutoConfig.for_model(**config_dict)
+
+    with torch.device('meta'):
+        model = None
+        errors = []
+
+        try:
+            model = AutoModelForCausalLM.from_config(config, trust_remote_code=True)
+        except Exception as e:
+            errors.append(f"CausalLM: {e}")
+
+        if model is None:
+            try:
+                model = AutoModelForSeq2SeqLM.from_config(config, trust_remote_code=True)
+            except Exception as e:
+                errors.append(f"Seq2SeqLM: {e}")
+
+        if model is None:
+            try:
+                model = AutoModel.from_config(config, trust_remote_code=True)
+            except Exception as e:
+                errors.append(f"AutoModel: {e}")
+
+    if model is None:
+        raise ValueError(f"Could not load model from config. Errors: {errors}")
+
+    return model, config
+
+
+def parse_model(model_id: str) -> Dict[str, Any]:
+    """Parse a model from HuggingFace and return pipeline structure."""
+    model, config = load_model_for_inspection(model_id)
+
+    # If model is None, it means we need to use Mistral native format
+    if model is None and config is None:
+        return parse_mistral_native_format(model_id)
+
+    model_name = getattr(config, 'model_type', 'Model').upper()
+    pipeline = build_pipeline(model, model_name)
+
+    total_params = count_parameters(model)
+    pipeline["params"] = total_params
+    pipeline["formatted_params"] = format_params(total_params)
+    pipeline["model_type"] = getattr(config, 'model_type', 'unknown')
+
+    return pipeline
+
+
+def parse_config(config_dict: Dict[str, Any]) -> Dict[str, Any]:
+    """Parse a model from config dict and return pipeline structure."""
+    model, config = load_model_from_config(config_dict)
+
+    model_name = getattr(config, 'model_type', 'Model').upper()
+    pipeline = build_pipeline(model, model_name)
+
+    total_params = count_parameters(model)
+    pipeline["params"] = total_params
+    pipeline["formatted_params"] = format_params(total_params)
+    pipeline["model_type"] = getattr(config, 'model_type', 'unknown')
+
+    return pipeline

backend/main.py

@@ -0,0 +1,173 @@
+"""
+FastAPI backend for Model Inspector.
+Provides endpoints to inspect model architectures from HuggingFace.
+"""
+
+import json
+import os
+from pathlib import Path
+from typing import Optional, Dict, Any
+
+from fastapi import FastAPI, HTTPException, UploadFile, File
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, HTMLResponse
+from pydantic import BaseModel
+
+from architecture_parser import parse_model, parse_config, format_params
+
+
+# Get paths
+BACKEND_DIR = Path(__file__).parent
+FRONTEND_DIR = BACKEND_DIR.parent / "frontend"
+
+
+app = FastAPI(
+    title="Model Inspector API",
+    description="Inspect transformer model architectures without downloading weights",
+    version="1.0.0"
+)
+
+# CORS for local development
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+class InspectRequest(BaseModel):
+    model_config = {"protected_namespaces": ()}
+    model_id: Optional[str] = None
+    config: Optional[Dict[str, Any]] = None
+
+
+class ModelMetadata(BaseModel):
+    model_config = {"protected_namespaces": ()}
+    model_id: Optional[str]
+    model_type: str
+    total_params: int
+    formatted_params: str
+
+
+class InspectResponse(BaseModel):
+    pipeline: Dict[str, Any]
+    metadata: ModelMetadata
+
+
+@app.post("/api/inspect", response_model=InspectResponse)
+async def inspect_model(request: InspectRequest):
+    """
+    Inspect a model architecture.
+
+    Provide either:
+    - model_id: HuggingFace model ID (e.g., "meta-llama/Llama-2-7b-hf")
+    - config: Direct config.json object
+    """
+    if request.model_id is None and request.config is None:
+        raise HTTPException(
+            status_code=400,
+            detail="Must provide either model_id or config"
+        )
+
+    try:
+        if request.model_id is not None:
+            # Parse from HuggingFace model ID
+            pipeline = parse_model(request.model_id)
+            model_id = request.model_id
+        else:
+            # Parse from config dict
+            pipeline = parse_config(request.config)
+            model_id = None
+
+        metadata = ModelMetadata(
+            model_id=model_id,
+            model_type=pipeline.get("model_type", "unknown"),
+            total_params=pipeline.get("params", 0),
+            formatted_params=pipeline.get("formatted_params", "0"),
+        )
+
+        return InspectResponse(pipeline=pipeline, metadata=metadata)
+
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error inspecting model: {str(e)}"
+        )
+
+
+@app.post("/api/upload", response_model=InspectResponse)
+async def upload_config(file: UploadFile = File(...)):
+    """
+    Upload a config.json file for inspection.
+    """
+    if not file.filename.endswith('.json'):
+        raise HTTPException(
+            status_code=400,
+            detail="File must be a JSON file"
+        )
+
+    try:
+        content = await file.read()
+        config_dict = json.loads(content)
+    except json.JSONDecodeError:
+        raise HTTPException(
+            status_code=400,
+            detail="Invalid JSON file"
+        )
+
+    try:
+        pipeline = parse_config(config_dict)
+
+        metadata = ModelMetadata(
+            model_id=None,
+            model_type=pipeline.get("model_type", "unknown"),
+            total_params=pipeline.get("params", 0),
+            formatted_params=pipeline.get("formatted_params", "0"),
+        )
+
+        return InspectResponse(pipeline=pipeline, metadata=metadata)
+
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error parsing config: {str(e)}"
+        )
+
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint."""
+    return {"status": "healthy"}
+
+
+# Serve frontend static files
+@app.get("/")
+async def serve_index():
+    """Serve the main index.html."""
+    return FileResponse(FRONTEND_DIR / "index.html")
+
+
+@app.get("/css/{path:path}")
+async def serve_css(path: str):
+    """Serve CSS files."""
+    file_path = FRONTEND_DIR / "css" / path
+    if file_path.exists():
+        return FileResponse(file_path, media_type="text/css")
+    raise HTTPException(status_code=404, detail="File not found")
+
+
+@app.get("/js/{path:path}")
+async def serve_js(path: str):
+    """Serve JavaScript files."""
+    file_path = FRONTEND_DIR / "js" / path
+    if file_path.exists():
+        return FileResponse(file_path, media_type="application/javascript")
+    raise HTTPException(status_code=404, detail="File not found")
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+httpx==0.26.0
+pydantic==2.5.3
+python-multipart==0.0.6
+transformers>=4.36.0
+torch>=2.0.0
+accelerate>=0.25.0
+huggingface_hub>=0.20.0

backend/run.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+# Run the Model Inspector server with the correct Python
+
+cd "$(dirname "$0")"
+
+# Use python3 from pyenv (not system uvicorn which uses Python 3.9)
+exec python3 -m uvicorn main:app --host 0.0.0.0 --port 7860 "$@"

frontend/css/styles.css

@@ -0,0 +1,885 @@
+/* LLM Scope - Professional Minimalist Theme */
+
+:root {
+    /* Base colors - dark, muted palette */
+    --bg-primary: #0a0a0b;
+    --bg-secondary: #111113;
+    --bg-tertiary: #18181b;
+    --bg-elevated: #1f1f23;
+
+    /* Text colors */
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --text-muted: #52525b;
+
+    /* Borders */
+    --border-subtle: #27272a;
+    --border-default: #3f3f46;
+
+    /* Accent - single professional blue */
+    --accent: #3b82f6;
+    --accent-muted: #1d4ed8;
+
+    /* Semantic colors for node types - muted, professional */
+    --color-embedding: #f59e0b;
+    --color-attention: #8b5cf6;
+    --color-mlp: #10b981;
+    --color-norm: #06b6d4;
+    --color-head: #ec4899;
+    --color-layers: #6366f1;
+    --color-default: #71717a;
+
+    /* Layout */
+    --header-height: 52px;
+    --legend-height: 32px;
+
+    /* Spacing */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+
+    /* Radius */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+
+    /* Transitions */
+    --transition: 150ms ease;
+
+    /* Typography */
+    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+}
+
+/* Reset */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: var(--font-sans);
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* App Layout */
+.app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+/* Header */
+.header {
+    height: var(--header-height);
+    min-height: var(--header-height);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--space-4);
+    gap: var(--space-4);
+}
+
+.header-left, .header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.header-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+}
+
+/* Logo */
+.logo {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.logo-icon {
+    width: 26px;
+    height: 26px;
+    color: var(--text-primary);
+    opacity: 0.9;
+}
+
+.logo-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.logo h1 {
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+    line-height: 1.2;
+}
+
+.attribution {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color var(--transition);
+    line-height: 1;
+}
+
+.attribution:hover {
+    color: var(--text-secondary);
+}
+
+/* Quick Models */
+.quick-models {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.quick-btn {
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1) var(--space-2);
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition);
+}
+
+.quick-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border-color: var(--border-default);
+}
+
+/* Toggle Control */
+.toggle-control {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+}
+
+.toggle-control input {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    accent-color: var(--accent);
+}
+
+.toggle-label {
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+
+/* Header Buttons */
+.header-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all var(--transition);
+}
+
+.header-btn:hover {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-color: var(--border-default);
+}
+
+.header-btn.primary {
+    background: var(--accent-muted);
+    border-color: var(--accent);
+    color: white;
+}
+
+.header-btn.primary:hover {
+    background: var(--accent);
+}
+
+.header-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* Legend Bar */
+.legend-bar {
+    height: var(--legend-height);
+    min-height: var(--legend-height);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-4);
+    overflow-x: auto;
+}
+
+.legend {
+    display: flex;
+    gap: var(--space-4);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    white-space: nowrap;
+}
+
+.legend-color {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    flex-shrink: 0;
+}
+
+.legend-label {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    text-transform: lowercase;
+    font-weight: 500;
+}
+
+/* Panels Container */
+.panels-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+/* Panel */
+.panel {
+    flex: 1;
+    min-width: 280px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--border-subtle);
+    background: var(--bg-primary);
+}
+
+.panel:last-child {
+    border-right: none;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.panel-input-wrapper {
+    flex: 1;
+    display: flex;
+    gap: var(--space-1);
+}
+
+.panel-input {
+    flex: 1;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--space-1) var(--space-2);
+    font-size: 0.75rem;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    transition: border-color var(--transition);
+}
+
+.panel-input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+.panel-input::placeholder {
+    color: var(--text-muted);
+}
+
+.panel-go-btn {
+    background: var(--accent-muted);
+    color: white;
+    border: none;
+    border-radius: var(--radius-md);
+    padding: var(--space-1) var(--space-3);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background var(--transition);
+}
+
+.panel-go-btn:hover:not(:disabled) {
+    background: var(--accent);
+}
+
+.panel-go-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.panel-close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.panel-close-btn:hover {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+.panel-close-btn svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Panel Info */
+.panel-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 0.7rem;
+}
+
+.panel-model-name {
+    font-weight: 600;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panel-params {
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-weight: 600;
+}
+
+.panel-type {
+    color: var(--text-muted);
+    text-transform: uppercase;
+    font-size: 0.6rem;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+}
+
+/* Panel Error */
+.panel-error {
+    background: rgba(239, 68, 68, 0.1);
+    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+    padding: var(--space-2) var(--space-3);
+    color: #fca5a5;
+    font-size: 0.7rem;
+}
+
+/* Panel Canvas */
+.panel-canvas {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.panel-viz {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+}
+
+.panel-viz:active {
+    cursor: grabbing;
+}
+
+.panel-viz svg {
+    width: 100%;
+    height: 100%;
+}
+
+/* Panel Empty State */
+.panel-empty {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--text-muted);
+    pointer-events: none;
+}
+
+.panel-empty svg {
+    width: 48px;
+    height: 48px;
+    margin-bottom: var(--space-2);
+    opacity: 0.2;
+}
+
+.panel-empty p {
+    font-size: 0.75rem;
+}
+
+/* Spinner */
+.spinner {
+    width: 14px;
+    height: 14px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Tooltip */
+.tooltip {
+    position: fixed;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    padding: var(--space-3);
+    pointer-events: none;
+    z-index: 1000;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    max-width: 260px;
+}
+
+.tooltip-title {
+    font-weight: 600;
+    margin-bottom: var(--space-1);
+    font-size: 0.8rem;
+    color: var(--text-primary);
+}
+
+.tooltip-content {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+}
+
+.tooltip-row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: 1px 0;
+}
+
+.tooltip-label {
+    color: var(--text-muted);
+}
+
+.tooltip-value {
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+/* Modal */
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.modal-content {
+    position: relative;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    width: 90%;
+    max-width: 800px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.modal-header h2 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.modal-close {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-close:hover {
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+}
+
+.modal-close svg {
+    width: 18px;
+    height: 18px;
+}
+
+.modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-4);
+}
+
+/* Comparison Results */
+.compare-empty {
+    color: var(--text-muted);
+    text-align: center;
+    padding: var(--space-6);
+    font-size: 0.85rem;
+}
+
+.compare-summary {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+}
+
+.compare-model {
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    padding: var(--space-3);
+}
+
+.compare-model-name {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 0.8rem;
+    color: var(--text-primary);
+    margin-bottom: var(--space-1);
+}
+
+.compare-model-params {
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+}
+
+.compare-section {
+    margin-bottom: var(--space-4);
+}
+
+.compare-section-title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: var(--space-2);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.compare-badge {
+    font-size: 0.65rem;
+    padding: 2px 6px;
+    border-radius: var(--radius-sm);
+    font-weight: 500;
+}
+
+.compare-badge.same {
+    background: rgba(16, 185, 129, 0.15);
+    color: #10b981;
+}
+
+.compare-badge.diff {
+    background: rgba(245, 158, 11, 0.15);
+    color: #f59e0b;
+}
+
+.compare-badge.added {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+}
+
+.compare-badge.removed {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+.compare-list {
+    list-style: none;
+    font-size: 0.75rem;
+}
+
+.compare-list li {
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    margin-bottom: var(--space-1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.compare-list .item-name {
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+}
+
+.compare-list .item-detail {
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+}
+
+.compare-list .item-diff {
+    display: flex;
+    gap: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+}
+
+.compare-list .model-a {
+    color: #3b82f6;
+}
+
+.compare-list .model-b {
+    color: #8b5cf6;
+}
+
+.compare-similarity {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-4);
+}
+
+.similarity-bar {
+    flex: 1;
+    height: 8px;
+    background: var(--bg-elevated);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.similarity-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.similarity-value {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--text-primary);
+    min-width: 48px;
+    text-align: right;
+}
+
+.similarity-label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+/* Error hint */
+.error-hint {
+    margin-top: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: var(--radius-md);
+    font-size: 0.7rem;
+    color: #93c5fd;
+}
+
+.error-hint code {
+    background: rgba(0,0,0,0.3);
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-family: var(--font-mono);
+}
+
+/* Header buttons with text */
+.header-btn.with-text {
+    width: auto;
+    padding: 0 var(--space-3);
+    gap: var(--space-1);
+}
+
+.header-btn.with-text span {
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+
+.header-btn .dropdown-arrow {
+    width: 12px;
+    height: 12px;
+    margin-left: var(--space-1);
+}
+
+/* Export Dropdown */
+.export-dropdown {
+    position: relative;
+}
+
+.export-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: var(--space-1);
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all var(--transition);
+    z-index: 100;
+    min-width: 140px;
+}
+
+.export-dropdown:hover .export-menu,
+.export-menu:hover {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.export-option {
+    display: block;
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    text-align: left;
+    cursor: pointer;
+    transition: all var(--transition);
+}
+
+.export-option:first-child {
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.export-option:last-child {
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+
+.export-option:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+/* Loading Status */
+.loading-status {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.loading-spinner {
+    width: 32px;
+    height: 32px;
+    animation: spin 1s linear infinite;
+    opacity: 0.5;
+}
+
+.status-text {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 1; }
+}
+
+/* Utility */
+.hidden {
+    display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .header-center {
+        display: none;
+    }
+
+    .panels-container {
+        flex-direction: column;
+    }
+
+    .panel {
+        min-width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .panel:last-child {
+        border-bottom: none;
+    }
+}

frontend/index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM Scope - Visualize Model Architectures</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+</head>
+<body>
+    <div class="app">
+        <!-- Top Header -->
+        <header class="header">
+            <div class="header-left">
+                <div class="logo">
+                    <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <circle cx="10" cy="10" r="7"/>
+                        <line x1="15" y1="15" x2="21" y2="21" stroke-width="2.5" stroke-linecap="round"/>
+                        <circle cx="10" cy="10" r="3" stroke-dasharray="2 2"/>
+                    </svg>
+                    <div class="logo-text">
+                        <h1>LLM Scope</h1>
+                        <a href="https://omarkamali.com" target="_blank" rel="noopener" class="attribution">by Omar Kamali</a>
+                    </div>
+                </div>
+            </div>
+            <div class="header-center">
+                <div class="quick-models">
+                    <button class="quick-btn" data-model="openai/gpt-oss-120b">GPT-OSS 120B</button>
+                    <button class="quick-btn" data-model="Qwen/Qwen3-4B">Qwen3 4B</button>
+                    <button class="quick-btn" data-model="Qwen/Qwen3-30B-A3B">Qwen MoE 30B</button>
+                    <button class="quick-btn" data-model="deepseek-ai/DeepSeek-V3">DeepSeek V3</button>
+                    <button class="quick-btn" data-model="google/gemma-3-27b-it">Gemma3 27B</button>
+                    <button class="quick-btn" data-model="moonshotai/Kimi-K2-Instruct">Kimi K2</button>
+                    <button class="quick-btn" data-model="mistralai/Mistral-Large-3-675B-Instruct-2512">Mistral 675B</button>
+                    <button class="quick-btn" data-model="nvidia/NVIDIA-Nemotron-3-Nano-30B-A3B-BF16">Nemotron 30B</button>
+                </div>
+            </div>
+            <div class="header-right">
+                <label class="toggle-control">
+                    <input type="checkbox" id="zoom-lock" checked>
+                    <span class="toggle-label">Lock Scale</span>
+                </label>
+                <button id="compare-btn" class="header-btn with-text" title="Compare architectures">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M16 3h5v5M8 3H3v5M3 16v5h5M21 16v5h-5M12 8v8M8 12h8"/>
+                    </svg>
+                    <span>Compare</span>
+                </button>
+                <div class="export-dropdown">
+                    <button id="export-btn" class="header-btn with-text" title="Export visualization">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="7 10 12 15 17 10"/>
+                            <line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        <span>Export</span>
+                        <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="6 9 12 15 18 9"/>
+                        </svg>
+                    </button>
+                    <div class="export-menu" id="export-menu">
+                        <button class="export-option" data-format="svg">Export as SVG</button>
+                        <button class="export-option" data-format="png">Export as PNG</button>
+                    </div>
+                </div>
+                <button id="add-panel-btn" class="header-btn primary" title="Add panel">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="12" y1="5" x2="12" y2="19"/>
+                        <line x1="5" y1="12" x2="19" y2="12"/>
+                    </svg>
+                </button>
+            </div>
+        </header>
+
+        <!-- Legend Bar -->
+        <div class="legend-bar" id="legend-bar">
+            <div class="legend" id="legend"></div>
+        </div>
+
+        <!-- Panels Container -->
+        <main class="panels-container" id="panels-container">
+        </main>
+    </div>
+
+    <!-- Panel Template -->
+    <template id="panel-template">
+        <div class="panel" data-panel-id="">
+            <div class="panel-header">
+                <div class="panel-input-wrapper">
+                    <input type="text" class="panel-input" placeholder="Model ID (e.g., gpt2)" />
+                    <button class="panel-go-btn">
+                        <span class="btn-text">Load</span>
+                        <span class="btn-loader hidden">
+                            <svg class="spinner" viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="30 70"/>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+                <button class="panel-close-btn" title="Remove panel">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="panel-info hidden">
+                <span class="panel-model-name"></span>
+                <span class="panel-params"></span>
+                <span class="panel-type"></span>
+            </div>
+            <div class="panel-error hidden"></div>
+            <div class="panel-canvas">
+                <div class="panel-viz"></div>
+                <div class="panel-empty">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+                        <circle cx="10" cy="10" r="7"/>
+                        <line x1="15" y1="15" x2="21" y2="21" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                    <p>Enter a model ID to inspect</p>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- Tooltip -->
+    <div id="tooltip" class="tooltip hidden"></div>
+
+    <!-- Comparison Modal -->
+    <div id="compare-modal" class="modal hidden">
+        <div class="modal-backdrop"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Architecture Comparison</h2>
+                <button class="modal-close" id="compare-modal-close">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body" id="compare-results">
+                <p class="compare-empty">Load at least 2 models to compare architectures</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/api.js"></script>
+    <script src="js/treemap.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>

frontend/js/api.js

@@ -0,0 +1,108 @@
+/**
+ * API client for Model Inspector backend
+ */
+
+const API = {
+    baseUrl: '',  // Same origin
+
+    /**
+     * Inspect a model by HuggingFace model ID
+     * @param {string} modelId - HuggingFace model ID
+     * @returns {Promise<{tree: Object, metadata: Object}>}
+     */
+    async inspectModel(modelId) {
+        const response = await fetch(`${this.baseUrl}/api/inspect`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ model_id: modelId }),
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            const detail = error.detail || 'Failed to inspect model';
+
+            // Check for common auth/access errors
+            const isAuthError = detail.includes('401') ||
+                               detail.includes('403') ||
+                               detail.includes('gated') ||
+                               detail.includes('access') ||
+                               detail.includes('token') ||
+                               detail.includes('authorization') ||
+                               detail.includes('authenticate');
+
+            if (isAuthError) {
+                const err = new Error(detail);
+                err.isAuthError = true;
+                throw err;
+            }
+
+            throw new Error(detail);
+        }
+
+        return response.json();
+    },
+
+    /**
+     * Inspect a model by config object
+     * @param {Object} config - Model config.json object
+     * @returns {Promise<{tree: Object, metadata: Object}>}
+     */
+    async inspectConfig(config) {
+        const response = await fetch(`${this.baseUrl}/api/inspect`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ config }),
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to inspect config');
+        }
+
+        return response.json();
+    },
+
+    /**
+     * Upload a config.json file
+     * @param {File} file - The config.json file
+     * @returns {Promise<{tree: Object, metadata: Object}>}
+     */
+    async uploadConfig(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch(`${this.baseUrl}/api/upload`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to upload config');
+        }
+
+        return response.json();
+    },
+
+    /**
+     * Format parameter count for display
+     * @param {number} count - Parameter count
+     * @returns {string} Formatted string
+     */
+    formatParams(count) {
+        if (count >= 1e12) {
+            return `${(count / 1e12).toFixed(2)}T`;
+        } else if (count >= 1e9) {
+            return `${(count / 1e9).toFixed(2)}B`;
+        } else if (count >= 1e6) {
+            return `${(count / 1e6).toFixed(2)}M`;
+        } else if (count >= 1e3) {
+            return `${(count / 1e3).toFixed(2)}K`;
+        }
+        return count.toLocaleString();
+    }
+};

frontend/js/app.js

@@ -0,0 +1,710 @@
+/**
+ * LLM Scope - Multi-panel Model Inspector
+ */
+
+(function() {
+    const panels = new Map();
+    let panelIdCounter = 0;
+    let zoomLocked = true;
+    let globalMaxParams = 0;
+    const loadingPanels = new Set(); // Track panels currently loading
+
+    const panelsContainer = document.getElementById('panels-container');
+    const panelTemplate = document.getElementById('panel-template');
+    const addPanelBtn = document.getElementById('add-panel-btn');
+    const exportMenu = document.getElementById('export-menu');
+    const compareBtn = document.getElementById('compare-btn');
+    const zoomLockCheckbox = document.getElementById('zoom-lock');
+    const legend = document.getElementById('legend');
+    const compareModal = document.getElementById('compare-modal');
+    const compareModalClose = document.getElementById('compare-modal-close');
+    const compareResults = document.getElementById('compare-results');
+
+    function init() {
+        addPanelBtn.addEventListener('click', () => addPanel());
+        compareBtn.addEventListener('click', handleCompare);
+        zoomLockCheckbox.addEventListener('change', handleZoomLockChange);
+
+        // Export options
+        exportMenu.querySelectorAll('.export-option').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const format = e.target.dataset.format;
+                handleExport(format);
+            });
+        });
+
+        // Modal close
+        compareModalClose.addEventListener('click', closeCompareModal);
+        compareModal.querySelector('.modal-backdrop').addEventListener('click', closeCompareModal);
+
+        document.querySelectorAll('.quick-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const modelId = btn.dataset.model;
+                const emptyPanel = findEmptyPanel();
+                if (emptyPanel) {
+                    loadModelInPanel(emptyPanel, modelId);
+                } else {
+                    const panel = addPanel();
+                    loadModelInPanel(panel.id, modelId);
+                }
+            });
+        });
+
+        const urlState = parseUrlState();
+        if (urlState.models.length > 0) {
+            urlState.models.forEach((modelId) => {
+                const panel = addPanel();
+                if (modelId) {
+                    loadModelInPanel(panel.id, modelId);
+                }
+            });
+            zoomLocked = urlState.zoomLocked;
+            zoomLockCheckbox.checked = zoomLocked;
+        } else {
+            addPanel();
+        }
+
+        updateLegend();
+    }
+
+    function findEmptyPanel() {
+        for (const [panelId, panel] of panels) {
+            // Don't reuse panels that are loading or already have data
+            if (!panel.data && !loadingPanels.has(panelId)) return panelId;
+        }
+        return null;
+    }
+
+    function addPanel() {
+        const id = `panel-${panelIdCounter++}`;
+        const content = panelTemplate.content.cloneNode(true);
+        const panelEl = content.querySelector('.panel');
+        panelEl.dataset.panelId = id;
+
+        const vizContainer = panelEl.querySelector('.panel-viz');
+        vizContainer.id = `viz-${id}`;
+
+        panelsContainer.appendChild(content);
+
+        const panel = panelsContainer.querySelector(`[data-panel-id="${id}"]`);
+        const viz = new TreemapViz(`viz-${id}`);
+
+        panels.set(id, {
+            el: panel,
+            viz: viz,
+            data: null,
+            modelId: null
+        });
+
+        setupPanelEvents(id, panel);
+        updateCloseButtons();
+
+        return { id, el: panel };
+    }
+
+    function setupPanelEvents(panelId, panelEl) {
+        const input = panelEl.querySelector('.panel-input');
+        const goBtn = panelEl.querySelector('.panel-go-btn');
+        const closeBtn = panelEl.querySelector('.panel-close-btn');
+
+        goBtn.addEventListener('click', () => {
+            const modelId = input.value.trim();
+            if (modelId) loadModelInPanel(panelId, modelId);
+        });
+
+        input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                const modelId = input.value.trim();
+                if (modelId) loadModelInPanel(panelId, modelId);
+            }
+        });
+
+        closeBtn.addEventListener('click', () => removePanel(panelId));
+    }
+
+    function removePanel(panelId) {
+        if (panels.size <= 1) return;
+
+        const panel = panels.get(panelId);
+        if (panel) {
+            panel.viz.destroy();
+            panel.el.remove();
+            panels.delete(panelId);
+        }
+
+        updateCloseButtons();
+        updateGlobalScale();
+        updateUrlState();
+    }
+
+    function updateCloseButtons() {
+        const canClose = panels.size > 1;
+        panels.forEach(panel => {
+            const closeBtn = panel.el.querySelector('.panel-close-btn');
+            closeBtn.style.visibility = canClose ? 'visible' : 'hidden';
+        });
+    }
+
+    async function loadModelInPanel(panelId, modelId) {
+        const panel = panels.get(panelId);
+        if (!panel) return;
+
+        const input = panel.el.querySelector('.panel-input');
+        const goBtn = panel.el.querySelector('.panel-go-btn');
+        const btnText = goBtn.querySelector('.btn-text');
+        const btnLoader = goBtn.querySelector('.btn-loader');
+        const infoEl = panel.el.querySelector('.panel-info');
+        const errorEl = panel.el.querySelector('.panel-error');
+        const emptyEl = panel.el.querySelector('.panel-empty');
+
+        input.value = modelId;
+        loadingPanels.add(panelId);
+
+        goBtn.disabled = true;
+        btnText.classList.add('hidden');
+        btnLoader.classList.remove('hidden');
+        errorEl.classList.add('hidden');
+        infoEl.classList.add('hidden');
+
+        // Remove any existing hint
+        const existingHint = panel.el.querySelector('.error-hint');
+        if (existingHint) existingHint.remove();
+
+        // Show loading status in canvas
+        const statusMessages = [
+            `Fetching config for ${modelId}...`,
+            'Downloading model configuration...',
+            'Building architecture graph...',
+            'Calculating parameter counts...',
+            'Rendering visualization...'
+        ];
+        let statusIndex = 0;
+
+        emptyEl.innerHTML = `
+            <div class="loading-status">
+                <svg class="loading-spinner" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="30 70"/>
+                </svg>
+                <p class="status-text">${statusMessages[0]}</p>
+            </div>
+        `;
+        emptyEl.classList.remove('hidden');
+
+        // Cycle through status messages
+        const statusInterval = setInterval(() => {
+            statusIndex = (statusIndex + 1) % statusMessages.length;
+            const statusText = emptyEl.querySelector('.status-text');
+            if (statusText) {
+                statusText.textContent = statusMessages[statusIndex];
+            }
+        }, 2000);
+
+        try {
+            const result = await API.inspectModel(modelId);
+
+            panel.data = result;
+            panel.modelId = modelId;
+
+            const nameEl = infoEl.querySelector('.panel-model-name');
+            const paramsEl = infoEl.querySelector('.panel-params');
+            const typeEl = infoEl.querySelector('.panel-type');
+
+            nameEl.textContent = result.metadata.model_id || modelId;
+            paramsEl.textContent = result.metadata.formatted_params;
+            typeEl.textContent = result.metadata.model_type.toUpperCase();
+            infoEl.classList.remove('hidden');
+
+            emptyEl.classList.add('hidden');
+
+            updateGlobalScale();
+            updateUrlState();
+            updateLegend();
+
+        } catch (error) {
+            // Restore empty state
+            emptyEl.innerHTML = `
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+                    <circle cx="10" cy="10" r="7"/>
+                    <line x1="15" y1="15" x2="21" y2="21" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <p>Enter a model ID to inspect</p>
+            `;
+
+            errorEl.textContent = error.message;
+            errorEl.classList.remove('hidden');
+
+            // Add auth hint if it's an auth error
+            if (error.isAuthError) {
+                const hint = document.createElement('div');
+                hint.className = 'error-hint';
+                hint.innerHTML = `
+                    This model may require authentication. Make sure you're logged in to HuggingFace:<br>
+                    <code>huggingface-cli login</code> or set <code>HF_TOKEN</code> environment variable.
+                    <br><br>
+                    For gated models, you may also need to accept the model's license on the HuggingFace website.
+                `;
+                errorEl.after(hint);
+            }
+        } finally {
+            clearInterval(statusInterval);
+            loadingPanels.delete(panelId);
+            goBtn.disabled = false;
+            btnText.classList.remove('hidden');
+            btnLoader.classList.add('hidden');
+        }
+    }
+
+    function updateGlobalScale() {
+        if (zoomLocked) {
+            globalMaxParams = 0;
+            panels.forEach(panel => {
+                if (panel.data) {
+                    globalMaxParams = Math.max(globalMaxParams, panel.data.pipeline.params);
+                }
+            });
+
+            panels.forEach(panel => {
+                if (panel.data) {
+                    panel.viz.setData(panel.data.pipeline, globalMaxParams);
+                }
+            });
+        } else {
+            globalMaxParams = 0;
+            panels.forEach(panel => {
+                if (panel.data) {
+                    panel.viz.setData(panel.data.pipeline, null);
+                }
+            });
+        }
+    }
+
+    function handleZoomLockChange() {
+        zoomLocked = zoomLockCheckbox.checked;
+        updateGlobalScale();
+        updateUrlState();
+    }
+
+    function handleExport(format = 'svg') {
+        const loadedPanels = [];
+        panels.forEach(panel => {
+            if (panel.data && panel.modelId) {
+                loadedPanels.push(panel);
+            }
+        });
+
+        if (loadedPanels.length === 0) return;
+
+        const panel = loadedPanels[0];
+        const blob = panel.viz.exportSVG(panel.modelId);
+        const filename = `${panel.modelId.replace(/\//g, '-')}-architecture`;
+
+        if (format === 'svg') {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${filename}.svg`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        } else if (format === 'png') {
+            // Convert SVG to PNG
+            const svgText = URL.createObjectURL(blob);
+            const img = new Image();
+
+            img.onload = () => {
+                const scale = 2; // Higher resolution
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width * scale;
+                canvas.height = img.height * scale;
+
+                const ctx = canvas.getContext('2d');
+                ctx.scale(scale, scale);
+                ctx.fillStyle = '#0a0a0b'; // Background color
+                ctx.fillRect(0, 0, img.width, img.height);
+                ctx.drawImage(img, 0, 0);
+
+                canvas.toBlob((pngBlob) => {
+                    const url = URL.createObjectURL(pngBlob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `${filename}.png`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                }, 'image/png');
+
+                URL.revokeObjectURL(svgText);
+            };
+
+            img.src = svgText;
+        }
+    }
+
+    function handleCompare() {
+        const loadedPanels = [];
+        panels.forEach(panel => {
+            if (panel.data && panel.modelId) {
+                loadedPanels.push(panel);
+            }
+        });
+
+        if (loadedPanels.length < 2) {
+            compareResults.innerHTML = '<p class="compare-empty">Load at least 2 models to compare architectures</p>';
+        } else {
+            const comparison = compareArchitectures(loadedPanels[0], loadedPanels[1]);
+            renderComparison(comparison, loadedPanels[0], loadedPanels[1]);
+        }
+
+        compareModal.classList.remove('hidden');
+    }
+
+    function closeCompareModal() {
+        compareModal.classList.add('hidden');
+    }
+
+    /**
+     * Compare two model architectures
+     */
+    function compareArchitectures(panelA, panelB) {
+        const a = panelA.data.pipeline;
+        const b = panelB.data.pipeline;
+
+        const result = {
+            modelA: { name: panelA.modelId, params: a.params },
+            modelB: { name: panelB.modelId, params: b.params },
+            paramRatio: a.params > 0 ? b.params / a.params : 0,
+            similarities: [],
+            differences: [],
+            onlyInA: [],
+            onlyInB: [],
+            similarity: 0
+        };
+
+        // Flatten steps for comparison
+        const stepsA = flattenSteps(a.steps || []);
+        const stepsB = flattenSteps(b.steps || []);
+
+        // Compare by type
+        const typesA = new Map();
+        const typesB = new Map();
+
+        stepsA.forEach(s => {
+            const key = s.type + ':' + s.name;
+            typesA.set(key, s);
+        });
+
+        stepsB.forEach(s => {
+            const key = s.type + ':' + s.name;
+            typesB.set(key, s);
+        });
+
+        // Find common and different
+        let matchScore = 0;
+        const totalSteps = Math.max(typesA.size, typesB.size);
+
+        typesA.forEach((stepA, key) => {
+            if (typesB.has(key)) {
+                const stepB = typesB.get(key);
+                matchScore++;
+
+                // Check if params are similar
+                const paramDiff = stepA.params > 0 ? Math.abs(stepA.params - stepB.params) / stepA.params : 0;
+
+                if (paramDiff < 0.05) {
+                    result.similarities.push({
+                        name: stepA.name,
+                        type: stepA.type,
+                        paramsA: stepA.params,
+                        paramsB: stepB.params,
+                        shapeA: stepA.shape,
+                        shapeB: stepB.shape
+                    });
+                } else {
+                    result.differences.push({
+                        name: stepA.name,
+                        type: stepA.type,
+                        paramsA: stepA.params,
+                        paramsB: stepB.params,
+                        shapeA: stepA.shape,
+                        shapeB: stepB.shape,
+                        paramDiff: paramDiff
+                    });
+                }
+            } else {
+                result.onlyInA.push({
+                    name: stepA.name,
+                    type: stepA.type,
+                    params: stepA.params,
+                    shape: stepA.shape
+                });
+            }
+        });
+
+        typesB.forEach((stepB, key) => {
+            if (!typesA.has(key)) {
+                result.onlyInB.push({
+                    name: stepB.name,
+                    type: stepB.type,
+                    params: stepB.params,
+                    shape: stepB.shape
+                });
+            }
+        });
+
+        // Calculate similarity
+        result.similarity = totalSteps > 0 ? (matchScore / totalSteps) * 100 : 0;
+
+        // Compare layer counts
+        const layersA = stepsA.find(s => s.type === 'layers');
+        const layersB = stepsB.find(s => s.type === 'layers');
+
+        if (layersA && layersB) {
+            result.layerComparison = {
+                countA: layersA.count || 1,
+                countB: layersB.count || 1,
+                paramsA: layersA.params,
+                paramsB: layersB.params,
+                shapeA: layersA.shape,
+                shapeB: layersB.shape
+            };
+        }
+
+        return result;
+    }
+
+    /**
+     * Flatten nested steps for comparison
+     */
+    function flattenSteps(steps, result = []) {
+        for (const step of steps) {
+            result.push(step);
+            if (step.substeps) {
+                flattenSteps(step.substeps, result);
+            }
+            if (step.branches) {
+                for (const branch of step.branches) {
+                    result.push(branch);
+                    if (branch.substeps) {
+                        flattenSteps(branch.substeps, result);
+                    }
+                }
+            }
+        }
+        return result;
+    }
+
+    /**
+     * Render comparison results
+     */
+    function renderComparison(comparison, panelA, panelB) {
+        const fmt = API.formatParams;
+
+        let html = `
+            <div class="compare-summary">
+                <div class="compare-model">
+                    <div class="compare-model-name">${comparison.modelA.name}</div>
+                    <div class="compare-model-params">${fmt(comparison.modelA.params)}</div>
+                </div>
+                <div class="compare-model">
+                    <div class="compare-model-name">${comparison.modelB.name}</div>
+                    <div class="compare-model-params">${fmt(comparison.modelB.params)}</div>
+                </div>
+            </div>
+
+            <div class="compare-similarity">
+                <span class="similarity-label">Structural Similarity</span>
+                <div class="similarity-bar">
+                    <div class="similarity-fill" style="width: ${comparison.similarity}%"></div>
+                </div>
+                <span class="similarity-value">${comparison.similarity.toFixed(0)}%</span>
+            </div>
+        `;
+
+        // Layer comparison
+        if (comparison.layerComparison) {
+            const lc = comparison.layerComparison;
+            html += `
+                <div class="compare-section">
+                    <div class="compare-section-title">Transformer Layers</div>
+                    <ul class="compare-list">
+                        <li>
+                            <span class="item-name">Layer Count</span>
+                            <span class="item-diff">
+                                <span class="model-a">${lc.countA}</span>
+                                <span>/</span>
+                                <span class="model-b">${lc.countB}</span>
+                            </span>
+                        </li>
+                        <li>
+                            <span class="item-name">Total Params</span>
+                            <span class="item-diff">
+                                <span class="model-a">${fmt(lc.paramsA)}</span>
+                                <span>/</span>
+                                <span class="model-b">${fmt(lc.paramsB)}</span>
+                            </span>
+                        </li>
+                        ${lc.shapeA || lc.shapeB ? `
+                        <li>
+                            <span class="item-name">Dimensions</span>
+                            <span class="item-diff">
+                                <span class="model-a">${lc.shapeA || '-'}</span>
+                                <span>/</span>
+                                <span class="model-b">${lc.shapeB || '-'}</span>
+                            </span>
+                        </li>
+                        ` : ''}
+                    </ul>
+                </div>
+            `;
+        }
+
+        // Similarities
+        if (comparison.similarities.length > 0) {
+            html += `
+                <div class="compare-section">
+                    <div class="compare-section-title">
+                        Similar Components
+                        <span class="compare-badge same">${comparison.similarities.length}</span>
+                    </div>
+                    <ul class="compare-list">
+                        ${comparison.similarities.slice(0, 10).map(s => `
+                            <li>
+                                <span class="item-name">${s.name}</span>
+                                <span class="item-detail">${s.type}</span>
+                            </li>
+                        `).join('')}
+                        ${comparison.similarities.length > 10 ? `<li><span class="item-detail">...and ${comparison.similarities.length - 10} more</span></li>` : ''}
+                    </ul>
+                </div>
+            `;
+        }
+
+        // Differences
+        if (comparison.differences.length > 0) {
+            html += `
+                <div class="compare-section">
+                    <div class="compare-section-title">
+                        Different Sizes
+                        <span class="compare-badge diff">${comparison.differences.length}</span>
+                    </div>
+                    <ul class="compare-list">
+                        ${comparison.differences.slice(0, 10).map(d => `
+                            <li>
+                                <span class="item-name">${d.name}</span>
+                                <span class="item-diff">
+                                    <span class="model-a">${fmt(d.paramsA)}</span>
+                                    <span>/</span>
+                                    <span class="model-b">${fmt(d.paramsB)}</span>
+                                </span>
+                            </li>
+                        `).join('')}
+                        ${comparison.differences.length > 10 ? `<li><span class="item-detail">...and ${comparison.differences.length - 10} more</span></li>` : ''}
+                    </ul>
+                </div>
+            `;
+        }
+
+        // Only in A
+        if (comparison.onlyInA.length > 0) {
+            html += `
+                <div class="compare-section">
+                    <div class="compare-section-title">
+                        Only in ${comparison.modelA.name.split('/').pop()}
+                        <span class="compare-badge removed">${comparison.onlyInA.length}</span>
+                    </div>
+                    <ul class="compare-list">
+                        ${comparison.onlyInA.map(s => `
+                            <li>
+                                <span class="item-name">${s.name}</span>
+                                <span class="item-detail">${s.type} - ${fmt(s.params)}</span>
+                            </li>
+                        `).join('')}
+                    </ul>
+                </div>
+            `;
+        }
+
+        // Only in B
+        if (comparison.onlyInB.length > 0) {
+            html += `
+                <div class="compare-section">
+                    <div class="compare-section-title">
+                        Only in ${comparison.modelB.name.split('/').pop()}
+                        <span class="compare-badge added">${comparison.onlyInB.length}</span>
+                    </div>
+                    <ul class="compare-list">
+                        ${comparison.onlyInB.map(s => `
+                            <li>
+                                <span class="item-name">${s.name}</span>
+                                <span class="item-detail">${s.type} - ${fmt(s.params)}</span>
+                            </li>
+                        `).join('')}
+                    </ul>
+                </div>
+            `;
+        }
+
+        compareResults.innerHTML = html;
+    }
+
+    function updateLegend() {
+        const allTypes = new Set();
+        const colors = {};
+
+        panels.forEach(panel => {
+            if (panel.data && panel.viz) {
+                const items = panel.viz.getLegendItems();
+                items.forEach(item => {
+                    allTypes.add(item.type);
+                    colors[item.type] = item.color;
+                });
+            }
+        });
+
+        legend.innerHTML = '';
+        allTypes.forEach(type => {
+            const el = document.createElement('div');
+            el.className = 'legend-item';
+            el.innerHTML = `
+                <div class="legend-color" style="background-color: ${colors[type]}"></div>
+                <span class="legend-label">${type}</span>
+            `;
+            legend.appendChild(el);
+        });
+    }
+
+    function parseUrlState() {
+        const hash = window.location.hash.slice(1);
+        if (!hash) return { models: [], zoomLocked: true };
+
+        try {
+            const params = new URLSearchParams(hash);
+            const models = (params.get('models') || '').split(',').filter(Boolean);
+            const zoomLocked = params.get('lock') !== '0';
+            return { models, zoomLocked };
+        } catch {
+            return { models: [], zoomLocked: true };
+        }
+    }
+
+    function updateUrlState() {
+        const models = [];
+        panels.forEach(panel => {
+            models.push(panel.modelId || '');
+        });
+
+        const params = new URLSearchParams();
+        params.set('models', models.join(','));
+        params.set('lock', zoomLocked ? '1' : '0');
+
+        window.history.replaceState(null, '', `#${params.toString()}`);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

frontend/js/treemap.js

@@ -0,0 +1,638 @@
+/**
+ * LLM Scope - Pipeline Visualization
+ * Professional, minimalist architecture diagrams
+ */
+
+class ModelTreeViz {
+    constructor(containerId) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        this.pipelineData = null;
+        this.totalParams = 0;
+        this.globalMaxParams = null;
+
+        // Layout
+        this.baseNodeHeight = 48;
+        this.minNodeHeight = 36;
+        this.maxNodeHeight = 72;
+        this.nodeGap = 12;
+        this.containerPadding = 14;
+        this.containerGap = 8;
+        this.padding = 24;
+        this.branchGap = 24;
+
+        // Width
+        this.minNodeWidth = 110;
+        this.maxNodeWidth = 240;
+
+        this.transform = d3.zoomIdentity;
+
+        // Professional muted color palette
+        this.colors = {
+            embedding: '#d97706',   // amber
+            attention: '#7c3aed',   // violet
+            mlp: '#059669',         // emerald
+            norm: '#0891b2',        // cyan
+            head: '#db2777',        // pink
+            layers: '#4f46e5',      // indigo
+            encoder: '#6366f1',     // indigo lighter
+            linear: '#6b7280',      // gray
+            module: '#52525b',      // zinc
+            model: '#3f3f46',       // zinc darker
+            block: '#52525b',
+            pooler: '#0d9488',      // teal
+            parallel: '#3f3f46',
+            default: '#52525b'
+        };
+
+        this._init();
+    }
+
+    _init() {
+        this.svg = d3.select(`#${this.containerId}`)
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%');
+
+        this.zoom = d3.zoom()
+            .scaleExtent([0.2, 3])
+            .on('zoom', (event) => {
+                this.transform = event.transform;
+                this.g.attr('transform', event.transform);
+            });
+
+        this.svg.call(this.zoom);
+
+        this.g = this.svg.append('g');
+        this.containersGroup = this.g.append('g').attr('class', 'containers');
+        this.arrowsGroup = this.g.append('g').attr('class', 'arrows');
+        this.nodesGroup = this.g.append('g').attr('class', 'nodes');
+
+        // Arrow marker
+        this.svg.append('defs').append('marker')
+            .attr('id', `arrow-${this.containerId}`)
+            .attr('viewBox', '0 -4 8 8')
+            .attr('refX', 7)
+            .attr('refY', 0)
+            .attr('markerWidth', 5)
+            .attr('markerHeight', 5)
+            .attr('orient', 'auto')
+            .append('path')
+            .attr('d', 'M0,-4L8,0L0,4')
+            .attr('fill', '#52525b');
+
+        this.resizeObserver = new ResizeObserver(() => this._onResize());
+        this.resizeObserver.observe(this.container);
+    }
+
+    _onResize() {
+        if (this.pipelineData) {
+            this._render();
+        }
+    }
+
+    getColor(type) {
+        return this.colors[type] || this.colors.default;
+    }
+
+    _getNodeWidth(params) {
+        const refParams = this.globalMaxParams || this.totalParams;
+        if (refParams === 0 || params === 0) return this.minNodeWidth;
+        const ratio = params / refParams;
+        const scale = Math.sqrt(ratio);
+        return this.minNodeWidth + (this.maxNodeWidth - this.minNodeWidth) * scale;
+    }
+
+    _getNodeHeight(params) {
+        const refParams = this.globalMaxParams || this.totalParams;
+        if (refParams === 0 || params === 0) return this.minNodeHeight;
+        const ratio = params / refParams;
+        const scale = Math.pow(ratio, 0.25);
+        return this.minNodeHeight + (this.maxNodeHeight - this.minNodeHeight) * scale;
+    }
+
+    setData(data, globalMaxParams = null) {
+        this.pipelineData = data;
+        this.totalParams = data.params || 0;
+        this.globalMaxParams = globalMaxParams;
+        this._render();
+    }
+
+    _calcStepWidth(step) {
+        const nodeWidth = this._getNodeWidth(step.params || 0);
+
+        if (step.type === 'parallel' && step.branches) {
+            let totalWidth = 0;
+            for (const branch of step.branches) {
+                totalWidth += this._calcStepWidth(branch);
+            }
+            totalWidth += (step.branches.length - 1) * this.branchGap;
+            return Math.max(nodeWidth, totalWidth);
+        }
+
+        if (step.substeps && step._collapsed === false) {
+            let maxChildWidth = 0;
+            for (const sub of step.substeps) {
+                maxChildWidth = Math.max(maxChildWidth, this._calcStepWidth(sub));
+            }
+            return Math.max(nodeWidth, maxChildWidth + this.containerPadding * 2);
+        }
+
+        return nodeWidth;
+    }
+
+    _layoutPipeline(data) {
+        const nodes = [];
+        const arrows = [];
+        const containers = [];
+        const centerX = 350;
+
+        const layoutSteps = (steps, startY, parentCenterX) => {
+            if (!steps || steps.length === 0) {
+                return { endY: startY, lastNodes: [] };
+            }
+
+            let y = startY;
+            let prevNodes = [];
+
+            for (let i = 0; i < steps.length; i++) {
+                const step = steps[i];
+
+                if (step.type === 'parallel' && step.branches && step.branches.length > 1) {
+                    const branchResults = [];
+                    const branchWidths = step.branches.map(b => this._calcStepWidth(b));
+                    const totalWidth = branchWidths.reduce((a, b) => a + b, 0) + (step.branches.length - 1) * this.branchGap;
+
+                    let branchX = parentCenterX - totalWidth / 2;
+                    const branchStartY = y;
+
+                    for (let bi = 0; bi < step.branches.length; bi++) {
+                        const branch = step.branches[bi];
+                        const branchWidth = branchWidths[bi];
+                        const branchCenterX = branchX + branchWidth / 2;
+
+                        const result = layoutSteps([branch], branchStartY, branchCenterX);
+                        branchResults.push({
+                            result,
+                            centerX: branchCenterX,
+                            firstNode: nodes.find(n => n.data === branch)
+                        });
+
+                        branchX += branchWidth + this.branchGap;
+                    }
+
+                    for (const prev of prevNodes) {
+                        for (const br of branchResults) {
+                            if (br.firstNode) {
+                                arrows.push({ source: prev, target: br.firstNode });
+                            }
+                        }
+                    }
+
+                    let maxEndY = y;
+                    let allLastNodes = [];
+                    for (const br of branchResults) {
+                        maxEndY = Math.max(maxEndY, br.result.endY);
+                        if (br.result.lastNodes) {
+                            allLastNodes.push(...br.result.lastNodes);
+                        }
+                    }
+
+                    y = maxEndY;
+                    prevNodes = allLastNodes;
+                    continue;
+                }
+
+                const nodeWidth = this._getNodeWidth(step.params || 0);
+                const nodeHeight = this._getNodeHeight(step.params || 0);
+                const hasSubsteps = !!(step.substeps && step.substeps.length > 0);
+                const isExpanded = hasSubsteps && step._collapsed === false;
+                const x = parentCenterX - nodeWidth / 2;
+
+                const node = {
+                    data: step,
+                    x: x,
+                    y: y,
+                    width: nodeWidth,
+                    height: nodeHeight,
+                    hasSubsteps: hasSubsteps,
+                    collapsed: !isExpanded
+                };
+
+                nodes.push(node);
+
+                for (const prev of prevNodes) {
+                    arrows.push({ source: prev, target: node });
+                }
+
+                y += nodeHeight;
+
+                if (isExpanded) {
+                    const containerStartY = y + this.containerGap;
+                    const childrenMaxWidth = Math.max(...step.substeps.map(s => this._calcStepWidth(s)));
+                    const containerWidth = Math.max(nodeWidth, childrenMaxWidth) + this.containerPadding * 2;
+                    const containerX = parentCenterX - containerWidth / 2;
+
+                    const childResult = layoutSteps(
+                        step.substeps,
+                        containerStartY + this.containerPadding,
+                        parentCenterX
+                    );
+
+                    const containerEndY = childResult.endY + this.containerPadding - this.nodeGap;
+
+                    containers.push({
+                        x: containerX,
+                        y: containerStartY,
+                        width: containerWidth,
+                        height: containerEndY - containerStartY,
+                        color: this.getColor(step.type)
+                    });
+
+                    const firstChild = nodes.find(n => n.data === step.substeps[0]);
+                    if (firstChild) {
+                        arrows.push({ source: node, target: firstChild });
+                    }
+
+                    y = containerEndY + this.containerGap;
+                    prevNodes = [{
+                        isContainerBottom: true,
+                        containerBottomY: containerEndY,
+                        centerX: parentCenterX
+                    }];
+                } else {
+                    y += this.nodeGap;
+                    prevNodes = [node];
+                }
+            }
+
+            return { endY: y, lastNodes: prevNodes };
+        };
+
+        layoutSteps(data.steps || [], this.padding, centerX);
+
+        return { nodes, arrows, containers };
+    }
+
+    _render() {
+        if (!this.pipelineData) return;
+
+        const { nodes, arrows, containers } = this._layoutPipeline(this.pipelineData);
+        const arrowId = `arrow-${this.containerId}`;
+
+        // Containers
+        this.containersGroup.selectAll('.container-box').remove();
+        containers.forEach(container => {
+            this.containersGroup.append('rect')
+                .attr('class', 'container-box')
+                .attr('x', container.x)
+                .attr('y', container.y)
+                .attr('width', container.width)
+                .attr('height', container.height)
+                .attr('rx', 6)
+                .attr('ry', 6)
+                .attr('fill', 'rgba(24, 24, 27, 0.6)')
+                .attr('stroke', container.color)
+                .attr('stroke-width', 1)
+                .attr('stroke-opacity', 0.3);
+        });
+
+        // Arrows
+        this.arrowsGroup.selectAll('.arrow').remove();
+        arrows.forEach(arrow => {
+            let sx, sy;
+            if (arrow.source.isContainerBottom) {
+                sx = arrow.source.centerX;
+                sy = arrow.source.containerBottomY;
+            } else {
+                sx = arrow.source.x + arrow.source.width / 2;
+                sy = arrow.source.y + arrow.source.height;
+            }
+
+            const tx = arrow.target.x + arrow.target.width / 2;
+            const ty = arrow.target.y;
+
+            if (Math.abs(sx - tx) > 5) {
+                const midY = (sy + ty) / 2;
+                this.arrowsGroup.append('path')
+                    .attr('class', 'arrow')
+                    .attr('d', `M${sx},${sy} C${sx},${midY} ${tx},${midY} ${tx},${ty - 3}`)
+                    .attr('fill', 'none')
+                    .attr('stroke', '#3f3f46')
+                    .attr('stroke-width', 1.5)
+                    .attr('marker-end', `url(#${arrowId})`);
+            } else {
+                this.arrowsGroup.append('line')
+                    .attr('class', 'arrow')
+                    .attr('x1', sx)
+                    .attr('y1', sy)
+                    .attr('x2', tx)
+                    .attr('y2', ty - 3)
+                    .attr('stroke', '#3f3f46')
+                    .attr('stroke-width', 1.5)
+                    .attr('marker-end', `url(#${arrowId})`);
+            }
+        });
+
+        // Nodes
+        const nodeGroups = this.nodesGroup.selectAll('.node')
+            .data(nodes, (d, i) => d.data.name + '-' + i)
+            .join('g')
+            .attr('class', 'node')
+            .attr('transform', d => `translate(${d.x}, ${d.y})`)
+            .style('cursor', d => d.hasSubsteps ? 'pointer' : 'default');
+
+        nodeGroups.selectAll('rect')
+            .data(d => [d])
+            .join('rect')
+            .attr('width', d => d.width)
+            .attr('height', d => d.height)
+            .attr('rx', 6)
+            .attr('ry', 6)
+            .attr('fill', d => this.getColor(d.data.type))
+            .attr('stroke', d => d.hasSubsteps && d.collapsed ? 'rgba(255,255,255,0.25)' : 'none')
+            .attr('stroke-width', 1)
+            .attr('stroke-dasharray', d => d.hasSubsteps && d.collapsed ? '3,2' : 'none');
+
+        // Name
+        nodeGroups.selectAll('.node-name')
+            .data(d => [d])
+            .join('text')
+            .attr('class', 'node-name')
+            .attr('x', d => d.width / 2)
+            .attr('y', d => d.data.shape ? 13 : (d.height / 2 - 3))
+            .attr('text-anchor', 'middle')
+            .attr('fill', 'white')
+            .attr('font-size', '10px')
+            .attr('font-weight', '600')
+            .attr('font-family', '-apple-system, BlinkMacSystemFont, sans-serif')
+            .text(d => {
+                let name = d.data.name;
+                if (d.data.count) name += ` (${d.data.count}x)`;
+                return name;
+            })
+            .each(function(d) {
+                const textEl = d3.select(this);
+                let text = textEl.text();
+                const maxWidth = d.width - 20;
+                while (this.getComputedTextLength() > maxWidth && text.length > 0) {
+                    text = text.slice(0, -1);
+                    textEl.text(text + '...');
+                }
+            });
+
+        // Shape
+        nodeGroups.selectAll('.node-shape')
+            .data(d => d.data.shape ? [d] : [])
+            .join('text')
+            .attr('class', 'node-shape')
+            .attr('x', d => d.width / 2)
+            .attr('y', d => d.height / 2)
+            .attr('text-anchor', 'middle')
+            .attr('fill', 'rgba(255,255,255,0.7)')
+            .attr('font-size', '8px')
+            .attr('font-family', 'SF Mono, monospace')
+            .text(d => d.data.shape)
+            .each(function(d) {
+                const textEl = d3.select(this);
+                let text = textEl.text();
+                const maxWidth = d.width - 14;
+                while (this.getComputedTextLength() > maxWidth && text.length > 0) {
+                    text = text.slice(0, -1);
+                    textEl.text(text + '...');
+                }
+            });
+
+        // Params
+        nodeGroups.selectAll('.node-params')
+            .data(d => [d])
+            .join('text')
+            .attr('class', 'node-params')
+            .attr('x', d => d.width / 2)
+            .attr('y', d => d.data.shape ? d.height - 7 : (d.height / 2 + 10))
+            .attr('text-anchor', 'middle')
+            .attr('fill', 'rgba(255,255,255,0.5)')
+            .attr('font-size', '9px')
+            .attr('font-family', 'SF Mono, monospace')
+            .text(d => API.formatParams(d.data.params || 0));
+
+        // Expand indicator
+        nodeGroups.selectAll('.expand-indicator')
+            .data(d => d.hasSubsteps ? [d] : [])
+            .join('text')
+            .attr('class', 'expand-indicator')
+            .attr('x', d => d.width - 10)
+            .attr('y', 12)
+            .attr('fill', 'rgba(255,255,255,0.5)')
+            .attr('font-size', '8px')
+            .text(d => d.collapsed ? '+' : '-');
+
+        nodeGroups
+            .on('click', (event, d) => this._handleClick(event, d))
+            .on('mouseenter', (event, d) => this._handleMouseEnter(event, d))
+            .on('mouseleave', (event, d) => this._handleMouseLeave(event, d));
+
+        this._fitView(nodes, containers);
+    }
+
+    _fitView(nodes, containers) {
+        if (nodes.length === 0) return;
+
+        const rect = this.container.getBoundingClientRect();
+        const padding = 32;
+
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        for (const node of nodes) {
+            minX = Math.min(minX, node.x);
+            minY = Math.min(minY, node.y);
+            maxX = Math.max(maxX, node.x + node.width);
+            maxY = Math.max(maxY, node.y + node.height);
+        }
+
+        for (const container of containers) {
+            minX = Math.min(minX, container.x);
+            minY = Math.min(minY, container.y);
+            maxX = Math.max(maxX, container.x + container.width);
+            maxY = Math.max(maxY, container.y + container.height);
+        }
+
+        const contentWidth = maxX - minX + padding * 2;
+        const contentHeight = maxY - minY + padding * 2;
+
+        const scaleX = rect.width / contentWidth;
+        const scaleY = rect.height / contentHeight;
+        const scale = Math.min(scaleX, scaleY, 1.5);
+
+        const translateX = (rect.width - contentWidth * scale) / 2 - minX * scale + padding * scale;
+        const translateY = (rect.height - contentHeight * scale) / 2 - minY * scale + padding * scale;
+
+        this.svg.transition().duration(250).call(
+            this.zoom.transform,
+            d3.zoomIdentity.translate(translateX, translateY).scale(scale)
+        );
+    }
+
+    _handleClick(event, d) {
+        event.stopPropagation();
+        if (d.hasSubsteps) {
+            d.data._collapsed = d.data._collapsed === false ? true : false;
+            this._render();
+        }
+    }
+
+    _handleMouseEnter(event, d) {
+        this._showTooltip(event, d);
+    }
+
+    _handleMouseLeave(event, d) {
+        this._hideTooltip();
+    }
+
+    _showTooltip(event, d) {
+        const tooltip = document.getElementById('tooltip');
+        const params = d.data.params || 0;
+        const refParams = this.globalMaxParams || this.totalParams;
+        const percent = refParams > 0 ? ((params / refParams) * 100).toFixed(1) : '0';
+
+        let extra = '';
+        if (d.data.shape) {
+            extra += `<div class="tooltip-row"><span class="tooltip-label">Shape</span><span class="tooltip-value">${d.data.shape}</span></div>`;
+        }
+        if (d.data.count) {
+            extra += `<div class="tooltip-row"><span class="tooltip-label">Layers</span><span class="tooltip-value">${d.data.count}</span></div>`;
+        }
+        if (d.data.substeps && d.data.substeps.length > 0) {
+            extra += `<div class="tooltip-row"><span class="tooltip-label">Components</span><span class="tooltip-value">${d.data.substeps.length}</span></div>`;
+        }
+
+        tooltip.innerHTML = `
+            <div class="tooltip-title">${d.data.name}</div>
+            <div class="tooltip-content">
+                <div class="tooltip-row"><span class="tooltip-label">Parameters</span><span class="tooltip-value">${API.formatParams(params)}</span></div>
+                <div class="tooltip-row"><span class="tooltip-label">Proportion</span><span class="tooltip-value">${percent}%</span></div>
+                <div class="tooltip-row"><span class="tooltip-label">Type</span><span class="tooltip-value">${d.data.type}</span></div>
+                ${extra}
+            </div>
+        `;
+
+        tooltip.classList.remove('hidden');
+
+        const pad = 10;
+        let x = event.clientX + pad;
+        let y = event.clientY + pad;
+
+        const tooltipRect = tooltip.getBoundingClientRect();
+        if (x + tooltipRect.width > window.innerWidth) x = event.clientX - tooltipRect.width - pad;
+        if (y + tooltipRect.height > window.innerHeight) y = event.clientY - tooltipRect.height - pad;
+
+        tooltip.style.left = `${x}px`;
+        tooltip.style.top = `${y}px`;
+    }
+
+    _hideTooltip() {
+        document.getElementById('tooltip').classList.add('hidden');
+    }
+
+    getLegendItems() {
+        if (!this.pipelineData || !this.pipelineData.steps) return [];
+
+        const types = new Set();
+        const collect = (steps) => {
+            if (!steps) return;
+            for (const step of steps) {
+                if (step.type) types.add(step.type);
+                if (step.substeps) collect(step.substeps);
+                if (step.branches) {
+                    for (const branch of step.branches) {
+                        if (branch.type) types.add(branch.type);
+                        if (branch.substeps) collect(branch.substeps);
+                    }
+                }
+            }
+        };
+        collect(this.pipelineData.steps);
+
+        return Array.from(types).map(type => ({ type, color: this.getColor(type) }));
+    }
+
+    /**
+     * Export SVG with watermark
+     */
+    exportSVG(modelName) {
+        const svgElement = this.svg.node();
+        const clone = svgElement.cloneNode(true);
+
+        // Get bounds
+        const rect = this.container.getBoundingClientRect();
+        clone.setAttribute('width', rect.width);
+        clone.setAttribute('height', rect.height);
+        clone.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);
+
+        // Add background
+        const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bg.setAttribute('width', '100%');
+        bg.setAttribute('height', '100%');
+        bg.setAttribute('fill', '#0a0a0b');
+        clone.insertBefore(bg, clone.firstChild);
+
+        // Add watermark
+        const watermark = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        watermark.setAttribute('x', rect.width - 10);
+        watermark.setAttribute('y', rect.height - 10);
+        watermark.setAttribute('text-anchor', 'end');
+        watermark.setAttribute('fill', '#3f3f46');
+        watermark.setAttribute('font-size', '11');
+        watermark.setAttribute('font-family', '-apple-system, sans-serif');
+        watermark.textContent = 'omarkamali.com/llmscope';
+        clone.appendChild(watermark);
+
+        // Add model name
+        if (modelName) {
+            const title = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            title.setAttribute('x', '10');
+            title.setAttribute('y', '20');
+            title.setAttribute('fill', '#fafafa');
+            title.setAttribute('font-size', '12');
+            title.setAttribute('font-weight', '600');
+            title.setAttribute('font-family', '-apple-system, sans-serif');
+            title.textContent = modelName;
+            clone.appendChild(title);
+        }
+
+        const serializer = new XMLSerializer();
+        const svgString = serializer.serializeToString(clone);
+        const blob = new Blob([svgString], { type: 'image/svg+xml' });
+
+        return blob;
+    }
+
+    resetZoom() {
+        if (this.pipelineData) {
+            const expandAll = (steps) => {
+                if (!steps) return;
+                for (const step of steps) {
+                    step._collapsed = false;
+                    if (step.substeps) expandAll(step.substeps);
+                    if (step.branches) {
+                        for (const branch of step.branches) {
+                            branch._collapsed = false;
+                            if (branch.substeps) expandAll(branch.substeps);
+                        }
+                    }
+                }
+            };
+            if (this.pipelineData.steps) {
+                expandAll(this.pipelineData.steps);
+            }
+            this._render();
+        }
+    }
+
+    destroy() {
+        if (this.resizeObserver) this.resizeObserver.disconnect();
+        this.svg.remove();
+    }
+}
+
+const TreemapViz = ModelTreeViz;