Spaces:

KuRRe8
/

faulty-whistle-sensor-vigilante

Running

App Files Files Community

KuRRe8 commited on Nov 5

Commit

d4a6e3d

verified ·

1 Parent(s): b1de5af

做一个用于故障预警的网页，最上面是一个传感器指标的折线图，放一些虚拟的数据，并且在outlier点标注出来。下面是一个表格，也放一些虚拟的数据。要求美观，必要时候可以借鉴echats

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +116 -19
script.js +147 -0
style.css +53 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Faulty Whistle Sensor Vigilante
-emoji: 🏆
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Faulty Whistle - Sensor Vigilante
+colorFrom: green
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,116 @@
-<!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>Faulty Whistle - Sensor Monitoring</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-indigo-600 text-white shadow-lg">
+            <div class="container mx-auto px-4 py-6">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center space-x-3">
+                        <i data-feather="alert-triangle" class="w-8 h-8"></i>
+                        <h1 class="text-2xl font-bold">Faulty Whistle</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <span class="bg-indigo-500 px-3 py-1 rounded-full text-sm">Live Monitoring</span>
+                        <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition">
+                            <i data-feather="bell" class="inline mr-2"></i> Alerts
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <!-- Chart Section -->
+            <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-6 border-b border-gray-200">
+                    <h2 class="text-xl font-semibold text-gray-800 flex items-center">
+                        <i data-feather="activity" class="mr-2 text-indigo-500"></i>
+                        Sensor Metrics Overview
+                    </h2>
+                    <p class="text-gray-500 mt-1">Real-time monitoring with anomaly detection</p>
+                </div>
+                <div id="chartContainer" class="w-full h-96 p-4"></div>
+            </section>
+            <!-- Table Section -->
+            <section class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-6 border-b border-gray-200">
+                    <h2 class="text-xl font-semibold text-gray-800 flex items-center">
+                        <i data-feather="database" class="mr-2 text-indigo-500"></i>
+                        Recent Anomalies
+                    </h2>
+                    <p class="text-gray-500 mt-1">Last 24 hours of detected issues</p>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sensor ID</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metric</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Threshold</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200" id="anomalyTable">
+                            <!-- Table rows will be populated by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+                    <div class="text-sm text-gray-500">
+                        Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> anomalies
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
+                            Previous
+                        </button>
+                        <button class="px-3 py-1 border border-indigo-500 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+                            Next
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-white py-6">
+            <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-gray-300">© 2023 Faulty Whistle Monitoring System</p>
+                    </div>
+                    <div class="flex space-x-6">
+                        <a href="#" class="text-gray-300 hover:text-white transition">
+                            <i data-feather="github"></i>
+                        </a>
+                        <a href="#" class="text-gray-300 hover:text-white transition">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-300 hover:text-white transition">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <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,147 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize chart
+    const chartDom = document.getElementById('chartContainer');
+    const myChart = echarts.init(chartDom);
+    // Generate sample data with outliers
+    const hours = Array.from({length: 24}, (_, i) => `${i}:00`);
+    const temperatureData = Array.from({length: 24}, () => Math.floor(Math.random() * 10) + 20);
+    // Add some outliers
+    temperatureData[5] = 35;
+    temperatureData[12] = 5;
+    temperatureData[18] = 38;
+    const markPoints = [
+        { name: 'High Temp', value: '35°C', xAxis: 5, yAxis: 35, itemStyle: { color: '#ef4444' } },
+        { name: 'Low Temp', value: '5°C', xAxis: 12, yAxis: 5, itemStyle: { color: '#3b82f6' } },
+        { name: 'High Temp', value: '38°C', xAxis: 18, yAxis: 38, itemStyle: { color: '#ef4444' } }
+    ];
+    // Chart configuration
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            formatter: '{b}<br/>{a0}: {c0}°C'
+        },
+        legend: {
+            data: ['Temperature'],
+            right: 10,
+            top: 0
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: hours,
+            axisLine: {
+                lineStyle: {
+                    color: '#9ca3af'
+                }
+            },
+            axisLabel: {
+                color: '#6b7280'
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: 'Temperature (°C)',
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#9ca3af'
+                }
+            },
+            axisLabel: {
+                color: '#6b7280',
+                formatter: '{value}°C'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#e5e7eb'
+                }
+            }
+        },
+        series: [
+            {
+                name: 'Temperature',
+                type: 'line',
+                data: temperatureData,
+                smooth: true,
+                lineStyle: {
+                    width: 3,
+                    color: '#6366f1'
+                },
+                itemStyle: {
+                    color: '#6366f1'
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(99, 102, 241, 0.3)' },
+                        { offset: 1, color: 'rgba(99, 102, 241, 0.1)' }
+                    ])
+                },
+                markPoint: {
+                    data: markPoints,
+                    symbol: 'circle',
+                    symbolSize: 10,
+                    label: {
+                        show: true,
+                        formatter: '{b}',
+                        position: 'top',
+                        color: '#fff',
+                        backgroundColor: 'rgba(0,0,0,0.7)',
+                        padding: [3, 5],
+                        borderRadius: 4
+                    }
+                }
+            }
+        ]
+    };
+    myChart.setOption(option);
+    // Handle window resize
+    window.addEventListener('resize', function() {
+        myChart.resize();
+    });
+    // Populate table with sample data
+    const anomalyData = [
+        { id: 'S-001', metric: 'Temperature', value: '35°C', threshold: '30°C', timestamp: '2023-06-15 05:12:34', status: 'critical' },
+        { id: 'S-002', metric: 'Pressure', value: '12.5 bar', threshold: '10 bar', timestamp: '2023-06-15 08:45:21', status: 'warning' },
+        { id: 'S-003', metric: 'Vibration', value: '0.85 mm/s', threshold: '0.5 mm/s', timestamp: '2023-06-15 11:23:56', status: 'warning' },
+        { id: 'S-001', metric: 'Temperature', value: '5°C', threshold: '10°C', timestamp: '2023-06-15 12:34:12', status: 'critical' },
+        { id: 'S-004', metric: 'Humidity', value: '92%', threshold: '85%', timestamp: '2023-06-15 18:05:43', status: 'warning' }
+    ];
+    const tableBody = document.getElementById('anomalyTable');
+    anomalyData.forEach(item => {
+        const row = document.createElement('tr');
+        let statusClass = 'status-warning';
+        let statusText = 'Warning';
+        if (item.status === 'critical') {
+            statusClass = 'status-critical';
+            statusText = 'Critical';
+        }
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.id}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.metric}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold">${item.value}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.threshold}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.timestamp}</td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="${statusClass}">${statusText}</span>
+            </td>
+        `;
+        tableBody.appendChild(row);
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,63 @@
 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;
 }

+/* Custom styles that complement Tailwind */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+/* Chart container responsive behavior */
+#chartContainer {
+    min-height: 400px;
+}
+@media (max-width: 768px) {
+    #chartContainer {
+        height: 300px;
+    }
+}
+/* Table row hover effect */
+tbody tr {
+    transition: background-color 0.2s ease;
 }
+tbody tr:hover {
+    background-color: #f9fafb;
 }
+/* Status badges */
+.status-badge {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
 }
+.status-critical {
+    @apply bg-red-100 text-red-800;
 }
+.status-warning {
+    @apply bg-yellow-100 text-yellow-800;
 }
+.status-normal {
+    @apply bg-green-100 text-green-800;
+}