Update app.py

app.py

@@ -19,11 +19,13 @@ model = TSR.from_pretrained(
 model.renderer.set_chunk_size(131072)
 model.to(device)
 
+
 # Функция для проверки изображения
 def check_input_image(input_image):
     if input_image is None:
         raise gr.Error("No image uploaded!")
 
+
 # Функция обработки изображения
 def preprocess(input_image, do_remove_background, foreground_ratio):
     def fill_background(image):
@@ -43,6 +45,7 @@ def preprocess(input_image, do_remove_background, foreground_ratio):
             image = fill_background(image)
     return image
 
+
 # Функция генерации 3D модели
 def generate(image):
     time.sleep(3)  # Эмуляция времени обработки
@@ -53,19 +56,41 @@ def generate(image):
     mesh.export(mesh_path2.name)
     return mesh_path2.name
 
-# Функция для управления отображением лоадера
-def toggle_loader(container_id, visible):
-    display = "block" if visible else "none"
-    return f"""
-    <style>
-    #{container_id} #loading-bar {{
-        display: {display};
-    }}
-    </style>
-    """
+
+# Функция для отображения загрузки
+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):
+        super().__init__()
+        self.primary_hue = "#191a1e"
+        self.background_fill_primary = "#191a1e"
+        self.background_fill_secondary = "#191a1e"
+        self.background_fill_tertiary = "#191a1e"
+        self.text_color_primary = "#FFFFFF"
+        self.text_color_secondary = "#FFFFFF"
+        self.text_color_tertiary = "#FFFFFF"
+        self.input_background_fill = "#191a1e"
+        self.input_text_color = "#FFFFFF"
+
+
 css = """
+/* Скрываем нижний колонтитул */
+footer {
+    visibility: hidden;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+/* Лоадер (анимация) */
 #loading-bar {
     display: none; /* Скрыт по умолчанию */
     position: absolute;
@@ -79,40 +104,54 @@ css = """
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }
+/* Анимация вращения */
 @keyframes spin {
     0% { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
-.container {
-    position: relative;
+/* Контексты лоадера */
+.loader-DropImage {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+.loader-ProcessedImage {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+.loader-GLB {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
 }
 """
 
 # Интерфейс
-with gr.Blocks(css=css) as demo:
+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():
-            with gr.Column(elem_id="DropImage", elem_classes="container"):
-                input_image = gr.Image(
-                    label="Upload Image",
-                    image_mode="RGBA",
-                    sources="upload",
-                    type="pil",
-                    width=400,
-                    height=300,
-                )
-                drop_loader = gr.HTML("<div id='loading-bar'></div>")
-
-            with gr.Column(elem_id="ProcessedImage", elem_classes="container"):
-                processed_image = gr.Image(
-                    label="Processed Image",
-                    interactive=False,
-                    width=400,
-                    height=300,
-                )
-                process_loader = gr.HTML("<div id='loading-bar'></div>")
-
+            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,
+            )
         foreground_ratio = gr.Slider(
             label="Foreground Ratio",
             minimum=0.5,
@@ -120,43 +159,46 @@ with gr.Blocks(css=css) as demo:
             value=0.85,
             step=0.05,
         )
-        do_remove_background = gr.Checkbox(label="Remove Background", value=True)
+        do_remove_background = gr.Checkbox(
+            label="Remove Background",  # Текст перекрашен в белый через CSS
+            value=True,
+        )
         submit = gr.Button("Generate", elem_classes="generate-button")
-        with gr.Column(elem_id="GLB", elem_classes="container"):
-            output_model = gr.Model3D(
-                label="Generated GLB Model",
-                interactive=False,
-            )
-            glb_loader = gr.HTML("<div id='loading-bar'></div>")
+        loading_bar = gr.HTML("<div id='loading-bar'></div>")
+        output_model = gr.Model3D(
+            label="Generated GLB Model",
+            interactive=False,
+            elem_classes="gr-model3d-container",
+        )
 
         submit.click(
-            fn=lambda: toggle_loader("DropImage", True),  # Включаем лоадер в DropImage
+            fn=lambda: set_loader_context("DropImage"),  # Установить лоадер для DropImage
             inputs=[],
-            outputs=[drop_loader],
+            outputs=[loading_bar],
         ).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]
         ).then(
-            fn=lambda: toggle_loader("DropImage", False),  # Отключаем лоадер в DropImage
-            inputs=[],
-            outputs=[drop_loader],
-        ).then(
-            fn=lambda: toggle_loader("GLB", True),  # Включаем лоадер в GLB
-            inputs=[],
-            outputs=[glb_loader],
+            fn=lambda image: set_loader_context("GLB"),
+            inputs=[processed_image],
+            outputs=[loading_bar],
         ).then(
             fn=generate,
             inputs=[processed_image],
             outputs=[output_model]
         ).then(
-            fn=lambda: toggle_loader("GLB", False),  # Отключаем лоадер в GLB
+            fn=stop_loading,  # Отключаем прогресс-бар после завершения генерации
             inputs=[],
-            outputs=[glb_loader],
+            outputs=[loading_bar],
         )
 
 # Запуск приложения