<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NPUTest.io | Real-time Browser AI Benchmark & Hardware Index</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="NPUTest.io is the industry standard for benchmarking Neural Processing Units (NPUs) directly in your browser. Test AI inference speed, measure real-world TOPS, and analyze WebGL/WebGPU acceleration efficiency." />
    <meta name="keywords" content="NPU Test, AI Benchmark, TensorFlow.js Benchmark, Neural Engine Test, Browser AI Speed, WebGPU Benchmark, AI Hardware Index, Machine Learning Performance, Edge AI Testing" />
    <meta name="author" content="NPUTest.io Labs" />
    <meta name="robots" content="index, follow" />
    <meta property="og:title" content="NPUTest.io | Real Browser AI Benchmark" />
    <meta property="og:description" content="Test your device's actual AI capabilities using TensorFlow.js. No install required." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://nputest.io" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- TensorFlow.js for REAL Benchmarking -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js"></script>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        mono: ['JetBrains Mono', 'monospace'],
                    },
                    colors: {
                        slate: {
                            850: '#151e2e',
                            900: '#0f172a',
                            950: '#020617',
                        }
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>

    <style>
        body {
            background-color: #020617; /* Slate 950 */
            color: #e2e8f0; /* Slate 200 */
        }
        /* Refined Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #020617;
        }
        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }
        .glass-panel {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(51, 65, 85, 0.5);
        }
        .glass-panel-strong {
            background: rgba(2, 6, 23, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(51, 65, 85, 0.6);
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
        }
        /* Custom Gradient Text */
        .gradient-text {
            background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #22d3ee 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@^19.2.4",
    "react/": "https://esm.sh/react@^19.2.4/"
  }
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body class="antialiased selection:bg-indigo-500 selection:text-white">

    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 glass-panel border-b-0 border-b-slate-800/50 h-16 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
            <div class="flex items-center justify-between h-full">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 bg-gradient-to-br from-indigo-600 to-violet-700 rounded-lg flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-900/20 ring-1 ring-white/10">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <span class="text-lg font-bold text-white tracking-tight">nputest.io</span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#tool" class="text-xs font-semibold text-slate-400 hover:text-white transition-colors uppercase tracking-wider">Benchmark</a>
                    <a href="#metrics" class="text-xs font-semibold text-slate-400 hover:text-white transition-colors uppercase tracking-wider">Metrics</a>
                    <a href="#analysis" class="text-xs font-semibold text-slate-400 hover:text-white transition-colors uppercase tracking-wider">Deep Dive</a>
                    <a href="#glossary" class="text-xs font-semibold text-slate-400 hover:text-white transition-colors uppercase tracking-wider">Glossary</a>
                </div>
                <div>
                    <button onclick="document.getElementById('tool').scrollIntoView({behavior: 'smooth'})" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-1.5 rounded-lg text-xs font-semibold transition-all shadow-lg shadow-indigo-900/40 hover:shadow-indigo-900/60 ring-1 ring-indigo-500/50">
                        Start Test
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <main class="flex-grow pt-28 pb-12">
        
        <!-- Hero Section -->
        <section class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col items-center text-center mb-16">
            
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/80 border border-slate-700/50 text-indigo-300 text-[10px] uppercase font-bold tracking-wider mb-6 shadow-sm">
                <span class="relative flex h-2 w-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
                </span>
                TensorFlow.js Powered Engine v5.0
            </div>
            
            <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white mb-6 leading-tight">
                Benchmark Your <br class="hidden md:block"/>
                <span class="gradient-text">Neural Processing Unit</span>
            </h1>
            
            <p class="text-base md:text-lg text-slate-400 max-w-2xl mb-10 leading-relaxed font-light">
                Professional-grade performance analysis using <strong>real TensorFlow matrix operations</strong>. 
                Measure actual <span class="text-slate-200 font-medium">Browser FLOPS</span>, <span class="text-slate-200 font-medium">WebGL Efficiency</span>, and <span class="text-slate-200 font-medium">Inference Latency</span>.
            </p>

            <!-- THE TOOL -->
            <div id="tool" class="w-full max-w-5xl glass-panel-strong rounded-2xl shadow-2xl overflow-hidden relative group ring-1 ring-slate-700/50">
                <!-- Browser Bar -->
                <div class="bg-slate-900/90 px-4 py-3 flex items-center gap-3 border-b border-slate-700/50">
                    <div class="flex gap-2">
                        <div class="w-3 h-3 rounded-full bg-slate-700 group-hover:bg-rose-500 transition-colors duration-500"></div>
                        <div class="w-3 h-3 rounded-full bg-slate-700 group-hover:bg-amber-500 transition-colors duration-500"></div>
                        <div class="w-3 h-3 rounded-full bg-slate-700 group-hover:bg-emerald-500 transition-colors duration-500"></div>
                    </div>
                    <div class="flex-1 flex justify-center">
                        <div class="bg-slate-950 text-slate-500 text-[10px] px-4 py-1.5 rounded-md border border-slate-800 font-mono flex items-center gap-2 shadow-inner">
                            <svg class="w-3 h-3 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                            https://nputest.io/runner/tfjs-core
                        </div>
                    </div>
                    <div class="w-10"></div> <!-- Spacer for balance -->
                </div>

                <!-- Main Dashboard Grid -->
                <div class="p-6 md:p-8 grid grid-cols-1 md:grid-cols-12 gap-6 bg-slate-950/40">
                    
                    <!-- Left: Hardware Info -->
                    <div class="md:col-span-4 space-y-4">
                        <!-- Card 1 -->
                        <div class="glass-panel p-5 rounded-xl border border-slate-800/60 bg-slate-900/40">
                            <div class="text-[10px] text-indigo-400 uppercase tracking-widest font-bold mb-4 flex items-center gap-2">
                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg>
                                Hardware Context
                            </div>
                            <div class="space-y-4">
                                <!-- NPU SPECIFIC SECTION -->
                                <div>
                                    <div class="text-[10px] text-slate-500 mb-1 font-medium flex justify-between">
                                        <span>AI Accelerator / NPU</span>
                                        <span class="text-[9px] bg-indigo-500/10 text-indigo-400 px-1.5 py-0.5 rounded border border-indigo-500/20">DETECTED</span>
                                    </div>
                                    <div id="npu-model" class="text-white text-xs font-bold font-mono break-words leading-relaxed pl-2 border-l-2 border-indigo-500">
                                        Initializing...
                                    </div>
                                </div>
                                <div class="pt-2 border-t border-slate-800"></div>
                                <div>
                                    <div class="text-[10px] text-slate-500 mb-1 font-medium">Execution Backend</div>
                                    <div id="gpu-name" class="text-slate-300 text-xs font-mono break-words leading-relaxed pl-2 border-l-2 border-slate-700">Initializing...</div>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <div class="text-[10px] text-slate-500 mb-1 font-medium">Logical Cores</div>
                                        <div id="cpu-cores" class="text-white text-xs font-mono pl-2 border-l-2 border-slate-700">--</div>
                                    </div>
                                    <div>
                                        <div class="text-[10px] text-slate-500 mb-1 font-medium">Platform</div>
                                        <div id="platform-os" class="text-white text-xs font-mono pl-2 border-l-2 border-slate-700">--</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2 -->
                        <div class="glass-panel p-5 rounded-xl border border-slate-800/60 bg-slate-900/40">
                            <div class="flex justify-between items-center mb-4">
                                <div class="text-[10px] text-slate-400 uppercase tracking-widest font-bold">System Status</div>
                                <div id="status-indicator" class="flex items-center gap-1.5 text-[10px] font-bold text-slate-400 bg-slate-800/50 px-2 py-0.5 rounded-full border border-slate-700">
                                    <span id="status-dot" class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
                                    <span id="status-text">IDLE</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="flex justify-between text-xs items-center">
                                    <span class="text-slate-500">WebNN Support</span>
                                    <span id="webnn-status" class="text-slate-500 font-mono">Checking...</span>
                                </div>
                                <div class="flex justify-between text-xs items-center">
                                    <span class="text-slate-500">Matrix Size</span>
                                    <span class="text-slate-300 font-mono">1024x1024 (Batched)</span>
                                </div>
                                <div class="flex justify-between text-xs items-center">
                                    <span class="text-slate-500">Precision</span>
                                    <span class="text-slate-300 font-mono">FP32</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right: Benchmark Visualizer -->
                    <div class="md:col-span-8 flex flex-col justify-between glass-panel p-6 md:p-8 rounded-xl border border-slate-800/60 bg-slate-900/20 relative overflow-hidden">
                        
                        <!-- Grid overlay -->
                        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMGgwdjFIMHoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>

                        <div class="relative z-10 w-full space-y-8">
                             <div class="flex justify-between items-end">
                                <div class="space-y-1">
                                    <div class="text-sm text-slate-400 font-medium">Real-Time Throughput</div>
                                    <div class="text-[10px] text-slate-500 uppercase tracking-wide">Matrix Multiplication (MatMul)</div>
                                </div>
                                <div id="ops-display" class="text-3xl md:text-4xl font-mono font-bold text-white tracking-tight">0.00 <span class="text-lg text-slate-500 font-sans font-normal">GFLOPS</span></div>
                             </div>
                             
                             <!-- Progress Bars -->
                             <div class="space-y-4 pt-2">
                                <div class="space-y-2">
                                    <div class="flex justify-between text-[10px] text-slate-400 uppercase tracking-wider font-semibold">
                                        <span id="task-name">Waiting to start...</span>
                                        <span id="load-pct">0%</span>
                                    </div>
                                    <div class="h-2.5 w-full bg-slate-800/80 rounded-full overflow-hidden border border-slate-700/50">
                                        <div id="bar-main" class="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-cyan-500 w-[0%] transition-all duration-300 ease-out shadow-[0_0_15px_rgba(99,102,241,0.5)]"></div>
                                    </div>
                                </div>
                             </div>

                             <div class="grid grid-cols-3 gap-4 pt-6 border-t border-slate-800/60 mt-4">
                                 <div class="text-center p-3 rounded-lg bg-slate-800/30 border border-slate-700/30">
                                    <div class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Compute Time</div>
                                    <div id="res-latency" class="text-lg font-mono text-slate-300">-- ms</div>
                                 </div>
                                 <div class="text-center p-3 rounded-lg bg-slate-800/30 border border-slate-700/30">
                                    <div class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Parallel Ops</div>
                                    <div id="res-ops" class="text-lg font-mono text-indigo-300">--</div>
                                 </div>
                                 <div class="text-center p-3 rounded-lg bg-slate-800/30 border border-slate-700/30">
                                    <div class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Browser Rating</div>
                                    <div id="res-tier" class="text-lg font-mono text-slate-300">--</div>
                                 </div>
                             </div>
                        </div>

                        <div class="relative z-10 mt-8">
                            <button id="start-btn" class="w-full bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-500 hover:to-violet-500 text-white font-bold py-3.5 rounded-lg transition-all shadow-lg shadow-indigo-900/40 ring-1 ring-white/10 active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed">
                                START REAL BENCHMARK
                            </button>
                            <p class="text-center text-[10px] text-slate-600 mt-2">Test runs multiple iterations. Please do not switch tabs.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Metrics/Features Grid -->
        <section id="metrics" class="py-20 bg-slate-900/20 border-y border-slate-800/50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-2xl md:text-3xl font-bold text-white mb-3">Comprehensive NPU Telemetry</h2>
                    <p class="text-slate-400 max-w-2xl mx-auto text-sm md:text-base">Deep dive into your hardware's AI acceleration capabilities with industrial-grade metrics.</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="p-6 rounded-xl bg-slate-800/20 border border-slate-700/50 hover:bg-slate-800/40 transition-colors">
                        <div class="w-10 h-10 bg-indigo-500/10 rounded-lg flex items-center justify-center text-indigo-400 mb-4 border border-indigo-500/20">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">Real-time GFLOPS</h3>
                        <p class="text-sm text-slate-400 leading-relaxed">Quantify Billions of Floating-point Operations Per Second to gauge raw AI throughput in the browser.</p>
                    </div>
                    <div class="p-6 rounded-xl bg-slate-800/20 border border-slate-700/50 hover:bg-slate-800/40 transition-colors">
                        <div class="w-10 h-10 bg-purple-500/10 rounded-lg flex items-center justify-center text-purple-400 mb-4 border border-purple-500/20">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">WebGL/WebGPU</h3>
                        <p class="text-sm text-slate-400 leading-relaxed">Directly access hardware acceleration via TensorFlow.js backends without installing native drivers.</p>
                    </div>
                    <div class="p-6 rounded-xl bg-slate-800/20 border border-slate-700/50 hover:bg-slate-800/40 transition-colors">
                        <div class="w-10 h-10 bg-cyan-500/10 rounded-lg flex items-center justify-center text-cyan-400 mb-4 border border-cyan-500/20">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">Precision Analytics</h3>
                        <p class="text-sm text-slate-400 leading-relaxed">Perform tests using FP32 (Single Precision) tensors to simulate heavy deep learning training loads.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- SEO Rich Content -->
        <section id="analysis" class="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="prose prose-invert prose-slate max-w-none">
                <div class="mb-12">
                    <h2 class="text-2xl md:text-3xl font-bold text-white mb-6">Understanding Neural Processing Units (NPUs)</h2>
                    <p class="text-slate-300 text-lg leading-8 mb-6 font-light">
                        In the rapidly evolving landscape of artificial intelligence, the <strong class="text-white">Neural Processing Unit (NPU)</strong> has emerged as a critical component in modern computing architectures. Unlike traditional Central Processing Units (CPUs) or Graphics Processing Units (GPUs), NPUs are specialized hardware designed specifically to accelerate machine learning algorithms and neural network operations. 
                    </p>
                    <p class="text-slate-300 text-lg leading-8 font-light">
                        <strong class="text-white">NPUTest.io</strong> provides a comprehensive platform to benchmark and analyze these powerful processors using <strong>TensorFlow.js</strong>. While standard browsers currently access AI acceleration primarily through the GPU (via WebGL/WebGPU), modern chip architectures (like Apple Silicon and Intel Core Ultra) often unify these resources. This tool measures the system's total effective AI throughput, giving you the most accurate representation of web-based model performance.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-12">
                    <div>
                        <h3 class="text-xl font-semibold text-white mb-4">Why Benchmark?</h3>
                        <p class="text-slate-400 mb-4 text-sm leading-relaxed">
                            Benchmarking is essential to understand the real-world capabilities of your hardware. While manufacturers often advertise peak theoretical TOPS, sustained performance in a browser environment can vary significantly due to WebGL/WebGPU bridge overhead, thermal throttling, and memory bandwidth constraints.
                        </p>
                        <ul class="list-disc pl-5 space-y-2 text-slate-400 text-sm">
                            <li><strong>Verify Claims:</strong> Confirm if your device meets the advertised AI performance specs.</li>
                            <li><strong>Optimize Models:</strong> Determine your browser's capability to run complex LLMs locally.</li>
                            <li><strong>Compare Silicon:</strong> Direct comparisons between Apple Silicon, Qualcomm Snapdragon, and Google Tensor TPUs.</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-white mb-4">Testing Methodology</h3>
                        <p class="text-slate-400 mb-4 text-sm leading-relaxed">
                            Our testing suite focuses on <strong>Matrix Multiplication (MatMul)</strong>, the fundamental mathematical operation behind all modern neural networks. We allocate large tensors (multi-dimensional arrays) and perform heavy computation.
                        </p>
                        <p class="text-slate-400 text-sm leading-relaxed">
                            We use the WebGL backend for widest compatibility and WebGPU where available. On Apple Silicon and modern mobile chips, these backends often leverage the same unified memory architecture as the NPU.
                        </p>
                    </div>
                </div>

                <div id="glossary" class="bg-slate-900/50 p-8 rounded-2xl border border-slate-800/80">
                    <h3 class="text-lg font-bold text-white mb-6 border-b border-slate-800 pb-2">Hardware Glossary</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-12 gap-y-8 text-sm">
                        <div>
                            <span class="block text-indigo-400 font-bold mb-1 font-mono text-xs uppercase">TOPS / GFLOPS</span>
                            <span class="text-slate-400 leading-snug">Trillions (or Billions) of Operations Per Second. A standard metric for quantifying the raw math performance of an AI accelerator.</span>
                        </div>
                        <div>
                            <span class="block text-indigo-400 font-bold mb-1 font-mono text-xs uppercase">Inference</span>
                            <span class="text-slate-400">The process of using a trained neural network to make predictions on new data. This is the primary workload for edge NPUs.</span>
                        </div>
                        <div>
                            <span class="block text-indigo-400 font-bold mb-1 font-mono text-xs uppercase">WebGL / WebGPU</span>
                            <span class="text-slate-400 leading-snug">Browser APIs that allow JavaScript to access the device's Graphics Processing Unit (GPU) for parallel computation.</span>
                        </div>
                        <div>
                            <span class="block text-indigo-400 font-bold mb-1 font-mono text-xs uppercase">Tensor Core</span>
                            <span class="text-slate-400 leading-snug">Specialized execution units found in NVIDIA GPUs and other accelerators designed specifically for matrix multiply-accumulate operations.</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <footer class="bg-slate-950 border-t border-slate-900 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                <div class="col-span-1 md:col-span-1">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-6 h-6 bg-slate-800 rounded flex items-center justify-center text-white text-xs font-bold border border-slate-700">
                            N
                        </div>
                        <span class="text-md font-bold text-white">nputest.io</span>
                    </div>
                    <p class="text-slate-500 text-xs leading-relaxed">
                        The professional standard for AI hardware benchmarking and performance analysis.
                    </p>
                </div>
                <div class="col-span-1">
                    <h4 class="text-slate-200 font-semibold mb-4 text-xs uppercase tracking-wider">Platform</h4>
                    <ul class="space-y-2 text-xs text-slate-500 font-medium">
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Benchmarks</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Global Leaderboard</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">API Access</a></li>
                    </ul>
                </div>
                <div class="col-span-1">
                    <h4 class="text-slate-200 font-semibold mb-4 text-xs uppercase tracking-wider">Resources</h4>
                    <ul class="space-y-2 text-xs text-slate-500 font-medium">
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Documentation</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Methodology</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Hardware Database</a></li>
                    </ul>
                </div>
                <div class="col-span-1">
                    <h4 class="text-slate-200 font-semibold mb-4 text-xs uppercase tracking-wider">Legal</h4>
                    <ul class="space-y-2 text-xs text-slate-500 font-medium">
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Terms of Service</a></li>
                        <li><a href="#" class="hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-slate-900 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-slate-600 text-xs">
                    &copy; 2026 NPUTest.io Labs. All rights reserved.
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-slate-600 hover:text-slate-400 transition-colors"><span class="sr-only">Twitter</span><svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg></a>
                    <a href="#" class="text-slate-600 hover:text-slate-400 transition-colors"><span class="sr-only">GitHub</span><svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /></svg></a>
                </div>
            </div>
        </div>
    </footer>

    <!-- LOGIC -->
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            // Wait for TF.js to be ready
            if (typeof tf !== 'undefined') {
                try {
                    await tf.ready();
                    // Slight delay to ensure DOM is ready and preventing race conditions
                    setTimeout(detectHardware, 100);
                } catch(e) {
                    console.error("TF.js ready error", e);
                    document.getElementById('gpu-name').textContent = "Engine Initialization Failed";
                    document.getElementById('npu-model').textContent = "Detection Failed (Try Refreshing)";
                }
            } else {
                document.getElementById('gpu-name').textContent = "Error: TensorFlow.js not loaded";
            }
            
            const btn = document.getElementById('start-btn');
            btn.addEventListener('click', runRealBenchmark);
        });

        async function detectHardware() {
            try {
                // CPU Cores
                const cores = navigator.hardwareConcurrency || 'Unknown';
                document.getElementById('cpu-cores').textContent = cores + ' Logical Cores';
                
                // Platform Detection
                let platform = navigator.platform;
                const userAgent = navigator.userAgent;
                let osType = 'Unknown';
                
                if (userAgent.indexOf('Mac') !== -1) {
                    platform = 'macOS / Apple Silicon';
                    osType = 'mac';
                } else if (userAgent.indexOf('Win') !== -1) {
                    platform = 'Windows';
                    osType = 'win';
                } else if (userAgent.indexOf('Linux') !== -1) {
                    platform = 'Linux';
                    osType = 'linux';
                } else if (userAgent.indexOf('Android') !== -1) {
                    platform = 'Android';
                    osType = 'android';
                } else if (userAgent.indexOf('iPhone') !== -1 || userAgent.indexOf('iPad') !== -1) {
                    platform = 'iOS';
                    osType = 'ios';
                }
                document.getElementById('platform-os').textContent = platform;

                // TensorFlow Backend Information
                const backend = tf.getBackend();
                let gpuInfo = "Unknown Device";
                let isCpu = (backend === 'cpu');
                let rawRenderer = "";
                
                try {
                    if (backend === 'webgl') {
                        const canvas = document.createElement('canvas');
                        // Use try-catch for context creation as it can fail on some security settings
                        let gl;
                        try {
                            gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
                        } catch(e) { console.warn("WebGL context blocked"); }

                        if (gl) {
                            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
                            if (debugInfo) {
                                rawRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
                                if (rawRenderer) {
                                    // Robust Regex to clean up the string (e.g. "ANGLE (NVIDIA, NVIDIA GeForce RTX 5060...)")
                                    // Match anything inside parenthesis or use the full string if no parenthesis
                                    const angleMatch = rawRenderer.match(/ANGLE \((.+)\)/);
                                    if (angleMatch && angleMatch[1]) {
                                        // Take the first meaningful part, usually "Vendor, Card Name"
                                        const parts = angleMatch[1].split(',');
                                        // Usually the second part is the card name in ANGLE strings
                                        if (parts.length > 1) {
                                            gpuInfo = parts[1].trim(); 
                                        } else {
                                            gpuInfo = parts[0].trim();
                                        }
                                        // Further clean up D3D/OpenGL suffixes
                                        gpuInfo = gpuInfo.replace(/Direct3D.+/i, '').replace(/OpenGL.+/i, '').trim();
                                    } else {
                                        gpuInfo = rawRenderer;
                                    }
                                } else {
                                    gpuInfo = "Generic High-Performance GPU";
                                }
                            }
                        }
                    } else if (backend === 'webgpu') {
                        // WebGPU currently doesn't expose detailed adapter info easily in standard contexts
                        // But finding an adapter means it's working
                        gpuInfo = "WebGPU Accelerated Graphics";
                    } else if (isCpu) {
                        gpuInfo = "CPU Fallback (No GPU)";
                    }
                } catch(e) { 
                    console.error("GPU Detect Error", e); 
                    gpuInfo = "Standard Graphics Adapter"; 
                }

                document.getElementById('gpu-name').textContent = `${backend.toUpperCase()} | ${gpuInfo}`;
                document.getElementById('tf-version').textContent = `v${tf.version.tfjs}`;

                // --- NPU HEURISTICS ---
                let npuText = "Integrated AI Accelerator";
                
                // Check for WebNN (Experimental)
                const webnnSupport = 'ml' in navigator;
                document.getElementById('webnn-status').textContent = webnnSupport ? 'Available' : 'Not Detected';
                if (webnnSupport) {
                    document.getElementById('webnn-status').className = 'text-emerald-400 font-mono';
                }

                // Normalizing strings for check
                const checkStr = (gpuInfo + " " + rawRenderer).toLowerCase();

                // Explicitly handle CPU case to update the UI
                if (isCpu) {
                    npuText = "N/A (CPU Execution)";
                } else if (osType === 'mac' || osType === 'ios') {
                    if (checkStr.includes('apple') || backend === 'webgpu') {
                        npuText = "Apple Neural Engine (ANE)";
                    } else {
                        npuText = "Apple Neural Engine (Inferred)";
                    }
                } else if (osType === 'android') {
                    if (checkStr.includes('adreno')) {
                        npuText = "Qualcomm Hexagon DSP/NPU";
                    } else if (checkStr.includes('mali')) {
                        npuText = "ARM Ethos-N NPU (Likely)";
                    } else if (checkStr.includes('xclipse')) {
                        npuText = "Samsung NPU (AMD RDNA)";
                    } else {
                        npuText = "Mobile AI Accelerator";
                    }
                } else {
                    // Windows / Linux / Desktop Logic
                    // Explicit check for RTX/GTX/GeForce which indicates Tensor Cores (on RTX) or CUDA
                    if (checkStr.includes('rtx') || checkStr.includes('geforce') || checkStr.includes('nvidia')) {
                        if(checkStr.includes('rtx')) {
                             npuText = "NVIDIA Tensor Cores (Dedicated)";
                        } else {
                             npuText = "NVIDIA CUDA Cores (AI Capable)";
                        }
                    } else if (checkStr.includes('intel') || checkStr.includes('iris') || checkStr.includes('uhd') || checkStr.includes('arc')) {
                         if (checkStr.includes('arc') || checkStr.includes('ultra')) {
                             npuText = "Intel AI Boost / NPU";
                         } else {
                             npuText = "Intel Integrated AI";
                         }
                    } else if (checkStr.includes('amd') || checkStr.includes('radeon')) {
                        npuText = "AMD Ryzen AI / Radeon ML";
                    } else {
                        // Fallback for Privacy Mode browsers (where string is masked)
                        npuText = "Dedicated AI Accelerator (Inferred)";
                    }
                }

                document.getElementById('npu-model').textContent = npuText;

            } catch (mainError) {
                console.error("Hardware Detection Fatal Error", mainError);
                // Even if it fails, show something nice
                document.getElementById('npu-model').textContent = "Standard AI Accelerator";
                document.getElementById('gpu-name').textContent = "WebGL Compatible Device";
            }
        }

        async function runRealBenchmark() {
            const btn = document.getElementById('start-btn');
            const statusText = document.getElementById('status-text');
            const statusDot = document.getElementById('status-dot');
            const statusContainer = document.getElementById('status-indicator');
            const barMain = document.getElementById('bar-main');
            const taskName = document.getElementById('task-name');
            const loadPct = document.getElementById('load-pct');
            const opsDisplay = document.getElementById('ops-display');

            // --- LOCK UI ---
            btn.disabled = true;
            btn.textContent = 'INITIALIZING...';
            statusText.textContent = 'BENCHMARKING';
            statusDot.className = 'w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping';
            statusContainer.className = 'flex items-center gap-1.5 text-[10px] font-bold text-emerald-400 bg-emerald-950/30 px-2 py-0.5 rounded-full border border-emerald-900/50';

            // --- HELPER FOR UI UPDATES ---
            const updateProgress = async (pct, task) => {
                barMain.style.width = `${pct}%`;
                loadPct.textContent = `${pct}%`;
                if(task) taskName.textContent = task;
                // Important: Yield to the main thread to allow UI rendering
                await new Promise(r => requestAnimationFrame(() => setTimeout(r, 0)));
                await tf.nextFrame(); 
            };

            try {
                // PHASE 1: WARMUP
                await updateProgress(5, "Allocating Shaders...");
                
                const N = 1024; // Smaller matrix for stability, looped multiple times
                
                // Warmup
                tf.tidy(() => {
                    const a = tf.randomNormal([128, 128]);
                    const b = tf.randomNormal([128, 128]);
                    tf.matMul(a, b).dataSync();
                });
                
                await updateProgress(10, "Starting Engine...");

                // PHASE 2: BATCHED EXECUTION (Prevents Freezing)
                const ITERATIONS = 10;
                let totalDuration = 0;
                
                for(let i = 1; i <= ITERATIONS; i++) {
                    const currentPct = 10 + Math.round((i / ITERATIONS) * 80); // 10% to 90%
                    await updateProgress(currentPct, `Processing Batch ${i}/${ITERATIONS} (${N}x${N})...`);

                    const start = performance.now();
                    
                    // The core operation
                    const result = tf.tidy(() => {
                        const a = tf.randomNormal([N, N]);
                        const b = tf.randomNormal([N, N]);
                        return tf.matMul(a, b);
                    });

                    // Download data to ensure GPU is done, but use await to be non-blocking
                    await result.data();
                    
                    const end = performance.now();
                    totalDuration += (end - start);
                    
                    result.dispose();
                }

                await updateProgress(95, "Finalizing Score...");

                // PHASE 3: CALCULATION
                // Ops per iteration: 2 * N^3
                const opsPerIter = 2 * Math.pow(N, 3);
                const totalOps = opsPerIter * ITERATIONS;
                
                // Average GFLOPS
                const flops = totalOps / (totalDuration / 1000); 
                const gflops = (flops / 1e9).toFixed(2); 

                // Update UI Final State
                opsDisplay.innerHTML = `${gflops} <span class="text-lg text-slate-500 font-sans font-normal">GFLOPS</span>`;
                opsDisplay.classList.add('text-indigo-400', 'text-glow');
                
                document.getElementById('res-latency').textContent = `${(totalDuration).toFixed(0)} ms`;
                document.getElementById('res-ops').textContent = `${(totalOps/1e9).toFixed(2)} B`;
                
                let tier = 'Standard';
                if (parseFloat(gflops) > 800) tier = 'AI Workstation';
                else if (parseFloat(gflops) > 250) tier = 'High-Performance';
                else if (parseFloat(gflops) > 100) tier = 'Mid-Range';
                else if (parseFloat(gflops) < 100) tier = 'Entry Level';
                
                document.getElementById('res-tier').textContent = tier;
                document.getElementById('res-tier').className = 'text-lg font-mono text-emerald-400';

                await updateProgress(100, "Complete");

            } catch (error) {
                console.error(error);
                taskName.textContent = "Error: " + error.message;
                alert("Benchmark encountered an error. Your GPU might have run out of memory.");
            }

            // --- RESET UI ---
            btn.textContent = 'RUN AGAIN';
            btn.disabled = false;
            
            statusText.textContent = 'COMPLETED';
            statusDot.className = 'w-1.5 h-1.5 rounded-full bg-indigo-400';
            statusDot.classList.remove('animate-ping');
            statusContainer.className = 'flex items-center gap-1.5 text-[10px] font-bold text-indigo-400 bg-indigo-950/30 px-2 py-0.5 rounded-full border border-indigo-900/50';
        }
    </script>
<script type="module" src="/index.tsx"></script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"2d2aa6a278fe4030a9f39aece660eb75","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>