forked from snxraven/ravenscott-blog
update AI page
This commit is contained in:
Raven Scott
parent
350644e36d
commit
64238d0205
@ -210,4 +210,118 @@ function openLiveLog() {
|
|||||||
|
|
||||||
function openTop() {
|
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');
|
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,20 +62,38 @@
|
|||||||
<span class="nav-link separator">|</span>
|
<span class="nav-link separator">|</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<!-- Inject custom menu items here -->
|
<!-- Inject custom monitor menu items here -->
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<!-- Alert Messages -->
|
<!-- Alert Messages -->
|
||||||
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div>
|
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user