Update app.py

app.py

@@ -1,3 +1,5 @@
+
+
 import gradio as gr
 import time  # Для эмуляции времени загрузки
 import tempfile
@@ -57,13 +59,19 @@ def generate(image):
     return mesh_path2.name
 
 
-# Функция для отображения загрузки
-def start_loading():
-    return "<div id='loading-bar' style='display: block;'></div>"
-
+def start_loading(container_id):
+    return f"""
+        <div class="loader" id="loader-{container_id}"></div>
+        <script>
+            document.getElementById('loader-{container_id}').style.display = 'block';
+        </script>
+    """
 
-def stop_loading():
-    return "<div id='loading-bar' style='display: none;'></div>"
+def stop_loading(container_id):
+    return f"""
+        <script>
+            document.getElementById('loader-{container_id}').style.display = 'none';
+        </script>
 
 
 # Настройка темы и CSS
@@ -82,8 +90,7 @@ class CustomTheme(gr.themes.Base):
 
 
 css = """
-/* Скрываем нижний колонтитул */
-footer {
+ooter {
     visibility: hidden;
     height: 0;
     margin: 0;
@@ -115,23 +122,23 @@ input[type="text"], textarea {
 
 /* Слайдер */
 .gr-slider {
-    height: 40px !important; /* Увеличение высоты слайдера */
-    transition: all 0.3s ease !important; /* Плавные переходы */
+    height: 40px !important;
+    transition: all 0.3s ease !important;
 }
 
 .gr-slider .slider-value {
-    display: none !important; /* Прячем текст значения */
+    display: none !important;
 }
 
 .gr-slider .slider::-webkit-slider-thumb {
     height: 15px !important;
     width: 15px !important;
-    background-color: #5271FF !important; /* Цвет совпадает с кнопкой */
+    background-color: #5271FF !important;
     border-radius: 50%;
 }
 
 .gr-slider .slider::-webkit-slider-runnable-track {
-    background: #5271FF !important; /* Цвет заполнения слайдера */
+    background: #5271FF !important;
 }
 
 /* Кнопка Generate */
@@ -143,7 +150,7 @@ input[type="text"], textarea {
 }
 
 .generate-button:hover {
-    background-color: #405BBF !important; /* Цвет при наведении */
+    background-color: #405BBF !important;
 }
 
 /* Выделяем текст для Prompt */
@@ -152,9 +159,16 @@ input[type="text"], textarea {
     color: #FFFFFF;
 }
 
-/* Лоадер (анимация) */
+/* Контейнеры для правильного позиционирования лоадера */
+.upload-container,
+.processed-container,
+.gr-model3d-container {
+    position: relative !important;
+}
+
+/* Обновленный стиль лоадера */
 #loading-bar {
-    display: none; /* Скрыт по умолчанию */
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -162,9 +176,10 @@ input[type="text"], textarea {
     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;
+    z-index: 1000;
 }
 
 /* Анимация вращения */
@@ -177,6 +192,19 @@ input[type="text"], textarea {
 .gr-checkbox label {
     color: #FFFFFF !important;
 }
+
+/* Убедимся, что контейнеры изображений правильно позиционированы */
+.image-container {
+    position: relative !important;
+    width: 100%;
+    height: 100%;
+}
+
+/* Стили для контейнера с 3D моделью */
+.gr-model3d-container {
+    position: relative !important;
+    min-height: 400px;
+}
 """
 
 # Интерфейс
@@ -184,20 +212,26 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
     with gr.Column():
         gr.Markdown("<span style='color: white; font-weight: bold;'>Upload and Process Your Image</span>")
         with gr.Row():
-            input_image = gr.Image(
-                label="Upload Image",
-                image_mode="RGBA",
-                sources="upload",
-                type="pil",
-                width=400,
-                height=300,
-            )
-            processed_image = gr.Image(
-                label="Processed Image",
-                interactive=False,
-                width=400,
-                height=300,
-            )
+            with gr.Column(elem_classes="upload-container"):
+                input_image = gr.Image(
+                    label="Upload Image",
+                    image_mode="RGBA",
+                    sources="upload",
+                    type="pil",
+                    width=400,
+                    height=300,
+                )
+                upload_loader = gr.HTML(visible=False)
+            
+            with gr.Column(elem_classes="processed-container"):
+                processed_image = gr.Image(
+                    label="Processed Image",
+                    interactive=False,
+                    width=400,
+                    height=300,
+                )
+                process_loader = gr.HTML(visible=False)
+                
         foreground_ratio = gr.Slider(
             label="Foreground Ratio",
             minimum=0.5,
@@ -206,42 +240,59 @@ 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>")
-        output_model = gr.Model3D(
-            label="Generated GLB Model",
-            interactive=False,
-            elem_classes="gr-model3d-container",
-        )
+        
+        with gr.Column(elem_classes="model3d-container"):
+            output_model = gr.Model3D(
+                label="Generated GLB Model",
+                interactive=False,
+            )
+            model_loader = gr.HTML(visible=False)
 
+        # Обновляем цепочку событий
         submit.click(
-            fn=start_loading,  # Включить прогресс-бар
-            inputs=[],
-            outputs=[loading_bar],
+            fn=lambda: """<div id='loading-bar' style='display: block;'></div>""",
+            outputs=[upload_loader],
+            show_progress=False,
         ).then(
             fn=check_input_image,
             inputs=[input_image],
-            outputs=[]
+            outputs=[],
+        ).then(
+            fn=lambda: """<div id='loading-bar' style='display: block;'></div>""",
+            outputs=[process_loader],
+            show_progress=False,
         ).then(
             fn=preprocess,
             inputs=[input_image, do_remove_background, foreground_ratio],
-            outputs=[processed_image]
+            outputs=[processed_image],
+        ).then(
+            fn=lambda: """<div id='loading-bar' style='display: none;'></div>""",
+            outputs=[upload_loader],
+            show_progress=False,
+        ).then(
+            fn=lambda: """<div id='loading-bar' style='display: block;'></div>""",
+            outputs=[model_loader],
+            show_progress=False,
         ).then(
             fn=generate,
             inputs=[processed_image],
-            outputs=[output_model]
+            outputs=[output_model],
+        ).then(
+            fn=lambda: """<div id='loading-bar' style='display: none;'></div>""",
+            outputs=[process_loader],
+            show_progress=False,
         ).then(
-            fn=stop_loading,  # Отключаем прогресс-бар после завершения генерации
-            inputs=[],
-            outputs=[loading_bar],
+            fn=lambda: """<div id='loading-bar' style='display: none;'></div>""",
+            outputs=[model_loader],
+            show_progress=False,
         )
-
 # Запуск приложения
 demo.launch(
     server_name="0.0.0.0",
     server_port=7860,
     share=True,
-)
+)