Hugging Face's logo

Spaces:
gidr
/
flask_inference_api_g
Running

App Files Community
DmitrMakeev commited on
Commit
7858726
·
verified ·
1 Parent(s): d00009b

Update show_image.html

Browse files
Files changed (1) hide show
  1. show_image.html +85 -25
show_image.html CHANGED
@@ -1,59 +1,119 @@
1
- <!-- show_image.html -->
2
  <!DOCTYPE html>
3
  <html lang="ru">
4
  <head>
5
  <meta charset="UTF-8">
 
6
  <title>Мониторинг растения</title>
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
10
- text-align: center;
 
11
  padding: 20px;
 
 
 
 
12
  }
13
- img {
14
- max-width: 90%;
15
  height: auto;
16
- border: 2px solid #000;
 
17
  margin-bottom: 20px;
18
  }
19
  .stats {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  font-size: 1.2em;
21
- margin-top: 10px;
22
  }
23
- .green { color: green; }
24
- .yellow { color: goldenrod; }
25
- .brown { color: brown; }
26
  </style>
27
  </head>
28
  <body>
29
- <h1>Последнее изображение растения</h1>
30
- <img id="plantImage" src="/last_image" alt="Растение">
 
31
  <div class="stats">
32
- <div class="green">Зелёный: <span id="green">0</span>%</div>
33
- <div class="yellow">Жёлтый: <span id="yellow">0</span>%</div>
34
- <div class="brown">Коричневый: <span id="brown">0</span>%</div>
 
 
 
 
 
 
 
 
 
35
  </div>
36
 
37
  <script>
38
  function updateImageAndStats() {
 
39
  const timestamp = new Date().getTime();
40
- document.getElementById("plantImage").src = "/last_image?t=" + timestamp;
41
-
42
- fetch("/color_stats")
 
 
 
 
 
43
  .then(response => response.json())
44
  .then(data => {
45
- document.getElementById("green").textContent = data.green;
46
- document.getElementById("yellow").textContent = data.yellow;
47
- document.getElementById("brown").textContent = data.brown;
 
 
 
 
 
 
 
48
  });
49
  }
50
 
51
- // Первичная загрузка
52
- updateImageAndStats();
53
-
54
- // Обновление каждые 10 секунд
55
  setInterval(updateImageAndStats, 10000);
 
 
 
56
  </script>
57
  </body>
58
  </html>
59
-
 
 
1
  <!DOCTYPE html>
2
  <html lang="ru">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Мониторинг растения</title>
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
10
+ max-width: 800px;
11
+ margin: 0 auto;
12
  padding: 20px;
13
+ text-align: center;
14
+ }
15
+ h1 {
16
+ color: #2e7d32;
17
  }
18
+ #plantImage {
19
+ max-width: 100%;
20
  height: auto;
21
+ border: 2px solid #ddd;
22
+ border-radius: 8px;
23
  margin-bottom: 20px;
24
  }
25
  .stats {
26
+ display: flex;
27
+ flex-wrap: wrap;
28
+ justify-content: center;
29
+ gap: 15px;
30
+ margin-top: 20px;
31
+ }
32
+ .stat-item {
33
+ padding: 10px 15px;
34
+ border-radius: 5px;
35
+ font-weight: bold;
36
+ min-width: 120px;
37
+ }
38
+ .green {
39
+ background-color: #e8f5e9;
40
+ color: #2e7d32;
41
+ border: 1px solid #a5d6a7;
42
+ }
43
+ .yellow {
44
+ background-color: #fffde7;
45
+ color: #f9a825;
46
+ border: 1px solid #fff59d;
47
+ }
48
+ .orange {
49
+ background-color: #fff3e0;
50
+ color: #ef6c00;
51
+ border: 1px solid #ffcc80;
52
+ }
53
+ .brown {
54
+ background-color: #efebe9;
55
+ color: #6d4c41;
56
+ border: 1px solid #d7ccc8;
57
+ }
58
+ .color-value {
59
  font-size: 1.2em;
 
60
  }
 
 
 
61
  </style>
62
  </head>
63
  <body>
64
+ <h1>Анализ состояния растения</h1>
65
+ <img id="plantImage" src="/last_image" alt="Текущее состояние растения">
66
+
67
  <div class="stats">
68
+ <div class="stat-item green">
69
+ Зелёный: <span class="color-value" id="green">0</span>%
70
+ </div>
71
+ <div class="stat-item yellow">
72
+ Жёлтый: <span class="color-value" id="yellow">0</span>%
73
+ </div>
74
+ <div class="stat-item orange">
75
+ Оранжевый: <span class="color-value" id="orange">0</span>%
76
+ </div>
77
+ <div class="stat-item brown">
78
+ Коричневый: <span class="color-value" id="brown">0</span>%
79
+ </div>
80
  </div>
81
 
82
  <script>
83
  function updateImageAndStats() {
84
+ // Добавляем timestamp для предотвращения кеширования
85
  const timestamp = new Date().getTime();
86
+ const imgElement = document.getElementById("plantImage");
87
+ imgElement.src = "/last_image?t=" + timestamp;
88
+
89
+ // Показываем загрузку
90
+ imgElement.style.opacity = "0.7";
91
+
92
+ // Загружаем статистику цветов
93
+ fetch("/color_stats?t=" + timestamp)
94
  .then(response => response.json())
95
  .then(data => {
96
+ document.getElementById("green").textContent = data.green || 0;
97
+ document.getElementById("yellow").textContent = data.yellow || 0;
98
+ document.getElementById("orange").textContent = data.orange || 0;
99
+ document.getElementById("brown").textContent = data.brown || 0;
100
+
101
+ // Возвращаем нормальную прозрачность после загрузки
102
+ imgElement.style.opacity = "1";
103
+ })
104
+ .catch(error => {
105
+ console.error("Ошибка при загрузке данных:", error);
106
  });
107
  }
108
 
109
+ // Первичная загрузка при открытии страницы
110
+ document.addEventListener('DOMContentLoaded', updateImageAndStats);
111
+
112
+ // Автоматическое обновление каждые 10 секунд
113
  setInterval(updateImageAndStats, 10000);
114
+
115
+ // Кнопка для ручного обновления (по желанию)
116
+ document.body.innerHTML += '<button onclick="updateImageAndStats()" style="margin-top:20px;padding:10px 15px;background:#2196f3;color:white;border:none;border-radius:5px;cursor:pointer;">Обновить данные</button>';
117
  </script>
118
  </body>
119
  </html>