script.js

// Neural Network Trip Decision Script

class TripDecisionNetwork {
    constructor() {
        // Define weights for each input factor
        this.weights = {
            weather: 0.3,
            budget: 0.4,
            time: 0.2,
            mood: 0.1
        };
        
        // Threshold for step activation function
        this.threshold = 5.0;
        
        // Initialize the network
        this.initializeInputs();
        this.calculate();
    }
    
    initializeInputs() {
        // Get all input sliders and add event listeners
        const inputs = ['weather', 'budget', 'time', 'mood'];
        
        inputs.forEach(input => {
            const slider = document.getElementById(input);
            const valueDisplay = document.getElementById(`${input}-value`);
            
            // Update display when slider changes
            slider.addEventListener('input', (e) => {
                const value = parseFloat(e.target.value);
                valueDisplay.textContent = value.toFixed(1);
                this.calculate();
                this.updateVisualization();
            });
            
            // Initialize display
            valueDisplay.textContent = parseFloat(slider.value).toFixed(1);
        });
        
        this.updateVisualization();
    }
    
    getInputValues() {
        return {
            weather: parseFloat(document.getElementById('weather').value),
            budget: parseFloat(document.getElementById('budget').value),
            time: parseFloat(document.getElementById('time').value),
            mood: parseFloat(document.getElementById('mood').value)
        };
    }
    
    calculateWeightedSum(inputs) {
        let sum = 0;
        for (const [factor, value] of Object.entries(inputs)) {
            sum += value * this.weights[factor];
        }
        return sum;
    }
    
    stepActivationFunction(sum) {
        return sum >= this.threshold ? 1 : 0;
    }
    
    calculate() {
        // Get current input values
        const inputs = this.getInputValues();
        
        // Calculate weighted sum
        const weightedSum = this.calculateWeightedSum(inputs);
        
        // Apply step activation function
        const output = this.stepActivationFunction(weightedSum);
        
        // Update the display
        this.updateDisplay(inputs, weightedSum, output);
    }
    
    updateDisplay(inputs, weightedSum, output) {
        // Update calculation display
        const calculationDisplay = document.getElementById('calculation-display');
        calculationDisplay.textContent = weightedSum.toFixed(2);
        
        // Update decision message
        const decisionMessage = document.getElementById('decision-message');
        const decisionViz = document.getElementById('decision-viz');
        const outputNodeViz = document.getElementById('output-node-viz');
        
        if (output === 1) {
            decisionViz.textContent = 'YES';
            decisionMessage.textContent = 'Go on the trip!';
            decisionMessage.className = '';
            outputNodeViz.classList.remove('no');
            outputNodeViz.classList.add('yes');
        } else {
            decisionViz.textContent = 'NO';
            decisionMessage.textContent = 'Stay home this time';
            decisionMessage.className = 'no';
            outputNodeViz.classList.remove('yes');
            outputNodeViz.classList.add('no');
        }
    }
    
    updateVisualization() {
        const inputs = this.getInputValues();
        const weightedSum = this.calculateWeightedSum(inputs);
        const output = this.stepActivationFunction(weightedSum);
        
        // Update input node intensities
        Object.entries(inputs).forEach(([factor, value]) => {
            const nodeViz = document.getElementById(`${factor}-node-viz`);
            const connection = document.getElementById(`${factor}-connection`);
            const intensity = value / 10;
            
            // Update node opacity
            nodeViz.style.opacity = 0.4 + (intensity * 0.6);
            
            // Update connection thickness and activity
            if (value > 5) {
                connection.classList.add('active');
                connection.style.strokeWidth = 2 + (intensity * 3);
            } else {
                connection.classList.remove('active');
                connection.style.strokeWidth = 3;
            }
        });
        
        // Update processing node intensity
        const processingNodeViz = document.getElementById('processing-node-viz');
        const intensity = Math.min(weightedSum / 10, 1);
        processingNodeViz.style.opacity = 0.5 + (intensity * 0.5);
        
        // Update output connection
        const outputConnection = document.getElementById('output-connection');
        if (output === 1) {
            outputConnection.classList.add('active');
            outputConnection.style.strokeWidth = 5;
        } else {
            outputConnection.classList.remove('active');
            outputConnection.style.strokeWidth = 3;
        }
    }
}

// Add some interactive animations
function addInteractiveEffects() {
    // Add hover effects to SVG nodes
    const svgNodes = document.querySelectorAll('.input-node, .processing-node, .output-node');
    svgNodes.forEach(node => {
        node.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.1)';
            this.style.transition = 'transform 0.2s ease';
            this.style.transformOrigin = 'center';
        });
        
        node.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
    
    // Add hover effects to connections
    const connections = document.querySelectorAll('.connection');
    connections.forEach(connection => {
        connection.addEventListener('mouseenter', function() {
            this.style.strokeWidth = (parseFloat(this.style.strokeWidth) || 3) + 2;
            this.style.strokeOpacity = '1';
        });
        
        connection.addEventListener('mouseleave', function() {
            this.style.strokeWidth = (parseFloat(this.style.strokeWidth) || 5) - 2;
            this.style.strokeOpacity = '0.7';
        });
    });
}

// Initialize the neural network when the page loads
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initializing Trip Decision Neural Network...');
    const network = new TripDecisionNetwork();
    addInteractiveEffects();
    
    // Add some helpful tips
    console.log('Neural Network Tips:');
    console.log('- Weather: How good is the weather? (0=terrible, 10=perfect)');
    console.log('- Budget: How much money do you have? (0=broke, 10=rich)');
    console.log('- Free Time: How much time do you have? (0=none, 10=lots)');
    console.log('- Mood: How do you feel? (0=terrible, 10=amazing)');
    console.log('- Threshold: If weighted sum ≥ 5.0, the network says GO!');
});

// Export for potential future use
window.TripDecisionNetwork = TripDecisionNetwork;