Update app.py

app.py

@@ -57,15 +57,6 @@ def generate(image):
     return mesh_path2.name
 
 
-# Функция для отображения загрузки
-def set_loader_context(context):
-    return f"<div id='loading-bar' class='loader-{context}' style='display: block;'></div>"
-
-
-def stop_loading():
-    return "<div id='loading-bar' style='display: none;'></div>"
-
-
 # Настройка темы и CSS
 class CustomTheme(gr.themes.Base):
     def __init__(self):
@@ -82,17 +73,9 @@ class CustomTheme(gr.themes.Base):
 
 
 css = """
-/* Скрываем нижний колонтитул */
-footer {
-    visibility: hidden;
-    height: 0;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}
-/* Лоадер (анимация) */
-#loading-bar {
-    display: none; /* Скрыт по умолчанию */
+/* Общий стиль для лоадера */
+.loading-bar {
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -100,36 +83,30 @@ footer {
     width: 60px;
     height: 60px;
     border: 8px solid #f3f3f3;
-    border-top: 8px solid #5271FF; /* Цвет лоадера */
+    border-top: 8px 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); }
 }
-/* Контексты лоадера */
-.loader-DropImage {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+
+/* Лоадер для DropImage */
+#drop-image-loader .loading-bar {
+    display: block;
 }
-.loader-ProcessedImage {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+
+/* Лоадер для Processed Image */
+#processed-image-loader .loading-bar {
+    display: block;
 }
-.loader-GLB {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+
+/* Лоадер для GLB */
+#glb-loader .loading-bar {
+    display: block;
 }
 """
 
@@ -160,45 +137,42 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             step=0.05,
         )
         do_remove_background = gr.Checkbox(
-            label="Remove Background",  # Текст перекрашен в белый через CSS
+            label="Remove Background",
             value=True,
         )
         submit = gr.Button("Generate", elem_classes="generate-button")
-        loading_bar = gr.HTML("<div id='loading-bar'></div>")
+        drop_loader = gr.HTML("<div id='drop-image-loader' class='loading-bar'></div>")
+        process_loader = gr.HTML("<div id='processed-image-loader' class='loading-bar'></div>")
         output_model = gr.Model3D(
             label="Generated GLB Model",
             interactive=False,
-            elem_classes="gr-model3d-container",
         )
+        model_loader = gr.HTML("<div id='glb-loader' class='loading-bar'></div>")
 
         submit.click(
-            fn=lambda: set_loader_context("DropImage"),  # Установить лоадер для DropImage
+            fn=lambda: "<div id='drop-image-loader' class='loading-bar'></div>",
             inputs=[],
-            outputs=[loading_bar],
+            outputs=[drop_loader],
         ).then(
             fn=check_input_image,
             inputs=[input_image],
             outputs=[]
-        ).then(
-            fn=lambda image, do_remove_bg, ratio: set_loader_context("ProcessedImage"),
-            inputs=[input_image, do_remove_background, foreground_ratio],
-            outputs=[loading_bar],
         ).then(
             fn=preprocess,
             inputs=[input_image, do_remove_background, foreground_ratio],
-            outputs=[processed_image]
+            outputs=[processed_image],
         ).then(
-            fn=lambda image: set_loader_context("GLB"),
-            inputs=[processed_image],
-            outputs=[loading_bar],
+            fn=lambda: "<div id='processed-image-loader' class='loading-bar'></div>",
+            inputs=[],
+            outputs=[process_loader],
         ).then(
             fn=generate,
             inputs=[processed_image],
-            outputs=[output_model]
+            outputs=[output_model],
         ).then(
-            fn=stop_loading,  # Отключаем прогресс-бар после завершения генерации
+            fn=lambda: "<div id='glb-loader' class='loading-bar'></div>",
             inputs=[],
-            outputs=[loading_bar],
+            outputs=[model_loader],
         )
 
 # Запуск приложения