Hugging Face's logo

Spaces:
Prathamesh1420
/
temerature_detection
Running

App Files Community
Prathamesh1420 commited on
Commit
abcd3a0
·
verified ·
1 Parent(s): 82558ea

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +92 -125
templates/index.html CHANGED
@@ -1,135 +1,102 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Flask Temperature Monitor</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
10
- <style>
11
- .video-container {
12
- position: relative;
13
- overflow: hidden;
14
- border-radius: 12px;
15
- box-shadow: 0 10px 25px rgba(0,0,0,0.2);
16
- }
17
- .detection-canvas {
18
- position: absolute;
19
- top: 0;
20
- left: 0;
21
- pointer-events: none;
22
- }
23
- .stats-card {
24
- backdrop-filter: blur(10px);
25
- background: rgba(255, 255, 255, 0.1);
26
- }
27
- .pulse {
28
- animation: pulse 2s infinite;
29
- }
30
- @keyframes pulse {
31
- 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
32
- 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
33
- 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
34
- }
35
- </style>
36
  </head>
37
- <body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white">
38
- <div class="container mx-auto px-4 py-8">
39
- <header class="text-center mb-12">
40
- <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
41
- Flask Temperature Monitor
42
- </h1>
43
- <p class="text-gray-300 max-w-2xl mx-auto">
44
- Real-time temperature monitoring using your device's camera.
45
- Grant camera access to start monitoring.
46
- </p>
47
- </header>
48
 
49
- <main>
50
- <div class="flex flex-col lg:flex-row gap-8">
51
- <!-- Camera Feed Section -->
52
- <div class="lg:w-2/3">
53
- <div class="video-container relative">
54
- <video id="webcamFeed" autoplay playsinline class="w-full h-auto rounded-lg bg-gray-800 aspect-video"></video>
55
- <canvas id="hiddenCanvas" class="detection-canvas w-full h-auto rounded-lg"></canvas>
56
-
57
- <!-- Camera Access Prompt -->
58
- <div id="cameraPrompt" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-900 bg-opacity-80 rounded-lg">
59
- <div class="text-center p-8">
60
- <i class="fas fa-camera text-6xl text-blue-400 mb-4"></i>
61
- <h2 class="text-2xl font-bold mb-2">Camera Access Required</h2>
62
- <p class="text-gray-300 mb-6">Please allow camera access to enable live temperature monitoring</p>
63
- <button id="startBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 pulse">
64
- Start Camera
65
- </button>
66
- </div>
67
- </div>
68
- </div>
69
 
70
- <!-- Controls -->
71
- <div class="mt-6 flex flex-wrap gap-4 justify-center">
72
- <button id="toggleDetectionBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg flex items-center disabled:opacity-50">
73
- <i class="fas fa-play mr-2"></i> Start Monitoring
74
- </button>
75
- <button id="toggleCameraBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg flex items-center">
76
- <i class="fas fa-sync mr-2"></i> Switch Camera
77
- </button>
78
- <button id="captureBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg flex items-center">
79
- <i class="fas fa-camera mr-2"></i> Capture Frame
80
- </button>
81
- </div>
82
- </div>
 
 
83
 
84
- <!-- Temperature Results -->
85
- <div class="lg:w-1/3">
86
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 h-full">
87
- <h2 class="text-2xl font-bold mb-4 flex items-center">
88
- <i class="fas fa-thermometer-half mr-3 text-blue-400"></i> Temperature Results
89
- </h2>
90
-
91
- <div class="stats-card rounded-lg p-4 mb-6">
92
- <div class="grid grid-cols-2 gap-4 text-center">
93
- <div>
94
- <div class="text-sm text-gray-300">Current</div>
95
- <div id="currentTemp" class="text-2xl font-bold">--</div>
96
- </div>
97
- <div>
98
- <div class="text-sm text-gray-300">Average</div>
99
- <div id="avgTemp" class="text-2xl font-bold">--</div>
100
- </div>
101
- <div>
102
- <div class="text-sm text-gray-300">Min</div>
103
- <div id="minTemp" class="text-2xl font-bold">--</div>
104
- </div>
105
- <div>
106
- <div class="text-sm text-gray-300">Max</div>
107
- <div id="maxTemp" class="text-2xl font-bold">--</div>
108
- </div>
109
- </div>
110
- </div>
111
-
112
- <h3 class="text-lg font-semibold mb-3 flex items-center">
113
- <i class="fas fa-chart-line mr-2 text-blue-400"></i> Temperature History
114
- </h3>
115
-
116
- <div class="chart-container">
117
- <canvas id="temperatureChart"></canvas>
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- </main>
123
 
