Spaces:

LukasBe
/

voice-command

Running

File size: 56,213 Bytes

c58894c

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neural Audio Command Recognizer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        
        .command-card {
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }
        
        .command-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .waveform {
            height: 60px;
            position: relative;
            overflow: hidden;
        }
        
        .confidence-meter {
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, #4ade80, #3b82f6);
            transition: width 0.5s ease;
        }
        
        .glow {
            box-shadow: 0 0 15px rgba(167, 119, 227, 0.5);
        }
        
        .spectrogram {
            height: 120px;
            background: #1f2937;
            border-radius: 6px;
            margin-top: 10px;
        }
        
        .progress-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #a777e3, #6e8efb);
        }
        
        .neuron {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            margin: 0 2px;
            transition: all 0.3s;
        }
        
        .neuron.active {
            transform: scale(1.3);
            box-shadow: 0 0 10px rgba(167, 119, 227, 0.7);
        }
        
        .network-visualization {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            margin: 20px 0;
            position: relative;
        }
        
        .connection {
            position: absolute;
            background: rgba(110, 142, 251, 0.4);
            transform-origin: left center;
            height: 2px;
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- Header -->
        <header class="flex justify-between items-center mb-8">
            <div class="flex items-center space-x-2">
                <div class="gradient-bg rounded-full w-10 h-10 flex items-center justify-center">
                    <i class="fas fa-robot text-xl"></i>
                </div>
                <h1 class="text-2xl font-bold">Neural Audio Command Recognizer</h1>
            </div>
            <div class="flex space-x-4">
                <button id="clearStorageBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg transition">
                    <i class="fas fa-trash-alt mr-2"></i>Clear Data
                </button>
            </div>
        </header>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Panel - Command List -->
            <div class="lg:col-span-1 bg-gray-800 rounded-xl p-6">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-list-ul mr-2"></i> Your Commands
                </h2>
                <div id="commandList" class="space-y-4">
                    <!-- Commands will be dynamically added here -->
                </div>
                
                <div class="mt-6">
                    <h3 class="font-medium mb-2">Add New Command</h3>
                    <div class="flex">
                        <input id="newCommandInput" type="text" placeholder="Command word" class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:border-purple-500">
                        <button id="addCommandBtn" class="gradient-bg hover:opacity-90 px-4 py-2 rounded-r-lg font-medium transition">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
                
                <div class="mt-6 bg-gray-700 rounded-lg p-4">
                    <h3 class="font-medium mb-2">Model Status</h3>
                    <div class="flex items-center mb-2">
                        <span class="text-sm">Training Progress:</span>
                        <span id="trainingProgressText" class="ml-auto text-sm">No data</span>
                    </div>
                    <div class="progress-bar">
                        <div id="trainingProgressBar" class="progress-fill" style="width: 0%"></div>
                    </div>
                </div>
            </div>
            
            <!-- Center Panel - Training Interface -->
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-gray-800 rounded-xl p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-microphone-alt mr-2"></i> Training Mode
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div id="currentCommandDisplay" class="bg-gray-700 rounded-lg p-4">
                            <h3 class="font-medium mb-2">Training Command</h3>
                            <div id="currentCommand" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
                                None selected
                            </div>
                        </div>
                        <div class="bg-gray-700 rounded-lg p-4">
                            <h3 class="font-medium mb-2">Training Samples</h3>
                            <div id="sampleCount" class="text-2xl font-bold">0</div>
                            <div class="text-sm text-gray-300">Minimum 5 samples needed</div>
                        </div>
                    </div>
                    
                    <div id="audioVisualization" class="spectrogram relative">
                        <canvas id="waveformCanvas" class="absolute inset-0 w-full h-full"></canvas>
                        <canvas id="spectrogramCanvas" class="absolute inset-0 w-full h-full"></canvas>
                    </div>
                    
                    <div class="network-visualization" id="networkVisualization">
                        <!-- Network visualization will be dynamically generated here -->
                    </div>
                    
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
                        <button id="recordTrainBtn" class="gradient-bg hover:opacity-90 flex-1 py-3 rounded-lg font-medium transition flex items-center justify-center">
                            <i class="fas fa-microphone mr-2"></i> Record Sample
                        </button>
                        <button id="trainBtn" class="bg-gray-700 hover:bg-gray-600 flex-1 py-3 rounded-lg font-medium transition flex items-center justify-center">
                            <i class="fas fa-brain mr-2"></i> Train Model
                        </button>
                        <button id="testBtn" class="border border-purple-500 text-purple-400 hover:bg-purple-900 hover:bg-opacity-30 flex-1 py-3 rounded-lg font-medium transition flex items-center justify-center">
                            <i class="fas fa-vial mr-2"></i> Test Model
                        </button>
                    </div>
                </div>
                
                <!-- Recognition Panel -->
                <div class="bg-gray-800 rounded-xl p-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-robot mr-2"></i> Recognition Mode
                    </h2>
                    
                    <div id="predictionResult" class="bg-gray-700 rounded-lg p-4 mb-4">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-medium">Predicted Command</h3>
                            <div id="predictionConfidence" class="text-sm font-medium">--% confidence</div>
                        </div>
                        <div id="recognizedCommand" class="text-3xl font-bold text-center py-4">
                            Waiting for command...
                        </div>
                        <div class="progress-bar">
                            <div id="confidenceBar" class="progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <button id="recordPredictBtn" class="gradient-bg hover:opacity-90 flex-1 py-3 rounded-lg font-medium transition flex items-center justify-center pulse-animation">
                            <i class="fas fa-microphone mr-2"></i> Record Command
                        </button>
                        <button id="continuousBtn" class="bg-gray-700 hover:bg-gray-600 flex-1 py-3 rounded-lg font-medium transition flex items-center justify-center">
                            <i class="fas fa-circle-notch mr-2"></i> Continuous Mode
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Neural Network Implementation
        class NeuralNetwork {
            constructor(inputSize, hiddenSize, outputSize) {
                this.inputSize = inputSize;
                this.hiddenSize = hiddenSize;
                this.outputSize = outputSize;
                
                // Initialize weights and biases
                const xavierInit = (size) => Math.sqrt(1.0 / size[0]);
                
                // Input to hidden layer
                this.weights1 = Array(hiddenSize).fill().map(() => 
                    Array(inputSize).fill().map(() => xavierInit([inputSize, hiddenSize]) * (Math.random() * 2 - 1))
                );
                this.bias1 = Array(hiddenSize).fill(0.1);
                
                // Hidden to output layer
                this.weights2 = Array(outputSize).fill().map(() => 
                    Array(hiddenSize).fill().map(() => xavierInit([hiddenSize, outputSize]) * (Math.random() * 2 - 1))
                );
                this.bias2 = Array(outputSize).fill(0.1);
                
                this.learningRate = 0.01;
            }
            
            // Sigmoid activation function
            sigmoid(x) {
                return 1 / (1 + Math.exp(-x));
            }
            
            // Derivative of sigmoid
            sigmoidDerivative(x) {
                const s = this.sigmoid(x);
                return s * (1 - s);
            }
            
            // Forward propagation
            forward(input) {
                // Input to hidden
                const hiddenInput = Array(this.hiddenSize).fill(0);
                for (let i = 0; i < this.hiddenSize; i++) {
                    for (let j = 0; j < this.inputSize; j++) {
                        hiddenInput[i] += this.weights1[i][j] * input[j];
                    }
                    hiddenInput[i] += this.bias1[i];
                    hiddenInput[i] = this.sigmoid(hiddenInput[i]);
                }
                
                // Hidden to output
                const output = Array(this.outputSize).fill(0);
                for (let i = 0; i < this.outputSize; i++) {
                    for (let j = 0; j < this.hiddenSize; j++) {
                        output[i] += this.weights2[i][j] * hiddenInput[j];
                    }
                    output[i] += this.bias2[i];
                    output[i] = this.sigmoid(output[i]);
                }
                
                return {
                    output,
                    hidden: hiddenInput
                };
            }
            
            // Train the network with one sample
            train(input, target) {
                // Forward pass
                const { output, hidden } = this.forward(input);
                
                // Backpropagation
                // Output layer error
                const outputErrors = Array(this.outputSize).fill(0);
                const outputDeltas = Array(this.outputSize).fill(0);
                for (let i = 0; i < this.outputSize; i++) {
                    outputErrors[i] = target[i] - output[i];
                    outputDeltas[i] = outputErrors[i] * this.sigmoidDerivative(output[i]);
                }
                
                // Hidden layer error
                const hiddenErrors = Array(this.hiddenSize).fill(0);
                const hiddenDeltas = Array(this.hiddenSize).fill(0);
                for (let i = 0; i < this.hiddenSize; i++) {
                    for (let j = 0; j < this.outputSize; j++) {
                        hiddenErrors[i] += outputDeltas[j] * this.weights2[j][i];
                    }
                    hiddenDeltas[i] = hiddenErrors[i] * this.sigmoidDerivative(hidden[i]);
                }
                
                // Update weights and biases
                for (let i = 0; i < this.outputSize; i++) {
                    for (let j = 0; j < this.hiddenSize; j++) {
                        this.weights2[i][j] += this.learningRate * outputDeltas[i] * hidden[j];
                    }
                    this.bias2[i] += this.learningRate * outputDeltas[i];
                }
                
                for (let i = 0; i < this.hiddenSize; i++) {
                    for (let j = 0; j < this.inputSize; j++) {
                        this.weights1[i][j] += this.learningRate * hiddenDeltas[i] * input[j];
                    }
                    this.bias1[i] += this.learningRate * hiddenDeltas[i];
                }
                
                // Return error
                return outputErrors.reduce((sum, err) => sum + Math.abs(err), 0) / outputErrors.length;
            }
            
            // Save model to JSON
            toJSON() {
                return {
                    inputSize: this.inputSize,
                    hiddenSize: this.hiddenSize,
                    outputSize: this.outputSize,
                    weights1: this.weights1,
                    weights2: this.weights2,
                    bias1: this.bias1,
                    bias2: this.bias2
                };
            }
            
            // Load model from JSON
            static fromJSON(json) {
                const net = new NeuralNetwork(json.inputSize, json.hiddenSize, json.outputSize);
                net.weights1 = json.weights1;
                net.weights2 = json.weights2;
                net.bias1 = json.bias1;
                net.bias2 = json.bias2;
                return net;
            }
        }

        // Audio Feature Extractor
        class AudioFeatureExtractor {
            constructor() {
                this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                this.analyser = this.audioContext.createAnalyser();
                this.analyser.fftSize = 512;
                this.bufferLength = this.analyser.frequencyBinCount;
                this.dataArray = new Uint8Array(this.bufferLength);
                this.sampleRate = this.audioContext.sampleRate;
                
                // For spectrogram
                this.spectrogramBuffer = [];
                this.maxSpectrogramLength = 30; // Number of frames to keep
            }
            
            async startRecording(stream, onAudioProcess) {
                this.audioSource = this.audioContext.createMediaStreamSource(stream);
                this.audioSource.connect(this.analyser);
                
                // For recording audio data
                this.recorder = new MediaRecorder(stream);
                this.chunks = [];
                this.recorder.ondataavailable = e => this.chunks.push(e.data);
                this.recorder.start();
                
                // Process audio
                const process = () => {
                    this.analyser.getByteFrequencyData(this.dataArray);
                    
                    // Add to spectrogram buffer
                    this.spectrogramBuffer.push(new Uint8Array(this.dataArray));
                    if (this.spectrogramBuffer.length > this.maxSpectrogramLength) {
                        this.spectrogramBuffer.shift();
                    }
                    
                    onAudioProcess(this.dataArray);
                    this.rafId = requestAnimationFrame(process);
                };
                
                process();
            }
            
            stopRecording() {
                if (this.rafId) {
                    cancelAnimationFrame(this.rafId);
                }
                
                return new Promise((resolve) => {
                    if (!this.recorder) {
                        resolve(null);
                        return;
                    }
                    
                    this.recorder.onstop = async () => {
                        const blob = new Blob(this.chunks, { type: 'audio/wav' });
                        const audioBuffer = await this.decodeAudioData(blob);
                        resolve(audioBuffer);
                    };
                    
                    this.recorder.stop();
                    if (this.audioSource) {
                        this.audioSource.disconnect();
                    }
                });
            }
            
            async decodeAudioData(blob) {
                const arrayBuffer = await blob.arrayBuffer();
                return new Promise((resolve, reject) => {
                    this.audioContext.decodeAudioData(arrayBuffer, resolve, reject);
                });
            }
            
            extractMFCC(audioBuffer) {
                // Simplified MFCC feature extraction
                // In a real application, you'd want a full MFCC implementation
                
                // First get FFT data
                this.analyser.getByteFrequencyData(this.dataArray);
                
                // Convert to power spectrum
                const powerSpectrum = Array.from(this.dataArray).map(val => val / 255);
                
                // Simple feature extraction - using mean of bands as approximation
                const bands = 13; // Standard number of MFCC coefficients
                const bandSize = Math.floor(powerSpectrum.length / bands);
                const features = [];
                
                for (let i = 0; i < bands; i++) {
                    const start = i * bandSize;
                    const end = (i + 1) * bandSize;
                    const band = powerSpectrum.slice(start, end);
                    const mean = band.reduce((sum, val) => sum + val, 0) / band.length;
                    features.push(mean);
                }
                
                // Add delta features (approximation)
                if (features.length > 1) {
                    for (let i = 1; i < features.length; i++) {
                        features.push(features[i] - features[i-1]);
                    }
                }
                
                return features;
            }
            
            getSpectrogramData() {
                return this.spectrogramBuffer;
            }
        }

        // Main Application
        class AudioCommandApp {
            constructor() {
                this.featureExtractor = new AudioFeatureExtractor();
                this.model = null;
                this.commands = [];
                this.trainingData = {};
                this.currentCommand = null;
                this.isRecording = false;
                this.isTraining = false;
                this.isPredicting = false;
                this.minSamples = 5;  // Minimum samples per command needed for training
                this.inputSize = 26;  // Number of MFCC features (13 + 13 deltas)
                this.hiddenSize = 16; // Size of hidden layer
                
                // DOM elements
                this.commandList = document.getElementById('commandList');
                this.newCommandInput = document.getElementById('newCommandInput');
                this.addCommandBtn = document.getElementById('addCommandBtn');
                this.recordTrainBtn = document.getElementById('recordTrainBtn');
                this.trainBtn = document.getElementById('trainBtn');
                this.testBtn = document.getElementById('testBtn');
                this.recordPredictBtn = document.getElementById('recordPredictBtn');
                this.continuousBtn = document.getElementById('continuousBtn');
                this.currentCommandDisplay = document.getElementById('currentCommand');
                this.sampleCount = document.getElementById('sampleCount');
                this.trainingProgressBar = document.getElementById('trainingProgressBar');
                this.trainingProgressText = document.getElementById('trainingProgressText');
                this.recognizedCommand = document.getElementById('recognizedCommand');
                this.predictionConfidence = document.getElementById('predictionConfidence');
                this.confidenceBar = document.getElementById('confidenceBar');
                this.clearStorageBtn = document.getElementById('clearStorageBtn');
                
                // Visualization canvases
                this.waveformCanvas = document.getElementById('waveformCanvas');
                this.waveformCtx = this.waveformCanvas.getContext('2d');
                this.spectrogramCanvas = document.getElementById('spectrogramCanvas');
                this.spectrogramCtx = this.spectrogramCanvas.getContext('2d');
                this.networkVisualization = document.getElementById('networkVisualization');
                
                // Setup UI
                this.setupCanvas();
                this.setupEventListeners();
                this.loadFromStorage();
                this.renderCommandList();
                this.visualizeNetwork();
            }
            
            setupCanvas() {
                const width = this.audioVisualization.clientWidth;
                const height = this.audioVisualization.clientHeight;
                
                this.waveformCanvas.width = width;
                this.waveformCanvas.height = height;
                this.spectrogramCanvas.width = width;
                this.spectrogramCanvas.height = height;
                
                // Initially clear canvases
                this.clearVisualizations();
            }
            
            setupEventListeners() {
                // Add new command
                this.addCommandBtn.addEventListener('click', () => {
                    const command = this.newCommandInput.value.trim().toLowerCase();
                    if (command && !this.commands.includes(command)) {
                        this.commands.push(command);
                        this.trainingData[command] = [];
                        this.newCommandInput.value = '';
                        this.saveToStorage();
                        this.renderCommandList();
                    }
                });
                
                // Record training sample
                this.recordTrainBtn.addEventListener('click', () => {
                    if (this.currentCommand) {
                        this.toggleTrainRecording();
                    } else {
                        alert('Please select a command to train first');
                    }
                });
                
                // Train model
                this.trainBtn.addEventListener('click', () => this.trainModel());
                
                // Test model
                this.testBtn.addEventListener('click', () => this.testModel());
                
                // Record prediction
                this.recordPredictBtn.addEventListener('click', () => this.togglePredictRecording());
                
                // Continuous recognition mode
                this.continuousBtn.addEventListener('click', () => this.toggleContinuousMode());
                
                // Clear storage
                this.clearStorageBtn.addEventListener('click', () => {
                    if (confirm('Clear all training data and commands?')) {
                        localStorage.clear();
                        this.commands = [];
                        this.trainingData = {};
                        this.model = null;
                        this.currentCommand = null;
                        this.saveToStorage();
                        this.renderCommandList();
                        this.updateTrainingUI();
                        this.clearVisualizations();
                        this.visualizeNetwork();
                    }
                });
                
                // Handle window resize
                window.addEventListener('resize', () => {
                    this.setupCanvas();
                    if (this.isRecording) {
                        this.drawVisualizations(this.featureExtractor.getSpectrogramData());
                    }
                });
            }
            
            async toggleTrainRecording() {
                try {
                    if (this.isRecording) {
                        // Stop recording
                        this.isRecording = false;
                        this.recordTrainBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Record Sample';
                        this.recordTrainBtn.classList.remove('bg-red-600', 'hover:bg-red-500');
                        this.recordTrainBtn.classList.add('gradient-bg');
                        
                        const audioBuffer = await this.featureExtractor.stopRecording();
                        if (audioBuffer) {
                            const features = this.featureExtractor.extractMFCC(audioBuffer);
                            this.trainingData[this.currentCommand].push(features);
                            this.saveToStorage();
                            this.updateTrainingUI();
                            
                            // Show notification
                            const notification = document.createElement('div');
                            notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg transition transform translate-y-10 opacity-0';
                            notification.innerHTML = 'Sample recorded successfully';
                            document.body.appendChild(notification);
                            
                            setTimeout(() => {
                                notification.classList.add('opacity-100', 'translate-y-0');
                                setTimeout(() => {
                                    notification.classList.remove('opacity-100', 'translate-y-0');
                                    setTimeout(() => notification.remove(), 300);
                                }, 2000);
                            }, 10);
                        }
                        
                        this.clearVisualizations();
                    } else {
                        // Start recording
                        this.isRecording = true;
                        this.recordTrainBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Recording';
                        this.recordTrainBtn.classList.add('bg-red-600', 'hover:bg-red-500');
                        this.recordTrainBtn.classList.remove('gradient-bg');
                        
                        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                        this.featureExtractor.startRecording(stream, (data) => {
                            this.drawVisualizations(this.featureExtractor.getSpectrogramData());
                        });
                    }
                } catch (error) {
                    console.error('Recording error:', error);
                    this.isRecording = false;
                    this.recordTrainBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Record Sample';
                    this.recordTrainBtn.classList.add('gradient-bg');
                    this.recordTrainBtn.classList.remove('bg-red-600', 'hover:bg-red-500');
                    alert('Error accessing microphone: ' + error.message);
                }
            }
            
            async togglePredictRecording() {
                try {
                    if (this.isPredicting) {
                        // Stop recording
                        this.isPredicting = false;
                        this.recordPredictBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Record Command';
                        this.recordPredictBtn.classList.remove('bg-red-600', 'hover:bg-red-500');
                        this.recordPredictBtn.classList.add('gradient-bg', 'pulse-animation');
                        
                        await this.featureExtractor.stopRecording();
                        this.clearVisualizations();
                    } else {
                        // Start recording
                        this.isPredicting = true;
                        this.recordPredictBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Recording';
                        this.recordPredictBtn.classList.add('bg-red-600', 'hover:bg-red-500');
                        this.recordPredictBtn.classList.remove('gradient-bg', 'pulse-animation');
                        
                        this.recognizedCommand.textContent = 'Listening...';
                        this.predictionConfidence.textContent = '--% confidence';
                        this.confidenceBar.style.width = '0%';
                        
                        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                        this.featureExtractor.startRecording(stream, (data) => {
                            this.drawVisualizations(this.featureExtractor.getSpectrogramData());
                            
                            if (this.model) {
                                const features = this.featureExtractor.extractMFCC();
                                this.predictCommand(features);
                            }
                        });
                    }
                } catch (error) {
                    console.error('Prediction error:', error);
                    this.isPredicting = false;
                    this.recordPredictBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Record Command';
                    this.recordPredictBtn.classList.add('gradient-bg', 'pulse-animation');
                    this.recordPredictBtn.classList.remove('bg-red-600', 'hover:bg-red-500');
                    alert('Error accessing microphone: ' + error.message);
                }
            }
            
            toggleContinuousMode() {
                // To be implemented
                alert('Continuous mode coming soon!');
            }
            
            trainModel() {
                if (this.commands.length < 1) {
                    alert('Please add at least one command first');
                    return;
                }
                
                // Check if we have enough samples for each command
                const commandsWithEnoughSamples = this.commands.filter(cmd => 
                    this.trainingData[cmd] && this.trainingData[cmd].length >= this.minSamples
                );
                
                if (commandsWithEnoughSamples.length < 1) {
                    alert(`Please record at least ${this.minSamples} samples for each command you want to train`);
                    return;
                }
                
                this.isTraining = true;
                this.trainBtn.disabled = true;
                this.recordTrainBtn.disabled = true;
                
                // Prepare training data
                const trainingData = [];
                const targets = [];
                const commandIndex = {};
                commandsWithEnoughSamples.forEach((cmd, idx) => {
                    commandIndex[cmd] = idx;
                    this.trainingData[cmd].forEach(features => {
                        trainingData.push(features);
                        // One-hot encoded target
                        const target = Array(commandsWithEnoughSamples.length).fill(0);
                        target[idx] = 1;
                        targets.push(target);
                    });
                });
                
                // Initialize or reset model
                if (!this.model) {
                    this.model = new NeuralNetwork(this.inputSize, this.hiddenSize, commandsWithEnoughSamples.length);
                }
                
                // Train the model
                const epochs = 200;
                const batchSize = 16;
                const progressStep = Math.ceil(epochs / 20);
                
                const train = async (epoch = 0) => {
                    if (epoch >= epochs) {
                        // Training complete
                        this.isTraining = false;
                        this.trainBtn.disabled = false;
                        this.recordTrainBtn.disabled = false;
                        
                        // Visualize the trained network
                        this.visualizeNetwork();
                        
                        // Show notification
                        const notification = document.createElement('div');
                        notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg transition transform translate-y-10 opacity-0';
                        notification.innerHTML = 'Training complete! Model is ready';
                        document.body.appendChild(notification);
                        
                        setTimeout(() => {
                            notification.classList.add('opacity-100', 'translate-y-0');
                            setTimeout(() => {
                                notification.classList.remove('opacity-100', 'translate-y-0');
                                setTimeout(() => notification.remove(), 300);
                            }, 2000);
                        }, 10);
                        
                        return;
                    }
                    
                    // Shuffle training data
                    const shuffledIndices = Array.from({ length: trainingData.length }, (_, i) => i);
                    for (let i = shuffledIndices.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [shuffledIndices[i], shuffledIndices[j]] = [shuffledIndices[j], shuffledIndices[i]];
                    }
                    
                    // Train in mini-batches
                    let totalError = 0;
                    for (let i = 0; i < Math.ceil(trainingData.length / batchSize); i++) {
                        const batchIndices = shuffledIndices.slice(i * batchSize, (i + 1) * batchSize);
                        
                        for (const idx of batchIndices) {
                            const error = this.model.train(trainingData[idx], targets[idx]);
                            totalError += error;
                        }
                    }
                    
                    const avgError = totalError / trainingData.length;
                    
                    // Update UI
                    if (epoch % progressStep === 0 || epoch === epochs - 1) {
                        const progress = Math.floor((epoch / epochs) * 100);
                        this.trainingProgressBar.style.width = `${progress}%`;
                        this.trainingProgressText.textContent = `Epoch ${epoch + 1}/${epochs} (Error: ${avgError.toFixed(4)})`;
                        
                        // Visualize network occasionally
                        if (epoch % (progressStep * 2) === 0) {
                            this.visualizeNetwork();
                        }
                    }
                    
                    // Schedule next epoch
                    await new Promise(resolve => setTimeout(resolve, 0));
                    requestAnimationFrame(() => train(epoch + 1));
                };
                
                // Start training
                train();
            }
            
            testModel() {
                if (!this.model || this.commands.length < 1) {
                    alert('Please train at least one command first');
                    return;
                }
                
                // Simple test of the model with training data
                const summary = {};
                let totalCorrect = 0;
                let totalSamples = 0;
                
                this.commands.forEach(cmd => {
                    if (!this.trainingData[cmd] || this.trainingData[cmd].length === 0) return;
                    
                    summary[cmd] = { correct: 0, total: this.trainingData[cmd].length };
                    totalSamples += this.trainingData[cmd].length;
                    
                    this.trainingData[cmd].forEach(features => {
                        const prediction = this.model.forward(features).output;
                        const predictedIndex = prediction.indexOf(Math.max(...prediction));
                        const actualIndex = this.commands.indexOf(cmd);
                        
                        if (predictedIndex === actualIndex) {
                            summary[cmd].correct++;
                            totalCorrect++;
                        }
                    });
                });
                
                // Display test results
                let resultText = 'Model Test Results\n\n';
                this.commands.forEach(cmd => {
                    if (!summary[cmd]) return;
                    const accuracy = Math.round((summary[cmd].correct / summary[cmd].total) * 100);
                    resultText += `${cmd}: ${summary[cmd].correct}/${summary[cmd].total} (${accuracy}%)\n`;
                });
                
                resultText += `\nOverall Accuracy: ${Math.round((totalCorrect / totalSamples) * 100)}%`;
                alert(resultText);
            }
            
            predictCommand(features) {
                if (!this.model || this.commands.length < 1) return;
                
                const { output, hidden } = this.model.forward(features);
                const maxConfidence = Math.max(...output);
                const predictedIndex = output.indexOf(maxConfidence);
                const confidence = Math.round(maxConfidence * 100);
                
                if (confidence > 30) { // Minimum confidence threshold
                    const predictedCommand = this.commands[predictedIndex];
                    this.recognizedCommand.textContent = predictedCommand;
                    this.predictionConfidence.textContent = `${confidence}% confidence`;
                    this.confidenceBar.style.width = `${confidence}%`;
                    
                    // Visualize network activation
                    this.visualizeNetwork(hidden, predictedIndex, confidence);
                } else {
                    this.recognizedCommand.textContent = 'Not recognized';
                    this.predictionConfidence.textContent = 'Low confidence';
                    this.confidenceBar.style.width = '0%';
                }
            }
            
            // Visualization methods
            drawVisualizations(spectrogramBuffer) {
                if (!spectrogramBuffer || spectrogramBuffer.length === 0) return;
                
                const width = this.waveformCanvas.width;
                const height = this.waveformCanvas.height;
                
                // Clear canvases
                this.waveformCtx.clearRect(0, 0, width, height);
                this.spectrogramCtx.clearRect(0, 0, width, height);
                
                // Draw waveform (simplified)
                this.waveformCtx.beginPath();
                this.waveformCtx.strokeStyle = '#a777e3';
                this.waveformCtx.lineWidth = 2;
                
                const currentData = spectrogramBuffer[spectrogramBuffer.length - 1];
                const sliceWidth = width / currentData.length;
                
                for (let i = 0; i < currentData.length; i++) {
                    const v = currentData[i] / 255.0;
                    const y = (1 - v) * height;
                    
                    if (i === 0) {
                        this.waveformCtx.moveTo(0, y);
                    } else {
                        this.waveformCtx.lineTo(i * sliceWidth, y);
                    }
                }
                
                this.waveformCtx.stroke();
                
                // Draw spectrogram
                const spectrogramHeight = height;
                const spectrogramWidth = width;
                const binHeight = spectrogramHeight / currentData.length;
                
                for (let i = 0; i < spectrogramBuffer.length; i++) {
                    const colData = spectrogramBuffer[i];
                    const x = spectrogramWidth - (spectrogramBuffer.length - i);
                    
                    for (let j = 0; j < colData.length; j++) {
                        const value = colData[j] / 255;
                        const h = 240; // Hue (blue)
                        const s = 100; // Saturation
                        const l = value * 100; // Lightness
        
                        this.spectrogramCtx.fillStyle = `hsl(${h}, ${s}%, ${l}%)`;
                        this.spectrogramCtx.fillRect(x, j * binHeight, 1, binHeight);
                    }
                }
            }
            
            clearVisualizations() {
                this.waveformCtx.clearRect(0, 0, this.waveformCanvas.width, this.waveformCanvas.height);
                this.spectrogramCtx.clearRect(0, 0, this.spectrogramCanvas.width, this.spectrogramCanvas.height);
                
                // Draw empty state
                this.waveformCtx.fillStyle = 'rgba(255, 255, 255, 0.05)';
                this.waveformCtx.fillRect(0, 0, this.waveformCanvas.width, this.waveformCanvas.height);
                this.spectrogramCtx.fillStyle = 'rgba(255, 255, 255, 0.05)';
                this.spectrogramCtx.fillRect(0, 0, this.spectrogramCanvas.width, this.spectrogramCanvas.height);
                
                this.waveformCtx.fillStyle = 'white';
                this.waveformCtx.font = '14px Arial';
                this.waveformCtx.textAlign = 'center';
                this.waveformCtx.fillText('No audio data', this.waveformCanvas.width / 2, this.waveformCanvas.height / 2);
            }
            
            visualizeNetwork(hiddenActivations = null, outputIndex = -1, confidence = 0) {
                // Clear network visualization
                this.networkVisualization.innerHTML = '';
                
                if (!this.model) {
                    // Show placeholder if no model exists
                    const placeholder = document.createElement('div');
                    placeholder.className = 'text-gray-400 text-center py-12';
                    placeholder.textContent = 'No trained model. Train with at least 5 samples per command.';
                    this.networkVisualization.appendChild(placeholder);
                    return;
                }
                
                // Create layers container
                const layersContainer = document.createElement('div');
                layersContainer.className = 'flex items-center justify-center h-full';
                this.networkVisualization.appendChild(layersContainer);
                
                // Input layer
                const inputLayer = document.createElement('div');
                inputLayer.className = 'flex flex-col items-center mx-2';
                const inputLabel = document.createElement('div');
                inputLabel.className = 'text-xs text-gray-400 mb-1';
                inputLabel.textContent = 'Input Features';
                inputLayer.appendChild(inputLabel);
                
                const inputNeurons = document.createElement('div');
                inputNeurons.className = 'flex flex-col items-center';
                for (let i = 0; i < this.model.inputSize; i++) {
                    const neuron = document.createElement('div');
                    neuron.className = 'neuron';
                    inputNeurons.appendChild(neuron);
                }
                inputLayer.appendChild(inputNeurons);
                layersContainer.appendChild(inputLayer);
                
                // Connections between input and hidden
                for (let i = 0; i < this.model.inputSize; i++) {
                    for (let j = 0; j < this.model.hiddenSize; j++) {
                        const connection = document.createElement('div');
                        connection.className = 'connection';
                        connection.style.width = '60px';
                        connection.style.left = (30 + i * 0) + 'px';  // Adjusted for display
                        connection.style.top = (20 + i * 10) + 'px';   // Simplified positioning
                        layersContainer.appendChild(connection);
                    }
                }
                
                // Hidden layer
                const hiddenLayer = document.createElement('div');
                hiddenLayer.className = 'flex flex-col items-center mx-2';
                const hiddenLabel = document.createElement('div');
                hiddenLabel.className = 'text-xs text-gray-400 mb-1';
                hiddenLabel.textContent = 'Hidden Layer';
                hiddenLayer.appendChild(hiddenLabel);
                
                const hiddenNeurons = document.createElement('div');
                hiddenNeurons.className = 'flex flex-col items-center';
                for (let i = 0; i < this.model.hiddenSize; i++) {
                    const neuron = document.createElement('div');
                    neuron.className = 'neuron';
                    if (hiddenActivations) {
                        const activation = hiddenActivations[i];
                        const intensity = Math.min(255, Math.floor(activation * 200));
                        neuron.style.backgroundColor = `rgba(167, 119, 227, ${activation})`;
                        if (activation > 0.6) neuron.classList.add('active');
                    }
                    hiddenNeurons.appendChild(neuron);
                }
                hiddenLayer.appendChild(hiddenNeurons);
                layersContainer.appendChild(hiddenLayer);
                
                // Connections between hidden and output
                for (let i = 0; i < this.model.hiddenSize; i++) {
                    for (let j = 0; j < this.model.outputSize; j++) {
                        const connection = document.createElement('div');
                        connection.className = 'connection';
                        connection.style.width = '60px';
                        layersContainer.appendChild(connection);
                    }
                }
                
                // Output layer
                const outputLayer = document.createElement('div');
                outputLayer.className = 'flex flex-col items-center mx-2';
                const outputLabel = document.createElement('div');
                outputLabel.className = 'text-xs text-gray-400 mb-1';
                outputLabel.textContent = 'Output';
                outputLayer.appendChild(outputLabel);
                
                const outputNeurons = document.createElement('div');
                outputNeurons.className = 'flex flex-col items-center';
                for (let i = 0; i < this.model.outputSize; i++) {
                    const neuron = document.createElement('div');
                    neuron.className = 'neuron';
                    
                    if (outputIndex >= 0) {
                        if (i === outputIndex) {
                            neuron.style.backgroundColor = `rgba(74, 222, 128, ${confidence / 100})`;
                            if (confidence > 50) neuron.classList.add('active');
                        } else {
                            neuron.style.opacity = '0.3';
                        }
                    }
                    
                    outputNeurons.appendChild(neuron);
                    
                    // Add command labels
                    if (this.commands[i]) {
                        const label = document.createElement('div');
                        label.className = 'text-xs text-center mt-1';
                        label.textContent = this.commands[i];
                        outputNeurons.appendChild(label);
                    }
                }
                outputLayer.appendChild(outputNeurons);
                layersContainer.appendChild(outputLayer);
            }
            
            // Command list rendering
            renderCommandList() {
                this.commandList.innerHTML = '';
                
                this.commands.forEach(cmd => {
                    const samples = this.trainingData[cmd] ? this.trainingData[cmd].length : 0;
                    const statusColor = samples >= this.minSamples ? 'bg-green-500' : 
                                      samples > 0 ? 'bg-yellow-500' : 'bg-red-500';
                    const statusText = samples >= this.minSamples ? 'Ready' : 
                                     samples > 0 ? `${samples}/${this.minSamples}` : 'New';
                    
                    const card = document.createElement('div');
                    card.className = `command-card bg-gray-700 rounded-lg p-4 cursor-pointer ${this.currentCommand === cmd ? 'glow' : ''}`;
                    card.innerHTML = `
                        <div class="flex justify-between items-center">
                            <h3 class="font-medium">${cmd}</h3>
                            <span class="text-xs ${statusColor} px-2 py-1 rounded-full">${statusText}</span>
                        </div>
                        <div class="waveform mt-2 rounded"></div>
                        <div class="confidence-meter mt-2">
                            <div class="confidence-fill" style="width: ${samples / this.minSamples * 100}%"></div>
                        </div>
                        <div class="text-xs text-gray-400 mt-1">${samples} samples</div>
                    `;
                    
                    card.addEventListener('click', () => {
                        this.currentCommand = cmd;
                        this.currentCommandDisplay.textContent = `"${cmd}"`;
                        this.updateTrainingUI();
                        
                        // Highlight selected card
                        document.querySelectorAll('.command-card').forEach(c => c.classList.remove('glow'));
                        card.classList.add('glow');
                    });
                    
                    this.commandList.appendChild(card);
                });
                
                if (this.commands.length === 0) {
                    this.commandList.innerHTML = '<div class="text-center py-8 text-gray-400">No commands added yet</div>';
                }
            }
            
            updateTrainingUI() {
                if (!this.currentCommand) {
                    this.sampleCount.textContent = '0';
                    return;
                }
                
                const samples = this.trainingData[this.currentCommand] ? this.trainingData[this.currentCommand].length : 0;
                this.sampleCount.textContent = samples;
                
                // Update training button state
                this.trainBtn.disabled = this.commands.every(cmd => 
                    !this.trainingData[cmd] || this.trainingData[cmd].length < this.minSamples
                );
            }
            
            // Storage methods
            saveToStorage() {
                try {
                    localStorage.setItem('audioCommands', JSON.stringify(this.commands));
                    localStorage.setItem('trainingData', JSON.stringify(this.trainingData));
                    
                    if (this.model) {
                        localStorage.setItem('nnModel', JSON.stringify(this.model.toJSON()));
                    }
                } catch (e) {
                    console.error('Failed to save data:', e);
                }
            }
            
            loadFromStorage() {
                try {
                    const commands = localStorage.getItem('audioCommands');
                    const trainingData = localStorage.getItem('trainingData');
                    const modelData = localStorage.getItem('nnModel');
                    
                    if (commands) this.commands = JSON.parse(commands);
                    if (trainingData) this.trainingData = JSON.parse(trainingData);
                    if (modelData) this.model = NeuralNetwork.fromJSON(JSON.parse(modelData));
                } catch (e) {
                    console.error('Failed to load data:', e);
                }
            }
        }

        // Initialize the app when DOM is loaded
        document.addEventListener('DOMContentLoaded', () => {
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                alert('Your browser doesn\'t support audio recording. Please try Chrome or Firefox.');
                return;
            }
            
            const app = new AudioCommandApp();
            window.app = app; // For debugging
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/voice-command" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>