forked from snxraven/ravenscott-blog
update AI page
This commit is contained in:
parent
350644e36d
commit
64238d0205
@ -211,3 +211,117 @@ function openLiveLog() {
|
||||
function openTop() {
|
||||
window.open('https://ai-top.x64.world/', 'liveLogGtopWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes');
|
||||
}
|
||||
|
||||
const NETDATA_URL = 'https://ai-monitor.x64.world';
|
||||
|
||||
// Function to fetch data from the Netdata API
|
||||
async function fetchData(chart) {
|
||||
const response = await fetch(`${NETDATA_URL}/api/v1/data?chart=${chart}&format=json`, {
|
||||
cache: 'no-store',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache'
|
||||
}
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Function to update all metrics every 2 seconds
|
||||
async function updateMetrics() {
|
||||
await updateCpuUsage();
|
||||
await updateMemoryUsage();
|
||||
await updateNetworkUsage();
|
||||
await fetchGpuStats(); // Fetch GPU stats too
|
||||
|
||||
setTimeout(updateMetrics, 2000);
|
||||
}
|
||||
|
||||
// Function to update CPU usage
|
||||
async function updateCpuUsage() {
|
||||
const data = await fetchData('system.cpu');
|
||||
const totalCPU = data.data[0].slice(1).reduce((acc, curr) => acc + curr, 0);
|
||||
document.getElementById('cpuUsageItem').textContent = `CPU Usage: ${totalCPU.toFixed(2)}%`;
|
||||
}
|
||||
|
||||
// Function to update Memory usage
|
||||
async function updateMemoryUsage() {
|
||||
const data = await fetchData('mem.available');
|
||||
const usedMemoryMB = data.data[0][1];
|
||||
const usedMemoryGB = usedMemoryMB / 1024;
|
||||
document.getElementById('memoryUsageItem').textContent = `Memory Usage: ${usedMemoryGB.toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
// Function to update Network usage
|
||||
async function updateNetworkUsage() {
|
||||
const data = await fetchData('system.net');
|
||||
const totalNetwork = data.data[0].slice(1).reduce((acc, curr) => acc + curr, 0);
|
||||
|
||||
let networkText;
|
||||
if (totalNetwork > 1024) {
|
||||
const totalNetworkInMB = totalNetwork / 1024;
|
||||
networkText = `${totalNetworkInMB.toFixed(2)} MB/s (Down)`;
|
||||
} else if (totalNetwork < -1024) {
|
||||
const totalNetworkInMB = Math.abs(totalNetwork) / 1024;
|
||||
networkText = `${totalNetworkInMB.toFixed(2)} MB/s (Up)`;
|
||||
} else {
|
||||
const totalNetworkInKB = Math.abs(totalNetwork);
|
||||
networkText = `${totalNetworkInKB.toFixed(2)} KB/s (Up)`;
|
||||
}
|
||||
document.getElementById('networkUsageItem').textContent = `Network Usage: ${networkText}`;
|
||||
}
|
||||
|
||||
// Function to fetch GPU stats
|
||||
async function fetchGpuStats() {
|
||||
try {
|
||||
const response = await fetch('https://smi.x64.world/nvidia-smi');
|
||||
const data = await response.json();
|
||||
updateGpuStats(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching GPU stats:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to update GPU stats
|
||||
function updateGpuStats(data) {
|
||||
const gpu = data.nvidia_smi_log.gpu;
|
||||
document.getElementById('gpuUsageItem').textContent = `GPU Utilization: ${gpu.utilization.gpu_util}%`;
|
||||
document.getElementById('gpuMemoryUsageItem').textContent = `GPU Memory Utilization: ${gpu.utilization.memory_util}%`;
|
||||
}
|
||||
|
||||
// Function to initialize the dynamic menu items
|
||||
function initializeMenu() {
|
||||
const menu = document.getElementById('monitorMenu');
|
||||
|
||||
// Create CPU Usage item
|
||||
const cpuItem = document.createElement('li');
|
||||
cpuItem.classList.add('nav-item');
|
||||
cpuItem.innerHTML = '<a class="nav-link" href="#" id="cpuUsageItem">CPU Usage: --%</a>';
|
||||
menu.appendChild(cpuItem);
|
||||
|
||||
// Create Memory Usage item
|
||||
const memoryItem = document.createElement('li');
|
||||
memoryItem.classList.add('nav-item');
|
||||
memoryItem.innerHTML = '<a class="nav-link" href="#" id="memoryUsageItem">Memory Usage: -- GB</a>';
|
||||
menu.appendChild(memoryItem);
|
||||
|
||||
// Create Network Usage item
|
||||
const networkItem = document.createElement('li');
|
||||
networkItem.classList.add('nav-item');
|
||||
networkItem.innerHTML = '<a class="nav-link" href="#" id="networkUsageItem">Network Usage: -- KB/s</a>';
|
||||
menu.appendChild(networkItem);
|
||||
|
||||
// Create GPU Usage item
|
||||
const gpuItem = document.createElement('li');
|
||||
gpuItem.classList.add('nav-item');
|
||||
gpuItem.innerHTML = '<a class="nav-link" href="#" id="gpuUsageItem">GPU Utilization: --%</a>';
|
||||
menu.appendChild(gpuItem);
|
||||
|
||||
// Create GPU Memory Utilization item
|
||||
const gpuMemoryItem = document.createElement('li');
|
||||
gpuMemoryItem.classList.add('nav-item');
|
||||
gpuMemoryItem.innerHTML = '<a class="nav-link" href="#" id="gpuMemoryUsageItem">GPU Memory Utilization: --%</a>';
|
||||
menu.appendChild(gpuMemoryItem);
|
||||
}
|
||||
|
||||
// Start the updates
|
||||
initializeMenu();
|
||||
updateMetrics();
|
@ -62,21 +62,39 @@
|
||||
<span class="nav-link separator">|</span>
|
||||
</li>
|
||||
|
||||
<!-- Inject custom menu items here -->
|
||||
<!-- Inject custom monitor menu items here -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openLiveLog()">Live Log</a>
|
||||
<a class="nav-link" href="#" id="liveLogLink" onclick="openLiveLog()">Live Log</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openTop()">Top</a>
|
||||
<a class="nav-link" href="#" id="topLink" onclick="openTop()">Top</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" onclick="openGpuStats()">GPU Stats</a>
|
||||
<a class="nav-link" href="#" id="gpuStatsLink" onclick="openGpuStats()">GPU Stats</a>
|
||||
</li>
|
||||
|
||||
<!-- Dynamic monitor stats -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="cpuUsageItem">CPU Usage: --%</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="memoryUsageItem">Memory Usage: -- GB</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="networkUsageItem">Network Usage: -- KB/s</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="gpuUsageItem">GPU Utilization: --%</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="gpuMemoryUsageItem">GPU Memory Utilization: --%</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div>
|
||||
<div id="error-alert" class="alert alert-danger mt-3" style="display: none;"></div>
|
||||
|
Loading…
Reference in New Issue
Block a user