Spaces:

arihant3704
/

heartbeats-graphs-visualizer

Running

App Files Files Community

arihant3704 commited on Nov 4, 2025

Commit

450d83e

verified ·

1 Parent(s): 99ad468

Wearable

Browse files

ECG Monitoring app.

Requirements:

→ No hardware, it should randomly take numbers for every one second.

2 It should segerate weather the reading is regural (or) inregular.

3) It should show it gives. eeg graphs for the reading

9) It should store history of the readings 5 Amy ather additions gel free to add only in html

Files changed (6) hide show

README.md +7 -4
components/footer.js +33 -0
components/navbar.js +35 -0
index.html +133 -19
script.js +257 -0
style.css +15 -22

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Heartbeats Graphs Visualizer
-emoji: 📚
-colorFrom: pink
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: HeartBeats & Graphs Visualizer 🫀
+colorFrom: yellow
 colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,33 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: #1F2937;
+        }
+        .footer-link:hover {
+          color: #EF4444;
+        }
+      </style>
+      <footer class="text-gray-300 py-8">
+        <div class="container mx-auto px-4">
+          <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-4 md:mb-0">
+              <p class="text-sm">&copy; ${new Date().getFullYear()} HeartBeats Visualizer. Not a real medical device.</p>
+            </div>
+            <div class="flex space-x-4">
+              <a href="#" class="footer-link text-sm">Privacy Policy</a>
+              <a href="#" class="footer-link text-sm">Terms of Service</a>
+              <a href="#" class="footer-link text-sm">Contact Us</a>
+            </div>
+          </div>
+          <div class="mt-6 text-center text-xs text-gray-500">
+            <p>This is a simulation for demonstration purposes only. Not intended for medical use.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,35 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          background: linear-gradient(135deg, #EF4444 0%, #991B1B 100%);
+        }
+        .nav-link:hover {
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+      </style>
+      <nav class="navbar text-white shadow-lg">
+        <div class="container mx-auto px-4">
+          <div class="flex justify-between items-center py-4">
+            <div class="flex items-center space-x-2">
+              <i data-feather="activity" class="w-8 h-8"></i>
+              <span class="text-xl font-bold">HeartBeats Visualizer</span>
+            </div>
+            <div class="hidden md:flex items-center space-x-1">
+              <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
+              <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">History</a>
+              <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Settings</a>
+              <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Help</a>
+            </div>
+            <button class="md:hidden focus:outline-none">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,133 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HeartBeats Visualizer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column -->
+            <div class="lg:col-span-2 space-y-8">
+                <!-- Live ECG Graph -->
+                <div class="bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">Live ECG Monitoring</h2>
+                        <div id="heartStatus" class="flex items-center">
+                            <span class="h-4 w-4 rounded-full bg-red-500 animate-pulse mr-2"></span>
+                            <span class="text-gray-600">Analyzing...</span>
+                        </div>
+                    </div>
+                    <div class="h-64">
+                        <canvas id="ecgChart"></canvas>
+                    </div>
+                    <div class="mt-6 flex justify-between items-center">
+                        <button id="pauseBtn" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
+                            <i data-feather="pause"></i> Pause
+                        </button>
+                        <div class="text-sm text-gray-500">
+                            <span id="bpmDisplay" class="text-lg font-semibold text-gray-800">--</span> BPM
+                        </div>
+                    </div>
+                </div>
+                <!-- History Section -->
+                <div class="bg-white rounded-xl shadow-lg p-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Reading History</h2>
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50">
+                                <tr>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">BPM</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
+                                </tr>
+                            </thead>
+                            <tbody id="historyTable" class="bg-white divide-y divide-gray-200">
+                                <!-- History rows will be added here by JavaScript -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column -->
+            <div class="space-y-8">
+                <!-- Heart Rate Stats -->
+                <div class="bg-white rounded-xl shadow-lg p-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Current Reading</h2>
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Current BPM</span>
+                            <span id="currentBpm" class="text-2xl font-bold text-gray-800">--</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Average BPM</span>
+                            <span id="averageBpm" class="text-2xl font-bold text-gray-800">--</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Min BPM</span>
+                            <span id="minBpm" class="text-2xl font-bold text-gray-800">--</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Max BPM</span>
+                            <span id="maxBpm" class="text-2xl font-bold text-gray-800">--</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Irregularity Analysis -->
+                <div class="bg-white rounded-xl shadow-lg p-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Irregularity Analysis</h2>
+                    <div id="irregularityStatus" class="text-center py-4 px-6 rounded-lg bg-red-100 text-red-800 mb-4">
+                        <i data-feather="alert-circle" class="inline mr-2"></i>
+                        <span>No irregular beats detected</span>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Irregular Beats</span>
+                            <span id="irregularBeats" class="font-semibold">0</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Last Irregularity</span>
+                            <span id="lastIrregularity" class="font-semibold">--</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Quick Actions -->
+                <div class="bg-white rounded-xl shadow-lg p-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Quick Actions</h2>
+                    <div class="space-y-3">
+                        <button id="exportBtn" class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition flex items-center justify-center">
+                            <i data-feather="download" class="mr-2"></i> Export Data
+                        </button>
+                        <button id="clearBtn" class="w-full px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition flex items-center justify-center">
+                            <i data-feather="trash-2" class="mr-2"></i> Clear History
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,257 @@

+// Global variables
+let ecgData = [];
+let bpmHistory = [];
+let historyRecords = [];
+let isPaused = false;
+let updateInterval;
+let ecgChart;
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    initializeChart();
+    startMonitoring();
+    setupEventListeners();
+});
+function initializeChart() {
+    const ctx = document.getElementById('ecgChart').getContext('2d');
+    ecgChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: Array(100).fill(''),
+            datasets: [{
+                label: 'ECG',
+                data: Array(100).fill(0),
+                borderColor: '#EF4444',
+                borderWidth: 2,
+                tension: 0.1,
+                pointRadius: 0
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    min: -2,
+                    max: 2,
+                    display: false
+                },
+                x: {
+                    display: false
+                }
+            },
+            animation: {
+                duration: 0
+            },
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    });
+}
+function startMonitoring() {
+    // Initial data
+    generateInitialData();
+    // Start updating the chart every second
+    updateInterval = setInterval(updateECGData, 1000);
+}
+function generateInitialData() {
+    // Generate some initial random ECG-like data
+    for (let i = 0; i < 100; i++) {
+        ecgData.push(generateECGPoint(i));
+    }
+    updateChart();
+}
+function generateECGPoint(index) {
+    // Simulate ECG data with some randomness
+    const position = index % 100;
+    // Generate a basic ECG waveform with some randomness
+    if (position > 90) {
+        return 0.2 + Math.random() * 0.1;
+    } else if (position > 80) {
+        return -0.5 - Math.random() * 0.2;
+    } else if (position > 70) {
+        return 1.5 + Math.random() * 0.3;
+    } else if (position > 60) {
+        return -0.8 - Math.random() * 0.2;
+    } else if (position > 50) {
+        return 0.3 + Math.random() * 0.1;
+    } else {
+        // Baseline with some small noise
+        return (Math.random() - 0.5) * 0.2;
+    }
+}
+function updateECGData() {
+    if (isPaused) return;
+    // Remove first point and add new one
+    ecgData.shift();
+    ecgData.push(generateECGPoint(Math.floor(Math.random() * 100)));
+    // Update chart
+    updateChart();
+    // Calculate and display BPM
+    const bpm = 60 + Math.floor(Math.random() * 60);
+    updateBPM(bpm);
+    // Check for irregularity (10% chance)
+    const isIrregular = Math.random() < 0.1;
+    updateIrregularityStatus(isIrregular, bpm);
+    // Add to history
+    addToHistory(bpm, isIrregular);
+    // Update stats
+    updateStats();
+}
+function updateChart() {
+    ecgChart.data.datasets[0].data = ecgData;
+    ecgChart.update();
+}
+function updateBPM(bpm) {
+    document.getElementById('bpmDisplay').textContent = bpm;
+    document.getElementById('currentBpm').textContent = bpm;
+    bpmHistory.push(bpm);
+    // Limit history to last 100 readings
+    if (bpmHistory.length > 100) {
+        bpmHistory.shift();
+    }
+}
+function updateIrregularityStatus(isIrregular, bpm) {
+    const statusElement = document.getElementById('irregularityStatus');
+    const heartStatus = document.getElementById('heartStatus');
+    if (isIrregular) {
+        statusElement.innerHTML = `
+            <i data-feather="alert-circle" class="inline mr-2"></i>
+            <span>Irregular heartbeat detected (${bpm} BPM)</span>
+        `;
+        statusElement.className = 'text-center py-4 px-6 rounded-lg irregular mb-4';
+        heartStatus.innerHTML = `
+            <span class="h-4 w-4 rounded-full bg-yellow-500 animate-pulse mr-2"></span>
+            <span class="text-gray-600">Irregular</span>
+        `;
+    } else {
+        statusElement.innerHTML = `
+            <i data-feather="check-circle" class="inline mr-2"></i>
+            <span>Regular heartbeat (${bpm} BPM)</span>
+        `;
+        statusElement.className = 'text-center py-4 px-6 rounded-lg regular mb-4';
+        heartStatus.innerHTML = `
+            <span class="h-4 w-4 rounded-full bg-green-500 animate-pulse mr-2"></span>
+            <span class="text-gray-600">Regular</span>
+        `;
+    }
+    feather.replace();
+}
+function addToHistory(bpm, isIrregular) {
+    const now = new Date();
+    const timeString = now.toLocaleTimeString();
+    historyRecords.unshift({
+        time: timeString,
+        bpm: bpm,
+        isIrregular: isIrregular,
+        timestamp: now.getTime()
+    });
+    // Limit history to 50 records
+    if (historyRecords.length > 50) {
+        historyRecords.pop();
+    }
+    updateHistoryTable();
+}
+function updateHistoryTable() {
+    const tableBody = document.getElementById('historyTable');
+    tableBody.innerHTML = '';
+    historyRecords.forEach(record => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.time}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium ${record.isIrregular ? 'text-yellow-600' : 'text-gray-900'}">${record.bpm}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm">
+                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${record.isIrregular ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}">
+                    ${record.isIrregular ? 'Irregular' : 'Regular'}
+                </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <button class="text-blue-500 hover:text-blue-700">
+                    <i data-feather="info" class="w-4 h-4"></i>
+                </button>
+            </td>
+        `;
+        tableBody.appendChild(row);
+    });
+    feather.replace();
+}
+function updateStats() {
+    if (bpmHistory.length === 0) return;
+    const sum = bpmHistory.reduce((a, b) => a + b, 0);
+    const avg = Math.round(sum / bpmHistory.length);
+    const min = Math.min(...bpmHistory);
+    const max = Math.max(...bpmHistory);
+    document.getElementById('averageBpm').textContent = avg;
+    document.getElementById('minBpm').textContent = min;
+    document.getElementById('maxBpm').textContent = max;
+    // Update irregular beats count
+    const irregularCount = historyRecords.filter(r => r.isIrregular).length;
+    document.getElementById('irregularBeats').textContent = irregularCount;
+    // Update last irregularity time
+    const lastIrregular = historyRecords.find(r => r.isIrregular);
+    if (lastIrregular) {
+        document.getElementById('lastIrregularity').textContent = lastIrregular.time;
+    }
+}
+function setupEventListeners() {
+    // Pause/Resume button
+    document.getElementById('pauseBtn').addEventListener('click', function() {
+        isPaused = !isPaused;
+        this.innerHTML = isPaused ?
+            '<i data-feather="play"></i> Resume' :
+            '<i data-feather="pause"></i> Pause';
+        feather.replace();
+    });
+    // Export button
+    document.getElementById('exportBtn').addEventListener('click', function() {
+        alert('Data exported successfully!');
+    });
+    // Clear button
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        if (confirm('Are you sure you want to clear all history?')) {
+            historyRecords = [];
+            bpmHistory = [];
+            updateHistoryTable();
+            updateStats();
+        }
+    });
+}

style.css CHANGED Viewed

@@ -1,28 +1,21 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+@keyframes heartbeat {
+    0% { transform: scale(1); }
+    25% { transform: scale(1.1); }
+    50% { transform: scale(1); }
+    75% { transform: scale(1.1); }
+    100% { transform: scale(1); }
 }
+.heartbeat {
+    animation: heartbeat 1s infinite;
 }
+.irregular {
+    background-color: #FECACA;
+    color: #991B1B;
 }
+.regular {
+    background-color: #D1FAE5;
+    color: #065F46;
+}