Update app.py

app.py

@@ -156,11 +156,16 @@ input[type="text"], textarea {
 
 """
 
+# Интерфейс
 # Интерфейс
 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",
@@ -169,12 +174,18 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 width=400,
                 height=300,
             )
-            processed_image = gr.Image(
-                label="Processed Image",
-                interactive=False,
-                width=400,
-                height=300,
-            )
+
+            # Обработанное изображение и лоадер
+            with gr.Column(elem_id="processed-container"):  # Контейнер для центровки лоадера
+                processed_image = gr.Image(
+                    label="Processed Image",
+                    interactive=False,
+                    width=400,
+                    height=300,
+                )
+                processed_loader = gr.HTML("<div id='loading-bar-processed'></div>")
+
+        # Слайдер и чекбокс
         foreground_ratio = gr.Slider(
             label="Foreground Ratio",
             minimum=0.5,
@@ -186,30 +197,47 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             label="Remove Background",
             value=True,
         )
-        submit = gr.Button("Generate")
-        loading_bar = gr.HTML("<div id='loading-bar'></div>")
-        output_model = gr.Model3D(label="Generated GLB Model", interactive=False)
 
+        # Кнопка генерации
+        submit = gr.Button("Generate", elem_classes="generate-button")
+
+        # Контейнер для модели GLB и лоадера
+        with gr.Column(elem_id="glb-container"):  # Контейнер для центровки лоадера
+            output_model = gr.Model3D(
+                label="Generated GLB Model",
+                interactive=False,
+            )
+            glb_loader = gr.HTML("<div id='loading-bar-glb'></div>")
+
+        # Логика кнопки и цепочки событий
         submit.click(
-            fn=start_loading,
+            fn=start_loading_processed,  # Запускаем лоадер для обработанного изображения
             inputs=[],
-            outputs=[loading_bar],
+            outputs=[processed_loader],
         ).then(
-            fn=check_input_image,
+            fn=check_input_image,  # Проверяем изображение
             inputs=[input_image],
             outputs=[]
         ).then(
-            fn=preprocess,
+            fn=preprocess,  # Обрабатываем изображение
             inputs=[input_image, do_remove_background, foreground_ratio],
             outputs=[processed_image]
         ).then(
-            fn=generate,
+            fn=stop_loading_processed,  # Останавливаем лоадер для обработанного изображения
+            inputs=[],
+            outputs=[processed_loader],
+        ).then(
+            fn=start_loading_glb,  # Запускаем лоадер для модели GLB
+            inputs=[],
+            outputs=[glb_loader],
+        ).then(
+            fn=generate,  # Генерируем 3D модель
             inputs=[processed_image],
             outputs=[output_model]
         ).then(
-            fn=stop_loading,
+            fn=stop_loading_glb,  # Останавливаем лоадер для модели GLB
             inputs=[],
-            outputs=[loading_bar],
+            outputs=[glb_loader],
         )
 
 # Запуск приложения
@@ -217,4 +245,4 @@ demo.launch(
     server_name="0.0.0.0",
     server_port=7860,
     share=True,
-)
+)