Spaces:

PrinzPesia
/

cpu-fan-simulator

Running

File size: 27,334 Bytes

dc02922

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CPU Fan Simulator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        .fan-blades {
            animation: spin linear infinite;
            transform-origin: center;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .temp-indicator {
            transition: all 0.5s ease;
        }
        
        .slider-thumb::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
        }
        
        .slider-thumb::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-4xl font-bold text-center mb-8 text-blue-400">CPU Fan Simulator</h1>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- CPU Visualization -->
            <div class="bg-gray-800 rounded-xl p-6 shadow-lg col-span-1">
                <h2 class="text-2xl font-semibold mb-4 text-center">CPU Status</h2>
                
                <div class="flex flex-col items-center">
                    <div class="relative w-48 h-48 mb-6">
                        <!-- CPU Chip -->
                        <div class="absolute inset-0 bg-gray-700 rounded-lg flex items-center justify-center">
                            <div class="w-32 h-32 bg-gray-600 rounded-md flex items-center justify-center">
                                <div class="text-center">
                                    <div id="cpuTemp" class="text-3xl font-bold">35°C</div>
                                    <div id="cpuLoad" class="text-lg">0% Load</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Fan -->
                        <div id="fan" class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 w-24 h-24">
                            <svg viewBox="0 0 100 100" class="w-full h-full">
                                <circle cx="50" cy="50" r="45" fill="#4b5563" />
                                <g class="fan-blades" id="fanBlades">
                                    <path d="M50,5 L55,45 L50,50 L45,45 Z" fill="#9ca3af" />
                                    <path d="M95,50 L55,55 L50,50 L55,45 Z" fill="#9ca3af" />
                                    <path d="M50,95 L45,55 L50,50 L55,55 Z" fill="#9ca3af" />
                                    <path d="M5,50 L45,45 L50,50 L45,55 Z" fill="#9ca3af" />
                                </g>
                                <circle cx="50" cy="50" r="15" fill="#374151" />
                            </svg>
                        </div>
                    </div>
                    
                    <!-- Temperature indicator -->
                    <div class="w-full h-6 bg-gradient-to-r from-blue-500 via-yellow-500 to-red-500 rounded-full mb-2 relative">
                        <div id="tempIndicator" class="temp-indicator absolute top-0 left-0 w-2 h-6 bg-white rounded-full -ml-1"></div>
                    </div>
                    
                    <div class="flex justify-between w-full text-xs">
                        <span>0°C</span>
                        <span>50°C</span>
                        <span>100°C</span>
                    </div>
                    
                    <!-- Fan speed -->
                    <div class="mt-6 w-full">
                        <div class="flex justify-between mb-1">
                            <span>Fan Speed</span>
                            <span id="fanSpeedDisplay">0%</span>
                        </div>
                        <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
                            <div id="fanSpeedBar" class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Controls -->
            <div class="bg-gray-800 rounded-xl p-6 shadow-lg col-span-1">
                <h2 class="text-2xl font-semibold mb-4 text-center">Controls</h2>
                
                <div class="space-y-6">
                    <!-- CPU Load Slider -->
                    <div>
                        <label for="cpuLoadSlider" class="block mb-2">CPU Load: <span id="cpuLoadValue">0</span>%</label>
                        <input type="range" id="cpuLoadSlider" min="0" max="100" value="0" class="w-full slider-thumb">
                    </div>
                    
                    <!-- Max Temp Slider -->
                    <div>
                        <label for="maxTempSlider" class="block mb-2">Max Safe Temperature: <span id="maxTempValue">85</span>°C</label>
                        <input type="range" id="maxTempSlider" min="60" max="100" value="85" class="w-full slider-thumb">
                    </div>
                    
                    <!-- Fan Curve Type -->
                    <div>
                        <label class="block mb-2">Fan Curve Type:</label>
                        <div class="grid grid-cols-2 gap-2">
                            <button id="curveLinear" class="bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded">Linear</button>
                            <button id="curveAggressive" class="bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded">Aggressive</button>
                            <button id="curveSilent" class="bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded">Silent</button>
                            <button id="curveCustom" class="bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded">Custom</button>
                        </div>
                    </div>
                    
                    <!-- Fan Speed Limit -->
                    <div>
                        <label for="maxFanSpeedSlider" class="block mb-2">Max Fan Speed: <span id="maxFanSpeedValue">100</span>%</label>
                        <input type="range" id="maxFanSpeedSlider" min="20" max="100" value="100" class="w-full slider-thumb">
                    </div>
                    
                    <!-- Buttons -->
                    <div class="grid grid-cols-2 gap-4 pt-4">
                        <button id="startStress" class="bg-red-600 hover:bg-red-700 py-3 px-4 rounded-lg font-medium">
                            <i class="fas fa-bolt mr-2"></i> Stress Test
                        </button>
                        <button id="stopStress" class="bg-gray-600 hover:bg-gray-500 py-3 px-4 rounded-lg font-medium">
                            <i class="fas fa-stop mr-2"></i> Stop
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Fan Curve Editor -->
            <div class="bg-gray-800 rounded-xl p-6 shadow-lg col-span-1 lg:col-span-1">
                <h2 class="text-2xl font-semibold mb-4 text-center">Fan Curve</h2>
                
                <div class="h-64 mb-4">
                    <canvas id="fanCurveChart"></canvas>
                </div>
                
                <div id="customCurveControls" class="space-y-4 opacity-50 pointer-events-none">
                    <div>
                        <label for="lowTemp" class="block mb-2">Low Temp (<span id="lowTempValue">30</span>°C):</label>
                        <input type="range" id="lowTemp" min="20" max="50" value="30" class="w-full slider-thumb">
                    </div>
                    
                    <div>
                        <label for="lowSpeed" class="block mb-2">Low Speed (<span id="lowSpeedValue">20</span>%):</label>
                        <input type="range" id="lowSpeed" min="0" max="50" value="20" class="w-full slider-thumb">
                    </div>
                    
                    <div>
                        <label for="highTemp" class="block mb-2">High Temp (<span id="highTempValue">70</span>°C):</label>
                        <input type="range" id="highTemp" min="50" max="90" value="70" class="w-full slider-thumb">
                    </div>
                    
                    <div>
                        <label for="highSpeed" class="block mb-2">High Speed (<span id="highSpeedValue">80</span>%):</label>
                        <input type="range" id="highSpeed" min="50" max="100" value="80" class="w-full slider-thumb">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Logs -->
        <div class="bg-gray-800 rounded-xl p-6 shadow-lg mt-8">
            <h2 class="text-2xl font-semibold mb-4">System Log</h2>
            <div id="systemLog" class="h-40 overflow-y-auto bg-gray-900 p-3 rounded font-mono text-sm space-y-1">
                <div class="text-gray-400">System initialized. Ready to simulate CPU fan behavior.</div>
            </div>
        </div>
    </div>

    <script>
        // State variables
        let cpuLoad = 0;
        let cpuTemp = 35;
        let maxTemp = 85;
        let fanSpeed = 0;
        let maxFanSpeed = 100;
        let stressTestInterval = null;
        let fanCurveType = 'linear';
        let fanCurvePoints = [];
        
        // DOM elements
        const cpuTempElement = document.getElementById('cpuTemp');
        const cpuLoadElement = document.getElementById('cpuLoad');
        const cpuLoadSlider = document.getElementById('cpuLoadSlider');
        const cpuLoadValue = document.getElementById('cpuLoadValue');
        const maxTempSlider = document.getElementById('maxTempSlider');
        const maxTempValue = document.getElementById('maxTempValue');
        const maxFanSpeedSlider = document.getElementById('maxFanSpeedSlider');
        const maxFanSpeedValue = document.getElementById('maxFanSpeedValue');
        const fanSpeedDisplay = document.getElementById('fanSpeedDisplay');
        const fanSpeedBar = document.getElementById('fanSpeedBar');
        const tempIndicator = document.getElementById('tempIndicator');
        const fanBlades = document.getElementById('fanBlades');
        const startStress = document.getElementById('startStress');
        const stopStress = document.getElementById('stopStress');
        const systemLog = document.getElementById('systemLog');
        
        // Fan curve buttons
        const curveLinear = document.getElementById('curveLinear');
        const curveAggressive = document.getElementById('curveAggressive');
        const curveSilent = document.getElementById('curveSilent');
        const curveCustom = document.getElementById('curveCustom');
        
        // Custom curve controls
        const customCurveControls = document.getElementById('customCurveControls');
        const lowTemp = document.getElementById('lowTemp');
        const lowTempValue = document.getElementById('lowTempValue');
        const lowSpeed = document.getElementById('lowSpeed');
        const lowSpeedValue = document.getElementById('lowSpeedValue');
        const highTemp = document.getElementById('highTemp');
        const highTempValue = document.getElementById('highTempValue');
        const highSpeed = document.getElementById('highSpeed');
        const highSpeedValue = document.getElementById('highSpeedValue');
        
        // Chart
        const ctx = document.getElementById('fanCurveChart').getContext('2d');
        let fanCurveChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Fan Speed (%)',
                    data: [],
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Temperature (°C)',
                            color: '#fff'
                        },
                        min: 0,
                        max: 100,
                        ticks: {
                            color: '#fff'
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Fan Speed (%)',
                            color: '#fff'
                        },
                        min: 0,
                        max: 100,
                        ticks: {
                            color: '#fff'
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }
                },
                plugins: {
                    legend: {
                        labels: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Fan Speed: ${context.parsed.y}% at ${context.parsed.x}°C`;
                            }
                        }
                    }
                }
            }
        });
        
        // Initialize
        updateFanCurve();
        updateUI();
        
        // Event listeners
        cpuLoadSlider.addEventListener('input', function() {
            cpuLoad = parseInt(this.value);
            cpuLoadValue.textContent = cpuLoad;
            updateCPUState();
            updateUI();
        });
        
        maxTempSlider.addEventListener('input', function() {
            maxTemp = parseInt(this.value);
            maxTempValue.textContent = maxTemp;
            updateFanCurve();
            updateUI();
        });
        
        maxFanSpeedSlider.addEventListener('input', function() {
            maxFanSpeed = parseInt(this.value);
            maxFanSpeedValue.textContent = maxFanSpeed;
            updateFanCurve();
            updateUI();
        });
        
        startStress.addEventListener('click', function() {
            if (stressTestInterval) clearInterval(stressTestInterval);
            
            cpuLoad = 100;
            cpuLoadSlider.value = 100;
            cpuLoadValue.textContent = '100';
            
            stressTestInterval = setInterval(function() {
                updateCPUState();
                updateUI();
            }, 500);
            
            addLog("Started CPU stress test");
        });
        
        stopStress.addEventListener('click', function() {
            if (stressTestInterval) {
                clearInterval(stressTestInterval);
                stressTestInterval = null;
            }
            
            cpuLoad = 0;
            cpuLoadSlider.value = 0;
            cpuLoadValue.textContent = '0';
            
            updateCPUState();
            updateUI();
            
            addLog("Stopped CPU stress test");
        });
        
        // Fan curve type buttons
        curveLinear.addEventListener('click', function() {
            fanCurveType = 'linear';
            updateButtonStates();
            updateFanCurve();
            addLog("Fan curve set to Linear");
        });
        
        curveAggressive.addEventListener('click', function() {
            fanCurveType = 'aggressive';
            updateButtonStates();
            updateFanCurve();
            addLog("Fan curve set to Aggressive");
        });
        
        curveSilent.addEventListener('click', function() {
            fanCurveType = 'silent';
            updateButtonStates();
            updateFanCurve();
            addLog("Fan curve set to Silent");
        });
        
        curveCustom.addEventListener('click', function() {
            fanCurveType = 'custom';
            updateButtonStates();
            updateFanCurve();
            addLog("Fan curve set to Custom");
        });
        
        // Custom curve controls
        lowTemp.addEventListener('input', function() {
            lowTempValue.textContent = this.value;
            if (fanCurveType === 'custom') updateFanCurve();
        });
        
        lowSpeed.addEventListener('input', function() {
            lowSpeedValue.textContent = this.value;
            if (fanCurveType === 'custom') updateFanCurve();
        });
        
        highTemp.addEventListener('input', function() {
            highTempValue.textContent = this.value;
            if (fanCurveType === 'custom') updateFanCurve();
        });
        
        highSpeed.addEventListener('input', function() {
            highSpeedValue.textContent = this.value;
            if (fanCurveType === 'custom') updateFanCurve();
        });
        
        // Functions
        function updateButtonStates() {
            curveLinear.className = fanCurveType === 'linear' ? 
                'bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded' : 
                'bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded';
                
            curveAggressive.className = fanCurveType === 'aggressive' ? 
                'bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded' : 
                'bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded';
                
            curveSilent.className = fanCurveType === 'silent' ? 
                'bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded' : 
                'bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded';
                
            curveCustom.className = fanCurveType === 'custom' ? 
                'bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded' : 
                'bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded';
                
            if (fanCurveType === 'custom') {
                customCurveControls.className = 'space-y-4';
                customCurveControls.classList.remove('opacity-50', 'pointer-events-none');
            } else {
                customCurveControls.className = 'space-y-4 opacity-50 pointer-events-none';
            }
        }
        
        function updateCPUState() {
            // Simulate temperature based on load with slower response
            const targetTemp = 30 + (cpuLoad * 0.7); // Base temp + load impact
            const tempChange = (targetTemp - cpuTemp) * 0.03; // Much more gradual change
            
            cpuTemp = Math.min(100, Math.max(30, cpuTemp + tempChange));
            
            // Calculate fan speed based on curve
            calculateFanSpeed();
        }
        
        function calculateFanSpeed() {
            let newFanSpeed = 0;
            
            if (fanCurveType === 'linear') {
                // Linear curve from 30°C (0%) to maxTemp (100%)
                const minTemp = 30;
                const maxTempEffective = maxTemp;
                
                if (cpuTemp <= minTemp) {
                    newFanSpeed = 0;
                } else if (cpuTemp >= maxTempEffective) {
                    newFanSpeed = 100;
                } else {
                    newFanSpeed = ((cpuTemp - minTemp) / (maxTempEffective - minTemp)) * 100;
                }
            } 
            else if (fanCurveType === 'aggressive') {
                // More aggressive curve that ramps up quickly
                const minTemp = 30;
                const midTemp = 50;
                const maxTempEffective = maxTemp;
                
                if (cpuTemp <= minTemp) {
                    newFanSpeed = 0;
                } else if (cpuTemp <= midTemp) {
                    newFanSpeed = 20 + ((cpuTemp - minTemp) / (midTemp - minTemp)) * 30;
                } else if (cpuTemp >= maxTempEffective) {
                    newFanSpeed = 100;
                } else {
                    newFanSpeed = 50 + ((cpuTemp - midTemp) / (maxTempEffective - midTemp)) * 50;
                }
            }
            else if (fanCurveType === 'silent') {
                // Silent curve that keeps fan low as long as possible
                const minTemp = 30;
                const midTemp = 70;
                const maxTempEffective = maxTemp;
                
                if (cpuTemp <= minTemp) {
                    newFanSpeed = 0;
                } else if (cpuTemp <= midTemp) {
                    newFanSpeed = ((cpuTemp - minTemp) / (midTemp - minTemp)) * 40;
                } else if (cpuTemp >= maxTempEffective) {
                    newFanSpeed = 100;
                } else {
                    newFanSpeed = 40 + ((cpuTemp - midTemp) / (maxTempEffective - midTemp)) * 60;
                }
            }
            else if (fanCurveType === 'custom') {
                // Custom curve based on user settings
                const customLowTemp = parseInt(lowTemp.value);
                const customLowSpeed = parseInt(lowSpeed.value);
                const customHighTemp = parseInt(highTemp.value);
                const customHighSpeed = parseInt(highSpeed.value);
                
                if (cpuTemp <= customLowTemp) {
                    newFanSpeed = customLowSpeed;
                } else if (cpuTemp >= customHighTemp) {
                    newFanSpeed = customHighSpeed;
                } else {
                    newFanSpeed = customLowSpeed + 
                        ((cpuTemp - customLowTemp) / (customHighTemp - customLowTemp)) * 
                        (customHighSpeed - customLowSpeed);
                }
            }
            
            // Apply max fan speed limit
            newFanSpeed = Math.min(newFanSpeed, maxFanSpeed);
            
            // Smooth fan speed changes
            fanSpeed = fanSpeed * 0.7 + newFanSpeed * 0.3;
            
            // Round to nearest integer
            fanSpeed = Math.round(fanSpeed);
        }
        
        function updateFanCurve() {
            const points = [];
            
            if (fanCurveType === 'linear') {
                points.push({x: 30, y: 0});
                points.push({x: maxTemp, y: 100});
            } 
            else if (fanCurveType === 'aggressive') {
                points.push({x: 30, y: 0});
                points.push({x: 50, y: 50});
                points.push({x: maxTemp, y: 100});
            }
            else if (fanCurveType === 'silent') {
                points.push({x: 30, y: 0});
                points.push({x: 70, y: 40});
                points.push({x: maxTemp, y: 100});
            }
            else if (fanCurveType === 'custom') {
                const customLowTemp = parseInt(lowTemp.value);
                const customLowSpeed = parseInt(lowSpeed.value);
                const customHighTemp = parseInt(highTemp.value);
                const customHighSpeed = parseInt(highSpeed.value);
                
                points.push({x: 20, y: customLowSpeed});
                points.push({x: customLowTemp, y: customLowSpeed});
                points.push({x: customHighTemp, y: customHighSpeed});
                points.push({x: 100, y: customHighSpeed});
            }
            
            fanCurvePoints = points;
            updateChart();
        }
        
        function updateChart() {
            fanCurveChart.data.datasets[0].data = fanCurvePoints;
            fanCurveChart.update();
        }
        
        function updateUI() {
            // Update CPU display
            cpuTempElement.textContent = `${Math.round(cpuTemp)}°C`;
            cpuLoadElement.textContent = `${cpuLoad}% Load`;
            
            // Update temperature indicator position
            const tempPercentage = Math.min(100, Math.max(0, cpuTemp));
            tempIndicator.style.left = `${tempPercentage}%`;
            
            // Update fan speed display
            fanSpeedDisplay.textContent = `${fanSpeed}%`;
            fanSpeedBar.style.width = `${fanSpeed}%`;
            
            // Change fan speed bar color based on speed
            if (fanSpeed < 30) {
                fanSpeedBar.className = 'h-full bg-blue-500 rounded-full';
            } else if (fanSpeed < 70) {
                fanSpeedBar.className = 'h-full bg-yellow-500 rounded-full';
            } else {
                fanSpeedBar.className = 'h-full bg-red-500 rounded-full';
            }
            
            // Update fan animation
            const animationDuration = fanSpeed > 0 ? `${2 - (fanSpeed / 100 * 1.8)}s` : '0s';
            fanBlades.style.animationDuration = animationDuration;
            
            // Change CPU color based on temperature
            if (cpuTemp < 50) {
                cpuTempElement.className = 'text-3xl font-bold text-blue-400';
            } else if (cpuTemp < 70) {
                cpuTempElement.className = 'text-3xl font-bold text-yellow-400';
            } else if (cpuTemp < maxTemp) {
                cpuTempElement.className = 'text-3xl font-bold text-orange-500';
            } else {
                cpuTempElement.className = 'text-3xl font-bold text-red-500';
            }
        }
        
        function addLog(message) {
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span class="text-gray-400">[${timeString}]</span> ${message}`;
            systemLog.appendChild(logEntry);
            systemLog.scrollTop = systemLog.scrollHeight;
            
            // Keep only the last 50 log entries
            if (systemLog.children.length > 50) {
                systemLog.removeChild(systemLog.children[0]);
            }
        }
    </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=PrinzPesia/cpu-fan-simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>