Client-Side In-Browser AI with WebGPU and Transformers.js

Standalone HTML/JS: Running Transformers.js in Browser with WebGPU

<!DOCTYPE html>
<html lang="en">
<head>
    <title>In-Browser WebGPU AI Demo</title>
</head>
<body style="font-family: sans-serif; padding: 20px;">
    <h2>Client-Side Sentiment Analysis (Zero Server Cost!)</h2>
    <textarea id="inputText" rows="3" cols="50">This AI tutorial is extraordinarily clear, fast, and comprehensive!</textarea><br>
    <button id="analyzeBtn">Analyze with Local GPU</button>
    <p id="status">Click button to load model...</p>
    <h3 id="result"></h3>

    <script type="module">
        // Import Transformers.js directly from CDN
        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';

        let classifier = null;

        document.getElementById('analyzeBtn').addEventListener('click', async () => {
            const status = document.getElementById('status');
            const result = document.getElementById('result');
            const text = document.getElementById('inputText').value;

            if (!classifier) {
                status.innerText = "Downloading & caching model in browser VRAM (WebGPU)...";
                // Initialize text classification pipeline with WebGPU acceleration
                classifier = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
                    device: 'webgpu' // Runs on client hardware GPU!
                });
            }

            status.innerText = "Inferring locally...";
            const output = await classifier(text);
            
            result.innerText = "Result: " + output[0].label + " (Confidence: " + (output[0].score * 100).toFixed(2) + "%)";
            status.innerText = "Inference complete on local GPU!";
        });
    </script>
</body>
</html>