Hugging Face's logo

Spaces:
DmitrMakeev
/
api_g
Running

App Files Community
DmitrMakeev commited on
Commit
7c48504
·
verified ·
1 Parent(s): 491c891

Update show_image.html

Browse files
Files changed (1) hide show
  1. show_image.html +19 -40
show_image.html CHANGED
@@ -61,57 +61,36 @@
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
 
91
- // Загружаем статистику цветов
92
- fetch("/color_stats?t=" + timestamp)
93
- .then(response => response.json())
94
- .then(data => {
95
- document.getElementById("green").textContent = data.green || 0;
96
- document.getElementById("yellow").textContent = data.yellow || 0;
97
- document.getElementById("orange").textContent = data.orange || 0;
98
- document.getElementById("brown").textContent = data.brown || 0;
99
-
100
-
101
- })
102
- .catch(error => {
103
- console.error("Ошибка при загрузке данных:", error);
104
- });
105
  }
106
 
107
  // Первичная загрузка при открытии страницы
108
- document.addEventListener('DOMContentLoaded', updateImageAndStats);
109
-
110
- // Автоматическое обновление каждые 10 секунд
111
- setInterval(updateImageAndStats, 10000);
112
-
113
- // Кнопка для ручного обновления (по желанию)
114
- 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>';
115
  </script>
116
  </body>
117
  </html>
 
61
  </style>
62
  </head>
63
  <body>
64
+ <h1>Текущее состояние растения</h1>
65
+ <img id="plantImage" src="/last_image" alt="Изображение растения">
66
 
67
+ <button class="refresh-btn" onclick="updateImage()">Обновить изображение</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
68
 
69
  <script>
70
+ function updateImage() {
71
  // Добавляем timestamp для предотвращения кеширования
72
  const timestamp = new Date().getTime();
73
  const imgElement = document.getElementById("plantImage");
 
74
 
75
+ // Показываем индикатор загрузки
76
+ imgElement.style.opacity = "0.7";
77
 
78
+ // Обновляем источник изображения
79
+ imgElement.src = "/last_image?t=" + timestamp;
80
+
81
+ // Возвращаем нормальную прозрачность после загрузки
82
+ imgElement.onload = function() {
83
+ imgElement.style.opacity = "1";
84
+ }
 
 
 
 
 
 
 
85
  }
86
 
87
  // Первичная загрузка при открытии страницы
88
+ document.addEventListener('DOMContentLoaded', function() {
89
+ updateImage();
90
+
91
+ // Автоматическое обновление каждые 10 секунд
92
+ setInterval(updateImage, 10000);
93
+ });
 
94
  </script>
95
  </body>
96
  </html>