Update app.py

app.py

@@ -60,16 +60,16 @@ def generate(image):
 
 # Функция для отображения загрузки
 def start_loading():
-    return "visible"
+    return "<div id='loading-bar' style='display: block;'></div>"
 
 
 def stop_loading():
-    return "hidden"
+    return "<div id='loading-bar' style='display: none;'></div>"
 
 
 # Настройка темы и CSS
 css = """
-/* Фон для всей страницы */
+/* Глобальный фон для всей страницы */
 body, .gr-block, .gr-container {
     background-color: #191a1e !important;
     color: #FFFFFF !important;
@@ -97,6 +97,27 @@ h1, h2, h3, h4, h5, h6, p, label, .gr-slider-label, .gr-checkbox {
     color: #FFFFFF !important;
 }
 
+/* Прогресс-бар */
+#loading-bar {
+    display: none; /* Прячем по умолчанию */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    border: 10px solid #f3f3f3;
+    border-top: 10px solid #5271FF;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+/* Анимация вращения */
+@keyframes spin {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
 /* Фон и границы для областей изображений */
 gr-image-upload {
     background-color: #191a1e !important;
@@ -117,16 +138,12 @@ gr-image-upload {
 }
 
 /* Значение слайдера */
-.gr-slider input[type="range"]::-webkit-slider-thumb {
-    background-color: #5271FF !important;
-}
-
 .gr-slider span {
     color: #FFFFFF !important;
     font-weight: bold !important;
 }
 
-/* Фон и текст в вкладках */
+/* Фон и текст вкладок */
 .gr-tab {
     background-color: #191a1e !important;
     border: 1px solid #FFFFFF !important;
@@ -138,27 +155,6 @@ gr-image-upload {
     color: #FFFFFF !important;
     font-weight: bold !important;
 }
-/* Прогресс-бар */
-#loading-bar {
-    visibility: hidden;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100px;
-    height: 100px;
-    border: 10px solid #f3f3f3;
-    border-top: 10px solid #5271FF;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-/* Анимация вращения */
-@keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
-}
-
 """
 
 # Интерфейс