snxraven/ravenscott-blog
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update AI page

Browse Source
This commit is contained in:
Raven Scott 2024-10-02 05:18:34 -04:00
parent 350644e36d
commit 64238d0205
2 changed files with 137 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
public/js/chat.js
View File

@ -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();

26
views/chat.ejs
View File

@ -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>