124
- <footer class="mt-16 text-center text-gray-400">
125
- <p>Powered by Flask and Chart.js | Built with Tailwind CSS</p>
126
- <p class="mt-2">Note: Temperature processing happens on the server</p>
127
- </footer>
128
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
 
130
- <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
131
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.min.js"></script>
132
- <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
133
- <script src="{{ url_for('static', filename='script.js') }}"></script>
134
  </body>
135
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>Machine Temperature Monitor</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
+ <body class="bg-gray-900 text-white">
10
+ <div class="container mx-auto p-6">
11
+ <h1 class="text-3xl font-bold text-center mb-6">
12
+ Machine Temperature Monitor
13
+ </h1>
 
 
 
 
 
 
14
 
15
+ <!-- Live video -->
16
+ <div class="flex justify-center">
17
+ <video id="video" autoplay playsinline
18
+ class="rounded-lg shadow-lg aspect-video w-full md:w-2/3"></video>
19
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
 
21
+ <!-- Stats -->
22
+ <div class="grid grid-cols-3 gap-4 text-center my-6">
23
+ <div class="bg-gray-800 rounded-lg p-4">
24
+ <p class="text-sm text-gray-400">Current&nbsp;(°C)</p>
25
+ <p id="curr" class="text-2xl font-bold">--</p>
26
+ </div>
27
+ <div class="bg-gray-800 rounded-lg p-4">
28
+ <p class="text-sm text-gray-400">Min&nbsp;last hour</p>
29
+ <p id="min" class="text-2xl font-bold">--</p>
30
+ </div>
31
+ <div class="bg-gray-800 rounded-lg p-4">
32
+ <p class="text-sm text-gray-400">Max&nbsp;last hour</p>
33
+ <p id="max" class="text-2xl font-bold">--</p>
34
+ </div>
35
+ </div>
36
 
37
+ <!-- Line chart -->
38
+ <canvas id="chart" height="120"></canvas>
39
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
 
41
+ <script>
42
+ let video = document.getElementById('video');
43
+ let chart, chartData = {labels: [], datasets:[{data:[], tension:.3}]};
44
+
45
+ // ── Camera feed ───────────────────────────────────────────────────────────────
46
+ navigator.mediaDevices.getUserMedia({video:true})
47
+ .then(s => { video.srcObject = s; })
48
+ .catch(err => alert("Camera error: "+err));
49
+
50
+ // ── Initialise Chart.js ───────────────────────────────────────────────────────
51
+ function initChart(){
52
+ const ctx = document.getElementById('chart').getContext('2d');
53
+ chart = new Chart(ctx, {
54
+ type:'line',
55
+ data: chartData,
56
+ options:{responsive:true, plugins:{legend:false}}
57
+ });
58
+ }
59
+ initChart();
60
+
61
+ // ── Take snapshot every 10 s ──────────────────────────────────────────────────
62
+ const off = document.createElement('canvas');
63
+ const SNAP_MS = 10_000;
64
+
65
+ async function snapLoop(){
66
+ if(!video.videoWidth) { setTimeout(snapLoop,1000); return; }
67
+ off.width = video.videoWidth;
68
+ off.height = video.videoHeight;
69
+ off.getContext('2d').drawImage(video,0,0,off.width,off.height);
70
+ const dataUri = off.toDataURL('image/jpeg');
71
+
72
+ fetch('/snapshot',{method:'POST',
73
+ headers:{'Content-Type':'application/json'},
74
+ body: JSON.stringify({image: dataUri})})
75
+ .then(r=>r.json())
76
+ .then(updateStats)
77
+ .catch(console.error);
78
+
79
+ setTimeout(snapLoop, SNAP_MS);
80
+ }
81
+ snapLoop();
82
+
83
+ // ── Poll aggregated stats every 2 s for chart ────────────────────────────────
84
+ async function poll(){
85
+ const res = await fetch('/stats'); const js = await res.json();
86
+ document.getElementById('min').textContent = js.min ?? '--';
87
+ document.getElementById('max').textContent = js.max ?? '--';
88
+ if(js.series.length){
89
+ const [ , latest] = js.series.at(-1);
90
+ document.getElementById('curr').textContent = latest;
91
+ chartData.labels = js.series.map(s=>new Date(s[0]).toLocaleTimeString());
92
+ chartData.datasets[0].data = js.series.map(s=>s[1]);
93
+ chart.update();
94
+ }
95
+ setTimeout(poll, 2000);
96
+ }
97
+ poll();
98
 
99
+ function updateStats(j){ /* handled by /stats poll */ }
100
+ </script>
 
 
101
  </body>
102
+ </html>