Spaces:

Yaroster
/

gridpulse-pulsemaster

Running

App Files Files Community

Yaroster commited on Oct 5, 2025

Commit

80bfe78

verified ·

1 Parent(s): 420f718

Fill the thing with random data

Browse files

Files changed (2) hide show

README.md +8 -4
index.html +284 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Gridpulse Pulsemaster
-emoji: 📉
-colorFrom: red
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: GridPulse PulseMaster ⚡
+colorFrom: yellow
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,285 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>GridPulse Edge – Energy-Efficient Grid Monitor</title>
+  <!-- Tailwind + Feather + Chart.js + date-fns -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
+  <style>
+    :root {
+      --primary: #14b8a6;
+      --secondary: #f59e0b;
+      --dark: #111827;
+      --light: #fdfdfd;
+    }
+    .theme-light { --bg: var(--light); --text: var(--dark); }
+    .theme-dark  { --bg: var(--dark); --text: var(--light); }
+    body { background: var(--bg); color: var(--text); transition: background .3s, color .3s; }
+    .toast-enter { opacity:0; transform:translateY(-20px); }
+    .toast-enter-active { opacity:1; transform:translateY(0); transition:all .4s; }
+    .blink { animation:blink 1s infinite; }
+    @keyframes blink{ 50%{ filter:brightness(1.4) drop-shadow(0 0 8px var(--secondary));} }
+  </style>
+</head>
+<body class="theme-dark font-sans">
+  <!-- TOAST -->
+  <div id="toast" class="fixed top-4 right-4 z-50 max-w-sm"></div>
+  <!-- HEADER -->
+  <header class="flex flex-col sm:flex-row justify-between items-center p-4 md:p-6 bg-slate-900">
+    <h1 class="text-xl md:text-3xl font-extrabold flex items-center gap-3">
+      <i data-feather="bar-chart-2" class="text-emerald-500"></i>
+      GridPulse Edge
+    </h1>
+    <div class="flex items-center gap-3 mt-2 sm:mt-0">
+      <button id="themeBtn" class="p-2 rounded-full bg-slate-700 hover:bg-slate-600">
+        <i data-feather="sun"></i>
+      </button>
+      <select id="rangeSelect" class="bg-slate-700 text-sm rounded p-2">
+        <option value="15m">Last 15 min</option>
+        <option value="1h">1 hour</option>
+        <option value="24h">24 hours</option>
+      </select>
+    </div>
+  </header>
+  <!-- KPI ROW -->
+  <section class="grid grid-cols-2 lg:grid-cols-5 gap-4 p-4 md:p-6">
+    <div id="kpiHealth"
+      class="col-span-2 lg:col-span-1 flex flex-col justify-center items-center bg-slate-800 rounded-2xl p-4 min-h-[140px]">
+      <h3 class="text-sm opacity-60 mb-1">Health</h3>
+      <div id="gauge" class="w-16 h-16 rounded-full border-8 border-emerald-500" style="--tw-border-opacity:.7;"></div>
+      <span id="healthText" class="mt-2 font-bold text-xl">0.94</span>
+    </div>
+    <div id="kpiEta"
+      class="flex justify-center items-center text-center bg-slate-800 rounded-2xl p-4">
+      <div>
+        <h3 class="text-sm opacity-60">Next Fault ETA</h3>
+        <span id="etaVal" class="font-bold text-2xl">27 s</span>
+      </div>
+    </div>
+    <div id="kpiFault"
+      class="flex justify-center items-center text-center bg-slate-800 rounded-2xl p-4">
+      <div>
+        <h3 class="text-sm opacity-60">Top Fault</h3>
+        <span id="faultVal" class="font-bold text-lg">Sag 0.82</span>
+      </div>
+    </div>
+    <div id="kpiLatency"
+      class="flex justify-center items-center text-center bg-slate-800 rounded-2xl p-4">
+      <h3 class="text-sm opacity-60">Latency / Energy</h3>
+      <div class="font-bold text-lg">
+        <span id="latencyVal">0.12 ms</span><br/>
+        <span id="energyVal">0.004 Wh</span>
+      </div>
+    </div>
+    <div id="kpiCO2"
+      class="flex justify-center items-center text-center bg-slate-800 rounded-2xl p-4">
+      <div>
+        <h3 class="text-sm opacity-60">CO₂ avoided today</h3>
+        <span id="co2Val" class="font-bold text-xl">2.1 kg</span>
+      </div>
+    </div>
+  </section>
+  <!-- MAIN GRID -->
+  <main class="grid grid-cols-1 xl:grid-cols-2 gap-6 px-4 md:px-6 pb-6">
+    <!-- CHART 1: HEALTH -->
+    <section class="bg-slate-800 rounded-2xl p-4">
+      <h2 class="mb-2 font-bold">Health score – 15 min</h2>
+      <canvas id="healthChart" height="120"></canvas>
+    </section>
+    <!-- CHART 2: PROBABILITIES -->
+    <section class="bg-slate-800 rounded-2xl p-4">
+      <h2 class="mb-2 font-bold">Fault probabilities</h2>
+      <canvas id="probChart" height="120"></canvas>
+    </section>
+    <!-- CHART 3: ENERGY LEDGER -->
+    <section class="bg-slate-800 rounded-2xl p-4">
+      <h2 class="mb-2 font-bold">Energy ledger – today</h2>
+      <canvas id="energyChart" height="120"></canvas>
+    </section>
+    <!-- CHART 4: LATENCY / COST -->
+    <section class="bg-slate-800 rounded-2xl p-4">
+      <h2 class="mb-2 font-bold">Latency & cost</h2>
+      <canvas id="latencyChart" height="120"></canvas>
+    </section>
+  </main>
+  <!-- TABLES -->
+  <section class="px-4 md:px-6 pb-6 grid grid-cols-1 xl:grid-cols-2 gap-6">
+    <!-- ALERTS -->
+    <section class="bg-slate-800 rounded-2xl p-4">
+      <h2 class="mb-3 font-bold">Recent alerts (last 24 h)</h2>
+      <div class="overflow-x-auto">
+        <table id="alertsTable" class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-slate-600">
+              <th class="p-2 text-left">Time</th><th>Feeder</th><th>Fault</th><th>ETA</th><th>Action</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </section>
+    <!-- MODEL COMPARISON -->
+    <section class="bg-slate-800 rounded-2xl p-4">
+      <h2 class="mb-3 font-bold">Model comparison</h2>
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-slate-600">
+              <th class="p-2 text-left">Model</th><th>Latency(ms)</th><th>Energy(Wh)</th><th>Cost($)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="bg-emerald-700/30"><td class="p-2 font-bold">LR INT8 *</td><td>0.15</td><td>0.005</td><td>0.000064</td></tr>
+            <tr><td class="p-2">RF</td><td>0.8</td><td>0.027</td><td>0.00035</td></tr>
+            <tr><td class="p-2">XGBoost INT8</td><td>0.22</td><td>0.0081</td><td>0.00011</td></tr>
+            <tr><td class="p-2">LSTM FP16</td><td>2.1</td><td>0.065</td><td>0.00084</td></tr>
+            <tr><td class="p-2">GNN INT8</td><td>1.5</td><td>0.042</td><td>0.00055</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </section>
+  <footer class="text-center text-xs opacity-60 p-4">
+    Energy, latency, and cost figures adapted from literature; refined with deployment telemetry.
+  </footer>
+<script>
+/* UTILS */
+const dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+const body = document.body;
+function setTheme(darkMode){
+  body.className = darkMode ? 'theme-dark' : 'theme-light';
+  document.querySelector('#themeBtn').innerHTML = feather.icons[darkMode?'sun':'moon'].toSvg({class:'inline w-5'});
+}
+setTheme(dark);
+document.getElementById('themeBtn').onclick = ()=>setTheme(!body.classList.contains('theme-dark'));
+/* DEMO DATA GENERATION */
+let lastHealth=0.85 + Math.random()*0.1, lastEta=30 + Math.random()*120;
+const dataHealth = Array(15*60).fill().map((_,i)=>({x:Date.now()-i*1000, y:0.7 + Math.random()*0.3}));
+const dataSag = [], dataSwell=[], dataOsc=[], dataLatency=[], dataCost=[], dataEnergy=[];
+for(let i=0;i<60*24;i++){
+  const spike = Math.random() > 0.95 ? 0.9 + Math.random()*0.1 : Math.random();
+  dataSag.unshift({x:Date.now()-i*60000, y:spike});
+  dataSwell.unshift({x:Date.now()-i*60000, y:0.3 + Math.random()*0.5});
+  dataOsc.unshift({x:Date.now()-i*60000, y:0.4 + Math.random()*0.4});
+  dataLatency.unshift({x:Date.now()-i*60000, y:0.05 + Math.random()*0.1});
+  dataCost.unshift({x:Date.now()-i*60000, y:(0.05 + Math.random()*0.15)/1000});
+  dataEnergy.unshift({x:Date.now()-i*60000, y:0.005 + Math.random()*0.005});
+}
+const feeders = ["F01", "F02", "F03", "F04", "F05", "F06"];
+const faultTypes = ["Sag", "Swell", "Oscillation", "Harmonic", "Outage", "Spike"];
+const actions = ["Notify crew", "Adjust set-point", "Reroute power", "Check sensors", "Dispatch team", "Monitor"];
+const alerts = Array(5).fill().map(() => {
+  const timeOffset = Math.random() * 24 * 60 * 60 * 1000;
+  return {
+    time: new Date(Date.now() - timeOffset),
+    feeder: feeders[Math.floor(Math.random() * feeders.length)],
+    fault: `${faultTypes[Math.floor(Math.random() * faultTypes.length)]} ${(0.7 + Math.random()*0.3).toFixed(2)}`,
+    eta: timeOffset < 60000 ? `${Math.floor(timeOffset/1000)} s` : `${Math.floor(timeOffset/60000)} m`,
+    action: actions[Math.floor(Math.random() * actions.length)]
+  };
+}).sort((a,b) => b.time - a.time);
+/* CHARTS */
+function lineConfig(data,label,color,fill=false){
+  return {
+    type:"line", data:{datasets:[{label,data,backgroundColor:fill?color+'33':'transparent',borderColor:color,fill}]},
+    options:{animation:false, plugins:{legend:{display:false}}, scales:{x:{type:'time',ticks:{maxTicksLimit:5}}}}
+  };
+}
+window.onload = ()=>{
+  new Chart(document.getElementById('healthChart'), lineConfig(dataHealth.slice(-900),'Health','#10b981',true));
+  new Chart(document.getElementById('probChart'), {
+    type:'line',
+    data:{datasets:[
+      {label:'Sag',data:dataSag,backgroundColor:'transparent',borderColor:'#ef4444',pointRadius:0},
+      {label:'Swell',data:dataSwell,backgroundColor:'transparent',borderColor:'#f59e0b',pointRadius:0},
+      {label:'Oscillation',data:dataOsc,backgroundColor:'transparent',borderColor:'#3b82f6',pointRadius:0}
+    ]},
+    options:{animation:false, plugins:{legend:{display:false}}, scales:{x:{type:'time',ticks:{maxTicksLimit:5}}}}
+  });
+  new Chart(document.getElementById('energyChart'), {
+    type:'bar',
+    data:{datasets:[
+      {label:'Model energy',data:dataEnergy.slice(-24),backgroundColor:'#6366f1'},
+      {label:'Energy saved',data:Array(24).fill(0.025),backgroundColor:'#34d399'}
+    ]},
+    options:{animation:false, plugins:{legend:{display:false}}, scales:{x:{ticks:{maxTicksLimit:12}}}}
+  });
+  new Chart(document.getElementById('latencyChart'), {
+    type:'line',
+    data:{datasets:[
+      {label:'Latency ms',data:dataLatency.slice(-24),backgroundColor:'transparent',borderColor:'#8b5cf6',yAxisID:'y'},
+      {label:'Cost $',data:dataCost.slice(-24),backgroundColor:'transparent',borderColor:'#ec4899',borderDash:[5,5],yAxisID:'y1'}
+    ]},
+    options:{animation:false, interaction:{mode:'nearest', axis:'x', intersect:false}, scales:{y:{type:'linear',position:'left'}, y1:{type:'linear',position:'right',grid:{drawOnChartArea:false}}}}
+  });
+};
+/* REFRESH UI */
+function refresh(){
+  lastHealth = Math.max(0.6, Math.min(0.95, lastHealth - 0.001 + (Math.random()*0.004 - 0.002)));
+document.getElementById('healthText').textContent = lastHealth.toFixed(2);
+  const gauge = document.getElementById('gauge');
+  let c = lastHealth>=0.8? '#22c55e':lastHealth>=0.5? '#f59e0b': '#ef4444';
+  gauge.style.borderColor = c;
+  lastEta = Math.max(5, Math.min(180, lastEta - 1 + Math.random()*4 - 2));
+const eta = lastEta<60?Math.round(lastEta)+' s':`${Math.floor(lastEta/60)} m`;
+  document.getElementById('etaVal').textContent=eta;
+  const kpiEta = document.getElementById('kpiEta');
+  kpiEta.classList.toggle('blink', lastEta<60);
+  document.getElementById('latencyVal').textContent = (0.08 + Math.random()*0.08).toFixed(2) + ' ms';
+  document.getElementById('energyVal').textContent = (0.003 + Math.random()*0.004).toFixed(3) + ' Wh';
+  document.getElementById('co2Val').textContent = (1.8 + Math.random()*0.6).toFixed(2) + ' kg';
+// alerts
+  const tbody = document.querySelector('#alertsTable tbody');
+  tbody.innerHTML='';
+  alerts.forEach(a=>{
+    const tr=document.createElement('tr');
+    tr.innerHTML = `
+      <td class="p-2">${format(a.time,'HH:mm:ss')}</td>
+      <td>${a.feeder}</td>
+      <td>${a.fault}</td>
+      <td>${a.eta}</td>
+      <td class="italic">${a.action}</td>`;
+    tbody.append(tr);
+  });
+  if(Math.random()>0.99) {
+    const fault = faultTypes[Math.floor(Math.random() * faultTypes.length)];
+    showToast(`${fault} detected on ${feeders[Math.floor(Math.random() * feeders.length)]}`, {type:'warning'});
+  }
+}
+const format = dateFns.format;
+setInterval(refresh,1000);
+/* TOAST MANAGER */
+function showToast(msg, opts={}){
+  const box=document.createElement('div');
+  box.className='toast-enter bg-red-600 text-white p-3 rounded shadow';
+  box.textContent = msg;
+  document.getElementById('toast').appendChild(box);
+  box.classList.add('toast-enter-active');
+  setTimeout(()=>box.remove(),4000);
+}
+refresh();
+feather.replace();
+</script>
+</body>
 </html>