Hugging Face's logo

Spaces:
weltenschmid
/
anycoder-04dc4c5e
Running

App Files Community
1
anycoder-04dc4c5e / index.html
weltenschmid's picture
weltenschmid
Upload folder using huggingface_hub
bc0e72b verified
raw
history blame contribute delete
25.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>NetDiag: Host & Connection Monitor</title>
 <!-- Importing FontAwesome for Icons -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
 :root {
 --bg-color: #0f172a;
 --card-bg: rgba(30, 41, 59, 0.7);
 --card-border: rgba(148, 163, 184, 0.1);
 --text-primary: #f1f5f9;
 --text-secondary: #94a3b8;
 --accent-cyan: #06b6d4;
 --accent-green: #10b981;
 --accent-red: #ef4444;
 --accent-orange: #f59e0b;
 --glow: 0 0 15px rgba(6, 182, 212, 0.3);
 --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }
 body {
 font-family: var(--font-main);
 background-color: var(--bg-color);
 background-image:
radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
 radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
 color: var(--text-primary);
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 overflow-x: hidden;
 }
 /* --- Header --- */
 header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.5rem 2rem;
 border-bottom: 1px solid var(--card-border);
 backdrop-filter: blur(10px);
 position: sticky;
 top: 0;
 z-index: 100;
 background: rgba(15, 23, 42, 0.8);
 }
 .brand {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--accent-cyan);
 text-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
 }
 .brand i {
 font-size: 1.8rem;
 }
 .anycoder-link {
 font-size: 0.9rem;
 color: var(--text-secondary);
 text-decoration: none;
 padding: 0.5rem 1rem;
 border: 1px solid var(--card-border);
 border-radius: 20px;
 transition: all 0.3s ease;
 }
 .anycoder-link:hover {
 color: var(--text-primary);
 border-color: var(--accent-cyan);
 box-shadow: var(--glow);
 }
 /* --- Main Layout --- */
 main {
 flex: 1;
 padding: 2rem;
 max-width: 1400px;
 margin: 0 auto;
 width: 100%;
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 1.5rem;
 }
 /* --- Cards Generic --- */
 .card {
 background: var(--card-bg);
 border: 1px solid var(--card-border);
 border-radius: 16px;
 padding: 1.5rem;
 backdrop-filter: blur(12px);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 display: flex;
 flex-direction: column;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .card:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
 }
 .card-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 }
 .card-title {
 font-size: 1rem;
 font-weight: 600;
 color: var(--text-secondary);
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 /* --- Specific Grid Areas --- */
 .status-panel {
 grid-column: span 12;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1.5rem;
 }
 .chart-panel {
 grid-column: span 8;
 min-height: 400px;
 }
 .log-panel {
 grid-column: span 4;
 min-height: 400px;
 overflow: hidden;
 }
 .controls-panel {
 grid-column: span 12;
 display: flex;
 justify-content: flex-end;
 gap: 1rem;
 align-items: center;
 }
 /* --- Metrics & Visuals --- */
 .metric-value {
 font-size: 2.5rem;
 font-weight: 700;
 margin: 0.5rem 0;
 }
 .metric-unit {
 font-size: 1rem;
 color: var(--text-secondary);
 font-weight: 400;
 }
 .status-indicator {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: var(--text-secondary);
 box-shadow: 0 0 10px currentColor;
 transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 .status-indicator.active { background-color: var(--accent-green); color: var(--accent-green); }
 .status-indicator.warning { background-color: var(--accent-orange); color: var(--accent-orange); }
 .status-indicator.critical { background-color: var(--accent-red); color: var(--accent-red); }
 /* Progress Bars */
 .progress-container {
 width: 100%;
 height: 8px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 4px;
 overflow: hidden;
 margin-top: 0.5rem;
 }
 .progress-bar {
 height: 100%;
 width: 0%;
 background: var(--accent-cyan);
 border-radius: 4px;
 transition: width 0.5s ease, background-color 0.3s ease;
 position: relative;
 }
 .progress-bar::after {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
 transform: translateX(-100%);
 animation: shimmer 2s infinite;
 }
 @keyframes shimmer {
 100% { transform: translateX(100%); }
 }
 /* Canvas */
 canvas {
 width: 100%;
 height: 100%;
 display: block;
 }
 /* Logs */
 .log-container {
 font-family: 'Courier New', monospace;
 font-size: 0.85rem;
 color: var(--text-secondary);
 overflow-y: auto;
 flex: 1;
 padding-right: 0.5rem;
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 }
 .log-entry {
 display: flex;
 gap: 0.5rem;
 }
 .log-time { color: var(--accent-cyan); }
 .log-msg-info { color: var(--text-primary); }
 .log-msg-warn { color: var(--accent-orange); }
 .log-msg-err { color: var(--accent-red); }
 /* Buttons */
 .btn {
 padding: 0.75rem 1.5rem;
 border-radius: 8px;
 border: none;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.95rem;
 }
 .btn-primary {
 background: var(--accent-cyan);
 color: #0f172a;
 }
 .btn-primary:hover {
 background: #22d3ee;
 box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
 }
 .btn-danger {
 background: transparent;
 border: 1px solid var(--accent-red);
 color: var(--accent-red);
 }
 .btn-danger:hover {
 background: rgba(239, 68, 68, 0.1);
 }
 /* Toast Notification */
 #toast-container {
 position: fixed;
 bottom: 2rem;
 right: 2rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 z-index: 1000;
 }
 .toast {
 background: rgba(15, 23, 42, 0.95);
 border-left: 4px solid var(--accent-cyan);
 padding: 1rem 1.5rem;
 border-radius: 4px;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
 color: var(--text-primary);
 transform: translateX(120%);
 transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 display: flex;
 align-items: center;
 gap: 0.75rem;
 backdrop-filter: blur(5px);
 }
 .toast.show {
 transform: translateX(0);
 }
 /* Responsive Design */
 @media (max-width: 1024px) {
 .chart-panel { grid-column: span 12; }
 .log-panel { grid-column: span 12; min-height: 250px; }
 }
 @media (max-width: 600px) {
 header { flex-direction: column; gap: 1rem; }
 .metric-value { font-size: 2rem; }
 .controls-panel { flex-direction: column; align-items: stretch; }
 }
 </style>
</head>
<body>
<header>
 <div class="brand">
 <i class="fa-solid fa-network-wired"></i>
 <span>NetDiag</span>
 </div>
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
 Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em; margin-left:4px;"></i>
 </a>
 </header>
<main>
 <!-- Status Panel: Host vs Connection -->
 <section class="status-panel">
<!-- Host Limits (CPU/RAM) -->
 <div class="card">
 <div class="card-header">
 <div class="card-title">
 <i class="fa-solid fa-server"></i> Host CPU Load
 </div>
 <div id="host-status-light" class="status-indicator active"></div>
 </div>
 <div class="metric-value" id="cpu-val">0%</div>
 <div class="progress-container">
 <div id="cpu-bar" class="progress-bar"></div>
 </div>
 <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">
 Limit: 90% (Throttling Threshold)
 </div>
 </div>
<div class="card">
 <div class="card-header">
 <div class="card-title">
 <i class="fa-solid fa-memory"></i> Memory Usage
 </div>
 </div>
 <div class="metric-value" id="ram-val">0<span class="metric-unit">GB</span></div>
 <div class="progress-container">
 <div id="ram-bar" class="progress-bar" style="background-color: var(--accent-green);"></div>
 </div>
 <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">
 Total: 16 GB
 </div>
 </div>
<!-- Connection Quality -->
 <div class="card">
 <div class="card-header">
 <div class="card-title">
 <i class="fa-solid fa-wifi"></i> Connection Latency
 </div>
 <div id="conn-status-light" class="status-indicator active"></div>
 </div>
 <div class="metric-value" id="ping-val">0<span class="metric-unit">ms</span></div>
 <div class="progress-container">
 <div id="ping-bar" class="progress-bar" style="background-color: var(--accent-orange);"></div>
 </div>
 <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">
 Jitter: <span id="jitter-val">0</span>ms
 </div>
 </div>
</section>
<!-- Main Chart Panel -->
 <section class="card chart-panel">
 <div class="card-header">
 <div class="card-title">
 <i class="fa-solid fa-chart-line"></i> Real-Time Traffic Analysis
 </div>
 <div style="font-size: 0.8rem; color: var(--text-secondary);">
 <span style="color: var(--accent-cyan)">●</span> Requests &nbsp;
 <span style="color: var(--accent-red)">●</span> Errors
 </div>
 </div>
 <div style="flex: 1; position: relative;">
 <canvas id="trafficChart"></canvas>
 </div>
 </section>
<!-- Log Panel -->
 <section class="card log-panel">
 <div class="card-header">
 <div class="card-title">
 <i class="fa-solid fa-terminal"></i> System Logs
 </div>
 <button onclick="clearLogs()" style="background:none; border:none; color:var(--text-secondary); cursor:pointer;">
 <i class="fa-solid fa-trash"></i>
 </button>
 </div>
 <div class="log-container" id="log-container">
 <!-- Logs will appear here -->
 </div>
 </section>
<!-- Controls -->
 <section class="controls-panel">
 <button class="btn btn-danger" id="stop-btn" onclick="toggleMonitoring(false)" disabled>
 <i class="fa-solid fa-stop"></i> Stop Monitor
 </button>
 <button class="btn btn-primary" id="start-btn" onclick="toggleMonitoring(true)">
 <i class="fa-solid fa-play"></i> Start Diagnostics
 </button>
 <button class="btn btn-primary" style="background: var(--accent-orange);" onclick="simulateSpike()">
 <i class="fa-solid fa-bolt"></i> Test Host Limit
 </button>
 </section>
</main>
<!-- Toast Container -->
 <div id="toast-container"></div>
<script>
 // --- State Management ---
 let isRunning = false;
 let intervalId = null;
 let chartIntervalId = null;
// Data arrays for the chart
 const maxDataPoints = 60;
 let trafficData = new Array(maxDataPoints).fill(0);
 let errorData = new Array(maxDataPoints).fill(0);
 // --- DOM Elements ---
 const cpuVal = document.getElementById('cpu-val');
 const cpuBar = document.getElementById('cpu-bar');
 const ramVal = document.getElementById('ram-val');
 const ramBar = document.getElementById('ram-bar');
 const pingVal = document.getElementById('ping-val');
 const pingBar = document.getElementById('ping-bar');
 const jitterVal = document.getElementById('jitter-val');
const hostLight = document.getElementById('host-status-light');
 const connLight = document.getElementById('conn-status-light');
const logContainer = document.getElementById('log-container');
 const canvas = document.getElementById('trafficChart');
 const ctx = canvas.getContext('2d');
 // --- Initialization ---
 resizeCanvas();
 window.addEventListener('resize', resizeCanvas);
 addLog("System initialized. Ready to diagnose.", "info");
 // --- Core Logic ---
 function toggleMonitoring(start) {
 if (start) {
 if (isRunning) return;
 isRunning = true;
 document.getElementById('start-btn').disabled = true;
 document.getElementById('stop-btn').disabled = false;
 addLog("Diagnostics started...", "info");
 showToast("Monitoring Active", "success");
 // Start Data Loop (Every 1s)
 intervalId = setInterval(updateMetrics, 1000);
// Start Chart Loop (Every 100ms for smoothness)
 chartIntervalId = setInterval(updateChartData, 100);
 } else {
 isRunning = false;
 document.getElementById('start-btn').disabled = false;
 document.getElementById('stop-btn').disabled = true;
 clearInterval(intervalId);
 clearInterval(chartIntervalId);
 addLog("Diagnostics paused by user.", "warn");
 showToast("Monitoring Paused", "default");
// Reset lights
 hostLight.className = "status-indicator";
 connLight.className = "status-indicator";
 }
 }
 function updateMetrics() {
 // Simulate Host Stats (CPU/RAM)
 // Random fluctuation + potential spike
 let cpu = Math.floor(Math.random() * 30) + 20; // Base 20-50%
 let ram = (Math.random() * 2 + 4).toFixed(1); // Base 4-6 GB
 // Randomly spike CPU to simulate host limit issues
 if (Math.random() > 0.8) cpu += 30;
// Update DOM - CPU
 cpuVal.innerText = cpu + "%";
 cpuBar.style.width = cpu + "%";
if (cpu > 90) {
 cpuBar.style.backgroundColor = "var(--accent-red)";
 hostLight.className = "status-indicator critical";
 if(Math.random() > 0.7) addLog("Host CPU Limit Critical! Throttling detected.", "err");
 } else if (cpu > 70) {
 cpuBar.style.backgroundColor = "var(--accent-orange)";
 hostLight.className = "status-indicator warning";
 } else {
 cpuBar.style.backgroundColor = "var(--accent-cyan)";
 hostLight.className = "status-indicator active";
 }
 // Update DOM - RAM
 ramVal.innerHTML = ram + '<span class="metric-unit">GB</span>';
 const ramPercent = (ram / 16) * 100;
 ramBar.style.width = ramPercent + "%";
 if(ramPercent > 80) ramBar.style.backgroundColor = "var(--accent-red)";
 else ramBar.style.backgroundColor = "var(--accent-green)";
 // Simulate Connection Stats (Ping/Jitter)
 let ping = Math.floor(Math.random() * 40) + 10; // Base 10-50ms
 let jitter = Math.floor(Math.random() * 10);
 // Randomly spike Ping to simulate connection issues
 if (Math.random() > 0.85) ping += 150;
 // Update DOM - Ping
 pingVal.innerHTML = ping + '<span class="metric-unit">ms</span>';
 jitterVal.innerText = jitter;
// Ping bar scale: 0ms = 0%, 200ms = 100%
 const pingPercent = Math.min((ping / 200) * 100, 100);
 pingBar.style.width = pingPercent + "%";
 if (ping > 150) {
 pingBar.style.backgroundColor = "var(--accent-red)";
 connLight.className = "status-indicator critical";
 if(Math.random() > 0.7) addLog(`Connection timeout: ${ping}ms latency.`, "err");
 } else if (ping > 80) {
 pingBar.style.backgroundColor = "var(--accent-orange)";
 connLight.className = "status-indicator warning";
 } else {
 pingBar.style.backgroundColor = "var(--accent-green)";
 connLight.className = "status-indicator active";
 }
 }
 function updateChartData() {
 // Shift data
 trafficData.shift();
 errorData.shift();
 // Add new random data points
 // Traffic usually flows
 let newTraffic = Math.floor(Math.random() * 50) + 20;
let newError = Math.random() > 0.95 ? Math.floor(Math.random() * 40) : 0;
 trafficData.push(newTraffic);
 errorData.push(newError);
 drawChart();
 }
 // --- Canvas Drawing (2D Tool) ---
 function drawChart() {
 const w = canvas.width;
 const h = canvas.height;
// Clear
 ctx.clearRect(0, 0, w, h);
 // Grid lines
 ctx.strokeStyle = "rgba(148, 163, 184, 0.1)";
 ctx.lineWidth = 1;
 ctx.beginPath();
 for(let i=0; i<h; i+=40) {
 ctx.moveTo(0, i);
 ctx.lineTo(w, i);
 }
 ctx.stroke();
 // Draw Traffic Line (Cyan)
 drawLine(trafficData, "#06b6d4", 2);
 // Draw Error Line (Red)
 drawLine(errorData, "#ef4444", 2);
 }
 function drawLine(data, color, width) {
 const w = canvas.width;
 const h = canvas.height;
 const step = w / (maxDataPoints - 1);
 ctx.beginPath();
 ctx.strokeStyle = color;
 ctx.lineWidth = width;
 ctx.lineJoin = 'round';
 for (let i = 0; i < data.length; i++) {
 // Map value (0-100) to height
 // y = h - (value/100 * h)
 const y = h - ((data[i] / 100) * h);
 const x = i * step;
 if (i === 0) ctx.moveTo(x, y);
 else ctx.lineTo(x, y);
 }
 ctx.stroke();
 // Add fill gradient under the line
 ctx.lineTo(w, h);
 ctx.lineTo(0, h);
 ctx.closePath();
const gradient = ctx.createLinearGradient(0, 0, 0, h);
 gradient.addColorStop(0, color + "44"); // Hex + alpha
 gradient.addColorStop(1, color + "00");
 ctx.fillStyle = gradient;
 ctx.fill();
 }
 function resizeCanvas() {
 // Handle high DPI displays
 const container = canvas.parentElement;
 canvas.width = container.clientWidth;
 canvas.height = container.clientHeight;
 drawChart();
 }
 // --- Interaction: Simulate Host Limit ---
 function simulateSpike() {
 if(!isRunning) {
 showToast("Start monitoring first!", "warn");
 return;
 }
// Force visual spike
 cpuVal.innerText = "98%";
 cpuBar.style.width = "98%";
 cpuBar.style.backgroundColor = "var(--accent-red)";
 hostLight.className = "status-indicator critical";
addLog("MANUAL TEST: Simulating Host Limit Breach...", "err");
 showToast("Host Limit Test Triggered", "error");
 // Inject data into chart
 for(let i=0; i<20; i++) {
 trafficData.push(Math.random() * 20 + 80);
 trafficData.shift();
 }
 }
 // --- Utilities ---
 function addLog(msg, type) {
 const time = new Date().toLocaleTimeString('en-US', { hour12: false });
 const div = document.createElement('div');
 div.className = 'log-entry';
let colorClass = "log-msg-info";
 if (type === "warn") colorClass = "log-msg-warn";
 if (type === "err") colorClass = "log-msg-err";
 div.innerHTML = `<span class="log-time">[${time}]</span> <span class="${colorClass}">${msg}</span>`;
logContainer.appendChild(div);
 logContainer.scrollTop = logContainer.scrollHeight; // Auto scroll
 }
 function clearLogs() {
 logContainer.innerHTML = '';
 addLog("Logs cleared.", "info");
 }
 function showToast(message, type = "default") {
 const container = document.getElementById('toast-container');
 const toast = document.createElement('div');
 toast.className = 'toast';
let icon = '<i class="fa-solid fa-info-circle"></i>';
 let color = 'var(--accent-cyan)';
 if (type === 'success') {
 icon = '<i class="fa-solid fa-check-circle"></i>';
 color = 'var(--accent-green)';
 } else if (type === 'error') {
 icon = '<i class="fa-solid fa-triangle-exclamation"></i>';
 color = 'var(--accent-red)';
 } else if (type === 'warn') {
 icon = '<i class="fa-solid fa-exclamation-circle"></i>';
 color = 'var(--accent-orange)';
 }
 toast.style.borderLeftColor = color;
 toast.innerHTML = `<span style="color:${color}; font-size: 1.2rem;">${icon}</span> ${message}`;
container.appendChild(toast);
 // Trigger animation
 requestAnimationFrame(() => {
 toast.classList.add('show');
 });
 // Remove after 3 seconds
 setTimeout(() => {
 toast.classList.remove('show');
 setTimeout(() => {
 toast.remove();
 }, 300);
 }, 3000);
 }
 </script>
</body>
</html>