Upload folder using huggingface_hub

README.md

@@ -1,12 +1,23 @@
----
-title: Auto Ontology
-emoji: 🐢
-colorFrom: yellow
-colorTo: green
-sdk: gradio
-sdk_version: 6.8.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Auto-Ontology — Automotive Market Intelligence
+emoji: 🏎️
+colorFrom: blue
+colorTo: purple
+sdk: gradio
+sdk_version: "5.31.0"
+app_file: app.py
+pinned: false
+license: cc-by-4.0
+datasets:
+  - cp500/auto-ontology
+---
+
+# Auto-Ontology — Automotive Market Intelligence
+
+Explore a hypergraph of **94,671 market signals** connected to **1,261 vehicles** from the NHTSA vPIC registry.
+
+**Pipeline tab** — Scrollytelling walkthrough from Common Crawl to structural analysis, with D3.js visualizations.
+
+**Chatbot tab** — Ask questions about the automotive market using a Strands Agent backed by the dataset.
+
+Built as an AWS Automotive workshop. Dataset: [cp500/auto-ontology](https://huggingface.co/datasets/cp500/auto-ontology)

app.py

@@ -0,0 +1,273 @@
+"""
+Auto-Ontology — Automotive Market Intelligence
+HuggingFace Space: Gradio Blocks with pipeline narrative + Strands Agent chatbot.
+"""
+
+import os
+from pathlib import Path
+
+import gradio as gr
+import pandas as pd
+
+# ---------------------------------------------------------------------------
+# Load dataset (parquet files from the HF dataset repo)
+# ---------------------------------------------------------------------------
+
+DATA_DIR = Path(__file__).parent / "data"
+HF_DATASET = "cp500/auto-ontology"
+
+
+def _load_parquet(subdir: str, table: str) -> pd.DataFrame | None:
+    """Load a parquet table — try local first, then HF hub."""
+    local = DATA_DIR / subdir / f"{table}.parquet"
+    if local.exists():
+        return pd.read_parquet(local)
+    try:
+        return pd.read_parquet(f"hf://datasets/{HF_DATASET}/data/{subdir}/{table}.parquet")
+    except Exception:
+        return None
+
+
+# Lazy-load dataframes
+_cache: dict[str, pd.DataFrame | None] = {}
+
+
+def get_df(subdir: str, table: str) -> pd.DataFrame:
+    key = f"{subdir}/{table}"
+    if key not in _cache:
+        _cache[key] = _load_parquet(subdir, table)
+    df = _cache[key]
+    if df is None:
+        raise ValueError(f"Table {key} not available")
+    return df
+
+
+# ---------------------------------------------------------------------------
+# Strands Agent tools — query the parquet dataset
+# ---------------------------------------------------------------------------
+
+from strands import Agent, tool
+from strands.models.openai import OpenAIModel
+
+
+@tool
+def search_products(make: str = "", model: str = "", year: int = 0) -> str:
+    """Search the product index for vehicles by make, model, and/or year.
+    Returns matching vehicles with their IDs, make, model, year, and body class."""
+    df = get_df("hypergraph", "product_index")
+    mask = pd.Series(True, index=df.index)
+    if make:
+        mask &= df["make"].str.contains(make, case=False, na=False)
+    if model:
+        mask &= df["model"].str.contains(model, case=False, na=False)
+    if year:
+        mask &= df["model_year"] == year
+    results = df[mask].head(20)
+    if results.empty:
+        return "No products found matching the criteria."
+    return results.to_markdown(index=False)
+
+
+@tool
+def browse_signals(domain: str = "", sentiment: str = "", keyword: str = "") -> str:
+    """Browse market signals. Filter by L1 domain code (P/T/C/F/S/R/M/ST),
+    sentiment (bullish/bearish/neutral/mixed), or keyword in signal name.
+    Returns up to 15 matching signals."""
+    si = get_df("hypergraph", "signal_index")
+    nodes = get_df("hypergraph", "nodes")
+    # Merge to get signal names
+    signals = si.merge(nodes[nodes["node_type"] == "Signal"][["id", "name"]],
+                       left_on="signal_id", right_on="id", how="left")
+    mask = pd.Series(True, index=signals.index)
+    if domain:
+        mask &= signals["domain"].str.upper() == domain.upper()
+    if sentiment:
+        mask &= signals["sentiment"].str.lower() == sentiment.lower()
+    if keyword:
+        mask &= signals["name"].str.contains(keyword, case=False, na=False)
+    results = signals[mask][["signal_id", "name", "domain", "subdomain",
+                              "sentiment", "impact", "timestamp"]].head(15)
+    if results.empty:
+        return "No signals found matching the criteria."
+    return results.to_markdown(index=False)
+
+
+@tool
+def get_competitors(product_id: str) -> str:
+    """Get vehicles that compete with a given product.
+    Takes a product_id like 'prd_tesla_model_y_2024' and returns competing vehicles."""
+    edges = get_df("hypergraph", "edges")
+    products = get_df("hypergraph", "product_index")
+    # Find COMPETES_WITH edges in both directions
+    compete = edges[edges["role"] == "COMPETES_WITH"]
+    as_source = compete[compete["source_id"] == product_id]["target_id"]
+    as_target = compete[compete["target_id"] == product_id]["source_id"]
+    competitor_ids = pd.concat([as_source, as_target]).unique()
+    if len(competitor_ids) == 0:
+        return f"No competitors found for {product_id}."
+    results = products[products["product_id"].isin(competitor_ids)]
+    return f"Competitors of {product_id}:\n\n{results.to_markdown(index=False)}"
+
+
+@tool
+def graph_stats() -> str:
+    """Get summary statistics of the auto-ontology hypergraph —
+    node counts by type, edge counts by role, signal domain distribution, etc."""
+    nodes = get_df("hypergraph", "nodes")
+    edges = get_df("hypergraph", "edges")
+    si = get_df("hypergraph", "signal_index")
+
+    node_counts = nodes["node_type"].value_counts().to_dict()
+    edge_counts = edges["role"].value_counts().to_dict()
+    domain_counts = si["domain"].value_counts().to_dict()
+    sentiment_counts = si["sentiment"].value_counts().to_dict()
+
+    lines = [
+        "## Hypergraph Statistics\n",
+        f"**Total nodes:** {len(nodes):,}",
+        f"**Total edges:** {len(edges):,}\n",
+        "### Node Types",
+    ]
+    for t, c in sorted(node_counts.items(), key=lambda x: -x[1]):
+        lines.append(f"- {t}: {c:,}")
+    lines.append("\n### Edge Roles")
+    for r, c in sorted(edge_counts.items(), key=lambda x: -x[1]):
+        lines.append(f"- {r}: {c:,}")
+    lines.append("\n### Signal Domains (L1)")
+    domain_names = {
+        "P": "Product", "C": "Competitive", "T": "Technology", "M": "Market",
+        "F": "Financial", "S": "Supply Chain", "R": "Regulatory", "ST": "Strategic",
+    }
+    for d, c in sorted(domain_counts.items(), key=lambda x: -x[1]):
+        lines.append(f"- {d} ({domain_names.get(d, d)}): {c:,}")
+    lines.append("\n### Signal Sentiment")
+    for s, c in sorted(sentiment_counts.items(), key=lambda x: -x[1]):
+        lines.append(f"- {s}: {c:,}")
+    return "\n".join(lines)
+
+
+# ---------------------------------------------------------------------------
+# Build Strands Agent
+# ---------------------------------------------------------------------------
+
+SYSTEM_PROMPT = """\
+You are an automotive market intelligence analyst with access to the Auto-Ontology \
+hypergraph — 176K nodes and 537K edges connecting 94,671 market signals to 1,261 vehicles.
+
+The data was extracted from Common Crawl and resolved against the NHTSA vPIC registry.
+
+Use your tools to search products, browse signals, find competitors, and get graph stats. \
+When answering, cite specific data from the tools. Be concise and analytical.
+
+Signal domains: P (Product), T (Technology), C (Competitive), F (Financial), \
+S (Supply Chain), R (Regulatory), M (Market), ST (Strategic).
+
+Sentiments: bullish, bearish, neutral, mixed.
+"""
+
+
+def _build_agent():
+    """Build the Strands agent with HF Inference API."""
+    hf_token = os.environ.get("HF_TOKEN", "")
+    model = OpenAIModel(
+        client_args={
+            "base_url": "https://api-inference.huggingface.co/v1/",
+            "api_key": hf_token,
+        },
+        model_id="Qwen/Qwen2.5-72B-Instruct",
+    )
+    return Agent(
+        model=model,
+        tools=[search_products, browse_signals, get_competitors, graph_stats],
+        system_prompt=SYSTEM_PROMPT,
+    )
+
+
+_agent = None
+
+
+def get_agent():
+    global _agent
+    if _agent is None:
+        _agent = _build_agent()
+    return _agent
+
+
+# ---------------------------------------------------------------------------
+# Chat handler
+# ---------------------------------------------------------------------------
+
+
+def chat_fn(message: str, history: list[dict]) -> str:
+    """Handle a chat message using the Strands agent."""
+    try:
+        agent = get_agent()
+        result = agent(message)
+        return str(result)
+    except Exception as e:
+        return f"Error: {e}\n\nMake sure the HF_TOKEN secret is configured in Space settings."
+
+
+# ---------------------------------------------------------------------------
+# Pipeline narrative HTML
+# ---------------------------------------------------------------------------
+
+PIPELINE_HTML_PATH = Path(__file__).parent / "pipeline.html"
+
+
+def load_pipeline_html() -> str:
+    if PIPELINE_HTML_PATH.exists():
+        html = PIPELINE_HTML_PATH.read_text()
+        # Wrap in iframe for isolation
+        import base64
+        encoded = base64.b64encode(html.encode()).decode()
+        return f'<iframe src="data:text/html;base64,{encoded}" width="100%" height="900" style="border:none; border-radius:12px;"></iframe>'
+    return "<p>Pipeline narrative not found. Check pipeline.html.</p>"
+
+
+# ---------------------------------------------------------------------------
+# Gradio App
+# ---------------------------------------------------------------------------
+
+DESCRIPTION = """\
+# Auto-Ontology — Automotive Market Intelligence
+
+Explore a hypergraph of **94,671 market signals** connected to **1,261 vehicles** \
+from the NHTSA vPIC registry. Built from Common Crawl data using an AWS pipeline \
+with NuExtract structured extraction and vPIC entity resolution.
+"""
+
+with gr.Blocks(
+    title="Auto-Ontology",
+    theme=gr.themes.Base(
+        primary_hue="indigo",
+        secondary_hue="emerald",
+        neutral_hue="slate",
+    ),
+) as demo:
+    gr.Markdown(DESCRIPTION)
+
+    with gr.Tabs():
+        with gr.Tab("The Pipeline"):
+            gr.HTML(load_pipeline_html())
+
+        with gr.Tab("Ask the Ontology"):
+            gr.Markdown(
+                "Chat with a **Strands Agent** that can search products, "
+                "browse market signals, find competitors, and query graph statistics."
+            )
+            gr.ChatInterface(
+                fn=chat_fn,
+                type="messages",
+                examples=[
+                    "What are the graph statistics?",
+                    "Search for Tesla vehicles in the dataset",
+                    "Show me bearish signals in the technology domain",
+                    "What competes with the Tesla Model Y 2024?",
+                    "Find signals about battery technology",
+                ],
+            )
+
+
+if __name__ == "__main__":
+    demo.launch()

pipeline.html

@@ -0,0 +1,1072 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Auto-Ontology Pipeline</title>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<style>
+  :root {
+    --bg: #0f172a;
+    --surface: #1e293b;
+    --border: #334155;
+    --text: #e2e8f0;
+    --muted: #94a3b8;
+    --accent: #818cf8;
+    --accent2: #34d399;
+    --accent3: #f472b6;
+    --accent4: #fbbf24;
+    --bearish: #ef4444;
+    --bullish: #22c55e;
+    --neutral: #64748b;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.7;
+    overflow-x: hidden;
+  }
+
+  /* ─── Hero ─── */
+  .hero {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 2rem;
+    position: relative;
+    overflow: hidden;
+  }
+  .hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(99,102,241,0.15), transparent);
+  }
+  .hero h1 {
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    background: linear-gradient(135deg, #818cf8, #34d399);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    position: relative;
+  }
+  .hero .subtitle {
+    font-size: clamp(1rem, 2.5vw, 1.5rem);
+    color: var(--muted);
+    margin-top: 1rem;
+    position: relative;
+  }
+  .hero .stats-row {
+    display: flex;
+    gap: 3rem;
+    margin-top: 3rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    position: relative;
+  }
+  .stat { text-align: center; }
+  .stat .num {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--accent);
+    font-variant-numeric: tabular-nums;
+  }
+  .stat .label { color: var(--muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
+  .scroll-hint {
+    position: absolute;
+    bottom: 2rem;
+    animation: bounce 2s infinite;
+    color: var(--muted);
+    font-size: 0.875rem;
+  }
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(8px); }
+  }
+
+  /* ─── Sections ─── */
+  .section {
+    min-height: 100vh;
+    padding: 6rem 2rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .section-num {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--accent);
+    margin-bottom: 0.5rem;
+  }
+  .section h2 {
+    font-size: clamp(1.75rem, 4vw, 3rem);
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+  .section .lead {
+    font-size: 1.125rem;
+    color: var(--muted);
+    margin-bottom: 2rem;
+    max-width: 700px;
+  }
+
+  /* ─── Cards ─── */
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+  .card-header {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--accent);
+    margin-bottom: 0.75rem;
+  }
+
+  /* ─── Viz containers ─── */
+  .viz {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin: 2rem 0;
+    overflow: hidden;
+  }
+  .viz svg { width: 100%; display: block; }
+
+  /* ─── Waterfall ─── */
+  .waterfall-container {
+    height: 300px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    background: #0c1222;
+  }
+  .waterfall-url {
+    position: absolute;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.7rem;
+    color: var(--accent);
+    opacity: 0;
+    white-space: nowrap;
+    animation: fall linear infinite;
+  }
+  @keyframes fall {
+    0% { opacity: 0; transform: translateY(-20px); }
+    10% { opacity: 0.7; }
+    90% { opacity: 0.7; }
+    100% { opacity: 0; transform: translateY(320px); }
+  }
+
+  /* ─── Before/After ─── */
+  .before-after {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 1rem;
+    align-items: start;
+  }
+  .arrow-col {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 3rem;
+    font-size: 2rem;
+    color: var(--accent);
+  }
+  pre {
+    background: #0c1222;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 1rem;
+    font-size: 0.75rem;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    overflow-x: auto;
+    line-height: 1.5;
+  }
+  pre .key { color: var(--accent); }
+  pre .str { color: var(--accent2); }
+  pre .num { color: var(--accent4); }
+  pre .comment { color: var(--neutral); }
+
+  /* ─── Two-col layout ─── */
+  .two-col {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+  @media (max-width: 768px) {
+    .two-col, .before-after { grid-template-columns: 1fr; }
+    .arrow-col { transform: rotate(90deg); padding: 0; }
+  }
+
+  /* ─── Stats pills ─── */
+  .pill-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    margin: 1rem 0;
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    border: 1px solid var(--border);
+    background: var(--surface);
+  }
+  .pill .dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  /* ─── Flow diagram ─── */
+  .flow-step {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 0.5rem 0;
+  }
+  .flow-icon {
+    width: 48px; height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+  }
+  .flow-connector {
+    width: 2px;
+    height: 24px;
+    background: var(--border);
+    margin-left: 23px;
+  }
+
+  /* ─── Persona cards ─── */
+  .persona-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+  .persona {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1.25rem;
+    transition: border-color 0.2s;
+  }
+  .persona:hover { border-color: var(--accent); }
+  .persona .icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
+  .persona .name { font-weight: 600; margin-bottom: 0.25rem; }
+  .persona .desc { font-size: 0.8rem; color: var(--muted); }
+
+  /* ─── Footer ─── */
+  .footer {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--muted);
+    font-size: 0.875rem;
+  }
+  .footer a { color: var(--accent); text-decoration: none; }
+
+  /* ─── Intersection observer fade-in ─── */
+  .reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+  }
+  .reveal.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══════════ HERO ═══════════ -->
+<div class="hero">
+  <h1>Structural Intelligence</h1>
+  <p class="subtitle">From Common Crawl to Automotive Market Intelligence</p>
+  <div class="stats-row">
+    <div class="stat"><div class="num" data-count="176324">0</div><div class="label">Nodes</div></div>
+    <div class="stat"><div class="num" data-count="537747">0</div><div class="label">Edges</div></div>
+    <div class="stat"><div class="num" data-count="94671">0</div><div class="label">Signals</div></div>
+    <div class="stat"><div class="num" data-count="1261">0</div><div class="label">Vehicles</div></div>
+  </div>
+  <div class="scroll-hint">Scroll to explore the pipeline ↓</div>
+</div>
+
+<!-- ═══════════ SECTION 1: Common Crawl ═══════════ -->
+<div class="section reveal" id="s1">
+  <div class="section-num">Step 01</div>
+  <h2>Common Crawl Scraping</h2>
+  <p class="lead">Billions of web pages archived by Common Crawl. We query the CC index for automotive domains, download WARC records, and extract clean article text.</p>
+
+  <div class="viz">
+    <div class="card-header">Live URL Waterfall</div>
+    <div class="waterfall-container" id="waterfall"></div>
+  </div>
+
+  <div class="two-col">
+    <div class="card">
+      <div class="card-header">The Funnel</div>
+      <div id="funnel-chart" style="height:200px;"></div>
+    </div>
+    <div class="card">
+      <div class="card-header">Sample Documents</div>
+      <pre><span class="comment">// Real URLs from the dataset</span>
+<span class="str">"autocar.co.uk/car-news/business-electric-vehicles/
+  hydrogen-car-dream-good-dead"</span>
+
+<span class="str">"autocar.co.uk/car-news/business-electric-vehicles/
+  kia-uk-boss-calls-clarity-hybrid-sales-after-2030"</span>
+
+<span class="str">"autocar.co.uk/car-news/business-environment-and-energy/
+  kia-europe-reuse-electric-car-batteries-energy-storage"</span>
+
+<span class="comment">// Crawl: CC-MAIN-2026-04</span></pre>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ SECTION 2: Extraction ═══════════ -->
+<div class="section reveal" id="s2">
+  <div class="section-num">Step 02</div>
+  <h2>Structured Extraction</h2>
+  <p class="lead">NuExtract-2.0 with an ontology-enforced JSON schema transforms raw article text into structured market signals — products, events, companies, and feature-level sentiment.</p>
+
+  <div class="before-after">
+    <div>
+      <div class="card-header">Raw Article Text</div>
+      <pre style="min-height:280px"><span class="comment">// From autocar.co.uk</span>
+
+H2 Mobility has announced it is
+shutting 22 of its hydrogen fuel
+stations in Germany, dealing a
+significant blow to the hydrogen
+car movement in Europe.
+
+The company cited low demand and
+high operational costs. Only about
+100 hydrogen fuel cell vehicles
+are registered in Germany...</pre>
+    </div>
+    <div class="arrow-col">→</div>
+    <div>
+      <div class="card-header">NuExtract JSON Output</div>
+      <pre style="min-height:280px">{
+  <span class="key">"market_relevance"</span>: <span class="str">"high"</span>,
+  <span class="key">"signals"</span>: [{
+    <span class="key">"event_description"</span>:
+      <span class="str">"H2 Mobility announced shutting
+       22 fuel stations in Germany"</span>,
+    <span class="key">"l1_domain"</span>: <span class="str">"C"</span>,
+    <span class="key">"sentiment"</span>: <span class="str">"bearish"</span>,
+    <span class="key">"impact"</span>: <span class="str">"high"</span>,
+    <span class="key">"confidence"</span>: <span class="str">"confirmed"</span>
+  }],
+  <span class="key">"companies"</span>: [{
+    <span class="key">"name"</span>: <span class="str">"H2 Mobility"</span>,
+    <span class="key">"role"</span>: <span class="str">"subject"</span>
+  }]
+}</pre>
+    </div>
+  </div>
+
+  <div class="card" style="margin-top:1.5rem;">
+    <div class="card-header">Signal Taxonomy (8 L1 Domains)</div>
+    <div id="domain-chart" style="height:220px;"></div>
+  </div>
+</div>
+
+<!-- ═══════════ SECTION 3: Normalization ═══════════ -->
+<div class="section reveal" id="s3">
+  <div class="section-num">Step 03</div>
+  <h2>Entity Resolution</h2>
+  <p class="lead">The "Ralph Wiggum" quality loop validates extractions against the NHTSA vPIC database. Fuzzy matching resolves messy text to canonical product IDs through up to 6 depth levels.</p>
+
+  <div class="viz">
+    <div class="card-header">Fuzzy Match Resolution</div>
+    <div id="resolution-viz" style="height:220px;"></div>
+  </div>
+
+  <div class="two-col">
+    <div class="card">
+      <div class="card-header">Resolution Depth Levels</div>
+      <div class="flow-step">
+        <div class="flow-icon" style="background:rgba(129,140,248,0.15); color:var(--accent);">1</div>
+        <div><strong>Make only</strong> <span style="color:var(--muted)">— "Tesla" → confidence 0.2</span></div>
+      </div>
+      <div class="flow-connector"></div>
+      <div class="flow-step">
+        <div class="flow-icon" style="background:rgba(129,140,248,0.2); color:var(--accent);">2</div>
+        <div><strong>+ Model</strong> <span style="color:var(--muted)">— "Model Y" → confidence 0.4</span></div>
+      </div>
+      <div class="flow-connector"></div>
+      <div class="flow-step">
+        <div class="flow-icon" style="background:rgba(129,140,248,0.25); color:var(--accent);">3</div>
+        <div><strong>+ Year</strong> <span style="color:var(--muted)">— "2024" → confidence 0.6</span></div>
+      </div>
+      <div class="flow-connector"></div>
+      <div class="flow-step">
+        <div class="flow-icon" style="background:rgba(129,140,248,0.3); color:var(--accent);">4</div>
+        <div><strong>+ Body Class</strong> <span style="color:var(--muted)">— "SUV" → confidence 0.7</span></div>
+      </div>
+      <div class="flow-connector"></div>
+      <div class="flow-step">
+        <div class="flow-icon" style="background:rgba(129,140,248,0.35); color:var(--accent);">5</div>
+        <div><strong>+ Powertrain</strong> <span style="color:var(--muted)">— "BEV" → confidence 0.8</span></div>
+      </div>
+      <div class="flow-connector"></div>
+      <div class="flow-step">
+        <div class="flow-icon" style="background:rgba(129,140,248,0.4); color:var(--accent);">6</div>
+        <div><strong>+ Trim</strong> <span style="color:var(--muted)">— "Long Range" → confidence 0.95</span></div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">vPIC Feature Groups (160 Elements)</div>
+      <div class="pill-row">
+        <span class="pill"><span class="dot" style="background:#818cf8"></span>Powertrain</span>
+        <span class="pill"><span class="dot" style="background:#34d399"></span>Electrification</span>
+        <span class="pill"><span class="dot" style="background:#f472b6"></span>Safety (Active)</span>
+        <span class="pill"><span class="dot" style="background:#ef4444"></span>Safety (Passive)</span>
+        <span class="pill"><span class="dot" style="background:#fbbf24"></span>Body</span>
+        <span class="pill"><span class="dot" style="background:#38bdf8"></span>Interior</span>
+        <span class="pill"><span class="dot" style="background:#a78bfa"></span>Wheels &amp; Tires</span>
+        <span class="pill"><span class="dot" style="background:#fb923c"></span>Vehicle ID</span>
+        <span class="pill"><span class="dot" style="background:#64748b"></span>Specialty</span>
+      </div>
+      <pre style="margin-top:1rem"><span class="comment">// Example resolution</span>
+<span class="str">"Tesla Model Y Long Range"</span>
+  → make: <span class="str">"Tesla"</span>
+  → model: <span class="str">"Model Y"</span>
+  → year: <span class="num">2024</span>
+  → body: <span class="str">"SUV"</span>
+  → powertrain: <span class="str">"BEV"</span>
+  → id: <span class="key">prd_tesla_model_y_2024</span></pre>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ SECTION 4: Temporal Stitching ═══════════ -->
+<div class="section reveal" id="s4">
+  <div class="section-num">Step 04</div>
+  <h2>Temporal Stitching</h2>
+  <p class="lead">Signals sharing a product are connected with NEXT edges ordered by timestamp, creating event chains that reveal how stories evolve over time.</p>
+
+  <div class="viz">
+    <div class="card-header">Signal Timeline — Event Chain</div>
+    <div id="timeline-viz" style="height:280px;"></div>
+  </div>
+
+  <div class="two-col">
+    <div class="card">
+      <div class="card-header">How Stitching Works</div>
+      <pre><span class="comment">// For each product, order signals by date</span>
+<span class="comment">// Connect consecutive signals with NEXT edges</span>
+<span class="comment">// Max gap: 90 days</span>
+
+sig_001 (<span class="str">"Production starts"</span>, Jan 15)
+  <span class="key">─NEXT→</span>
+sig_002 (<span class="str">"First deliveries"</span>, Mar 22)
+  <span class="key">─NEXT→</span>
+sig_003 (<span class="str">"Recall issued"</span>, May 10)
+  <span class="key">─NEXT→</span>
+sig_004 (<span class="str">"Software update"</span>, Jun 03)</pre>
+    </div>
+    <div class="card">
+      <div class="card-header">Temporal Edge Stats</div>
+      <div style="margin-top:0.5rem;">
+        <div class="stat" style="text-align:left; margin-bottom:1rem;">
+          <div class="num" style="font-size:2rem;">84,981</div>
+          <div class="label">NEXT edges</div>
+        </div>
+        <p style="color:var(--muted); font-size:0.875rem;">
+          Temporal chains let analysts track how market events cascade —
+          from a product launch through reviews, sales data, competitive
+          responses, and eventual recalls or updates.
+        </p>
+        <p style="color:var(--muted); font-size:0.875rem; margin-top:0.5rem;">
+          The longest chains span 4+ years of signal history for
+          established products like the Tesla Model 3 and Toyota RAV4.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ SECTION 5: Hypergraph ═══════════ -->
+<div class="section reveal" id="s5">
+  <div class="section-num">Step 05</div>
+  <h2>Building the Hypergraph</h2>
+  <p class="lead">Products, Features, Actors, Signals, Locations, and Documents are woven together through 13 typed edge roles into a unified knowledge graph — the dual-star topology.</p>
+
+  <div class="viz">
+    <div class="card-header">Dual-Star Graph Assembly</div>
+    <div id="graph-viz" style="height:400px;"></div>
+  </div>
+
+  <div class="two-col">
+    <div class="card">
+      <div class="card-header">Node Breakdown</div>
+      <div id="node-chart" style="height:200px;"></div>
+    </div>
+    <div class="card">
+      <div class="card-header">Edge Role Distribution</div>
+      <div id="edge-chart" style="height:200px;"></div>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ SECTION 6: Structure ═══════════ -->
+<div class="section reveal" id="s6">
+  <div class="section-num">Step 06</div>
+  <h2>Finding Structure</h2>
+  <p class="lead">Four mathematical lenses reveal patterns invisible to keyword search: competitive clusters, regime changes, signal consistency, and perception gaps.</p>
+
+  <div class="two-col">
+    <div class="card">
+      <div class="card-header">Signal Sentiment Distribution</div>
+      <div id="sentiment-chart" style="height:200px;"></div>
+    </div>
+    <div class="card">
+      <div class="card-header">Competition Clusters (COMPETES_WITH)</div>
+      <div id="compete-chart" style="height:200px;"></div>
+    </div>
+  </div>
+
+  <div class="persona-grid">
+    <div class="persona">
+      <div class="icon">📊</div>
+      <div class="name">Spectral Analysis</div>
+      <div class="desc">Community detection via graph Laplacian — finds competitive clusters and market segments</div>
+    </div>
+    <div class="persona">
+      <div class="icon">🔮</div>
+      <div class="name">Topology</div>
+      <div class="desc">Persistent homology detects regime changes — when market structure fundamentally shifts</div>
+    </div>
+    <div class="persona">
+      <div class="icon">🌐</div>
+      <div class="name">Sheaf Cohomology</div>
+      <div class="desc">Signal consistency across regions — where do narratives diverge?</div>
+    </div>
+    <div class="persona">
+      <div class="icon">🔬</div>
+      <div class="name">Functor Analysis</div>
+      <div class="desc">Feature perception vs reality gap — what the specs say vs what signals reveal</div>
+    </div>
+  </div>
+
+  <div class="card" style="margin-top:2rem;">
+    <div class="card-header">What Structural Intelligence Reveals</div>
+    <p style="color:var(--muted); margin-bottom:1rem;">Move beyond keyword search. The hypergraph reveals:</p>
+    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:0.75rem;">
+      <div class="pill" style="border-radius:8px; flex-direction:column; align-items:flex-start; padding:1rem;">
+        <strong>Competitive Blind Spots</strong>
+        <span style="color:var(--muted); font-size:0.8rem;">Products competing on features but not recognized as rivals</span>
+      </div>
+      <div class="pill" style="border-radius:8px; flex-direction:column; align-items:flex-start; padding:1rem;">
+        <strong>Signal Cascades</strong>
+        <span style="color:var(--muted); font-size:0.8rem;">How a supply chain disruption propagates through the market</span>
+      </div>
+      <div class="pill" style="border-radius:8px; flex-direction:column; align-items:flex-start; padding:1rem;">
+        <strong>Regime Detection</strong>
+        <span style="color:var(--muted); font-size:0.8rem;">When market topology changes — new entrants, exits, mergers</span>
+      </div>
+      <div class="pill" style="border-radius:8px; flex-direction:column; align-items:flex-start; padding:1rem;">
+        <strong>Narrative Divergence</strong>
+        <span style="color:var(--muted); font-size:0.8rem;">Where media sentiment conflicts with financial reality</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ FOOTER ═══════════ -->
+<div class="footer">
+  <p>Data: <a href="https://huggingface.co/datasets/cp500/auto-ontology">cp500/auto-ontology</a> · Signals extracted from <a href="https://commoncrawl.org/">Common Crawl</a> (CC-BY-4.0) · Vehicles from <a href="https://vpic.nhtsa.dot.gov/api/">NHTSA vPIC</a></p>
+  <p style="margin-top:0.5rem;">Built as an AWS Automotive Workshop</p>
+</div>
+
+<script>
+// ─── Intersection Observer for fade-in ───
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+}, { threshold: 0.15 });
+document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+// ─── Hero counter animation ───
+function animateCounters() {
+  document.querySelectorAll('[data-count]').forEach(el => {
+    const target = +el.dataset.count;
+    const duration = 2000;
+    const start = performance.now();
+    function tick(now) {
+      const t = Math.min((now - start) / duration, 1);
+      const ease = 1 - Math.pow(1 - t, 3);
+      el.textContent = Math.floor(target * ease).toLocaleString();
+      if (t < 1) requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  });
+}
+setTimeout(animateCounters, 300);
+
+// ─── Waterfall URLs ───
+(function() {
+  const urls = [
+    "autocar.co.uk/car-news/electric-vehicles/...",
+    "motortrend.com/news/2025-model-comparison/...",
+    "electrek.co/2025/01/tesla-model-y-refresh/...",
+    "caranddriver.com/reviews/porsche-macan-ev/...",
+    "reuters.com/business/autos/toyota-ev-plan/...",
+    "insideevs.com/news/rivian-r2-production/...",
+    "autoblog.com/hyundai-ioniq-6-review-2025/...",
+    "greencarreports.com/byd-seal-us-launch/...",
+    "topgear.com/car-news/bmw-neue-klasse-test/...",
+    "thedrive.com/news/lucid-gravity-delivery/...",
+    "carscoops.com/mercedes-eqg-off-road-test/...",
+    "jalopnik.com/gm-ultium-battery-update/...",
+    "motor1.com/nissan-ariya-range-comparison/...",
+    "carbuzz.com/volkswagen-id7-tourer-review/...",
+    "driving.ca/ford-explorer-ev-winter-test/...",
+    "paultan.org/2025/proton-ev-launch-date/...",
+    "autoexpress.co.uk/kia-ev9-gt-review/...",
+  ];
+  const container = document.getElementById('waterfall');
+  if (!container) return;
+  let i = 0;
+  function spawn() {
+    const el = document.createElement('div');
+    el.className = 'waterfall-url';
+    el.textContent = urls[i % urls.length];
+    el.style.left = (Math.random() * 85) + '%';
+    el.style.animationDuration = (3 + Math.random() * 4) + 's';
+    el.style.animationDelay = '0s';
+    container.appendChild(el);
+    el.addEventListener('animationend', () => el.remove());
+    i++;
+  }
+  setInterval(spawn, 400);
+  for (let j = 0; j < 8; j++) setTimeout(spawn, j * 200);
+})();
+
+// ─── Funnel Chart (D3) ───
+(function() {
+  const data = [
+    { label: "Common Crawl Pages", value: 3200000000, color: "#334155" },
+    { label: "Automotive Domains", value: 2400000, color: "#475569" },
+    { label: "High-Relevance Docs", value: 69093, color: "#818cf8" },
+    { label: "Extracted Signals", value: 94671, color: "#34d399" },
+  ];
+  const container = d3.select('#funnel-chart');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 400, h = 200;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+  const maxW = w * 0.9;
+  const barH = 36;
+  const gap = 8;
+  const startY = (h - (data.length * barH + (data.length - 1) * gap)) / 2;
+
+  data.forEach((d, i) => {
+    const ratio = i === 0 ? 1 : 0.25 + 0.75 * (1 - i / data.length);
+    const bw = maxW * ratio;
+    const x = (w - bw) / 2;
+    const y = startY + i * (barH + gap);
+    svg.append('rect').attr('x', x).attr('y', y).attr('width', bw).attr('height', barH)
+      .attr('rx', 6).attr('fill', d.color);
+    svg.append('text').attr('x', w / 2).attr('y', y + barH / 2 + 1)
+      .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+      .attr('fill', '#e2e8f0').attr('font-size', '12px').attr('font-weight', '600')
+      .text(`${d.label}: ${d.value >= 1e9 ? (d.value/1e9).toFixed(1)+'B' : d.value >= 1e6 ? (d.value/1e6).toFixed(1)+'M' : d.value.toLocaleString()}`);
+  });
+})();
+
+// ─── Domain Horizontal Bar Chart ───
+(function() {
+  const data = [
+    { domain: "P — Product", count: 41116, color: "#818cf8" },
+    { domain: "C — Competitive", count: 40065, color: "#34d399" },
+    { domain: "T — Technology", count: 8080, color: "#f472b6" },
+    { domain: "M — Market", count: 3014, color: "#fbbf24" },
+    { domain: "F — Financial", count: 1030, color: "#38bdf8" },
+    { domain: "S — Supply Chain", count: 731, color: "#fb923c" },
+    { domain: "R — Regulatory", count: 387, color: "#a78bfa" },
+    { domain: "ST — Strategic", count: 248, color: "#64748b" },
+  ];
+  const container = d3.select('#domain-chart');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 500, h = 220;
+  const margin = { top: 10, right: 60, bottom: 10, left: 130 };
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+
+  const x = d3.scaleLinear().domain([0, d3.max(data, d => d.count)]).range([0, w - margin.left - margin.right]);
+  const y = d3.scaleBand().domain(data.map(d => d.domain)).range([margin.top, h - margin.bottom]).padding(0.3);
+  const g = svg.append('g').attr('transform', `translate(${margin.left},0)`);
+
+  g.selectAll('rect').data(data).join('rect')
+    .attr('x', 0).attr('y', d => y(d.domain))
+    .attr('width', d => x(d.count)).attr('height', y.bandwidth())
+    .attr('rx', 4).attr('fill', d => d.color);
+
+  g.selectAll('.label').data(data).join('text')
+    .attr('x', -8).attr('y', d => y(d.domain) + y.bandwidth() / 2)
+    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle')
+    .attr('fill', '#e2e8f0').attr('font-size', '11px').text(d => d.domain);
+
+  g.selectAll('.count').data(data).join('text')
+    .attr('x', d => x(d.count) + 6).attr('y', d => y(d.domain) + y.bandwidth() / 2)
+    .attr('dominant-baseline', 'middle')
+    .attr('fill', '#94a3b8').attr('font-size', '10px').text(d => d.count.toLocaleString());
+})();
+
+// ─── Resolution Viz (animated fuzzy match) ───
+(function() {
+  const container = d3.select('#resolution-viz');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 500, h = 220;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+
+  const steps = [
+    { x: 0.08, text: '"Tesla Model Y\nLong Range 2024"', color: '#94a3b8' },
+    { x: 0.35, text: 'Fuzzy Match\nvs vPIC', color: '#818cf8' },
+    { x: 0.65, text: 'Depth 6\nConf: 0.95', color: '#34d399' },
+    { x: 0.92, text: 'prd_tesla_\nmodel_y_2024', color: '#fbbf24' },
+  ];
+  steps.forEach((s, i) => {
+    const cx = s.x * w, cy = h / 2;
+    svg.append('circle').attr('cx', cx).attr('cy', cy).attr('r', 38)
+      .attr('fill', 'none').attr('stroke', s.color).attr('stroke-width', 2);
+    const lines = s.text.split('\n');
+    lines.forEach((line, li) => {
+      svg.append('text').attr('x', cx).attr('y', cy - 6 + li * 16)
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .attr('fill', s.color).attr('font-size', '10px').attr('font-weight', '600')
+        .text(line);
+    });
+    if (i < steps.length - 1) {
+      const nx = steps[i + 1].x * w;
+      svg.append('line')
+        .attr('x1', cx + 42).attr('y1', cy).attr('x2', nx - 42).attr('y2', cy)
+        .attr('stroke', '#334155').attr('stroke-width', 2).attr('marker-end', 'url(#arrow)');
+    }
+  });
+  svg.append('defs').append('marker').attr('id', 'arrow').attr('viewBox', '0 0 10 10')
+    .attr('refX', 9).attr('refY', 5).attr('markerWidth', 6).attr('markerHeight', 6)
+    .attr('orient', 'auto-start-reverse')
+    .append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z').attr('fill', '#334155');
+})();
+
+// ─── Timeline Viz ───
+(function() {
+  const container = d3.select('#timeline-viz');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 500, h = 280;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+
+  const events = [
+    { date: "2024-01", label: "Production\nannouncement", sentiment: "bullish" },
+    { date: "2024-04", label: "Factory\ngroundbreaking", sentiment: "bullish" },
+    { date: "2024-08", label: "Pre-orders\nopen", sentiment: "bullish" },
+    { date: "2024-11", label: "Supply chain\ndelay reported", sentiment: "bearish" },
+    { date: "2025-02", label: "First deliveries\nbegin", sentiment: "bullish" },
+    { date: "2025-06", label: "OTA update\nexpands range", sentiment: "bullish" },
+    { date: "2025-09", label: "Recall for\nbrake sensor", sentiment: "bearish" },
+  ];
+  const colors = { bullish: '#22c55e', bearish: '#ef4444', neutral: '#64748b' };
+  const margin = { left: 40, right: 40, top: 40, bottom: 60 };
+  const x = d3.scaleLinear().domain([0, events.length - 1]).range([margin.left, w - margin.right]);
+  const cy = h / 2 - 10;
+
+  // Timeline line
+  svg.append('line').attr('x1', margin.left).attr('y1', cy).attr('x2', w - margin.right).attr('y2', cy)
+    .attr('stroke', '#334155').attr('stroke-width', 2);
+
+  // NEXT edge labels
+  for (let i = 0; i < events.length - 1; i++) {
+    const mx = (x(i) + x(i + 1)) / 2;
+    svg.append('text').attr('x', mx).attr('y', cy - 24)
+      .attr('text-anchor', 'middle').attr('fill', '#818cf8').attr('font-size', '9px').attr('font-weight', '600')
+      .text('NEXT');
+    svg.append('line').attr('x1', x(i) + 10).attr('y1', cy).attr('x2', x(i + 1) - 10).attr('y2', cy)
+      .attr('stroke', '#818cf8').attr('stroke-width', 1.5)
+      .attr('stroke-dasharray', '4,3');
+  }
+
+  // Event nodes
+  events.forEach((ev, i) => {
+    const cx2 = x(i);
+    svg.append('circle').attr('cx', cx2).attr('cy', cy).attr('r', 8)
+      .attr('fill', colors[ev.sentiment]).attr('stroke', '#0f172a').attr('stroke-width', 2);
+    const lines = ev.label.split('\n');
+    lines.forEach((line, li) => {
+      svg.append('text').attr('x', cx2).attr('y', cy + 24 + li * 14)
+        .attr('text-anchor', 'middle').attr('fill', '#e2e8f0').attr('font-size', '9px')
+        .text(line);
+    });
+    svg.append('text').attr('x', cx2).attr('y', cy + 24 + lines.length * 14 + 4)
+      .attr('text-anchor', 'middle').attr('fill', '#64748b').attr('font-size', '8px')
+      .text(ev.date);
+  });
+
+  // Legend
+  const legend = svg.append('g').attr('transform', `translate(${margin.left}, ${h - 20})`);
+  [['bullish', 'Bullish'], ['bearish', 'Bearish']].forEach(([k, label], i) => {
+    legend.append('circle').attr('cx', i * 90).attr('cy', 0).attr('r', 5).attr('fill', colors[k]);
+    legend.append('text').attr('x', i * 90 + 10).attr('y', 1)
+      .attr('dominant-baseline', 'middle').attr('fill', '#94a3b8').attr('font-size', '10px').text(label);
+  });
+})();
+
+// ─── Graph Force Simulation (Dual-Star) ───
+(function() {
+  const container = d3.select('#graph-viz');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 600, h = 400;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+
+  const types = [
+    { type: 'Product', color: '#818cf8', count: 8, r: 10 },
+    { type: 'Signal', color: '#34d399', count: 30, r: 4 },
+    { type: 'Feature', color: '#f472b6', count: 12, r: 6 },
+    { type: 'Actor', color: '#fbbf24', count: 10, r: 7 },
+    { type: 'Document', color: '#64748b', count: 15, r: 3 },
+  ];
+
+  const nodes = [];
+  const links = [];
+  types.forEach(t => {
+    for (let i = 0; i < t.count; i++) {
+      nodes.push({ id: `${t.type}_${i}`, type: t.type, color: t.color, r: t.r });
+    }
+  });
+
+  // Connect signals to products (ABOUT_PRODUCT)
+  const products = nodes.filter(n => n.type === 'Product');
+  const signals = nodes.filter(n => n.type === 'Signal');
+  const features = nodes.filter(n => n.type === 'Feature');
+  const actors = nodes.filter(n => n.type === 'Actor');
+  const docs = nodes.filter(n => n.type === 'Document');
+
+  signals.forEach(s => {
+    const p = products[Math.floor(Math.random() * products.length)];
+    links.push({ source: s.id, target: p.id, color: '#818cf840' });
+    if (Math.random() > 0.5) {
+      const d = docs[Math.floor(Math.random() * docs.length)];
+      links.push({ source: d.id, target: s.id, color: '#64748b30' });
+    }
+  });
+  products.forEach(p => {
+    const nf = 2 + Math.floor(Math.random() * 3);
+    for (let i = 0; i < nf; i++) {
+      const f = features[Math.floor(Math.random() * features.length)];
+      links.push({ source: p.id, target: f.id, color: '#f472b640' });
+    }
+    const a = actors[Math.floor(Math.random() * actors.length)];
+    links.push({ source: p.id, target: a.id, color: '#fbbf2440' });
+  });
+
+  const sim = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(links).id(d => d.id).distance(50))
+    .force('charge', d3.forceManyBody().strength(-40))
+    .force('center', d3.forceCenter(w / 2, h / 2))
+    .force('collision', d3.forceCollide().radius(d => d.r + 2));
+
+  const link = svg.append('g').selectAll('line').data(links).join('line')
+    .attr('stroke', d => d.color).attr('stroke-width', 1);
+  const node = svg.append('g').selectAll('circle').data(nodes).join('circle')
+    .attr('r', d => d.r).attr('fill', d => d.color).attr('stroke', '#0f172a').attr('stroke-width', 1);
+
+  node.append('title').text(d => d.type);
+
+  sim.on('tick', () => {
+    link.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
+        .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
+    node.attr('cx', d => d.x).attr('cy', d => d.y);
+  });
+
+  // Legend
+  const lg = svg.append('g').attr('transform', `translate(16, ${h - 80})`);
+  types.forEach((t, i) => {
+    lg.append('circle').attr('cx', 0).attr('cy', i * 16).attr('r', 5).attr('fill', t.color);
+    lg.append('text').attr('x', 12).attr('y', i * 16 + 1)
+      .attr('dominant-baseline', 'middle').attr('fill', '#94a3b8').attr('font-size', '10px')
+      .text(t.type);
+  });
+})();
+
+// ─── Node Type Donut ───
+(function() {
+  const data = [
+    { type: 'Signal', count: 94671, color: '#34d399' },
+    { type: 'Document', count: 69093, color: '#64748b' },
+    { type: 'Actor', count: 11189, color: '#fbbf24' },
+    { type: 'Product', count: 1261, color: '#818cf8' },
+    { type: 'Feature', count: 110, color: '#f472b6' },
+  ];
+  const container = d3.select('#node-chart');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 300, h = 200;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+  const r = Math.min(w, h) / 2 - 20;
+  const g = svg.append('g').attr('transform', `translate(${w/2 - 40}, ${h/2})`);
+
+  const pie = d3.pie().value(d => d.count).sort(null);
+  const arc = d3.arc().innerRadius(r * 0.55).outerRadius(r);
+
+  g.selectAll('path').data(pie(data)).join('path')
+    .attr('d', arc).attr('fill', d => d.data.color).attr('stroke', '#1e293b').attr('stroke-width', 2);
+
+  // Legend on right
+  const lg = svg.append('g').attr('transform', `translate(${w/2 + r - 20}, ${h/2 - data.length * 9})`);
+  data.forEach((d, i) => {
+    lg.append('circle').attr('cx', 0).attr('cy', i * 20).attr('r', 4).attr('fill', d.color);
+    lg.append('text').attr('x', 10).attr('y', i * 20 + 1)
+      .attr('dominant-baseline', 'middle').attr('fill', '#e2e8f0').attr('font-size', '10px')
+      .text(`${d.type} (${d.count.toLocaleString()})`);
+  });
+})();
+
+// ─── Edge Role Bar Chart ───
+(function() {
+  const data = [
+    { role: 'AFFECTS', count: 186696 },
+    { role: 'SOURCES', count: 94671 },
+    { role: 'NEXT', count: 84981 },
+    { role: 'EMITS', count: 61151 },
+    { role: 'ABOUT_PRODUCT', count: 55051 },
+    { role: 'HAS_FEATURE', count: 22521 },
+    { role: 'COMPETES_WITH', count: 17835 },
+    { role: 'ABOUT_FEATURE', count: 12297 },
+  ];
+  const container = d3.select('#edge-chart');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 300, h = 200;
+  const margin = { top: 5, right: 50, bottom: 5, left: 100 };
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+
+  const x = d3.scaleLinear().domain([0, d3.max(data, d => d.count)]).range([0, w - margin.left - margin.right]);
+  const y = d3.scaleBand().domain(data.map(d => d.role)).range([margin.top, h - margin.bottom]).padding(0.25);
+  const g = svg.append('g').attr('transform', `translate(${margin.left},0)`);
+
+  const colorScale = d3.scaleOrdinal().domain(data.map(d => d.role))
+    .range(['#818cf8','#34d399','#f472b6','#fbbf24','#38bdf8','#fb923c','#a78bfa','#64748b']);
+
+  g.selectAll('rect').data(data).join('rect')
+    .attr('x', 0).attr('y', d => y(d.role))
+    .attr('width', d => x(d.count)).attr('height', y.bandwidth())
+    .attr('rx', 3).attr('fill', d => colorScale(d.role));
+
+  g.selectAll('.lbl').data(data).join('text')
+    .attr('x', -6).attr('y', d => y(d.role) + y.bandwidth() / 2)
+    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle')
+    .attr('fill', '#e2e8f0').attr('font-size', '9px').text(d => d.role);
+
+  g.selectAll('.cnt').data(data).join('text')
+    .attr('x', d => x(d.count) + 4).attr('y', d => y(d.role) + y.bandwidth() / 2)
+    .attr('dominant-baseline', 'middle')
+    .attr('fill', '#94a3b8').attr('font-size', '8px').text(d => (d.count / 1000).toFixed(0) + 'K');
+})();
+
+// ─── Sentiment Donut ───
+(function() {
+  const data = [
+    { label: 'Neutral', count: 72816, color: '#64748b' },
+    { label: 'Bullish', count: 13902, color: '#22c55e' },
+    { label: 'Bearish', count: 4776, color: '#ef4444' },
+    { label: 'Mixed', count: 3177, color: '#fbbf24' },
+  ];
+  const container = d3.select('#sentiment-chart');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 300, h = 200;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+  const r = Math.min(w, h) / 2 - 20;
+  const g = svg.append('g').attr('transform', `translate(${w/2 - 30}, ${h/2})`);
+
+  const pie = d3.pie().value(d => d.count).sort(null);
+  const arc = d3.arc().innerRadius(r * 0.55).outerRadius(r);
+
+  g.selectAll('path').data(pie(data)).join('path')
+    .attr('d', arc).attr('fill', d => d.data.color).attr('stroke', '#1e293b').attr('stroke-width', 2);
+
+  g.append('text').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+    .attr('fill', '#e2e8f0').attr('font-size', '18px').attr('font-weight', '700').text('94.7K');
+  g.append('text').attr('text-anchor', 'middle').attr('y', 18)
+    .attr('fill', '#94a3b8').attr('font-size', '9px').text('signals');
+
+  const lg = svg.append('g').attr('transform', `translate(${w/2 + r - 10}, ${h/2 - data.length * 10})`);
+  data.forEach((d, i) => {
+    lg.append('circle').attr('cx', 0).attr('cy', i * 22).attr('r', 4).attr('fill', d.color);
+    lg.append('text').attr('x', 10).attr('y', i * 22 + 1)
+      .attr('dominant-baseline', 'middle').attr('fill', '#e2e8f0').attr('font-size', '10px')
+      .text(`${d.label} (${(d.count/1000).toFixed(1)}K)`);
+  });
+})();
+
+// ─── Competition Clusters Mini Graph ───
+(function() {
+  const container = d3.select('#compete-chart');
+  if (container.empty()) return;
+  const w = container.node().clientWidth || 300, h = 200;
+  const svg = container.append('svg').attr('viewBox', `0 0 ${w} ${h}`);
+
+  const clusters = [
+    { name: 'Electric SUV', vehicles: ['Tesla Y', 'ID.4', 'Ioniq 5', 'EV6', 'Ariya'], x: 0.3, y: 0.4 },
+    { name: 'Luxury EV', vehicles: ['Model S', 'EQS', 'i7', 'Air'], x: 0.7, y: 0.35 },
+    { name: 'Pickup', vehicles: ['F-150L', 'Cybertruck', 'R1T', 'Silverado'], x: 0.5, y: 0.75 },
+  ];
+  const colors = ['#818cf8', '#34d399', '#fbbf24'];
+
+  clusters.forEach((c, ci) => {
+    const cx = c.x * w, cy = c.y * h;
+    // Cluster background
+    svg.append('circle').attr('cx', cx).attr('cy', cy)
+      .attr('r', 55).attr('fill', colors[ci]).attr('fill-opacity', 0.07)
+      .attr('stroke', colors[ci]).attr('stroke-opacity', 0.3).attr('stroke-dasharray', '4,3');
+
+    // Vehicle nodes
+    c.vehicles.forEach((v, vi) => {
+      const angle = (vi / c.vehicles.length) * Math.PI * 2 - Math.PI / 2;
+      const vx = cx + Math.cos(angle) * 30;
+      const vy = cy + Math.sin(angle) * 30;
+      svg.append('circle').attr('cx', vx).attr('cy', vy).attr('r', 4)
+        .attr('fill', colors[ci]).attr('stroke', '#0f172a').attr('stroke-width', 1);
+      // Connect to neighbors
+      if (vi > 0) {
+        const pa = ((vi - 1) / c.vehicles.length) * Math.PI * 2 - Math.PI / 2;
+        const px = cx + Math.cos(pa) * 30, py = cy + Math.sin(pa) * 30;
+        svg.append('line').attr('x1', px).attr('y1', py).attr('x2', vx).attr('y2', vy)
+          .attr('stroke', colors[ci]).attr('stroke-opacity', 0.3).attr('stroke-width', 1);
+      }
+    });
+    // Label
+    svg.append('text').attr('x', cx).attr('y', cy - 50)
+      .attr('text-anchor', 'middle').attr('fill', colors[ci]).attr('font-size', '10px').attr('font-weight', '600')
+      .text(c.name);
+  });
+
+  svg.append('text').attr('x', w / 2).attr('y', h - 8)
+    .attr('text-anchor', 'middle').attr('fill', '#64748b').attr('font-size', '9px')
+    .text('17,835 COMPETES_WITH edges');
+})();
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,7 @@
+gradio>=5.0
+strands-agents
+strands-agents-tools
+datasets
+pandas
+pyarrow
+openai